/* Fonts — 25 §7, D-151: self-hosted, same-origin, vendored with their OFL text; only the weights in use;
     swap so text is readable before a file arrives; the system stacks below are the fallbacks. */
  @font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/instrument-serif/InstrumentSerif-Regular.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2') format('woff2')}
  :root{
    color-scheme: only light;   /* light only for launch (D-109); no dark tokens */
    /* Ledger palette — 25 §2 (D-94, D-150). Text tokens meet 4.5:1 on every ground 25 §6 permits;
       test/ledger.test.js recomputes that table from these values. --ink-soft is Ink, secondary;
       --ink-tertiary is for Paper and Card only, never a soft fill; --ink-quaternary carries no text. */
    --paper:#F4F2EB; --card:#FCFBF7;
    --ink:#16181A; --ink-soft:#43473F; --ink-tertiary:#6B6F66; --ink-quaternary:#7A7F75;
    --line:#DEDCD0; --line-soft:#DEDCD0;   /* Rule, hairline: decorative dividers, never the edge of a control */
    --control:#7A7F75;                     /* a control's border: Ink, quaternary, 3:1 or better either side (25 c5) */
    --green:#1B4D3A; --green-soft:#E4EBE5;
    --copper:#A0662B; --copper-text:#8B5A28; --copper-soft:#F4E9DA;
    --red:#93301F; --red-soft:#F2DEDA;
    --gray:#43473F;                        /* legacy name: Ink, secondary */
    /* type — 25 §3: display 22–54, body 12–15, figures 10–13 (px at 100%, set in rem) */
    --display:'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font:inherit;color:var(--ink);background:var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1D1B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center;border:1px solid var(--control);border-radius:3px;padding:7px 28px 7px 10px;cursor:pointer}
  select:hover{border-color:var(--ink)}
  select:focus-visible{outline:2px solid var(--green);outline-offset:1px}
  html{font-size:93.75%}   /* 15 px at the reader's default; rem everywhere below, so text resizes to 200% (25 §3, c10) */
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer}
  input,select,textarea{font-family:inherit;font-size:.92rem}

  header{border-bottom:2px solid var(--ink);background:var(--card)}
  .mast{max-width:1220px;margin:0 auto;padding:18px 24px 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
  .mast h1{font-family:var(--display);font-size:1.6rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.1}   /* the display role, 24 px (25 §3) */
  .mast .sub{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);letter-spacing:.05em;margin-top:2px}
  .est-switch{display:flex;align-items:center;gap:8px;margin-left:8px}
  
  .acct{margin-left:auto;display:flex;align-items:center;gap:10px}
  .acct .who{text-align:right}
  .acct .who .nm{font-size:.85rem;font-weight:700}
  .acct .who .em{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft)}
  .avatar{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center;font-weight:700}
  .sync-dot{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--ink-soft)}
  nav{max-width:1220px;margin:0 auto;padding:12px 24px 0;display:flex;gap:2px;overflow-x:auto}
  nav button{background:none;border:none;border-bottom:3px solid transparent;padding:8px 14px 10px;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);white-space:nowrap}
  nav button:hover{color:var(--ink)}
  nav button.on{color:var(--ink);border-bottom-color:var(--green)}
  nav button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

  main{max-width:1220px;margin:0 auto;padding:24px 24px 80px}
  .tab{display:none}.tab.on{display:block}

  .bintag{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);padding:2px 7px;border-radius:2px;background:var(--card)}
  /* 25 §4: a tag is not interactive, so no tag is green; attention tags are Copper, text on Copper, soft (c4); the class names stay for the markup */
  .bintag.green{border-color:var(--ink);color:var(--ink);background:var(--paper)}
  .bintag.copper{border-color:var(--copper);color:var(--copper-text);background:var(--copper-soft)}
  .bintag.red{border-color:var(--copper);color:var(--copper-text);background:var(--copper-soft)}
  .bintag.gray{border-color:var(--gray);color:var(--gray)}
  .inv-name-edit{cursor:pointer;border-bottom:1px dotted var(--gray)}
  .inv-name-edit:hover{border-bottom-color:var(--ink)}
  .inv-bit-tag{margin-left:6px;cursor:pointer;vertical-align:middle}
  h2{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:32px 0 12px}
  h2:first-child{margin-top:0}
  .card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:18px 20px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:880px){.grid2{grid-template-columns:1fr}}
  .mono{font-family:var(--mono)} .muted{color:var(--ink-soft)}
  .open-sheets-bar{display:flex;justify-content:flex-end;gap:10px;margin:0 0 10px}   /* E5-13: Open in Google Sheets, every data screen (08 §3) */
  .open-sheets{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);text-decoration:none;border:1px solid var(--green);padding:4px 9px;border-radius:2px;background:var(--card)} .open-sheets:hover{background:var(--green-soft)}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}   /* 25 §4 rule 3: a number is mono and right-aligned */
  .tabulator .tabulator-cell:focus,.tabulator .tabulator-cell.tabulator-editing{outline:2px solid var(--green);outline-offset:-2px}   /* E5-03, 08 c17: focus is always visible */
  .tabulator .tabulator-cell.bb-conflict{box-shadow:inset 0 0 0 2px var(--red)}   /* E5-23, 15 §6: the sheet changed under this cell; the words are the cell's title, the choice is the strip's card */
  .tabulator .tabulator-cell.bb-flag{box-shadow:inset 0 0 0 2px var(--copper)}   /* E5-08, 08 §5.5: a flagged value — attention, in copper; the words are the cell's title */
  .tabulator .bb-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}   /* the grid's numeric columns (E5-02) */

  .shelf{display:flex;height:54px;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--card)}
  .shelf>div{border-right:1.5px solid var(--ink);min-width:4px}
  .shelf>div:last-child{border-right:none}
  .shelf-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
  .shelf-legend span{font-family:var(--mono);font-size:.7rem;display:flex;align-items:center;gap:6px}
  .shelf-legend i{width:10px;height:10px;border:1px solid var(--ink);display:inline-block;border-radius:1px}

  .bars .row{display:grid;grid-template-columns:170px 1fr 92px 52px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:.84rem}
  .bars .row:last-child{border-bottom:none}
  .bars .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bars .tr{height:13px;background:var(--paper);border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .bars .fl{height:100%;background:var(--ink)}   /* a bar is a figure, not a control: ink (25 §4 rules 1 and 2) */
  .bars .v{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .bars .c{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.74rem}
  .clk{cursor:pointer}
  .stat.clk:hover{border-color:var(--green)}
  .shelf>div.clk:hover{filter:brightness(1.12)}
  .shelf-legend span.clk:hover{color:var(--green);text-decoration:underline}
  .bars .row.clk:hover{background:var(--green-soft)}
  #watchlist tbody tr{cursor:pointer}
  .bars .cat-top{cursor:pointer}
  .bars .cat-top:hover .nm{color:var(--green)}
  .bars .cat-top:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .bars .chev{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}
  .bars .cat-sub{background:var(--paper)}
  .bars .cat-sub .nm{padding-left:24px;font-size:.79rem;color:var(--ink-soft)}

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
  .stat .v{font-family:var(--mono);font-size:1.4rem;font-weight:600;text-align:right}
  .stat .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
  .stat.warn .l,.stat.bad .l{color:var(--copper-text)}   /* 25 §4 rule 2: the figure stays ink; the label word carries the attention (16 §8) */

  table{width:100%;border-collapse:collapse;font-size:.84rem}
  thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:7px 9px;border-bottom:2px solid var(--ink);white-space:nowrap;cursor:pointer;user-select:none}
  thead th.r{text-align:right}
  tbody td{padding:6px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top}
  tbody td.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  tbody tr:hover{background:var(--green-soft)}
  .cog-warn{font-weight:600} .cog-bad{font-weight:700}   /* figures are ink (25 §4 rule 2); the words carry the meaning (15 §21) */

  .controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;align-items:center}
  .controls input[type=text]{padding:8px 11px;border:1px solid var(--ink);border-radius:3px;background:var(--card)}
  .controls select{border-color:var(--ink)}
  .controls input[type=text]{min-width:220px;flex:1;max-width:380px}
  .btn{border:1.5px solid var(--ink);background:var(--card);border-radius:3px;padding:8px 14px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
  .btn:hover{background:var(--ink);color:var(--card)}
  .btn.primary{background:var(--green);border-color:var(--green);color:#fff}
  .btn.primary:hover{filter:brightness(.9)}
  .btn.danger{border-color:var(--red);color:var(--red)} .btn.danger:hover{background:var(--red);color:#fff}
  .btn.sm{padding:4px 9px;font-size:.66rem}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:1px}

  .cost-wrap{display:grid;grid-template-columns:280px 1fr;gap:18px}
  @media(max-width:900px){.cost-wrap{grid-template-columns:1fr}}
  .menubar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
  .menubar select{border-width:1.5px;border-color:var(--ink);font-weight:700}
  .drinklist .grp{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 6px;display:flex;justify-content:space-between}
  .drinklist .grp:first-of-type{margin-top:14px}
  .drink-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:3px;padding:9px 11px;margin-bottom:6px;font-size:.85rem}
  .drink-item:hover{border-color:var(--green)}
  .drink-item.sel{border:1.5px solid var(--green);background:var(--green-soft)}
  .drink-item.past{opacity:.65}
  .drink-item .pc{font-family:var(--mono);font-size:.72rem}
  .empty-note{font-size:.8rem;color:var(--ink-soft);font-style:italic;padding:4px 0 8px}

  .ed-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
  .ed-head input[name=dname]{font-size:1.12rem;font-weight:700;padding:8px 11px;border:none;border-bottom:2px solid var(--ink);background:transparent;flex:1;min-width:180px}
  .status-tg{display:flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
  .status-tg button{border:none;background:var(--card);padding:7px 12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
  .status-tg button.on-current{background:var(--green);color:#fff}
  .status-tg button.on-deck{background:var(--copper);color:#fff}
  .status-tg button.on-past{background:var(--gray);color:#fff}

  .ing-table th,.ing-table td{padding:6px 7px}
  .ing-table input[type=number]{width:74px;padding:5px 7px;border:1px solid var(--control);border-radius:3px;text-align:right;font-family:var(--mono)}
  .ing-table .del{border:none;background:none;color:var(--red);font-size:1rem;line-height:1;padding:2px 6px;cursor:pointer}
  .picker{position:relative}
  .picker input{width:100%;padding:7px 9px;border:1px solid var(--control);border-radius:3px}
  .pk-results{position:absolute;z-index:30;top:100%;left:0;right:0;background:var(--card);border:1.5px solid var(--ink);border-radius:0 0 4px 4px;max-height:260px;overflow:auto;box-shadow:0 6px 14px rgba(20,25,20,.14)}
  .pk-results button{display:block;width:100%;text-align:left;border:none;background:none;padding:7px 10px;font-size:.82rem;border-bottom:1px solid var(--line-soft)}
  .pk-results button:hover,.pk-results button.active{background:var(--green-soft)}
  .pk-results .src{font-family:var(--mono);font-size:.6rem;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}

  .math{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
  .price-in{display:flex;align-items:center;gap:6px}
  .price-in input{width:88px;padding:7px 9px;border:1.5px solid var(--ink);border-radius:3px;font-family:var(--mono);font-size:1.05rem;text-align:right}

  .help{font-size:.84rem;color:var(--ink-soft);max-width:66ch;margin-bottom:12px}
  .help code,li code{font-family:var(--mono);font-size:.76rem;background:var(--paper);border:1px solid var(--line);padding:1px 5px;border-radius:2px}
  ol.steps{margin:8px 0 14px 20px;font-size:.85rem} ol.steps li{margin-bottom:6px}
  ul.plain{margin:8px 0 14px 20px;font-size:.85rem} ul.plain li{margin-bottom:6px}
  .msg{font-family:var(--mono);font-size:.74rem;padding:9px 12px;border-radius:3px;margin-top:10px;display:none;white-space:pre-wrap}
  .msg.show{display:block}
  .msg.ok{background:var(--card);border:1px solid var(--ink);color:var(--ink)}   /* a message is not interactive: no green (25 §4 rule 1) */
  .msg.err{background:var(--red-soft);border:1px solid var(--red);color:var(--red)}
  .msg.info{background:var(--copper-soft);border:1px solid var(--copper);color:var(--copper-text)}

  .src-card{border:1px solid var(--line);border-radius:4px;padding:13px 15px;background:var(--card);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .src-card .nm{font-weight:700;font-size:.9rem}
  .src-card .meta{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);width:100%}
  .drop{border:2px dashed var(--line);border-radius:4px;padding:26px;text-align:center;color:var(--ink-soft);font-size:.85rem;margin-top:8px}
  .drop.over{border-color:var(--green);background:var(--green-soft)}

  /* mapping editor modal */
  .modal-bg{position:fixed;inset:0;background:rgba(24,28,24,.5);display:none;align-items:flex-start;justify-content:center;z-index:90;overflow:auto;padding:30px 14px}
  .modal-bg.show{display:flex}
  .modal{background:var(--card);border:2px solid var(--ink);border-radius:5px;max-width:880px;width:100%;padding:22px 24px}
  .map-tab{border:1px solid var(--line);border-radius:4px;padding:13px 15px;margin-bottom:12px}
  .map-tab .head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
  .map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:8px}
  .map-grid label{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:3px}
  .map-grid select{width:100%;padding:5px 7px;border:1px solid var(--control);border-radius:3px}
  .preview{overflow-x:auto;margin-top:10px;border:1px solid var(--line-soft);border-radius:3px}
  .preview table{font-size:.74rem}
  .preview td,.preview th{padding:4px 7px;white-space:nowrap}

  details{margin-top:8px}
  summary{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--ink-soft)}
  footer{max-width:1220px;margin:0 auto;padding:0 24px 40px;font-family:var(--mono);font-size:.66rem;color:var(--ink-soft)}
  /* custom number steppers — native spin buttons are tiny and ugly */
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield;appearance:textfield}
  .step{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--card)}
  .step button{border:none;background:var(--card);width:32px;font-size:1.05rem;font-family:var(--mono);color:var(--ink);padding:0;line-height:1;display:flex;align-items:center;justify-content:center;user-select:none}
  .step button:hover{background:var(--ink);color:var(--card)}
  .step button:active{background:var(--green);color:#fff}
  .step input{border:none !important;width:64px;text-align:right;padding:8px 4px;font-family:var(--mono);font-size:.95rem;background:transparent;border-radius:0 !important}
  .step input:focus{outline:none}
  .step:focus-within{outline:2px solid var(--green);outline-offset:1px}
  .step.sm button{width:26px;font-size:.95rem}
  .step.sm input{width:52px;padding:5px 3px;font-size:.85rem}
  #ws-table th:first-child,#ws-table td:first-child{width:1%;white-space:nowrap}
  #ws-table td:nth-child(2){width:32%;min-width:180px}
  #ws-table select{padding:5px 26px 5px 8px;font-size:.78rem}
  .map-tab select{padding:4px 24px 4px 6px;font-size:.74rem}
  .ws-open{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
  .ws-open:hover{color:var(--green);text-decoration:underline}
  .ws-mv{border:1px solid var(--control);background:var(--card);border-radius:3px;width:24px;height:22px;padding:0;font-size:.6rem;color:var(--ink-soft);line-height:1}
  .ws-mv:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
  .ws-mv:disabled{opacity:.3;cursor:default}
  .vtab{background:none;border:none;border-bottom:3px solid transparent;padding:7px 13px 9px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
  .vtab:hover{color:var(--ink)} .vtab.on{color:var(--ink);border-bottom-color:var(--green)}
  .vtab:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .menu-card{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:10px 14px;min-width:150px;cursor:pointer}
  .menu-card:hover{border-color:var(--green)}
  .menu-card.sel{border:1.5px solid var(--green);background:var(--green-soft)}
  .menu-card .mn{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
  .menu-card .mv{font-family:var(--mono);font-size:1.25rem;font-weight:600}
  .menu-card .ml{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
  .ob-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;font-size:.88rem;line-height:1.5}
  .ob-n{flex:0 0 28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;background:var(--card);color:var(--ink);border-color:var(--ink)}
  .lc{font-size:.76rem;display:flex;align-items:center;gap:5px}
  .list-doc{background:#fff;border:1px solid var(--line);border-radius:3px;max-width:760px;margin:0 auto;padding:52px 58px;color:#181a18}
  .list-doc h1{text-align:center;font-size:1.15rem;letter-spacing:.34em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
  .list-doc .ld-date{text-align:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#777;margin-bottom:8px}
  .ld-tab{margin-top:36px}
  .ld-tab>h2{font-size:.92rem;letter-spacing:.26em;color:#181a18;border-bottom:2px solid #181a18;padding-bottom:6px;margin:0 0 14px}
  .ld-top{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin:18px 0 8px}
  .ld-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#666;margin:10px 0 6px}
  .ld-row{display:flex;align-items:baseline;gap:6px;padding:2.5px 0;font-size:.9rem}
  .ld-bin{font-family:var(--mono);font-size:.7rem;color:#888;min-width:34px}
  .ld-vint{font-family:var(--mono);font-size:.8rem;color:#444}
  .ld-reg{font-size:.74rem;color:#777;font-style:italic}
  .ld-dots{flex:1;border-bottom:1px dotted #aaa;transform:translateY(-4px);min-width:18px}
  .ld-price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.88rem}
  .ld-note{font-family:var(--mono);font-size:.62rem;color:#888;margin:2px 0 8px}
  /* ---------- craft layer: rhythm, motion, finish ---------- */
  ::selection{background:var(--green-soft)}
  html{background:var(--paper);scrollbar-color:var(--line) transparent;min-height:100%}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid var(--paper)}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-quaternary)}
  ::-webkit-scrollbar-track{background:transparent}
  .card,button,select,input,.stat,.drink-item,.bintag{transition:border-color .13s ease,background-color .13s ease,color .13s ease,box-shadow .13s ease,transform .13s ease}
  .stat.clk:hover{border-color:var(--green)}
  .tab.on{animation:tabin .16s ease}
  @keyframes tabin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
  nav button{position:relative}
  nav button::after{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
  nav button.on::after{transform:scaleX(1)}
  table tbody tr{transition:background-color .1s ease}
  table tbody tr:hover{background:var(--green-soft)}
  .num,td.r,th.r,.stat .v{font-variant-numeric:tabular-nums}
  #inv-table thead th{position:sticky;top:0;background:var(--paper);z-index:3;box-shadow:0 2px 0 var(--ink)}
  .tbl-scroll{max-height:72vh;overflow:auto}
  button:focus-visible,.drink-item:focus-visible{outline:2px solid var(--green);outline-offset:1px}
  input[type=checkbox]{accent-color:var(--green)}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
  @media print{
    body.print-list main>*{display:none}
    body.print-list #tab-lists{display:block!important}
    body.print-list #list-controls,body.print-list #list-empty{display:none!important}
    body.print-list .list-doc{border:none;max-width:none;padding:0}
    body.print-spec .cost-wrap{grid-template-columns:1fr}
    body.print-spec .drinklist,body.print-spec .menubar,body.print-spec #menu-stats,body.print-spec .vtab{display:none!important}
    body.print-spec main>*:not(#tab-menus){display:none}
    nav,.acct,.est-switch,footer,.btn,.del,.drop,.controls,.picker,.status-tg,.drinklist,#ed-empty{display:none !important}
    body{background:#fff}
    .card,.stat{border-color:#999;box-shadow:none}
    .cost-wrap{grid-template-columns:1fr}
    main{padding-top:8px}
  }
  /* E5-14 (15 §4.1): List — search first, one tappable control per bottle, four fields, depth where it exists */
  .list-controls{display:flex;gap:12px;align-items:center;margin:8px 0 12px}
  .list-search{flex:1;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--line, #ccc);border-radius:6px}
  .list-items{display:flex;flex-direction:column;gap:6px}
  .list-item{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--card, #fff);border:1px solid var(--line, #ddd);border-radius:8px;padding:10px 12px;cursor:pointer}
  .list-item:focus-visible{outline:2px solid var(--green, #2e7d32);outline-offset:2px}
  .list-item .ln{display:block;font-weight:600}
  .list-item .lrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .list-item .lleft{min-width:0}
  .list-item .lright{text-align:right;white-space:nowrap}
  .list-item .ls,.list-item .lmeta,.list-item .ld{font-size:.92em}
  .list-item .lcost{font-weight:500}
  .list-banner{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;background:var(--green, #1B4D3A);color:#fff;border-radius:10px;padding:10px 14px;margin:8px 0;text-decoration:none}
  .list-banner .lb-title{font-weight:600}.list-banner .lb-go{margin-left:auto}
  .list-item.archived .ln{color:var(--muted, #666)}
  .list-empty{padding:24px;text-align:center}
  /* E5-14b (15 §4.1): a term carrying a definition is subtly marked; its explainer never covers what is being read */
  .term{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;cursor:help;text-decoration:underline dotted var(--muted, #888);text-underline-offset:3px;text-decoration-thickness:1px}
  .term:focus-visible{outline:2px solid var(--green, #2e7d32);outline-offset:2px}
  .term[aria-expanded="true"]{text-decoration-style:solid}
  .explainer{position:absolute;z-index:30;max-width:320px;padding:10px 12px;background:var(--card, #fff);border:1px solid var(--line, #ccc);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.12);font-size:.95em;line-height:1.35}
  .explainer .ex-title{font-weight:600;margin-bottom:4px}
  .explainer .ex-value{font-family:var(--mono, ui-monospace, monospace)}
  .explainer .ex-derivation{margin-top:4px}
  .explainer .ex-definition{color:var(--muted, #555);margin-top:4px}
  /* E5-27 (15 §4.2, D-220): the Grid's look and its detail pane */
  .catalog-split{display:flex;gap:0;flex:1 1 auto;min-height:max(360px,60vh)}   /* the grid always gets a usable height: what sits above it scrolls away, never the grid (next-preview-fixes §4) */
  .catalog-split .grid-side{flex:1;min-width:400px;min-height:0;position:relative}
  /* The page frame under the shell (08 c1, c2; D-31): a chain of definite heights from the body to the grid side, so the grid has a box to virtualize against. Tabulator writes height:100% inline on its host, which loses any rule on the host itself and resolves against the parent; the host is positioned inside the grid side so that 100% is the side's own box. Seen on test 10: 3,348 rows all rendered and a 97,000 px page when the host carried a 70vh rule (the E1-001 spike's finding again). The live page has no .shelled body and is untouched. */
  body.shelled{height:100vh;display:flex;flex-direction:column}
  body.shelled>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;width:100%;max-width:none;margin:0}   /* the Phase 0 main rule's auto margins make a flex item fit-content: at 800 px wide it came out 1,220 and the toolbar never wrapped (next-preview-fixes §4) */
  .catalog-split .grid-side>.tabulator{position:absolute;inset:0}
  /* The detail pane's slot (next-preview-fixes §5): 400 px beside the grid once a row is selected, nothing before — an empty slot takes no width; the pane's own width and left rule are the slot's here. */
  .catalog-split .pane-side{flex:0 0 400px;max-width:400px;min-height:0;overflow:auto;border-left:1px solid var(--line);background:var(--card);padding:10px}
  .catalog-split .pane-side:empty{display:none}
  .pane-side .detail-pane{width:auto;border-left:0;padding:10px 14px}
  /* The narrow desk, 760 to 1,100 px (ui/appshell.js WIDTHS): the pane folds under the grid, which keeps the width for its columns; below 760 px the flip shows the phone surfaces instead. */
  @media (max-width:1100px){
    .catalog-split{flex-direction:column}
    .catalog-split .grid-side{min-width:0;flex:1 1 auto;min-height:240px}
    .catalog-split .pane-side{flex:0 0 auto;max-width:none;max-height:40vh;border-left:0;border-top:1px solid var(--line)}
  }
  .detail-pane{width:400px;flex:none;background:var(--card, #FCFBF7);border-left:1px solid var(--line, #DEDCD0);padding:20px 24px;overflow:auto}
  .detail-pane .pname{font-family:var(--display);font-size:2.25rem;font-weight:400;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--ink);margin:4px 0 8px}   /* the Phase 0 h2 is small caps; the pane's name is the display face (shot 01) */
  .detail-pane .pid{font-family:var(--mono);font-size:.7333rem;letter-spacing:.04em;color:var(--ink-soft)}
  .detail-pane .psecond{font-size:.9333rem;color:var(--ink-soft)}
  .detail-pane .pf .pl{color:var(--ink-soft);font-size:.8667rem}
  .detail-pane .pf .pv{font-size:.8667rem}
  .detail-pane .pnote-h{font-family:var(--mono);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin:20px 0 6px}
  .detail-pane .pnote{font-family:var(--display);font-size:1.2rem;line-height:1.35;color:var(--ink)}
  .detail-pane .pactions .btn{font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;padding:9px 16px;border-radius:6px;border-width:1px}
  .detail-pane .pactions .btn:not(.primary){border-color:var(--control);color:var(--green)}
  .detail-pane .pactions .btn:not(.primary):hover{background:var(--card);border-color:var(--ink)}
  .detail-pane .pfacts{border-top:1px solid var(--ink, #16181A);margin-top:16px}
  .detail-pane .pf{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line, #DEDCD0)}
  .detail-pane .pactions{position:sticky;bottom:0;padding-top:16px;background:inherit}
  .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:6px;margin:8px 0;padding-bottom:2px}   /* one row that scrolls sideways, never five wrapped rows (R-DC1; next-preview-fixes §4) */
  .chip{font:inherit;background:none;border:1px solid var(--line, #DEDCD0);border-radius:4px;padding:3px 8px;cursor:pointer;white-space:nowrap;flex:none}
  .chip.on{border-color:var(--green, #1B4D3A);background:var(--green-soft, #E4EBE5);color:var(--green, #1B4D3A)}
  .chip-n{color:var(--muted, #6B6F66);font-size:.9em}
  .grid-filter{font:inherit;padding:6px 10px;border:1px solid var(--line, #DEDCD0);border-radius:4px;min-width:260px}
  .tabulator .gsecond{color:var(--muted, #6B6F66);margin-left:6px}
  .grid-footer{font-family:var(--mono, ui-monospace, monospace);font-size:.6875rem;color:var(--muted, #6B6F66);padding:6px 0}
  /* The grid as the design draws it (next-design-match §1.3; shot 01): Card, hairline rows, no zebra, no vertical lines, mono uppercase grey headers, a sort mark only on the sorted column, the selected row on Green, soft with a green bar at its left; the per-column filter row is off. Tabulator's own greys are overridden here and nowhere else; the rules carry [role="grid"] so they out-rank Tabulator's sheet whatever order the two are linked in (next-design-polish §2, §3). */
  .tabulator[role="grid"]{background:var(--card);border:0;font-family:var(--sans);font-size:.9333rem;color:var(--ink)}
  .tabulator[role="grid"] .tabulator-header{background:var(--card);border-bottom:1px solid var(--line);border-top:0;color:var(--ink-soft);font-weight:400}
  .tabulator[role="grid"] .tabulator-header .tabulator-col{background:var(--card);border-right:0}
  .tabulator[role="grid"] .tabulator-header .tabulator-col .tabulator-col-content{padding:8px 12px}
  .tabulator[role="grid"] .tabulator-header .tabulator-col .tabulator-col-title{font-family:var(--mono);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--ink-soft)}
  .tabulator[role="grid"] .tabulator-header .tabulator-col.bb-num .tabulator-col-title{text-align:right}
  .tabulator[role="grid"] .tabulator-header .tabulator-col .tabulator-header-filter{display:none}
  .tabulator[role="grid"] .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-sorter{display:none}
  .tabulator[role="grid"] .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:14px}
  .tabulator[role="grid"] .tabulator-header .tabulator-col .tabulator-col-sorter{right:2px}
  .tabulator[role="grid"] .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow{border-left-width:4px;border-right-width:4px}
  .tabulator[role="grid"] .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:4px solid var(--ink-soft)}
  .tabulator[role="grid"] .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top:4px solid var(--ink-soft)}
  .tabulator[role="grid"] .tabulator-tableholder{background:var(--card)}
  .tabulator[role="grid"] .tabulator-tableholder .tabulator-table{background:var(--card);color:var(--ink)}
  .tabulator[role="grid"] .tabulator-row{background:var(--card);border-bottom:1px solid var(--line, #DEDCD0);min-height:36px}
  .tabulator[role="grid"] .tabulator-row.tabulator-row-even{background:var(--card)}
  .tabulator[role="grid"] .tabulator-row:hover{background:var(--paper)}
  .tabulator[role="grid"] .tabulator-row .tabulator-cell{border-right:0;padding:9px 12px;line-height:1.3}
  .tabulator[role="grid"] .tabulator-row.tabulator-selected{background:var(--green-soft);box-shadow:inset 3px 0 0 var(--green)}
  .tabulator[role="grid"] .tabulator-row.tabulator-selected:hover{background:var(--green-soft)}
  .tabulator[role="grid"] .tabulator-row .tabulator-cell.bb-formula{color:var(--ink-soft)}
  .tabulator[role="grid"] .tabulator-row .tabulator-cell .gname{color:var(--ink)}
  /* the catalog toolbar (shot 01): the filter box, the chips, then the count on the right with a quiet Add a bottle and a … menu for the rest */
  .grid-toolbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:16px 0 8px}
  .grid-toolbar .chips{flex:1 1 320px;min-width:0;margin:0}
  .grid-toolbar .grid-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
  .grid-count{font-family:var(--mono);font-size:.7333rem;color:var(--ink-soft);white-space:nowrap}
  .grid-toolbar .btn.quiet{border:1px solid var(--control);background:var(--card);color:var(--ink);font-size:.8667rem;font-weight:400;letter-spacing:0;text-transform:none;padding:6px 12px;border-radius:6px}
  .grid-toolbar .btn.quiet:hover{border-color:var(--ink);background:var(--card);color:var(--ink)}
  .grid-more{position:relative}
  .grid-more summary{list-style:none;cursor:pointer;width:32px;height:32px;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1rem;letter-spacing:0;text-transform:none;font-family:var(--sans)}
  .grid-more summary::-webkit-details-marker{display:none}
  .grid-more summary:hover{border-color:var(--ink)}
  .grid-more summary:focus-visible{outline:2px solid var(--green);outline-offset:1px}
  .grid-more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:41;min-width:240px;background:var(--card);border:1px solid var(--ink);border-radius:8px;box-shadow:0 14px 36px rgba(22,24,26,.18);padding:6px 0;display:flex;flex-direction:column}
  .grid-more .menu button,.grid-more .menu label,.grid-more .menu a{display:flex;align-items:center;gap:10px;padding:8px 16px;border:0;background:none;text-align:left;font:inherit;font-size:.9333rem;color:var(--ink);text-decoration:none;cursor:pointer;letter-spacing:0;text-transform:none}
  .grid-more .menu button:hover,.grid-more .menu label:hover,.grid-more .menu a:hover{background:var(--green-soft)}
  .grid-more .menu .mhead{padding:8px 16px 4px;font-family:var(--mono);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--line);margin-top:4px}
  .grid-more .menu .cols{max-height:50vh;overflow:auto}
  @media (prefers-reduced-motion: reduce){*{transition:none!important}}
  /* The item screen as the design draws it (shot 04; 15 §5; D-224; next-design-match): the header with the ID and the Group path in mono, the name in the display face, the producer and vintage, the actions at the right over one ink rule; the five cards in a grid on Card with hairline borders and eyebrow titles; labels above their fields, two short fields to a row, figures in mono; the rest of The bottle behind More fields. */
  .item-screen{max-width:1120px;margin:0 auto;padding:8px 0 48px}
  .item-screen .item-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;padding:16px 0 20px;border-bottom:1px solid var(--ink);margin-bottom:24px}
  .item-screen .pid{font-family:var(--mono);font-size:.7333rem;letter-spacing:.04em;color:var(--ink-soft);margin:0 0 6px}
  .item-screen h1{font-family:var(--display);font-size:3.4667rem;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
  .item-screen .second{font-size:1rem;color:var(--ink-soft);margin:8px 0 0}
  .item-screen .item-actions{display:flex;gap:10px;align-items:center;align-self:flex-end;padding-bottom:2px}   /* §7: on the title block's baseline, at the right of the producer line */
  .item-screen .item-actions .btn,.item-screen .item-actions .open-sheets{font-family:var(--sans);font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;height:36px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--green)}
  .item-screen .item-actions .btn:hover,.item-screen .item-actions .open-sheets:hover{border-color:var(--ink);background:var(--card);color:var(--green)}
  /* the cards as the shot places them (next-item-polish): three columns of at least 320 px — The bottle; Wine details, Location and Latest count stacked; Notes. The columns are the markup's (renderItemScreen's COLUMNS), so a short card never leaves its column empty and Notes never slides under Location; the same rule gives two columns at 1,000 px and one on a phone, with no phone media rule (the shell has none; shellframe test) */
  .item-screen .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
  .item-screen .cards .col{display:grid;gap:20px;min-width:0}
  .item-screen .item-section{margin:0;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-content:start}
  .item-screen .item-section>h2,.item-screen .item-section>h3,.item-screen .item-section>p,.item-screen .item-section>details,.item-screen .item-section>.loc-rows,.item-screen .item-section>.loc-total{grid-column:1/-1}
  .item-screen .item-section h2{font-family:var(--sans);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 4px;display:flex;align-items:baseline;gap:8px}
  .item-screen .item-section h2 .muted{font-weight:400;letter-spacing:0;text-transform:none;font-size:.8rem;margin-left:0}
  .item-screen .item-section h2 .save-state{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:.8rem;color:var(--ink-soft);white-space:nowrap}   /* the outcome at the card's top right (shot 04; next-item-polish §4) */
  .item-screen .field[hidden]{display:none}
  .item-screen .field{display:flex;flex-direction:column;gap:4px;margin:0}
  .item-screen .item-section .field{grid-column:span 1}
  .item-screen .item-section .field.wide,.item-screen .item-section .field:has(textarea){grid-column:1/-1}
  .item-screen .item-section .field[data-field="Name"],.item-screen .item-section .field[data-field="Vendor"],.item-screen .item-section .field[data-field="Group"]{grid-column:1/-1}
  .item-screen .field label,.item-screen .field .term{font-size:.8rem;color:var(--ink-soft);text-align:left;align-self:flex-start}
  .item-screen .field .term{text-decoration:none;cursor:help;display:inline-flex;align-items:center;gap:5px}   /* next-item-polish §1: plain words; the explainer hangs on a small mark, shown on hover or press as the pane's are */
  .item-screen .term .qm{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid var(--control);border-radius:50%;font-size:.6667rem;line-height:1;color:var(--ink-soft);font-family:var(--sans)}
  .item-screen .with-unit{display:flex;align-items:center;gap:0;border:1px solid var(--control);border-radius:6px;background:var(--card);overflow:hidden}   /* §2: a size is its number with its unit beside it */
  .item-screen .with-unit input{border:0;border-radius:0;flex:1;min-width:0}
  .item-screen .with-unit .unit{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);padding:0 10px 0 4px}
  .item-screen .with-unit:focus-within{outline:2px solid var(--green);outline-offset:1px}
  .item-screen .with-unit input:focus-visible{outline:none}
  .item-screen .field input,.item-screen .field select,.item-screen .field textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--ink);font-size:.9333rem}
  .item-screen .field textarea{min-height:84px;line-height:1.45;resize:vertical}
  .item-screen .field input.num{font-family:var(--mono);text-align:right}
  .item-screen .field.ro .fv{min-height:38px;display:flex;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.9333rem}
  .item-screen .field.ro .fv.num{font-family:var(--mono);justify-content:flex-end}
  .item-screen .more-fields{border-top:1px solid var(--line);padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .item-screen .more-fields summary{grid-column:1/-1;cursor:pointer;color:var(--green);font-size:.8667rem;letter-spacing:0;text-transform:none;font-family:var(--sans);text-decoration:underline;text-underline-offset:3px;list-style:none}   /* §5: a quiet link at the foot, no count */
  .item-screen .more-fields summary::-webkit-details-marker{display:none}
  .item-screen .more-fields[open] summary{margin-bottom:4px}
  .item-screen .more-fields .field{grid-column:span 1}
  .item-screen .note-h{font-size:.8rem;font-weight:400;color:var(--ink-soft);margin:6px 0 -8px;letter-spacing:0;text-transform:none;font-family:var(--sans)}
  /* D-240: a note reads as prose in the reading face; Edit and Add a note are quiet links; the pronunciation sits under the name small and italic; the editor's field is the card's */
  .item-screen .note{display:flex;align-items:flex-start;gap:12px}
  .item-screen .note-prose{flex:1;font-family:var(--display);font-size:1.1333rem;line-height:1.4;color:var(--ink);margin:0;white-space:pre-line}
  .item-screen button.linkbtn{font:inherit;font-size:.8667rem;color:var(--green);background:none;border:0;padding:0;cursor:pointer;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px}
  .item-screen .note-edit{flex:none;margin-top:2px}
  .item-screen .add-note summary{cursor:pointer;color:var(--green);font-size:.8667rem;letter-spacing:0;text-transform:none;font-family:var(--sans)}
  .item-screen .add-note .add-kinds{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0 0 12px}   /* §8: one kind per line */
  .item-screen .add-note .add-kinds button.linkbtn{text-decoration:none}
  .item-screen .add-note .add-kinds button.linkbtn:hover{text-decoration:underline}
  .item-screen .pron{font-size:.9333rem;font-style:italic;color:var(--ink-soft);margin:4px 0 0;display:flex;gap:10px;align-items:baseline}
  .item-screen .pron em{font-style:italic}
  .item-screen .field.fact{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}   /* §5: in line like the other facts — the label over the value, Edit beside it */
  .item-screen .field.fact label{grid-column:1/-1}
  .item-screen .field.fact .fv{justify-content:flex-start;border-bottom:0;min-height:0;padding:4px 0}
  .item-screen .field.fact .note-edit{margin:0}
  .item-screen .note-editor{display:flex;flex-direction:column;gap:4px;grid-column:1/-1}
  .item-screen .note-editor label{font-size:.8rem;color:var(--ink-soft)}
  .item-screen .note-editor textarea,.item-screen .note-editor input{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--ink);font-size:.9333rem;line-height:1.45}
  .item-screen .note-editor textarea{min-height:96px;resize:vertical}
  .item-screen .note-editor-foot{display:flex;gap:12px;align-items:center;padding-top:4px}
  .item-screen .note-editor-foot .btn{font-size:.8667rem;font-weight:400;letter-spacing:0;text-transform:none;padding:7px 14px;border-radius:6px}
  .item-screen .item-head .note-editor{margin-top:6px;max-width:420px}
  .item-screen .save-state{font-size:.8rem;color:var(--ink-soft)}
  /* Location's rows (shot 04; next-item-polish §3): Area, Bin, On hand and the … on one line; the quantity box, when opened, on its own line under them */
  .item-screen .loc-rows{display:grid;gap:12px}
  .item-screen .loc-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:8px 12px;align-items:end;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .item-screen .loc-row:last-child{border-bottom:0;padding-bottom:0}
  .item-screen .loc-row .field.qty{grid-column:1/-1}
  .item-screen .loc-row .field.ro .fv{justify-content:flex-end;min-width:56px}
  .item-screen .loc-row .field.ro .fv.muted{font-family:var(--sans);font-size:.8667rem}
  .item-screen .loc-row .hint{font-size:.7333rem;color:var(--ink-soft);text-align:right;white-space:nowrap}
  .item-screen .loc-row input.mono{font-family:var(--mono)}
  .item-screen .loc-row .bintag{margin-left:2px}
  .item-screen .loc-total{margin:0;font-size:.8667rem;color:var(--ink-soft);display:flex;align-items:baseline;gap:6px}
  .item-screen .loc-total .num{color:var(--ink)}
  .item-screen .row-more{position:relative;align-self:end;margin-bottom:5px}
  .item-screen .row-more summary{list-style:none;cursor:pointer;width:28px;height:28px;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.9333rem;letter-spacing:0;text-transform:none;font-family:var(--sans)}
  .item-screen .row-more summary::-webkit-details-marker{display:none}
  .item-screen .row-more summary:hover{border-color:var(--ink)}
  .item-screen .row-more summary:focus-visible{outline:2px solid var(--green);outline-offset:1px}
  .item-screen .row-more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:41;min-width:180px;background:var(--card);border:1px solid var(--ink);border-radius:8px;box-shadow:0 14px 36px rgba(22,24,26,.18);padding:6px 0;display:flex;flex-direction:column}
  .item-screen .row-more .menu button{display:flex;align-items:center;padding:8px 14px;border:0;background:none;text-align:left;font:inherit;font-size:.8667rem;color:var(--ink);cursor:pointer;letter-spacing:0;text-transform:none}
  .item-screen .row-more .menu button:hover{background:var(--green-soft)}
  .item-screen .bintag{font-size:.6rem}
  .item-screen .latest-fig .num.big{font-family:var(--mono);font-size:2rem;line-height:1}
  .item-screen .ids{font-family:var(--mono);font-size:.7333rem;color:var(--ink-soft);margin-top:24px;text-align:right}
  /* Stock under Financials as the design draws it (shot 09; 15 §19; D-221; next-design-match): two columns — the inventory value in a card with an ink border and the figure large in mono, the three lists as three tabs in one card with the open one on Card, rows with their figure at the right over hairline rules; at the right the bars in cards, ink on a hairline track, the figure in mono. The words and figures are the renderer's. */
  .stock-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;max-width:1104px;margin:0 auto}
  .stock-screen h2{font-family:var(--sans);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 12px}
  .stock-screen .stock-value{grid-column:1;grid-row:1;background:var(--card);border:1px solid var(--ink);border-radius:6px;padding:20px 24px 18px}
  .stock-screen .stock-value p{margin:0}
  .stock-screen .stock-value .num.big{font-family:var(--mono);font-size:2.9333rem;line-height:1;display:block;margin:4px 0 8px;color:var(--ink);text-align:left}
  .stock-screen .stock-value .muted{font-size:.9333rem}
  .stock-screen .stock-value .bintag{margin-top:10px}
  .stock-screen .stock-tabs{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-bottom:2px solid var(--ink);border-radius:6px 6px 0 0;overflow:hidden;background:var(--paper)}
  .stock-screen .stock-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px;border:0;border-right:1px solid var(--line);background:transparent;font:inherit;font-size:.9333rem;color:var(--ink-soft);text-align:left;cursor:pointer}
  .stock-screen .stock-tabs button:last-child{border-right:0}
  .stock-screen .stock-tabs button .muted{font-family:var(--mono);font-size:1.3333rem;color:var(--ink)}
  .stock-screen .stock-tabs button[aria-selected="true"]{background:var(--card);color:var(--green)}
  .stock-screen .stock-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .stock-screen .stock-list{grid-column:1;grid-row:3;background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;padding:14px 20px 8px}
  .stock-screen .stock-list h2{font-family:var(--sans);font-size:.9333rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-soft);margin:0 0 6px}
  .stock-screen .stock-list ul{list-style:none;margin:0;padding:0}
  .stock-screen .stock-list li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(120px,auto);align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}   /* E5-30, shot 09: the name and its depth, the figure, the age */
  .stock-screen .stock-list .row-name{display:flex;flex-direction:column;gap:2px;min-width:0}
  .stock-screen .stock-list .sub{font-size:.8667rem}
  .stock-screen .stock-list .figure{text-align:right}
  .stock-screen .stock-list .age{font-size:.8667rem;text-align:right;white-space:nowrap}
  .stock-screen .stock-lead{margin:0 0 6px;font-size:.9333rem}
  .stock-screen .vendor{display:grid;grid-template-columns:20px 1fr 96px 44px;gap:12px;align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}   /* the vendor rows: rank, name, value, share — no bar */
  .stock-screen .vendor:hover .bar-name{color:var(--green)}
  .stock-screen .vendor .rank{font-family:var(--mono);font-size:.7333rem}
  .stock-screen .vendor .share{font-size:.8667rem;text-align:right}
  .stock-screen .stock-list .linkbtn{font:inherit;font-size:1rem;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer}
  .stock-screen .stock-list .linkbtn:hover{color:var(--green)}
  .stock-screen .stock-list .num{font-family:var(--mono);font-size:.8667rem;white-space:nowrap}
  .stock-screen .stock-bars{grid-column:2;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 20px 8px}
  .stock-screen .bar{display:grid;grid-template-columns:120px 1fr 96px;gap:12px;align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:.9333rem;color:var(--ink);text-align:left;cursor:pointer;background:linear-gradient(var(--line),var(--line)) no-repeat 132px 50% / calc(100% - 240px) 6px}
  .stock-screen .bar:hover .bar-name{color:var(--green)}
  .stock-screen .bar .bar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stock-screen .bar .bar-fill{display:block;height:6px;background:var(--ink);border-radius:3px;justify-self:start;max-width:100%}
  .stock-screen .bar .bar-value{font-family:var(--mono);font-size:.8667rem;text-align:right;white-space:nowrap}
  .stock-empty{max-width:60ch;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px;font-size:1rem;line-height:1.5}
  .stock-empty p{margin:0 0 8px} .stock-empty p:last-child{margin:0}
  /* The Account screen as the design draws it (shot 11; 15 §23; D-227; next-design-match): the title in the display face; cards in three columns — who you are with what you can do under it, Sharing with an ink border and its serif title, the display unit as two joined chips; then Setup and the establishments; Where your data lives across the width with a card per workbook; the actions under it in sentence case. The markup is accountscreen.js's. */
  .account-screen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:20px;align-items:start;max-width:1064px;margin:0 auto;padding:8px 0 48px}
  .account-screen h1{grid-column:1/-1;grid-row:1;font-family:var(--display);font-size:2.9333rem;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;color:var(--ink);margin:16px 0 4px}
  .account-screen>section{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 22px;margin:0}
  .account-screen>section h2,.account-screen>section h3{font-family:var(--sans);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 10px}
  .account-screen .acct-who{grid-column:1;grid-row:2}
  .account-screen .acct-who h2{font-family:var(--sans);font-size:1.1333rem;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink);margin:0}
  .account-screen .acct-who p{margin:2px 0 0;font-size:.8667rem;color:var(--ink-soft)}
  .account-screen .acct-who .acct-label{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--ink);border:1px solid var(--control);border-radius:4px;padding:2px 8px}
  .account-screen .acct-files{grid-column:1;grid-row:3}
  .account-screen .acct-files ul,.account-screen .acct-ests ul,.account-screen .acct-share ul{list-style:none;margin:0;padding:0}
  .account-screen .acct-files li,.account-screen .acct-share ul li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.9333rem}
  .account-screen .acct-share{grid-column:2;grid-row:2/4;border-color:var(--ink)}
  .account-screen .acct-share h3,.account-screen .acct-setup h3{font-family:var(--display);font-size:1.8667rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);margin:0 0 10px}
  .account-screen .acct-share p,.account-screen .acct-setup p{font-size:.9333rem;line-height:1.5;margin:0 0 10px}
  .account-screen .acct-share select{margin-left:6px;padding:6px 26px 6px 8px;border-radius:6px;font-size:.8667rem}
  .account-screen .acct-roles{width:100%;border-collapse:collapse;margin-top:10px;font-size:.9333rem}
  .account-screen .acct-roles td,.account-screen .acct-roles th{padding:8px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-family:var(--sans);font-size:.9333rem;letter-spacing:0;text-transform:none;color:var(--ink);cursor:default}
  .account-screen .acct-roles th{font-weight:600;width:34%;padding-right:12px}
  .account-screen .acct-unit{grid-column:3;grid-row:2}
  .account-screen .unit-choice{display:inline-flex;border:1px solid var(--control);border-radius:6px;overflow:hidden;margin-bottom:10px}
  .account-screen .unit-choice .chip{border:0;border-radius:0;padding:8px 16px;font-size:.9333rem;color:var(--ink-soft);background:var(--card)}
  .account-screen .unit-choice .chip.on{background:var(--green-soft);color:var(--green)}
  .account-screen .acct-unit p{font-size:.8667rem;color:var(--ink-soft);margin:0}
  .account-screen .acct-setup{grid-column:1;grid-row:4}
  .account-screen .acct-setup .num{font-family:var(--mono);font-size:.8rem;float:right;margin:10px 0 0;color:var(--ink-soft)}
  .account-screen .acct-ests{grid-column:2;grid-row:4}
  .account-screen .acct-ests li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:1.4667rem}
  .account-screen .acct-ests li .muted,.account-screen .acct-ests li button.linkbtn{font-family:var(--sans);font-size:.8667rem}
  .account-screen .acct-ests p{margin:12px 0 0;display:flex;gap:16px}
  .account-screen .acct-where{grid-column:1/-1;grid-row:5}
  .account-screen .acct-where>p{font-size:.9333rem;line-height:1.5;max-width:80ch}
  .account-screen .wb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
  .account-screen .wb-card{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--card)}
  .account-screen .wb-card b{display:block;font-size:1rem;font-weight:600;margin-bottom:2px}
  .account-screen .wb-card p{margin:0 0 6px;font-size:.8rem}
  .account-screen .wb-card a{color:var(--green);font-size:.8667rem}
  .account-screen .acct-actions{grid-column:1/-1;grid-row:6;display:flex;flex-wrap:wrap;gap:10px;background:none;border:0;padding:0}
  .account-screen .acct-actions button{font-family:var(--sans);font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;padding:9px 16px;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer}
  .account-screen .acct-actions button:hover{border-color:var(--ink)}
  .account-screen button.linkbtn{font-family:var(--sans);font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;background:none;border:0;padding:0;color:var(--green);cursor:pointer;text-decoration:underline}
  .account-screen .btn.primary{font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;padding:9px 16px;border-radius:6px}
  /* The phone bottle list as the design draws it (shot 02; 15 §4.1; D-229; next-design-match): the establishment's eyebrow with the sync words, the title in the display face, the search first in a tall rounded box with a magnifier, rows of at least 68 px on Card over hairline rules — the name and producer at the left, the cost and "size · on hand" in mono at the right, a chevron. The markup is list.js's. */
  .list-screen{max-width:600px;margin:0 auto;padding:4px 0 40px}
  .list-screen .phone-head{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 4px}
  .list-screen .phone-head .eyebrow{font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
  .list-screen .phone-head .sync-words{font-size:.8rem;color:var(--ink-soft)}
  .list-screen .phone-title{font-family:var(--display);font-size:2.6667rem;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;color:var(--ink);margin:8px 0 14px}
  .list-screen .list-controls{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 12px}
  .list-screen .list-controls::before{content:'⌕';position:absolute;left:14px;top:14px;font-size:1.2rem;line-height:1.2;color:var(--ink-quaternary);pointer-events:none}
  .list-screen .list-search{flex:none;appearance:none;-webkit-appearance:none;height:52px;border:1px solid var(--control);border-radius:12px;padding:0 16px 0 40px;font-size:1.0667rem;background:var(--card);color:var(--ink)}   /* flex none: the base rule's flex:1 is a basis of 0 in this column and would size it to its text */
  .list-screen .list-search::placeholder{color:var(--ink-tertiary)}
  .list-screen .list-line{text-align:center;font-size:.8rem;color:var(--ink-tertiary);order:2}
  .list-screen .list-items{gap:0;border-top:1px solid var(--line)}
  .list-screen .list-item{position:relative;min-height:68px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--card);padding:12px 16px;padding-right:36px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .list-screen .list-item::after{content:'›';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.3333rem;color:var(--ink-quaternary)}
  .list-screen .list-item .ln{font-size:1.0667rem;font-weight:600;color:var(--ink)}
  .list-screen .list-item .ls{color:var(--ink-soft);font-size:.8667rem}
  .list-screen .list-item .lcost{font-family:var(--mono);font-size:1rem;font-weight:400;color:var(--ink)}
  .list-screen .list-item .lmeta{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
  .list-screen .list-item .ld{font-size:.8rem;color:var(--ink-tertiary)}
  .list-screen .entry-points{margin:0 0 12px}
  .list-screen .entry-points .btn,.list-screen .entry-points .btn.primary{font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;padding:8px 14px;border-radius:10px;background:var(--card);border:1px solid var(--control);color:var(--green)}   /* a named entry point, quiet: the search is the surface's primary control (15 §4.1) */
  .list-screen .entry-points .btn:hover,.list-screen .entry-points .btn.primary:hover{border-color:var(--ink);background:var(--card);filter:none}
  .list-screen .selection-bar{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:.8667rem}
  .list-screen .selection-bar .btn{font-size:.8rem;font-weight:400;letter-spacing:0;text-transform:none;padding:6px 10px;border-radius:8px}
  /* The Add form (the re-check of 9e928be, finding 2): form.item-create matched nothing above, so it drew browser defaults. The bottle page's cards, for the form:
     the same title, each section a card on a two-column grid, the essentials in sight, More fields on the card's own fold, the notes a quieter card inside it. */
  .item-create{max-width:1120px;margin:0 auto;padding:8px 0 48px}
  .item-create h1{font-family:var(--display);font-size:3.4667rem;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 8px}
  .item-create>p.muted{margin:0 0 20px}
  .item-create .create-section{margin:0 0 20px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-content:start;min-width:0}
  .item-create .create-section legend{float:left;width:100%;font-family:var(--sans);font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 8px;padding:0}
  .item-create .field{display:flex;flex-direction:column;gap:4px;margin:0;grid-column:span 1}
  .item-create .field:has(textarea){grid-column:1/-1}
  .item-create .field[data-field="Name"],.item-create .field[data-field="Vendor"],.item-create .field[data-field="Group"]{grid-column:1/-1}
  .item-create .field label{font-size:.8rem;color:var(--ink-soft);text-align:left;align-self:flex-start}
  .item-create .with-unit{display:flex;align-items:center;gap:0;border:1px solid var(--control);border-radius:6px;background:var(--card);overflow:hidden}
  .item-create .with-unit input{border:0;border-radius:0;flex:1;min-width:0}
  .item-create .with-unit .unit{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);padding:0 10px 0 4px}
  .item-create .with-unit:focus-within{outline:2px solid var(--green);outline-offset:1px}
  .item-create .with-unit input:focus-visible{outline:none}
  .item-create .field input,.item-create .field select,.item-create .field textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--control);border-radius:6px;background:var(--card);color:var(--ink);font:inherit;font-size:.9333rem}
  .item-create .field textarea{min-height:84px;line-height:1.45;resize:vertical}
  .item-create .field input.num{font-family:var(--mono);text-align:right}
  .item-create details.more{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .item-create details.more summary{grid-column:1/-1;cursor:pointer;color:var(--green);font-size:.8667rem;letter-spacing:0;text-transform:none;font-family:var(--sans);text-decoration:underline;text-underline-offset:3px;list-style:none}
  .item-create details.more summary::-webkit-details-marker{display:none}
  .item-create details.more[open] summary{margin-bottom:4px}
  .item-create details.more>.create-section{grid-column:1/-1;margin:8px 0 0;padding:14px 16px 12px;background:var(--paper,transparent)}
  .item-create .create-notes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:24px;margin:0 0 16px;font-size:.8667rem}
  .item-create .section-foot{display:flex;justify-content:flex-end}

  /* The flip's composition (E1-25b, E5-26; notes/plan-flip.md step 2): the panes under the shell, the toast and the explainer box, the
     drop zone and the import review, the drift strip and its cards, the Back link, a selected bottle in the list — the rules the
     preview kept in its own stylesheet (P-1), in the app now. Then the phone: below 760 px the page is body.phone, set by the
     script from the width (ui/phonehead.js), never by a media query here (the shell-frame guard); the desk shell is not shown and
     the phone's head takes its place — the eyebrow, the sync words, Sign in or the avatar whose sheet lists the places a phone has. */
  .app-main{padding:0 24px 48px}
  .pane{display:flex;flex-direction:column;flex:1 0 auto}
  .pane[hidden]{display:none}
  #pane-catalog{flex:1 1 auto;min-height:0}
  .strip:empty{display:none}
  .strip{margin:16px 0 10px}
  .drift-strip .drift-headline{margin:0 0 4px}
  .drift-strip .drift-headline button.linkbtn{font:inherit;color:var(--green);background:none;border:0;padding:0;cursor:pointer}
  .drift-strip .drift-quiet{margin:0 0 4px}
  .drift-card{border:1px solid var(--line);padding:8px 10px;margin:6px 0;background:var(--card)}
  .drift-card .drift-card-title{font-weight:600}
  .drift-card button{margin-left:8px}
  .grid-toolbar input[type="search"]{min-width:260px}
  .catalog-split{border:1px solid var(--line);background:var(--card)}
  .catalog-split[hidden]{display:none}
  .grid-footer.app-footer{margin-top:6px}
  .scoped{margin-top:12px;height:60vh;position:relative}
  .back{margin:20px auto 0;max-width:1120px}
  .back button{font:inherit;font-size:.9333rem;color:var(--green);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
  .not-ready{color:var(--ink-soft);max-width:60ch}
  .toast{position:fixed;left:16px;bottom:16px;max-width:60ch;padding:8px 12px;background:var(--ink);color:var(--card);border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none;font-size:.9333rem;z-index:50}
  .toast.on{opacity:1}
  .explainer-host{position:absolute;z-index:20}
  .explainer-host[hidden]{display:none}
  .explainer-host .explainer{position:static}
  .drop-zone{border:2px dashed var(--control);padding:24px;text-align:center;margin:10px 0}
  .drop-zone.over{background:var(--paper);border-color:var(--ink)}
  .import-review .imp-tab{border-top:1px solid var(--line);padding-top:8px;margin-top:12px}
  .import-review .imp-preview{font-size:.85em;border-collapse:collapse;max-width:100%;display:block;overflow:auto}
  .import-review .imp-preview td,.import-review .imp-preview th{border:1px solid var(--line);padding:2px 6px;white-space:nowrap}
  .list-items .list-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:8px 4px;font:inherit;cursor:pointer}
  .list-items button.list-item.selected{background:var(--green-soft)}
  .list-items .lrow{display:flex;justify-content:space-between;gap:12px}
  /* the phone (plan-flip §4): the shell hidden, the phone head shown, the screens in one column */
  .phone-top{display:none}
  body.phone header.shell{display:none}
  body.phone .phone-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 4px;position:relative}
  body.phone .app-main{padding:0 20px 48px}
  body.phone .back{display:none}
  .phone-top .ptop-left{display:flex;flex-direction:column;gap:2px;min-width:0}
  .phone-top .eyebrow{font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .phone-top select.est-switch{border:0;border-radius:0;background-color:transparent;padding:0 16px 0 0;font-size:.7333rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
  .phone-top .sync-words{font-size:.8rem;color:var(--ink-soft)}
  .phone-top .sync-words[data-tone="copper"]{color:var(--copper-text)}
  .phone-top .ptop-right{flex:none}
  .phone-top button.avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--control);background:var(--green-soft);color:var(--green);font-size:.9333rem;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .phone-top button.avatar[aria-expanded="true"]{box-shadow:0 0 0 2px var(--green)}
  .phone-top .btn.signin{min-height:44px;padding:0 16px;font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;border-radius:10px}
  .phone-top .sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--ink);border-radius:14px 14px 0 0;box-shadow:0 -14px 36px rgba(22,24,26,.18);padding:8px 0 16px}
  .phone-top .sheet[hidden]{display:none}
  .phone-top .sheet .mwho{padding:12px 20px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
  .phone-top .sheet .mname{font-size:1.0667rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
  .phone-top .sheet .mline{font-size:.8667rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
  .phone-top .sheet button{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 20px;border:0;border-radius:0;background:none;text-align:left;font:inherit;font-size:1.0667rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
  .phone-top .sheet button:hover,.phone-top .sheet button:focus-visible{background:var(--green-soft);outline:none}
  .phone-top .sheet button.close{border-top:1px solid var(--line);margin-top:6px;color:var(--ink-soft)}
  body.phone .account-screen{grid-template-columns:1fr;max-width:none;padding:0 0 40px}
  body.phone .account-screen h1,body.phone .account-screen>section{grid-column:auto;grid-row:auto}
  body.phone .stock-screen{grid-template-columns:1fr;max-width:none}
  body.phone .stock-screen>*{grid-column:auto;grid-row:auto}
  body.phone .item-screen h1{font-size:2.2667rem}
  body.phone .tab-title h1{font-size:2.2667rem}
  /* E5-19a: the one question at the first sign-in — where the data will live, and the display unit */
  .unit-question{max-width:60ch;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px;line-height:1.5}
  .unit-question h3{margin:14px 0 4px;font-size:1rem}
  .unit-choices{display:grid;gap:8px;margin:8px 0 14px}
  .unit-option{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:10px 12px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
  .unit-option.on{border-color:var(--ink)}
  .unit-option .unit-note{grid-column:2;font-size:.8667rem}
  /* E3-08 / E5-19 (shot 10): the first run — the four-step strip and its cards */
  .first-run-strip{display:flex;gap:28px;list-style:none;margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line);font-size:.9333rem}
  .first-run-strip li{display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
  .first-run-strip li.current{color:var(--ink);font-weight:600}
  .first-run-strip .step-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--control);font-family:var(--mono);font-size:.7333rem}
  .first-run-strip li.current .step-n{background:var(--green);border-color:var(--green);color:#fff}
  .first-run-strip li.done .step-n{border-color:var(--green);color:var(--green)}
  .first-run.card,.drop-zone.first-run{max-width:880px;margin:0 auto;background:var(--card);border:1px dashed var(--line);border-radius:6px;padding:40px 24px;text-align:center}
  .first-run.card[data-step]{border-style:solid;text-align:left}
  .first-run h2.serif{font-family:var(--display);font-weight:400;font-size:2.4rem;margin:0 0 10px}
  .first-run .lead{max-width:60ch;margin:0 auto 18px;color:var(--ink-soft)}
  .first-run-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .first-run .where{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:12px 0}
  .first-run .where-option{display:block;padding:4px 0}
  .first-run .where input[type="text"]{width:100%;max-width:60ch}
  .first-run .will-make{margin:6px 0 12px;padding-left:20px}
  /* E5-26 (15 §3, §20, §23; 24 §8; 25 §4; D-221, D-222, D-223; Direction C): the shell — the header, the tab row, the header search, the sync state, the avatar menu — and the title row every tab screen carries. Scoped under .shell and .tab-title: the Phase 0 header, nav and nav button rules above are overridden inside the shell and nothing outside it changes until the flip. Sizes in rem (25 §3: 26 px display, 14 px body, 12 px small, 11 px mono). */
  header.shell{background:var(--card);border-bottom:1px solid var(--ink);display:flex;flex-wrap:wrap;align-items:stretch;gap:0 20px;padding:0 24px}
  .shell .brand{display:flex;align-items:center;gap:14px;padding:12px 0}
  .shell .product{font-family:var(--display);font-size:1.7333rem;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
  .shell .divider{width:1px;height:20px;background:var(--line)}
  .shell .est{font-size:.9333rem;display:flex;align-items:center;gap:6px;color:var(--ink)}
  .shell select.est-switch{border:0;border-radius:0;background-color:transparent;padding:0 16px 0 0;font-size:.9333rem;color:var(--ink);background-position:right 2px center}
  .shell select.est-switch:hover{border:0}
  .shell select.est-switch:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .shell nav{max-width:none;margin:0;padding:0;display:flex;gap:18px;overflow:visible}
  .shell nav button{position:static;background:none;border:0;border-top:2px solid transparent;border-bottom:2px solid transparent;border-radius:0;padding:0 2px;font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft);white-space:nowrap}
  .shell nav button::after{content:none}
  .shell nav button:hover{color:var(--ink)}
  .shell nav button.on{color:var(--green);border-bottom-color:var(--green)}
  .shell nav button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .shell .tools{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:16px;padding:12px 0}
  .shell .jump{position:relative;flex:1 1 0;min-width:0;max-width:420px;margin-left:auto}
  .shell .jump input{width:100%;height:36px;margin:0;padding:0 50px 0 30px;border:1px solid var(--control);border-radius:6px;background:var(--paper);color:var(--ink);font-size:.8667rem;line-height:34px;appearance:none;-webkit-appearance:none}
  .shell .jump input::placeholder{color:var(--ink-tertiary);opacity:1}
  .shell .jump input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
  .shell .jump .glass{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-quaternary);font-size:1rem;line-height:1;pointer-events:none}
  .shell .jump .key{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.7333rem;line-height:1.3;color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:1px 5px;pointer-events:none}
  .shell .jump-results{position:absolute;z-index:41;top:calc(100% + 6px);left:0;right:0;list-style:none;margin:0;padding:6px 0;background:var(--card);border:1px solid var(--ink);border-radius:8px;box-shadow:0 14px 36px rgba(22,24,26,.18);max-height:360px;overflow:auto}
  .shell .jump-results:empty{display:none}
  .shell .jump-results button{width:100%;display:flex;gap:12px;align-items:baseline;padding:8px 14px;border:0;border-radius:0;background:none;text-align:left;font-size:.9333rem;color:var(--ink)}
  .shell .jump-results button:hover,.shell .jump-results button:focus-visible,.shell .jump-results li.on button{background:var(--green-soft);outline:none}
  .shell .jump-results .jr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .shell .jump-results .jr-second{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
  .shell .jump-results .jr-bin{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
  .shell .jump-results .jr-line{padding:8px 14px;font-size:.8rem;color:var(--ink-soft)}
  .shell .sync{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft);white-space:nowrap;flex:none}
  .shell .sync::before{content:'';width:0;height:0;border:3px solid var(--ink-quaternary);border-radius:50%;flex:none}   /* the 6 px dot is a border, so the copper one is a rule, not a fill (25 c4) */
  .shell .sync[data-tone="copper"]{color:var(--copper-text)}
  .shell .sync[data-tone="copper"]::before{border-color:var(--copper)}
  .shell .who{position:relative;flex:none}
  .shell button.avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--control);background:var(--green-soft);color:var(--green);font-size:.8rem;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
  .shell button.avatar[aria-expanded="true"],.shell button.avatar.on{box-shadow:0 0 0 2px var(--green)}   /* the menu open, or a screen reached from it */
  .shell button.avatar:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .shell .btn.signin{flex:none;height:36px;padding:0 16px;font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;border-radius:6px}   /* the design's button, not the Phase 0 capitals */
  .shell .menu{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--card);border:1px solid var(--ink);border-radius:8px;box-shadow:0 14px 36px rgba(22,24,26,.18);z-index:41;padding:6px 0;display:flex;flex-direction:column;text-align:left}
  .shell .menu[hidden]{display:none}
  .shell .menu .mwho{padding:10px 16px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
  .shell .menu .mname{font-size:1rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
  .shell .menu .mline{font-size:.8rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
  .shell .menu .mgroup{padding:6px 0}
  .shell .menu .mgroup+.mgroup{border-top:1px solid var(--line)}
  .shell .menu button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 16px;border:0;border-radius:0;background:none;text-align:left;font-size:.9333rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
  .shell .menu button:hover,.shell .menu button:focus-visible{background:var(--green-soft);outline:none}
  /* the title row of a tab screen (shots 05, 07, 08): the title in the display family at 44 px, the sub-tabs, a note on the right, one ink rule; a sub-tab that arrives with a later milestone is a marked word, not a greyed control */
  .tab-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;padding:28px 0 0;border-bottom:1px solid var(--ink);margin:0 0 24px}
  .tab-title h1{font-family:var(--display);font-size:2.9333rem;font-weight:400;line-height:1;letter-spacing:0;text-transform:none;margin:0 0 12px;color:var(--ink)}
  .subtabs{display:flex;gap:28px;align-items:baseline}
  .subtabs button,.subtabs .subtab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:0 0 10px;margin-bottom:-1px;font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft);white-space:nowrap}
  .subtabs button:hover{color:var(--ink)}
  .subtabs button.on{color:var(--green);border-bottom-color:var(--green)}
  .subtabs button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .subtabs .later .tag{font-family:var(--mono);font-size:.7333rem;color:var(--ink-soft);margin-left:4px}
  .tab-title .tab-note{margin:0 0 12px auto;font-size:.9333rem;color:var(--ink-soft)}
  .tab-empty{max-width:62ch;font-size:1rem;line-height:1.5;color:var(--ink)}
  /* The narrow desk, 760 to 1,100 px (ui/appshell.js WIDTHS; next-preview-fixes §5): every part of the header stays, nothing overlaps — the tools keep a real minimum and wrap to their own line when the brand and the tabs leave too little, the box is its icon until focused, the sync words are their dot (the words stay as the title and for a reader), the establishment name is capped. */
  @media (max-width:1100px){
    .shell .tools{min-width:220px}
    .shell .est{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
    .shell select.est-switch{max-width:220px;overflow:hidden;text-overflow:ellipsis}
    .shell .jump{flex:0 0 36px;min-width:36px;transition:flex-basis .13s ease}
    .shell .jump input{padding:0;color:transparent;cursor:pointer}
    .shell .jump input::placeholder{color:transparent}
    .shell .jump .key{display:none}
    .shell .jump:focus-within{flex:1 1 220px;min-width:180px}
    .shell .jump:focus-within input{padding:0 10px 0 30px;color:var(--ink);cursor:text}
    .shell .jump:focus-within input::placeholder{color:var(--ink-tertiary)}
    .shell .jump-results{left:auto;right:0;min-width:320px}
    .shell .sync{width:6px;overflow:hidden;gap:0;color:transparent}   /* the dot alone: the words are clipped, kept for the title and a reader */
  }