/* ════════════════════════════════════════════════════════════
   ro.css — Running Order editor styles
   Thmanyah LIGHT theme. Design tokens are owned by theme.css
   (loaded first); this file only consumes them.
   Owns: setup panel, phases, segments, sidebar, graphics, print.

   ON-SCREEN EDITOR — "Deep Teal Pro" layout, recoloured to a neutral
   DARK CHARCOAL chrome + GOLD accent (per client request) over a warm
   off-white canvas with white cards and coloured type badges.
   All custom values live in --c-* / --e-* properties scoped to the
   editor root so theme.css tokens (--bg/--ink/--green/--gold/--t-* …)
   and the @media print gallery design are never disturbed.
   ════════════════════════════════════════════════════════════ */

/* The editor root is the mount target supplied by the shell. */
#ro-editor-root{
  font-family:var(--font-sans);

  /* ── PURE-DARK chrome (ثمانية dark theme) ── */
  --c-base:#0B0D0F;
  --c-primary:#15181B;
  --c-mid:#20242A;
  --c-raised:#2C3138;
  --c-on:#F4F5F6;
  --c-on-dim:#A6ABB2;
  --c-hair-on:rgba(255,255,255,.12);

  /* ── dark canvas + surfaces ── */
  --c-canvas:#0E1012;
  --c-canvas-2:#0A0C0E;
  --c-card:#1A1D21;
  --c-inset:#121519;
  --c-inset-2:#23282E;

  /* ── light ink on dark ── */
  --c-ink:#ECEEF0;         /* primary text */
  --c-ink-2:#C4C9CE;       /* secondary */
  --c-ink-3:#949AA1;       /* muted */
  --c-ink-4:#6E747B;       /* dim / placeholder */

  /* ── bright ثمانية GREEN accent (was gold) ── */
  --c-gold:#2BD46A;
  --c-gold-d:#1FB257;
  --c-gold-soft:rgba(43,212,106,0.15);
  --c-gold-line:rgba(43,212,106,0.42);
  --c-gold-ink:#05140B;

  /* ── lines on dark ── */
  --c-line:rgba(255,255,255,0.10);
  --c-line-2:rgba(255,255,255,0.16);
  --c-line-card:rgba(255,255,255,0.08);

  /* ── status ── */
  --c-live:#F2685B;
  --c-live-soft:rgba(242,104,91,0.15);
  --c-ok:#2BD46A;

  /* ── segment type hues (brightened, translucent bg for dark) ── */
  --c-t-promo:#2BC7DD;   --c-t-promo-bg:rgba(43,199,221,0.16);
  --c-t-intro:#5B8DEF;   --c-t-intro-bg:rgba(91,141,239,0.16);
  --c-t-discuss:#2BD46A; --c-t-discuss-bg:rgba(43,212,106,0.15);
  --c-t-pkg:#A78BFA;     --c-t-pkg-bg:rgba(167,139,250,0.16);
  --c-t-field:#F59E4B;   --c-t-field-bg:rgba(245,158,75,0.16);
  --c-t-break:#9099A1;   --c-t-break-bg:rgba(144,153,161,0.16);
  --c-t-handoff:#E6B84A; --c-t-handoff-bg:rgba(230,184,74,0.16);

  /* radii + soft shadows */
  --r-sm:7px; --r:11px; --r-lg:16px;
  --c-sh:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.40);
  --c-sh-pop:0 18px 50px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.40);
  --c-sh-dark:0 12px 34px rgba(0,0,0,.6);

  /* Neutralise stray inline var(--lime)/var(--green) used by the editor JS
     so the on-screen editor reads neutral — NOT a clashing green. Scoped to
     the editor root only: never affects #ro-print-doc (the print gallery). */
  --lime:var(--c-ink-3);
  --green:var(--c-ink-3);
  --green-d:var(--c-ink-2);

  color:var(--c-ink);
  background:
    radial-gradient(1200px 540px at 88% -10%, rgba(43,212,106,.06), transparent 60%),
    radial-gradient(900px 480px at 6% 0%, rgba(43,212,106,.05), transparent 55%),
    var(--c-canvas);
}
#ro-editor-root ::selection{background:rgba(43,212,106,.28)}

/* shared tabular-number helper used throughout */
#ro-editor-root .tnum,
#ro-editor-root [class*="-disp"],
#ro-editor-root [class*="tnum"]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── SETUP PANEL — headline band + even icon-label field grid ── */
.setup-panel{
  background:transparent;border-bottom:none;
  padding:22px 26px 6px;max-width:1366px;margin:0 auto;
}
/* the whole setup block becomes one white panel card.
   3 columns → the 6 data fields fill exactly 2 even rows (no orphan cells);
   the headline + studio-type rows span the full width. */
.setup-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;max-width:none;margin:0;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--c-sh);
  padding:18px;
}
/* field "card" — white inset card with icon+label above, value (input) below */
.setup-field{
  display:flex;flex-direction:column;gap:7px;
  background:var(--c-inset);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:12px 14px;min-width:0;
}
/* FIRST field (المباراة / الحلقة) becomes the charcoal headline band, full width */
.setup-field:first-child{
  grid-column:1/-1;
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--c-primary),var(--c-mid));
  border:none;border-radius:var(--r-lg);
  padding:16px 20px 16px 24px;
  box-shadow:var(--c-sh);
  margin-bottom:2px;
}
.setup-field:first-child::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:5px;
  background:var(--c-gold);
}
/* المباراة / الحلقة — two club inputs with a ✕ between them */
.club-vs{display:flex;align-items:center;gap:10px;}
.club-vs .club-inp{flex:1 1 0;min-width:0;text-align:center;}
.club-x{
  flex:0 0 auto;font-size:18px;font-weight:800;line-height:1;
  color:var(--c-gold);user-select:none;
}
/* the studio-type field (2nd, full-width via inline grid-column:1/-1) — plain band, no inset card */
.setup-field:nth-child(2){
  background:transparent;border:none;border-radius:0;
  padding:2px 2px 14px!important;
  border-bottom:1px solid var(--c-line)!important;
  margin-bottom:2px!important;
}
.setup-lbl{
  font-size:11px;font-weight:800;color:var(--c-ink-3);
  text-transform:none;letter-spacing:.2px;
  font-family:var(--font-sans);display:flex;align-items:center;gap:7px;
}
.setup-field:first-child .setup-lbl{
  color:var(--c-gold);font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-size:11.5px;
}
.setup-field:nth-child(2) .setup-lbl{color:var(--c-ink-3);margin-bottom:8px;display:block}

.setup-inp{
  background:var(--c-card);
  border:1px solid var(--c-line-2);
  border-radius:var(--r-sm);
  color:var(--c-ink);
  font-family:var(--font-display);
  font-size:17px;font-weight:700;
  padding:9px 12px;outline:none;width:100%;
  transition:border-color .15s,background .15s,box-shadow .15s;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.setup-inp:focus{
  border-color:var(--c-gold);
  background:var(--c-card);
  box-shadow:0 0 0 3px rgba(224,162,60,.18);
}
.setup-inp::placeholder{color:var(--c-ink-4);font-weight:600;font-family:var(--font-sans)}
/* headline match-title input: big white display headline on charcoal */
.setup-field:first-child .setup-inp{
  background:rgba(255,255,255,.06);
  border:1px solid var(--c-hair-on);
  color:#fff;
  font-size:26px;font-weight:900;
  padding:8px 14px;
}
.setup-field:first-child .setup-inp::placeholder{color:rgba(255,255,255,.45);font-weight:700}
.setup-field:first-child .setup-inp:focus{
  border-color:var(--c-gold);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(224,162,60,.25);
}
/* version field is short — keep it tidy inside its card */
.setup-field:last-child .setup-inp{font-size:15px}

/* ── GLOBAL STUDIO TYPE — gold pill toggle inside a sunken track ── */
.gs-btn{
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:var(--r-sm);
  border:1px solid var(--c-line-2);
  background:var(--c-card);color:var(--c-ink-3);cursor:pointer;
  transition:all .18s;display:flex;align-items:center;gap:7px;
}
.gs-btn:hover{border-color:var(--c-ink-3);color:var(--c-ink);background:var(--c-inset-2)}
.gs-active{
  background:linear-gradient(180deg,var(--c-gold),var(--c-gold-d))!important;
  color:#2A1B05!important;border-color:transparent!important;font-weight:700;
  box-shadow:0 3px 10px rgba(224,162,60,.4);
}
.gs-active-field{
  background:linear-gradient(180deg,var(--c-gold),var(--c-gold-d))!important;
  color:#2A1B05!important;border-color:transparent!important;font-weight:700;
  box-shadow:0 3px 10px rgba(224,162,60,.4);
}

/* ── EDIT-REVIEW STATUS BANNER (on-screen, in the editor header) ──
   Sits at the top of the setup panel, near the title + save controls.
   Approved → subtle green pill; pending → amber/red pill with inline
   اعتماد/رفض admin actions. Scoped to the editor root; print has its own. */
#ro-editor-root .ro-review-banner{
  max-width:1366px;margin:0 auto 12px;padding:0 26px;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
#ro-editor-root .ro-review-banner[hidden]{display:none}
#ro-editor-root .rb-pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-sans);font-size:13px;font-weight:800;letter-spacing:.01em;
  padding:8px 15px;border-radius:var(--r-pill);border:1.5px solid transparent;line-height:1.25;
}
#ro-editor-root .rb-ic{font-size:13px;line-height:1;flex:0 0 auto}
#ro-editor-root .rb-txt{min-width:0}
/* approved — calm green (uses the editor's --c-ok success hue) */
#ro-editor-root .rb-approved{
  background:var(--c-t-discuss-bg);
  color:var(--c-ok);
  border-color:color-mix(in srgb,var(--c-ok) 34%,transparent);
}
/* pending — high-visibility amber/red warning */
#ro-editor-root .rb-pending{
  background:var(--c-live-soft);
  color:var(--c-live);
  border-color:color-mix(in srgb,var(--c-live) 42%,transparent);
}
#ro-editor-root .rb-pending .rb-ic{animation:rb-pulse 1.6s ease-in-out infinite}
@keyframes rb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* pending_final — stage-2 (awaiting the FINAL approver, e.g. سعيد). Distinct GOLD
   tone so it reads as "one step left", not a fresh submission. Overrides the
   .rb-pending colours since both classes are present on the pill. */
#ro-editor-root .rb-pending-final{
  background:rgba(230,184,74,0.16);
  color:#B9892A;
  border-color:rgba(230,184,74,0.55);
}
#ro-editor-root .rb-wait-note{
  display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:#B9892A;
  background:rgba(230,184,74,0.12);border:1px solid rgba(230,184,74,0.4);
  padding:5px 12px;border-radius:var(--r-sm);
}
/* rejected — solid RED danger pill (never-approved record an admin bounced;
   the creator may revise & resubmit). The red rejection-reason notice
   (.rb-reject-note) renders beneath. */
#ro-editor-root .rb-rejected{
  background:var(--c-live-soft);
  color:var(--c-live);
  border-color:color-mix(in srgb,var(--c-live) 52%,transparent);
}
/* draft — a brand-new, unsaved record (no review state yet). Neutral grey, so
   it is never mistaken for «معتمد». Becomes approved/pending on first save. */
#ro-editor-root .rb-draft{
  background:rgba(99,108,120,0.10);
  color:#5f6672;
  border-color:rgba(99,108,120,0.34);
}

/* inline admin actions */
#ro-editor-root .rb-actions{display:inline-flex;align-items:center;gap:8px}
#ro-editor-root .rb-btn{
  font-family:var(--font-sans);font-size:12.5px;font-weight:700;letter-spacing:.01em;
  padding:7px 16px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;
  transition:filter .15s,transform .05s,background .15s,border-color .15s,color .15s;
}
#ro-editor-root .rb-btn:active{transform:translateY(1px)}
/* اعتماد — solid green call-to-action */
#ro-editor-root .rb-approve{
  background:var(--c-ok);color:#fff;border-color:transparent;
  box-shadow:0 3px 10px color-mix(in srgb,var(--c-ok) 38%,transparent);
}
#ro-editor-root .rb-approve:hover{filter:brightness(1.05)}
/* رفض — outlined danger */
#ro-editor-root .rb-reject{
  background:var(--c-card);color:var(--c-live);
  border-color:color-mix(in srgb,var(--c-live) 45%,transparent);
}
#ro-editor-root .rb-reject:hover{background:var(--c-live-soft);border-color:var(--c-live)}
/* إرسال للمراجعة — solid green submit (creator resubmits a rejected record) */
#ro-editor-root .rb-submit{
  background:var(--c-ok);color:#fff;border-color:transparent;
  box-shadow:0 3px 10px color-mix(in srgb,var(--c-ok) 38%,transparent);
}
#ro-editor-root .rb-submit:hover{filter:brightness(1.05)}

/* ── Surfaced review note (under the status pill) ──────────────────────
   The rejection REASON the admin typed, shown to EVERY user who opens a
   record whose last edit was rejected. Loud + red so the employee can't
   miss why their change bounced. (On-screen only — NOT the print banner.)
   `flex-basis:100%` forces it onto its own line below the pill/actions. */
#ro-editor-root .rb-reject-note{
  flex:0 0 100%;
  display:flex;align-items:flex-start;gap:9px;
  font-family:var(--font-sans);font-size:13px;font-weight:600;line-height:1.5;
  color:var(--c-live);
  background:var(--c-live-soft);
  border:1.5px solid color-mix(in srgb,var(--c-live) 46%,transparent);
  border-inline-start:4px solid var(--c-live);
  border-radius:var(--r-sm);
  padding:10px 14px;
}
#ro-editor-root .rb-reject-note-ic{
  flex:0 0 auto;font-size:14px;font-weight:900;line-height:1.5;
}
#ro-editor-root .rb-reject-note-txt{min-width:0;word-break:break-word}
#ro-editor-root .rb-reject-note-txt b{font-weight:800}
/* approve note — subtle neutral line, not an alarm */
#ro-editor-root .rb-approve-note{
  flex:0 0 100%;
  font-family:var(--font-sans);font-size:12px;font-weight:500;line-height:1.5;
  color:var(--c-ink-3);
  padding:2px 2px 0;
  word-break:break-word;
}

/* ── MAIN LAYOUT — roomy work area (frame removed for the soft look) ── */
.ro-main{
  position:relative;max-width:1366px;margin:0 auto;
  padding:22px 26px 60px;
  display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start;
}
/* drop the engineered registration frame/ticks (they belong to the print sheet) */
.ro-main::before{content:none}
.ro-main::after{content:none}
.ro-main>*{position:relative;z-index:1}

/* ── PHASES ── */
.phases{display:flex;flex-direction:column;gap:26px}
.phase-block{position:relative}

/* PHASE HEADER — charcoal band: marker + name + total + gold "+ فقرة" */
.phase-hdr{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  background:linear-gradient(100deg,var(--c-primary),var(--c-mid));
  color:#fff;border-radius:var(--r-lg);
  padding:13px 18px;box-shadow:var(--c-sh);
}
.phase-pill{
  position:relative;font-family:var(--font-display);
  font-size:19px;font-weight:900;letter-spacing:.01em;
  padding:0;border-radius:0;white-space:nowrap;
  background:transparent;color:#fff;
  display:inline-flex;align-items:center;gap:11px;
}
.phase-pill::before{
  content:'';width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.pp-pre::before{background:var(--c-t-intro)}
.pp-half::before{background:var(--c-t-field)}
.pp-post::before{background:var(--c-t-handoff)}
.phase-line{flex:1;height:1px;background:var(--c-hair-on)}
.phase-total{
  font-family:var(--font-display);font-size:15px;color:var(--c-gold);font-weight:900;
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  padding-inline-end:16px;border-inline-end:1px solid var(--c-hair-on);
}
.phase-add-btn{
  padding:9px 16px;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-size:13px;font-weight:700;
  text-transform:none;letter-spacing:.01em;cursor:pointer;
  background:linear-gradient(180deg,var(--c-gold),var(--c-gold-d));
  border:none;color:#2A1B05;
  box-shadow:0 4px 14px rgba(224,162,60,.35);transition:filter .15s,transform .05s;
}
.phase-add-btn:hover{filter:brightness(1.05);color:#2A1B05;background:linear-gradient(180deg,var(--c-gold),var(--c-gold-d))}
.phase-add-btn:active{transform:translateY(1px)}

/* editable start clock for the الاستراحة / ما بعد المباراة phases */
.phase-start{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.phase-start-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.62);letter-spacing:.02em;white-space:nowrap}
.phase-start-inp{
  width:64px;background:rgba(255,255,255,.07);
  border:1px solid var(--c-hair-on);border-radius:var(--r-sm);
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:center;
  padding:5px 6px;outline:none;transition:border-color .15s,background .15s;
}
.phase-start-inp::placeholder{color:rgba(255,255,255,.34);font-weight:700}
.phase-start-inp:focus{border-color:var(--c-gold);background:rgba(224,162,60,.14)}

.segs-list{display:flex;flex-direction:column;gap:12px}

/* ── SEGMENT — white card, coloured type spine, soft shadow ── */
.seg{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;position:relative;
  box-shadow:var(--c-sh);
  transition:border-color .15s,box-shadow .15s;
}
.seg:hover{border-color:var(--c-line-2)}
/* per-type accent + soft tint, shared by the spine and the number chip.
   Default (untyped / break) is neutral charcoal-grey. */
.seg{--seg-c:var(--c-t-break);--seg-bg:var(--c-t-break-bg)}
.seg.t-intro{--seg-c:var(--c-t-intro);--seg-bg:var(--c-t-intro-bg)}
.seg.t-intro-rec{--seg-c:var(--c-t-intro);--seg-bg:var(--c-t-intro-bg)}
.seg.t-tease{--seg-c:var(--c-t-pkg);--seg-bg:var(--c-t-pkg-bg)}
.seg.t-discuss{--seg-c:var(--c-t-discuss);--seg-bg:var(--c-t-discuss-bg)}
.seg.t-discuss-rec{--seg-c:var(--c-t-discuss);--seg-bg:var(--c-t-discuss-bg)}
.seg.t-pkg{--seg-c:var(--c-t-pkg);--seg-bg:var(--c-t-pkg-bg)}
.seg.t-clip{--seg-c:var(--c-t-pkg);--seg-bg:var(--c-t-pkg-bg)}
.seg.t-break{--seg-c:var(--c-t-break);--seg-bg:var(--c-t-break-bg)}
.seg.t-field{--seg-c:var(--c-t-field);--seg-bg:var(--c-t-field-bg)}
.seg.t-handoff{--seg-c:var(--c-t-handoff);--seg-bg:var(--c-t-handoff-bg)}
/* type SPINE — coloured leading (right) edge */
.seg::before{content:'';position:absolute;right:0;top:0;bottom:0;width:5px;border-radius:0;background:var(--seg-c)}
/* expanded card lifts + picks up the type tint on its border */
.seg:has(.seg-body.open){box-shadow:var(--c-sh-pop);border-color:color-mix(in srgb,var(--seg-c) 30%,var(--c-line))}

/* Collapsed header row */
.seg-row{display:flex;align-items:center;gap:0;padding-right:5px;cursor:pointer;user-select:none}
.seg-row:hover .seg-title-txt{color:var(--c-ink)}

/* number chip — coloured rounded square (type-tinted), display numeral centred */
.seg-num-col{
  width:66px;flex-shrink:0;align-self:center;
  position:relative;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  padding:14px 10px;
  font-family:var(--font-display);font-size:21px;font-weight:900;
  color:var(--seg-c);border-left:none;background:transparent;
  font-variant-numeric:tabular-nums;line-height:1;
}
.seg-num-col::before{
  content:'';position:absolute;z-index:-1;
  width:46px;height:46px;border-radius:12px;
  background:var(--seg-bg);
  border:1px solid color-mix(in srgb,var(--seg-c) 28%,transparent);
}
/* tabular clock + duration chip */
.seg-time-col{
  width:96px;padding:12px 14px;
  border-left:1px solid var(--c-line-card);
  flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;
  justify-content:center;gap:5px;align-items:flex-start;
}
.seg-time-disp{
  font-family:var(--font-display);
  font-size:20px;font-weight:800;color:var(--c-ink);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;
}
.seg-dur-disp{
  font-size:11.5px;font-weight:700;color:var(--c-ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:var(--c-inset);border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:2px 9px;line-height:1.3;
  display:inline-flex;align-items:center;gap:5px;
}

.seg-type-col{
  width:104px;padding:12px 10px;
  border-left:1px solid var(--c-line-card);
  flex-shrink:0;align-self:stretch;display:flex;align-items:center;
  min-width:0;overflow:hidden;
}
/* coloured pill type badge (rounded, soft tint) */
.type-pill{
  font-size:12px;font-weight:700;padding:5px 12px;
  border-radius:var(--r-pill);letter-spacing:.01em;text-transform:none;
  white-space:nowrap;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:7px;line-height:1.2;
}
.type-pill::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.95}
.tp-promo{background:var(--c-t-promo-bg);color:var(--c-t-promo);border-color:color-mix(in srgb,var(--c-t-promo) 28%,transparent)}
.tp-intro{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:color-mix(in srgb,var(--c-t-intro) 28%,transparent)}
.tp-intro-rec{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:color-mix(in srgb,var(--c-t-intro) 28%,transparent)}
.tp-tease{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:color-mix(in srgb,var(--c-t-pkg) 28%,transparent)}
.tp-discuss{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:color-mix(in srgb,var(--c-t-discuss) 28%,transparent)}
.tp-discuss-rec{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:color-mix(in srgb,var(--c-t-discuss) 28%,transparent)}
.tp-pkg{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:color-mix(in srgb,var(--c-t-pkg) 28%,transparent)}
.tp-break{background:var(--c-t-break-bg);color:var(--c-t-break);border-color:color-mix(in srgb,var(--c-t-break) 30%,transparent)}
.tp-field{background:var(--c-t-field-bg);color:var(--c-t-field);border-color:color-mix(in srgb,var(--c-t-field) 28%,transparent)}
.tp-handoff{background:var(--c-t-handoff-bg);color:var(--c-t-handoff);border-color:color-mix(in srgb,var(--c-t-handoff) 30%,transparent)}

/* type <select> inside the expanded body (title row) */
.type-pill-select{-webkit-appearance:none;appearance:none;text-align:center;background:var(--c-inset);color:var(--c-ink-3);border-color:var(--c-line-2)}
.type-pill-select::before{content:none}
.type-pill-select.tp-promo{background:var(--c-t-promo-bg);color:var(--c-t-promo);border-color:var(--c-t-promo)}
.type-pill-select.tp-intro{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:var(--c-t-intro)}
.type-pill-select.tp-intro-rec{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:var(--c-t-intro)}
.type-pill-select.tp-tease{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:var(--c-t-pkg)}
.type-pill-select.tp-discuss{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:var(--c-t-discuss)}
.type-pill-select.tp-discuss-rec{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:var(--c-t-discuss)}
.type-pill-select.tp-pkg{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:var(--c-t-pkg)}
.type-pill-select.tp-field{background:var(--c-t-field-bg);color:var(--c-t-field);border-color:var(--c-t-field)}
.type-pill-select.tp-break{background:var(--c-t-break-bg);color:var(--c-t-break);border-color:var(--c-t-break)}
.type-pill-select.tp-handoff{background:var(--c-t-handoff-bg);color:var(--c-t-handoff);border-color:var(--c-t-handoff)}

.seg-title-col{flex:1;padding:12px 14px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.seg-title-txt{
  font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--c-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;line-height:1.2;
}
.seg-cast-txt{font-size:12px;font-weight:600;color:var(--c-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.seg-flags-col{display:flex;align-items:center;gap:6px;padding:12px 10px;border-right:1px solid var(--c-line-card);flex-shrink:0}
.sflag{font-size:9px;font-weight:800;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.sf-critical{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:color-mix(in srgb,var(--c-t-discuss) 30%,transparent)}
.sf-flex{background:var(--c-t-field-bg);color:var(--c-t-field);border-color:color-mix(in srgb,var(--c-t-field) 30%,transparent)}
.sf-evs{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:color-mix(in srgb,var(--c-t-pkg) 30%,transparent)}
.sf-live{background:var(--c-live-soft);color:var(--c-live);border-color:color-mix(in srgb,var(--c-live) 35%,transparent)}
.sf-tech{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:color-mix(in srgb,var(--c-t-intro) 30%,transparent)}

.seg-chevron{
  width:42px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--c-ink-3);flex-shrink:0;transition:transform .2s;
}
.seg-chevron.open{transform:rotate(180deg)}

/* ── EXPANDED BODY ── */
.seg-body{display:none;border-top:1px dashed var(--c-line-2);padding:0;background:linear-gradient(180deg,#1E2228,#15181C)}
.seg-body.open{display:block}

.seg-form{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-full{grid-column:1/-1}

.sf-label{
  font-size:11.5px;font-weight:800;color:var(--c-ink-3);
  text-transform:none;letter-spacing:.02em;margin-bottom:7px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}

.sf-inp{
  width:100%;background:var(--c-card);
  border:1.5px solid var(--c-line-2);border-radius:var(--r);
  color:var(--c-ink);font-family:var(--font-sans);
  font-size:14px;font-weight:600;padding:10px 12px;outline:none;
  transition:border-color .15s,box-shadow .15s;min-height:44px;
}
.sf-inp:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(224,162,60,.16)}
.sf-inp::placeholder{color:var(--c-ink-4);font-style:normal;font-weight:500}

.sf-ta{resize:vertical;min-height:56px;line-height:1.6}

/* LVO toggle (Live Voice Over) */
.sf-flags{margin:2px 0 6px}
.sf-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--c-ink-2)}
.sf-check input{width:16px;height:16px;accent-color:#0D9488;cursor:pointer;flex:0 0 auto}
.sf-check b{color:#2DD4BF;font-weight:800;letter-spacing:.04em}
.sf-check-hint{font-size:10.5px;font-weight:600;color:var(--c-ink-4)}

/* editable segment start-time (وقت البدء) — tabular; gold when manually set */
.seg-start-inp{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:center;color:var(--c-ink);
}
.seg-start-inp.is-override{
  border-color:var(--c-gold);
  background:var(--c-gold-soft,#F7E9CC);
  color:var(--c-gold-d);
  box-shadow:inset 0 0 0 1px var(--c-gold);
}
.seg-start-reset{
  font-size:13px;line-height:1;cursor:pointer;font-family:var(--font-sans);
  background:var(--c-gold-soft,#F7E9CC);color:var(--c-gold-d);
  border:1px solid var(--c-gold-line,#EBCB8E);border-radius:6px;padding:2px 8px;
  transition:filter .15s;
}
.seg-start-reset:hover{filter:brightness(.97)}
.seg-start-reset[hidden]{display:none}

/* inline time/dur/type row */
.seg-meta-row{display:grid;grid-template-columns:90px 70px 1fr;gap:12px;grid-column:1/-1}

/* talking points — numbered cards (mockup style) */
.points-wrap{display:flex;flex-direction:column;gap:8px}
.point-row{display:flex;gap:10px;align-items:flex-start}
.point-num{
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;margin-top:7px;
  background:var(--c-t-discuss-bg);border:1px solid color-mix(in srgb,var(--c-t-discuss) 26%,transparent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--c-t-discuss);
  font-variant-numeric:tabular-nums;
}
.point-inp{
  flex:1;background:var(--c-card);border:1px solid var(--c-line-2);border-radius:var(--r);
  color:var(--c-ink);font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  padding:9px 12px;outline:none;resize:none;min-height:42px;line-height:1.5;transition:border-color .15s,box-shadow .15s;
}
.point-inp:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(224,162,60,.14)}
.point-inp::placeholder{color:var(--c-ink-4);font-style:normal;font-weight:500}
.point-del{background:transparent;border:none;color:var(--c-ink-4);cursor:pointer;font-size:16px;padding:4px;flex-shrink:0;margin-top:7px;transition:color .15s}
.point-del:hover{color:var(--c-live)}

.add-point-btn{
  font-size:12px;font-weight:700;text-transform:none;letter-spacing:.01em;
  color:var(--c-ink-3);background:transparent;
  border:1.5px dashed var(--c-line-2);border-radius:var(--r);
  padding:9px 12px;cursor:pointer;font-family:var(--font-sans);
  width:100%;text-align:center;margin-top:4px;transition:all .15s;
}
.add-point-btn:hover{border-color:var(--c-gold);color:var(--c-gold-d);background:var(--c-gold-soft)}

/* small inline action button (graphics "+ إضافة جرافيك") */
.mini-btn{
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--c-gold-soft);border:1px solid var(--c-gold-line);color:#7A560F;cursor:pointer;
  font-family:var(--font-sans);display:flex;align-items:center;gap:5px;white-space:nowrap;transition:filter .15s;
}
.mini-btn:hover{filter:brightness(.98)}

/* flags checkboxes */
.flags-row{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}

/* status select — gold-tinted (mockup "يُحدَّد لاحقاً") */
.status-sel{
  background:var(--c-gold-soft);border:1px solid var(--c-gold-line);border-radius:var(--r);
  color:#7A560F;font-family:var(--font-sans);font-size:13px;font-weight:700;
  text-transform:none;letter-spacing:.01em;padding:10px 12px;outline:none;cursor:pointer;min-height:44px;
}
.status-sel:focus{border-color:var(--c-gold-d);box-shadow:0 0 0 3px rgba(224,162,60,.16)}

.seg-footer-row{
  display:flex;align-items:center;gap:8px;padding:12px 20px;
  border-top:1px solid var(--c-line-card);background:var(--c-inset);
}
.del-seg-btn{
  background:transparent;border:1px solid transparent;font-size:12px;font-weight:700;
  text-transform:none;letter-spacing:.01em;color:var(--c-ink-3);cursor:pointer;
  font-family:var(--font-sans);display:flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-sm);transition:all .15s;
}
.del-seg-btn:hover{color:var(--c-live);border-color:color-mix(in srgb,var(--c-live) 35%,transparent);background:var(--c-live-soft)}

/* ── ADD SEG BUTTON ── */
.add-seg-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.add-seg-btn{
  flex:1;min-width:160px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 16px;border:1.5px dashed var(--c-line-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25));
  color:var(--c-ink-3);font-family:var(--font-sans);font-size:13px;font-weight:700;
  text-transform:none;letter-spacing:.01em;cursor:pointer;transition:all .15s;
}
.add-seg-btn:hover{border-color:var(--c-gold);color:var(--c-gold-d);background:var(--c-gold-soft)}

/* ── SIDEBAR — premium cards ── */
.sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:18px}

.side-card{
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--c-sh);
}
/* charcoal section head with a gold left marker */
.side-hdr{
  position:relative;padding:13px 16px 13px 18px;
  font-family:var(--font-display);font-size:14px;font-weight:700;
  color:var(--c-on);letter-spacing:.02em;text-transform:none;
  border-bottom:none;
  background:linear-gradient(100deg,var(--c-primary),var(--c-mid));
}
.side-hdr::before{
  content:'';position:absolute;inset-block:10px;inset-inline-start:0;width:4px;border-radius:0;
  background:var(--c-gold);
}

/* CLOCK — dark charcoal card with big gold-second tabular time.
   The clock is the first side-card (it contains .clock-display). */
.side-card:has(.clock-display){
  background:linear-gradient(160deg,var(--c-primary),var(--c-base));
  border-color:transparent;box-shadow:var(--c-sh-dark);
}
.side-card:has(.clock-display) .side-hdr{
  background:transparent;color:var(--c-on-dim);
  font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:14px 16px 0 16px;display:flex;align-items:center;gap:8px;
}
.side-card:has(.clock-display) .side-hdr::before{
  position:static;width:8px;height:8px;border-radius:50%;inset:auto;
  background:var(--c-gold);box-shadow:0 0 0 4px rgba(224,162,60,.25);
  margin-inline-end:2px;
}
.clock-display{padding:6px 16px 18px;text-align:start}
.clock-big{
  font-family:var(--font-display);font-size:46px;font-weight:900;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:2px;line-height:1.05;margin:6px 0 4px;
}
.clock-date{
  font-size:14px;font-weight:600;color:var(--c-on);margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;display:flex;align-items:center;gap:8px;
}

/* SUMMARY — hairline grid, big tabular numbers */
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.sum-cell{
  padding:15px 14px;text-align:start;
  border-left:1px solid var(--c-line-card);border-bottom:1px solid var(--c-line-card);
}
.sum-cell:nth-child(odd){border-left:none}
.sum-cell:nth-last-child(-n+2){border-bottom:none}
.sum-lbl{
  font-size:11px;color:var(--c-ink-3);text-transform:none;letter-spacing:.02em;
  margin-bottom:5px;font-weight:600;
}
.sum-val{
  font-family:var(--font-display);font-size:26px;font-weight:900;color:var(--c-ink);
  font-variant-numeric:tabular-nums;line-height:1;
}
.sum-val.lime{color:var(--c-t-discuss)}
.sum-val.warn{color:var(--c-gold-d)}
.sum-val.danger{color:var(--c-live)}

/* TIMELINE — coloured type dots, tabular times */
.timeline{padding:8px 16px 12px;display:flex;flex-direction:column;gap:0;max-height:300px;overflow-y:auto}
.tl-row{
  display:flex;align-items:center;gap:10px;font-size:12px;padding:9px 0;
  border-bottom:1px solid var(--c-line-card);
}
.tl-row:last-child{border-bottom:none}
.tl-time{
  font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--c-ink-2);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;min-width:46px;
}
.tl-dur{font-size:11px;font-weight:700;color:var(--c-ink-4);font-variant-numeric:tabular-nums;min-width:36px;order:3}
.tl-name{color:var(--c-ink);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;order:2}
.tl-dot{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--c-card);box-shadow:0 0 0 1px var(--c-line-2);
}

/* CREW — labelled inset inputs */
.crew-side{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.cs-row{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center}
.cs-lbl{
  font-size:12.5px;color:var(--c-ink-2);text-transform:none;letter-spacing:.01em;
  font-weight:700;white-space:nowrap;text-align:right;line-height:1.2;
}
.cs-inp{
  width:100%;text-align:right;background:var(--c-inset);border:1.5px solid var(--c-line);border-radius:var(--r-sm);
  color:var(--c-ink);font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  padding:0 12px;height:40px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.cs-inp:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(224,162,60,.16)}
.cs-inp::placeholder{color:var(--c-ink-4);font-style:normal;font-weight:500}
/* crew rows are now user <select>s — keep the .cs-inp look, add a chevron */
.cs-sel{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  /* leave room on the right (RTL: visual left) for the chevron glyph */
  padding-left:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239CA1A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;
}
.cs-sel option{background:var(--c-card);color:var(--c-ink);}
/* the injected legacy / placeholder option reads as dim */
.cs-sel option[value=""]{color:var(--c-ink-4);}

/* ── TYPE PICKER BUTTONS ── */
.type-picker-btns{display:flex;flex-wrap:wrap;gap:7px}
.type-pick-btn{
  font-family:var(--font-sans);font-size:11px;font-weight:700;text-transform:none;letter-spacing:.01em;
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line-2);
  background:var(--c-card);color:var(--c-ink-3);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.type-pick-btn:hover{border-color:var(--c-ink-3);color:var(--c-ink);background:var(--c-inset-2)}
.type-pick-btn.tpb-active{opacity:1!important;font-weight:800}
.type-pick-btn.tpb-active.tp-promo{background:var(--c-t-promo-bg);color:var(--c-t-promo);border-color:var(--c-t-promo)}
.type-pick-btn.tpb-active.tp-intro{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:var(--c-t-intro)}
.type-pick-btn.tpb-active.tp-intro-rec{background:var(--c-t-intro-bg);color:var(--c-t-intro);border-color:var(--c-t-intro)}
.type-pick-btn.tpb-active.tp-tease{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:var(--c-t-pkg)}
.type-pick-btn.tpb-active.tp-discuss{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:var(--c-t-discuss)}
.type-pick-btn.tpb-active.tp-discuss-rec{background:var(--c-t-discuss-bg);color:var(--c-t-discuss);border-color:var(--c-t-discuss)}
.type-pick-btn.tpb-active.tp-pkg{background:var(--c-t-pkg-bg);color:var(--c-t-pkg);border-color:var(--c-t-pkg)}
.type-pick-btn.tpb-active.tp-field{background:var(--c-t-field-bg);color:var(--c-t-field);border-color:var(--c-t-field)}
.type-pick-btn.tpb-active.tp-break{background:var(--c-t-break-bg);color:var(--c-t-break);border-color:var(--c-t-break)}
.type-pick-btn.tpb-active.tp-handoff{background:var(--c-t-handoff-bg);color:var(--c-t-handoff);border-color:var(--c-t-handoff)}

/* ── GRAPHIC ROWS ── */
.graphics-wrap{display:flex;flex-direction:column;gap:8px}
.graphics-empty{font-size:12px;color:var(--c-ink-4);padding:8px 0;font-style:normal}
.graphic-row{
  display:flex;align-items:flex-start;gap:10px;background:var(--c-card);
  border:1px solid var(--c-line);border-right:4px solid var(--c-t-intro);
  border-radius:var(--r);padding:11px 11px 11px 8px;
}
.graphic-num{
  width:24px;height:24px;border-radius:7px;flex:0 0 auto;margin-top:6px;
  background:var(--c-t-intro-bg);border:1px solid color-mix(in srgb,var(--c-t-intro) 26%,transparent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:11px;font-weight:800;color:var(--c-t-intro);
  font-variant-numeric:tabular-nums;
}
.graphic-fields{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.graphic-type-sel{width:100%}
.graphic-name-inp{width:100%}
.graphic-time-note{display:flex;gap:7px}
.graphic-add-btn{
  font-size:11px;font-weight:700;text-transform:none;letter-spacing:.01em;
  padding:5px 11px;border-radius:var(--r-pill);background:var(--c-t-intro-bg);color:var(--c-t-intro);
  border:1px solid color-mix(in srgb,var(--c-t-intro) 30%,transparent);cursor:pointer;
  font-family:var(--font-sans);display:flex;align-items:center;gap:5px;white-space:nowrap;transition:filter .15s;
}
.graphic-add-btn:hover{filter:brightness(.98)}

/* ── LOCATION TOGGLE ── */
.phase-loc-toggle{display:flex;gap:5px;align-items:center}
.loc-btn{
  font-family:var(--font-sans);font-size:11px;font-weight:700;text-transform:none;letter-spacing:.01em;
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line-2);
  background:var(--c-card);color:var(--c-ink-3);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.loc-btn:hover{border-color:var(--c-ink-3);color:var(--c-ink);background:var(--c-inset-2)}
.loc-active-lime{
  background:linear-gradient(180deg,var(--c-gold),var(--c-gold-d))!important;
  color:#2A1B05!important;border-color:transparent!important;
}

/* ── PRINT DOCUMENT — Broadcast Gallery rundown sheet ──
   On screen #ro-print-doc is hidden. When printing we hide the whole app and
   render #ro-print-doc (built by ro-editor.js → buildPrintDoc()). All rules are
   scoped under #ro-print-doc so the generic class names never clash with the
   editor/shell. */
.print-header { display: none; }
#ro-print-doc { display: none; }

@media print {
  /* Per-page margins. A generous 16mm TOP on the CONTINUATION pages (2, 3, …)
     gives the running-order cards clear breathing room at the start of each page
     — previously they touched the very top edge. Page 1 keeps a tight 9mm top via
     @page:first (it already has the masthead, so it must NOT drop down). 16mm
     BOTTOM reserves the strip the fixed footer (position:fixed; bottom:0) sits in
     so it never overlaps content on any page. */
  @page { size: A4 portrait; margin: 16mm 0 16mm 0; }
  @page :first { margin-top: 9mm; }

  html, body {
    background: #FFFFFF !important;
    color: #15130F !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* hide the entire on-screen application (incl. transient toasts/dialogs that
     would otherwise bleed into the printed sheet, e.g. «تم اعتماد سجل الترتيب») */
  #login-overlay, #app-shell, .modal-overlay, .ui-toasts, .ui-modal-ov, #announce-bar { display: none !important; }

  /* On the home/dashboard view there is no record to print — keep the (body-level)
     record sheet hidden so Ctrl+P on the home page does NOT print the last-open
     running order. It prints normally once the user is inside the editor. */
  body.view-dashboard #ro-print-doc { display: none !important; }

  #ro-print-doc {
    display: block !important;
    --hair: #E7E2D7; --hair2: #D9D3C6;
    --mono: 'Thmanyah Sans', ui-monospace, 'Consolas', monospace;
    font-family: var(--font-sans); color: #15130F; font-size: 10.5px;
  }
  #ro-print-doc * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* ── THE SHEET + engineered frame + registration ticks ── */
  /* Vertical insets come from the @page margins, so the sheet carries only
     HORIZONTAL padding. min-height must fit the SMALLEST printable area — the
     continuation pages: 297 − 16 (top) − 16 (bottom) = 265mm; 263 leaves a safety
     margin so the audit sheet (always on a continuation page) never spills a
     blank sliver page. (Page 1 has more room — 297 − 9 − 16 = 272mm.) */
  #ro-print-doc .sheet { position: relative; background: #FBF9F4; padding: 0 9mm; min-height: 263mm; }
  #ro-print-doc .sheet::before { display: none; }
  /* (the old corner registration-tick rules are GONE — they collided with the
     timetable's .box-head .tick square: .tick::after drew a 1px black vertical
     line, height:100% of the sheet, that bled down/across printed pages) */
  /* BLOCK, not flex: a flex formatting context on the page-spanning container
     breaks Chrome's page-break fragmentation of descendants (segments were sliced
     across pages even with break-inside:avoid). The footer is position:fixed now,
     so the old flex column (for margin-top:auto) is no longer needed. */
  #ro-print-doc .sheet-inner { position: relative; display: block; min-height: 0; }

  /* ══ FORMAL TIMETABLE PRINT DESIGN (user-adopted «جدول زمني») ══ */
  /* MASTHEAD — formal document header (seal + brand · ref + status) */
  /* opaque white bg + high z-index so the position:fixed footer that Chrome repeats
     at the TOP of continuation pages stays hidden BEHIND the masthead. */
  /* ═══════ LUXURY-MAGAZINE CENTERED-HERO GREEN BANNER (restored) ═══════ */
  /* MASTHEAD — green centered hero with soft inner shine */
  #ro-print-doc .masthead { border-radius: 16px; overflow: hidden; color: #fff; position: relative; z-index: 5;
    background: linear-gradient(120deg, var(--green) 0%, #1F9E52 58%, var(--green-d) 100%);
    box-shadow: 0 6px 18px rgba(14,143,78,.22); padding: 11px 18px 13px; }
  #ro-print-doc .masthead::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.14) 0 16%, rgba(255,255,255,0) 42%),
      radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%); }
  /* ── Brand watermark: a large faint ثمانية flower centered behind the hero,
     rotated 22.5° so the 4 petals overlay as a soft 8-pointed star — turns the
     green band into a branded "seal" without touching any layout element. ── */
  #ro-print-doc .masthead::after { content: ""; position: absolute; top: 50%; left: 50%;
    width: 230px; height: 230px;
    transform: translate(-50%, -50%) rotate(22.5deg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><g transform='translate(12,12)'><ellipse rx='2.1' ry='5.6'/><ellipse rx='2.1' ry='5.6' transform='rotate(45)'/><ellipse rx='2.1' ry='5.6' transform='rotate(90)'/><ellipse rx='2.1' ry='5.6' transform='rotate(135)'/></g></svg>");
    background-size: contain; background-repeat: no-repeat;
    opacity: 0.11; pointer-events: none; z-index: 0; }
  #ro-print-doc .masthead > * { position: relative; z-index: 1; }
  /* top utility row: RO-id + version + status chip (right) · flower mark (left) */
  #ro-print-doc .mast-top { display: flex; align-items: center; justify-content: space-between; }
  #ro-print-doc .mast-meta { display: flex; align-items: center; gap: 11px; }
  #ro-print-doc .mast-ro { font-family: var(--mono); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; color: #fff; }
  #ro-print-doc .mast-ver { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.66); }
  #ro-print-doc .mast-flower { width: 22px; height: 22px; display: flex; }
  #ro-print-doc .mast-flower .brand-mark { width: 22px; height: 22px; filter: brightness(0) invert(1); }
  #ro-print-doc .mast-status { font-family: var(--font-display); font-weight: 900; font-size: 10px; letter-spacing: .02em; padding: 3px 11px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; }
  #ro-print-doc .mast-status .ms-ic { font-size: 10px; line-height: 1; }
  #ro-print-doc .mast-status.ms-approved { background: #fff; color: #15803D; }
  #ro-print-doc .mast-status.ms-pending  { background: #F7C948; color: #6B3D08; }
  #ro-print-doc .mast-status.ms-rejected { background: #E0443A; color: #fff; }
  #ro-print-doc .mast-status.ms-draft    { background: rgba(255,255,255,.22); color: #fff; }
  /* centered hero: kicker + big match title + sub-line */
  #ro-print-doc .mast-hero { text-align: center; padding-top: 9px; }
  #ro-print-doc .mast-kicker { font-family: var(--font-sans); font-weight: 500; font-size: 9.5px; letter-spacing: .26em; color: rgba(255,255,255,.9); margin-bottom: 5px; }
  #ro-print-doc .match-title { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1.0; letter-spacing: -.01em; color: #fff; margin: 0; }
  #ro-print-doc .match-vs { color: rgba(7,38,20,.6); font-weight: 700; padding: 0 8px; }
  #ro-print-doc .match-meta { display: block; margin: 7px auto 0; max-width: 155mm; font-family: var(--font-serif); font-size: 10.5px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.86); }
  #ro-print-doc .match-meta b { color: #fff; font-weight: 700; }
  #ro-print-doc .match-meta .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); margin: 0 6px; vertical-align: middle; }
  /* horizontal time strip under a hairline */
  #ro-print-doc .mast-timestrip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.2); }
  #ro-print-doc .mast-timestrip .ts-item { display: flex; align-items: baseline; gap: 7px; }
  #ro-print-doc .mast-timestrip .ts-l { font-size: 8px; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.62); }
  #ro-print-doc .mast-timestrip .ts-v { font-family: var(--mono); font-weight: 700; font-size: 13px; color: #fff; }
  #ro-print-doc .mast-timestrip .ts-sep { width: 1px; height: 13px; background: rgba(255,255,255,.25); }

  /* TOTALS — green brand cards (one hero gradient) */
  #ro-print-doc .totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
  #ro-print-doc .totals .t { display: flex; align-items: center; gap: 9px; padding: 8px 12px;
    background: #F2FBF6; border: 1px solid var(--hair); border-radius: 11px; }
  #ro-print-doc .totals .t .num { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; color: #15130F; }
  #ro-print-doc .totals .t .lbl { font-size: 9px; font-weight: 600; color: #6E685E; line-height: 1.2; position: relative; padding-inline-start: 12px; }
  #ro-print-doc .totals .t .lbl::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
  #ro-print-doc .totals .t .lbl b { display: block; color: #15130F; font-weight: 800; font-size: 9.5px; }
  #ro-print-doc .totals .t.hero { background: linear-gradient(135deg, var(--green), var(--green-d)); border-color: transparent; }
  #ro-print-doc .totals .t.hero .num, #ro-print-doc .totals .t.hero .lbl, #ro-print-doc .totals .t.hero .lbl b { color: #fff; }
  #ro-print-doc .totals .t.hero .lbl::before { background: #fff; }
  #ro-print-doc .totals .t.live .num { color: var(--green-d); }
  #ro-print-doc .totals .t.live .lbl::before { background: #E0443A; }
  #ro-print-doc .totals .t.evs .lbl::before { background: #8B5CF6; }

  /* CREW STRIP — green-header bar with cells grid */
  #ro-print-doc .crewbar { display: grid; grid-template-columns: auto 1fr; align-items: stretch; margin-top: 8px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff; }
  #ro-print-doc .crewbar .cb-title { display: flex; align-items: center; padding: 6px 13px; font-family: var(--font-display); font-weight: 900; font-size: 12px; color: #fff; background: linear-gradient(180deg, var(--green), var(--green-d)); white-space: nowrap; }
  #ro-print-doc .crewbar .cb-cells { display: grid; grid-template-columns: repeat(5, 1fr); }
  #ro-print-doc .crewbar .cb { padding: 5px 10px; border-inline-start: 1px solid var(--hair); border-block-start: 1px solid var(--hair); min-width: 0; }
  #ro-print-doc .crewbar .cb:nth-child(-n+5) { border-block-start: 0; }
  #ro-print-doc .crewbar .cb-role { font-size: 7.5px; font-weight: 700; letter-spacing: .06em; color: #6E8A78; white-space: nowrap; }
  #ro-print-doc .crewbar .cb-name { font-size: 11px; font-weight: 700; color: #15130F; margin-top: 2px; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* LEGEND — small color dots */
  #ro-print-doc .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin: 3.2mm 0 1.5mm; font-size: 8.5px; font-weight: 600; color: #6E685E; }
  #ro-print-doc .legend .lg { display: inline-flex; align-items: center; gap: 5px; }
  #ro-print-doc .legend .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
  #ro-print-doc .legend .key { display: inline-flex; align-items: center; gap: 4px; }
  #ro-print-doc .legend .chip-mini { font-family: var(--mono); font-size: 7.5px; font-weight: 700; border: 1px solid var(--hair2); border-radius: 3px; padding: 1px 4px; color: #15130F; letter-spacing: .04em; }
  #ro-print-doc .legend .chip-mini.lvo-mini { border-color: #0D9488; color: #0B6E66; background: rgba(13,148,136,.08); }

  /* COLUMN HEADER (audit page only) */
  #ro-print-doc .colhead { display: none; }
  #ro-print-doc .sheet-audit .colhead { display: grid; grid-template-columns: 18mm 18mm 12mm 1fr; gap: 0 6px; padding: 2px 4px; margin-top: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: #6E685E; border-bottom: 1px solid var(--hair); }
  #ro-print-doc .sheet-audit .colhead .ch.c-body { text-align: start; }

  /* PHASE HEADER — green pill */
  #ro-print-doc .phase { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0; margin: 11px 0 7px; background: none; border: none; break-inside: avoid; }
  #ro-print-doc .phase .pno { font-family: var(--mono); font-weight: 800; font-size: 11px; background: #15130F; color: #fff; border-radius: 8px; padding: 4px 10px; letter-spacing: .05em; }
  #ro-print-doc .phase .pname { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: #15130F; display: flex; align-items: center; gap: 8px; }
  #ro-print-doc .phase .pname::before { content: ""; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--green), var(--green-d)); flex: 0 0 auto; box-shadow: 0 2px 6px rgba(14,143,78,.3); }
  #ro-print-doc .phase .pmeta { font-size: 10px; font-weight: 700; color: #6E685E; margin-inline-start: auto; font-family: var(--mono); }
  #ro-print-doc .phase .pmeta b { color: var(--green-d); }

  /* SEGMENT CARD (grid 18mm 1fr: rail badge/clock/dur + body) */
  /* break-inside:auto so a tall card FLOWS across pages instead of jumping
     whole (avoids gaps before tall segments). z-index above the fixed footer. */
  #ro-print-doc .seg { display: grid; grid-template-columns: 18mm 1fr; align-items: stretch; z-index: 2;
    background: #fff; border: 1px solid var(--hair); border-radius: 13px; margin-bottom: 5px;
    box-shadow: 0 1px 1px rgba(21,19,15,.04), 0 6px 15px rgba(14,143,78,.06);
    position: relative; break-inside: auto; page-break-inside: auto; }
  #ro-print-doc .seg .rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; background: #F6FBF8; border-inline-end: 1px solid var(--hair);
    border-start-start-radius: 12px; border-end-start-radius: 12px; }
  #ro-print-doc .seg .rail::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--seg); }
  #ro-print-doc .seg .seg-no { font-family: var(--mono); font-weight: 800; font-size: 16px; color: #fff; background: var(--seg);
    width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
  #ro-print-doc .seg .seg-clock { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: #15130F; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 1px; }
  #ro-print-doc .seg .seg-dur { font-family: var(--mono); font-size: 9px; font-weight: 700; color: #fff; background: var(--seg); border-radius: 999px; padding: 1px 7px; }
  #ro-print-doc .seg .body { padding: 6px 9px 7px; min-width: 0; }
  #ro-print-doc .seg .row1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; break-inside: avoid; page-break-inside: avoid; }
  #ro-print-doc .seg .ttl { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #15130F; line-height: 1.1; }
  #ro-print-doc .seg .typetag { font-size: 8px; font-weight: 800; letter-spacing: .04em; color: var(--seg); border: 1px solid var(--seg); border-radius: 999px; padding: 1.5px 8px; background: color-mix(in srgb, var(--seg) 9%, #fff); }
  #ro-print-doc .seg .live { font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #E0443A; border-radius: 999px; padding: 1.5px 8px; display: inline-flex; align-items: center; gap: 4px; }
  #ro-print-doc .seg .lvo-tag { font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #0D9488; border-radius: 999px; padding: 1.5px 8px; }
  #ro-print-doc .seg .live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
  #ro-print-doc .seg .people { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #000; }
  #ro-print-doc .seg .people .role { color: #000; font-weight: 800; font-size: 9px; letter-spacing: .03em; }
  #ro-print-doc .seg .people b { color: #000; font-weight: 800; }
  #ro-print-doc .seg .desc { margin-top: 4px; font-size: 12px; line-height: 1.55; color: #000; font-weight: 700; font-family: var(--font-serif); }
  #ro-print-doc .seg .desc .lead { color: #000; font-weight: 800; font-family: var(--font-sans); }
  #ro-print-doc .points { margin-top: 4px; display: flex; flex-direction: column; gap: 2.5px; }
  /* NOTE: NO break-inside:avoid on .pt — a long captain-style question doesn't
     have to fit a full page; let it flow across so the previous page packs tight
     instead of leaving a big gap before the question. widows/orphans=2 still
     keeps at least 2 lines on either side. */
  #ro-print-doc .points .ph { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #000; margin-bottom: 2px; }
  #ro-print-doc .points .pt { display: flex; align-items: baseline; gap: 7px; font-size: 12px; line-height: 1.5; color: #000; font-weight: 700; widows: 2; orphans: 2; }
  #ro-print-doc .points .pt .n { font-family: var(--mono); font-weight: 700; font-size: 9px; color: var(--green-d); border: 1px solid var(--green); border-radius: 50%; width: 15px; height: 15px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
  #ro-print-doc .chips { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; break-inside: avoid; page-break-inside: avoid; }
  #ro-print-doc .chip { font-family: var(--mono); display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 700; border: 1px solid var(--hair2); border-radius: 4px; padding: 1.5px 6px; color: #15130F; background: #FBF9F4; }
  #ro-print-doc .chip .ic { width: 10px; height: 10px; flex: 0 0 auto; }
  #ro-print-doc .chip .ck { color: #575148; font-weight: 700; font-size: 7.5px; letter-spacing: .06em; }
  #ro-print-doc .chip.gfx { border-color: #C9B7F0; background: rgba(139,92,246,.07); }
  #ro-print-doc .chip.gfx .ic { color: var(--t-pkg); }
  #ro-print-doc .chip.gfx .ck { color: #6D4FB3; }
  #ro-print-doc .chip.evs { border-color: #C9B7F0; background: rgba(139,92,246,.07); }
  #ro-print-doc .chip.evs .ic { color: var(--t-pkg); }
  #ro-print-doc .chip.cam { border-color: #F2C79E; background: rgba(226,104,15,.07); }
  #ro-print-doc .chip.cam .ic { color: var(--t-field); }
  #ro-print-doc .chip.tech .ic { color: #6E685E; }
  #ro-print-doc .seg.is-break .body { display: flex; align-items: center; }
  #ro-print-doc .seg.is-break .ttl { color: var(--t-break); }
  #ro-print-doc .audit-by { margin-inline-start: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #6E685E; }
  #ro-print-doc .audit-note { font-style: italic; }

  /* FOOTER — fixed at the bottom of every printed page. Page-1 + audit footers are
     BYTE-IDENTICAL so, where Chrome repeats the fixed element across pages, they
     overlap as one. */
  #ro-print-doc .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding: 2.5mm 9mm; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px solid #222; font-size: 10px; font-weight: 700; color: #555; letter-spacing: .02em; }
  #ro-print-doc .foot .fmark { display: flex; align-items: center; gap: 6px; color: var(--green-d); }
  #ro-print-doc .foot .fmark svg { width: 14px; height: 14px; }
  #ro-print-doc .foot .fmark span { color: #333; font-weight: 900; }
  #ro-print-doc .foot .fpage { font-variant-numeric: tabular-nums; color: #555; }

  /* ── 2nd page: approval + review audit trail ── */
  #ro-print-doc .sheet-audit { page-break-before: always; break-before: page; }
  /* created-by / approved-by highlight band */
  #ro-print-doc .audit-approve { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 5mm 0 4mm; }
  #ro-print-doc .audit-approve.aa-3 { grid-template-columns: 1fr 1fr 1fr; gap: 4mm; }
  /* small tally of review activity (submissions · rejects · first/final approvals) */
  #ro-print-doc .audit-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 4mm; }
  #ro-print-doc .audit-summary .as-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border: 1px solid var(--hair); border-radius: 999px; background: #FBF9F4; }
  #ro-print-doc .audit-summary .as-n { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: #15130F; line-height: 1; font-variant-numeric: tabular-nums; }
  #ro-print-doc .audit-summary .as-l { font-size: 9px; font-weight: 700; color: #6E685E; }
  #ro-print-doc .audit-summary .as-rej .as-n { color: #B23123; }
  #ro-print-doc .audit-summary .as-ok .as-n { color: #1E9E5B; }
  #ro-print-doc .audit-summary .as-ok2 .as-n { color: #0E7A4E; }
  #ro-print-doc .aa-cell { border: 1.6px solid #15130F; border-radius: 5px; padding: 4mm 4.5mm; background: #F4F2EC; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #ro-print-doc .aa-cell.aa-ok { border-color: #157A52; background: #DEF4EC; }
  #ro-print-doc .aa-cell.aa-wait { border-color: #B23123; background: #FBE3DF; }
  #ro-print-doc .aa-cell.aa-rej { border-color: #B23123; background: #FBE3DF; }
  #ro-print-doc .aa-k { font-size: 8.5px; font-weight: 800; letter-spacing: .13em; color: #6E685E; text-transform: uppercase; }
  #ro-print-doc .aa-v { font-family: var(--font-display); font-size: 19px; font-weight: 900; color: #15130F; margin-top: 3px; line-height: 1.05; }
  #ro-print-doc .aa-cell.aa-ok .aa-v { color: #0E5C3C; }
  #ro-print-doc .aa-cell.aa-wait .aa-v, #ro-print-doc .aa-cell.aa-rej .aa-v { color: #8E1F14; }
  #ro-print-doc .aa-t { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #6E685E; margin-top: 3px; }
  /* review-log rows reuse the .seg/.colhead table format from page 1 */
  #ro-print-doc .sheet-audit .seg .body .row1 { justify-content: space-between; }
  #ro-print-doc .audit-by { font-size: 9.5px; font-weight: 700; color: #6E685E; font-family: var(--mono); }
  #ro-print-doc .audit-note { margin-top: 3px; font-size: 11px; font-weight: 600; color: #15130F; line-height: 1.4; }

  /* plain-text reading guide at the foot of the audit page */
  /* Audit reading guide — use Thmanyah Sans throughout (was --font-serif which
     fell through to Georgia for Arabic glyphs in the print engine, giving the
     dial-tone Western look the user spotted). Slightly larger for readability. */
  #ro-print-doc .audit-guide { position: relative; z-index: 2; margin-top: 9px; padding-top: 7px;
    border-top: 1px solid var(--hair); font-family: var(--font-sans); color: #1F1F1F; font-size: 10.5px; line-height: 1.6;
    break-inside: avoid; page-break-inside: avoid; }
  #ro-print-doc .audit-guide .ag-title { font-family: var(--font-display); font-weight: 900; font-size: 12.5px; color: #15130F; margin-bottom: 5px; }
  #ro-print-doc .audit-guide .ag-p { margin: 4px 0; font-weight: 500; }
  #ro-print-doc .audit-guide .ag-list { margin: 2px 0 4px; padding-inline-start: 17px; list-style: disc; }
  #ro-print-doc .audit-guide .ag-list li { margin: 2px 0; font-weight: 500; }
  #ro-print-doc .audit-guide b { color: #15130F; font-weight: 800; }
  #ro-print-doc .audit-guide .ag-note { margin-top: 6px; font-weight: 700; font-size: 9.5px; color: #5E6B74; }
  #ro-print-doc .audit-guide .ag-keys { margin: 6px 0 2px; }

  /* Page background → pure white (only the sheet paper colour changes; all
     other brand greens / type colours / chips stay exactly as designed). */
  #ro-print-doc .sheet { background: #fff !important; }
  /* The footer's solid background was the page paper colour — keep it white too
     so it blends into the sheet behind the fixed footer. */
  #ro-print-doc .foot { background: #fff !important; }
}

/* mobile */
@media(max-width:800px){
  .ro-main{grid-template-columns:1fr}
  .sidebar{position:static}
  .seg-meta-row{grid-template-columns:80px 60px 1fr}
}