/* Ustaz console.
 *
 * Tokens are Stitch's "Digital Sanctuary" system, pinned here rather
 * than imported from the public style.css: the two are meant to look
 * related, not identical, and the public sheet is 16 KB of things a
 * working queue does not need.
 *
 * Amber is RESERVED for corpus matches. Anywhere else it dilutes the one
 * signal an ustaz should be able to read without stopping to think.
 */
:root {
  /* Shared palette: the same values as ui.css (the reader site), so the
     console and the public pages read as one product. The console keeps
     its own component sheet because a working queue is denser than a
     reading page; only the tokens are shared. */
  --paper:   #F3F4F2; --paper2: #F8F9F8; --panel: #FFFFFF;
  --ink:     #141F24; --ink2:   #3D4B50; --muted: #6F7C81;
  --line:    #DEE3E0; --hair:   #DEE3E0; --line2: #C9D0CD;
  --verdigris: #2C5E58; --verdigris-2: #E3EEEC; --verdigris-3: #24504B;
  --rubric:  #A33520; --rubric-2: #F6E6E2;
  --ochre:   #8A6E2F; --ochre-2:  #F3ECDC;
  --amber:   #FFF6DC; --amber-line: #E4D7A6;
  --on-accent: #FFFFFF; --focus: #2C5E58;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ar:      "Amiri", "Scheherazade New", "Traditional Arabic", "Noto Naskh Arabic", serif;

  /* The console's own names, now aliases of the shared palette. Amber is
     still RESERVED for corpus matches. */
  --primary:           var(--verdigris);
  --primary-deep:      var(--ink);
  --primary-container: var(--verdigris-2);
  --on-primary:        var(--on-accent);
  --surface:           var(--paper);
  --card:              var(--panel);
  --sunken:            var(--paper2);
  --locked:            var(--paper2);
  --ink-muted:         var(--ink2);
  --match:             var(--amber);
  --match-line:        var(--amber-line);
  --match-ink:         var(--ochre);
  --line-strong:       var(--line2);
  --error:             var(--rubric);
  --error-bg:          var(--rubric-2);
  --tint:              var(--verdigris-2);

  --r:      8px;
  --r-lg:   12px;
  --font:   var(--body);
  --serif:  var(--display);
  --arabic: var(--ar);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#151A1C; --paper2:#1B2123; --panel:#1F2628; --ink:#E9ECEA; --ink2:#C4CCC9; --muted:#8E9B98;
  --line:#3B4548; --hair:#2B3437; --verdigris:#7FBDB4; --verdigris-2:#1F3331; --verdigris-3:#9CCFC7;
  --rubric:#E08874; --rubric-2:#3A2320; --ochre:#D2B36A; --ochre-2:#332C1C; --amber:#332C1C; --amber-line:#5A4D2A;
  --on-accent:#0F1A18; --focus:#7FBDB4; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper:#151A1C; --paper2:#1B2123; --panel:#1F2628; --ink:#E9ECEA; --ink2:#C4CCC9; --muted:#8E9B98;
  --line:#3B4548; --hair:#2B3437; --verdigris:#7FBDB4; --verdigris-2:#1F3331; --verdigris-3:#9CCFC7;
  --rubric:#E08874; --rubric-2:#3A2320; --ochre:#D2B36A; --ochre-2:#332C1C; --amber:#332C1C; --amber-line:#5A4D2A;
  --on-accent:#0F1A18; --focus:#7FBDB4; color-scheme: dark }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink);
       font-family: var(--font); min-height: 100vh; }

/* ----------------------------------------------------------- top bar */
/* Scholar workflows need a stable horizontal map. The old two-item
   sidebar left most wide screens empty and stopped scaling as soon as the
   pair, route and evidence queues became real destinations. */
.topbar { background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink);
          -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
          position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--hair); }
.topbar-in { max-width: 1240px; margin: 0 auto; padding: 0 28px;
             display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand . who" "nav nav nav";
             align-items: center; column-gap: 24px; }
.brand { grid-area: brand; font: 600 1.28rem/1 var(--display); color: var(--ink); text-decoration: none;
         white-space: nowrap; letter-spacing: -.01em; padding: 16px 0 10px; }
.brand span { color: var(--verdigris); }
.brand small { margin-inline-start: 10px; font: 400 .64rem/1 var(--mono); color: var(--muted);
               letter-spacing: .1em; text-transform: uppercase; }
nav.main { grid-area: nav; display: flex; gap: 2px; min-width: 0; overflow-x: auto;
           scrollbar-width: none; margin: 0 -10px; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a { color: var(--ink2); text-decoration: none; padding: 8px 10px 10px;
             border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; white-space: nowrap; }
nav.main a:hover { color: var(--ink); }
nav.main a.on { color: var(--ink); border-bottom-color: var(--verdigris); font-weight: 600; }
.who { grid-area: who; font-size: 12px; color: var(--muted); text-align: right; padding-top: 6px; }
.who b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.who a { color: var(--verdigris); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verdigris);
       display: inline-block; margin-right: 6px; }
.dot.off { background: var(--muted); }
@media (max-width: 640px) { .topbar-in { padding: 0 16px; } .who b { font-size: 12px; } }

/* ------------------------------------------------------------- main */
/* Reading width, not screen width. A 1440px line of Indonesian prose is
   unreadable; the queue is text an ustaz reads carefully, so it is
   capped where a book would cap it. */
main { padding: 44px 28px 80px; max-width: 1180px; margin: 0 auto; }
main:focus { outline: none; }
h1 { margin: 0 0 4px; font: 600 34px/1.2 var(--serif); letter-spacing: -.01em; }
.subtitle { margin: 0 0 28px; color: var(--muted); font-size: 15px; }
.muted { color: var(--muted); font-size: 14px; }
.spinner { display: inline-block; width: 12px; height: 12px;
           border: 2px solid var(--line-strong); border-top-color: var(--primary);
           border-radius: 50%; animation: spin .7s linear infinite;
           vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

.err { background: var(--error-bg); color: var(--rubric); padding: 12px 16px;
       border-radius: var(--r); margin-bottom: 16px; font-size: 14px; }
.empty { padding: 60px; text-align: center; color: var(--muted); }

button { font: 500 14px/1 var(--font); padding: 10px 16px; cursor: pointer;
         border-radius: var(--r); border: 1px solid var(--line-strong);
         background: var(--card); color: var(--ink); }
button:hover:not(:disabled) { border-color: var(--primary); }
button.primary { background: var(--primary); border-color: var(--primary);
                 color: var(--on-accent); }
button.danger { color: var(--error); border-color: var(--error-bg); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }

select, input[type=text], input[type=password], input[type=search] {
  padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r); font: 400 14px/1 var(--font);
  background: var(--card); color: var(--ink); }
select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
  border-color: var(--primary); }
textarea { width: 100%; padding: 12px; border: 1px solid var(--line-strong);
           border-radius: var(--r); font: 400 16px/1.6 var(--font);
           resize: vertical; background: var(--card); color: var(--ink); }
label > span:first-child { display: block; margin-bottom: 6px; }

.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 20px;
           flex-wrap: wrap; }
.pill { font: 400 14px/1 var(--font); padding: 9px 14px; cursor: pointer;
        border: 1px solid var(--line); border-radius: var(--r);
        background: var(--card); color: var(--ink); }
.pill.on { background: var(--primary); color: var(--on-accent); border-color: var(--primary); }
.count { margin-left: auto; font-size: 13px; color: var(--muted); }

/* Hairline borders, no shadows. Depth here comes from tone, which is
   what keeps a long queue calm rather than busy. */
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r-lg); margin-bottom: 20px; }
.card > .band { padding: 18px 20px; }
.card > .band + .band { border-top: 1px solid var(--line); }
.row { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

.label { font: 600 12px/1 var(--font); letter-spacing: .05em;
         text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
         display: flex; align-items: center; gap: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 4px 9px; border-radius: 999px;
        background: var(--tint); color: var(--verdigris); }
.chip.warn { background: var(--error-bg); color: var(--rubric); }
.badge { display: inline-block; font-size: 11px; padding: 3px 8px;
         border-radius: 999px; background: var(--locked); color: var(--ink-muted);
         margin-right: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* -------------------------------------------------------- sign in */
.signin { max-width: 460px; background: var(--card); border: 1px solid var(--line);
          border-radius: var(--r-lg); padding: 24px; }
.signin h2 { margin: 0 0 6px; font: 500 18px/1.4 var(--font); }
.signin p { margin: 0 0 16px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.signin input { width: 100%; font-family: var(--mono); }
.signin .row { margin-top: 12px; justify-content: flex-start; }

/* ------------------------------------------------------ consult */
.ask { font: 400 23px/1.45 var(--serif); margin-bottom: 10px;
        color: var(--ink); }
.meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

.match { background: var(--match); border: 1px solid var(--match-line);
         border-radius: var(--r); padding: 14px; margin-bottom: 16px; }
.match .label { color: var(--match-ink); }
.match .q { font-size: 16px; margin-bottom: 6px; }
.match .r { font-size: 13px; color: var(--ink-muted); }
.nomatch { font-size: 13px; color: var(--muted); margin-bottom: 16px;
           padding: 12px 14px; background: var(--sunken); border-radius: var(--r); }
.teach { margin-top: 12px; padding-top: 12px; font-size: 13px; line-height: 1.6;
         border-top: 1px solid var(--match-line); color: var(--match-ink); }
.teach button { margin-top: 10px; font-size: 13px; padding: 8px 12px; }
.teach.weak { color: var(--muted); }

.answered { background: var(--primary-container); border-radius: var(--r);
            padding: 14px; font-size: 15px; line-height: 1.6; }
.byline { font-size: 12px; color: var(--muted); margin-top: 8px; }
.promote { margin-top: 16px; padding: 14px; background: var(--sunken);
           border-radius: var(--r); }
.promote .fields { display: grid; grid-template-columns: 1fr 180px; gap: 10px; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------- review */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
         gap: 12px; margin-bottom: 32px; }
.stat { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r-lg); padding: 16px; }
.stat .dom { font: 600 12px/1 var(--font); letter-spacing: .05em;
             text-transform: uppercase; color: var(--muted); }
.stat .n { font: 600 28px/1.2 var(--font); margin: 8px 0 2px; }
.stat .sub { font-size: 12px; color: var(--muted); }
.bar { height: 3px; background: var(--locked); border-radius: 2px;
       margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--primary); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

/* The point of the review screen: which text is the source's and which
   is ours must be legible at a glance. Locked = flat grey, padlock, no
   input element anywhere near it. Editable = white, bordered, a field. */
.locked { background: var(--locked); border-radius: var(--r); padding: 14px; }
.ar { font-family: var(--arabic); font-size: 22px; line-height: 2.0;
      direction: rtl; text-align: right; }
.editable textarea { min-height: 108px; font-size: 15px; line-height: 1.6; }
.mt { margin-top: 8px; font-size: 12px; font-style: italic; color: var(--match-ink); }
.cite { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.keyline { padding: 10px 20px; background: var(--sunken); font-size: 12px;
           color: var(--muted); border-top: 1px solid var(--line); }

/* ------------------------------------------------ review workspaces */
.page-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto;
              align-items: end; gap: 24px; margin-bottom: 26px; }
.page-intro .subtitle { margin-bottom: 0; max-width: 72ch; line-height: 1.65; }
.metric { min-width: 150px; padding: 14px 16px; border-left: 2px solid var(--primary);
          background: var(--sunken); }
.metric strong { display: block; font: 600 26px/1.1 var(--font); }
.metric span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }

.card-head { padding: 18px 20px; border-bottom: 1px solid var(--line);
             display: flex; justify-content: space-between; align-items: flex-start;
             gap: 18px; }
.card-head h2 { margin: 0; font: 500 20px/1.45 var(--serif); }
.card-head .chips { margin-top: 9px; }
.card-actions { padding: 18px 20px; border-top: 1px solid var(--line); }
.action-status { min-height: 20px; margin-top: 10px; font-size: 13px;
                 color: var(--muted); }
.action-status.ok { color: var(--primary); }
.action-status.bad { color: var(--error); }

.pair-grid { display: grid; grid-template-columns: 1fr 1fr; }
.question-side { padding: 20px; min-width: 0; }
.question-side + .question-side { border-left: 1px solid var(--line); }
.question-side h3 { margin: 5px 0 8px; font: 500 20px/1.45 var(--serif); }
.question-side .english { color: var(--ink-muted); font-size: 13px;
                          line-height: 1.55; margin-bottom: 14px; }
.question-side .rulings { margin-top: 14px; }
.question-side .corpus-ruling { border-color: var(--line); }

fieldset.relationship { margin: 0; padding: 18px 20px; border: 0;
                        border-top: 1px solid var(--line); }
fieldset.relationship legend { padding: 18px 0 0; font: 600 12px/1 var(--font);
                                letter-spacing: .05em; text-transform: uppercase;
                                color: var(--muted); }
.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
               margin: 12px 0 14px; }
.choice { display: block; border: 1px solid var(--line); border-radius: var(--r);
          padding: 11px; cursor: pointer; }
.choice:hover { border-color: var(--primary); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--tint); }
.choice input { margin: 0 7px 0 0; accent-color: var(--primary); }
.choice b { font-size: 13px; }
.choice small { display: block; margin: 6px 0 0 21px; color: var(--muted);
                font-size: 11px; line-height: 1.45; }
.relationship textarea { min-height: 76px; font-size: 14px; }

.route-form { padding: 20px; }
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.route-grid label, .frame-grid label { color: var(--muted); font-size: 12px; }
.route-grid select, .route-grid input, .frame-grid select, .frame-grid input,
.frame-grid textarea { width: 100%; color: var(--ink); }
.route-grid .wide, .frame-grid .wide { grid-column: 1 / -1; }
.frame-editor { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.frame-editor summary { cursor: pointer; color: var(--primary); font-size: 13px;
                        font-weight: 600; }
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
              margin-top: 14px; }
.frame-grid textarea { min-height: 74px; font-size: 14px; }

.coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                 gap: 10px; margin-bottom: 24px; }
.coverage-item { border-top: 2px solid var(--line-strong); padding: 12px 2px 0; }
.coverage-item .coverage-name { font-size: 12px; color: var(--muted);
                                text-transform: capitalize; }
.coverage-item strong { display: block; font-size: 20px; margin: 5px 0 2px; }
.coverage-item .bar { margin-top: 8px; }
.evidence-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                    gap: 18px; align-items: start; }
.evidence-summary .ar { margin-top: 12px; }
.evidence-search { margin-top: 16px; padding: 16px; background: var(--sunken);
                   border-top: 1px solid var(--line); }
.search-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto;
              gap: 9px; }
.evidence-results { margin-top: 14px; }
.evidence-option { display: grid; grid-template-columns: auto minmax(0, 1fr);
                   gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.evidence-option:first-child { border-top: 0; }
.evidence-option input { margin-top: 5px; accent-color: var(--primary); }
.evidence-option .ar { font-size: 18px; line-height: 1.8; margin: 7px 0; }
.evidence-option .cite { border: 0; margin: 6px 0 0; padding: 0; }
.rationale { margin-top: 14px; }
.rationale textarea { min-height: 84px; font-size: 14px; }

/* A candidate comparison keeps the three claims visually separate:
   sourced ruling, the quote inside it, and the independently stored
   scripture page. None gets the green accepted treatment before review. */
.candidate-compare { display: grid; grid-template-columns: 1fr 1fr;
                     border-bottom: 1px solid var(--line); }
.candidate-compare > section { padding: 20px; min-width: 0; }
.candidate-compare > section + section { border-left: 1px solid var(--line); }
.candidate-compare .verdict { margin: 0 0 10px; font: 400 18px/1.6 var(--serif); }
.candidate-compare .locked { margin: 12px 0; }
.quote-formula { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.candidate-quote { padding: 15px; background: var(--match);
                   border: 1px solid var(--match-line); border-radius: var(--r); }
.candidate-source { background: var(--sunken); }
.candidate-source .ar { padding: 12px 0; }
.candidate-warning { margin: 12px 0 0; padding-top: 10px;
                     border-top: 1px solid var(--line-strong);
                     color: var(--match-ink); font-size: 12px; line-height: 1.55; }
.translation-primary { margin: 10px 0 14px; padding: 14px 16px;
                       background: var(--card); border-left: 3px solid var(--primary);
                       border-radius: var(--r); }
.translation-primary .note { margin-top: 7px; color: var(--ink); font-size: 15px;
                             line-height: 1.7; }
.translation-secondary, .translation-notes { margin: 9px 0; }
.translation-secondary > summary, .translation-notes > summary {
  cursor: pointer; color: var(--primary); font-size: 12px; font-weight: 650;
}
.translation-secondary[open] { padding: 12px 14px; border: 1px solid var(--line);
                               border-radius: var(--r); background: var(--card); }
.translation-secondary[open] > summary { margin-bottom: 10px; }
.translation-notes .note { margin-top: 7px; font-size: 12px; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.decision-grid textarea { min-height: 88px; font-size: 14px; }

.skeleton { height: 118px; border: 1px solid var(--line); border-radius: var(--r-lg);
            margin-bottom: 12px; background: linear-gradient(90deg,
            var(--sunken) 25%, var(--card) 50%, var(--sunken) 75%);
            background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton { animation: none; }
}

/* What the corpus already says, shown inside the match panel. On white
   rather than amber: the amber is the "there is a match" signal, and the
   rulings sitting on it would make the whole block one undifferentiated
   colour. */
.rulings { margin-top: 12px; }
.corpus-ruling { background: var(--card); border: 1px solid var(--match-line);
                 border-radius: var(--r); padding: 14px; margin-bottom: 8px; }
.corpus-ruling .verdict { margin: 10px 0; font: 400 17px/1.65 var(--serif);
                          color: var(--ink); }
.corpus-ruling .ar { margin: 10px 0; font-size: 19px; line-height: 1.9; }
.corpus-ruling .tr { font-size: 14px; line-height: 1.6; color: var(--ink-muted);
                     margin-bottom: 8px; }
.corpus-ruling .cite { margin-top: 8px; }

/* The teach block reads as prose, so its paragraph and its button must
   not share a line -- the button was flowing inline, mid-sentence. */
.teach p { margin: 0 0 4px; }
.teach .row { justify-content: flex-start; }

/* Closing a referral as corpus-answered is a heavier act than teaching a
   phrase -- it takes a person's question out of the queue -- so it does
   not read as another quiet inline link beside Undo. */
.close-corpus { border-color: var(--primary); color: var(--primary);
                font-weight: 600; }

/* A resolved card stays on screen rather than vanishing, so the ustaz
   can see what they just did and undo the phrase if they misjudged it.
   Dimmed, so it reads as finished. */
.card.done { opacity: .55; }

@media (max-width: 920px) {
  .topbar-in { grid-template-columns: auto 1fr; gap: 0 18px; padding-top: 12px; }
  nav.main { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  nav.main a { padding: 12px 10px 11px; }
  .who { grid-column: 2; grid-row: 1; justify-self: end; }
  .pair-grid, .route-grid { grid-template-columns: 1fr; }
  .candidate-compare { grid-template-columns: 1fr; }
  .candidate-compare > section + section { border-left: 0; border-top: 1px solid var(--line); }
  .question-side + .question-side { border-left: 0; border-top: 1px solid var(--line); }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .frame-grid { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   MOBILE
   Scholar decisions need full-width tap targets and the five workflows
   remain a horizontally scrollable map directly below the identity.
   =================================================================== */
@media (max-width: 760px) {
  .topbar-in { padding: 11px 16px 0; }
  .brand { font-size: 17px; }
  .brand small { display: none; }
  nav.main { margin-inline: -8px; }
  nav.main a { font-size: 12px; }
  .who { min-width: 0; font-size: 11px; }
  .who b { font-size: 13px; }

  main { padding: 24px 16px calc(52px + env(safe-area-inset-bottom)); }
  h1 { font-size: 26px; }
  .ask { font-size: 20px; }
  .page-intro { grid-template-columns: 1fr; gap: 14px; }
  .metric { min-width: 0; }

  /* Full-width tap targets. A 40px button beside another 40px button is
     a mis-tap on a phone, and one of these publishes to the corpus. */
  .card .row { flex-direction: column; align-items: stretch; }
  .card .row button { width: 100%; padding: 13px 16px; }
  .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
             -webkit-overflow-scrolling: touch; }
  .filters .pill { flex: 0 0 auto; }
  .count { display: none; }

  .split { grid-template-columns: 1fr; }
  .promote .fields { grid-template-columns: 1fr; }
  .signin { max-width: none; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .choice-grid, .frame-grid { grid-template-columns: 1fr; }
  .search-row { grid-template-columns: 1fr; }
  .decision-grid { grid-template-columns: 1fr; }
  .search-row button { width: 100%; }
  .evidence-summary { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ dashboard (3e) */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
a.card.dash-q { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; margin: 0;
                color: var(--ink); text-decoration: none; transition: border-color .15s; }
a.card.dash-q:hover { border-color: var(--primary); }
a.card.dash-q.empty-q { opacity: .62; }
.dash-n { font: 600 30px/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-t { font-weight: 650; font-size: 15px; }
.dash-w { font-size: 13px; color: var(--ink-muted); line-height: 1.5; flex: 1; }
.dash-o { font: 400 11px/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; margin-top: 6px; }
.dash-h { font: 600 22px/1.2 var(--serif); margin: 34px 0 12px; }
.dash-corpus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dash-corpus .card { margin: 0; }
.band-pad { padding: 18px 20px; }
.dash-corpus .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 8px 0 6px; }
.dash-corpus .bar > i { display: block; height: 100%; background: var(--primary); }
.dash-asof { font-size: 12px; margin-top: 14px; }
@media (max-width: 760px) { .dash-corpus { grid-template-columns: 1fr; } }

/* The same frame on every queue */
.queue-frame { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px;
               padding: 10px 14px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r);
               background: var(--sunken); font-size: 13px; color: var(--ink-muted); }
.queue-frame b { color: var(--ink); }
.kbd { font: 400 11px/1 var(--mono); border: 1px solid var(--line-strong); border-bottom-width: 2px;
       border-radius: 4px; padding: 1px 5px; color: var(--muted); background: var(--card); }
.card.kb-on { outline: 2px solid var(--focus); outline-offset: 2px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-table th, .dash-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table th { font: 600 11px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-table .barcell { width: 30%; }
.dash-table .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.dash-table .bar > i { display: block; height: 100%; background: var(--primary); }
.dash-table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  main { padding: 24px 16px 60px; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  a.card.dash-q { padding: 14px; }
  .dash-n { font-size: 24px; }
  .dash-w { display: none; }
  .dash-table .barcell, .dash-table .hide-sm { display: none; }
}

/* ------------------------------------------------------ Pro layout (2026-10) */
/* Wide screens: the places become a left sidebar, the work area takes the
   rest. Narrow screens keep the top bar with a scrolling row of places. */
.dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.card.dash-q { border-radius: 8px; }
.dash-n { font-family: var(--mono); font-weight: 600; font-size: 28px; }
.card { border-radius: 8px; }
@media (min-width: 1100px) {
  body { display: grid; grid-template-columns: 252px minmax(0, 1fr);
         background: linear-gradient(to right, var(--panel) 251px, var(--hair) 251px 252px, var(--surface) 252px); }
  .topbar { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-bottom: 0;
            border-inline-end: 1px solid var(--hair); background: var(--panel);
            -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar-in { display: flex; flex-direction: column; align-items: stretch; max-width: none;
               height: 100%; padding: 20px 14px; gap: 0; }
  .brand { padding: 4px 10px 18px; }
  .brand small { display: block; margin: 8px 0 0; }
  .who { order: 1; text-align: start; padding: 12px; margin-bottom: 14px; background: var(--paper2);
         border: 1px solid var(--hair); border-radius: 8px; }
  nav.main { order: 2; flex-direction: column; overflow: visible; margin: 0; gap: 2px; }
  nav.main::before { content: "Antrian & alat"; font: 600 10px/1 var(--mono); letter-spacing: .12em;
         text-transform: uppercase; color: var(--muted); padding: 8px 12px 10px; }
  nav.main a { border-bottom: 0; border-radius: 6px; padding: 9px 12px; font-size: 13.5px; }
  nav.main a:hover { background: var(--paper2); }
  nav.main a.on { background: var(--verdigris-2); color: var(--verdigris-3); border-bottom: 0; }
  main { margin: 0; max-width: 1200px; padding: 36px 44px 80px; }
}

/* Interface language: Indonesian / English / Arabic (2026-10-15) */
.lang-ctl { margin-inline-start: auto; align-self: center; font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: inherit; }
:root[lang="ar"] { --body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif; }
:root[lang="ar"] body { font-family: var(--body); }
:root[lang="ar"] .badge, :root[lang="ar"] .label, :root[lang="ar"] .chip { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .who { text-align: left; }
[dir="rtl"] .dot, [dir="rtl"] .badge { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .metric { border-left: 0; border-right: 2px solid var(--primary); }
[dir="rtl"] .question-side + .question-side, [dir="rtl"] .candidate-compare > section + section { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .translation-primary { border-left: 0; border-right: 3px solid var(--primary); }
[dir="rtl"] .dash-table th, [dir="rtl"] .dash-table td { text-align: right; }
[dir="rtl"] .dash-table .num { text-align: left; }
@media (max-width: 760px) {
  [dir="rtl"] .question-side + .question-side, [dir="rtl"] .candidate-compare > section + section { border-right: 0; }
}

/* ------------------------------------------------ sign-in, account, admin */
.small { font-size: 13px; }
.field { display: block; margin: 0 0 12px; border: 0; padding: 0; }
.field input { width: 100%; }
fieldset.field legend { font-size: 14px; margin-bottom: 6px; padding: 0; }
.signin .field input { font-family: var(--font); }
.lg-legacy { margin: 14px 0 0; }
.check { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 14px; }
.admin-tabs a.pill { text-decoration: none; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.admin-stats .card { margin: 0; }
.admin-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-two .card { margin: 0 0 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-head h2 { margin: 0; }
.chart { position: relative; margin: 14px 0 6px; }
.chart svg { display: block; width: 100%; height: 160px; }
.chart svg rect { fill: var(--verdigris); }
.chart svg rect:hover { fill: var(--ink); }
.chart-max { position: absolute; top: -18px; left: 0; font-size: 12px; }
.chart-axis { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; }
.otp { border-color: var(--amber-line); background: var(--amber); }
.otp-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.otp code { font: 600 20px/1.3 var(--mono); letter-spacing: .04em; user-select: all; }
.admin-create summary { cursor: pointer; }
.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 14px; }
.admin-form .wide { grid-column: 1 / -1; }
.admin-table td { vertical-align: top; }
.admin-table .acts { white-space: nowrap; text-align: right; }
.admin-table .acts button { padding: 7px 10px; font-size: 13px; margin: 0 0 4px 4px; }
.admin-table .acts .action-status { white-space: normal; }
.edit-row td { background: var(--sunken); }
@media (max-width: 760px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-two, .admin-form { grid-template-columns: 1fr; }
  .admin-table .acts { white-space: normal; }
}