/* The LTHi look (Phase 12, docs/phase-12-lthi-look.md). Every colour, size, weight, radius
   and duration is a token named for its job. Light is on bare :root; dark follows the
   device (or a chosen data-theme) and changes tokens only. The printed page and the mark's
   own field are the same in both, because paper does not change with the room's lights. */
@font-face{font-family:"Hanken Grotesk";font-weight:400 600;font-style:normal;font-display:swap;src:url("../assets/fonts/HankenGrotesk-Variable.ttf") format("truetype")}
:root{
  --canvas:#F5F5F5;--surface:#FFFFFF;--surface-subtle:#EEEEEE;--accent-soft:#EAEAEA;--surface-pressed:#E2E2E2;
  --line:#DDDDDD;--control-border:#858585;
  --ink:#202020;--text-secondary:#626262;--on-ink:#FFFFFF;--on-ink-secondary:#B8B8B8;--ink-hover:#3A3A3A;--ink-pressed:#000000;
  --error:#A3322B;--destructive:#A3322B;--destructive-hover:#8A2A24;--destructive-pressed:#6F1D1D;--destructive-edge:#A3322B;--on-destructive:#FFFFFF;
  --track:#E2E2E2;--overlay:rgba(32,32,32,.4);--shadow-raised:0 4px 16px rgba(0,0,0,.12);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23202020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  /* The same in light and dark: the printed page, and the field behind the mark. */
  --paper:#FFFFFF;--print-ink:#000000;--paper-flag:#E2E2E2;--paper-mark:#202020;--brand-field:#202020;--brand-edge:#202020;
  --radius-control:6px;--radius-container:12px;
  --motion-fast:120ms;--motion-press:80ms;--motion-value:200ms;--motion-panel:240ms;
  --weight-regular:400;--weight-medium:500;--weight-strong:600;
  --size-label:12px;--size-ui:14px;--size-body:16px;--size-section:20px;--size-title:28px;--size-overview:clamp(36px,5vw,56px);
  --ui:"Hanken Grotesk",sans-serif;
  --t-label:var(--size-label)/18px var(--ui);--t-ui:var(--size-ui)/20px var(--ui);--t-body:var(--size-body)/24px var(--ui);
  --t-section:var(--size-section)/28px var(--ui);--t-title:var(--size-title)/36px var(--ui);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--canvas:#121212;--surface:#1C1C1C;--surface-subtle:#272727;--accent-soft:#2E2E2E;--surface-pressed:#363636;--line:#3A3A3A;--control-border:#7A7A7A;--ink:#EDEDED;--text-secondary:#A8A8A8;--on-ink:#1C1C1C;--on-ink-secondary:#555555;--ink-hover:#D2D2D2;--ink-pressed:#FFFFFF;--error:#F09C94;--destructive-edge:#F09C94;--track:#363636;--overlay:rgba(0,0,0,.6);--shadow-raised:0 4px 16px rgba(0,0,0,.5);--brand-edge:#3A3A3A;--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23EDEDED' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");color-scheme:dark}}
:root[data-theme="dark"]{--canvas:#121212;--surface:#1C1C1C;--surface-subtle:#272727;--accent-soft:#2E2E2E;--surface-pressed:#363636;--line:#3A3A3A;--control-border:#7A7A7A;--ink:#EDEDED;--text-secondary:#A8A8A8;--on-ink:#1C1C1C;--on-ink-secondary:#555555;--ink-hover:#D2D2D2;--ink-pressed:#FFFFFF;--error:#F09C94;--destructive-edge:#F09C94;--track:#363636;--overlay:rgba(0,0,0,.6);--shadow-raised:0 4px 16px rgba(0,0,0,.5);--brand-edge:#3A3A3A;--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23EDEDED' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");color-scheme:dark}
/* A dialog's ::backdrop takes custom properties from the page only in browsers from 2024
   on, so the overlay is set on it as well, light and dark, for the ones before. */
::backdrop{--overlay:rgba(32,32,32,.4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) ::backdrop{--overlay:rgba(0,0,0,.6)}}
:root[data-theme="dark"] ::backdrop{--overlay:rgba(0,0,0,.6)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--surface);color:var(--ink);font:var(--weight-regular) var(--t-ui);font-synthesis:none;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Text fields and selects: every input but tick boxes, radio buttons and file pickers.
   :where() gives these base rules no weight, so each screen's own rules win over them.
   The focus ring stays visible; it is never switched off. */
:where(input:not([type="checkbox"],[type="radio"],[type="file"]),select){width:100%;min-width:0;height:44px;padding:10px 12px;border:1px solid var(--control-border);border-radius:var(--radius-control);background-color:var(--surface);color:var(--ink);font:var(--weight-regular) var(--t-body);transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease}
/* A field with suggestions (the wine form's Producer, Appellation and the rest) shows the
   drawn chevron where the browser would put its own triangle, on hover and focus. */
input[list]::-webkit-calendar-picker-indicator{color:transparent;background:var(--chevron) center/16px no-repeat}
:where(select){appearance:none;-webkit-appearance:none;padding-right:34px;text-overflow:ellipsis;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 10px center}
:where(input:not([type="checkbox"],[type="radio"],[type="file"]),select):hover:not(:disabled){border-color:var(--ink)}
:where(input:not([type="checkbox"],[type="radio"],[type="file"]),select):focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-1px}
:where(input:not([type="checkbox"],[type="radio"],[type="file"]))[readonly],:where(input:not([type="checkbox"],[type="radio"],[type="file"]),select):disabled{background-color:var(--surface-subtle);color:var(--text-secondary)}
:where(input,select):disabled{cursor:not-allowed}
::placeholder{color:var(--text-secondary);opacity:1}
/* The tick is drawn in the accent; color is set too, so the browser's own field text
   (white in the dark) is never the box's colour. */
input[type="checkbox"]{accent-color:var(--ink);color:var(--ink)}
[hidden]{display:none!important}
/* Read aloud, not shown: the live regions inside a dialog (js/auth.js). */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Symbols are drawn (js/auth.js, Icon): 16px, in the colour of the words beside them. */
.ic{flex:none;display:inline-block;vertical-align:-3px}
strong{font-weight:var(--weight-medium)}
p{margin:0 0 16px}

/* ---------- The page and its type ---------- */
/* --gut is the page column's side padding, for blocks that run to the column's edges
   and pad themselves (the Library's bands). */
.wrap{max-width:1280px;margin:0 auto;padding:28px 32px 64px;--gut:32px}
.topline{display:flex;align-items:center}
h1{margin:0;font:var(--weight-medium) var(--t-title);color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
h2{margin:0;font:var(--weight-medium) var(--t-body);color:var(--ink)}
.sub{margin:4px 0 0;color:var(--text-secondary)}
/* A list's header: the title and its sub line at the left, the save line at the right. */
.edhead{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.edhead>div{flex:1 1 auto;min-width:0}
/* The save line (spec 6.4). It keeps one height and one width whatever it says, so the
   title beside it never rewraps and the tabs under it never jump. */
.saved{display:grid;flex:none;justify-items:end;align-items:center;min-height:20px;margin:0;color:var(--text-secondary);white-space:nowrap}
/* The phrase and two hidden copies of the longest ones share one cell, so the line is as
   wide as its longest phrase whatever it says. */
.saved>*{grid-area:1/1;display:flex;align-items:center;gap:6px}
.saved>.saved-size{visibility:hidden}
/* The few real section titles at 20/28: the last edited list's name in the Library. */
.h-section{margin:0;font:var(--weight-medium) var(--t-section);text-wrap:balance;overflow-wrap:break-word}
h1+.toolbar,.sub+.toolbar,h1+.warn,h1+p{margin-top:24px}
/* Platform: the add-client row sits a little further from the sub line, as in the demo. */
.sub+.toolbar:has(.newclient){margin-top:32px}
/* A section heading: 16/24 at 500 in ink, its rule running out to the right on the same
   line. In a toolbar it takes the free width, so a link or button sits after the rule. */
h3,.toolbar>h2{display:flex;align-items:center;gap:10px;min-height:24px;margin:28px 0 16px;font:var(--weight-medium) var(--t-body);color:var(--ink)}
h3::after,.toolbar>h2::after{content:"";flex:1;height:1px;background:var(--line)}
h3:first-child{margin-top:0}
.toolbar>h2,.toolbar>h3{flex:1 1 auto;margin:0}
.lead{max-width:720px;font:var(--weight-regular) var(--t-body)}
.muted{color:var(--text-secondary);font-weight:var(--weight-regular)}
.hint{font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}
.err{font:var(--weight-regular) var(--t-ui);color:var(--error)}

/* ---------- Buttons and links: 44px at every width ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font:var(--weight-medium) var(--t-ui);white-space:nowrap;user-select:none;cursor:pointer;transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-press) ease}
.btn:hover:not(:disabled){background:var(--surface-subtle)}
.btn:active:not(:disabled){background:var(--surface-pressed);transform:translateY(1px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn.primary:hover:not(:disabled){background:var(--ink-hover);border-color:var(--ink-hover)}
.btn.primary:active:not(:disabled){background:var(--ink-pressed);border-color:var(--ink-pressed)}
.btn.destructive{background:var(--destructive);border-color:var(--destructive-edge);color:var(--on-destructive)}
.btn.destructive:hover:not(:disabled){background:var(--destructive-hover)}
.btn.destructive:active:not(:disabled){background:var(--destructive-pressed)}
.icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color var(--motion-fast) ease,transform var(--motion-press) ease}
.icon:hover:not(:disabled){background:var(--surface-subtle)}
.icon:active:not(:disabled){background:var(--surface-pressed);transform:translateY(1px)}
/* Unavailable is painted by colour, never faded. */
.btn:disabled,.icon:disabled{background:var(--surface-subtle);border-color:var(--control-border);color:var(--text-secondary);cursor:not-allowed;transform:none}
/* Words under a form's button sit 16px below it, as in the demo's form stack. */
.btn+p{margin-top:16px}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:var(--weight-medium) var(--t-ui);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;transition:transform var(--motion-press) ease}
.link:hover:not(:disabled){text-decoration-thickness:2px}
.link:active:not(:disabled){transform:translateY(1px)}
.link:disabled{color:var(--text-secondary);cursor:not-allowed}
/* In a heading row or a banner a link keeps the row's height; its hit area is still 44px. */
.toolbar>h2~.link,.toolbar>h3~.link,.warn .link{position:relative;min-height:24px}
.toolbar>h2~.link::before,.toolbar>h3~.link::before,.warn .link::before{content:"";position:absolute;inset:-10px -8px}
/* After a heading's rule, a link sits 10px from it, as a button would. */
.toolbar>h2~.link,.toolbar>h3~.link{margin-left:-6px}

/* ---------- Fields ---------- */
.field{display:flex;flex-direction:column;min-width:0;margin-bottom:16px}
.flabel{font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}
.field>.flabel,.calc>.flabel{margin-bottom:6px}
.field>.hint,.field>.flagmsg,.override>.flagmsg{margin-top:4px}
/* background-color, not background, so a flagged select keeps its caret. */
.field.issue input,.field.issue select{background-color:var(--surface-subtle);border-color:var(--ink)}
.numwrap{position:relative;display:block}
.numwrap input{padding-right:40px;appearance:textfield;-moz-appearance:textfield}
.numwrap input::-webkit-inner-spin-button,.numwrap input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
.suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}
.search{position:relative;flex:1 1 240px;max-width:340px;min-width:0}
.search .ic{position:absolute;left:12px;top:14px;color:var(--text-secondary);pointer-events:none}
.search input{padding-left:36px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input{flex:none;width:18px;height:18px;margin:0}
/* Leave out if missing: the account menu's raised panel, opened from the button's left
   edge, its rows tick boxes. */
.btn.pickbtn{max-width:100%;white-space:normal;text-align:left}
.menu.pick{left:0;right:auto;width:300px}
.menu.pick .check{padding:0 10px;border-radius:var(--radius-control)}
.menu.pick .check:hover{background:var(--surface-subtle)}
.menu.pick .check .muted{margin-left:4px}
.override{display:flex;flex-direction:column}
.override.done .check{color:var(--text-secondary)}
/* A wine to check is a warning: a drawn mark and words, in ink. */
.flagmsg{display:flex;align-items:flex-start;gap:6px;font:var(--weight-medium) var(--t-label);color:var(--ink)}
.flagmsg .ic{margin-top:1px}
.spacer{height:8px}

/* ---------- Layout ---------- */
.grid2,.grid3,.grid4{display:grid;gap:16px 24px;margin-bottom:16px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Just past 900px the settings are still two columns, and four margin fields to a half
   leave too little room for "0.75": two to a row there. */
@media screen and (min-width:901px) and (max-width:980px){.cols .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid2>.field,.grid3>.field,.grid4>.field{margin-bottom:0}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 64px;margin-top:28px}
.cols:first-child{margin-top:0}
.cols>*>:last-child{margin-bottom:0}
/* A section is its heading and rule, not a box: a panel keeps only its spacing. */
.panel{margin:32px 0}
.panel:first-child,.tabs+.panel,h3+.panel{margin-top:0}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 16px}
.toolbar select{width:auto;max-width:100%}
/* Under the Preview's buttons: whose Word look the Word file uses (Phase 9). */
.toolbar+.wordline{margin:-8px 0 16px}
.count{margin-left:auto;color:var(--text-secondary)}
/* The Wines toolbar (Phase 13): the search gives way first, so the row holds from 900 up;
   narrower, the count and Download wines wrap together; at 720 and under the count takes
   its own line. */
.winesbar .search{flex:1 1 160px}
.barend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-left:auto}
.barend>.count{margin-left:0}
/* The Preview's one banner for wines to check (Phase 13): the count and Review them, then
   the highlight tick and the Leave out if missing picker on a line of their own. */
.checktools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:4px}
.panel:has(+.wizfoot){margin-bottom:0}
.wizfoot{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------- Tabs and segments: selected is a soft ground, ink at 500 and a 2px ink bar ---------- */
.tabs{display:flex;gap:4px;margin:20px -32px 24px;padding:0 32px;scroll-padding-inline:32px;overflow-x:auto;list-style:none;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs.steps>li{display:flex;flex:none}
/* The words sit in one line box, so a step reads "1 Basics" and the Check tab "Check 6". */
.tabs button{flex:none;height:44px;padding:12px 14px;border:0;border-radius:var(--radius-control) var(--radius-control) 0 0;background:none;color:var(--text-secondary);font:var(--weight-regular) var(--t-ui);white-space:nowrap;transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.tabs button:hover{background:var(--surface-subtle);color:var(--ink)}
.tabs button:active{background:var(--surface-pressed)}
.tabs button.on,.tabs button[aria-selected="true"],.tabs button[aria-current="step"]{background:var(--accent-soft);color:var(--ink);font-weight:var(--weight-medium);box-shadow:inset 0 -2px 0 var(--ink)}
.tabs button:focus-visible{outline-offset:-2px}
.tabs .badge{margin-left:4px;padding:1px 7px}
.stepno{margin-right:4px}
.subtabs{display:inline-flex;max-width:100%;margin:0 0 24px;overflow-x:auto;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--surface);scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{flex:none;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text-secondary);font:var(--weight-regular) var(--t-ui);white-space:nowrap;transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-press) ease}
.subtabs button:last-child{border-right:0}
.subtabs button:hover{background:var(--surface-subtle);color:var(--ink)}
.subtabs button:active{background:var(--surface-pressed);transform:translateY(1px)}
.subtabs button:focus-visible{outline-offset:-2px}
.subtabs button.on,.subtabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--ink);font-weight:var(--weight-medium);box-shadow:inset 0 -2px 0 var(--ink)}
.subtabs.inline{margin:0}

/* ---------- Tables: ruled rows, no frame; wide ones scroll inside their wrapper ---------- */
.tablewrap{overflow-x:auto;margin:0 -14px 16px}
.tablewrap:focus-visible{outline-offset:-2px}
table.wines{width:100%;min-width:var(--minw,0);border-collapse:collapse}
.wines th{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:bottom;font:var(--weight-regular) var(--t-label);color:var(--text-secondary);white-space:nowrap}
.wines td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.wines tbody tr:last-child td{border-bottom:0}
.wines .r{text-align:right}
.wines tr.mid>td{padding-top:4px;padding-bottom:4px;vertical-align:middle}
/* Rows that open something: the Wines table, the Library and the Platform's clients. */
:where(table.wines:not(.static)) tbody tr:not(.grp){cursor:pointer}
:where(table.wines:not(.static)) tbody tr:not(.grp):hover>td{background:var(--surface-subtle)}
:where(table.wines:not(.static)) tbody tr:not(.grp):active>td{background:var(--surface-pressed)}
.wines tbody tr:focus-visible{outline-offset:-2px}
.wines tr.grp>td{padding:8px 14px;background:var(--canvas);font-weight:var(--weight-medium);cursor:default}
.wines tr.grp .muted{margin-left:2px}
.wines tr.hidden>td{color:var(--text-secondary)}
.wines td.flag,.wines td.over{background:var(--surface-subtle)}
.wines tr.total>td,.over{font-weight:var(--weight-strong)}
.wines .link{font-weight:var(--weight-regular)}
.wines td select{min-width:160px}
.wines td.nw,.actions{white-space:nowrap}
.actions .link+.link{margin-left:16px}
/* The Sommelier's Selection column: the tick box keeps a 44px hit area. */
.wines th.selcol{max-width:96px;white-space:normal}
.wines th.twoline{white-space:normal}
.wines td.selcell{padding-top:0;padding-bottom:0;text-align:center;cursor:default}
.selhit{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto;cursor:pointer}
.selhit input{flex:none;width:18px;height:18px;margin:0}
.selcat{margin:-8px 0 8px;font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}

/* ---------- The Library overview (spec 6.1): bands that run to the page column's edges ---------- */
/* Each band carries the side padding (--gut), so the column itself has none. */
.wrap.library{padding:0}
.ov-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-bottom:1px solid var(--line)}
.ov-head.solo{grid-template-columns:minmax(0,1fr)}
.ov-main{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:56px var(--gut) 40px}
.ov-main>.toolbar{margin:0}
/* The one heading at the overview size: "Wine lists", the client's name under it. */
.ov-title{font:var(--weight-medium) var(--size-overview)/1.07 var(--ui);overflow-wrap:break-word}
.ov-title span{display:block;color:var(--text-secondary)}
/* The last edited list, behind a 1px rule: its first page, its name, five facts, Open list. */
.ov-feature{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;align-items:end;padding:32px var(--gut) 32px 32px;border-left:1px solid var(--line)}
.ov-feature .stack{gap:12px}
.ov-feature p{margin:0}
.facts{display:flex;flex-direction:column;gap:2px;color:var(--text-secondary);overflow-wrap:break-word}
/* A list's first printed page: paper in light and in dark, a 1px edge and no shadow. */
.thumb{display:block;border:1px solid var(--line);background:var(--paper);line-height:0}
.thumb.sm{flex:none;width:36px}
/* The facts band: Venues and Lists, two cells in one row at every width, divided by one
   1px rule (Phase 13). Above 900px the rule lines up with the heading band's. */
.ov-meta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin:0;border-bottom:1px solid var(--line)}
.ov-meta>div{padding:16px 24px;border-left:1px solid var(--line)}
.ov-meta>div:first-child{padding-left:var(--gut);border-left:0}
.ov-meta dt{font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}
.ov-meta dd{margin:0;font-weight:var(--weight-medium);overflow-wrap:break-word}
/* All lists, and Deleted lists under it: a heading and its table, 16px apart. Only the
   blocks' own top and bottom margins go, so a table keeps its negative side margins and
   its words line up with the heading. */
.ov-lists{display:flex;flex-direction:column;gap:16px;padding:32px var(--gut) 48px}
.ov-lists>*{margin-top:0;margin-bottom:0}
.listcell{display:flex;align-items:center;gap:16px}

/* ---------- Badges, banners, empty states, the toast ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-control);background:var(--surface-subtle);color:var(--ink);font:var(--weight-medium) var(--t-label);white-space:nowrap}
.warn{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--radius-container);background:var(--surface)}
.warn-body{min-width:0}
.warn ul{margin:4px 0 0;padding-left:18px}
.warn p{margin:4px 0 0;color:var(--text-secondary)}
.empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 24px;text-align:center}
.empty p{max-width:460px;margin:0;color:var(--text-secondary);font:var(--weight-regular) var(--t-body)}
/* A popover in the top layer, held 16px in from each side and centred between them, so a
   long message wraps at the screen's width less 32px rather than at half of it. */
.toast{position:fixed;inset:auto 16px calc(24px + env(safe-area-inset-bottom,0px)) 16px;width:fit-content;margin:0 auto;border:0;overflow:visible;z-index:20;padding:10px 16px;border-radius:var(--radius-control);background:var(--ink);color:var(--on-ink);font:var(--weight-medium) var(--t-ui)}

/* ---------- Dialogs: native, raised over the overlay ---------- */
/* The wine form, Import and every confirmation (js/auth.js, Modal and askConfirm). The
   dialog's ::backdrop is the overlay. The head and foot stay in view and only the body
   scrolls; the dialog itself never scrolls, so a press on a scrollbar is never read as a
   press on the backdrop. */
dialog.modal{width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:var(--radius-container);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-raised);overflow:hidden}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal.narrow{width:min(480px,calc(100vw - 32px))}
dialog.modal::backdrop{background:var(--overlay)}
.modal-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 24px;border-bottom:1px solid var(--line)}
.modal-head h2{min-width:0;margin:0;font:var(--weight-medium) var(--t-body);overflow-wrap:anywhere}
.modal-body{min-height:0;padding:20px 24px 24px;overflow-y:auto}
.modal-body>:last-child{margin-bottom:0}
.modal-foot{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 24px;border-top:1px solid var(--line)}
.foot-start{display:flex;align-items:center;gap:16px;min-width:0}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
/* A confirmation: narrow, Cancel first, the action at the right. Names in it are typed
   data, so a long one breaks rather than widening the dialog. With no body, the head
   sits on the foot with one rule between them, not two. */
dialog.modal.confirm .modal-body{overflow-wrap:anywhere}
dialog.modal.confirm .modal-head+.modal-foot{border-top:0}
/* Cancel shows the ring as the confirmation opens, even when a mouse opened it: a browser
   may not ring a focus moved by script (acceptance step 6, "Cancel already highlighted"). */
dialog.modal.confirm .btns>.btn:first-child:focus{outline:2px solid var(--ink);outline-offset:2px}
/* The wine form's cost band is a ruled section, headed by its h3. */
.backend{margin-top:24px}
.calc{display:flex;flex-direction:column;min-width:0}
.calc>span:nth-child(2){display:flex;align-items:center;min-height:44px;font:var(--weight-regular) var(--t-body)}
.calc>.hint{margin-top:4px}
.costline{display:flex;flex-wrap:wrap;align-items:center;gap:0 32px}
.costline>span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:44px}

/* ---------- Settings pieces ---------- */
.seclist,.fieldorder{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.secrow{display:flex;align-items:center;gap:4px}
.secrow input{flex:1}
:not(.seclist)>.secrow+.secrow{margin-top:8px}
/* A section's row: its name, its arrows and remove (its New page tick moved to Page and
   type in Phase 13). */
.secitem{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 44px;grid-template-areas:"name up down x";gap:4px;align-items:center}
.secitem .sname{grid-area:name}
.secitem .sup{grid-area:up}.secitem .sdown{grid-area:down}.secitem .sx{grid-area:x}
/* A door (Phase 13): a section heading with its rule and a link after it (History's
   Refresh is the model), then one quiet line saying what is set, or, open, the content.
   The inline door is one line among tick boxes, set in under the box above it. No box,
   no caret, no motion. */
.door{margin-top:28px}
.door:first-child{margin-top:0}
.door>.toolbar{margin:0}
.door>.doorsum{margin:4px 0 0}
.door>.doorbody{margin-top:16px}
.doorbody>:last-child{margin-bottom:0}
.door.inline{margin:0}
.door.inline>.doorbody{margin:4px 0 8px 28px}
.doorline{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding-left:28px}
/* Download wines: the menu opens from the button's left edge, or from its right when the window ends too soon. */
.menu.dl{left:0;right:auto}
.menu.dl.fromright{left:auto;right:0}
/* A venue on the Platform screen: its name, arrows, remove and Word look; on a narrow
   screen the buttons wrap under the name. */
.secrow.venue{flex-wrap:wrap}
.secrow.venue input{flex:1 1 160px}
/* The Word look (Phase 9): its sample is a piece of the printed page, on paper white. On
   Platform it opens under its venue's row, ruled off above and below (Phase 13). */
.wordlook{margin:16px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wlsample{max-width:560px;padding:28px 32px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--paper);color:var(--print-ink)}
.wlline{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.wlread{padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-container)}
.wlread p,.wlread ul{margin:0 0 8px}
.wlread ul{padding-left:20px}
.wltable td{vertical-align:middle}
.wltable .numwrap{min-width:96px}
.forow{display:flex;align-items:center;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.forow .check{flex:1}
.forow.off .check{color:var(--text-secondary)}
/* Countries and regions in printed order: a region sits indented under its country. */
.forow>.oname{flex:1;min-width:0;font:var(--weight-regular) var(--t-ui)}
.forow.nested{padding-left:24px}
.ocount{color:var(--text-secondary)}
.rgroup{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rchoices{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));column-gap:16px}
/* A saved region group is one line; the one being made or changed opens in a box. */
.rgroup.closed{padding-bottom:8px}
.gline{display:flex;align-items:center;gap:8px}
.gline>.oname{flex:1;min-width:0;font:var(--weight-regular) var(--t-ui)}
.rgroup.editing{padding:16px;border:1px solid var(--line);border-radius:var(--radius-container)}
.gactions{display:flex;flex-wrap:wrap;gap:8px}
.typegrid{display:grid;grid-template-columns:auto minmax(0,1fr) 104px;gap:8px 12px;align-items:center;margin-bottom:16px}
.tlabel{font:var(--weight-regular) var(--t-ui)}
/* Design set cards: the card is interface; the specimen inside it is a piece of the
   printed page, so it is paper in light and in dark. */
.sets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.setcard{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 8px 12px;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);text-align:center;cursor:pointer;transition:background-color var(--motion-fast) ease,transform var(--motion-press) ease}
.setcard:hover{background:var(--surface-subtle)}
.setcard:active{background:var(--surface-pressed);transform:translateY(1px)}
.setcard.on,.setcard[aria-pressed="true"]{border:2px solid var(--ink);padding:7px 7px 11px;background:var(--surface)}
.specimen{display:flex;flex-direction:column;align-items:center;gap:4px;align-self:stretch;padding:14px 6px;background:var(--paper);color:var(--print-ink)}
.setname{font-size:24px;line-height:1.2}
.sethead{margin-top:4px;font-size:11px;line-height:1.4}
.setline{font-size:13px;line-height:1.4}
.setnote{margin-top:8px;font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}
.setstate{display:flex;align-items:center;gap:4px;min-height:18px;font:var(--weight-medium) var(--t-label);color:var(--ink)}

/* ---------- Drawn pages: the client's content, paper in light and in dark ---------- */
/* The print faces set figures as they always have: the interface's equal-width figures and
   its no-faux-styles rule stop here, so the preview and Print draw exactly what they did. */
.page,.specimen{font-variant-numeric:normal;font-synthesis:initial}
.page{display:block;width:100%;height:auto}
.page .pg-paper{fill:var(--paper)}
.page text{fill:var(--print-ink)}
.page .pg-flag{fill:var(--paper-flag)}
.page .pg-mark{fill:var(--paper-mark)}
.pages{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 16px;border-radius:var(--radius-container);background:var(--canvas)}
.pagebox{width:100%;max-width:720px}
.pagebox .page{border:1px solid var(--line)}
.pno{margin-top:8px;text-align:center;font:var(--weight-regular) var(--t-label);color:var(--text-secondary)}
.sample{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.sample>h3{margin:0}
.sample .page{max-width:640px;border:1px solid var(--line)}

/* ---------- Stacks: blocks spaced by one gap, as the demo spaces them ---------- */
/* A column of a settings panel is a stack: 16px between its parts, 4px inside a group of
   tick boxes, 32px between groups. Its children keep no margins of their own. */
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.stack.tight{gap:4px}
.stack.loose{gap:32px}
.stack>*{margin:0}
.stack.tight>.stack{margin-top:12px}
.stack+.cols{margin-top:24px}
.cols>*>:last-child>:last-child{margin-bottom:0}
/* Inside a list's tab, the blocks sit 24px apart (a heading row and its content, 16px). */
.tabbody>div>.warn,.tabbody>div>.lead,.tabbody>div>.tablewrap,.tabbody>div>.panel,.tabbody>div>.door{margin-bottom:24px}
/* Apart, so a browser without :has() drops only this rule, not the spacing above. */
.tabbody>div>.toolbar:not(:has(>h3)){margin-bottom:24px}
.tabbody>div>h3:not(:first-child){margin-top:24px}
/* A line of reading text keeps a comfortable measure on a wide page. */
.measure{max-width:720px}

/* ---------- Narrower screens. Screen only, so no width rule ever reaches a printed page. ---------- */
@media screen and (max-width:1100px){
  /* A scroller clips what lies outside it, so 4px of room each side keeps a card's focus
     ring whole; the matching negative margin leaves the cards where they were. */
  .sets{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:172px;overflow-x:auto;margin:-4px -4px 0;padding:4px 4px 8px;scroll-padding-inline:4px}
}
@media screen and (max-width:900px){
  .cols{grid-template-columns:minmax(0,1fr)}
  /* The Library's heading band stacks: the last edited list goes under the title. */
  .ov-head{grid-template-columns:minmax(0,1fr)}
  .ov-main{gap:32px;padding:40px var(--gut) 32px}
  .ov-feature{padding:24px var(--gut);border-left:0;border-top:1px solid var(--line)}
  .ov-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media screen and (max-width:720px){
  .wrap{padding:20px 16px 48px;--gut:16px}
  /* The save line goes under the list's name. */
  .edhead{flex-wrap:wrap}
  .edhead>.saved{flex-basis:100%;justify-items:start}
  .ov-feature{grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:16px}
  .ov-meta>div{padding:12px 16px}
  dialog.modal{max-height:calc(100dvh - 16px)}
  .tabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scroll-padding-inline:16px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .count{flex-basis:100%;margin-left:0}
  .barend{flex-basis:100%;margin-left:0}
  /* On a phone the search keeps a row of its own, as before Phase 13. */
  .winesbar .search{flex-basis:240px}
  .typegrid{grid-template-columns:auto minmax(0,1fr) 88px}
  .pages{padding:16px 12px}
  .modal-head,.modal-foot{padding-left:16px;padding-right:16px}
  .modal-body{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Print draws the preview's pages and nothing else: no frame, no highlight, no margin mark.
   This stays the last block in the file. */
@media print{
  body{background:var(--paper)}
  body *{visibility:hidden}
  .pages,.pages *{visibility:visible}
  /* Hidden things still take room, and a screen taller than the pages would print blank
     sheets after them: everything that neither holds the pages nor sits inside them goes. */
  body *:not(:has(.pages)):not(.pages):not(.pages *){display:none}
  .pages{position:absolute;left:0;top:0;display:block;width:100%;padding:0;gap:0;border-radius:0;background:none}
  .pagebox{width:100%;max-width:none;break-after:page;page-break-after:always}
  .pagebox:last-child{break-after:auto;page-break-after:auto}
  .pagebox .page{border:0;box-shadow:none}
  .pno,.toast,.flagrect,.menu{display:none}
  /* A dialog and the account menu are never inside .pages, so neither prints; nor does
     the overlay behind an open dialog. */
  dialog.modal,dialog.modal[open]{display:none}
  dialog.modal::backdrop{display:none}
}