/* Fusion King admin — ported from Admin.dc.html.
   A dark sidebar beside a cream working area, exactly as the artboard lays it out. */
:root{
  --a-bg:#EFE9DE; --a-panel:#FFFDF8; --a-white:#fff; --a-ink:#17140F;
  --red:#C8151E; --orange:#D9702B; --green:#7FA53C; --green-dk:#5C7C24;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --script:'Yellowtail',cursive;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html,body{background:var(--a-bg)}
body{margin:0;font-family:var(--sans);color:var(--a-ink);font-size:15px;line-height:1.6}
h1{font-family:var(--serif);font-size:clamp(21px,2.6vw,30px);font-weight:500;line-height:1.1;margin:0}
h2{font-family:var(--serif);font-size:21px;font-weight:700;margin:0 0 12px}
h3{font-family:var(--serif);font-size:17px;font-weight:700;margin:0 0 8px}
a{color:var(--a-ink)}
.mono{font-family:var(--mono);font-size:12px}
[hidden]{display:none!important}
.fine{font-size:13px;color:rgba(23,20,15,.55);line-height:1.65}
.lede{font-size:15px;color:rgba(23,20,15,.7);max-width:62ch;margin:0 0 22px}
.inline{display:inline}

/* ------------------------------------------------------------------ shell -- */
.shell{min-height:100vh;display:grid;grid-template-columns:268px minmax(0,1fr);align-items:start}
/* The sidebar follows you down the page.
   It was already position:sticky and still scrolled away, because align-self:stretch
   made it as tall as the whole page — 13,000px on the menu section — and a sticky
   element with no room to move inside its container simply does not move. It now
   sizes to the window and scrolls its own contents when the section list is taller
   than the screen. */
.aside{align-self:start;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--a-ink);color:#F5F0E6;padding:26px 22px;
  display:flex;flex-direction:column;gap:26px}
.aside::-webkit-scrollbar{width:6px}
.aside::-webkit-scrollbar-thumb{background:rgba(245,240,230,.22);border-radius:3px}
.aside{scrollbar-width:thin;scrollbar-color:rgba(245,240,230,.22) transparent}
.aside-mark{font-family:var(--script);font-size:29px;line-height:1}
.aside-sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-top:4px}
.aside-toggle{display:none}

.aside-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:3px;text-decoration:none;
  font-size:14px;font-weight:500;color:rgba(245,240,230,.72);
  background:transparent;transition:background .2s ease,color .2s ease}
.nav-item:hover{background:rgba(245,240,230,.08);color:#F5F0E6}
.nav-item.on{background:var(--red);color:#F5F0E6}
.nav-badge{font-family:var(--mono);font-size:10px;color:rgba(245,240,230,.4);white-space:nowrap}
.nav-badge.hot{color:var(--orange)}
.nav-item.on .nav-badge{color:rgba(245,240,230,.75)}

.aside-foot{margin-top:auto;padding-top:22px;border-top:1px solid rgba(245,240,230,.16);
  display:flex;flex-direction:column;gap:12px;min-width:0}
.who{display:flex;align-items:center;gap:10px}
.avatar{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#F5F0E6}
.who-t{line-height:1.3;min-width:0}
.who-role{font-size:13px;font-weight:600}
.who-mail{font-size:11px;color:rgba(245,240,230,.55);overflow-wrap:anywhere}
.who-meta{font-family:var(--mono);font-size:10px;line-height:1.6;color:rgba(245,240,230,.42)}
.aside-links{display:flex;flex-direction:column;gap:7px}
.live-link{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.live-link:hover{color:#F5F0E6}
.quick{display:flex;gap:12px;flex-wrap:wrap;font-size:11px}
.quick a{color:rgba(245,240,230,.55)}
.quick a:hover{color:var(--orange)}
.btn-signout{margin-top:4px;padding:9px 14px;background:transparent;
  border:1px solid rgba(245,240,230,.28);border-radius:3px;color:#F5F0E6;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;width:100%}
.btn-signout:hover{border-color:#F5F0E6;background:rgba(245,240,230,.08)}

/* ------------------------------------------------------------------- main -- */
.main{min-width:0;display:flex;flex-direction:column}
.page-head{position:sticky;top:0;z-index:20;background:rgba(239,233,222,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(23,20,15,.12);
  padding:18px clamp(16px,3vw,34px)}
.page-sub{margin-top:5px;font-size:13px;color:rgba(23,20,15,.6)}
.pane{padding:clamp(18px,3vw,30px) clamp(16px,3vw,34px) 60px;max-width:1000px}

.saved{background:rgba(127,165,60,.14);border:1px solid rgba(127,165,60,.5);border-radius:3px;
  padding:11px 14px;font-size:14px;margin:0 0 20px}

@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;height:auto;overflow:visible;gap:16px;padding:18px clamp(16px,4vw,22px)}
  .aside-toggle{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    padding:10px 14px;background:transparent;border:1px solid rgba(245,240,230,.28);
    border-radius:3px;color:#F5F0E6;font-family:var(--sans);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;min-height:44px}
  .aside-toggle .bars{position:relative;width:16px;height:2px;background:#F5F0E6}
  .aside-toggle .bars::before,.aside-toggle .bars::after{content:"";position:absolute;left:0;
    width:16px;height:2px;background:#F5F0E6;transition:transform .25s}
  .aside-toggle .bars::before{top:-5px}
  .aside-toggle .bars::after{top:5px}
  .aside-toggle[aria-expanded="true"] .bars{background:transparent}
  .aside-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg)}
  .aside-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg)}
  .aside-nav{display:none}
  .aside-nav.open{display:flex}
  .aside-foot{margin-top:0}
}

/* ------------------------------------------------------------------ login --
   Its own centred card, since it has no sidebar to sit beside. */
.wordmark-dark{font-family:var(--script);font-size:26px;line-height:1}
.wordmark-dark small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:var(--orange);margin-top:3px}
.admin-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:var(--a-bg)}
.admin-login .box{background:var(--a-panel);border:1px solid rgba(23,20,15,.14);border-radius:4px;
  padding:clamp(26px,5vw,44px);max-width:460px;width:100%}
.admin-login h1{margin:22px 0 10px;font-weight:700}
.error{background:rgba(200,21,30,.08);border:1px solid rgba(200,21,30,.4);border-radius:3px;
  padding:12px 14px;font-size:14px;margin:0 0 18px}

/* cards + forms */
.card-light{background:var(--a-panel);border:1px solid rgba(23,20,15,.14);border-radius:4px;
  padding:clamp(18px,3vw,26px);margin:0 0 22px}
label{display:block;font-size:13px;font-weight:600;margin:0 0 5px}
input[type=text],input[type=email],input[type=date],input:not([type]),select,textarea{
  width:100%;padding:10px 12px;background:var(--a-white);border:1px solid rgba(23,20,15,.2);
  border-radius:3px;font-family:var(--sans);font-size:15px;color:var(--a-ink)}
textarea{resize:vertical}
input:disabled,textarea:disabled,select:disabled{background:rgba(23,20,15,.04);color:rgba(23,20,15,.5)}
.fields p{margin:0 0 16px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}

.toggle{display:flex;align-items:center;gap:11px;margin:0 0 22px;font-weight:600;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .track{width:34px;height:20px;border-radius:10px;background:rgba(23,20,15,.22);
  position:relative;flex:0 0 auto;transition:background .25s}
.toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:left .25s}
.toggle input:checked + .track{background:var(--red)}
.toggle input:checked + .track::after{left:16px}
.toggle .tl{font-size:14px}

.btn-dark{display:inline-block;padding:12px 22px;background:var(--a-ink);color:#F5F0E6;border:0;
  border-radius:3px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn-ghost-dark{padding:9px 16px;background:transparent;border:1px solid rgba(23,20,15,.25);
  border-radius:3px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.btn-small{padding:7px 12px;background:transparent;border:1px solid rgba(23,20,15,.25);
  border-radius:3px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.btn-danger{padding:7px 12px;background:rgba(200,21,30,.06);border:1px solid rgba(200,21,30,.5);
  color:var(--red);border-radius:3px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans)}

/* preview */
.preview{background:var(--a-ink);border-radius:4px;padding:clamp(16px,3vw,24px);margin:0 0 22px}
.kicker-dark{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,240,230,.5);margin:0 0 14px}
.preview .fine{color:rgba(245,240,230,.5)}
.pv-closure{background:var(--orange);color:#0B0A09;padding:11px 14px;border-radius:2px;
  display:flex;gap:8px 18px;flex-wrap:wrap;align-items:baseline;font-size:14px}
.pv-closure .mono{font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.pv-xmas{background:var(--red);color:#FFFBF2;padding:16px 18px;border-radius:2px}
.pv-xmas .mono{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.pv-xmas .h{font-family:var(--serif);font-size:20px;margin:6px 0 8px}
.pv-xmas p{margin:0;font-size:14px;opacity:.9}
.pv-rest{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.pv-rest.grey{filter:grayscale(.92);opacity:.72}
.pv-line{height:9px;border-radius:2px;background:rgba(245,240,230,.16)}
.pv-line.short{width:55%}

/* tables */
.log,.people{width:100%;border-collapse:collapse;font-size:14px}
.log th,.people th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(23,20,15,.5);padding:0 10px 8px 0;font-weight:500}
.log td,.people td{padding:9px 10px 9px 0;border-top:1px solid rgba(23,20,15,.1);vertical-align:top}
.people tr.gone{opacity:.5}
.history{background:var(--a-panel);border:1px solid rgba(23,20,15,.14);border-radius:4px;
  padding:clamp(18px,3vw,26px)}

/* menu section */
.grp{border:0;border-top:1px solid rgba(23,20,15,.12);margin:0 0 6px;padding:14px 0 4px}
.grp legend{font-weight:700;font-size:14px;padding:0 8px 0 0}
.chk{display:inline-flex;align-items:center;gap:7px;margin:0 14px 8px 0;font-weight:400;font-size:14px}
.chk input{width:auto}
.chk .struck{text-decoration:line-through;opacity:.5}

/* hours */
.hours-edit{width:100%;border-collapse:collapse;font-size:14px}
.hours-edit th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(23,20,15,.5);padding:0 10px 8px 0;font-weight:500}
.hours-edit td{padding:7px 10px 7px 0;border-top:1px solid rgba(23,20,15,.1);vertical-align:middle}
.hours-edit td.day{font-weight:600;white-space:nowrap}
.hours-edit td.mid{text-align:center;width:64px}
.hours-edit input[type=checkbox]{width:auto}

/* full menu editing */
.item-edit{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.item-edit .off-box{flex:0 0 auto;margin:0}
.item-edit .off-box input{width:auto}
.item-edit .nm{flex:1;min-width:0;padding:7px 9px;font-size:14px}
.item-edit .pr{flex:0 0 78px;padding:7px 9px;font-size:14px;font-family:var(--mono);text-align:right}

/* songs */
.song-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid rgba(23,20,15,.1)}
.song-row .thumb{border-radius:3px;flex:0 0 auto}
.song-row .song-fields{flex:1;min-width:220px}
.song-row .song-fields p{margin:0 0 10px}
.song-row .song-actions{display:flex;flex-direction:column;gap:8px}
.fields fieldset.grp{margin-bottom:16px}

.song-row .thumb{flex:0 0 120px;height:68px;border-radius:3px;background:var(--a-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-decoration:none;color:rgba(245,240,230,.8)}
.song-row .thumb .tri{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--red)}
.song-row .thumb .thumb-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}

/* allergens */
.card-light.warn{border-color:rgba(217,112,43,.55);background:linear-gradient(100deg,rgba(217,112,43,.1),var(--a-panel))}
.card-light.ok{border-color:rgba(127,165,60,.55);background:linear-gradient(100deg,rgba(127,165,60,.1),var(--a-panel))}
.allergen-row{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  padding:14px 0;border-top:1px solid rgba(23,20,15,.1)}
.allergen-row.done{opacity:.62}
.allergen-row .ar-name{flex:1;min-width:240px}
.allergen-row .ar-marks{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.allergen-row .ar-sign{flex:0 0 auto;text-align:right;display:flex;align-items:center;gap:10px}
.btn-sign{font-size:11px;padding:9px 14px}
.mark{font-size:11px;padding:2px 7px;border-radius:2px;border:1px solid;white-space:nowrap}
.mark.st-r{border-color:var(--red);color:var(--red);background:rgba(200,21,30,.07)}
.mark.st-a{border-color:var(--orange);color:#A8551D;background:rgba(217,112,43,.09)}
.mark.st-g{border-color:var(--green);color:#5C7A28;background:rgba(127,165,60,.1)}
.mark.st-q{border-style:dashed;border-color:rgba(23,20,15,.35);color:rgba(23,20,15,.55)}

/* order-writing guide */
.step-row{display:flex;gap:14px;padding:12px 0;border-top:1px solid rgba(23,20,15,.1)}
.step-row:first-of-type{border-top:0}
.step-n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--a-ink);color:#F5F0E6;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px}
.step-row p{margin:4px 0 0}
.code-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(23,20,15,.5);margin:20px 0 10px;font-weight:500}
.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:6px 20px}
.code{display:flex;gap:10px;align-items:baseline;font-size:14px;padding:3px 0}
.code .c{flex:0 0 74px;font-weight:500;color:var(--red)}
.rules{margin:0;padding-left:20px;font-size:14px;line-height:1.75}
.rules li{margin:0 0 7px}
.example{padding:14px 0;border-top:1px solid rgba(23,20,15,.1)}
.example:first-of-type{border-top:0}
/* Tickets are drawn by ticket.js and styled by ticket.css, which Build an order shares. */
@media (max-width:480px){ .drill-ans{padding:14px 12px} }
.drill{padding:14px 0;border-top:1px solid rgba(23,20,15,.1)}
.drill-q{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin-bottom:8px}
details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--red)}
.quiz{padding:16px 0;border-top:1px solid rgba(23,20,15,.1)}
.quiz-q{font-size:14px;margin-bottom:8px}
.quiz-opts{display:flex;flex-direction:column;gap:7px;margin:10px 0 0}
.quiz-o{text-align:left;padding:10px 13px;border:1px solid rgba(23,20,15,.2);border-radius:3px;
  background:var(--a-white);cursor:pointer;font-family:var(--sans);font-size:14px}
.quiz-o:hover{border-color:var(--a-ink)}
.quiz-o.right{border-color:var(--green);background:rgba(127,165,60,.12)}
.quiz-o.wrong{border-color:var(--red);background:rgba(200,21,30,.08)}
.quiz-fb{font-size:13px;margin:10px 0 0}
.quiz-fb.ok{color:#5C7A28}
.quiz-fb.no{color:var(--red)}

/* extras sheet */
.prices{width:100%;border-collapse:collapse;font-size:14px}
.prices td{padding:8px 10px 8px 0;border-top:1px solid rgba(23,20,15,.1)}
.prices td.p{text-align:right;white-space:nowrap;color:rgba(23,20,15,.7)}

/* tabs & wording */
.chips-preview{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.chip-p{padding:7px 13px;border:1px solid rgba(23,20,15,.22);border-radius:2px;font-size:13px}

/* photos */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:16px}
.photo{margin:0}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;border:1px solid rgba(23,20,15,.14)}
.photo figcaption{display:flex;flex-direction:column;gap:2px;margin-top:7px}
.photo figcaption .path{width:100%;padding:5px 7px;font-size:11px;background:var(--a-bg);
  border:1px solid rgba(23,20,15,.16);border-radius:2px;margin:0 0 3px}
.photo figcaption form{margin-top:5px}
input[type=file]{width:100%;padding:9px;background:var(--a-white);
  border:1px dashed rgba(23,20,15,.3);border-radius:3px;font-size:14px;font-family:var(--sans)}

/* ------------------------------------------------------------------ mobile --
   The dashboard gets used on a phone at the counter, so the things staff do
   most — ticking a dish off, saving — have to work with a thumb. */

@media (pointer:coarse){
  /* A 13px checkbox is a mouse target. Give it room, and make the whole row tap. */
  .chk,.item-edit .off-box{min-height:44px}
  .chk input[type=checkbox],
  .item-edit .off-box input[type=checkbox],
  .hours-edit input[type=checkbox]{width:22px;height:22px}
  .chk{padding:4px 10px 4px 4px;border-radius:3px}
  .side a{min-height:44px}
  .btn-dark,.btn-ghost-dark,.btn-small,.btn-danger,.quiz-o{min-height:44px}
  /* iOS zooms the page when a field's text is under 16px. */
  input,select,textarea{font-size:16px}
  /* Text fields need a thumb-sized row too. */
  input[type=text],input[type=email],input[type=date],input:not([type]),select,textarea,
  .item-edit .nm,.item-edit .pr,.hours-edit input{min-height:44px}
}

@media (max-width:780px){
  /* The menu has 195 rows and its save button sits under all of them. On a phone
     that is a very long scroll to confirm one change, so it follows you down. */
  .sticky-save{
    position:sticky;bottom:0;z-index:20;margin:16px -16px -16px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,253,248,.96);backdrop-filter:blur(8px);
    border-top:1px solid rgba(23,20,15,.16);
  }
  .sticky-save .btn-dark{width:100%;justify-content:center;text-align:center}

  /* Tick, name and price stay on one line — 195 dishes is already a long list
     without each row taking three times the height. */
  .item-edit{flex-wrap:nowrap;gap:7px}
  .item-edit .nm{flex:1 1 auto;min-width:0}
  .item-edit .pr{flex:0 0 68px}

  .allergen-row .ar-sign{width:100%;text-align:left;justify-content:flex-start}
  .song-row .song-actions{flex-direction:row;width:100%}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
  .topbar{gap:10px 16px}
  .topbar .who{text-align:left;margin-left:0;order:3;width:100%}
}

/* menu groups */
.groups{width:100%;border-collapse:collapse;font-size:14px}
.groups th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(23,20,15,.5);padding:0 10px 8px 0;font-weight:500}
.groups td{padding:9px 10px 9px 0;border-top:1px solid rgba(23,20,15,.1);vertical-align:middle}
.grp-form{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.grp-form input[name=title]{flex:1 1 150px;min-width:0}
.grp-form input[name=price]{flex:0 1 130px;min-width:0}
.grp-form select{flex:0 0 96px}
.grp-actions{white-space:nowrap;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tone-dot{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid rgba(23,20,15,.2)}
@media (max-width:780px){
  .groups thead{display:none}
  .groups td{display:block;border-top:0;padding:4px 0}
  .groups tr{display:block;padding:12px 0;border-top:1px solid rgba(23,20,15,.12)}
}

/* local development sign-in */
.dev-accounts{display:flex;flex-direction:column;gap:8px}
.dev-account{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:13px 16px;border:1px solid rgba(23,20,15,.2);border-radius:3px;
  background:var(--a-white);cursor:pointer;font-family:var(--sans);text-align:left;width:100%}
.dev-account:hover{border-color:var(--a-ink)}
.dev-role{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.dev-email{font-size:15px}

.item-edit .item-x{flex:0 0 auto;width:30px;height:30px;padding:0;line-height:1;
  background:transparent;border:1px solid transparent;border-radius:3px;
  color:rgba(23,20,15,.35);font-size:19px;cursor:pointer;font-family:var(--sans)}
.item-edit .item-x:hover{color:var(--red);border-color:rgba(200,21,30,.4);background:rgba(200,21,30,.06)}
.addflags{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px}
@media (pointer:coarse){ .item-edit .item-x{width:44px;height:44px} }

/* The live preview renders the site's own notice markup. It is left at the
   panel's own width rather than scaled down: the notice is responsive, so this
   shows exactly what a visitor on a narrow window sees, and there is no transform
   to keep in step with the panel's height. */
.pv-real{border-radius:2px;overflow:hidden}
.pv-real [data-notice]{position:static!important}
.pv-real section[data-notice]{max-height:none}

/* view as — checking what each role can reach */
.viewas{padding-top:14px;border-top:1px solid rgba(245,240,230,.16)}
.viewas-t{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,240,230,.45);margin:0 0 9px}
.viewas-row{display:flex;flex-wrap:wrap;gap:5px}
.viewas-b{padding:6px 10px;border:1px solid rgba(245,240,230,.22);border-radius:2px;
  background:transparent;color:rgba(245,240,230,.72);font-family:var(--sans);
  font-size:11px;font-weight:600;cursor:pointer}
.viewas-b:hover{border-color:rgba(245,240,230,.5);color:#F5F0E6}
.viewas-b.on{background:var(--orange);border-color:var(--orange);color:#0B0A09}
.viewas-n{font-size:11px;line-height:1.5;color:rgba(245,240,230,.42);margin:9px 0 0}

.viewas-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px 20px;
  flex-wrap:wrap;justify-content:space-between;padding:11px clamp(16px,3vw,34px);
  background:var(--orange);color:#0B0A09;font-size:14px}
.viewas-bar button{padding:7px 13px;border:1px solid rgba(11,10,9,.45);border-radius:2px;
  background:transparent;color:#0B0A09;font-family:var(--sans);font-size:12px;
  font-weight:700;letter-spacing:.04em;cursor:pointer}
.viewas-bar button:hover{background:rgba(11,10,9,.12)}
@media (pointer:coarse){.viewas-b,.viewas-bar button{min-height:44px}}

/* ------------------------------------------------- sold out today -------
   The artboard's tap-to-toggle grid: each dish is a pill you press, red and
   struck through when it is off. Replaces a column of checkboxes, which was
   accurate but slow to read and slower to use at a counter. */
.soldgrp{padding:16px 0;border-top:1px solid rgba(23,20,15,.1)}
.soldgrp:first-of-type{border-top:0;padding-top:0}
.soldgrp-h{display:flex;align-items:center;gap:9px;margin:0 0 11px}
.tone-sq{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.soldgrp-t{font-size:15px;font-weight:700}
.soldgrp-n{font-family:var(--mono);font-size:11px;color:var(--red)}
.soldrow{display:flex;flex-wrap:wrap;gap:7px}

.sold{padding:9px 14px;border-radius:100px;cursor:pointer;text-align:left;
  border:1px solid rgba(23,20,15,.22);background:transparent;color:var(--a-ink);
  font-family:var(--sans);font-size:13px;font-weight:600;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.sold:hover{border-color:rgba(23,20,15,.5)}
.sold.is-off{background:var(--red);border-color:var(--red);color:#FFFDF8;text-decoration:line-through}

.soldnow{padding:18px;margin-bottom:22px;border-radius:3px;
  background:rgba(200,21,30,.06);border:1px solid rgba(200,21,30,.25)}
.soldnow-t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 6px}
.soldnow-n{font-size:15px}

@media (pointer:coarse){ .sold{min-height:44px;padding:11px 16px} }

/* ------------------------------------------------- collapsible cards -----
   The editing blocks fold away so the page opens on the job that gets done
   daily. Sold out today is deliberately NOT one of these — it is the reason
   the page is opened, so it is always in front of you.

   Built on <details>, so it works with no JavaScript and screen readers
   announce it as expandable without any extra wiring. */
details.fold{padding:0}
details.fold > summary{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:clamp(16px,2.6vw,22px) clamp(18px,3vw,26px);
  cursor:pointer;list-style:none;border-radius:4px}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:1.5px solid rgba(23,20,15,.45);border-bottom:1.5px solid rgba(23,20,15,.45);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
details.fold[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
details.fold > summary:hover{background:rgba(23,20,15,.03)}
details.fold > summary h2{margin:0}
.fold-n{font-family:var(--mono);font-size:11px;color:rgba(23,20,15,.45)}
.fold-body{padding:0 clamp(18px,3vw,26px) clamp(18px,3vw,26px)}

/* groups inside the fold */
.grp-panel{padding:18px 0;border-top:1px solid rgba(23,20,15,.12)}
.grp-panel:first-of-type{border-top:0;padding-top:0}
.grp-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px}
.grp-name{font-size:16px;font-weight:700}
.grp-meta{font-family:var(--mono);font-size:11px;color:rgba(23,20,15,.45)}
.grp-body{display:flex;flex-direction:column;gap:12px}
.dish-head{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(23,20,15,.45);margin:6px 0 2px}
.dish-add{padding:14px;margin-top:6px;border-radius:3px;
  background:rgba(23,20,15,.03);border:1px dashed rgba(23,20,15,.2)}
@media (pointer:coarse){ details.fold > summary{min-height:56px} }

.jumprow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.jumprow a{padding:7px 13px;border:1px solid rgba(23,20,15,.2);border-radius:100px;
  font-size:12px;font-weight:600;text-decoration:none;color:rgba(23,20,15,.7)}
.jumprow a:hover{border-color:var(--a-ink);color:var(--a-ink)}
@media (pointer:coarse){ .jumprow a{min-height:44px;display:flex;align-items:center} }

/* runs out most days */
.quickpick{padding:18px;margin-bottom:22px;border-radius:3px;
  background:rgba(200,21,30,.06);border:1px solid rgba(200,21,30,.25)}
.quickpick-t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 6px}
.quickpick-n{font-size:14px;line-height:1.6;color:rgba(23,20,15,.7);margin:0 0 14px}
.quickpick-row{display:flex;gap:8px;flex-wrap:wrap}
.qpick{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(127,165,60,.5);background:transparent;color:#5C7C24;
  font-family:var(--sans);font-size:15px;font-weight:700;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.qpick:hover{border-color:#5C7C24}
.qpick.is-off{background:var(--red);border-color:var(--red);color:#FFFDF8}
.qpick-s{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.subblock{padding-top:22px;margin-top:22px;border-top:1px solid rgba(23,20,15,.12)}
.subblock h3{margin:0 0 10px}
@media (pointer:coarse){ .qpick{min-height:48px} }

/* meats and fillings — the shared components, above the individual cards */
.comps{padding:18px;margin-bottom:22px;border-radius:3px;
  background:rgba(23,20,15,.03);border:1px solid rgba(23,20,15,.14)}
.comps-t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(23,20,15,.5);margin:0 0 6px}
.comps-n{font-size:14px;line-height:1.6;color:rgba(23,20,15,.68);margin:0 0 14px;max-width:64ch}
.comps-row{display:flex;gap:7px;flex-wrap:wrap}
.qpick.comp{padding:10px 15px;font-size:13.5px;font-weight:600;
  border-color:rgba(23,20,15,.22);color:var(--a-ink)}
.qpick.comp:hover{border-color:var(--a-ink)}
.qpick.comp .qpick-s{color:rgba(23,20,15,.4);font-weight:500}
.qpick.comp.is-off{background:var(--red);border-color:var(--red);color:#FFFDF8}
.qpick.comp.is-off .qpick-s{color:rgba(255,253,248,.8)}
.qpick.comp.is-part{border-color:var(--orange);color:#A8551D}
.qpick.comp.is-part .qpick-s{color:var(--orange)}

/* staff menu cards — the same shape the public menu uses, in the admin palette */
.menu-cards{columns:1;column-gap:18px;margin:0 0 24px}
@media (min-width:760px){.menu-cards{columns:2}}
@media (min-width:1120px){.menu-cards{columns:3}}
.menu-card{break-inside:avoid;margin:0 0 18px;border:1px solid rgba(23,20,15,.14);
  border-radius:4px;background:var(--a-panel);overflow:hidden}
.menu-card-h{padding:12px 16px;background:var(--a-ink);color:#F5F0E6;
  font-family:var(--serif);font-size:17px;font-weight:700}
.menu-card-b{padding:12px 16px 14px}
.menu-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px dotted rgba(23,20,15,.14);font-size:14px}
.menu-line:last-child{border-bottom:0}
.menu-line .mono{color:rgba(23,20,15,.6);white-space:nowrap}

/* ------------------------------------------------------ order writing editor */
.tr-flag{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:500;white-space:nowrap}
.tr-flag input{width:auto;margin:0}

/* Remove: a × that strikes the row through and turns into Undo. Nothing goes until
   the part is saved. A real checkbox underneath, so it works without JavaScript. */
.rm{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:32px;height:32px;padding:0 8px;margin:0 0 0 auto;border:1px solid transparent;border-radius:3px;
  color:rgba(23,20,15,.4);font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.rm input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rm .x{font-size:20px;line-height:1;font-weight:400}
.rm:hover{color:var(--red);border-color:rgba(200,21,30,.4);background:rgba(200,21,30,.06)}
.rm:focus-within{outline:2px solid var(--a-ink);outline-offset:1px}
.rm .undo{display:none}
.rm input:checked ~ .x,.rm input:checked ~ .lbl{display:none}
.rm input:checked ~ .undo{display:inline}
.rm:has(input:checked){color:var(--a-ink);border-color:rgba(23,20,15,.3);background:var(--a-white)}
.item-edit:has(> .rm input:checked) > :not(.rm){opacity:.4;pointer-events:none}
.item-edit:has(> .rm input:checked) input,.item-edit:has(> .rm input:checked) textarea{text-decoration:line-through}
.grp-title .rm{height:30px}
.grp-title .gone{display:none;font-size:12px;font-weight:600;color:var(--red)}
.grp-panel:has(> .grp-title > .rm input:checked) > :not(.grp-title){display:none}
.grp-panel:has(> .grp-title > .rm input:checked) .grp-name{text-decoration:line-through;color:rgba(23,20,15,.45)}
.grp-panel:has(> .grp-title > .rm input:checked) .gone{display:inline}
@media (pointer:coarse){ .rm{min-width:44px;height:44px} .grp-title .rm{height:44px} }

/* Adding: one at a time, or five at once. */
.add-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 4px}
.add-row{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:transparent;
  border:1px dashed rgba(23,20,15,.35);border-radius:3px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--sans);color:var(--a-ink)}
.add-row:hover{border-style:solid;border-color:var(--a-ink);background:rgba(23,20,15,.03)}
.add-row .plus{font-size:17px;line-height:1;color:var(--red)}
.add-row:disabled{opacity:.45;cursor:not-allowed}
.add-tip{font-size:12px;color:rgba(23,20,15,.45)}
.is-new{animation:tr-in .35s cubic-bezier(.2,.7,.2,1)}
@keyframes tr-in{from{opacity:0;transform:translateY(-4px)}}

/* The save button follows you down a long part. */
.tr-save{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  margin:18px calc(-1 * clamp(18px,3vw,26px)) calc(-1 * clamp(18px,3vw,26px));
  padding:12px clamp(18px,3vw,26px) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,253,248,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(23,20,15,.16);
  border-radius:0 0 4px 4px}
.tr-dirty{font-family:var(--mono);font-size:11px;color:var(--red)}
.item-edit.tr-code,.item-edit.tr-line{flex-wrap:wrap}
.item-edit .tr-c{flex:0 0 96px;padding:7px 9px;font-size:13px}
.item-edit .tr-dish{flex:1 1 200px;min-width:0;padding:7px 9px;font-size:14px}
.item-edit .tr-qty{flex:0 0 52px;padding:7px 9px;font-size:14px;text-align:center}
.item-edit textarea.nm{min-height:44px}
.fold-body textarea.mono{font-size:13px;line-height:1.5}

/* ------------------------------------------------ order writing, as designed */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.learn-hero{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.learn-hero .lede{margin:0}
.learn-hero h2{margin:0 0 6px}
.learn-score{flex:0 0 auto;text-align:right}
.learn-score .k,.qz-score .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(23,20,15,.5);margin:0 0 6px}
.learn-score .v{font-family:var(--serif);font-size:34px;line-height:1}
.learn-bar{margin-top:18px;height:6px;border-radius:100px;background:rgba(23,20,15,.1);overflow:hidden}
.learn-bar span{display:block;height:100%;width:0;background:var(--green);transition:width .4s cubic-bezier(.2,.7,.2,1)}

.dark-panel{background:var(--a-ink);color:#F5F0E6;border-radius:4px;overflow:hidden;margin:0 0 22px}
.dark-panel-h{padding:14px 20px;border-bottom:1px solid rgba(245,240,230,.12);font-family:var(--mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,230,.5)}
.part-one{padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:26px}
@media (max-width:780px){ .part-one{grid-template-columns:minmax(0,1fr)} }
.part-one figure{margin:0}
.part-one .ticket{margin:0;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.tk-cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,240,230,.45);margin:12px 0 0}
.part-one .step-row{border-top-color:rgba(245,240,230,.12)}
.part-one .step-n{background:var(--red);color:#FFFBF2}
.part-one strong{color:#F5F0E6}
.part-one .fine{color:rgba(245,240,230,.66)}

.key-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.key-head h2{margin:0 0 6px}
.key-head .fine{margin:0;max-width:520px}
.key-search{flex:0 1 260px;min-width:0}
.code-h .n{color:rgba(23,20,15,.35)}
.key-none{font-size:14px;color:rgba(23,20,15,.55);margin:18px 0 0}

.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;list-style:none;margin:0;padding:0}
.rules-grid li{display:flex;gap:12px;padding:14px 16px;border-radius:3px;background:rgba(23,20,15,.035);font-size:14px;line-height:1.6}
.rules-grid .n{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--red);padding-top:2px}

.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}
.ex-card{border:1px solid rgba(23,20,15,.14);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;background:rgba(23,20,15,.035)}
.ex-kind{padding:11px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,20,15,.55)}
.ex-card .ticket{margin:0 12px;flex:1 1 auto}
.ex-note{padding:13px 14px;font-size:13px;line-height:1.6;color:rgba(23,20,15,.62);margin:0}

.quizbox{background:var(--a-ink);color:#F5F0E6;border-radius:4px;padding:clamp(20px,3vw,30px);margin:0 0 22px}
.quizbox h2{color:#F5F0E6;margin:0 0 6px}
.quizbox .fine{color:rgba(245,240,230,.62);margin:0}
.qz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 20px}
.qz-score{text-align:right;flex:0 0 auto}
.qz-score .k{color:rgba(245,240,230,.45)}
.qz-score .v{font-family:var(--serif);font-size:32px;line-height:1}
.qz-pips{display:flex;gap:4px;margin:0 0 24px}
.qz-pips span{flex:1 1 auto;height:5px;border-radius:100px;background:rgba(245,240,230,.16);transition:background .3s ease}
.qz-pips .done{background:var(--green)}
.qz-pips .now{background:var(--orange)}
.quizbox .quiz{border-top:1px solid rgba(245,240,230,.12)}
.quiz-live .quiz{display:none;border-top:0;padding:0}
.quiz-live .quiz.now{display:block}
.qz-count{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.quizbox .quiz-q{font-size:clamp(17px,2.4vw,20px);line-height:1.5;margin:0 0 14px;max-width:680px}
.quizbox .quiz-q strong{font-weight:500}
.quizbox .ticket.short{max-width:680px;box-shadow:none}
.quizbox .quiz-opts{gap:9px;max-width:680px}
.quizbox .quiz-o{display:flex;gap:12px;align-items:baseline;padding:14px 16px;background:transparent;
  border-color:rgba(245,240,230,.22);color:rgba(245,240,230,.88);font-size:15px;line-height:1.5;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.quizbox .quiz-o:hover{border-color:rgba(245,240,230,.6)}
.quiz-o .tag{flex:0 0 auto;font-family:var(--mono);font-size:12px;opacity:.7}
.quizbox .quiz-o.right{background:rgba(127,165,60,.18);border-color:var(--green);color:#F5F0E6}
.quizbox .quiz-o.wrong{background:rgba(200,21,30,.18);border-color:var(--red);color:#F5F0E6}
.quizbox .answered .quiz-o{cursor:default}
.quizbox .answered .quiz-o:not(.right):not(.wrong){color:rgba(245,240,230,.45);border-color:rgba(245,240,230,.14)}
.qz-fb{margin-top:18px;padding:16px 18px;border-radius:3px;border-left:3px solid var(--green);background:rgba(127,165,60,.12);max-width:680px}
.qz-fb.no{border-left-color:var(--orange);background:rgba(217,112,43,.12)}
.qz-fb .h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
.qz-fb.no .h{color:var(--orange)}
.qz-fb p{font-size:14px;line-height:1.7;color:rgba(245,240,230,.82);margin:0}
.qz-end .v{font-size:clamp(19px,2.6vw,23px);line-height:1.45;max-width:620px;margin:0 0 10px}
.btn-red{margin-top:16px;padding:12px 20px;background:var(--red);color:#F5F0E6;border:0;border-radius:3px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

.btnrow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
.btn-line{padding:11px 18px;background:transparent;border:1px solid rgba(23,20,15,.22);border-radius:3px;color:var(--a-ink);
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.btn-line:hover{border-color:var(--a-ink)}
.btn-line.on-dark{border-color:rgba(245,240,230,.3);color:#F5F0E6}
.btn-line.on-dark:hover{border-color:#F5F0E6}
.btn-green{padding:11px 18px;background:var(--green);color:#0B0A09;border:0;border-radius:3px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
@media (pointer:coarse){ .btn-line,.btn-green,.btn-red,.add-row{min-height:44px} }


.drill{padding:0 0 22px;margin:0 0 22px;border-top:0;border-bottom:1px solid rgba(23,20,15,.1)}
.drill-top{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0 0 10px}
.drill-k,.drill-state{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,20,15,.5)}
.drill-state{color:rgba(23,20,15,.4)}
.drill-state.open{color:var(--orange)}
.drill-state.ok{color:#5C7A28}
.drill-say{font-size:17px;line-height:1.55;font-style:italic;margin:0 0 14px;max-width:640px}
.drill textarea.write{font-family:var(--mono);font-size:15px;line-height:1.7;resize:vertical}
.drill-check > summary{display:inline-flex;list-style:none;margin-top:12px;padding:11px 18px;background:var(--a-ink);color:#F5F0E6;
  border-radius:3px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.drill-check > summary::-webkit-details-marker{display:none}
.drill-check > summary .hide,.drill-check[open] > summary .show{display:none}
.drill-check[open] > summary .hide{display:inline}
.drill-ans{margin-top:14px;background:var(--a-ink);border-radius:3px;padding:18px 20px;color:#F5F0E6}
.drill-ans .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,230,.5);margin:0 0 12px}
.drill-ans .ticket{max-width:440px;margin:0;box-shadow:none}
.drill-ans .why{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(245,240,230,.14);font-size:13px;line-height:1.65;color:rgba(245,240,230,.7)}
.learn-foot{font-size:13px;line-height:1.7;color:rgba(23,20,15,.5);max-width:620px;margin:0}

.gen-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.gen-controls .k{font-size:13px;font-weight:600;margin-right:4px}
.gen-chip{padding:9px 14px;border:1px solid rgba(23,20,15,.22);border-radius:100px;background:transparent;color:var(--a-ink);
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer}
.gen-chip[aria-pressed=true]{background:var(--a-ink);color:#F5F0E6;border-color:var(--a-ink)}
@media (pointer:coarse){ .gen-chip{min-height:44px} }
.gen-say{font-size:clamp(17px,2.3vw,20px);line-height:1.6;font-style:italic;margin:0 0 6px;max-width:700px;
  padding:18px 20px;background:rgba(23,20,15,.035);border-left:3px solid var(--red);border-radius:0 3px 3px 0}
.gen-ans{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:780px){ .gen-ans{grid-template-columns:minmax(0,1fr)} }
.gen-ans .ticket{margin:0}
.gen-codes{list-style:none;margin:0;padding:0;font-size:14px}
.gen-codes li{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px dotted rgba(245,240,230,.14)}
.gen-codes .c{flex:0 0 90px;font-family:var(--mono);font-size:12.5px;color:#F5F0E6}
.gen-codes .m{color:rgba(245,240,230,.7)}
.gen-stage{display:block;margin-top:8px;font-style:normal;font-size:13px;color:rgba(23,20,15,.6)}
.gen-tally{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(23,20,15,.5)}

/* ------------------------------------------------------ learning progress */
/* A jump to a section (the links under the progress panel, or reopening an editor after saving) stops
   below the sticky page header, not under it. */
.pane [id]{scroll-margin-top:110px}
.lp-head{display:flex;gap:16px 30px;align-items:flex-start;flex-wrap:wrap}
.lp-head > div:first-child{flex:1 1 320px;min-width:0}
.lp-head h2{margin:0 0 6px}
.lp-head .lede{margin:0}
.lp-stat{flex:0 0 auto;text-align:right}
.lp-stat .k,.lp-lists .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(23,20,15,.5);margin:0 0 6px}
.lp-stat .v{font-family:var(--serif);font-size:34px;line-height:1}
.lp-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px 22px;margin:20px 0 0}
.lp-part{min-width:0}
.lp-part .n{font-size:13px;font-weight:600}
.lp-part .n span{display:block;margin-top:2px;font-family:var(--mono);font-size:11px;font-weight:400;color:rgba(23,20,15,.5)}
.lp-part .learn-bar{margin-top:6px;height:5px}
.lp-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px 30px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(23,20,15,.1)}
.lp-weak{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lp-weak:empty{display:none}
.lp-weak li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;padding:7px 10px;border-radius:3px;
  background:rgba(200,21,30,.06);border-left:3px solid var(--red)}
.lp-weak li span{font-family:var(--mono);font-size:11px;color:var(--red);white-space:nowrap}
.lp-known{font-size:14px;margin:8px 0 0}
.lp-known span{font-family:var(--serif);font-size:22px}
.lp-none{font-size:13px;line-height:1.6;color:rgba(23,20,15,.5);margin:8px 0 0}
.lp-team-wrap{overflow-x:auto}
.lp-team{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.lp-team th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(23,20,15,.5);padding:8px 10px;border-bottom:1px solid rgba(23,20,15,.15)}
.lp-team td{padding:10px;border-bottom:1px solid rgba(23,20,15,.08);vertical-align:top}
.lp-team .who small{display:block;font-size:12px;color:rgba(23,20,15,.5)}
.lp-team .bar{width:90px;height:5px;margin-top:5px;border-radius:100px;background:rgba(23,20,15,.1);overflow:hidden}
.lp-team .bar span{display:block;height:100%;background:var(--green)}
.lp-team .weak{font-size:13px;color:var(--red)}

/* trainers: codes and prices on the light card, the quiz in its dark one */
.tn-head{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 12px}
.tn-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,20,15,.5)}
.tn-state{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:100px;
  border:1px solid rgba(23,20,15,.2);color:rgba(23,20,15,.6)}
.tn-state.new{border-color:var(--orange);color:#A8551D}
.tn-state.back{border-color:var(--red);color:var(--red)}
.tn-state.due{border-color:var(--a-ink);color:var(--a-ink)}
.tn-state.known{border-color:var(--green);color:#5C7A28}
.tn-ask{font-size:13px;color:rgba(23,20,15,.55);margin:0 0 4px}
.tn-prompt{font-size:clamp(19px,2.8vw,24px);line-height:1.4;margin:0 0 6px;max-width:680px}
.tn-prompt.mono{font-family:var(--mono);font-size:clamp(22px,3.4vw,30px)}
.tn-sub{font-size:13px;color:rgba(23,20,15,.55);margin:0 0 6px;max-width:680px}
.tn-line .ticket{max-width:520px}
.trainer .quiz-opts,.quizbox .quiz-opts{margin-top:14px}
.trainer .quiz-opts{max-width:680px;gap:9px}
.trainer .quiz-o{display:flex;gap:12px;align-items:baseline;padding:13px 15px;font-size:15px;line-height:1.45}
.quiz-o.mono span:last-child{font-family:var(--mono)}
.trainer.answered .quiz-o{cursor:default}
.trainer.answered .quiz-o:not(.right):not(.wrong){color:rgba(23,20,15,.45)}
.trainer .qz-fb{background:rgba(127,165,60,.1)}
.trainer .qz-fb.no{background:rgba(217,112,43,.1)}
.trainer .qz-fb p{color:rgba(23,20,15,.75)}
.quizbox .tn-kicker{color:var(--orange)}
.quizbox .tn-state{border-color:rgba(245,240,230,.25);color:rgba(245,240,230,.6)}
.quizbox .tn-state.new{border-color:var(--orange);color:#F0A56E}
.quizbox .tn-state.back{border-color:#E0474E;color:#F08A8F}
.quizbox .tn-state.due{border-color:rgba(245,240,230,.6);color:#F5F0E6}
.quizbox .tn-state.known{border-color:var(--green);color:#B5D37E}
.quizbox .tn-ask,.quizbox .tn-sub{color:rgba(245,240,230,.55)}
.quizbox .tn-prompt{color:#F5F0E6}
.drill-state.back{color:var(--red)}

/* the price list */
.pl-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 26px}
.pl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dotted rgba(23,20,15,.14);font-size:14px}
.pl-row small{display:block;font-size:12px;color:rgba(23,20,15,.5)}
.pl-row .p{font-size:13px;font-weight:600;white-space:nowrap}
.pl-trainer{margin-top:26px;padding-top:22px;border-top:1px solid rgba(23,20,15,.12)}
.pl-trainer h3{margin:0 0 14px}