/* Tokens from the KitchenAlly design system (Material Dashboard style). */
:root{
  --ground:#f4f5f7;--card:#fff;--border:#e8eaed;--ink:#262b31;--muted:#737a83;--dark:#262b31;--on-dark:#fff;
  --data:#43a047;--data-soft:#e8f3e8;--on-data:#fff;--up:#2e7d32;--down:#d32f2f;--grid:#eef0f2;
  --down-soft:#fdecea;--warn:#b26a00;--warn-soft:#fff3e0;--info:#2a78d6;--info-soft:#e8f1fc;--sky-top:#eef4f7;--sky-bottom:#f8f6f1;
  --shadow:0 2px 6px rgba(20,25,30,.06),0 1px 2px rgba(20,25,30,.04);--shade:rgba(20,25,30,.35);
  --radius:14px;--radius-sm:8px;
  /* One color per position on the work schedule, in the restaurant's order; never orange, which means missing. */
  --pos-1:#2a78d6;--pos-2:#8e5bd0;--pos-3:#138a8a;--pos-4:#c2417a;--pos-5:#4c5bd4;--pos-6:#8d6e63;--pos-0:#8a9099;
  --font:"Heebo","Assistant","Arial Hebrew",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#14171b;--card:#1c2025;--border:#2a2f36;--ink:#e9ecef;--muted:#9aa1a9;--dark:#e9ecef;--on-dark:#14171b;
  --data:#66bb6a;--data-soft:#1f3322;--up:#81c784;--down:#ef7a7a;--grid:#262b31;--down-soft:#3a1d1d;--warn:#f0a43a;--warn-soft:#3a2c14;--info:#6aa8f0;--info-soft:#18283c;--sky-top:#1a2129;--sky-bottom:#1c2025;--shadow:0 1px 2px rgba(0,0,0,.3);--shade:rgba(0,0,0,.55);--pos-1:#6aa8f0;--pos-2:#b38ef0;--pos-3:#4cc7c7;--pos-4:#ec7fae;--pos-5:#8f9bf5;--pos-6:#c4a59a;--pos-0:#8a9099;color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#14171b;--card:#1c2025;--border:#2a2f36;--ink:#e9ecef;--muted:#9aa1a9;--dark:#e9ecef;--on-dark:#14171b;
  --data:#66bb6a;--data-soft:#1f3322;--up:#81c784;--down:#ef7a7a;--grid:#262b31;--down-soft:#3a1d1d;--warn:#f0a43a;--warn-soft:#3a2c14;--info:#6aa8f0;--info-soft:#18283c;--sky-top:#1a2129;--sky-bottom:#1c2025;--shadow:0 1px 2px rgba(0,0,0,.3);--shade:rgba(0,0,0,.55);--pos-1:#6aa8f0;--pos-2:#b38ef0;--pos-3:#4cc7c7;--pos-4:#ec7fae;--pos-5:#8f9bf5;--pos-6:#c4a59a;--pos-0:#8a9099;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
a{color:inherit;text-underline-offset:3px}
h1,h2,p{margin:0}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--data);outline-offset:2px;border-radius:6px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.page{max-width:1120px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:20px}
.crumb{font-size:13px;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:500}
.head h1{font-size:24px;font-weight:700}
.head p{color:var(--muted);margin-top:2px}
.demo{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 10px;background:var(--card)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;min-width:0}
.card h2{font-size:15px;font-weight:600}
.sub{color:var(--muted);font-size:13px}
.foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.row{display:grid;gap:16px}
.row.two{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media (max-width:860px){.row.two{grid-template-columns:1fr}}

/* agent */
.agent{display:flex;flex-direction:column;gap:14px}
.agent-top{display:flex;align-items:center;gap:12px}
.badge{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--dark);color:var(--on-dark);display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.drop{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;border:1.5px dashed var(--border);border-radius:12px;padding:22px;background:var(--ground);text-align:center}
.drop.over{border-color:var(--data);background:var(--data-soft)}
.btn{height:42px;padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--dark);background:var(--dark);color:var(--on-dark);font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.ghost{height:32px;padding:0 12px;font-size:13px;font-weight:500;background:var(--card);color:var(--ink);border-color:var(--border)}
.say{display:flex;flex-direction:column;gap:8px}
.say .main{font-size:16px;font-weight:600}
.say ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.say li{display:flex;gap:8px;align-items:flex-start}
.say li svg{margin-top:2px}
.say .next{margin:0;color:var(--muted)}
.say-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.say-nav .btn.ghost{width:36px;padding:0;justify-content:center}
.say-nav .btn[disabled]{opacity:.35;cursor:default}
.up{color:var(--down);font-weight:700}
.down{color:var(--up);font-weight:700}
.muted{color:var(--muted)}

/* meter */
.meter{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gauge{width:170px;height:96px;direction:ltr;overflow:visible}
.gauge .track{fill:none;stroke:var(--grid);stroke-width:14;stroke-linecap:round}
.gauge .fill{fill:none;stroke:var(--data);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .6s}
.gauge text{fill:var(--ink);font:700 28px var(--font);text-anchor:middle}
.parts{list-style:none;margin:10px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;text-align:start}
.parts li{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:10px;align-items:center;font-size:13px}
.bar{height:6px;border-radius:3px;background:var(--grid);overflow:hidden;direction:rtl}
.bar i{display:block;height:100%;background:var(--data);border-radius:3px}

/* gaps */
.gaps{list-style:none;margin:12px 0 0;padding:0}
.gaps li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--border)}
.gaps li:last-child{border-bottom:0}
.gaps small{display:block;color:var(--muted);font-size:12.5px}
.empty{color:var(--muted);padding:18px 0 4px}
.team-list li.empty{display:block}

/* dishes: the menu by its sections, one compact row per dish */
.menu{display:flex;flex-direction:column;gap:12px}
.menu-sec{padding:6px 16px}
.menu-sec .fold-head{align-items:center;padding:6px 0}
.menu-sec .fold-head .fold-chev{margin-top:0}
.menu-sec>details[open]>.fold-head{padding-bottom:2px}
.menu-sec>details>summary~*{margin-top:4px}
.menu-sec.unsorted{border-style:dashed}
.sec-count{display:inline-block;min-width:24px;margin-inline-start:6px;padding:0 8px;border-radius:999px;background:var(--grid);color:var(--muted);font-size:12.5px;font-weight:600;text-align:center;vertical-align:1px}
.dish-rows{list-style:none;margin:0;padding:0 0 6px}
.dish-rows>li+li{border-top:1px solid var(--border)}
.dish-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(84px,auto) 18px;gap:12px;align-items:center;width:100%;min-height:48px;padding:8px 0;color:inherit;text-decoration:none;background:none;border:0;text-align:start;cursor:pointer}
.dish-row:hover .dish-row-name{text-decoration:underline;text-underline-offset:3px}
.dish-row>svg{color:var(--muted)}
.dish-row-name{font-weight:500;overflow-wrap:anywhere}
.dish-row-price{font-weight:600}
.dish-row-cost{font-size:13px;text-align:end;white-space:nowrap}
.dish-row-section{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:1px 10px;white-space:nowrap}
.dish-rows button.dish-row{grid-template-columns:minmax(0,1fr) auto minmax(84px,auto) auto}
.dish-rows li.picking{padding-bottom:12px}
.row-chips{padding:2px 0 4px}
.new-section{display:flex;gap:8px;margin-top:8px}
.new-section input{flex:1;min-width:0;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--card)}
.new-section .btn.ghost{height:36px}
.menu-tools{display:flex;gap:10px;align-items:center}
.menu-search{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--muted)}
.menu-search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--ink);font-size:15px;height:100%}
.menu-search:focus-within{outline:2px solid var(--data);outline-offset:1px}
.menu-tools .btn.ghost{height:44px;white-space:nowrap}
.menu-tools .btn[aria-pressed="true"]{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.arrange-help{margin-top:-8px}
.sort-card{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--info-soft);border-color:transparent}
.sort-text{flex:1 1 280px;min-width:0}
.sort-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sort-actions .btn.ghost{height:42px}
.dish-remove{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px}
.dupe-card{background:var(--warn-soft);border-color:transparent}
.dupe-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.dupe-list li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}
.dupe-list li:first-child{border-top:0;padding-top:0}
.dupe-names{flex:1 1 220px;min-width:0}
.dupe-list .edit-actions{flex-wrap:wrap}
.add-section{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.dish-section{margin-top:10px}
.dish-section .tag-chip{border:0;cursor:pointer;gap:6px;color:var(--ink)}
.dish-section .tag-chip svg{width:14px;height:14px;color:var(--muted)}
@media (max-width:560px){
  .dish-row{grid-template-columns:minmax(0,1fr) auto 18px;row-gap:0}
  .dish-row-price{grid-column:2;grid-row:1}
  .dish-row-cost{grid-column:1 / 3;grid-row:2;text-align:start;font-size:12.5px;color:var(--muted)}
  .dish-row>svg{grid-column:3;grid-row:1 / 3}
  .dish-rows button.dish-row{grid-template-columns:minmax(0,1fr) auto}
  .dish-rows button.dish-row .dish-row-section{grid-column:2;grid-row:2;justify-self:end}
  .sort-actions{width:100%}
  .sort-actions .btn{flex:1;justify-content:center}
}

/* ledger */
.tbl{width:100%;border-collapse:collapse;margin-top:8px}
.tbl th{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-align:start;padding:10px 8px;border-bottom:1px solid var(--border)}
.tbl td{padding:12px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.spark{width:80px;height:24px;direction:ltr;display:block}
.spark polyline{fill:none;stroke:var(--data);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--data)}
.supplier+.supplier{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
/* Suppliers fold one under the other; the folded line (notes, products, last delivery) stays visible when open. */
.supplier-search{margin:12px 0 12px}
.supplier-tally{margin:0 0 4px}
details.supplier+.supplier,.supplier+details.supplier{margin-top:8px;padding-top:8px}
details.supplier>.fold-head h3{margin:0}
details.supplier[open]>.fold-head .fold-sum{display:block}
details.supplier>.supplier-head{margin-top:4px}
.supplier-all{margin-top:8px}
.supplier h3{margin:12px 0 0;font-size:17px;font-weight:700}
.supplier h3 .muted{font-size:13px;font-weight:400}
.supplier .tbl td{font-size:13.5px}
.supplier small.told,.told-suppliers small.told{display:block;color:var(--muted);font-size:12.5px}
.told-suppliers{margin-top:20px;padding-top:12px;border-top:1px solid var(--border)}
.told-suppliers h3{margin:0;font-size:17px;font-weight:700}
@media (max-width:560px){
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:1fr auto;padding:10px 0;border-bottom:1px solid var(--border)}
  .tbl td{border:0;padding:2px 0}
  .tbl td.hide-sm{display:none}
}

/* Conversation with the agent: the whole screen, nothing else around (D-009). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.talk{min-height:100dvh;display:flex;flex-direction:column}
.talk-top{position:sticky;top:0;z-index:5;background:var(--ground);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));max-width:760px;width:100%;margin:0 auto}
.talk-top:has(.shelf:not([hidden])){flex-wrap:wrap}
/* The getting-to-know-you board (I-017): a shelf of areas over the conversation, each a ring that fills. */
.shelf{flex-basis:100%;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 10px 8px}
.shelf-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;font-size:12px;font-weight:600;color:var(--muted)}
.shelf-files{display:inline-flex;align-items:center;gap:5px;min-height:32px;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:0 10px;font-size:12.5px;font-weight:500;cursor:pointer}
.shelf-files svg.i{width:15px;height:15px}
.shelf-files b{background:var(--dark);color:var(--on-dark);border-radius:999px;padding:0 6px;font-size:11px}
.shelf-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.shelf-area{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:60px;border:0;background:none;padding:2px 0;cursor:pointer;border-radius:var(--radius-sm)}
.shelf-name{font-size:10.5px;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.shelf-area.on .shelf-name{color:var(--ink);font-weight:700}
.shelf-area.on .ring{box-shadow:0 0 0 2px var(--dark)}
.ring{--p:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--data) calc(var(--p) * 1%),var(--grid) 0)}
.ring svg.i{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--card);color:var(--ink)}
.ring.big{width:64px;height:64px;flex:none}
.ring.big svg.i{width:52px;height:52px;padding:13px;background:var(--ground)}
.plus-one{position:absolute;top:-2px;inset-inline-end:2px;background:var(--dark);color:var(--on-dark);font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 6px;line-height:1.4}
.area-view{display:flex;flex-direction:column;gap:12px}
.area-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:40px;border:0;background:none;padding:0;font-size:14px;cursor:pointer}
.area-top{display:flex;align-items:center;gap:14px}
.area-top h1{font-size:22px;font-weight:700}
.area-top small{font-size:13px;color:var(--muted)}
.area-opens{display:flex;flex-direction:column;gap:2px;background:var(--grid);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px}
.area-opens b{font-weight:600;color:var(--muted)}
.area-opens.on{background:var(--data-soft)}
.area-opens.on b{color:var(--up)}
.area-next{display:flex;flex-direction:column;gap:4px;background:var(--dark);color:var(--on-dark);border-radius:var(--radius);padding:14px 16px}
.area-next small{font-size:11.5px;font-weight:700;letter-spacing:.06em;opacity:.7}
.area-next b{font-size:16px;font-weight:600}
.area-next span{font-size:13px;opacity:.85}
.area-next .area-acts .btn{background:var(--card);color:var(--ink);border-color:var(--card)}
.area-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.area-acts .btn{height:36px;padding:0 14px;font-size:13.5px;font-weight:500}
.area-lines{list-style:none;margin:0;padding:0}
.area-lines li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.area-lines li:first-child{border-top:0}
.area-lines b{display:block;font-size:14px;font-weight:500}
.area-lines small{display:block;font-size:12.5px;color:var(--muted)}
.area-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);margin-top:2px;display:grid;place-items:center;font-size:11px;line-height:1}
.is-has .area-dot{background:var(--data);border-color:var(--data);color:var(--on-data)}
.is-missing .area-dot{border-style:dashed;border-color:var(--warn)}
/* Recent files, in a sheet from the bottom. */
.drawer{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end}
.drawer-shade{flex:1;border:0;background:var(--shade);cursor:pointer}
.drawer-sheet{background:var(--card);border-radius:20px 20px 0 0;padding:12px 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;max-height:75dvh;overflow:auto;width:100%;max-width:760px;margin:0 auto}
.drawer-grip{align-self:center;width:40px;height:4px;border-radius:999px;background:var(--border)}
.drawer-head h2{font-size:18px;font-weight:700}
.drawer-head small{font-size:12.5px;color:var(--muted)}
.drawer-list{list-style:none;margin:0;padding:0}
.drawer-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.drawer-list li.sub{display:block}
.drawer-list b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-list small{display:block;font-size:12.5px;color:var(--muted)}
.drawer-thumb{width:48px;height:56px;border-radius:6px;border:1px solid var(--border);background:var(--ground);display:grid;place-items:center;overflow:hidden;font-size:11px;font-weight:700;color:var(--muted);text-decoration:none}
.drawer-thumb img{width:100%;height:100%;object-fit:cover}
.drawer-foot{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.drawer-foot .btn.link{flex:1;justify-content:center;width:auto}
.drawer-foot .btn.ghost{height:42px}
.chapter-help button{background:none;border:0;padding:0;color:var(--muted);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.chapter-help{max-width:760px;margin:0 auto 8px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
.chapter-help button{font-size:13px}
.msg.unlock{margin-inline-start:46px}
.msg.unlock .bubble{background:var(--data-soft);border-radius:var(--radius);padding:10px 14px;font-size:15px;display:flex;gap:10px;align-items:flex-start}
.msg.unlock .bubble b{display:block}
.msg.unlock .bubble svg{color:var(--data);margin-top:2px}
.talk-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--muted)}
.talk-brand span{direction:ltr}
.talk-main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:8px 16px 24px}
.talk-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.msg{display:flex;gap:12px;align-items:flex-start}
.msg .bubble{min-width:0;font-size:16.5px;line-height:1.7}
.msg .bubble p+p,.msg .bubble ul{margin-top:8px}
.msg .bubble ul{padding-inline-start:20px;margin-bottom:0}
.msg.from-agent .who{width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:var(--dark);box-shadow:var(--shadow);position:relative}
.msg.from-agent .who::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--data)}
.msg.from-agent .bubble{padding-top:4px}
.msg .quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.msg.from-user{justify-content:flex-end}
.msg.from-user .bubble{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:10px 14px;max-width:85%;font-size:15.5px}
.photo-tag{display:inline-block;font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:0 8px;margin-bottom:4px}
.dots{display:inline-flex;gap:5px;padding:10px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.35;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:1}}
.talk-compose{position:sticky;bottom:0;padding:4px 16px max(16px,env(safe-area-inset-bottom));background:var(--ground)}
.talk-compose::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:24px;background:linear-gradient(to top,var(--ground),transparent);pointer-events:none}
.talk-note{max-width:760px;margin:0 auto 8px;font-size:13px;color:var(--muted);text-align:center}
.compose{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:10px 10px 8px}
.compose textarea{width:100%;border:0;background:none;resize:none;outline:none;font-size:16.5px;line-height:1.6;padding:6px 8px;min-height:40px}
.compose textarea::placeholder{color:var(--muted)}
.compose-row{display:flex;align-items:center;gap:8px}
.compose-row .grow{flex:1}
.ib{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.ib:hover{background:var(--ground);color:var(--ink)}
.plus{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--ink)}
.plus svg{transition:transform .15s}
.plus[aria-expanded="true"]{background:var(--ground);color:var(--ink)}
.plus[aria-expanded="true"] svg{transform:rotate(45deg)}
.attach-sheet{display:flex;gap:10px;padding:8px 4px 10px;border-top:1px solid var(--border);margin-top:4px}
.attach-sheet[hidden]{display:none}
.sheet-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;padding:8px 6px;border-radius:12px;font-size:13px;color:var(--ink);cursor:pointer}
.sheet-item:hover,.sheet-item:focus-visible{background:var(--ground)}
.sheet-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:var(--on-dark)}
.files{list-style:none;margin:0 0 6px;padding:0 4px;display:flex;gap:8px;overflow-x:auto}
.files[hidden]{display:none}
.files li{position:relative;flex:none;width:64px;height:64px;border-radius:10px;border:1px solid var(--border);background:var(--ground);display:grid;place-items:center;overflow:hidden;font-size:11px;color:var(--muted);text-align:center}
.files img{width:100%;height:100%;object-fit:cover}
.files button{position:absolute;top:2px;inset-inline-end:2px;width:22px;height:22px;border-radius:50%;border:0;background:var(--dark);color:var(--on-dark);font-size:12px;line-height:22px;cursor:pointer;padding:0}
.mic{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.mic:disabled{opacity:.5;cursor:progress}
.mic[aria-pressed="true"]{background:var(--card);color:var(--ink);border-color:var(--data);box-shadow:0 0 0 4px var(--data-soft);animation:listen 1.6s ease-in-out infinite}
@keyframes listen{50%{box-shadow:0 0 0 8px var(--data-soft)}}
.send{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--dark);background:var(--dark);color:var(--on-dark);display:grid;place-items:center;cursor:pointer}
.send:disabled{opacity:.5;cursor:progress}
@media (prefers-reduced-motion: reduce){.dots i,.mic[aria-pressed="true"]{animation:none}}

/* Links that look like buttons */
.btn.link,.btn.ghost.link{text-decoration:none;width:fit-content}
.gaps .btn.ghost{white-space:nowrap}

/* Sign-in: one calm card at a time. */
.door{max-width:440px;margin:0 auto;padding:40px 16px;display:flex;flex-direction:column;gap:16px;min-height:100dvh}
.door-card{display:flex;flex-direction:column;gap:14px}
.door-card h1{font-size:22px;font-weight:700}
.door-card .btn{justify-content:center;width:100%}
.door-form{display:flex;flex-direction:column;gap:12px}
.door-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.door-form input,.team-form input,.team-form select{height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--card);color:var(--ink);font-size:15px}
.door-msg{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:8px}


/* Team */
.team-list{list-style:none;margin:8px 0 0;padding:0}
.team-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.team-list li:last-child{border-bottom:0}
.team-list li.editing{display:block}
.team-list .team-form{margin-top:0}
.team-form input:disabled{background:var(--ground);color:var(--muted)}
.team-list b{font-weight:600}
.team-list small{display:block;color:var(--muted);font-size:12.5px}
.team-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-top:12px}
.team-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
@media (max-width:640px){.team-form{grid-template-columns:1fr}}

/* Dashboard shell: a side menu on the right, a drawer on phones (D-012). */
.app{display:flex;gap:16px;min-height:100dvh;padding-top:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.app>.page{flex:1;min-width:0;margin:0;padding:4px 0 calc(104px + env(safe-area-inset-bottom))}
.side{flex:0 0 240px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:16px;height:calc(100dvh - 32px);overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;font-weight:600;font-size:15px}
.brand span{direction:ltr}
.biz{padding:8px 10px;margin-bottom:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--ground);font-size:13.5px;font-weight:500}
.biz:empty{display:none}
.clock{display:flex;align-items:flex-start;gap:8px;padding:2px 10px 10px;color:var(--muted);font-size:12.5px;text-decoration:none}
.clock b{font-weight:500;color:var(--ink)}
.clock small{display:block}
.clock[hidden]{display:none}
a.clock:hover b{text-decoration:underline}
.zone-now{display:flex;align-items:flex-start;gap:8px;margin:10px 0;font-size:14px}
.zone-now small{display:block;color:var(--muted);font-size:12.5px}
.nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none}
.nav a:hover{background:var(--ground)}
.nav a[aria-current="page"]{background:var(--dark);color:var(--on-dark);box-shadow:var(--shadow)}
.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.side-foot .ib{border:0;background:none}
.head{display:flex;align-items:flex-start;gap:8px}
.menu-btn{display:none;border:0;background:none;margin-top:2px}
.scrim{display:none}
@media (max-width:900px){
  .app{display:block;padding-top:8px}
  .side{position:fixed;top:0;bottom:0;right:0;height:auto;width:min(280px,85vw);border-radius:0;z-index:30;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(110%);transition:transform .25s ease}
  .side.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;z-index:25;background:rgba(20,25,30,.35)}
  .menu-btn{display:grid}
}

/* The way to the agent floats at the bottom; pages keep room under it so it never covers text. */
.fab{position:fixed;z-index:20;bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));inset-inline-end:max(16px,env(safe-area-inset-left));height:52px;padding:0 20px;border-radius:999px;background:var(--dark);color:var(--on-dark);display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;box-shadow:0 6px 18px rgba(20,25,30,.22),var(--shadow)}
.fab:hover{filter:brightness(1.1)}

/* Sending notes: camera and gallery as two buttons, since a phone's picker may offer only one. */
.drop{flex-direction:column}
.pick-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn.alt{background:var(--card);color:var(--ink);border-color:var(--border)}
.drop[aria-busy="true"] .pick-row{opacity:.6;pointer-events:none}
@media (hover:hover) and (pointer:fine){.only-touch{display:none}}

/* Editing a supplier in place */
.supplier-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.supplier-head h3{margin:0}
.supplier.editing{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.supplier.editing label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);min-width:0}
.supplier.editing input{height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--card);color:var(--ink);font-size:15px;width:100%}
.edit-name input{font-weight:600}
.supplier.editing select{height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--card);color:var(--ink);font-size:15px;font-family:inherit;width:100%}
.merge-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;border-top:1px solid var(--border);padding-top:10px}
.merge-row label{flex:1 1 220px}
.dupe-names small{display:block;margin-top:2px}
.edit-row{border:0;border-top:1px solid var(--border);margin:0;padding:10px 0 0;display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:8px}
.edit-actions{display:flex;gap:8px}
.routines li>.edit-actions{flex:0 1 auto;min-width:auto;flex-wrap:wrap}
.routines .edit-actions .btn{white-space:nowrap}
.waits li>div:not(.edit-actions){flex-basis:14rem}
@media (max-width:560px){.edit-row{grid-template-columns:repeat(2,minmax(0,1fr))}.edit-row label:first-child{grid-column:1 / -1}}
.pick-row .btn{padding:0 14px}

/* What the agent does by itself (the "הסוכן בעבודה" page). */
.stack{display:flex;flex-direction:column;gap:20px}
.cards-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.week-scroll{overflow-x:auto;margin-top:14px}
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(84px,1fr));gap:8px;min-width:620px}
.day{display:flex;flex-direction:column;gap:6px;min-height:120px;padding:10px;border:1px solid var(--border);border-radius:10px}
.day.today{border:1.5px solid var(--dark)}
.day b{font-size:18px}
.chip{display:block;font-size:12px;line-height:1.35;padding:4px 6px;border-radius:6px;background:var(--data-soft)}
.chip.off{background:var(--grid);color:var(--muted);text-decoration:line-through}
.approvals,.routines{list-style:none;margin:8px 0 0;padding:0}
.approvals li,.routines li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.approvals li:last-child,.routines li:last-child{border-bottom:0}
.approvals li>div:first-child,.routines li>div{flex:1;min-width:0}
.approvals b,.routines b{font-weight:600}
.approvals small,.routines small,.log small{display:block;color:var(--muted);font-size:12.5px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--data);flex:none}
.dot.off{background:var(--grid)}
.switch{width:52px;height:44px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer;flex:none}
.switch span{width:40px;height:24px;border-radius:999px;background:var(--border);position:relative;transition:background .2s}
.switch span::after{content:"";position:absolute;top:3px;right:19px;width:18px;height:18px;border-radius:50%;background:var(--on-data);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:right .2s}
.switch[aria-checked="true"] span{background:var(--data)}
.switch[aria-checked="true"] span::after{right:3px}
.log{list-style:none;margin:12px 0 0;padding:0;padding-inline-start:14px;border-inline-start:2px solid var(--grid);display:flex;flex-direction:column;gap:14px}
.log .empty{padding:0}
.log li.warn b,.log li.warn{color:var(--warn)}
/* The agent's conversations: one folded card each, its messages open in place. */
.conv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.conv-list summary{cursor:pointer;list-style:none}
.conv-list summary::-webkit-details-marker{display:none}
.conv-list summary small{display:block;color:var(--muted);font-size:12.5px}
.conv-body{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.conv-body h3{font-size:14px;margin:8px 0 0}
.warn-text{color:var(--warn)}
@media (prefers-reduced-motion: reduce){.switch span,.switch span::after{transition:none}}
/* The one line on the home page that leads to it. */
.waiting{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.waiting div{flex:1;min-width:0}
.waiting small{display:block;color:var(--muted);font-size:13px}
.nav .count{margin-inline-start:auto;min-width:20px;height:20px;border-radius:999px;background:var(--data-soft);color:var(--ink);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
@media (max-width:560px){
  .week-scroll{overflow:visible}
  .week{grid-template-columns:1fr;min-width:0;gap:0}
  .day{flex-direction:row;flex-wrap:wrap;align-items:center;min-height:0;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px 0}
  .day.today{border:0;border-bottom:1px solid var(--border)}
  .day:last-child{border-bottom:0}
  .day b{font-size:15px;margin-inline-end:auto}
  .day:not(:has(.chip)){display:none}
}
/* The personal area ("האזור שלי"): what concerns only the signed-in person. */
.handoff{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-bottom:1px solid var(--border)}
.handoff:last-child{border-bottom:0}
.handoff b{font-weight:600}
.handoff small{display:block;color:var(--muted);font-size:12.5px}
.handoff summary{cursor:pointer;display:grid;gap:6px;list-style:none}
.handoff summary::-webkit-details-marker{display:none}
.questions{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.handoff .btn.link{margin-top:2px}
.notice{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.notice div{flex:1;min-width:0}
.notice small{display:block;color:var(--muted);font-size:13px}
/* Money ("כסף"): profit and loss, break-even, price rises and the menu ranked. */
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--card);margin-bottom:12px}
.seg button{height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--dark);color:var(--on-dark)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* With labor as its own number, the P&L has five; on two columns the profit takes the last row alone. */
.stats.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.stats.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.stats.five{grid-template-columns:repeat(2,minmax(0,1fr))}.stats.five>:last-child{grid-column:1 / -1}}
.stat .val,#break-even .val,#labor-body .val{font-size:24px;font-weight:700;line-height:1.3;margin:6px 0 2px}
.stat .val .muted{font-size:16px;font-weight:500}
.val.good{color:var(--up)}
.val.bad{color:var(--down)}
.pnl-note{margin-top:10px}
.progress{height:8px;border-radius:4px;background:var(--grid);overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;background:var(--data);border-radius:4px}
.rises{list-style:none;margin:8px 0 0;padding:0}
.rises>li{padding:12px 0;border-bottom:1px solid var(--border)}
.rises>li:last-child{border-bottom:0}
.rises b{font-weight:600}
.rises small{display:block;color:var(--muted);font-size:12.5px}
.rises .up svg{width:14px;height:14px;vertical-align:-2px}
.hits{margin:6px 0 0;padding-inline-start:18px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--grid)}
.tag.star{background:var(--data);color:var(--on-data)}
.tag.puzzle{background:var(--data-soft)}
.tag.dog{background:none;border:1px solid var(--border);color:var(--muted)}
.advice{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.fixed-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:12px}
.fixed-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.fixed-form input{height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--card);color:var(--ink);font-size:15px}
@media (max-width:640px){.fixed-form{grid-template-columns:1fr}}
.rules-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-items:end;margin-top:12px}
.rules-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.rules-form input,.rules-form select{height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--card);color:var(--ink);font-size:15px}
.holidays{margin-top:14px}
#labor-body .team-list small{display:block;color:var(--muted);font-size:12.5px}
#labor-body .team-list b.amount{white-space:nowrap}
.gaps li.empty{display:block}
/* Tasks (the "משימות" page): open by person, late first, and what got done this week. */
.task-sum{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.task-sum li{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:baseline;gap:8px;min-width:0}
.task-sum b{font-size:24px;font-weight:700}
.task-sum span{color:var(--muted);font-size:13px}
.task-sum li.late b{color:var(--down)}
.task-group+.task-group{margin-top:8px;padding-top:4px;border-top:1px solid var(--border)}
.task-group h3{margin:12px 0 0;font-size:15px;font-weight:600}
.task{align-items:flex-start!important}
.task>.dot{margin-top:6px}
.task .bar{display:block;max-width:220px;margin-top:8px}
.dot.late,.late{color:var(--down)}
.dot.late{background:var(--down)}
.task-items{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.task-items label{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer}
.task-items input{width:20px;height:20px;accent-color:var(--data);flex:none}
.task-items input:checked+*,.task-items input:checked{opacity:.8}
.task-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;margin-top:12px}
.task-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:0}
.task-form .wide{grid-column:span 2}
.task-form input,.task-form select,.task-form textarea{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%;font-family:inherit}
.task-form textarea{resize:vertical}
.task-form .btn{justify-content:center}
@media (max-width:640px){
  .task-sum{gap:8px}
  .task-sum li{flex-direction:column;gap:0;padding:10px 12px}
  .task-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-form .wide{grid-column:1 / -1}
  .task-form .btn{grid-column:1 / -1}
}
.routines .task-items li{border:0;padding:0}
/* Photos that show a task is done, and the giver's answer. */
.task-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.task-photos img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);display:block;background:var(--grid)}
.task-fix{display:flex;gap:8px;margin-top:8px}
.task-photos+.edit-actions{margin-top:10px;flex-wrap:wrap}
.task-fix input{flex:1;min-width:0;min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;font-family:inherit}
.task .wait{color:var(--info)}
.task-check{flex-direction:row!important;align-items:center;gap:10px!important;color:var(--ink)!important;font-size:14px!important;min-height:42px}
.task-check input{width:20px!important;height:20px;min-height:0!important;accent-color:var(--data);flex:none}
.photo-send{cursor:pointer}
.photo-send.is-busy{opacity:.6;pointer-events:none}
.task-sum:has(li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){
  .task-sum:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-photos img{width:80px;height:80px}
}
.pos-leaks{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pos-leaks li{background:var(--ground);border-radius:var(--radius-sm);padding:8px 10px}
.pos-leaks small{display:block;color:var(--muted);font-size:12.5px}

/* insights */
.insights{padding-bottom:96px}
.insights .crumb a{color:inherit}
.overline{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.insights-body{display:flex;flex-direction:column;gap:20px}
.insights .actions{display:flex;flex-wrap:wrap;gap:8px}
.insights .actions .btn{height:44px;text-decoration:none}
.insights .actions .btn.ghost{height:44px;padding:0 18px;font-size:14px}
.hero{display:flex;flex-wrap:wrap;gap:32px;align-items:center;padding:28px}
.hero-text{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.hero h2{font-size:28px;line-height:1.3;font-weight:700}
.hero p{font-size:15px;line-height:1.6;color:var(--muted)}
.hero .actions{margin-top:6px}
.proof{flex:1 1 260px;margin:0;display:flex;flex-direction:column;gap:10px}
.proof figcaption{font-size:13px;color:var(--muted)}
.proof-bars,.proof-axis{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px}
.proof-bars{height:170px;align-items:end;border-bottom:1px solid var(--border)}
.pb{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.pb span{font-size:12px;color:var(--muted)}
.pb i{display:block;width:100%;max-width:44px;background:var(--grid);border-radius:6px 6px 0 0}
.pb.hi span{color:var(--down);font-weight:700}
.pb.hi i{background:var(--down)}
.proof-axis{font-size:10.5px;color:var(--muted);text-align:center}
.proof-axis .hi{color:var(--ink);font-weight:700}
.proof.wide{flex:none;margin-top:14px}
.proof-bars.tall{height:210px}
.pb.top i{background:var(--data)}
.pb.top span{color:var(--ink);font-weight:700}
.pb span{display:flex;flex-direction:column;align-items:center;text-align:center}
.pb small{font-size:10.5px;font-weight:400;color:var(--muted)}
.levers{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.levers li{display:flex;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--border);font-size:15px}
.levers b{font-size:18px}
.levers .gain{color:var(--up)}
.levers .loss{color:var(--down)}
.levers li.total{border-bottom:0;font-weight:700}
.pairs{height:170px;margin-top:14px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;align-items:end;border-bottom:1px solid var(--border)}
.pairs div{height:100%;display:flex;justify-content:center;align-items:flex-end;gap:3px}
.pairs i{display:block;flex:1;max-width:18px;min-height:2px;background:var(--data);border-radius:4px 4px 0 0}
.pairs i.before{background:var(--grid)}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--data);margin-inline:10px 6px;vertical-align:middle}
.key.before{background:var(--grid);margin-inline-start:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.tile{display:flex;flex-direction:column;gap:12px;min-height:190px;padding:20px;color:var(--ink);text-decoration:none}
a.tile:hover{border-color:var(--muted)}
.tile-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.tile-title{font-size:15px;font-weight:600}
.tile-value{font-size:26px;font-weight:700;margin-top:auto}
.tile.off .badge{background:var(--grid);color:var(--muted);box-shadow:none}
.soon{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:1px 10px}
.badge.soft{background:var(--ground);color:var(--muted);box-shadow:none}
.finding{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;padding:28px}
.finding>div{flex:999 1 360px;min-width:0;display:flex;flex-direction:column;gap:8px}
.finding .big{font-size:52px;line-height:1.1;font-weight:700}
.finding .lead{font-size:17px}
.facts{flex:1 1 280px;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.facts div{background:var(--ground);border-radius:var(--radius-sm);padding:12px 14px}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:0;font-size:22px;font-weight:700}
.facts dd small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.pair{display:flex;flex-wrap:wrap;gap:20px}
.pair>.card{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.pair>.card:last-child{flex:2 1 460px}
.kinds{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.kinds li{display:flex;flex-direction:column;gap:6px}
.k-row{display:flex;justify-content:space-between;gap:8px}
.k-row small{color:var(--muted);font-size:12.5px}
.kinds li.hi .k-row{font-weight:600}
.k-bar{height:10px;border-radius:999px;background:var(--grid);overflow:hidden}
.k-bar i{display:block;height:100%;border-radius:999px;background:var(--muted)}
.kinds li.hi .k-bar i{background:var(--dark)}
.days-chart{position:relative;height:220px;margin-top:14px}
.days-area{position:absolute;inset:22px 0 0;border-bottom:1px solid var(--border)}
.days-bars{height:100%;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;align-items:end}
.days-bars i{display:block;background:var(--data);border-radius:3px 3px 0 0}
.days-bars i.odd{background:var(--down)}
.typical{position:absolute;inset-inline:0;border-top:1.5px dashed var(--ink);opacity:.7;pointer-events:none}
.odd-label{position:absolute;inset-inline-end:0;top:0;font-size:12px;font-weight:700;color:var(--down)}
.days-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px}
.todo{display:flex;flex-direction:column;gap:12px}
.todo h2{font-size:15px;font-weight:600}
.todo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.step{display:flex;flex-direction:column;gap:12px;padding:20px}
.step-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.step h3{margin:0;font-size:17px;font-weight:700}
.step-head .sub{white-space:nowrap}
.step>p{line-height:1.6}
.step .actions{margin-top:auto}
.since{display:flex;gap:16px;align-items:center;border-style:dashed;box-shadow:none}
.since div{display:flex;flex-direction:column;gap:2px}
.ask-box{display:flex;flex-direction:column;gap:12px;padding:20px}
.ask-box label{font-size:15px;font-weight:600}
.ask-row{display:flex;flex-wrap:wrap;gap:8px}
.ask-row input{flex:999 1 260px;min-width:0;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.ask-row .btn{flex:1 0 auto;height:44px;justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:36px;padding:4px 14px;border-radius:999px;border:1px solid var(--border);background:var(--ground);cursor:pointer;font-size:13px;text-align:start}
.chip:hover{border-color:var(--muted)}
.dash{display:inline-block;width:18px;border-top:1.5px dashed var(--ink);vertical-align:middle;margin-inline-end:4px}
@media (max-width:520px){
  .hero,.finding{padding:20px}.hero h2{font-size:22px}.finding .big{font-size:40px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile{min-height:0;padding:14px;gap:8px}.tile-title{font-size:13.5px}.tile-value{font-size:22px}.tile .sub{font-size:12px}
}
/* Settings: a segmented choice, and the quiet way to the KitchenAlly team. */
.seg{display:inline-flex;gap:4px;margin-top:12px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--ground);flex-wrap:wrap}
.seg button{min-height:40px;padding:0 16px;border:0;border-radius:6px;background:none;color:var(--muted);font-weight:500;cursor:pointer}
.seg button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.quiet-link{margin-top:20px;font-size:13px;color:var(--muted)}
.quiet-link a{color:var(--muted)}
.task-form .full{grid-column:1 / -1}
.row-switch{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.length{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-top:8px;max-width:220px}
.length select{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;font-family:inherit}
.crumb a{color:var(--muted)}
.check{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px;margin-top:4px}
.check input{width:20px;height:20px;accent-color:var(--dark)}
#access-card h3{margin:16px 0 0;font-size:15px;font-weight:600}
/* The platform admin's list (I-013). */
.admin .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.admin .stats{margin-bottom:16px}
.admin .routines small+small{margin-top:2px}
.admin-cost{margin-inline-start:auto;font-weight:600;white-space:nowrap}
.admin-section-head{margin:4px 2px 10px}
.admin-section-head .sub{margin-top:2px}
.admin-restaurants>div{display:flex;flex-direction:column;gap:12px}
.admin-restaurant .fold-head>.dot{margin-top:6px}
.admin-restaurant .fold-head .flags{margin:6px 0 0}
.admin-restaurant .admin-cost{margin-top:1px}
.admin-meta{display:flex;flex-direction:column;gap:2px;color:var(--muted)}
.admin-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
@media (max-width:860px){.admin-blocks{grid-template-columns:minmax(0,1fr)}}
.admin-blocks h3{font-size:14px;font-weight:600;margin-bottom:8px}
.admin-blocks .parts{margin:0 0 12px}
.admin-blocks .parts small{display:block;color:var(--muted);font-size:12px}
.admin-steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-bottom:6px}
.admin-steps i{display:block;height:6px;border-radius:3px;background:var(--grid)}
.admin-steps .step-done{background:var(--data)}
.admin-steps .step-skipped{background:var(--warn)}
.admin-steps .step-waiting{background:var(--info)}
.admin-steps .step-now{background:var(--ink)}
.admin-chapters{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:ch}
.admin-chapters li{display:flex;justify-content:space-between;gap:8px;font-size:13px;counter-increment:ch}
.admin-chapters li span::before{content:counter(ch) ". ";color:var(--muted)}
.admin-chapters small{color:var(--muted);white-space:nowrap}
.admin-chapters .step-done small{color:var(--up)}
.admin-chapters .step-skipped small{color:var(--warn)}
.admin-chapters .step-waiting small{color:var(--info)}
.admin-chapters .step-now{font-weight:600}
.admin-chapters .step-now small{color:var(--ink)}
.admin-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.admin-nums>div{background:var(--ground);border-radius:var(--radius-sm);padding:8px 10px;display:flex;flex-direction:column}
.admin-nums b{font-size:18px;font-weight:700;line-height:1.3}
.admin-nums small{color:var(--muted);font-size:12px}
.admin-view{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.admin-view small{color:var(--muted)}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px}
#attention li{flex-wrap:wrap}
#attention li>div:first-child{flex:1 1 220px}
#attention li>.admin-actions{flex:0 0 auto}

/* The team looking at a restaurant on its owner's say (I-013): the same bar for the team and for the owner. */
.view-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:16px;background:var(--dark);color:var(--on-dark);text-decoration:none}
.view-bar span{flex:1;min-width:200px;font-size:14px;opacity:.85}
.view-bar .btn{background:transparent;color:var(--on-dark);border:1px solid var(--on-dark)}
.admin-inbox li{align-items:flex-start}
.admin-inbox .note{white-space:pre-wrap;margin:4px 0}
.admin-inbox li.done{opacity:.6}
.admin-requests .request-list{margin-top:6px;font-size:13px}
.admin-requests .request-list summary{cursor:pointer;color:var(--muted)}
.admin-requests .request-list ul{list-style:none;margin:6px 0 0;padding:0}
.admin-requests .request-list li{display:block;padding:6px 0;border-bottom:1px solid var(--border)}
.admin-requests .request-list li:last-child{border-bottom:0}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.flag{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);background:var(--grid);color:var(--ink);font-size:12px}
.flag-problem{color:var(--down)}
.improve h3{margin:18px 0 0;font-size:15px}
.improve .parts li{grid-template-columns:minmax(0,1fr) 110px}
.improve .parts small{display:block;color:var(--muted);font-size:12px}
.improve .parts .btn{margin-top:6px}

/* The work schedule's board: a week of days, each with its shifts and the people on them. Stacks on a phone. */
.rota-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rota-nav{display:flex;align-items:center;gap:8px}
.rota-nav b{font-size:15px;white-space:nowrap}
.rota-nav .btn.ghost{gap:4px;height:36px}
.rota-remove{border:0;background:none;padding:0;min-height:32px;font-size:12.5px;color:var(--down);cursor:pointer;text-align:start;text-decoration:underline}
.chip-x{border:0;background:none;padding:0 2px;min-width:24px;min-height:24px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.rota-add summary{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);cursor:pointer;min-height:32px;list-style:none}
.rota-add summary::-webkit-details-marker{display:none}
.rota-add summary .i{width:14px;height:14px}
.rota-add form{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rota-add label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.rota-add input,.rota-add select{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;background:var(--card);color:var(--ink);font-size:14px;width:100%;font-family:inherit}
.rota-empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:16px;border:1.5px dashed var(--border);border-radius:12px;background:var(--ground)}
.rota-empty>div{flex:1;min-width:200px}
.rota-empty small{display:block;color:var(--muted);font-size:13px}
.rota-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
/* A row of small day chips, א׳ to ש׳, for anything that repeats on some days of the week. */
.rota-days{border:0;padding:0;margin:0;min-width:0}
.rota-days legend{font-size:13px;color:var(--muted);padding:0;margin-bottom:6px}
.rota-days>div{display:flex;flex-wrap:wrap;gap:6px}
.day-pick{display:inline-flex;cursor:pointer}
.task-form label.day-pick{display:inline-flex;flex-direction:row}
.task-form .day-pick input{min-height:0;padding:0;border:0}
.day-pick input{position:absolute;opacity:0;width:1px;height:1px}
.day-pick span{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--muted);background:var(--card)}
.day-pick input:checked+span{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.day-pick input:focus-visible+span{outline:2px solid var(--data);outline-offset:2px}
.my-shifts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.my-shifts li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.my-shifts li:last-child{border-bottom:0}
.my-shifts b{min-width:88px}
@media (max-width:560px){.rota-nav{width:100%;justify-content:space-between}.rota-nav .wk{display:none}}

/* opening hours, in settings */
.hours{margin-bottom:16px}
.hours-week{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.hours-week li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.hours-week li:last-child{border-bottom:0}
.hours-week .wd{font-weight:600}
.hours-week .ranges{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hours-week .range{display:inline-flex;align-items:center;gap:6px}
.hours-week input[type="time"]{height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;background:var(--card);color:var(--ink);font-size:15px;font-family:inherit}
.hours-week .closed{color:var(--muted)}
.hours-week .btn.ghost{height:34px}
.hours-week .x{width:34px;padding:0;justify-content:center}
.hours-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:640px){.hours-week li{grid-template-columns:1fr;gap:6px}}
.seating .count{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.seating input[type="number"]{width:84px;height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;background:var(--card);color:var(--ink);font-size:15px;font-family:inherit;text-align:center}

/* the sources card: where information comes in, the same on every page */
.sources{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.source{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--ground);min-width:0}
.source-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.source-head b{display:block;font-size:15px}
.source-head small{color:var(--muted);font-size:12.5px}
.source p{margin:0;line-height:1.55;font-size:14px}
.source-chip{flex:none;font-size:12px;font-weight:600;border-radius:999px;padding:1px 10px;background:var(--card);color:var(--muted);border:1px solid var(--border)}
.source-chip.ok{background:var(--data-soft);color:var(--up);border-color:transparent}
.source-chip.late{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.source-chip.wait{background:var(--info-soft);color:var(--info);border-color:transparent}
.source-copy small{color:var(--muted);font-size:12.5px}
.source-copy div{display:flex;gap:8px;align-items:center;margin-top:4px}
.source-copy code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:12.5px}
.source-warn{color:var(--warn)}
.source-guide{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);padding:8px 12px;font-size:14px}
.source-guide summary{cursor:pointer;font-weight:600}
.source-guide ol{margin:8px 0 2px;padding-inline-start:20px;display:grid;gap:6px;line-height:1.55}
.source-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
/* The team's constraints and requests on the schedule board. */
.rota-constraints{margin-top:12px}
.rota-c-line{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--radius-sm);background:var(--info-soft)}
.rota-c-line>span{flex:1;min-width:220px}
.rota-c-line small{display:block;color:var(--muted);font-size:12.5px}
.rota-ask form{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.rota-ask label{min-width:120px}
.rota-requests{margin-top:12px;padding:10px 12px;border:1px solid var(--warn);border-radius:var(--radius-sm);background:var(--warn-soft)}
.rota-requests h3{margin:0;font-size:14px;font-weight:600}
.rota-requests .approvals li{border-color:var(--border)}
.rota-off{margin:0;font-size:12px;color:var(--warn)}
/* The agent's draft: its suggestions are dashed until the manager confirms or publishes. */
.rota-draft{margin-top:12px;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--card)}
.rota-draft>div{flex:1;min-width:220px}
.rota-draft small{display:block;color:var(--muted);font-size:12.5px}
.rota-draft ul{margin:6px 0 0;padding-inline-start:18px;font-size:13px;line-height:1.55}
.rota-draft .edit-actions{display:flex;flex-wrap:wrap;gap:8px}
.position-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
/* Positions are picked by tapping; common ones the restaurant doesn't use yet are dashed. */
.pick-field{border:0;padding:0;margin:0;min-width:0}
.pick-field legend{font-size:13px;color:var(--muted);padding:0;margin-bottom:2px}
.day-pick.suggested span{border-style:dashed}
.pick-new{display:inline-flex;gap:6px;align-items:center}
.pick-new input{width:120px;min-height:36px}
.position-bar{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.pos-tag{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--grid)}
.team-form .pick-field,.task-form .pick-field,.team-form>.wide{grid-column:1 / -1}
.team-form .pay-amount{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.team-form .pay-amount[hidden]{display:none}
.team-form .pay-amount input{width:110px;height:36px}
.need-picks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.task-form .need-pick{display:inline-flex;flex-direction:row;align-items:center;gap:6px;padding:3px 4px 3px 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--ink)}
.task-form .need-pick input{width:56px;min-height:32px;padding:2px 4px;text-align:center}
.need-pick.on{background:var(--data-soft);border-color:var(--data)}
.rota-copy{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.rota-copy label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:190px}
.rota-copy select{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font:inherit;font-size:15px}
.rota-empty-copy{margin-top:10px;display:grid;gap:6px}
.rota-empty-copy small{color:var(--muted)}

/* Folding cards: the mobile rule for pages with many sections. Closed, the summary keeps a line of what matters. */
.fold>summary{list-style:none;cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.fold-head{display:flex;align-items:flex-start;gap:10px;min-height:44px}
.fold-head>div{flex:1;min-width:0}
.fold-sum{margin:2px 0 0;font-size:13px;color:var(--muted)}
.fold[open]>.fold-head .fold-sum{display:none}
.fold-chev{color:var(--muted);transition:transform .2s;margin-top:2px}
details[open]>summary .fold-chev{transform:rotate(180deg)}
.fold>summary~*{margin-top:12px}
.team-add{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.team-add>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px;font-weight:500;cursor:pointer;list-style:none}
.team-add>summary::-webkit-details-marker{display:none}
.dish-add{margin:0 0 14px;border-top:0;padding:6px 16px}
.dish-add[open]{padding-bottom:14px}
.dish-add .team-form{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}
@media (max-width:640px){.dish-add .team-form{grid-template-columns:1fr}}
.rota-draft:has(>.rota-fold){display:block}
.rota-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:32px}
.rota-fold>summary::-webkit-details-marker{display:none}
.rota-fold .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.rota-fold[open] .fold-sum{display:none}
.rota-fold .fold-sum{margin:0;font-size:12.5px}
.rota-fold-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:8px}
.rota-fold-body>div:first-child{flex:1;min-width:220px}
.split-line{display:flex;align-items:center;gap:10px;width:100%;padding-top:8px;border-top:1px solid var(--border)}
.split-line>span{flex:1;min-width:0}
.split-line b{font-size:13.5px;font-weight:600}
.pick-hint{display:flex;align-items:flex-start;gap:6px;width:100%;margin:4px 0 0;font-size:12.5px;color:var(--muted)}

/* Dish page: one colour per ingredient, kept on the cost bar, the list and the visualization. */
:root{--plate:#ffffff;--ing-1:#4f8f5b;--ing-2:#d08a3c;--ing-3:#7a6bb5;--ing-4:#c4605a;--ing-5:#3f87a6;--ing-6:#b5a03a;--ing-7:#a8668f;--ing-8:#6f8c8a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--plate:#d7dbe0;--ing-1:#7cc08a;--ing-2:#eab06a;--ing-3:#a99ae0;--ing-4:#e88d86;--ing-5:#72b6d4;--ing-6:#d8c463;--ing-7:#d293bb;--ing-8:#9bb8b5}}
:root[data-theme="dark"]{--plate:#d7dbe0;--ing-1:#7cc08a;--ing-2:#eab06a;--ing-3:#a99ae0;--ing-4:#e88d86;--ing-5:#72b6d4;--ing-6:#d8c463;--ing-7:#d293bb;--ing-8:#9bb8b5}
.tone-1{background:var(--ing-1)}.tone-2{background:var(--ing-2)}.tone-3{background:var(--ing-3)}.tone-4{background:var(--ing-4)}
.tone-5{background:var(--ing-5)}.tone-6{background:var(--ing-6)}.tone-7{background:var(--ing-7)}.tone-8{background:var(--ing-8)}
.push{margin-inline-start:auto}
.crumb a{color:inherit}
.dish-page{display:flex;flex-direction:column;gap:16px}
.cost-bar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--grid)}
.cost-bar i{display:block;min-width:4px}
.ings{list-style:none;margin:8px 0 0;padding:0}
.ing{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.ing:last-child{border-bottom:0}
.ing small,.ing-cost small{display:block;color:var(--muted);font-size:12.5px}
.ing .dot{width:12px;height:12px;border-radius:50%}
.ing .dot.none{background:none;border:1.5px dashed var(--muted)}
.ing-cost{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dish-split{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.dish-split li{display:flex;justify-content:space-between;gap:8px}
.dish-split li span:first-child{color:var(--muted)}
.rises{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.rises li{display:flex;gap:6px;align-items:flex-start;color:var(--warn)}
.pop{display:flex;flex-direction:column;gap:6px}
.pop-class{align-self:flex-start;font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 12px;background:var(--grid)}
.pop-class.star{background:var(--data-soft);color:var(--up)}
.pop-class.puzzle{background:var(--info-soft);color:var(--info)}
.pop-class.plowhorse,.pop-class.dog{background:var(--warn-soft);color:var(--warn)}
.month-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:120px;margin-top:14px}
.mb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:12px}
.mb i{display:block;width:100%;max-width:36px;background:var(--data);border-radius:4px 4px 0 0}
.mb small{color:var(--muted)}
.mb.none span{color:var(--muted)}
.dish-edit{display:flex;flex-direction:column;gap:14px}
.dish-edit input{height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--card);color:var(--ink);font-size:15px;width:100%;min-width:0}
.edit-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px}
.edit-top label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
@media (max-width:560px){.edit-top{grid-template-columns:1fr}}
.ing-edit{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px 32px;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--border)}
.ing-edit>b{align-self:center}
.ing-edit label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.ing-edit .chip-x{height:40px}
@media (max-width:560px){.ing-edit{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px}.ing-edit>b{grid-column:1/-1}}
.add-ing{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--ground)}
.pick-chip{min-height:36px;padding:4px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:4px}
.pick-chip[aria-pressed="true"]{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.add-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.add-row>span{font-weight:600}
.add-row #ed-qty{width:96px}
.edit-actions{display:flex;gap:8px}
.edit-msg{font-size:13px;color:var(--warn);min-height:1em}
.notice-soft{background:var(--info-soft);color:var(--info);box-shadow:none;border:0;display:flex;gap:8px;align-items:center;margin-bottom:10px}
.tags-view{display:flex;flex-direction:column;gap:8px}
.tags-label{font-size:12.5px;color:var(--muted);font-weight:600}
.tag-chip{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:999px;font-size:13px;font-weight:500;background:var(--grid)}
.tag-chip.warn{background:var(--warn-soft);color:var(--warn)}
.tag-chip.ok{background:var(--data-soft);color:var(--up)}
.tag-chip.info{background:var(--info-soft);color:var(--info)}
.note-field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.dish-edit textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%;font-family:inherit;resize:vertical}
.blurb{margin:0;padding:12px 16px;border-inline-start:3px solid var(--data);background:var(--ground);border-radius:var(--radius-sm);font-size:15px;line-height:1.7}
.blurb+.edit-actions{margin-top:10px}
.history{list-style:none;margin:0;padding:0}
.history li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--border)}
.history li:last-child{border-bottom:0}
.ann-off{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.ann-off b{color:var(--ink);font-weight:600}
.history small{color:var(--muted);font-size:12.5px}
/* The exploding dish, full screen over the page */
.viz-btn{align-self:flex-start;margin-top:12px}
body.viz-open{overflow:hidden}
.viz{position:fixed;inset:0;z-index:50;background:var(--ground);display:flex;flex-direction:column;padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));gap:10px}
.viz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.viz-top b{display:block;font-size:18px}
.viz-top small{color:var(--muted);font-size:13px}
.viz-main{flex:1;min-height:0;display:flex;gap:10px;background:linear-gradient(var(--sky-top),var(--sky-bottom));border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.viz-stage{position:relative;flex:1;min-width:0}
.viz-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.viz-labs{position:absolute;inset:0;pointer-events:none;overflow:hidden;direction:ltr}
.viz-lab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13px;white-space:nowrap;direction:rtl;transition:opacity .2s}
.viz-lab .dot{width:10px;height:10px;border-radius:50%}
.viz-lab .dot.none{background:none;border:1.5px dashed var(--muted)}
.viz-rail-wrap{display:flex;padding:24px 10px}
.viz-rail{position:relative;width:44px;cursor:ns-resize;touch-action:none}
.viz-rail::before{content:"";position:absolute;inset-block:0;left:50%;width:6px;margin-left:-3px;border-radius:3px;background:var(--grid)}
.viz-fill{position:absolute;top:0;left:50%;width:6px;margin-left:-3px;border-radius:3px;background:var(--data)}
.viz-knob{position:absolute;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--card);border:2px solid var(--data);box-shadow:var(--shadow)}
.viz-insight{font-size:14px;text-align:center}
.viz-fallback{position:absolute;inset:auto 16px 16px;text-align:center;color:var(--muted)}

/* company site (mimonatech.com) */
.site-body{background:var(--card)}
.site-body a{color:inherit}
.site-wrap{max-width:960px;margin:0 auto;padding-inline:16px}
.site-bar{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.site-bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.site-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none}
.site-mark{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--dark);color:var(--on-dark);display:grid;place-items:center;font-weight:800;font-size:17px}
.site-nav{display:flex;gap:20px;font-size:14px}
.site-nav a{text-decoration:none;color:var(--muted)}
.site-nav a:hover{color:var(--ink)}
.site-hero{display:flex;flex-direction:column;gap:14px;padding-top:72px;padding-bottom:56px}
.site-hero h1{font-size:clamp(30px,6vw,48px);font-weight:800;line-height:1.15;letter-spacing:-.01em;max-width:22ch}
.site-hero-small{padding-top:56px;padding-bottom:24px}
.site-hero-small h1{font-size:32px}
.site-eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right}
.site-lead{font-size:18px;line-height:1.6;max-width:60ch}
.site-en{color:var(--muted);font-size:16px;text-align:left;align-self:flex-end}
.site-section{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:20px}
.site-section h2{font-size:20px;font-weight:700}
.site-projects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:760px){.site-projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
.site-project{height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--ground);text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.site-project:hover{border-color:var(--muted);box-shadow:var(--shadow)}
.site-icon{width:48px;height:48px;border-radius:12px;background:var(--dark);color:var(--on-dark);display:grid;place-items:center;font-weight:800;font-size:22px}
.site-project-name{font-size:17px;font-weight:700}
.site-domain{font-size:13px;color:var(--muted);margin-top:auto}
.site-soon{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:1px 10px;margin-top:auto;background:var(--card)}
.site-facts{margin:0;display:flex;flex-direction:column;max-width:640px}
.site-facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.site-facts dt{color:var(--muted)}
.site-facts dd{margin:0;font-weight:500}
.site-doc{display:flex;flex-direction:column;gap:16px;padding-bottom:48px;max-width:760px}
.site-doc .head{padding-top:40px;display:flex;flex-direction:column;gap:4px}
.site-doc .head h1{font-size:28px}
.site-doc .card{background:var(--ground);box-shadow:none}
.site-doc .site-lead a{color:var(--info)}
.site-foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;font-size:13px;color:var(--muted);padding-top:20px;padding-bottom:32px;border-top:1px solid var(--border)}
.site-foot a{color:var(--muted)}

/* Dishes not yet in the menu ranking: a count, the few worth filling first, the rest folded. */
.menu-missing{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:16px}
.missing-group{display:flex;flex-direction:column;gap:6px}
.missing-group .btn{text-decoration:none;width:fit-content;margin-top:4px}
.first-few{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.first-few li{min-height:32px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--grid)}
.menu-missing a:not(.btn){color:var(--ink)}
.all-list summary{list-style:none;gap:4px;cursor:pointer;font-size:13px;color:var(--muted);min-height:32px;display:flex;align-items:center}
.all-list ul{list-style:none;margin:4px 0 0;padding:0;columns:160px;column-gap:20px;font-size:13px}
.all-list li{break-inside:avoid;min-height:32px;display:flex;align-items:center}
.all-list summary::-webkit-details-marker{display:none}
/* The files page: one row per file, a small preview, and what can be done with it. */
.docs{list-style:none;margin:0;padding:0}
.doc{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.doc:first-child{border-top:0}
.doc-thumb{width:56px;height:56px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--ground);overflow:hidden;display:grid;place-items:center;text-decoration:none}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-pdf{font-size:12px;font-weight:700;color:var(--muted)}
.doc-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-body b{font-weight:600;overflow-wrap:anywhere}
.doc-body small{color:var(--muted);font-size:12.5px}
.doc-body small.doc-private{color:var(--info)}
.doc-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){
  .doc{grid-template-columns:56px minmax(0,1fr)}
  .doc-actions{grid-column:1/-1;justify-content:flex-start}
}
.docs-full{background:var(--warn-soft);color:var(--warn);border:0;box-shadow:none;margin-bottom:16px}
.docs-empty .source-actions{margin-top:12px}
.docs-filter{display:flex;width:fit-content;max-width:100%;margin:0 0 16px}
/* A note's checks: the photo beside them, each question with its taps and a line to answer in words. */
.note-checks{margin-bottom:16px}
.note-check{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;margin-top:8px}
.note-check:not(:has(.doc-thumb)){grid-template-columns:minmax(0,1fr)}
.note-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.note-check-list p{margin:0 0 6px}
.note-check-list .chips{margin-bottom:6px}
.note-check-list .chips:empty{display:none}
.note-check-list .matter-answer{display:flex;gap:8px}
.note-check-list .matter-answer input{flex:1;min-width:0}
.note-checks .source-actions{margin-top:12px}

/* The work schedule board: people down the side, days across (wide screens), or one day as circles (phones). */
.pos-0{--c:var(--pos-0)}.pos-1{--c:var(--pos-1)}.pos-2{--c:var(--pos-2)}.pos-3{--c:var(--pos-3)}.pos-4{--c:var(--pos-4)}.pos-5{--c:var(--pos-5)}.pos-6{--c:var(--pos-6)}
.rota-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 10px;font-size:13px;color:var(--muted)}
.rota-legend i,.rg-who .dot,.open-pos i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-inline-end:5px;vertical-align:middle}
.rota-dayview{display:none}
.rg{display:grid;grid-template-columns:minmax(120px,170px) repeat(7,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.rg>div{min-width:0;padding:8px;border-bottom:1px solid var(--border);border-inline-start:1px solid var(--grid)}
.rg-corner,.rg-day{background:var(--ground)}
.rg-corner b,.rg-dh b{display:block;font-size:13.5px}
.rg-corner small,.rg-who small{display:block;font-size:12px;color:var(--muted)}
.rg-dh{display:flex;align-items:center;gap:4px}
.rg-dh b{flex:1}
.rg-day.today,.rg-cell.today{background:color-mix(in srgb,var(--data) 7%,var(--card))}
.rg-cov{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--data);font-weight:600}
.rg-cov.short{color:var(--warn)}.rg-cov.none{color:var(--muted);font-weight:400}
.rg-cov .bar{flex:1;height:5px;border-radius:9px;background:var(--grid);overflow:hidden}
.rg-cov .bar span{display:block;height:100%;background:currentColor}
.rg-menu{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;min-width:32px;min-height:32px;border-radius:var(--radius-sm);cursor:pointer}
.rg-menu:hover{background:var(--grid)}
.rg-open-l{background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:13px}
.rg-open{background:var(--warn-soft);display:flex;flex-direction:column;gap:4px}
.open-shift{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.open-shift small{font-size:12px;color:var(--ink)}
.open-pos{border:0;background:none;padding:2px 4px;border-radius:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;min-height:28px}
.open-pos:hover{background:var(--card)}
.rg-who b{display:flex;align-items:center;font-size:13.5px}
.rg-who.left b{color:var(--muted);text-decoration:line-through}
.rg-cell{display:flex;flex-direction:column;gap:4px;position:relative}
.rchip{display:block;width:100%;text-align:start;border:0;border-inline-start:4px solid var(--c);border-radius:var(--radius-sm);padding:5px 8px;background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--ink);font:inherit;cursor:pointer;line-height:1.3}
.rchip b{display:block;font-size:12.5px}
.rchip bdi{font-size:11.5px;color:var(--muted)}
.rchip.sug{background:var(--card);outline:1.5px dashed var(--c);outline-offset:-1.5px}
.rchip.warn{box-shadow:inset 0 0 0 1.5px var(--warn)}
.rg-off{font-size:12px;color:var(--warn)}
.rg-add{border:1px dashed var(--border);background:none;color:var(--muted);border-radius:var(--radius-sm);min-height:30px;font-size:16px;cursor:pointer;opacity:0;transition:opacity .15s}
.rg-cell:hover .rg-add,.rg-add:focus-visible{opacity:1}
@media (hover:none){.rg-add{opacity:.6}}
.rg-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.rg-key span{display:inline-flex;align-items:center;gap:6px}
.rg-key .k{display:inline-block;width:24px;height:14px;border-radius:4px;--c:var(--pos-1)}
.rg-key .k.on{background:color-mix(in srgb,var(--c) 14%,var(--card));border-inline-start:4px solid var(--c)}
.rg-key .k.sug{outline:1.5px dashed var(--c);outline-offset:-1.5px}
.rg-key .k.warn{box-shadow:inset 0 0 0 1.5px var(--warn)}
.long{font-size:11.5px;font-weight:600;color:var(--warn);margin-inline-start:6px}
/* Phones and narrow screens: a strip of days and one day's shifts. */
@media (max-width:760px){.rota-grid{display:none}.rota-dayview{display:block}}
.day-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:10px}
.ds{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:12px;padding:6px 0 7px;font:inherit;font-size:12px;cursor:pointer;min-height:56px}
.ds b{display:block;font-size:15px;color:var(--ink)}
.ds i{display:block;width:7px;height:7px;border-radius:50%;margin:4px auto 0}
.ds.short i{background:var(--warn)}.ds.full i{background:var(--data)}
.ds.on{background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
.ds.on b{color:var(--on-dark)}
.rota-dayview .rota-off{margin:0 0 10px;font-size:13px}
.slot-card{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:10px 12px 12px;margin-bottom:10px}
.slot-card header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.slot-card header b{font-size:15px}
.slot-card header bdi{color:var(--muted);font-size:13px}
.slot-card .grow{flex:1}
.cnt{font-size:13px;font-weight:600;color:var(--data)}.cnt.short{color:var(--warn)}
.slots{display:flex;flex-wrap:wrap;gap:10px 6px}
.slot{width:60px;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-align:center}
.slot .av,.pick .av{width:44px;height:44px;border-radius:50%;margin:0 auto 3px;display:grid;place-items:center;font-weight:600;font-size:14px;color:#fff;background:var(--c);position:relative}
.slot .nm{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.sug .av{background:var(--card);color:var(--ink);border:2px dashed var(--c)}
.slot.left .av{background:var(--grid);color:var(--muted)}
.slot.empty .av{background:color-mix(in srgb,var(--c) 10%,var(--card));border:2px dashed var(--c);color:var(--c);font-size:20px;font-weight:400}
.slot.empty .nm{color:var(--c);font-weight:600}
.slot.warn .av::after{content:"!";position:absolute;top:-3px;inset-inline-end:-3px;width:16px;height:16px;border-radius:50%;background:var(--warn);color:var(--card);font-size:11px;display:grid;place-items:center}
.slot:disabled{cursor:default}
.day-more{width:100%;justify-content:center}
@media (max-width:760px){.rota-actions{position:sticky;bottom:0;z-index:3;background:var(--card);margin-inline:-18px;padding:10px 18px;box-shadow:0 -4px 12px rgba(0,0,0,.06)}}
/* The tap window: next to what was tapped on wide screens, a sheet from the bottom on phones. */
.rota-pop[hidden]{display:none}
.pop-shade{position:fixed;inset:0;z-index:40}
.pop-sheet{position:fixed;z-index:41;background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px 14px 14px;max-height:min(70vh,520px);overflow:auto}
.pop-sheet header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pop-sheet header b{flex:1;font-size:15px}
.pop-x{border:0;background:none;color:var(--muted);font-size:20px;min-width:36px;min-height:36px;cursor:pointer;border-radius:var(--radius-sm)}
.pop-sub{margin:0 0 8px;font-size:13px;color:var(--muted)}
.pop-msg{margin:0 0 10px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--warn-soft);color:var(--warn);font-size:14px}
.pop-note{margin:0 0 8px;font-size:13px}
.pop-warn{margin:0 0 8px;font-size:13px;color:var(--warn)}
.picks{display:flex;flex-direction:column;gap:4px}
.pick{display:flex;align-items:center;gap:10px;width:100%;text-align:start;border:0;background:none;padding:6px;border-radius:10px;font:inherit;color:var(--ink);cursor:pointer;min-height:48px}
.pick:hover,.pick:focus-visible{background:var(--grid)}
.pick .av{width:36px;height:36px;margin:0;font-size:13px;flex:none}
.pick .av .i{width:16px;height:16px}
.pick b{display:block;font-size:14px;font-weight:500}
.pick small{display:block;font-size:12px;color:var(--muted)}
.pick.warn small{color:var(--warn)}
.pop-more{margin-top:8px}
.pop-more summary{cursor:pointer;font-size:13px;color:var(--muted);min-height:32px}
.pop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btn.danger{color:var(--down)}
.ask{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow);padding:20px;width:min(380px,calc(100vw - 32px));font-family:var(--font)}
.ask::backdrop{background:var(--shade)}
.ask p{margin:0 0 18px;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.ask-acts{display:flex;gap:8px}
.ask-acts .btn{flex:1;justify-content:center}
.ask.consent{width:min(440px,calc(100vw - 32px))}
.ask.consent h2{margin:0 0 10px;font-size:18px}
.ask.consent a{color:var(--accent)}
.consent-points{margin:0 0 18px;padding-inline-start:20px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.privacy-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.privacy-row b{font-size:14.5px}
details.privacy-row summary{display:flex;align-items:baseline;justify-content:space-between;gap:8px;cursor:pointer}
#report-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
#report-form textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;resize:vertical}
.erase-row{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.btn.danger-fill{background:var(--down);border-color:var(--down);color:var(--card)}
.pop-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;margin:4px 0 8px}
.pop-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.pop-form input{min-height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;width:100%}
.pop-form .btn{grid-column:1 / -1}
@media (max-width:560px){
  .pop-shade{background:rgba(0,0,0,.35)}
  .pop-sheet{inset-inline:0;bottom:0;top:auto!important;left:0!important;width:auto!important;border-radius:16px 16px 0 0;max-height:80vh;padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
.area-view .fold>summary~*{margin-top:0}
body:has(#area:not([hidden])) .chapter-help{display:none}

/* The recipe deck (I-016): one card per dish, sized for a thumb on a phone. */
.deck-page{max-width:560px;padding-bottom:120px}
.deck-meter{display:flex;flex-direction:column;gap:8px}
.deck-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.deck-bar{height:8px;background:var(--grid);border-radius:999px;overflow:hidden}
.deck-bar i{display:block;height:100%;background:var(--data);border-radius:999px}
.deck-working{display:grid;gap:6px;margin-bottom:12px}
.deck-working .deck-bar{position:relative}
.deck-working .deck-bar i{position:absolute;inset-block:0;width:35%;animation:deck-working 1.2s ease-in-out infinite}
@keyframes deck-working{from{inset-inline-start:-35%}to{inset-inline-start:100%}}
@media (prefers-reduced-motion:reduce){.deck-working .deck-bar i{animation:none;width:100%;opacity:.5}}
.deck-card{display:flex;flex-direction:column;gap:14px}
.deck-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.deck-head h2{font-size:22px}
.deck-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--grid);white-space:nowrap}
.deck-basis,.deck-asis{font-size:13px;color:var(--muted);background:var(--ground);border-radius:var(--radius-sm);padding:8px 10px}
.deck-lines,.deck-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.deck-line{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--grid)}
.deck-line-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.deck-line-top small{color:var(--muted);font-size:12px}
.deck-line .pick-chip{min-height:40px;font-size:14px}
.deck-actions{display:flex;flex-direction:column;gap:8px}
.deck-actions .btn{justify-content:center;min-height:48px}
.deck-yes{height:52px;font-size:16px}
.deck-row{display:flex;gap:8px}
.deck-row .btn{flex:1 1 0}
.deck-row .btn[aria-pressed="true"]{border-color:var(--dark)}
.deck-fix{display:flex;gap:8px;align-items:center;border:1px solid var(--dark);border-radius:var(--radius);padding:6px}
.deck-fix input{flex:1 1 auto;min-width:0;min-height:44px;border:0;outline:none;background:transparent;font-size:15px;padding:0 6px}
.deck-mic{width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:999px;background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.deck-mic[aria-pressed="true"]{background:var(--down-soft);border-color:var(--down);color:var(--down)}
.deck-wait{display:flex;align-items:center;gap:8px;color:var(--muted)}
.deck-msg{text-align:center}
/* The admin's judge page (I-018): findings with the lines that led to them, and the forms that sharpen the judge. */
.judge .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.judge .stats{grid-template-columns:minmax(0,1fr)}}
.judge-lines{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.judge-line{margin:0;padding:8px 12px;border-radius:var(--radius-sm);font-size:14px;line-height:1.6;white-space:pre-wrap;background:var(--ground);border:1px solid var(--border)}
.judge-line.judge-agent{background:var(--data-soft);border-color:transparent}
.judge-line small{display:block;color:var(--muted);font-size:12px}
.judge .parts small{display:block;color:var(--muted);font-size:12px}
.judge-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;width:100%}
.judge-form textarea,.judge-form input{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%;font-family:inherit;resize:vertical}
.judge-form .btn{width:fit-content}
.judge-case label small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}

/* Open matters (I-019): one list in the personal area, folded by whose move it is. */
.matters+.matters{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.matters h3{margin:0;font-size:15px}
.matter-answer{display:flex;gap:8px;flex-basis:100%}
.matter-answer input{flex:1;min-width:0;height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--card);color:var(--ink);font-size:16px}

/* What the agent knows: the line that says what each part holds, under the tabs. */
.part-sub{margin:0 0 12px}

/* Waste against what came in, on the notes and suppliers page. */
.waste-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px}
.waste-why{display:block;font-size:12px}
.waste-bar{display:block;max-width:120px;margin-top:6px}
.all-list.waste-recent ul{columns:auto;font-size:14px}
.all-list.waste-recent li{display:grid}
/* Stock by place: storerooms fold, shelves inside them, each item with its amount. */
.stock-items{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.stock-items>li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--grid)}
.stock-items>li:first-child{border-top:0}
.stock-items>li>span{flex:1;min-width:0}
.stock-items>li>small{color:var(--muted);font-size:12.5px}
.stock-items>li.out b{color:var(--warn)}
.stock-items>li.missing b{color:var(--warn);font-weight:500;font-size:13px}
.stock-rule{display:block;color:var(--muted);font-size:12.5px}
.stock-sub{margin:16px 0 0;font-size:15px}
.stock-spots{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.stock-spot{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--ground)}
.stock-spot .stock-spots{margin-inline-start:4px}
.stock-spot .stock-spot{background:var(--card)}
.stock-spot-head{display:flex;align-items:flex-start;gap:10px}
.stock-spot-head small{display:block;color:var(--muted);font-size:12.5px}
.stock-photo{flex:none;width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}
.stock-photo img{width:100%;height:100%;object-fit:cover;display:block}
.stock-place .source-actions{margin-top:14px}
.stock-photo{padding:0;background:var(--ground);cursor:pointer}
.stock-photo[aria-expanded="true"]{border-color:var(--info)}
.stock-board{margin:10px 0 0}
.stock-board-photo{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);line-height:0}
.stock-board-photo img{width:100%;max-height:70vh;object-fit:contain;display:block;background:var(--ground)}
.stock-pin{position:absolute;transform:translate(-50%,-50%);max-width:46%;padding:4px 10px;border-radius:999px;border:1.5px solid var(--on-dark);background:var(--dark);color:var(--on-dark);font:600 12.5px/1.3 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow);cursor:pointer}
.stock-pin.guess{border-style:dashed}
/* Near an edge the label grows inward, so its name stays on the photo. */
.stock-pin.edge-left{transform:translate(-12px,-50%)}
.stock-pin.edge-right{transform:translate(calc(-100% + 12px),-50%)}
.stock-pin:disabled{cursor:default;opacity:1}
.stock-pin.picked,.stock-unpinned .chip.picked{background:var(--info);border-color:var(--info);color:var(--on-data)}
.stock-board-help{margin:8px 0 0}
.stock-board-switch{align-items:center;margin:0 0 6px}
.stock-board-switch small{display:block;font-size:12.5px;color:var(--muted)}
.stock-board.bare .stock-pin{display:none}
.stock-pin{display:inline-flex;align-items:center;gap:6px;padding-inline-start:4px}
.stock-pin i,.stock-legend i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pin);color:var(--on-data);font:700 11px/1 var(--font);font-style:normal}
.stock-pin bdi{overflow:hidden;text-overflow:ellipsis}
.stock-legend{display:none;list-style:none;margin:10px 0 0;padding:0;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 10px}
.stock-legend button{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:36px;padding:6px 4px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:500 13px/1.35 var(--font);text-align:start;cursor:pointer}
.stock-legend small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.stock-legend button.open,.stock-legend button.picked{background:var(--info-soft)}
.stock-picked{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--info-soft);font-size:13px}
.stock-picked[hidden]{display:none}
/* On a phone there is no room for names on the photo: numbered dots in colour, a tap opens one, the legend says the rest. */
@media (max-width:560px){
  .stock-pin{padding:2px;border-width:2px;max-width:none;gap:0}
  .stock-pin i{width:22px;height:22px}
  .stock-pin bdi{display:none}
  .stock-pin.edge-left,.stock-pin.edge-right{transform:translate(-50%,-50%)}
  .stock-pin.open{z-index:2;gap:6px;padding:2px 10px 2px 2px;max-width:70%}
  .stock-pin.open bdi{display:inline;font-size:12.5px}
  .stock-pin.open.edge-left{transform:translate(-12px,-50%)}
  .stock-pin.open.edge-right{transform:translate(calc(-100% + 12px),-50%)}
  .stock-legend{display:grid}
  .stock-board.bare .stock-legend{display:none}
}
.stock-unpinned{margin-top:8px}
.stock-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.stock-notes>li{display:flex;flex-direction:column;gap:6px}
.info-map .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.info-map .stats{grid-template-columns:minmax(0,1fr)}}
.info-legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start;text-align:start;margin:12px 0}
.info-items{display:flex;flex-direction:column;gap:12px}
.info-items .info-item{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;text-align:start;gap:6px;padding:10px 0;border-bottom:1px solid var(--grid)}
.info-items .info-item:last-child{border-bottom:0}
.info-item small{display:block;color:var(--muted);font-size:12.5px}
.info-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag.info-ask{background:var(--data-soft)}
.info-none .info-filled{color:var(--warn);font-weight:600}
@media (min-width:900px){.info-items .info-item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.8fr);align-items:center}}
.info-name{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%}
.info-out b{color:var(--muted)}
.info-off{color:var(--muted)}
.tag.info-own{background:var(--info-soft)}
.info-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--grid)}
.info-add .sub{width:100%;margin:0}
.info-add input{flex:1 1 220px;min-height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--card);color:var(--ink);font:inherit}
.info-name .btn{white-space:nowrap;flex:none}

/* How the month's purchases were counted, on the money page (I-024). */
.purchase-list li.purchase-row{display:block;padding:4px 0}
.purchase-row .fold-head b.amount{white-space:nowrap;margin-inline-start:6px}
.purchase-docs,.purchase-checks{list-style:none;margin:8px 0 4px;padding:0}
.purchase-list .purchase-docs li,.purchase-list .purchase-checks li{display:block;padding:8px 0;border-bottom:0;border-top:1px solid var(--border);font-size:14px}
.purchase-docs li small{display:block;color:var(--muted);font-size:12.5px}
.kind-pick{margin-top:6px}
.kind-pick>summary{cursor:pointer;font-size:12.5px;color:var(--muted);min-height:32px;display:inline-flex;align-items:center}
.kind-pick .chips{margin-top:6px}
.kind-pick .chip[aria-pressed="true"]{background:var(--data-soft);border-color:var(--data);cursor:default}
/* The money rhythm (I-024): the bottom line, the supplier days, the ordering budget and what goes out next. */
.cash-reasons{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px;font-size:14.5px}
.cash-h{font-size:15px;margin:16px 0 4px}
.progress i.warn{background:var(--warn)}
.cash-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.cash-list li small{grid-column:1;color:var(--muted);font-size:12.5px}
.cash-list li .amount{grid-column:2;grid-row:1}
.cash-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:10px}
.cash-form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.cash-form input{height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%}
.cash-form .btn{align-self:end}

/* The studio (I-027): posts for Instagram. The title drawn on a photo uses its own tokens, the same in both themes,
   since the photo goes out to the world and not to this screen. */
:root{--studio-title:#ffffff;--studio-soft:rgba(255,255,255,.78);--studio-shade:rgba(12,12,12,.78);--studio-paper:#f7f2e8;--studio-ink:#1f1c18;--studio-muted:#7a7166;--studio-accent:#e2a248}
.studio-new .drop{flex-direction:column;gap:10px}
.studio-new .row-chips{margin-top:10px}
.studio-tones{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:10px}
.studio-tone{display:flex;flex-direction:column;gap:6px;text-align:start;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--ground);cursor:pointer;min-height:44px}
.studio-tone[aria-pressed="true"],.studio-option[aria-pressed="true"],.chip[aria-pressed="true"]{border-color:var(--data);background:var(--data-soft)}
.studio-tone b{font-size:13.5px}
.studio-tone span{font-size:13px;color:var(--muted)}
.studio-post{display:grid;gap:16px;grid-template-columns:minmax(0,320px) minmax(0,1fr)}
@media (max-width:760px){.studio-post{grid-template-columns:1fr}}
.studio-preview canvas{width:100%;height:auto;border-radius:var(--radius-sm);background:var(--grid);display:block}
.studio-strip{display:flex;gap:6px;margin-top:6px;overflow-x:auto}
.studio-strip img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.studio-options{display:flex;flex-direction:column;gap:8px}
.studio-option{display:flex;flex-direction:column;gap:4px;text-align:start;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--ground);cursor:pointer;white-space:pre-wrap}
.studio-option small{color:var(--muted);font-size:12px;font-weight:600}
.studio-field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.studio-field>span{font-size:13px;font-weight:600}
.studio-field textarea,.studio-field input,.studio-field select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.studio-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.studio-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.studio-acts .btn{height:44px}
.studio-nums{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.studio-nums b{color:var(--ink);font-size:15px}
.studio-lock{display:flex;gap:12px;align-items:flex-start}
#publishing.compact{padding:10px 14px}
.studio-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.studio-status .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.studio-status .btn{height:36px;padding:0 12px}
.studio-dot{width:8px;height:8px;border-radius:50%;background:var(--up);flex:none}
.studio-text{white-space:pre-wrap}
/* recruiting, on the team page (I-026) */
.recruit-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.recruit-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.recruit-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.recruit-top small{color:var(--muted)}
.recruit-tags{display:flex;flex-wrap:wrap;gap:6px}
.recruit-summary{margin:0;line-height:1.6}
.recruit-answers summary{cursor:pointer;color:var(--muted);font-size:13px}
.recruit-answers ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.recruit-answers li{display:flex;flex-direction:column;gap:2px}
.recruit-answers small{color:var(--muted)}
.recruit-empty{padding:12px 0}
.recruit-open,.recruit-ad{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.recruit-ad h3{margin:0}
.recruit-ad textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--card);color:var(--ink);font-size:15px;line-height:1.6;resize:vertical}
.recruit-ad .sub span{overflow-wrap:anywhere}
.recruit-form{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.recruit-criterion{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--border)}
.recruit-accept small{color:var(--muted);font-size:13px}
.recruit-accept[hidden]{display:none}
.recruit-questions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.recruit-questions input{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%}
.recruit-form .btn[type=submit]{align-self:flex-start}
/* the recruiting board (I-026 stage 2): columns side by side on a wide screen, folds on the phone */
.recruit-board{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.recruit-col{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;background:var(--ground)}
.recruit-col>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;min-height:36px}
.recruit-col>summary::-webkit-details-marker{display:none}
.recruit-count{min-width:24px;padding:0 8px;border-radius:999px;background:var(--card);border:1px solid var(--border);text-align:center;font-size:13px;color:var(--muted)}
.recruit-col.drop-here{outline:2px dashed var(--data);outline-offset:2px}
.recruit-declined{margin-top:10px}
.recruit-drop{padding:10px 0;text-align:center}
.recruit-card>details>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.recruit-card>details>summary::-webkit-details-marker{display:none}
.recruit-card.dragging{opacity:.5}
.recruit-card[draggable=true]{cursor:grab}
.recruit-more{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.recruit-moves small{color:var(--muted);font-size:13px;align-self:center}
.recruit-interview summary{cursor:pointer;color:var(--muted);font-size:14px}
.recruit-interview form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.recruit-slots{display:grid;grid-template-columns:1fr;gap:8px}
.recruit-slots input{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%}
.recruit-interview .btn[type=submit]{align-self:flex-start}
@media (min-width:900px){
  .recruit-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
  .recruit-board .recruit-col>summary{pointer-events:none}
  .recruit-slots{grid-template-columns:1fr 1fr}
}
/* learning paths (I-003) */
.learn-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.learn-hero h2{font-size:20px;font-weight:700;margin-top:2px}
.learn-points{text-align:center;flex:none;background:var(--data-soft);border-radius:var(--radius);padding:8px 14px}
.learn-points b{display:block;font-size:26px;font-weight:700;line-height:1.2;color:var(--up)}
.learn-points small{font-size:12px;color:var(--muted)}
.learn-chapters{display:flex;flex-direction:column;gap:12px}
.learn-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--grid);color:var(--ink);font-weight:600;font-size:13px}
.learn-num.done{background:var(--data);color:var(--on-data)}
.learn-lines{margin:0;padding:0 18px 0 0;display:flex;flex-direction:column;gap:6px}
.learn-qs{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.learn-q{padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--ground);display:flex;flex-direction:column;gap:10px}
.learn-q textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);resize:vertical}
.learn-prompt{font-weight:600}
.learn-said{white-space:pre-wrap;color:var(--muted)}
.learn-feedback{font-size:13px;min-height:1em;display:flex;align-items:center;gap:6px}
.pick-chip.right,.pick-chip.right[disabled]{background:var(--data-soft);border-color:var(--data);color:var(--ink);opacity:1}
.pick-chip.wrong{background:var(--down-soft);border-color:var(--down);text-decoration:line-through}
.pick-chip.hint{border-color:var(--data);box-shadow:0 0 0 3px var(--data-soft)}
.pick-chip[disabled]{cursor:default;opacity:.7}
.learn-facts{list-style:none;margin:10px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.learn-list{margin:6px 0 10px;padding:0 18px 0 0;display:flex;flex-direction:column;gap:8px}
.learn-list li span{display:block;color:var(--muted);white-space:pre-wrap}
.learner{padding:10px 0;border-bottom:1px solid var(--border)}
.learner h3{font-size:14px;font-weight:600;margin:0}
.learn-builder{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:18px}
.learn-builder h3{margin:0;font-size:15px}
.learn-group{display:flex;flex-direction:column;gap:8px}
.learn-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.learn-field input,.learn-field textarea,.learn-step input,.add-row input{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%}
.add-row input{flex:1;min-width:0;width:auto}
.learn-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.learn-step{display:grid;grid-template-columns:24px minmax(0,1fr) 130px 32px;gap:8px;align-items:end}
.learn-step>span{align-self:center;color:var(--muted);font-weight:600}
.learn-step label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
@media (max-width:560px){.learn-step{grid-template-columns:24px minmax(0,1fr) 32px}.learn-step label{grid-column:2}}
/* an applicant's own status page (I-026 stage 3) */
.status-page{max-width:560px}
.status-card{display:flex;flex-direction:column;gap:12px}
.status-card .btn{align-self:flex-start}
.status-title{margin:0;font-size:24px}
.status-when ol{margin:6px 0 0;padding-inline-start:20px}
.status-foot{font-size:13px}
.learn-sits{display:flex;flex-direction:column;gap:10px}
.learn-sit{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.learn-sit .chips{padding-inline-start:16px}
.pick-chip.small{min-height:32px;font-size:12.5px}
.learn-own-sit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.learn-own-sit input{min-height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--card);color:var(--ink);font-size:15px;width:100%}
.learn-own-sit #own-situation,.learn-own-sit .btn{grid-column:1 / -1}
@media (max-width:560px){.learn-own-sit{grid-template-columns:1fr}}

/* The legal documents (/legal): long English text, one card per section. */
.legal{max-width:820px}
.legal .card{display:flex;flex-direction:column;gap:10px}
.legal .head p{margin-top:6px}
.legal ul{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.legal .legal-list{gap:14px}
.legal-table{overflow-x:auto}
.legal table{border-collapse:collapse;width:100%;font-size:13px}
.legal th,.legal td{border:1px solid var(--border);padding:8px;text-align:start;vertical-align:top}
.legal th{background:var(--ground);font-weight:600}