:root{
  /* Brand. #7cbe56 is the CXM mark colour; the darker steps are the same hue
     (98deg) at lower lightness, so headers read as green rather than as a
     neutral. #7cbe56 only reaches 2.24:1 against white, so it never carries
     white text — it takes --brand-ink instead. */
  --brand:#7cbe56; --brand-ink:#10230a;
  --brand-950:#192810; --brand-900:#243a18; --brand-800:#31511f;
  --brand-700:#3f6827; --brand-600:#508632;
  --brand-100:#e3f0db; --brand-50:#f4f9f1;

  --ink:#12171f; --ink-soft:#4f5a52;
  --paper:#e9f1e3; --panel:#fff;
  --rule:#c6d3bd; --rule-faint:#dde7d6;

  --ok:#2f6b3c; --warn:#8a5a00; --warn-bg:#fbf3e2; --red:#a3232b;

  --sans:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}

.bar{background:var(--brand-950);border-bottom:3px solid var(--brand)}
.bar-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between}
.brand{
  color:#fff;text-decoration:none;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.5em;
  /* line-height:1 collapses the leading so the flex centres the mark against
     the em box rather than a padded line box. Two errors cancel at this value:
     centring on the em box sits ~0.05em below the capitals (descender space is
     counted below the baseline), and this mark's ink sits 3.8% above its own
     bounding-box centre, which is ~0.06em at the size below. A hardcoded
     translateY would over-correct. */
  line-height:1;
  font-size:16px;
}
.brand img{
  display:block;
  /* em-based, so the mark tracks the wordmark if the font size changes */
  width:1.55em;height:1.55em;
  flex:0 0 auto;
}
.brand span{line-height:1}
@media(max-width:420px){.brand{font-size:15px}}

.signin-mark{display:block;margin:0 auto 14px;width:50px;height:50px}
.bar nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px}
.bar nav a{color:#dcebd2;text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
.bar nav a:hover{color:#fff;border-bottom-color:var(--brand)}
.who{color:#a9c199;font-size:13px}
.tag{background:var(--brand);color:var(--brand-ink);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px}

main{max-width:1180px;margin:0 auto;padding:20px}
.card{background:var(--panel);border:1px solid var(--rule);padding:18px 20px;margin-bottom:18px}
.card.narrow{max-width:660px}
.card.center{text-align:center}
.stack>*{margin-bottom:18px}
.stack-sm label{display:block;margin-bottom:12px;font-size:14px}
h1{font-size:21px;margin:0 0 8px;font-weight:600}
h2{font-size:15px;margin:0 0 12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-800);display:flex;gap:10px;align-items:baseline}
h2 .num{font:600 12px var(--mono);color:var(--brand);letter-spacing:0}
.muted{color:var(--ink-soft);font-size:13.5px;margin:0 0 12px}
.note{background:var(--brand-50);border-left:3px solid var(--rule);padding:8px 12px;font-size:13px;color:var(--ink-soft);margin:0 0 14px}
.hint{color:var(--ink-soft);font-size:11.5px;display:inline-block;margin-left:4px}
.err{color:var(--red)}
.flash{max-width:1180px;margin:0 auto 16px;padding:11px 14px;background:var(--brand-100);border-left:3px solid var(--ok);font-size:14px}
.flash.err{background:#fbecec;border-left-color:var(--red);color:#6d1c1c}

.row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule-faint)}
.row:last-child{border-bottom:0}
.row[hidden]{display:none}
.lbl{display:flex;align-items:baseline;min-width:0;font-size:14px}
.lbl::after{content:"";flex:1 1 12px;min-width:12px;border-bottom:1px dotted var(--rule);margin:0 8px 5px}
.req{color:var(--brand);font-weight:600;margin-left:3px}
@media(max-width:680px){.row{grid-template-columns:1fr}.lbl::after{display:none}.lbl{margin-bottom:5px}}

input[type=text],input[type=email],input[type=number],input[type=search],select,textarea{
  width:100%;padding:7px 9px;font:400 14px/1.2 var(--mono);color:var(--ink);
  background:#fcfdfb;border:1px solid var(--rule);border-radius:0}
select{font-family:var(--sans);cursor:pointer}
textarea{font-size:12.5px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a.btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px;background:#fff}
input:disabled{background:var(--rule-faint);color:#9fada0;border-style:dashed}
input.bad{border-color:var(--red);background:#fdf3f3}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--ok);cursor:pointer;margin:0}

.btn{display:inline-block;font:600 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:10px 15px;border:1px solid var(--brand-800);background:transparent;color:var(--brand-800);
  text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{background:var(--brand-800);color:#fff}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{background:#8ecb66;border-color:#8ecb66;color:var(--brand-ink)}
.btn.sm{padding:5px 8px;font-size:11px;letter-spacing:.04em}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.inline input[type=search]{width:auto;min-width:16rem}

table{border-collapse:collapse;width:100%}
.rules thead th,.grid thead th{text-align:left;padding:8px 8px 8px 0;font:600 11px/1.3 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--rule);vertical-align:bottom}
.rules td,.grid td{padding:6px 8px 6px 0;border-bottom:1px solid var(--rule-faint);font-size:13.5px;vertical-align:middle}
.rules tr:last-child td,.grid tr:last-child td{border-bottom:0}
.rules thead th.c,.grid td.c,.grid th.c{text-align:center}
.rules tr.on{background:var(--brand-50)}
.rules tr.on td:first-child label{font-weight:600}
.rules td:first-child label{cursor:pointer}
.dash{color:var(--rule);font:500 14px var(--mono)}
.nowrap{white-space:nowrap}
tr.off{opacity:.5}
.editor input,.editor select,.editor textarea{font-size:12.5px;padding:5px 6px}
code{font:400 12px var(--mono);background:var(--rule-faint);padding:1px 4px}
.log{font:400 12px var(--mono);margin-top:10px}
.log td{padding:2px 10px 2px 0;border-bottom:1px solid var(--rule-faint)}
.log tr.warn td{background:var(--warn-bg);color:var(--red)}
details summary{cursor:pointer;font-size:13px;color:var(--ink-soft);margin-top:12px}
.ok-tag{color:var(--ok);font-size:11.5px;font-weight:600}
.err-tag{color:var(--red);font-size:11.5px;font-weight:600}

/* ---------------- localisation ---------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.langpick{display:inline-flex;margin:0}
.langpick select{padding:4px 6px;font-size:12.5px;background:var(--brand-900);color:#dcebd2;border-color:var(--brand-700)}
.langpick select:hover{border-color:var(--brand-600)}
.hint.en{color:var(--ink-soft);font-size:11px;font-style:italic;margin-inline-start:6px}
.hint.en::before{content:"("}
.hint.en::after{content:")"}
.rule-type{display:block;font:400 11px/1.3 var(--mono);color:var(--ink-soft);margin-top:2px}

/* Logical properties so the leader, accents and padding all mirror in Arabic. */
.lbl::after{margin-inline:8px;margin-block-end:5px}
.note{border-left:0;border-inline-start:3px solid var(--rule)}
.flash{border-left:0;border-inline-start:3px solid var(--ok)}
.flash.err{border-inline-start-color:var(--red)}
.rules thead th,.grid thead th,.rules td,.grid td{padding-inline:0 8px;text-align:start}
.rules thead th.c,.grid th.c,.grid td.c{text-align:center}

[dir=rtl] .bar nav{flex-direction:row-reverse}
[dir=rtl] .log,[dir=rtl] code{direction:ltr;text-align:left;unicode-bidi:embed}
/* Reference codes, cell addresses and numbers must not reorder under RTL. */
[dir=rtl] input[type=number],[dir=rtl] .langpick select{direction:ltr}

/* ---------------- translation editor ---------------- */
.cov{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cov a{display:flex;gap:7px;align-items:baseline;padding:6px 9px;border:1px solid var(--rule);
  text-decoration:none;color:var(--ink);font-size:13px;background:#fcfdfb}
.cov a:hover{border-color:var(--brand-800)}
.cov a.on{border-color:var(--brand-800);background:var(--brand-800);color:#fff}
.cov .pct{font:600 11px var(--mono);color:var(--ink-soft)}
.cov a.on .pct{color:#dcebd2}
.cov .review{color:var(--brand);font-weight:600;font-size:11px}
tr.needs-review td{background:var(--warn-bg)}
.en-ref{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:3px}

/* Assets are requested with ?v=<mtime>, so a changed file gets a new URL and
   a stale stylesheet can no longer survive in a browser cache. */

/* ---------------- guidance text ---------------- */
/* Section intro. Sits between the heading and the first field. */
.guide{
  background:var(--brand-50);
  border-inline-start:3px solid var(--brand);
  padding:12px 14px;
  margin:0 0 16px;
  font-size:13.5px;
  color:var(--ink);
}
.guide p{margin:0 0 8px}
.guide p:last-child{margin-bottom:0}
.guide ul{margin:8px 0;padding-inline-start:20px}
.guide li{margin:4px 0}
.guide strong{color:var(--brand-800)}

/* Per-field description. */
.desc{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.desc p{margin:0 0 5px}
.desc p:last-child{margin-bottom:0}
.desc ul{margin:4px 0;padding-inline-start:18px}
.desc strong{color:var(--ink)}

/* The row is a two-column grid; a description takes its own full-width line
   below, which is why it is last in the DOM. aria-describedby keeps the input
   and its description associated for screen readers regardless of order. */
.row-desc{grid-column:1 / -1;margin:2px 0 4px;max-width:70ch}
.rules td .desc{margin:3px 0 0;max-width:64ch}
@media(max-width:680px){.row-desc{grid-column:1}}

/* ---------------- raffle form ---------------- */
.awards-scroll{overflow-x:auto}
table.awards{min-width:760px}
table.awards th{white-space:nowrap}
table.awards td{padding-inline-end:8px;vertical-align:middle}
table.awards .place-cell{white-space:nowrap}
table.awards input{min-width:8rem}
.rules td input[data-notes-for]{min-width:9rem}
.counter{font:400 11px var(--mono);color:var(--ink-soft);display:inline-block;margin-top:3px}
.counter.over{color:var(--red);font-weight:600}
.row.conditional[hidden]{display:none}

/* Awards grid: keep the four inputs on one comfortable line and stop the
   value column stretching. The hint that used to sit under every text cell
   now appears once above the table. */
table.awards th:first-child,table.awards td:first-child{width:5.5rem}
table.awards td:nth-child(2) input,
table.awards td:nth-child(3) input,
table.awards td:nth-child(5) input{min-width:11rem}
table.awards td:nth-child(4) input{min-width:6.5rem;max-width:8rem}
table.awards tr td{padding-block:5px}