* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: #232323; color: #d8d8d8;
  font: 12px/1.45 -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none;
}

header {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 8px;
  background: #2b2b2b; border-bottom: 1px solid #141414;
}
#seqInfo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 13px; font-weight: 700; color: #C9A45C; letter-spacing: .01em; }
.credit { font-size: 10px; font-style: italic; font-weight: 300; color: #8f8f8f; }
.muted { color: #8a8a8a; font-size: 10.5px; }

main { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 9px; }

textarea {
  width: 100%; resize: vertical;
  background: #1e1e1e; color: #ececec;
  border: 1px solid #111; border-radius: 3px;
  padding: 8px 9px; font: 14px/1.6 -apple-system, sans-serif;
  -webkit-user-select: text; user-select: text;
}
textarea:focus { outline: none; border-color: #C9A45C; }

.fields { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; margin-top: 2px; }
.fields label { color: #a8a8a8; font-size: 11px; }
input[type=text], .fields textarea {
  width: 100%; min-width: 0; background: #1e1e1e; color: #ececec;
  border: 1px solid #111; border-radius: 3px; padding: 5px 8px; font: 13px/1.4 -apple-system, sans-serif;
  -webkit-user-select: text; user-select: text;
}
input[type=text]:focus, .fields textarea:focus { outline: none; border-color: #C9A45C; }
.fields textarea { resize: none; overflow: hidden; }
.fields.pairs { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.fields input::placeholder { color: #5f5f5f; }

label.chk { display: flex; align-items: center; gap: 6px; color: #a8a8a8; font-size: 11px; cursor: pointer; }
label.chk input { margin: 0; }

.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }

.group { display: flex; flex-direction: column; gap: 8px; }
.group + .group { border-top: 1px solid #1a1a1a; padding-top: 10px; }
.group h2 { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.actions button {
  background: #C9A45C; color: #1a1a1a; border: 1px solid #8f7440; border-radius: 3px;
  padding: 7px 2px; font: 600 10.5px -apple-system, sans-serif; white-space: nowrap; cursor: pointer;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.actions button:hover  { background: #d8b571; }
.actions button:active { background: #b8964f; }

.actions.two { grid-template-columns: repeat(2, 1fr); }
.actions.one { grid-template-columns: 1fr; }

/* EN LOGO: red */
.actions button.logo-en        { background: #b3261e; border-color: #7a1a14; color: #ffffff; }
.actions button.logo-en:hover  { background: #c42a21; }
.actions button.logo-en:active { background: #921f18; }

/* Functional buttons: one tonal family built in OKLCH — equal lightness (L 0.50, the second
   button of a pair 0.06 darker) and equal soft chroma (0.075), hues grouped by job and kept
   away from the brand blue (246°) and red (29°). White text contrast 5.8–8.0:1. */

/* Add infograph: ochre (text graphics) */
.actions button.infograph        { background: #7a5e2e; border-color: #584115; color: #ffffff; }
.actions button.infograph:hover  { background: #866a39; }
.actions button.infograph:active { background: #6e5322; }

/* AR / EN Location: light bronze (text graphics) */
.actions button.location        { background: #8c703f; border-color: #695126; color: #ffffff; }
.actions button.location:hover  { background: #987b4b; }
.actions button.location:active { background: #806433; }

/* Add jumbo: darkest bronze (text graphics) */
.actions button.jumbo        { background: #57401a; border-color: #3a2707; color: #ffffff; }
.actions button.jumbo:hover  { background: #634b25; }
.actions button.jumbo:active { background: #4b350e; }

/* AR / EN NameTag: deep ochre (text graphics) */
.actions button.nametag        { background: #684d1c; border-color: #473101; color: #ffffff; }
.actions button.nametag:hover  { background: #745928; }
.actions button.nametag:active { background: #5d420e; }

/* Add captions: violet (captions) */
.actions button.captions        { background: #6d5886; border-color: #4d3b62; color: #ffffff; }
.actions button.captions:hover  { background: #796392; }
.actions button.captions:active { background: #624d7a; }

/* Translate: deep violet (captions) */
.actions button.translate        { background: #5c4774; border-color: #3d2c51; color: #ffffff; }
.actions button.translate:hover  { background: #675280; }
.actions button.translate:active { background: #513d68; }

/* Translate → AR: third step of the captions violet (L 0.38) */
.actions button.translate-ar        { background: #4c3762; border-color: #2b1c3b; color: #ffffff; }
.actions button.translate-ar:hover  { background: #5c4774; }
.actions button.translate-ar:active { background: #412d57; }

/* Horizontal (blurred background): teal (video) */
.actions button.blurbg        { background: #21716d; border-color: #00504d; color: #ffffff; }
.actions button.blurbg:hover  { background: #307d78; }
.actions button.blurbg:active { background: #106561; }

/* Vertical (fill frame): deep teal (video) */
.actions button.vertical        { background: #035f5c; border-color: #00403d; color: #ffffff; }
.actions button.vertical:hover  { background: #196b67; }
.actions button.vertical:active { background: #005451; }

/* Add counter: copper — the text-graphics bronze turned toward orange (L 0.46, h60), apart from Location */
.actions button.counter        { background: #774d2a; border-color: #4e3015; color: #ffffff; }
.actions button.counter:hover  { background: #835935; }
.actions button.counter:active { background: #6b421f; }

/* Rotate −90°: third step of the video teal (L 0.38) */
.actions button.rotate        { background: #004f4b; border-color: #002d2a; color: #ffffff; }
.actions button.rotate:hover  { background: #035f5c; }
.actions button.rotate:active { background: #004440; }

/* Add gradient: graphite (neutral overlay) */
.actions button.gradient        { background: #555c61; border-color: #393e43; color: #ffffff; }
.actions button.gradient:hover  { background: #61676d; }
.actions button.gradient:active { background: #4b5156; }

/* Remix Music: sage green (audio) */
.actions button.music        { background: #426f4c; border-color: #284f31; color: #ffffff; }
.actions button.music:hover  { background: #4e7b57; }
.actions button.music:active { background: #376441; }

/* AR / EN Thumbnail: plum (deliverable), h345 */
.actions button.thumb        { background: #c2641f; border-color: #8f4713; color: #ffffff; }
.actions button.thumb:hover  { background: #d0712b; }
.actions button.thumb:active { background: #a95416; }
.actions button.thumb-make        { background: #a2567a; border-color: #7a3c5a; color: #ffffff; }
.actions button.thumb-make:hover  { background: #ae6286; }
.actions button.thumb-make:active { background: #904a6c; }
.actions button.thumb-pick        { background: #3d4348; border-color: #2b3034; color: #ffffff; }
.actions button.thumb-pick:hover  { background: #474e54; }
.actions button.thumb-pick:active { background: #33383c; }

/* EN Music: deep sage (audio), the house track */
.actions button.music-en        { background: #315e3c; border-color: #173f22; color: #ffffff; }
.actions button.music-en:hover  { background: #3d6a47; }
.actions button.music-en:active { background: #265331; }

/* Sound effects: small, quiet sage keys (audio family, low chroma) so a long library stays calm */
.sfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; }
.sfx-grid button {
  background: #334536; color: #dfece1; border: 1px solid #1c2b1f; border-radius: 3px;
  padding: 5px 4px; font: 500 10px -apple-system, sans-serif; white-space: nowrap; cursor: pointer;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.sfx-grid button:hover  { background: #405644; }
.sfx-grid button:active { background: #283b2c; }
.sfx-grid button.busy   { background: #487552; }
.sfx-grid .empty { grid-column: 1 / -1; color: #6f6f6f; font-size: 10px; }
.actions button.sfx-more        { background: transparent; border-color: #487552; color: #a9d0b0; }
.actions button.sfx-more:hover  { background: #233226; }
.actions button.sfx-more:active { background: #1c2b1f; }

/* Section header with small links on the right */
.head { display: flex; justify-content: space-between; align-items: baseline; }
.head .links { display: flex; gap: 8px; }

/* Dubai TV: the channel's own teal, with dark text (a brand button, like the logo pair) */
.actions button.dtv        { background: #4dbcc9; border-color: #2f8e9a; color: #10262a; }
.actions button.dtv:hover  { background: #63c8d4; }
.actions button.dtv:active { background: #3da9b6; }

.fields.one { grid-template-columns: 1fr; }

/* Our own dropdown: a native <select> opens its list through macOS, which regularly refuses to
   appear inside a Premiere panel. This one is plain panel HTML, so it always opens. */
.dropdown { position: relative; }
.dropdown-btn {
  width: 100%; text-align: start; background: #1e1e1e; color: #ececec; border: 1px solid #111;
  border-radius: 3px; padding: 7px 26px 7px 9px; font: 12px -apple-system, sans-serif; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-btn::after {
  content: ''; position: absolute; right: 10px; top: 50%; margin-top: -2px;
  border: 4px solid transparent; border-top-color: #9a9a9a;
}
.dropdown-btn:hover { border-color: #2f8e9a; }
.dropdown.open .dropdown-btn { border-color: #4dbcc9; }
.dropdown-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto;
  background: #242424; border: 1px solid #0d0d0d; border-radius: 4px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.7);
}
.dropdown-list[hidden] { display: none; }
.dropdown-list li {
  padding: 6px 9px; border-radius: 3px; cursor: pointer; font-size: 12px; color: #dcdcdc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-list li:hover { background: #313131; }
.dropdown-list li.group {
  padding: 7px 9px 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #8a8a8a; cursor: default; background: none;
}
.dropdown-list li.sel { background: #4dbcc9; color: #10262a; font-weight: 600; }

/* Brand buttons keep the brand colours */
/* AR LOGO: brand blue */
.actions button.logo        { background: #155c90; border-color: #0e4168; color: #ffffff; }
.actions button.logo:hover  { background: #1b6ea9; }
.actions button.logo:active { background: #114c77; }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px;
  padding: 7px 12px; background: #2b2b2b; border-top: 1px solid #141414;
  position: sticky; bottom: 0;           /* status and Undo stay in view while scrolling */
}
#status { flex: 1 1 auto; min-width: 0; }

/* Undo last press: outlined bronze, only shown when there is something to undo */
button.undo {
  order: -1; flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: transparent; color: #e6c58f; border: 1px solid #a38043; border-radius: 3px;
  padding: 5px 8px; font: 600 10.5px -apple-system, sans-serif; cursor: pointer;
}
button.undo:hover  { background: #43361f; }
footer .link { flex: none; }
button.undo:active { background: #33291a; }
button.undo[hidden] { display: none; }

/* Check before publishing: neutral graphite (a QA tool, not a graphic), results listed below */
.actions button.check        { background: #3d4348; border-color: #242a2e; color: #ffffff; }
.actions button.check:hover  { background: #4d5459; }
.actions button.check:active { background: #33393e; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.check-list:empty { display: none; }
.check-list li { display: flex; gap: 6px; align-items: baseline; font-size: 10.5px; line-height: 1.35; color: #cfcfcf; }
.check-list li .mark { flex: none; width: 10px; text-align: center; font-weight: 700; }
.check-list li.problem .mark { color: #e6857e; }
.check-list li.note .mark    { color: #e0b771; }
.check-list li.clear .mark   { color: #88ca95; }
.check-list li .msg { flex: 1 1 auto; min-width: 0; }
.check-list li .tc { flex: none; color: #8fb8e0; cursor: pointer; text-decoration: underline; font-variant-numeric: tabular-nums; }
button.link { background: none; border: none; color: #6f6f6f; padding: 0; font-size: 10px; text-decoration: underline; cursor: pointer; }

#status.err  { color: #e88; }
#status.good { color: #9c9; }
#status.busy { color: #C9A45C; }
#status.warn { color: #ffb454; }