/* Gas Plant Stock: "Night". One dark teal theme for every page. System fonts only.
   No inline styles anywhere (the site's CSP forbids them); JS only sets sizes and --i through the style object. */

/* ================= rulebook ================= */
:root {
  color-scheme: dark; /* native date pickers, selects, scrollbars and checkboxes render dark */

  /* colour: deep teal night, frosted glass cards, ONE teal accent, gold for the tank. */
  --bg1: #0C171D;           /* page gradient, top left */
  --bg2: #12312F;           /* page gradient, bottom right */
  --glow: rgba(60,210,190,.30); /* the slow drifting light behind everything */
  --card: rgba(255,255,255,.07);   /* glass card */
  --cardb: rgba(255,255,255,.14);  /* glass card edge */
  --row: rgba(255,255,255,.07);    /* phone table rows: same look, no blur */
  --ink: #EAF3F1;           /* text: 10:1 on cards */
  --grey: #A9C0BA;          /* small notes: raised from #9DB4AE so it is 5:1 even on the lightest track */
  --line: rgba(255,255,255,.10);   /* hairlines between rows */
  --field: #7C9A94;         /* input edges: 4.5:1 on the input fill so fields are easy to find */
  --fieldbg: rgba(0,0,0,.25);
  --track: rgba(255,255,255,.12);  /* quiet backgrounds: segmented tabs, steppers, bar tracks */
  --accent: #4FD1C0;        /* teal: main button, active menu, key numbers (6:1 on cards) */
  --accent-strong: #7DE2D5; /* hover: a little lighter */
  --accent-soft: rgba(79,209,192,.13);
  --on-accent: #06201D;     /* text on teal buttons: 9:1 */
  --gold: #F2B84B;
  --hero1: #1E7B73; --hero2: #0E3C42; /* the big stock card, white text */
  --warn: #F2B84B;  --warn-soft: rgba(242,184,75,.14);
  --bad: #FF9A91;   --bad-soft: rgba(255,107,97,.15);  --bad-solid: #B3261E;
  --ok: #6EE7A0;    --ok-soft: rgba(110,231,160,.13);
  --navbg: rgba(14,23,29,.96);   /* top and bottom bars without blur; see @supports below */
  --sheetbg: rgba(20,40,44,.97); /* dialogs and panels without blur */
  --menubg: #17302F;
  --scrim: rgba(4,12,14,.55);

  /* type: one system stack, three text sizes plus two numeral sizes */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --fs-title: 1.625rem;     /* page titles */
  --fs: 1.125rem;           /* normal text (18px) */
  --fs-small: 1rem;         /* small grey notes */
  --fs-num: 2rem;           /* numbers on cards */
  --fs-hero: clamp(2.75rem, 11vw, 3.75rem); /* the one big number */

  /* shape and space */
  --r: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --tap: 48px;
  --maxw: 1080px;
  --shadow: 0 12px 34px rgba(0,0,0,.35);
  --shadow-up: 0 24px 64px rgba(0,0,0,.55);
  --blur: blur(18px) saturate(1.3);

  /* motion: one spring curve; everything is transform and opacity only */
  --t: 220ms;
  --ease: cubic-bezier(.2,.7,.3,1);
  --spring: cubic-bezier(.2,.9,.25,1);
  --rise: 600ms;
  --stagger: 90ms;
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :root { --navbg: rgba(14,23,29,.72); --sheetbg: rgba(20,40,44,.78); }
}

/* ================= base ================= */
* { box-sizing: border-box; }
/* the page background: a gradient over the whole page, and ONE soft light that drifts slowly (still for reduced motion) */
html { -webkit-text-size-adjust: 100%; min-height: 100%; background: linear-gradient(160deg, var(--bg1), var(--bg2) 70%) var(--bg1); overflow-x: hidden; }
body { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: 1.5; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; min-height: 100vh; overflow-x: hidden; }
body::after { content: ""; position: fixed; top: -18vmax; right: -22vmax; z-index: -1; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 65%); animation: drift 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift { to { transform: translate(-8vmax, 10vmax) scale(1.15); } }
h1 { font-size: var(--fs-title); line-height: 1.2; margin: var(--s5) 0 var(--s4); font-weight: 750; letter-spacing: -.01em; }
h2 { font-size: var(--fs); margin: var(--s6) 0 var(--s3); font-weight: 700; }
.card > h2:first-child, .dialog h2 { margin-top: 0; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent); }
b, strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.02em; }
.boot { padding: var(--s6); color: var(--grey); }
.dim, .note { color: var(--grey); }
.note { font-size: var(--fs-small); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.glyph { width: 1.2em; height: 1.2em; flex: none; }
.glyph.big { width: 48px; height: 48px; color: var(--accent); }
.neg { color: var(--bad); font-weight: 700; }
::selection { background: rgba(79,209,192,.35); }

/* glass: the larger cards blur what is behind them. Long table rows never do (cheap phones). */
.card, .strip, .box, .empty, .tablewrap, .login, .quick .btn.ghost {
  background: var(--card); border: 1px solid var(--cardb); box-shadow: var(--shadow); }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card, .strip, .box, .empty, .tablewrap, .login { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card, .strip, .box, .empty, .tablewrap, .login, .quick .btn.ghost { background: rgba(26,48,50,.92); }
}

/* ================= frame: top bar, menu, page ================= */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s4); min-height: 64px;
  padding: var(--s2) max(var(--s4), calc((100% - var(--maxw)) / 2 + var(--s4))); background: var(--navbg); border-bottom: 1px solid var(--cardb);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; font-weight: 750; white-space: nowrap; min-height: var(--tap); }
.brand .mark { width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; box-shadow: 0 4px 14px rgba(79,209,192,.35); }
.brand small { font-weight: 700; font-size: var(--fs-small); color: var(--on-accent); background: var(--gold); padding: 0 var(--s2); border-radius: 999px; }
.tabs { display: flex; gap: var(--s1); flex: 1; }
.tab { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border-radius: 14px; color: var(--grey); text-decoration: none; font-weight: 600; white-space: nowrap; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.tab:hover { color: var(--ink); background: var(--track); }
.tab[aria-current="page"] { color: var(--accent); background: var(--track); }
.who { display: flex; align-items: center; gap: var(--s2); margin-left: auto; white-space: nowrap; }
.who .name { color: var(--grey); font-size: var(--fs-small); }
.who > button:last-child { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 0; border-radius: 14px; min-height: var(--tap); padding: 0 var(--s3); cursor: pointer; transition: transform 150ms ease, background var(--t) var(--ease); }
.who > button:last-child:hover { background: var(--accent-soft); }

/* "All saved" status pill */
.badge { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; max-width: 18rem; text-align: left; line-height: 1.2; transition: transform 150ms ease; }
.badge .short { display: none; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(110,231,160,.25); }
.badge.amber { background: var(--warn-soft); color: var(--warn); border-color: rgba(242,184,75,.3); }
.badge.red { background: var(--bad-soft); color: var(--bad); border-color: rgba(255,107,97,.35); }
.badge.flash { animation: pop 300ms var(--spring); }
@keyframes pop { 50% { transform: scale(1.08); } }
.live { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.18); display: inline-block; flex: none; }
.live.off { background: var(--gold); box-shadow: 0 0 0 3px rgba(242,184,75,.18); }

.ribbon { background: var(--gold); color: #1A1300; text-align: center; font-weight: 800; padding: var(--s1); font-size: var(--fs-small); letter-spacing: .04em; }
#banners { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
#banners:empty { display: none; }
.banner { display: flex; gap: var(--s3); align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(242,184,75,.3); font-weight: 600; animation: rise var(--rise) var(--spring) backwards; }
.banner.red { background: var(--bad-soft); color: var(--bad); border-color: rgba(255,107,97,.35); }
.banner button { font: inherit; font-weight: 700; min-height: var(--tap); padding: 0 var(--s4); border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform 150ms ease; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4) var(--s7); }
main:focus { outline: none; }

/* page change: the new page's pieces rise in one after another. --i is set by app.js as they arrive.
   Only "backwards" fill: at rest nothing is held at opacity 0, and hover and press still work. */
.enter :is(h1, .livebar, .card, .strip, .tablewrap, .empty, .box, .quick > .btn, .seg, .filterbtn, .periodbar, .pager, main > .row, main > .msg, .entryform > .msg) {
  animation: rise var(--rise) var(--spring) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* phone: bottom menu */
.bottombar { display: none; }
@media (max-width: 900px) {
  .tabs, .who .name { display: none; }
  .topbar { gap: var(--s2); }
  .badge .full { display: none; } .badge .short { display: inline; }
  main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--navbg); border-top: 1px solid var(--cardb);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom)); }
  .bottombar a { flex: 1; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--grey); text-decoration: none; font-size: .875rem; font-weight: 600; transition: transform 150ms ease; }
  .bottombar svg { width: 48px; height: 28px; padding: 2px 12px; border-radius: 999px; transition: background var(--t) var(--ease); }
  .bottombar a[aria-current="page"] { color: var(--accent); }
  .bottombar a[aria-current="page"] svg { background: var(--track); }
  .bottombar a:active { transform: scale(.94); }
}
@media (max-width: 340px) { .topbar .brand .bname { display: none; } }

/* ================= cards and building blocks ================= */
.card { border-radius: var(--r); padding: var(--s5); margin-bottom: var(--s4); }
@media (max-width: 600px) { .card { padding: var(--s4); } }
.row { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 10rem; }
.row > .field:has(> .btn) { flex: 0 0 auto; min-width: 0; }
td.act, td:has(> a.linkbtn) { padding-block: var(--s1); }
.cols { display: grid; gap: 0 var(--s5); }
@media (min-width: 760px) { .cols.two { grid-template-columns: 1fr 1fr; align-items: start; } }

/* stat strip: numbers with small labels (Entry, Summary) */
.strip { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.strip b { display: block; font-size: var(--fs-num); line-height: 1.15; color: var(--accent); }
.strip b.neg { color: var(--bad); }
.strip span { font-size: var(--fs-small); color: var(--grey); }

/* messages */
.msg { padding: var(--s3) var(--s4); border-radius: 14px; margin: var(--s3) 0; font-weight: 600; border: 1px solid transparent; }
.msg.good { background: var(--ok-soft); color: var(--ok); border-color: rgba(110,231,160,.25); }
.msg.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(242,184,75,.3); }
.msg.bad { background: var(--bad-soft); color: var(--bad); border-color: rgba(255,107,97,.35); }
.msg a { color: inherit; }
.err { color: var(--bad); font-weight: 600; margin-top: var(--s1); font-size: var(--fs-small); }

/* pills */
.flag, .pill { display: inline-block; font-size: .875rem; font-weight: 700; padding: 1px var(--s2); border-radius: 999px; background: var(--warn-soft); color: var(--warn); margin-right: var(--s1); vertical-align: 1px; }
.flag.edit { background: var(--track); color: var(--grey); }
.pill.good { background: var(--ok-soft); color: var(--ok); }
.pill.mid { background: var(--warn-soft); color: var(--warn); }
.pill.low { background: var(--bad-soft); color: var(--bad); }

/* empty screens */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; padding: var(--s7) var(--s4); color: var(--grey); border-radius: var(--r); }
.empty b { font-size: var(--fs); color: var(--ink); }

/* ================= forms ================= */
.field { margin-bottom: var(--s4); }
label, .lbl { display: block; font-weight: 600; margin: 0 0 var(--s2); }
input[type=text], input[type=password], input[type=date], input[type=number], input:not([type]), select, textarea {
  font: inherit; width: 100%; min-height: 56px; padding: var(--s3) var(--s4); border: 1.5px solid var(--field); border-radius: 14px; background: var(--fieldbg); color: var(--ink);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
input::placeholder, textarea::placeholder { color: var(--grey); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--grey); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,209,192,.28); }
select option, select optgroup { background: var(--menubg); color: var(--ink); }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .9; cursor: pointer; }
textarea { min-height: 96px; resize: vertical; }
input.bad, textarea.bad { border-color: var(--bad); background: var(--bad-soft); }
input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--accent); flex: none; margin: 0; cursor: pointer; }
.check { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; margin: 0; }
.pwrow { display: flex; gap: var(--s2); }
.pwrow button { flex: none; font: inherit; font-weight: 600; min-width: 5rem; min-height: 56px; border: 1px solid var(--cardb); border-radius: 14px; background: var(--track); color: var(--accent); cursor: pointer; transition: transform 150ms ease; }

/* ================= buttons: filled teal, or quiet ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; min-height: 56px; padding: 0 var(--s5);
  font: inherit; font-weight: 750; text-decoration: none; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px rgba(79,209,192,.22);
  transition: background var(--t) var(--ease), transform 150ms ease; }
.btn:hover:not(:disabled) { background: var(--accent-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.small, .btn.inline { width: auto; min-height: var(--tap); }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn.danger { background: var(--bad-solid); color: #fff; box-shadow: none; } /* the confirm button on "are you sure?" dialogs */
.btn.danger:hover:not(:disabled) { background: #C9352C; }
/* every button presses in a little */
:is(.btn, .acts button, .size, .stepper button, .pwrow button, .seg button, .banner button, .who > button, .badge, .closebtn, a.linkbtn, .more summary):active:not(:disabled) { transform: scale(.96); }
a.linkbtn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border-radius: 14px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; transition: transform 150ms ease; }
a.linkbtn:hover { background: var(--accent-soft); }

/* small row actions: quiet text buttons, one may be filled */
.acts { display: flex; gap: var(--s1) var(--s2); flex-wrap: wrap; align-items: center; }
.acts button { font: inherit; font-size: var(--fs-small); font-weight: 600; min-height: var(--tap); padding: 0 var(--s3); border: 0; border-radius: 14px; background: transparent; color: var(--accent); cursor: pointer; transition: transform 150ms ease, background var(--t) var(--ease); }
.acts button:hover:not(:disabled) { background: var(--accent-soft); }
.acts button:disabled { color: var(--grey); opacity: .7; cursor: not-allowed; }
.acts button.main { background: var(--accent); color: var(--on-accent); }
.acts button.main:hover:not(:disabled) { background: var(--accent-strong); }
.acts button.redbtn { color: var(--bad); }
.acts button.redbtn:hover { background: var(--bad-soft); }
.acts .btn.small { width: auto; }
.note.lock { display: inline-flex; gap: var(--s2); align-items: center; max-width: 16rem; white-space: normal; overflow-wrap: anywhere; }

/* segmented tabs (Data, Admin) */
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1); margin-bottom: var(--s4); border-radius: 16px; background: var(--track); border: 1px solid var(--cardb); max-width: 100%; }
.seg button { font: inherit; font-weight: 600; min-height: var(--tap); padding: 0 var(--s4); border: 0; border-radius: 12px; background: transparent; color: var(--grey); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform 150ms ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* "More" drop-down in a table row */
.more { position: relative; display: inline-block; }
.more summary { list-style: none; cursor: pointer; font-size: var(--fs-small); font-weight: 600; min-height: var(--tap); padding: 0 var(--s3); border-radius: 14px; color: var(--accent); display: inline-flex; align-items: center; gap: var(--s1); transition: transform 150ms ease; }
.more summary:hover, .more[open] summary { background: var(--accent-soft); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '\25BE'; }
.more .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; background: var(--menubg); border: 1px solid var(--cardb); border-radius: 14px; box-shadow: var(--shadow-up); padding: var(--s1); display: flex; flex-direction: column; min-width: 13rem; }
.more .menu button { width: 100%; text-align: left; }

/* ================= tables: one glass card ================= */
.tablewrap { overflow-x: auto; border-radius: var(--r); margin-bottom: var(--s4); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--s3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { font-size: var(--fs-small); font-weight: 600; color: var(--grey); white-space: nowrap; background: rgba(255,255,255,.03); }
td { font-size: var(--fs-small); }
tbody tr { transition: background var(--t) var(--ease); }
@media (hover: hover) and (pointer: fine) { tbody tr:hover td { background: rgba(255,255,255,.04); } }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
td.date { white-space: nowrap; }
tr.cancelled td { color: var(--grey); text-decoration: line-through; }
tr.cancelled td.act { text-decoration: none; }
tr.total td { font-weight: 700; background: var(--accent-soft); }
td:empty { padding: 0; }
table.data td.what { min-width: 13rem; font-weight: 600; }
table.data td.notes { min-width: 8rem; overflow-wrap: anywhere; }
table.data td.by small { display: block; color: var(--grey); font-size: .875rem; }
table.data td.act { white-space: nowrap; width: 1%; }
table.data td.sz { white-space: nowrap; font-weight: 600; }
table.data .acts { flex-wrap: nowrap; }
.tablewrap:has(table.people), table.people { overflow: visible; }
.pager { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0; }
.pager .count { color: var(--grey); font-weight: 600; }
.filterbtn { display: none; }
.filters { margin-bottom: var(--s2); }

/* phones: each table row becomes its own card (solid tint, no blur: lists can be long) */
@media (max-width: 760px) {
  .tablewrap:has(table.stack) { background: none; border: 0; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { background: var(--row); border: 1px solid var(--cardb); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
  table.stack td { border: 0; padding: var(--s1) 0; display: flex; justify-content: space-between; gap: var(--s4); text-align: right; background: none !important; }
  table.stack td::before { content: attr(data-label); color: var(--grey); text-align: left; flex: none; }
  table.stack td.act { display: block; text-align: left; padding-top: var(--s2); } table.stack td.act::before { content: none; }
  table.stack tr.total { background: var(--accent-soft); border-color: rgba(79,209,192,.3); }
  table.stack td.sname { justify-content: flex-start; gap: 0; font-size: var(--fs); padding-bottom: var(--s2); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .filterbtn { display: inline-flex; margin-bottom: var(--s3); }
  .filters.closed { display: none; }

  table.data tr { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s2); }
  table.data td { grid-column: 1 / -1; display: block; text-align: left; }
  table.data td::before { display: none; }
  table.data td.date { grid-column: 1; font-weight: 700; font-size: var(--fs); }
  table.data td.sz { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; color: var(--accent); font-size: var(--fs); }
  table.data td.what { font-size: var(--fs); min-width: 0; }
  table.data td.notes, table.data td.by { color: var(--grey); }
  table.data td.by small { display: inline; margin-left: var(--s2); }
  table.data td.by::before { display: inline; content: 'by '; }
  table.data td.act { white-space: normal; width: auto; }
  table.data .acts { flex-wrap: wrap; margin-left: calc(-1 * var(--s3)); }
  table.data .note.lock { max-width: 100%; margin-left: var(--s3); }

  table.people tr { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
  table.people td { display: block; width: auto; text-align: left; }
  table.people td::before { display: none; }
  table.people td:first-child { width: 100%; font-size: var(--fs); }
  table.people td.act { width: 100%; }
  .more .menu { position: static; box-shadow: none; padding: 0; border: 0; background: none; }
}

/* ================= dialogs and detail panels: glass sheet over a dim, blurred scrim ================= */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: var(--scrim); animation: fade 350ms ease both; }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .overlay { background: rgba(4,12,14,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .dialog { -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); }
}
.dialog { width: 100%; max-width: 34rem; max-height: 90vh; overflow: auto; padding: var(--s5); border-radius: 24px; background: var(--sheetbg); border: 1px solid var(--cardb); color: var(--ink); box-shadow: var(--shadow-up);
  animation: slideup 500ms var(--spring) both; }
.overlay.closing { animation: fade 230ms ease reverse both; }
.overlay.closing .dialog { animation: slideaway 230ms ease both; }
@keyframes fade { from { opacity: 0; } }
@keyframes slideup { from { opacity: 0; transform: translateY(48px); } }
@keyframes slideaway { to { opacity: 0; transform: translateY(48px); } }
.dialog .btns { display: grid; gap: var(--s2); margin-top: var(--s5); }
@media (min-width: 560px) { .dialog .btns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { /* phones: the panel rises from the bottom */
  .overlay { align-items: flex-end; padding: var(--s2); }
  .dialog { max-width: none; max-height: 88vh; padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
  @keyframes slideup { from { transform: translateY(110%); } }
  @keyframes slideaway { to { transform: translateY(110%); } }
}
.bigpw { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-num); background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(242,184,75,.3); padding: var(--s3); border-radius: 14px; text-align: center; letter-spacing: .08em; user-select: all; overflow-wrap: anywhere; }
.sentences { list-style: none; padding: 0; margin: 0; }
.sentences li, .sentences p { padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.sentences .when { color: var(--grey); font-weight: 600; }
.card .sentences li:last-child { border-bottom: 0; }

/* ================= the "Saved" confirmation ================= */
.saved { display: flex; gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--r); margin: var(--s4) 0 0; border: 1px solid transparent; animation: rise var(--rise) var(--spring) backwards; }
.saved.ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(110,231,160,.3); }
.saved.device { background: var(--warn-soft); color: var(--warn); border-color: rgba(242,184,75,.3); }
.saved .txt b { display: block; font-size: var(--fs-title); line-height: 1.2; }
.bigmark { width: 56px; height: 56px; flex: none; }
.bigmark .ring { stroke: currentColor; opacity: .35; }
.bigmark .check { stroke: currentColor; stroke-dasharray: 50; animation: draw 500ms 200ms var(--spring) backwards; }
@keyframes draw { from { stroke-dashoffset: 50; } }

/* ================= login ================= */
.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.login { width: 100%; max-width: 26rem; border-radius: 26px; padding: var(--s6) var(--s5); animation: rise var(--rise) var(--spring) backwards; }
.login .brand { margin-bottom: var(--s4); }
.login h1 { margin-top: 0; }
.login form .btn { margin-top: var(--s2); }
.login .note { margin-top: var(--s4); text-align: center; }
.login .btn.ghost { margin-top: var(--s3); }

/* ================= Entry ================= */
.entrypage > h1 { grid-column: 1 / -1; }
.stephead { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.stephead h2 { margin: 0; }
.stephead p { margin: 0; font-size: var(--fs-small); }
.stepno { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--s5); margin-top: var(--s4); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s2); }
@media (max-width: 600px) { .sizes { grid-template-columns: 1fr 1fr; } }
.size { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; font: inherit; font-weight: 700; border: 1px solid var(--cardb); border-radius: 16px; background: var(--track); color: var(--ink); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform 150ms ease; }
.size:hover { background: var(--accent-soft); }
.size[aria-checked="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 8px 22px rgba(79,209,192,.25); }
.size.spring { animation: spring 450ms var(--spring); }
@keyframes spring { 0% { transform: scale(.9); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
i.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: var(--s2); flex: none; }
.size[aria-checked="true"] i.dot { box-shadow: 0 0 0 2px var(--on-accent); }
.stepper { display: flex; gap: var(--s2); }
.stepper button { flex: none; width: 56px; min-height: 56px; font: inherit; font-size: 1.5rem; font-weight: 700; border: 1px solid var(--cardb); border-radius: 14px; background: var(--track); color: var(--accent); cursor: pointer; transition: background var(--t) var(--ease), transform 150ms ease; }
.stepper button:hover { background: var(--accent-soft); }
.stepper input { text-align: center; font-size: 1.375rem; font-weight: 700; }
.stepper input.pulse { animation: pulse 360ms var(--spring); }
@keyframes pulse { 40% { transform: scale(1.06); } }
.sales summary { list-style: none; display: flex; align-items: center; gap: var(--s3); font-weight: 700; cursor: pointer; min-height: var(--tap); }
.sales summary::-webkit-details-marker { display: none; }
.sales summary::after { content: '+'; margin-left: auto; font-size: 1.5rem; color: var(--accent); transition: transform var(--t) var(--ease); }
.sales[open] summary::after { content: '\2212'; }
.sales[open] summary { margin-bottom: var(--s4); }
@media (min-width: 1000px) { /* the stock strip sits beside the form */
  .entrypage { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0 var(--s5); align-items: start; }
  .entrypage > .entryform, .entrypage > .sales { grid-column: 1; }
  .entrypage > .strip { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 88px; flex-direction: column; }
}

/* ================= Daily: little bars ================= */
.bars { display: flex; flex-direction: column; gap: var(--s1); min-width: 9rem; }
.bar { display: flex; align-items: center; gap: var(--s2); }
.bar i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #2FA597); min-width: 3px; flex: none; }
.bar b { font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .bars { align-items: flex-end; min-width: 0; } .bar { flex-direction: row-reverse; } }

/* ================= More ================= */
.menulist { display: grid; gap: var(--s2); }
.menulist .btn { justify-content: space-between; }
.card.help p:last-child { margin-bottom: 0; }

/* ================= Dashboard ================= */
.livebar { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); margin: calc(-1 * var(--s3)) 0 var(--s4); }
/* the big stock card: deep teal gradient, white text, a soft light in the corner */
.card.hero { display: grid; gap: var(--s3); position: relative; overflow: hidden; color: #fff; border-radius: 26px; border-color: rgba(255,255,255,.18);
  background: linear-gradient(145deg, var(--hero1), var(--hero2)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 65%); pointer-events: none; }
.card.hero > * { position: relative; z-index: 1; }
.hero .lbl { margin: 0; color: #fff; font-weight: 600; }
.heronum { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; line-height: 1.05; }
.heronum .num { font-size: var(--fs-hero); color: var(--accent); }
.heronum .unit { font-size: var(--fs-title); font-weight: 600; color: var(--grey); }
.hero .heronum .num { color: #fff; }
.hero .heronum .unit { color: #fff; opacity: .9; font-size: 1.25rem; }
.heronum .num.neg, .hero .heronum .num.neg { color: var(--bad); }
.tank { height: 14px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
.tank i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), #FFD98A); transform-origin: left; }
.tank.mid i { background: linear-gradient(90deg, #F08A3E, #FFB27A); } .tank.low i { background: linear-gradient(90deg, #FF6B61, #FF9A91); }
.tanknote { margin: 0; color: #fff; }
.hero .pill { background: rgba(255,255,255,.18); color: #fff; }
.hero .msg { margin: var(--s1) 0 0; background: rgba(4,18,20,.55); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.quick .btn.ghost { color: var(--accent); }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .quick .btn.ghost { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.quick .btn.ghost:hover { background: rgba(255,255,255,.12); }
.quick .btn { min-height: 64px; padding: 0 var(--s3); text-align: center; line-height: 1.2; }
@media (max-width: 760px) { .quick { grid-template-columns: repeat(3, 1fr); gap: var(--s2); } .quick .btn:first-child { grid-column: 1 / -1; } .quick .btn { font-size: var(--fs-small); padding: 0 var(--s2); } }

.periodbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.periodbar h2 { margin: 0 auto 0 0; }
.periodbar select { width: auto; min-height: var(--tap); padding: 0 var(--s4); }
.boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
@media (max-width: 900px) { .boxes { grid-template-columns: 1fr 1fr; } .boxes .box:first-child { grid-column: 1 / -1; } }
.box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); text-align: left; font: inherit; color: var(--ink); cursor: pointer; border-radius: var(--r); padding: var(--s4); min-height: 132px; position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .box:hover { transform: translateY(-3px); border-color: rgba(79,209,192,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45); } }
.box:active { transform: scale(.97); }
.box .lbl { margin: 0; font-weight: 600; color: var(--grey); font-size: var(--fs-small); }
.box .num { font-size: var(--fs-num); line-height: 1.1; color: var(--accent); }
.box .unit, .box .cap { font-size: var(--fs-small); color: var(--grey); }
.box .more-hint { margin-top: auto; font-size: var(--fs-small); font-weight: 600; color: var(--accent); }

.chartcard svg { display: block; width: 100%; height: auto; overflow: visible; }
.chartcard .axis { fill: var(--grey); font-size: 13px; font-family: var(--font); }
.chartcard .gridln { stroke: var(--track); stroke-width: 1; }
.chartcard .area { fill: var(--accent); }
.chartcard .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chartcard .pt { fill: var(--bg2); stroke: var(--accent); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.chartcard .pt.end { stroke-width: 3; }
.chartcard .val { fill: var(--ink); font-size: 13px; font-weight: 700; font-family: var(--font); }
.dgrid { display: grid; gap: 0 var(--s4); }
@media (min-width: 900px) { .dgrid { grid-template-columns: 1fr 1fr; } }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.hbars li { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: var(--s3); }
.hbars .trk { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; }
.hbars .trk i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #2FA597); border-radius: 6px; }
.look { list-style: none; padding: 0; margin: 0; }
.look li { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.look li:last-child { border-bottom: 0; }
.look .glyph { color: var(--warn); margin-top: 2px; }
.look a { font-weight: 700; color: var(--warn); }
.allgood { display: flex; align-items: center; gap: var(--s2); color: var(--ok); font-weight: 600; margin: 0; }

/* the detail panel opened from a box */
.sheet .sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.sheet .sheethead h2 { margin: 0; }
.sheet .sheethead p { margin: 0; color: var(--grey); font-size: var(--fs-small); }
.sheet .closebtn { flex: none; font: inherit; font-weight: 600; min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--cardb); border-radius: 14px; background: var(--track); color: var(--ink); cursor: pointer; transition: transform 150ms ease; }
.sheet .heronum { margin: var(--s4) 0 var(--s2); }
.sheet .heronum .num { font-size: 3rem; }
.mbars { display: block; width: 100%; height: auto; margin: var(--s3) 0; }
.mbars rect { fill: var(--accent); opacity: .4; transform-box: fill-box; transform-origin: 50% 100%; animation: growy 700ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
.mbars rect.now { opacity: 1; }
.mbars text { fill: var(--grey); font-size: 12px; font-family: var(--font); }
@keyframes growy { from { transform: scaleY(0); } }
.mlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1) var(--s4); margin: 0 0 var(--s4); padding: 0; list-style: none; font-size: var(--fs-small); }
.mlist li { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.mlist li span { color: var(--grey); }
@media (max-width: 420px) { .mlist { grid-template-columns: 1fr 1fr; } }
.bysize { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.bysize li { display: flex; justify-content: space-between; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.loading { color: var(--grey); font-size: var(--fs-small); }

/* people who asked for less motion get none: everything shows in its final state, the glow stands still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}