/* Shared visual foundation: navy, blue and 120-degree hexagonal geometry. */
:root {
  color-scheme: dark;
  --paper: #080f1b;
  --white: #101c2e;
  --raised: #14233a;
  --input: #0b1525;
  --ink: #e5efff;
  --muted: #9baec9;
  --accent: #74b9ff;
  --action: #1764d5;
  --action-hover: #226ee0;
  --line: #293c57;
  --line-strong: #456789;
  --soft: #162d4c;
  --danger: #ff9aab;
  --danger-bg: #331d2b;
  --focus: #a2d7ff;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 0px; --control-radius: 2px;
  --cut: polygon(0 0, calc(100% - 10px) 0, 100% 17.32px, 100% 100%, 10px 100%, 0 calc(100% - 17.32px));
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --font-heading: 'Bahnschrift', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Cascadia Code', 'Consolas', monospace;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 95% 0%, #13315a55, transparent 50%); }
a { color: inherit; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { border: 0; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: #285591; color: #fff; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); }
h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 20px; }
h1 span { color: var(--accent); }
h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: .95rem; font-weight: 600; }
label { display: block; font-size: .82rem; font-weight: 600; margin: 20px 0 8px; }
input, select, textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); padding: 11px 13px; color: var(--ink); background: var(--input); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=checkbox] { width: 18px; min-height: 18px; accent-color: var(--action); }
input[type=number] { font-variant-numeric: tabular-nums; }
.topbar { min-height: 84px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 36px; padding: 0 max(32px, calc((100vw - 1184px)/2)); background: #0b1423; }
.brand { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; }
.brand-icon { width: 40px; height: 36px; display: grid; place-items: center; color: var(--accent); }
.brand-mark { display: block; width: 100%; height: 100%; }
.topbar nav { display: flex; gap: 30px; margin-left: auto; align-self: stretch; align-items: stretch; }
.topbar nav a { position: relative; display: flex; align-items: center; text-decoration: none; font-size: .85rem; font-weight: 500; color: var(--muted); padding: 0 2px; min-height: 60px; }
.topbar nav a.active { color: var(--ink); }
.topbar nav a.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--accent); transform: skewX(-30deg); }
.topbar nav a:hover, .quiet:hover { color: var(--accent); }
.quiet { background: transparent; color: var(--muted); font-size: .82rem; padding: 12px 0; min-height: 44px; }
.private-label { margin-left: auto; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.page { max-width: 1184px; margin: auto; padding: 46px 0 72px; min-height: calc(100vh - 160px); }
.eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 500; color: var(--accent); margin-bottom: 20px; line-height: 1.6; }
.lede { font-size: .98rem; color: var(--muted); line-height: 1.65; max-width: 62ch; }
.welcome { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 8px 0 36px; }
.welcome .small-note { margin-top: 18px; }
.hub-glyph { width: 270px; height: 210px; flex: 0 0 auto; color: var(--accent); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.section-heading h2 { margin: 0; }
.section-heading>span { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Panel accents use a 60-degree chamfer (120-degree meeting angle). The panel itself stays unclipped for focus rings and menus. */
.app-card, .list-overview, .login-card, .list-panel, .edit-card { position: relative; background: var(--white); border: 1px solid var(--line); }
.app-card::before, .login-card::before { content: ''; position: absolute; top: -1px; right: 22px; width: 40px; height: 3px; background: var(--accent); transform: skewX(-30deg); }
.app-card { padding: 28px; text-decoration: none; transition: background .15s, border-color .15s; }
.app-card:hover { border-color: var(--accent); background: var(--raised); }
.app-card-top, .card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-symbol { width: 52px; height: 45px; background: var(--soft); clip-path: var(--hex); display: grid; place-items: center; color: var(--accent); }
.app-symbol .ui-icon { width: 26px; height: 26px; }
.pill { display: inline-block; border: 1px solid var(--line-strong); background: var(--input); padding: 6px 10px; font-family: var(--font-mono); font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.app-card h2 { font-size: 2rem; margin: 24px 0 12px; }
.app-card p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.card-bottom { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; font-size: .8rem; }
.card-arrow { background: var(--soft); color: var(--accent); width: 36px; height: 32px; clip-path: var(--hex); display: grid; place-items: center; font-size: 1.2rem; }
.list-overview { padding: 28px; grid-column: 1/-1; }
.overview-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--line); }
.overview-row:hover { color: var(--accent); }
.overview-row small { display: block; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.small-note { color: var(--muted); font-size: .78rem; line-height: 1.7; margin: 24px 0 0; }
.footer { max-width: 1184px; margin: auto; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; padding: 24px 0; color: var(--muted); font-family: var(--font-mono); font-size: .65rem; }
.login-page { max-width: 1080px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 72px 0; min-height: calc(100vh - 160px); }
.login-intro h1 { font-size: 3.4rem; }
.login-intro .hub-glyph { display: block; margin-top: 32px; width: 240px; height: 180px; }
.login-card { padding: 36px; }
.login-card h2 { font-size: 1.65rem; margin: 12px 0; }
.login-card>p { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.checkbox-label { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: .8rem; margin: 20px 0 26px; }
/* Only the background is cut: keyboard focus and touch targets remain rectangular. */
.primary, .secondary, .danger { position: relative; isolation: isolate; background: transparent; min-height: 48px; padding: 12px 22px; font-weight: 600; font-size: .85rem; line-height: 1.4; border-radius: 0; }
.primary::before, .secondary::before, .danger::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--cut); transition: background .15s; }
.primary { color: #fff; }.primary::before { background: var(--action); }.primary:hover::before { background: var(--action-hover); }
.secondary { color: var(--accent); }.secondary::before { background: var(--soft); }.secondary:hover::before { background: #21436c; }
.danger { color: var(--danger); }.danger::before { background: var(--danger-bg); }
.full-width { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.validation:empty, .validation-summary-valid { display: none; }
.validation { background: var(--danger-bg); color: var(--danger); border-left: 2px solid var(--danger); padding: 12px 16px; margin: 20px 0; font-size: .85rem; line-height: 1.6; }
.validation ul { margin: 0; padding-left: 18px; }
.notice { background: #30291a; color: #edcf8f; border: 1px solid #6f5934; padding: 16px; margin-bottom: 24px; line-height: 1.6; }
.page-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.page-title h1 { font-size: clamp(2.1rem,3.2vw,3rem); }.page-title .lede { margin-bottom: 0; }
.shopping-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; }
.lists-sidebar { padding-top: 8px; min-width: 0; }
.list-link { display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-size: .85rem; padding: 14px 12px; border: 1px solid transparent; gap: 12px; margin-bottom: 6px; }
.list-link.selected { background: var(--soft); border-color: var(--line-strong); border-left: 2px solid var(--accent); font-weight: 600; }
.count { font-family: var(--font-mono); font-size: .7rem; background: var(--input); padding: 4px 7px; color: var(--accent); }
.new-list { border-bottom: 1px solid var(--line); padding: 18px 12px; }.new-list summary { min-height: 44px; font-size: .85rem; color: var(--muted); display: flex; align-items: center; }.new-list button { margin-top: 12px; }
.list-panel { padding-bottom: 18px; min-width: 0; }
.list-panel-header { padding: 28px 28px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.list-panel-header h2 { margin-bottom: 10px; }.list-panel-header p { font-size: .8rem; color: var(--muted); }
.list-badge { font-size: 1.6rem; color: var(--accent); background: var(--soft); width: 46px; height: 40px; clip-path: var(--hex); display: grid; place-items: center; flex-shrink: 0; }
.add-item { padding: 5px 28px 26px; display: grid; grid-template-columns: minmax(120px,1fr) 88px 100px auto; gap: 10px; align-items: end; }
.add-item label { font-size: .72rem; white-space: nowrap; }.optional { font-weight: 400; color: var(--muted); font-size: .65rem; }.add-item input { font-size: .85rem; min-width: 0; }
.items-heading { display: flex; justify-content: space-between; align-items: center; background: var(--raised); padding: 12px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.items-heading h3 { margin: 0; font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }.items-heading>span { font-size: .7rem; }
.item-row { min-height: 72px; margin: 0 28px; border-bottom: 1px solid var(--line); }.item-row:last-child { border-bottom: 0; }
.check-button { height: 44px; width: 34px; display: grid; place-items: center; background: transparent; padding: 0; }
.check-button span { height: 24px; width: 24px; border: 1px solid var(--line-strong); border-radius: 2px; display: grid; place-items: center; }
.checked .check-button span { background: var(--action); border-color: var(--action); color: #fff; }
.item-name { font-size: .9rem; overflow-wrap: anywhere; }.checked .item-name { text-decoration: line-through; color: var(--muted); }.item-quantity { font-size: .8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.edit-link { font-size: .75rem; color: var(--accent); padding: 14px 0 14px 8px; }.picked-heading { margin-top: 16px; }
.empty-state { text-align: center; padding: 36px 24px; color: var(--muted); }.empty-state h3 { margin: 15px 0 8px; color: var(--ink); }.empty-state p { font-size: .85rem; margin: 0; line-height: 1.6; }
.empty-check { display: inline-grid; place-items: center; width: 46px; height: 40px; clip-path: var(--hex); background: var(--soft); color: var(--accent); }
.mobile-only { display: none; }.back-link { font-size: .85rem; display: inline-block; margin-bottom: 24px; color: var(--accent); }
.edit-card { max-width: 620px; margin: 0 auto; padding: 32px; }.edit-card h1 { font-size: 2.4rem; }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; font-size: .85rem; }
.delete-section { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 32px; font-size: .85rem; color: var(--danger); }.delete-section p { margin: 16px 0; }
.skip-link { position: absolute; left: -9999px; }.skip-link:focus { left: 12px; top: 12px; z-index: 30; background: var(--raised); padding: 14px; }
@media(max-width:1250px) {
  .page,.footer { margin-left:32px; margin-right:32px; }.login-page { padding:60px 32px; gap:48px; }
  .add-item { grid-template-columns:minmax(110px,1fr) 76px 86px auto; }.shopping-layout { gap:24px; grid-template-columns:190px minmax(0,1fr); }.optional { display:none; }
}
@media(max-width:850px) {
  .topbar { padding:0 24px; gap:24px; }.topbar nav { gap:24px; }.page { padding-top:32px; }.hub-glyph { width:210px; height:170px; }
  .home-grid { gap:18px; }.login-page { gap:32px; }.login-intro h1 { font-size:2.7rem; }.login-card { padding:24px; }
  .page-title { align-items:flex-start; gap:12px; flex-direction:column; }.shopping-layout { grid-template-columns:1fr; }
  .lists-sidebar .eyebrow { margin-bottom:12px; }.lists-sidebar nav { display:flex; overflow-x:auto; gap:8px; }.list-link { flex-shrink:0; gap:20px; }
  .lists-sidebar .small-note { display:none; }.new-list { padding:8px 0; border:0; }.new-list form { max-width:350px; }.add-item { grid-template-columns:minmax(110px,1fr) 90px 120px auto; }
}
@media(max-width:600px) {
  .topbar { min-height:72px; padding:12px 20px; gap:16px; }.brand { font-size:.95rem; letter-spacing:.1em; }.brand-icon { width:34px; height:30px; }.topbar>form { margin-left:auto; }.quiet { font-size:.75rem; }
  .private-label { font-size:.6rem; max-width:120px; text-align:right; line-height:1.6; }.page,.footer { margin-left:20px; margin-right:20px; }.page { padding-top:28px; padding-bottom:48px; }
  .welcome { padding:8px 0 28px; }.welcome h1 { font-size:2.6rem; }.welcome .hub-glyph { display:none; }.lede { font-size:.9rem; }.home-grid { grid-template-columns:1fr; }.section-heading>span { display:none; }
  .app-card,.list-overview { padding:22px; }.login-page { display:block; padding:36px 20px 48px; min-height:0; }.login-intro h1 { font-size:2.65rem; }.login-intro .hub-glyph { display:none; }.login-intro .lede { margin-bottom:30px; }
  .footer { font-size:.6rem; }.mobile-only { display:block; }.page-title { margin-bottom:24px; }.shopping-layout { gap:20px; }.list-panel-header { padding:22px 18px 0; }.list-panel-header h2 { font-size:1.2rem; }
  .add-item { grid-template-columns:76px minmax(65px,1fr) auto; padding:0 18px 24px; gap:8px; }.item-name-field { grid-column:1/-1; }.add-item label { margin-top:9px; }.item-name-field label { margin-top:16px; }.add-item .primary { padding:12px; }
  .items-heading { padding:12px 18px; }.item-row { margin:0 15px; }.item-name { font-size:.85rem; }.item-quantity { font-size:.73rem; max-width:75px; overflow-wrap:anywhere; }.edit-link { font-size:.7rem; padding-left:4px; }.edit-card { padding:22px; }.edit-card h1 { font-size:2rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; animation:none!important; } }
@media(forced-colors:active) { .primary,.secondary,.danger { border:1px solid ButtonText; }.primary::before,.secondary::before,.danger::before { display:none; } }