/* Armoir — "Paper & Ink". Light only, one accent (sienna) for what needs attention. */
:root{
  color-scheme: light;
  /* Neutrals */
  --paper:#F7F4EE;
  --paper-2:#EFEBE3;
  --paper-3:#E8E3D9;
  --sheet:#FCFBF8;
  --field:#FFFFFF;
  --line:#E5DFD5;
  --control:#928C82;
  --control-hover:#6E6A62;
  --ink:#1C1B19;
  --ink-hover:#2E2B27;
  --ink-2:#4A4640;
  --ink-3:#6E6A62;
  --ink-4:#A39E94;
  --accent:#A64B24;
  --accent-hover:#8E3F1D;
  --accent-tint:#F4E7DE;
  --on-ink:#F7F4EE;
  --scrim:rgba(28,27,25,.32);
  --selection:#E9DCCF;

  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-serif,"New York","Iowan Old Style",Charter,"Sitka Text",Cambria,Georgia,serif;

  /* Spacing (4-pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:20px;
  --col:760px;

  /* Radii */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-sheet:16px; --r-pill:999px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(28,27,25,.05),0 1px 1px rgba(28,27,25,.03);
  --shadow-2:0 2px 6px rgba(28,27,25,.06),0 24px 48px -12px rgba(28,27,25,.18);
  --shadow-3:0 8px 24px -6px rgba(28,27,25,.24);

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-sheet:cubic-bezier(.2,.8,.2,1);
  --d-press:90ms; --d-1:120ms; --d-2:180ms; --d-3:280ms; --d-close:200ms;
}
@media (min-width:640px){ :root{ --gutter:32px; } }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--paper);color:var(--ink);margin:0}
body{font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}
::selection{background:var(--selection);color:var(--ink)}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
button:disabled{cursor:default}
input,select,textarea{font:inherit;color:inherit}
h1,h2,p{margin:0}
img,svg{display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Type scale ---------- */
.t-display{font:400 34px/40px var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.t-title{font:400 22px/28px var(--serif);font-variant-numeric:tabular-nums lining-nums}
.t-body{font:400 16px/24px var(--sans)}
.t-meta{font:400 14px/20px var(--sans)}
.t-label{font:600 12px/16px var(--sans);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:399px){ .t-display{font-size:30px;line-height:36px} }
.arrow{color:var(--ink-4);display:inline-block;transition:transform var(--d-1) var(--ease-out)}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:10;background:var(--paper);padding-top:env(safe-area-inset-top);transition:box-shadow var(--d-1) var(--ease-out)}
.top.scrolled{box-shadow:inset 0 -1px 0 var(--line)}
.top-inner{max-width:var(--col);margin-inline:auto;height:64px;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.wordmark{font:500 22px/28px var(--serif);margin:0;color:var(--ink)}
.more{position:relative}

.icon-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);transition:background-color var(--d-1) var(--ease-out),color var(--d-1)}
.icon-btn[aria-expanded="true"]{background:var(--paper-2);color:var(--ink)}
.icon-btn:active{background:var(--paper-3)}

.menu{position:absolute;top:calc(100% + 4px);right:-6px;width:240px;padding:6px;background:var(--sheet);border-radius:var(--r-md);box-shadow:var(--shadow-2);z-index:40}
.menu-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:44px;padding:0 12px;border:0;background:none;border-radius:8px;text-align:left;font:400 16px/24px var(--sans);color:var(--ink);transition:background-color var(--d-1) var(--ease-out)}
.menu-item--two{padding:8px 12px}
.menu-item small{font:400 14px/20px var(--sans);color:var(--ink-3)}
.menu-item:active{background:var(--paper-3)}
.menu-sep{border:0;border-top:1px solid var(--line);margin:6px 0}

/* Language: two quiet options, FR · EN. The current one is ink and underlined (not colour alone). */
.lang{display:flex;align-items:center}
.lang-opt{min-width:40px;min-height:44px;padding:0 8px;border:0;background:none;border-radius:8px;font:600 12px/16px var(--sans);letter-spacing:.08em;color:var(--ink-3);text-underline-offset:5px;text-decoration-thickness:1.5px;transition:color var(--d-1) var(--ease-out)}
.lang-opt[aria-pressed="true"]{color:var(--ink);text-decoration:underline}
.lang-opt:active{opacity:.7}
.lang-sep{color:var(--ink-4);font-size:12px;line-height:16px}
#langTop{margin-right:-8px}
.menu-lang{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 0 0 12px;font:400 16px/24px var(--sans);color:var(--ink)}

/* ---------- Column ---------- */
main.col{max-width:var(--col);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
#sentinel{height:1px}

/* ---------- Fields (shared) ---------- */
.field{display:grid;gap:6px;margin-bottom:16px;min-width:0}
.field > label,.seg-field > legend{font:500 14px/20px var(--sans);color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;height:48px;padding:0 14px;background:var(--field);border:1px solid var(--control);border-radius:var(--r-md);font:400 16px/24px var(--sans);color:var(--ink);transition:border-color var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out);appearance:none;-webkit-appearance:none;margin:0}
.field input::placeholder,.field textarea::placeholder,.search::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,27,25,.10)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--paper-2);color:var(--ink-3);border-color:var(--line)}
.field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.field select{padding-right:36px;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234A4640' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 12px}
.field input[type=date]{display:block;line-height:46px;min-width:0}
.field input[type=date]::-webkit-date-and-time-value{text-align:left}
.field input[type=date]::-webkit-calendar-picker-indicator{opacity:.6}
.field input[type=number]{font-variant-numeric:tabular-nums lining-nums;-moz-appearance:textfield}
.field input[type=number]::-webkit-inner-spin-button,.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--accent)}
.hint{font:400 14px/20px var(--sans);color:var(--ink-3);margin-top:0}
.field .hint,.field .field-error{margin-top:0}
.field-error{font:400 14px/20px var(--sans);color:var(--accent)}
.opt{color:var(--ink-3);font-weight:400}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-md);border:1px solid transparent;font:500 16px/24px var(--sans);white-space:nowrap;transition:background-color var(--d-1) var(--ease-out),color var(--d-1),border-color var(--d-1),box-shadow var(--d-1),transform var(--d-press)}
.btn:disabled{opacity:.4}
.btn-primary{background:var(--ink);color:var(--on-ink)}
.btn-primary:focus-visible,.btn-danger:focus-visible{outline-offset:3px}
.btn-primary:active:not(:disabled){background:#000;transform:scale(.98)}
.btn-secondary{background:transparent;border-color:var(--control);color:var(--ink)}
.btn-secondary:active:not(:disabled){background:var(--paper-3);transform:scale(.98)}
.btn-danger{background:var(--accent);color:var(--on-ink)}
.btn-danger:active:not(:disabled){transform:scale(.98)}
.btn-block{display:flex;width:100%}

.text-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink-2);font:500 16px/24px var(--sans);text-underline-offset:3px;text-decoration-thickness:1px;border-radius:6px;transition:background-color var(--d-1) var(--ease-out),color var(--d-1)}
.text-btn.small{font-size:14px;line-height:20px}
.text-btn:active:not(:disabled){opacity:.7}
.text-btn:disabled{color:var(--ink-4)}
.text-btn.center{display:flex;width:fit-content;max-width:100%;justify-content:center;margin:16px auto 0;font-size:14px;line-height:20px;text-align:center}
.text-btn.danger{color:var(--accent);padding:0 8px;margin-left:-8px;border-radius:8px}
.text-btn.danger:active{background:var(--paper-3);opacity:1}
#showHistory{margin-left:-4px}

/* ---------- Sign-in ---------- */
.auth{max-width:400px;margin:0 auto;padding:12vh var(--gutter) 64px}
@media (max-height:700px){ .auth{padding-top:8vh} }
main.col > .auth{padding-inline:0}
.auth-logo{width:56px;height:56px;margin-bottom:24px}
#authTitle{color:var(--ink);margin:0}
.auth-sub{margin:8px 0 0;color:var(--ink-3)}
.auth form{margin-top:32px}
.auth .btn-block{margin-top:8px}
.pw{position:relative}
.pw input{padding-right:96px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 12px;border:0;background:none;font:500 14px/20px var(--sans);color:var(--ink-2);border-radius:8px;text-underline-offset:3px;transition:opacity var(--d-1)}
.pw-toggle:active{opacity:.7}
.auth-msg{font:400 14px/20px var(--sans);min-height:20px;margin:16px 0 0;text-align:center;color:var(--accent)}
.auth-msg.ok{color:var(--ink-2)}
.auth-msg.ok::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);vertical-align:middle;margin-right:8px}

/* ---------- Offline band ---------- */
.offline{background:var(--paper-2);border-radius:var(--r-md);padding:12px 16px;font:400 14px/20px var(--sans);color:var(--ink-2);margin-top:8px}

/* ---------- Ledger ---------- */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.fig{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:0;padding:16px 0}
.fig b{font-weight:400;color:var(--ink);display:inline-block;font-variant-numeric:tabular-nums lining-nums}
.fig b.is-empty{color:var(--ink-4)}
.fig b.is-alert{color:var(--accent)}
.fig > span{font:400 14px/20px var(--sans);color:var(--ink-3);white-space:nowrap}
.fig--link{width:100%;min-height:44px;border:0;background:none;margin:0;color:inherit;border-radius:0;transition:opacity var(--d-1)}
.fig--link:active{opacity:.7}
.fig-label{text-underline-offset:3px;text-decoration-thickness:1px}
.ledger > .fig:nth-child(2),.ledger > .fig:nth-child(4){border-left:1px solid var(--line);padding-left:20px}
.ledger > .fig:nth-child(3),.ledger > .fig:nth-child(4){border-top:1px solid var(--line)}
@media (min-width:600px){
  .ledger{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ledger > .fig{padding:0 16px;border-top:0}
  .ledger > .fig:first-child{padding-left:0}
  .ledger > .fig:nth-child(n+2){border-left:1px solid var(--line);padding-left:16px}
  .ledger > .fig:nth-child(3),.ledger > .fig:nth-child(4){border-top:0}
}
@media (min-width:640px){
  .ledger > .fig{padding:0 24px}
  .ledger > .fig:first-child{padding-left:0}
  .ledger > .fig:nth-child(n+2){padding-left:24px}
}

/* ---------- Sync line ---------- */
.syncline{display:flex;gap:8px;align-items:center;min-height:16px;margin-top:12px;font:400 12px/16px var(--sans);color:var(--ink-3)}
#status,#syncTime{font-variant-numeric:tabular-nums lining-nums}
#status.error{color:var(--accent)}
.syncline .text-btn.small{min-height:16px;font:500 12px/16px var(--sans);color:var(--ink-2);text-decoration:underline;padding:0;position:relative}
.syncline .text-btn.small::after{content:'';position:absolute;inset:-14px -8px}
#app.readonly .syncline{display:none}
@media (min-width:640px){ .syncline{justify-content:flex-end} }

/* ---------- Alert ---------- */
.alert{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin-top:16px;padding:0;border:0;background:none;text-align:left;font:400 14px/20px var(--sans);color:var(--ink);border-radius:8px}
.alert .dot{flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent)}
.alert.has-expired .dot{background:var(--accent)}
.alert-cta{margin-left:auto;flex:none;font-weight:500;color:var(--ink-2);padding-left:8px}
.alert-review{text-underline-offset:3px;text-decoration-thickness:1px}
.alert:active{opacity:.7}

/* ---------- Tabs ---------- */
.tabsrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);margin-top:32px}
.tabs{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;flex-wrap:nowrap;margin-bottom:-1px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;flex:none;height:44px;padding:0;border:0;background:none;white-space:nowrap;font:500 14px/20px var(--sans);color:var(--ink-3);transition:color var(--d-1) var(--ease-out)}
.tabs button[aria-current="page"]{color:var(--ink)}
.tabs button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.tabs button[aria-current="page"]::after{transform:scaleX(1)}
.tabs button:focus-visible{outline-offset:-2px;border-radius:4px}
.tabs button:active:not([aria-current="page"]){color:var(--ink-2)}
.tab-count{margin-left:4px;font:400 12px/16px var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums lining-nums}
.tab-count.is-alert{color:var(--accent)}
@media (max-width:399px){ .tabs{gap:16px} :root:lang(fr) .tabs{gap:14px} }

/* ---------- Add ---------- */
.add{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:20;height:52px;padding:0 22px 0 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-1);gap:8px}
@media (min-width:640px){
  .add{position:static;height:44px;border-radius:var(--r-md);box-shadow:none;margin-bottom:6px;padding:0 18px 0 16px;flex:none}
}

/* ---------- Toolbar ---------- */
.toolbar{margin-top:16px}
.search{display:block;height:44px;width:100%;padding:0 14px 0 40px;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%236E6A62' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%236E6A62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 14px center / 16px 16px;border:1px solid var(--control);border-radius:var(--r-md);font:400 16px/24px var(--sans);color:var(--ink);appearance:none;-webkit-appearance:none;margin:0;transition:border-color var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out)}
.search::-webkit-search-decoration{-webkit-appearance:none}
.search:focus,.search:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,27,25,.10)}
.chips{display:flex;gap:8px;margin-top:8px}
.chip{flex:1;min-width:0;appearance:none;-webkit-appearance:none;height:44px;margin:0;padding:0 34px 0 14px;border:1px solid var(--control);border-radius:var(--r-pill);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234A4640' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 12px;font:500 14px/20px var(--sans);color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color var(--d-1) var(--ease-out),border-color var(--d-1),color var(--d-1)}
.chip.active{border-color:var(--ink);color:var(--ink)}
.chip:active{background-color:var(--paper-3)}
#owner{flex:0 1 auto}
@media (pointer:coarse){ .chip{font-size:16px;line-height:24px} }
@media (min-width:640px){
  .toolbar{display:flex;gap:12px;align-items:center}
  .search{flex:1;min-width:0}
  .chips{margin-top:0}
  .chip{flex:none;max-width:200px}
}

/* ---------- History bar, caption, results ---------- */
.historybar{margin-top:16px}
#historyEyebrow{color:var(--ink-3)}
#historyTitle{margin-top:4px;overflow-wrap:anywhere}
#historyAll{margin-top:4px;margin-left:-4px;font-size:14px;line-height:20px}
.historybar > :first-child:not([hidden]){margin-top:0}
.caption{margin-top:12px;font:400 14px/20px var(--sans);color:var(--ink-3)}
.results{display:flex;gap:12px;align-items:center;margin-top:12px;font:400 14px/20px var(--sans);color:var(--ink-3)}
.caption:not([hidden]) + .results{margin-top:4px}
.results .text-btn.small{min-height:44px;margin-block:-12px}

/* ---------- Rows ---------- */
.rows{margin-top:8px;padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.rows:focus:not(:focus-visible){outline:none}
.rows:focus-visible{outline-offset:4px;border-radius:var(--r-sm)}
.group{font:600 12px/16px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:32px 0 8px;margin:0}
.rows > .group:first-child{padding-top:24px}

.row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:72px;border-top:1px solid var(--line)}
.rows > .row:last-child,.rows > .event:last-child,.rows > .skeleton:last-of-type{border-bottom:1px solid var(--line)}
.row::before{content:'';position:absolute;inset:0 -12px;border-radius:var(--r-md);background:transparent;z-index:-1;transition:background-color var(--d-1) var(--ease-out)}
.row:has(.row-main:active)::before{background:var(--paper-3)}
.row-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-width:0;padding:16px 0;margin:0;border:0;background:none;text-align:left;border-radius:8px;color:inherit}
.row-main:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.row-name{font:500 16px/24px var(--sans);color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:100%}
.row-meta{font:400 14px/20px var(--sans);color:var(--ink-3);overflow-wrap:anywhere;max-width:100%;font-variant-numeric:tabular-nums lining-nums}
.row-meta b{font-weight:500;color:var(--ink-2)}
.row-meta .state{color:var(--accent);font-weight:500}
.row-note{font:italic 400 14px/20px var(--serif);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:2px}

/* Expiry marker */
.life{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:400 14px/20px var(--sans);font-variant-numeric:tabular-nums lining-nums}
.life i{flex:none;width:8px;height:8px;border-radius:50%}
.life--critical{color:var(--accent);font-weight:500}
.life--critical i{background:var(--accent)}
.life--warn{color:var(--ink-2)}
.life--warn i{box-shadow:inset 0 0 0 1.5px var(--accent)}
.life--calm{color:var(--ink-3)}
.life--calm i{display:none}

/* Stepper */
.stepper{display:flex;align-items:center}
.step{position:relative;width:44px;height:44px;padding:0;margin:0;border:0;background:none;color:var(--ink-2);display:grid;place-items:center;border-radius:var(--r-pill);transition:transform var(--d-press) var(--ease-out),color var(--d-1)}
.step::before{content:'';position:absolute;inset:4px;border:1px solid var(--control);border-radius:var(--r-pill);background:transparent;transition:background-color var(--d-1),border-color var(--d-1)}
.step svg{position:relative}
.step:active:not(:disabled){transform:scale(.94)}
.step:active:not(:disabled)::before{background:var(--paper-3)}
.step:disabled{color:var(--ink-4)}
.step:disabled::before{border-color:var(--line)}
@media (pointer:coarse){
  .step{width:48px;height:48px}
  .menu-item{min-height:48px}
}
.count{display:inline-block;min-width:40px;text-align:center;font:600 16px/24px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.is-low .count{color:var(--accent)}
#app.readonly .step{visibility:hidden}

/* Shopping */
.buy{display:flex;flex-direction:column;align-items:flex-end;min-width:56px;text-align:right}
.buy .t-label{color:var(--ink-3);white-space:nowrap}
.buy-n{font:400 22px/28px var(--serif);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.buy-unit{font:400 14px/20px var(--sans);color:var(--ink-3);max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* History events */
.event{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.ev-name{font:500 16px/24px var(--sans);color:var(--ink);overflow-wrap:anywhere;min-width:0}
.ev-what{font:500 14px/20px var(--sans);color:var(--ink-2);align-self:start;padding-top:2px;text-align:right}
.ev-what.ev-delta{font:600 16px/24px var(--sans);color:var(--ink);padding-top:0;font-variant-numeric:tabular-nums lining-nums}
.ev-meta{grid-column:1/-1;font:400 14px/20px var(--sans);color:var(--ink-3);overflow-wrap:anywhere;font-variant-numeric:tabular-nums lining-nums}
.ev-meta b{font-weight:500;color:var(--ink-2)}
.ev-changes{grid-column:1/-1;font:400 14px/20px var(--sans);color:var(--ink-2);overflow-wrap:anywhere;margin-top:2px;font-variant-numeric:tabular-nums lining-nums}

/* Empty states */
.empty{padding:64px 0;max-width:320px;margin:0 auto;text-align:center}
.empty h2{color:var(--ink);margin:0}
.empty p{margin:8px 0 0;color:var(--ink-3)}
.empty .btn,.empty .text-btn{margin-top:24px}

/* Skeleton */
.skeleton{min-height:72px;border-top:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:8px}
.skeleton i{display:block;height:12px;border-radius:6px;background:var(--paper-2);animation:pulse 1.4s ease-in-out infinite alternate}
.skeleton i:first-child{width:40%}
.skeleton i:last-child{width:25%}

/* ---------- Product sheet ---------- */
dialog.sheet{padding:0;border:0;background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-2);overflow:hidden;width:100%;max-width:100%;margin:auto 0 0;max-height:92dvh;border-radius:var(--r-sheet) var(--r-sheet) 0 0}
dialog.sheet[open]{display:flex;flex-direction:column}
dialog::backdrop{background:var(--scrim)}
.sheet-form{display:flex;flex-direction:column;min-height:0;flex:1}
.sheet-head{position:relative;padding:24px 64px 12px 24px;flex:none}
.grabber{position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line)}
#dialogEyebrow{color:var(--ink-3)}
#dialogTitle{margin-top:2px;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#dialogTitle:focus{outline:none}
#dialogTitle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sheet-close{position:absolute;top:12px;right:12px}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 24px}
fieldset.bare{border:0;padding:0;margin:0;min-width:0}
.section{font:600 12px/16px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:24px 0 12px}
.bare > .section:first-child{margin-top:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:start}
.grid3 > *{min-width:0}
#uF{grid-column:1/-1}
.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.grid2 > *{min-width:0}
.span2{grid-column:1/-1;margin-top:-8px;margin-bottom:16px}
.sheet-extra{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sheet-foot{flex:none;padding:16px 24px calc(16px + env(safe-area-inset-bottom));background:var(--sheet);border-top:1px solid var(--line)}
.form-error,.ro-note{font:400 14px/20px var(--sans);margin:0 0 12px}
.form-error{color:var(--accent)}
.form-error:focus{outline:none}
.ro-note{color:var(--ink-2)}
.sheet-actions{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.sheet-actions:has(> #save[hidden]){grid-template-columns:1fr}

/* Segmented control */
fieldset.seg-field{border:0;padding:0;margin:0 0 16px;min-width:0;display:block}
.seg-field > legend{padding:0;margin-bottom:6px;float:none}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;height:50px;background:var(--paper-2);border-radius:var(--r-md)}
.seg label{position:relative;display:grid;place-items:center;border-radius:8px;font:500 14px/20px var(--sans);color:var(--ink-2);cursor:pointer;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.seg-field .seg input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.seg label:has(input:checked){background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-1),0 0 0 1px var(--control-hover)}
.seg label:active:not(:has(input:checked)){background:var(--paper-3)}
fieldset:disabled .seg label:active{background:none}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.seg-field:disabled .seg label,fieldset:disabled .seg label{cursor:default;color:var(--ink-3)}

/* Checkbox */
.check{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font:400 16px/24px var(--sans);color:var(--ink);margin-bottom:8px}
.check input{flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1px solid var(--control);border-radius:var(--r-sm);background:var(--field);display:grid;place-items:center;cursor:pointer;transition:background-color var(--d-1),border-color var(--d-1)}
.check input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23F7F4EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/14px;border-color:var(--ink)}
.check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.check input:disabled{background-color:var(--paper-2);border-color:var(--line)}
.check input:disabled:checked{background-color:var(--ink-3)}
fieldset:disabled .check{cursor:default;color:var(--ink-3)}

/* ---------- Confirm ---------- */
dialog.confirm{width:min(400px,calc(100vw - 40px));margin:auto;padding:24px;border:0;border-radius:var(--r-lg);background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-2)}
#confirmTitle{overflow-wrap:anywhere}
#confirmBody{font:400 16px/24px var(--sans);color:var(--ink-2);margin:8px 0 24px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Toast ---------- */
.toast-region{position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;z-index:50;padding:0 20px}
body.has-fab .toast-region{bottom:calc(88px + env(safe-area-inset-bottom))}
.toast{pointer-events:auto;max-width:min(420px,100%);display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--ink);color:var(--on-ink);border-radius:var(--r-md);box-shadow:var(--shadow-3);font:400 14px/20px var(--sans)}
.toast-action{flex:none;border:0;background:none;color:var(--on-ink);font-weight:600;min-height:44px;margin-block:-12px;padding:0 4px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;border-radius:6px;transition:opacity var(--d-1)}
.toast-action:active{opacity:.7}
.toast-action:focus-visible{outline-color:var(--on-ink)}

/* ---------- Hover (fine pointers only) ---------- */
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{background:var(--paper-2);color:var(--ink)}
  .icon-btn:active{background:var(--paper-3)}
  .menu-item:hover{background:var(--paper-2)}
  .menu-item:active{background:var(--paper-3)}
  .field input:hover:not(:focus):not(:disabled),.field select:hover:not(:focus):not(:disabled),.field textarea:hover:not(:focus):not(:disabled),.search:hover:not(:focus){border-color:var(--control-hover)}
  .field.invalid input:hover:not(:focus){border-color:var(--accent)}
  .btn-primary:hover:not(:disabled){background:var(--ink-hover)}
  .btn-primary:active:not(:disabled){background:#000}
  .btn-secondary:hover:not(:disabled){background:var(--paper-2)}
  .btn-secondary:active:not(:disabled){background:var(--paper-3)}
  .btn-danger:hover:not(:disabled){background:var(--accent-hover)}
  .text-btn:hover:not(:disabled){color:var(--ink);text-decoration:underline}
  .text-btn.danger:hover{color:var(--accent);background:var(--accent-tint);text-decoration:none}
  .text-btn.danger:active{background:var(--paper-3)}
  .pw-toggle:hover{color:var(--ink);text-decoration:underline}
  .lang-opt:hover:not([aria-pressed="true"]){color:var(--ink)}
  .fig--link:hover .fig-label{text-decoration:underline}
  .fig--link:hover .arrow,.alert:hover .arrow,#showHistory:hover .arrow{transform:translateX(2px)}
  .alert:hover .alert-review{text-decoration:underline}
  .tabs button:hover:not([aria-current="page"]){color:var(--ink-2)}
  .add:hover:not(:disabled){box-shadow:var(--shadow-3)}
  .chip:hover{background-color:var(--paper-2)}
  .chip:active{background-color:var(--paper-3)}
  .row:has(.row-main:hover)::before{background:var(--paper-2)}
  .row:has(.row-main:active)::before{background:var(--paper-3)}
  .step:hover:not(:disabled){color:var(--ink)}
  .step:hover:not(:disabled)::before{background:var(--paper-2);border-color:var(--control-hover)}
  .step:active:not(:disabled)::before{background:var(--paper-3)}
  .seg label:hover:not(:has(input:checked)){color:var(--ink)}
  fieldset:disabled .seg label:hover{color:var(--ink-3)}
  .check:hover input:not(:checked):not(:disabled){border-color:var(--control-hover)}
  .toast-action:hover{text-decoration-thickness:2px}
}
@media (min-width:640px) and (hover:hover) and (pointer:fine){
  .add:hover:not(:disabled){box-shadow:none}
}

/* ---------- Larger screens ---------- */
@media (min-width:640px){
  .tabsrow{margin-top:40px;min-height:51px}
  .rows{padding-bottom:64px}
  .group{padding-top:40px}
  .rows > .group:first-child{padding-top:32px}
  .empty{padding:72px 0}
  .empty .btn,.empty .text-btn{margin-top:32px}
  .auth-logo{margin-bottom:32px}
  .auth form{margin-top:40px}
  .section{margin-top:32px}
  .sheet-extra{margin-top:32px}
  #confirmBody{margin-bottom:32px}
  .btn{height:44px}
  .auth .btn{height:48px}
  .field input,.field select,.field textarea{height:44px}
  .field input[type=date]{line-height:42px}
  .field textarea{height:auto}
  .auth .field input{height:48px}
  .seg{height:44px}
  .confirm-actions .btn{min-width:120px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  #uF{grid-column:auto}
  dialog.sheet{width:min(560px,calc(100vw - 64px));margin:auto;max-height:86dvh;border-radius:var(--r-lg)}
  .sheet-head{padding-top:20px}
  .grabber{display:none}
  .sheet-actions{display:flex;justify-content:flex-end;gap:12px}
  #save{min-width:120px}
  .confirm-actions{display:flex;justify-content:flex-end}
  body.has-fab .toast-region{bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* Touch screens keep 44px owner segments at every width. */
@media (min-width:640px) and (pointer:coarse){ .seg{height:50px} }

/* ---------- Motion ---------- */
@keyframes tick-up{from{transform:translateY(35%);opacity:0}to{transform:none;opacity:1}}
@keyframes tick-down{from{transform:translateY(-35%);opacity:0}to{transform:none;opacity:1}}
@keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{from{transform:none}to{transform:translateY(100%)}}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px) scale(.99)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-out{from{opacity:1}to{opacity:0}}
@keyframes pulse{from{opacity:.55}to{opacity:1}}

.tick-up{animation:tick-up var(--d-2) var(--ease-out)}
.tick-down{animation:tick-down var(--d-2) var(--ease-out)}
#rows.enter{animation:enter var(--d-2) var(--ease-out)}
dialog.sheet[open]{animation:sheet-up var(--d-3) var(--ease-sheet)}
dialog.sheet.closing{animation:sheet-down var(--d-close) var(--ease-in) forwards}
dialog.confirm[open]{animation:modal-in 220ms var(--ease-out)}
dialog.confirm.closing{animation:modal-out 160ms var(--ease-in) forwards}
dialog[open]::backdrop{animation:fade-in 200ms var(--ease-out)}
dialog.closing::backdrop{animation:fade-out 200ms var(--ease-in) forwards}
@media (min-width:640px){
  dialog.sheet[open]{animation:modal-in 220ms var(--ease-out)}
  dialog.sheet.closing{animation:modal-out 160ms var(--ease-in) forwards}
}
#openedFields.reveal{animation:reveal 160ms var(--ease-out)}
#menu.menu-in{animation:menu-in 160ms var(--ease-out)}
.toast.toast-in{animation:toast-in var(--d-2) var(--ease-out)}
.toast.toast-out{animation:toast-out 160ms var(--ease-in) forwards}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .skeleton i{animation:none;opacity:.7}
  .btn:active:not(:disabled),.step:active:not(:disabled){transform:none!important}
}

@media (forced-colors:active){
  .step::before,.chip,.seg,.check input,.field input,.field select,.field textarea,.search{border:1px solid CanvasText}
  .life i,.alert .dot{forced-color-adjust:none}
  .tabs button::after{forced-color-adjust:none;background:Highlight}
  .seg label:has(input:checked){outline:2px solid Highlight;outline-offset:-2px}
  .check input:checked{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}
}