@import url("cairo.css");

/* ==========================================================================
   ITPF Scoring System — UI Kit
   Design tokens taken from itpf.net (Blocksy + Elementor global palette).
   Light-only by design: white working surfaces, low-glare page ground.
   Built RTL-first with logical properties — one stylesheet serves ar + en.
   ========================================================================== */

:root{
  /* brand — teal and bronze sampled from the official ITPF logo;
     gold is the federation's interactive accent from itpf.net */
  --teal:#00718F;          /* logo teal — horse, Arabic and English wordmarks */
  --bronze:#8E744A;        /* logo bronze — the ITPF letters and the lance    */
  --bronze-soft:rgba(142,116,74,.14);
  --gold:#F0C029;
  --gold-soft:rgba(240,192,41,.18);
  --gold-deep:#7A5C00;
  --teal-head:#00718F;
  --teal-line:#005672;
  --teal-text:#06465A;
  --teal-tint:rgba(0,113,143,.05);
  --teal-tint-2:rgba(0,113,143,.10);
  --ink:#15181B;
  --body:#4E4E4E;
  --muted:#4B4F53;
  --meta:#ADADAD;

  /* surfaces — white working area on a soft ground */
  --page:#F1F4F6;
  --card:#FFFFFF;
  --surface:#F8F8F8;
  --line:#E3E8EB;
  --line-strong:#D2D2D2;

  /* semantic (separate from the brand accent) */
  --ok:#1E7A5A;      --ok-bg:rgba(30,122,90,.10);
  --warn:#9A6B00;    --warn-bg:rgba(240,192,41,.20);
  --stop:#B3261E;    --stop-bg:rgba(179,38,30,.09);
  --info:#00718F;    --info-bg:rgba(0,113,143,.10);

  --radius-pill:30px;
  --radius-card:14px;
  --radius-field:5px;
  --radius-ctrl:4px;

  --shadow-sm:0 1px 2px rgba(0,70,90,.06);
  --shadow:0 1px 3px rgba(0,70,90,.07), 0 8px 24px rgba(0,70,90,.06);
  --t:all .12s cubic-bezier(.455,.03,.515,.955);

  --sidebar:246px;
  --topbar:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--body);
  font-family:'Cairo',system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-line)}
button{font-family:inherit}

/* Selects.
   The platform's own arrow sits hard against the border, changes shape between
   Windows, macOS and Android, and ignores the type scale. One drawn chevron
   instead, in the ink colour, with room made for it — and the room is forced,
   because every form on the site carries its metrics in a style attribute and
   an inline style outranks a stylesheet. Mirrored for right-to-left, where the
   chevron belongs on the other side. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%2315181B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
  padding-inline-end:38px !important;
  cursor:pointer;
}
html[dir="rtl"] select{background-position:left 13px center}
select::-ms-expand{display:none}
select:disabled{cursor:not-allowed;opacity:.6}

/* The mark on a field that has to be filled in. An abbr rather than a bare
   star, so a screen reader says "required" instead of reading out punctuation,
   and so hovering it says the same thing to everybody else. */
.req{
  color:var(--stop);font-weight:700;text-decoration:none;
  border:0;cursor:help;margin-inline-start:2px;
}

/* Every field label reserves the same height, whether or not it carries a
   translate button. Without this a two-column form has one input sitting lower
   than the one beside it, which reads as sloppy long before anybody works out
   why. Only the height is set here: the labels carry their own colour and
   weight inline, and multi-line labels are free to grow past it. */
label{min-block-size:21px}

/* The translate button beside a bilingual pair of fields, and the line it
   speaks through. Deliberately quiet: it is a convenience, not the point of the
   form. The sentence it leaves behind is the part that matters — a machine
   translation is a draft somebody still has to read.

   The size is written as longhands on purpose. This was `font:600 11.5px/1
   inherit`, and `inherit` is not a valid family inside the `font` shorthand, so
   every browser threw the whole declaration away and drew the button at its own
   default — 13.3px in a 36px pill, inside a 21px label row. One invalid word
   made the button two thirds bigger than intended and knocked every Arabic
   field fifteen pixels down the page. Height is fixed so it can never do that
   again, whatever the font ends up being. */
.tbtn{
  display:inline-flex;align-items:center;gap:4px;
  font-family:inherit;font-size:10.5px;font-weight:700;line-height:1;
  letter-spacing:.02em;color:var(--teal);
  background:var(--teal-tint-2);border:0;border-radius:var(--radius-pill);
  block-size:18px;padding:0 9px;cursor:pointer;vertical-align:middle;
  margin-inline-start:7px;transition:var(--t);
}
.tbtn:hover{background:var(--teal);color:#fff}
.tbtn:disabled{opacity:.55;cursor:progress}
.tbtn .ic{display:inline-flex}
.tsay{display:block;font-size:11.5px;line-height:1.5;margin-block-start:5px;color:var(--meta)}
.tsay.ok{color:var(--warn)}
.tsay.stop{color:var(--stop)}
.tsay.busy{color:var(--teal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shell -------------------------------------------------------- */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar);flex:none;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;position:sticky;inset-block-start:0;height:100vh;
}
.brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 20px 18px;border-block-end:1px solid rgba(255,255,255,.1);
}
.brand .logo{width:158px;height:auto;display:block}
.brand .sys{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-align:center;line-height:1.3;
}
html[lang="ar"] .brand .sys{letter-spacing:0;text-transform:none;font-size:14px}

/* Partnership lockup — ITPF's mark at whatever size the surrounding context
   already gives a logo (`.pub-bar img`, `.brand .logo`, `.login-side img`,
   all descendant-`img` selectors that reach `.bl-main` the same way they'd
   reach a lone `<img>`), plus a small "System by GORCIAN" credit beneath it.
   Specificity note: two classes (`.brand-lockup .bl-mark`) already outrank
   those one-class-plus-tag selectors, so `.bl-mark` needs no `!important` and
   no per-context duplicate — see inc/brand.php's docblock on
   brand_header_html(). Used on the public header, the sign-in page, the app
   sidebar, and the preview swatches on app/settings.php, which is why this
   isn't scoped to any one of those containers. */
.brand-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.login-side .brand-lockup{margin-block-end:30px}
.login-side .brand-lockup .bl-main{margin-block-end:0}
.brand-lockup .bl-by{display:flex;align-items:center;gap:6px}
.brand-lockup .bl-mark{width:16px;height:auto;display:block;margin:0}
.brand-lockup .bl-label{font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap}
.brand-lockup .bl-name{font-size:11px;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.85)}

.nav{padding:14px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1}
.nav .grp{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.38);padding:14px 10px 6px;
}
html[lang="ar"] .nav .grp{letter-spacing:0;text-transform:none;font-size:12px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:rgba(255,255,255,.78);font-size:14px;font-weight:500;transition:var(--t);
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a[aria-current="page"]{background:var(--teal);color:#fff;font-weight:700}
.nav a .ic{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;opacity:.85}
.nav a[aria-current="page"] .ic{opacity:1}
/* Drawn icons sit on the text baseline and take its colour. */
.ic .icn{display:block}
.icn{vertical-align:-.18em}
.nav a.soon{opacity:.4;pointer-events:none}
.nav a.soon::after{
  content:attr(data-soon);margin-inline-start:auto;font-size:10px;font-weight:700;
  background:rgba(255,255,255,.13);padding:1px 7px;border-radius:20px;
}
.credit{
  padding:14px 18px;border-block-start:1px solid rgba(255,255,255,.1);
  font-size:11px;line-height:1.5;color:rgba(255,255,255,.45);
}
.credit b{display:block;color:rgba(255,255,255,.8);font-size:11.5px;font-weight:600}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--topbar);flex:none;background:var(--card);border-block-end:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding-inline:24px;
  position:sticky;inset-block-start:0;z-index:20;
}
.topbar .ttl{font-size:16px;font-weight:700;color:var(--ink)}
.topbar .sub{font-size:12.5px;color:var(--meta)}
.topbar .sp{margin-inline-start:auto}

.evpick{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:6px 8px 6px 14px;font-size:13px;color:var(--ink);
}
.evpick .lvl{
  font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--gold);color:var(--ink);white-space:nowrap;
}

.langsw{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px}
.langsw button{
  border:0;background:transparent;cursor:pointer;padding:5px 13px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:700;color:var(--muted);transition:var(--t);
}
.langsw button:hover{color:var(--ink)}
.langsw button[aria-pressed="true"]{background:var(--teal);color:#fff}

/* The language switcher — a <details> dropdown: flag, code, menu of both. */
.lang-drop{position:relative;font-size:12.5px}
.lang-drop>summary{
  list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  padding:6px 11px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:700;line-height:1;
}
.lang-drop>summary::-webkit-details-marker{display:none}
/* width/height explicit: .pub-bar img sets 112px on every nav image otherwise */
.lang-drop .flag{width:22px;height:16px;flex:none;border-radius:2px;display:block;object-fit:cover}
.lang-drop .lang-code{letter-spacing:.04em}
.lang-drop .lang-caret{font-size:10px;opacity:.65;transition:var(--t)}
.lang-drop[open]>summary{border-color:var(--teal)}
.lang-drop[open] .lang-caret{transform:rotate(180deg)}
.lang-drop .lang-menu{
  position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:60;
  min-width:168px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 30px rgba(15,29,36,.16);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.lang-drop .lang-menu a{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:13px;white-space:nowrap;
}
.lang-drop .lang-menu a:hover{background:var(--surface);color:var(--ink)}
.lang-drop .lang-menu a[aria-current="true"]{background:var(--teal-tint-2);color:var(--teal)}
/* dark tone — over the public header's near-black band */
.lang-drop--dark>summary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.lang-drop--dark[open]>summary{border-color:var(--gold)}

.who{display:flex;align-items:center;gap:10px}
.who .av{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--teal-tint-2);color:var(--teal);font-size:12.5px;font-weight:700;
}
.who .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2}
.who .rl{font-size:11.5px;color:var(--meta);line-height:1.2}

.content{padding:24px;display:flex;flex-direction:column;gap:20px;flex:1}

/* ---------- generic pieces ---------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.card-h{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-block-end:1px solid var(--line);
}
.card-h h2{font-size:15.5px;font-weight:700}
.card-h .hint{font-size:12.5px;color:var(--meta)}
.card-h .sp{margin-inline-start:auto}
.card-b{padding:20px}
.card-b.flush{padding:0}

/* A printed document's letterhead has to sit in a real <table><thead> to
   repeat on every physical page — a <div> above the content only ever prints
   once, on page 1, which is the bug print.css's ".print-page" rules fix. On
   screen none of that table structure should be visible or change layout at
   all, so every part of it renders as a plain block here; print.css is the
   only place any of it becomes an actual table. */
.print-page,.print-page thead,.print-page tbody,.print-page tr,.print-page td{
  display:block;margin:0;padding:0;border:0;width:auto;
}

.rule{
  font-size:11.5px;color:var(--teal);background:var(--teal-tint-2);
  padding:2px 9px;border-radius:20px;font-weight:600;white-space:nowrap;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font-size:14px;font-weight:500;padding:10px 22px;border-radius:var(--radius-pill);
  transition:var(--t);white-space:nowrap;
}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#FFD24A}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-line)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:#EDF1F3}
.btn-sm{font-size:13px;padding:7px 16px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.stop{background:var(--stop-bg);color:var(--stop)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.mute{background:rgba(78,78,78,.09);color:var(--muted)}
.pill.gold{background:var(--gold);color:var(--ink)}

/* judge badge chips — colour encodes the ITPF badge level (Art. 111.1) */
.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:2px 10px;border-radius:20px;white-space:nowrap;
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.badge.l1{background:rgba(240,192,41,.22);color:#7A5C00}
.badge.l2{background:rgba(120,132,140,.18);color:#5A646B}
.badge.l3{background:rgba(166,110,62,.16);color:#8A5A32}
.badge.local{background:rgba(78,78,78,.09);color:var(--muted)}
.badge.elec{background:var(--info-bg);color:var(--info)}

/* ---------- stat strip --------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 18px}
.stat .k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--meta)}
html[lang="ar"] .stat .k{letter-spacing:0;text-transform:none;font-size:13px}
.stat .v{font-size:29px;font-weight:700;color:var(--ink);line-height:1.15;margin-block-start:4px}
.stat .n{font-size:12px;color:var(--meta)}
.stat .v small{font-size:14px;font-weight:600;color:var(--meta)}

/* ---------- event header ------------------------------------------------- */
.ev{
  background:linear-gradient(135deg,#0F1D24 0%,var(--ink) 58%,#101A1F 100%);
  border-radius:var(--radius-card);padding:26px 28px;color:rgba(255,255,255,.76);
  position:relative;overflow:hidden;
}
.ev::after{
  content:"";position:absolute;inset-block-start:-60%;inset-inline-end:-8%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(41,114,144,.5),transparent 66%);pointer-events:none;
}
.ev .row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;position:relative;z-index:1}
.ev h1{color:#fff;font-size:25px;font-weight:700;line-height:1.25}
.ev .host{font-size:13.5px;color:var(--gold);font-weight:600;margin-block-end:7px}
.ev .meta{display:flex;flex-wrap:wrap;gap:18px;margin-block-start:14px;font-size:13px}
.ev .meta div{display:flex;flex-direction:column}
.ev .meta .k{font-size:11px;color:rgba(255,255,255,.5)}
.ev .meta .v{color:#fff;font-weight:600}
.ev .side{margin-inline-start:auto;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
html[dir="rtl"] .ev .side{align-items:flex-start}

/* day progress */
.days{display:flex;gap:8px;flex-wrap:wrap}
.day{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);
  padding:6px 14px;font-size:12.5px;color:rgba(255,255,255,.8);
}
.day b{color:#fff;font-weight:600}
.day .dot{width:7px;height:7px;border-radius:50%;flex:none}
.day.done .dot{background:#4ADE9B}
.day.live .dot{background:var(--gold);box-shadow:0 0 0 3px rgba(240,192,41,.25)}
.day.todo .dot{background:rgba(255,255,255,.3)}

/* ---------- tables ------------------------------------------------------- */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px;background:var(--card)}
table.t thead th{
  background:var(--teal-head);color:#fff;font-weight:700;font-size:13px;
  padding:12px 13px;text-align:start;white-space:nowrap;
  border-block-end:1px solid var(--teal-line);position:sticky;inset-block-start:0;
}
table.t thead th.num,table.t td.num{text-align:end;font-variant-numeric:tabular-nums}
table.t tbody td{padding:11px 13px;color:var(--teal-text);border-block-end:1px solid var(--line)}
table.t tbody tr:nth-child(odd) td{background:var(--teal-tint)}
table.t tbody tr:hover td{background:var(--gold-soft)}
table.t tbody tr.grp-total td{
  background:rgba(41,114,144,.13);font-weight:700;color:var(--teal-line);
  border-block-end:1px solid rgba(35,89,116,.3);
}
table.t tbody tr.grp-total:hover td{background:rgba(41,114,144,.17)}
table.t tfoot td{padding:11px 13px;font-weight:700;color:var(--teal-line);background:rgba(41,114,144,.09)}
table.t .sub{display:block;font-size:11.5px;color:var(--meta);font-weight:400}
.flag{
  display:inline-grid;place-items:center;width:22px;height:16px;border-radius:2px;flex:none;
  background:var(--teal-tint-2);color:var(--teal);font-size:8.5px;font-weight:700;
}
.athlete{display:flex;align-items:center;gap:9px;min-width:0}
.athlete .bib{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(53,113,143,.12);color:var(--teal-text);font-size:11.5px;font-weight:700;
}
.rank{
  display:inline-grid;place-items:center;min-width:26px;height:26px;padding-inline:6px;
  border-radius:20px;background:rgba(53,113,143,.12);color:var(--teal-text);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
}
.rank.m1{background:var(--gold);color:var(--ink)}
.rank.m2{background:#D8DDE1;color:#4A5257}
.rank.m3{background:rgba(166,110,62,.28);color:#7A4E2A}
.neg{color:var(--stop);font-weight:600}
.zero{color:var(--meta)}

/* ---------- score entry -------------------------------------------------- */
.scorebtns{display:flex;gap:5px;flex-wrap:wrap}
.sb{
  border:1px solid var(--line-strong);background:var(--card);cursor:pointer;
  border-radius:var(--radius-ctrl);padding:5px 11px;font-size:12.5px;font-weight:700;
  color:var(--muted);transition:var(--t);min-width:42px;
}
.sb:hover{border-color:var(--teal);color:var(--teal)}
.sb[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.sb.miss[aria-pressed="true"]{background:var(--muted);border-color:var(--muted)}
.tin{
  width:78px;font-family:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;
  background:var(--surface);border:.8px solid var(--line-strong);border-radius:var(--radius-field);
  padding:6px 9px;color:var(--ink);text-align:end;
}
.tin:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(41,114,144,.14)}

.legend{display:flex;flex-wrap:wrap;gap:10px}
.legend .li{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;font-size:13px;flex:1 1 150px;
}
.legend .li b{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--teal);color:#fff;font-size:13px;font-weight:700;
}
.legend .li.z b{background:var(--meta)}
.legend .li span{color:var(--ink);font-weight:600;line-height:1.25}
.legend .li em{display:block;font-style:normal;font-size:11.5px;color:var(--meta);font-weight:400}

/* ---------- jury compliance --------------------------------------------- */
.jury{display:flex;flex-direction:column}
.jrow{
  display:grid;grid-template-columns:1.15fr 1.5fr auto auto;gap:14px;align-items:center;
  padding:12px 20px;border-block-end:1px solid var(--line);font-size:13.5px;
}
.jrow:last-child{border-block-end:0}
.jrow .role{font-weight:700;color:var(--ink)}
.jrow .role em{display:block;font-style:normal;font-size:11.5px;color:var(--meta);font-weight:400}
.jrow .person{color:var(--body)}
.jrow .person em{display:block;font-style:normal;font-size:11.5px;color:var(--meta)}
.jrow.bad{background:var(--stop-bg)}
.jrow.warnrow{background:rgba(240,192,41,.09)}

.note{
  display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:10px;
  background:var(--info-bg);font-size:13px;color:var(--teal-line);line-height:1.55;
}
.note.warn{background:var(--warn-bg);color:var(--gold-deep)}
.note.stop{background:var(--stop-bg);color:var(--stop)}
.note .ic{flex:none;font-size:15px;line-height:1.3}
.note b{font-weight:700}

/* ---------- class cards -------------------------------------------------- */
.runs{display:flex;gap:6px;flex-wrap:wrap}
.run{
  display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-ctrl);padding:3px 9px;
  font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.run b{color:var(--teal-text)}

/* ---------- tabs --------------------------------------------------------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:14px 20px;border-block-end:1px solid var(--line);background:var(--surface)}
.tab{
  border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:var(--radius-pill);
  padding:7px 16px;font-size:13px;font-weight:600;color:var(--muted);transition:var(--t);
}
.tab:hover{border-color:var(--teal);color:var(--teal)}
.tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.tab .d{font-size:11px;opacity:.75;margin-inline-start:5px}

/* ---------- result card (print document) -------------------------------- */
.docbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px 20px;
}
.docbar .sp{margin-inline-start:auto}

.sheet{
  background:#fff;border:1px solid var(--line-strong);border-radius:6px;
  width:100%;max-width:820px;margin-inline:auto;padding:44px 46px;color:#1a1a1a;
  box-shadow:var(--shadow);
}
.sheet .doc-h{
  display:flex;gap:20px;align-items:flex-start;padding-block-end:16px;
  border-block-end:2px solid var(--teal-head);
}
.sheet .doc-h .logo{width:92px;height:auto;flex:none;display:block}
.sheet .doc-h .t1{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-head)}
html[lang="ar"] .sheet .doc-h .t1{letter-spacing:0;text-transform:none;font-size:13px}
.sheet .doc-h h1{font-size:21px;font-weight:700;color:#111;line-height:1.3;margin-block-start:3px}
.sheet .doc-h .t2{font-size:13px;color:#555;margin-block-start:3px}
.sheet .doc-h .idblk{margin-inline-start:auto;text-align:end;font-size:11.5px;color:#666;line-height:1.6}
html[dir="rtl"] .sheet .doc-h .idblk{text-align:start}
.sheet .doc-h .idblk b{display:block;color:#111;font-size:13px;font-family:ui-monospace,Menlo,monospace}

.docmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-block:20px}
.docmeta div{border-inline-start:3px solid var(--teal-tint-2);padding-inline-start:11px}
.docmeta .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#888}
html[lang="ar"] .docmeta .k{letter-spacing:0;text-transform:none;font-size:12px}
.docmeta .v{font-size:14px;font-weight:600;color:#111}

table.doc{width:100%;border-collapse:collapse;font-size:13px;margin-block-start:8px}
table.doc thead th{
  background:var(--teal-head);color:#fff;font-size:12px;font-weight:700;
  padding:9px 10px;text-align:start;border:.8px solid var(--teal-line);
}
table.doc tbody td{padding:8px 10px;border:.8px solid rgba(35,89,116,.35);color:#143F54}
table.doc tbody tr:nth-child(odd) td{background:var(--teal-tint)}
table.doc .num{text-align:end;font-variant-numeric:tabular-nums}
table.doc tbody td b{color:#111}

.sigblk{margin-block-start:30px;border-block-start:1px solid #ddd;padding-block-start:22px}
.sigblk h3{font-size:13px;font-weight:700;color:#111;margin-block-end:4px}
.sigblk .sub{font-size:11.5px;color:#777;margin-block-end:18px}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.sig{display:flex;flex-direction:column;gap:3px}
.sig .line{border-block-end:1px dotted #999;height:34px}
.sig .nm{font-size:12.5px;font-weight:700;color:#111}
.sig .rl{font-size:11px;color:#777}
.sig .bd{font-size:10.5px;color:#8A6A00;font-weight:700}

.chair{
  margin-block-start:26px;background:var(--teal-tint);border:1px solid rgba(35,89,116,.28);
  border-radius:8px;padding:18px 20px;display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;
}
.chair .who2{flex:1 1 220px}
.chair .who2 .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
html[lang="ar"] .chair .who2 .k{letter-spacing:0;text-transform:none;font-size:12px}
.chair .who2 .v{font-size:15px;font-weight:700;color:#111}
.chair .who2 .s{font-size:11.5px;color:#666}
.chair .line{flex:1 1 200px;border-block-end:1px dotted #888;height:40px}

.verify{display:flex;gap:16px;align-items:center;margin-block-start:24px;padding-block-start:18px;border-block-start:1px solid #eee}
.verify .qr{width:74px;height:74px;flex:none;border:1px solid #ddd;border-radius:4px;padding:5px;background:#fff}
.verify .tx{font-size:11.5px;color:#777;line-height:1.6}
.verify .tx b{display:block;color:#111;font-size:12.5px}
.verify .tx code{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--teal)}

/* scan-back proof panel */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.drop{
  border:1.5px dashed var(--line-strong);background:var(--surface);border-radius:10px;
  padding:22px;display:flex;gap:14px;align-items:center;
}
.drop .ic{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--teal-tint-2);color:var(--teal);font-size:18px;
}
.drop .t{font-size:14px;font-weight:600;color:var(--ink)}
.drop .s{font-size:12px;color:var(--meta)}
.chain{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:12px;padding-block:10px;font-size:13px}
.step .mk{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;background:var(--ok-bg);color:var(--ok);
}
.step.todo .mk{background:rgba(78,78,78,.09);color:var(--meta)}
.step.live .mk{background:var(--warn-bg);color:var(--warn)}
.step .tx b{display:block;color:var(--ink);font-weight:600}
.step .tx em{font-style:normal;font-size:11.5px;color:var(--meta)}

/* ---------- footer credit ------------------------------------------------ */
.foot{
  margin-block-start:auto;padding:18px 24px;border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:var(--meta);
}
.foot .sp{margin-inline-start:auto}
.foot b{color:var(--muted);font-weight:600}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1040px){
  .sidebar{position:fixed;inset-inline-start:-260px;z-index:60;transition:var(--t)}
  .sidebar.open{inset-inline-start:0}
  .jrow{grid-template-columns:1fr;gap:6px}
  .sheet{padding:26px 22px}
  .sigs{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* the topbar chips must never force the page wider than the viewport */
  .topbar{padding-inline:14px;gap:10px}
  .topbar > *{min-width:0}
  .topbar .ttl{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .sub,.who .rl,.who .nm,.evpick{display:none}
  .content{padding:14px}
  .ev{padding:20px}
  .ev h1{font-size:20px}
  .langsw button{padding:5px 10px;font-size:12px}
}
.burger{display:none;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 11px;cursor:pointer;font-size:15px}
@media (max-width:1040px){.burger{display:block}}

/* ---------- print -------------------------------------------------------- */
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;font-size:11.5px}
  .sidebar,.topbar,.docbar,.foot,.noprint{display:none !important}
  .content{padding:0;gap:0}
  .shell{display:block}
  .sheet{
    max-width:none;width:100%;border:0;border-radius:0;box-shadow:none;padding:0;
  }
  table.doc thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.doc tbody tr:nth-child(odd) td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet .doc-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet .doc-h .logo{-webkit-print-color-adjust:exact;print-color-adjust:exact;width:80px}
  .chair{-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
  .sigblk{break-inside:avoid}
  tr{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---------- reveal-password toggle -------------------------------------- */
/* The button sits inside the field on the inline-end side, so it lands on the
   right in English and the left in Arabic without a second rule. */
.pw-wrap{position:relative;display:block}
.pw-wrap > input{width:100%;padding-inline-end:44px !important}
.pw-toggle{
  position:absolute;inset-block-start:50%;inset-inline-end:6px;transform:translateY(-50%);
  display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:0;border-radius:6px;background:transparent;cursor:pointer;
  color:var(--muted);transition:var(--t);
}
.pw-toggle:hover{color:var(--teal);background:rgba(0,113,143,.08)}
.pw-toggle[aria-pressed="true"]{color:var(--teal)}
.pw-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.pw-toggle svg{display:block;pointer-events:none}

/* A select you can type into — assets/pick.js.

   The register holds four hundred judges, and a list that long is a scroll
   rather than a choice. The native select stays in the form and stays the
   thing that is submitted; this is the box in front of it. Where JavaScript
   does not run, the select is what is left, which is why it is hidden by a
   class the script adds rather than by this stylesheet. */
/* The wrapper takes the place of the select inside its form row, so it has
   to take the selects flex behaviour with it — otherwise the box shrinks to
   its own content and leaves half the column empty. min-inline-size:0 stops
   a long name forcing the row wider than its cell. */
.pick{position:relative;flex:1 1 auto;min-inline-size:0}
.pick .pick-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pick-input{
  font-family:inherit;font-size:13.5px;width:100%;
  background-color:var(--surface);border:.8px solid var(--line-strong);
  border-radius:5px;padding:8px 11px 8px 32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 9px center;background-size:15px 15px;
}
html[dir="rtl"] .pick-input{
  padding:8px 32px 8px 11px;background-position:right 9px center;
}
/* Somebody is in this seat: the box says so rather than looking unfilled. */
.pick.has .pick-input{border-color:var(--teal);font-weight:600;color:var(--ink)}
.pick-input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.pick-input:disabled{opacity:.6;cursor:not-allowed}
.pick-list{
  position:absolute;z-index:40;inset-inline:0;margin:3px 0 0;padding:4px;
  list-style:none;max-height:250px;overflow-y:auto;
  background:#fff;border:1px solid var(--line-strong);border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.13);
}
.pick-opt{
  padding:7px 9px;border-radius:4px;font-size:13px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pick-opt:hover,.pick-opt.on{background:var(--surface);color:var(--teal)}
.pick-count{font-size:11.5px;color:var(--meta);margin-block-start:4px;min-height:1em}

/* A country flag beside a name. Bordered, because several national flags are
   mostly white and would otherwise dissolve into the page. */
.flag{
  display:inline-block;vertical-align:-3px;border-radius:2px;
  border:.5px solid var(--line-strong);object-fit:cover;
}

/* A picker holding a country wears its flag where the magnifier sits. The
   background-image is set inline by pick.js; this only makes room for it and
   keeps the border quiet, since the flag already says the box is filled. */
.pick-input.has-flag{
  background-repeat:no-repeat;
  background-position:left 9px center;
  padding-inline-start:36px;
}
html[dir="rtl"] .pick-input.has-flag{
  background-position:right 9px center;
  padding-inline-start:11px;padding-inline-end:36px;
}