/* Family Vault 1.4: the new look. Every page has three parts: the title with one main button, up to three insight
   tiles (tinted, calculated, never editable), then the records as calm flat lists. Clicking a record opens it in a
   panel beside the list (a sheet from the bottom on phones). Loaded after app.css and screens.css; the four themes
   (Classic, Quiet, Soft cards, Night) each draw tiles and records in their own way at the end of this file. */

:root{
  --bg:#F7F8F7; --surface:#FFFFFF; --surface-2:#F0F3F1; --s3:#E5EAE7; --line:#E1E6E3; --fg:#121A17; --muted:#5E6B66; --faint:#7F8B86;
  --accent:#1F6F5C; --accent-soft:#DDEDE7;
  --t-money-a:#D9F0E7; --t-money-b:#EEF8F3; --t-money-i:#1F6F5C;
  --t-date-a:#FCE8C8; --t-date-b:#FFF6E6; --t-date-i:#9A5A00;
  --t-people-a:#F9DCE2; --t-people-b:#FDF1F3; --t-people-i:#A23B55;
  --t-home-a:#DCE3FA; --t-home-b:#F1F4FD; --t-home-i:#3949A0;
  --k1:#3B6FD4; --k2:#C04F6C; --k3:#D27A2C; --k4:#1F8A70; --k5:#6B4FA0; --k6:#2E7D9A; --k7:#8A6D1F; --k8:#5B6B78; --k-fg:#FFFFFF;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --panel-w:min(420px,38vw);
  --today-slab:#121A17; --today-ink:#F7F8F7;
  --shadow-lg:0 1px 2px rgba(18,26,23,.05),0 8px 24px rgba(18,26,23,.08);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1513; --surface:#151D1A; --surface-2:#1A2420; --s3:#223029; --line:#24302B; --fg:#E7EFEB; --muted:#9AA9A3; --faint:#7D8D86;
  --accent:#6CC6A8; --accent-soft:#183129;
  --t-money-a:#163A2F; --t-money-b:#11231D; --t-money-i:#8AD8BD; --t-date-a:#3B2B10; --t-date-b:#22190B; --t-date-i:#F2BC6B;
  --t-people-a:#3E1D27; --t-people-b:#241217; --t-people-i:#F29BB0; --t-home-a:#1F2648; --t-home-b:#141830; --t-home-i:#A9B6F5;
  --k1:#4A78D0; --k2:#B9536E; --k3:#C47A35; --k4:#2A8C73; --k5:#7458A8; --k6:#357F99; --k7:#8E7426; --k8:#5E6E7B;
  --today-slab:#1F2C27; --today-ink:#E7EFEB;
  --shadow-lg:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{
  --bg:#0F1513; --surface:#151D1A; --surface-2:#1A2420; --s3:#223029; --line:#24302B; --fg:#E7EFEB; --muted:#9AA9A3; --faint:#7D8D86;
  --accent:#6CC6A8; --accent-soft:#183129;
  --t-money-a:#163A2F; --t-money-b:#11231D; --t-money-i:#8AD8BD; --t-date-a:#3B2B10; --t-date-b:#22190B; --t-date-i:#F2BC6B;
  --t-people-a:#3E1D27; --t-people-b:#241217; --t-people-i:#F29BB0; --t-home-a:#1F2648; --t-home-b:#141830; --t-home-i:#A9B6F5;
  --k1:#4A78D0; --k2:#B9536E; --k3:#C47A35; --k4:#2A8C73; --k5:#7458A8; --k6:#357F99; --k7:#8E7426; --k8:#5E6E7B;
  --today-slab:#1F2C27; --today-ink:#E7EFEB;
  --shadow-lg:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}

body{font-size:15.5px}
.screen{gap:26px}
main{padding-top:24px}

/* ---- 1. the page title: a small breadcrumb, the title, one main button, the rest as ghost buttons */
.head{align-items:flex-end;gap:12px 16px}
.head>div:first-child{min-width:0;flex:1 1 320px}
.head h1{font-size:clamp(1.65rem,3.2vw,2rem);font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere}
.head .sub{font-size:.9rem;max-width:72ch;margin-top:6px}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:.8rem;color:var(--faint);margin-bottom:4px;min-width:0}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs .sep{opacity:.7}
.head .actions{gap:6px;align-items:center}
.head .actions .btn:not(.primary):not(.danger){border-color:transparent;background:transparent;color:var(--muted)}
.head .actions .btn:not(.primary):not(.danger):hover{background:var(--surface-2);color:var(--fg)}
.head .actions select.input{width:auto}
.btn{border-radius:10px;font-weight:600}
.btn.primary{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.primary:hover{filter:none;opacity:.9}
.who{display:flex;gap:16px;align-items:center;min-width:0}
.who>div{min-width:0}
.who .pwrap{flex:none}
.who .camera{width:26px;height:26px;right:-2px;bottom:-2px}
.who .camera svg{width:14px;height:14px}

/* ---- 2. insight tiles: tinted by topic, a big number, never editable, saying where the numbers come from */
.insights{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.insights:empty{display:none}
.ins{--a:var(--t-home-a);--b:var(--t-home-b);--i:var(--t-home-i);border-radius:20px;padding:16px 18px 14px;display:grid;gap:6px;align-content:start;grid-template-rows:auto auto 1fr auto;min-height:150px;background:linear-gradient(150deg,var(--a),var(--b));color:var(--fg);min-width:0}
.ins.t-money{--a:var(--t-money-a);--b:var(--t-money-b);--i:var(--t-money-i)}
.ins.t-date{--a:var(--t-date-a);--b:var(--t-date-b);--i:var(--t-date-i)}
.ins.t-people{--a:var(--t-people-a);--b:var(--t-people-b);--i:var(--t-people-i)}
.ins.t-home{--a:var(--t-home-a);--b:var(--t-home-b);--i:var(--t-home-i)}
.ins .k{font-size:.78rem;font-weight:700;color:var(--i);letter-spacing:.02em}
.ins .v{font-family:var(--f-display);font-size:2rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ins .v small{font-size:.9rem;font-weight:600;color:var(--muted);margin-left:5px;font-family:var(--f-body)}
.ins .v.txt{font-size:1.35rem}
.ins .d{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.ins .tl-list{display:grid;gap:4px;font-size:.86rem;align-content:start}
.ins .tl-list div{display:flex;justify-content:space-between;gap:10px;min-width:0}
.ins .tl-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins .tl-list b{white-space:nowrap;font-weight:650;font-variant-numeric:tabular-nums}
.ins .bar{height:8px;border-radius:999px;background:color-mix(in srgb,var(--i) 18%,transparent);overflow:hidden;margin-top:4px}
.ins .bar i{display:block;height:100%;border-radius:999px;background:var(--i)}
.ins .from{margin-top:auto;padding-top:6px;font-size:.78rem;color:var(--i);font-weight:650;text-decoration:none;display:inline-flex;gap:4px;align-items:center;justify-self:start;border:0;background:none;padding-left:0;padding-right:0;cursor:pointer}
.ins .from:hover{text-decoration:underline}
/* "Calculated": the one mark on tiles and widgets the app works out by itself; never editable */
.calc-tag{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:6px;padding:1px 7px 1px 6px;border-radius:999px;font:700 .64rem/1.5 var(--f-body);letter-spacing:.03em;text-transform:uppercase;color:var(--i,var(--muted));white-space:nowrap;background:color-mix(in srgb,var(--i,var(--muted)) 12%,transparent);cursor:help}
.calc-tag::before{content:"";width:9px;height:9px;flex:none;background:linear-gradient(currentColor,currentColor) 0 100%/2px 45% no-repeat,linear-gradient(currentColor,currentColor) 3.5px 100%/2px 100% no-repeat,linear-gradient(currentColor,currentColor) 7px 100%/2px 65% no-repeat}
h2 .calc-tag{font-family:var(--f-body)}
/* a calculated widget that is a list (What's missing, Recently changed): a soft panel, so it never looks like records */
.card.calcd{background:var(--surface-2);border-radius:18px;padding:16px 18px}
.card.calcd .card-h,.card.calcd .sheet-h{border-bottom-color:color-mix(in srgb,var(--fg) 8%,transparent)}
/* records carry a pencil at the end: open one to change it beside the list */
.row[data-open]::after{content:"\270E";width:14px;flex:none;font:400 14px/1 system-ui;text-align:center;color:var(--faint);opacity:.8;margin-left:2px}
.row[data-open]:hover::after,.row[data-open].open::after,.row[data-open]:focus-visible::after{color:var(--accent);opacity:1}
.ins.alarm{--a:var(--danger);--b:var(--danger);--i:#fff;color:#fff;text-decoration:none}
.ins.alarm .k,.ins.alarm .d{color:#fff;opacity:.92}
.ins.alarm .v{font-size:2.8rem}

/* ---- records: a calm flat list on the page background, no card box */
.card{background:none;border:0;border-radius:0;padding:0;box-shadow:none;gap:12px}
.card-h{padding-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px 12px}
.card-h h2{font-size:1.15rem;font-family:var(--f-display);font-weight:650}
.card-h>.muted.small:only-of-type,.card-h .cnt{color:var(--faint);font-weight:600}
details.card>summary{padding:8px 0;border-bottom:1px solid var(--line)}
.sheet-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sheet-h h2{font-size:1.15rem;font-family:var(--f-display);font-weight:650}
.sheet-h .cnt{color:var(--faint);font-weight:600;font-size:.9rem}
h3.sub .cnt{color:var(--faint);font-weight:600;margin-left:4px}
.taxnotes{margin-bottom:18px}.taxnotes:empty{display:none}
.sheet-h .search{flex:1;min-width:160px;max-width:300px;padding:6px 11px}
.sheet-h .spacer{flex:1}
.list{display:grid}
.row{padding:11px 8px;border-radius:0;gap:12px}
.row.link:hover,.row[data-open]:hover{background:var(--surface-2)}
.row[data-open]{cursor:pointer}
.row[data-open]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
.row.open,.row.open:hover{background:var(--accent-soft)}
.row .grow>div:first-child,.row .grow>b:first-child{font-weight:650}
.row .grow .small.muted,.row .grow>.muted{font-size:.82rem}
.row .tag{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--s3);color:var(--muted);white-space:nowrap}
.row .val{font-family:var(--f-mono);font-size:.9rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row .go{color:var(--faint);flex:none}
.amt,td.r .num,a.fm{font-family:var(--f-mono)}

/* the coloured rounded square at the start of a row: an initial, an icon or a date */
.ini{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.95rem;color:var(--k-fg);background:var(--k8);flex:none;overflow:hidden}
.ini img{width:100%;height:100%;object-fit:cover}
.ini svg.i{width:19px;height:19px}
.k1{--kc:var(--k1)}.k2{--kc:var(--k2)}.k3{--kc:var(--k3)}.k4{--kc:var(--k4)}.k5{--kc:var(--k5)}.k6{--kc:var(--k6)}.k7{--kc:var(--k7)}.k8{--kc:var(--k8)}
.ini[class*=" k"]{background:var(--kc)}
.ico{width:38px;height:38px;border-radius:12px;background:var(--s3);color:var(--muted)}
.ico.a{background:var(--accent-soft);color:var(--accent)}
.ico[class*=" k"]{background:var(--kc);color:var(--k-fg)}
.date{width:42px;border-radius:12px;padding:5px 0;background:var(--s3)}
.date.soon{background:var(--t-date-a)}
.date.soon b,.date.soon small{color:var(--t-date-i)}
.av.tav{border-radius:26%}
.list .av.s{border-radius:12px;width:38px;height:38px}

/* family avatars (Overview) */

/* the "Today" block on the Overview: what needs you, a button on each line */
.todayblk{--tone:var(--danger);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.todayblk.warn{--tone:var(--warn)}
.todayblk.clear{--tone:var(--ok)}
.todayblk h2{margin:0;background:var(--tone);color:var(--surface);padding:11px 16px;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.todayblk h2 svg{width:18px;height:18px;flex:none}
.todayblk h2 small{margin-left:auto;font-weight:600;font-size:.82rem;opacity:.92}
.todayblk .it{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap;color:inherit;text-decoration:none}
.todayblk .items .it:first-child{border-top:0}
.todayblk .it .grow{flex:1;min-width:170px}
.todayblk .it .grow>span{font-size:.82rem;color:var(--muted);display:block;margin-top:1px}
.todayblk .it b{font-weight:600}
.tchp{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.tchp.late{background:var(--danger-soft);color:var(--danger)}
.tchp.soon{background:var(--warn-soft);color:var(--warn)}
.todayblk .more{margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.todayblk.clear .more{border-top:0}

/* ---- 3. edit beside the list: a panel on the right, a sheet from the bottom on phones */
dialog.dialog.panel{position:fixed;inset:16px 16px 16px auto;margin:0;width:var(--panel-w);max-width:none;max-height:none;height:auto;overflow:auto;border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid var(--line);z-index:45;padding:20px;align-content:start}
dialog.dialog.panel.wide{--panel-w:min(560px,46vw)}
body.panel-open main{padding-right:calc(var(--panel-w) + 40px)}
body.panel-wide main{padding-right:calc(min(560px,46vw) + 40px)}
.panel .grab{display:none}
.panel .actions.end{position:sticky;bottom:-20px;background:var(--surface);padding:10px 0 2px;margin-bottom:-2px}
.saved{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--ok);font-weight:600;min-height:1.4em;margin:0}
.saved .linkbtn{color:inherit;font-weight:700}
.saved.busy{color:var(--muted)}
.saved.bad{color:var(--danger)}

/* the main action on phones: a round + at the bottom right */
@media (max-width:820px){
  .btn.fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));width:56px;height:56px;padding:0;border-radius:18px;font-size:0;gap:0;z-index:40;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .btn.fab svg{width:24px;height:24px;stroke-width:2.2}
  .btn.fab>*:not(svg):not(input){display:none}
  body.panel-open .btn.fab{display:none}
  main{padding-bottom:96px}
  .insights{grid-auto-columns:80%;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .ins{scroll-snap-align:start;min-height:136px}
  .head h1{font-size:1.6rem}
  .head>div:first-child{flex-basis:100%}
  .head .actions{width:100%}
  .head .actions:empty{display:none}
}
@media (max-width:900px){
  dialog.dialog.panel,dialog.dialog.panel.wide{inset:auto 0 0 0;width:100%;max-height:82dvh;border-radius:24px 24px 0 0;border-bottom:0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
  .panel .grab{display:block;width:40px;height:4px;border-radius:9px;background:var(--line);justify-self:center;margin:2px auto 6px}
  body.panel-open main,body.panel-wide main{padding-right:clamp(16px,3vw,40px);padding-bottom:60dvh}
  .panel .actions.end{bottom:calc(-16px - env(safe-area-inset-bottom))}
}

/* a section being edited in the panel; the section editor in a panel is narrower than the old dialog */
.vcard.open{box-shadow:-4px 0 0 var(--accent);padding-left:12px}
.panel .frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.panel .frow .fval{grid-column:1 / -1}
.panel .frow .fmove{grid-column:2;justify-self:end;grid-row:1}
.panel .iconpick label{width:34px;height:34px}

/* small things the old cards had */
.phero{background:none;border:0;padding:0;border-radius:0}
.stats .stat{border-radius:16px}
.pagetabs{border-bottom:0;gap:6px}
.pagetabs a{margin:0;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.84rem;font-weight:600}
.pagetabs a[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pagetabs a svg{width:14px;height:14px}
.pagetabs .pill{background:color-mix(in srgb,currentColor 15%,transparent);color:inherit}
.chip{font-weight:600}
.lnk{background:none}
.ibx-item{background:var(--surface);border-color:var(--line)}
.em-112{border-radius:20px}
.vcard{gap:10px}
.masonry{column-gap:28px}
.masonry>*{margin-bottom:26px}
.secret{border-radius:12px}
.todayblk,.ins,.row,.btn,.chip{transition:background-color .15s,box-shadow .15s,opacity .15s}
@media (prefers-reduced-motion:reduce){.todayblk,.ins,.row,.btn,.chip{transition:none}}

/* ---- the four themes keep their own way of drawing tiles and records */

/* Quiet: soft green tiles with a hairline, a hairline list, quiet initials */

/* Soft cards: rounder, warmer tiles, round buttons, the records on white rounded strips */

/* Night: glowing tiles, typewriter numbers */

/* Soft cards: the menu runs along the top; the menu editor's wrapper must not break the row */
/* a record's title in the panel stays beside its close button */
.panel .card-h{flex-wrap:nowrap;align-items:flex-start}
.panel .card-h>div{min-width:0}
.panel .card-h h2{overflow-wrap:anywhere}
/* records that save as you type need no Save button; new records keep their Add */
form.autosave .actions.end button:not([type=button]):not([value]){display:none}
@media print{
  .insights,.btn.fab,dialog.panel{display:none!important}
  body.panel-open main{padding-right:0}
}
#adminPane{display:grid;gap:28px;min-width:0}

/* ticking rows in tables (Insurance, All files, the service book history) and in the Inbox */
th.tick,td.tick{width:30px;padding-right:0}
tr.picked td{background:var(--accent-soft)}
.ibx-item.picked{background:var(--accent-soft);border-radius:14px}
.ibx-file .bsel{margin-top:2px}
/* All files: the table scrolls inside its card instead of widening the page on a phone */
#dScope{grid-template-columns:minmax(0,1fr)}

/* ---- the banner across the top: search, notifications, Admin and the person's own page */
:root{--bn:60px}
.banner{position:sticky;top:0;z-index:40;min-height:var(--bn);display:flex;align-items:center;gap:14px;padding:6px 20px;background:var(--bg)}
.bn-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:650;font-size:1.1rem;color:inherit;text-decoration:none;min-width:0;flex:none}
.bn-search{flex:1;max-width:460px;margin-left:clamp(0px,3vw,36px)}
.bn-search .search{background:var(--surface);border:0;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.04);padding:8px 14px}
.bn-tools{margin-left:auto;display:flex;align-items:center;gap:2px;position:relative}
.bn-ib{position:relative;width:38px;height:38px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--muted);cursor:pointer;padding:0}
.bn-ib svg{width:19px;height:19px}
.bn-ib:hover,.bn-ib[aria-expanded="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05)}
.bn-me{margin-left:6px}.bn-me .av{width:34px;height:34px}
.bn-cnt{position:absolute;top:3px;right:2px;min-width:17px;height:17px;border-radius:99px;background:var(--danger);color:var(--surface);font-size:.64rem;font-weight:800;display:grid;place-items:center;padding:0 4px;pointer-events:none}
.bn-pop{position:absolute;right:0;top:calc(100% + 4px);width:min(260px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.14);padding:6px;z-index:60}
.bn-pop.l{width:min(360px,92vw)}
.bn-pop h4{margin:0;padding:8px 10px 4px;font-size:.76rem;font-weight:600;color:var(--faint)}
.bn-mi,.bn-row{display:flex;gap:11px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--fg);text-decoration:none;width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.bn-mi:hover,.bn-row:hover{background:var(--surface-2)}
.bn-mi svg{width:17px;height:17px;color:var(--muted);flex:none}
.bn-mi b,.bn-row b{display:block;font-weight:600;font-size:.9rem}.bn-mi small,.bn-row small{display:block;color:var(--muted);font-size:.78rem}
.bn-row{align-items:flex-start}
.bn-dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:var(--faint)}.bn-dot.late{background:var(--danger)}.bn-dot.soon{background:var(--warn)}
.bn-sep{height:1px;background:var(--line);margin:6px 4px}
.bn-empty{margin:0;padding:10px;color:var(--muted);font-size:.9rem}
.app{min-height:calc(100vh - var(--bn))}
@media (min-width:821px){
  html:not([data-skin="soft"]) .app .rail{top:calc(var(--bn) + 4px);height:calc(100dvh - var(--bn) - 16px);margin-top:4px}
  .app .rail .brand,.app .rail .me,.app .rail .navgroup[data-grp="admin"]{display:none}
}
@media (max-width:820px){
  .banner{position:static;flex-wrap:wrap;gap:8px 10px;padding:8px 16px}
  .bn-search{order:5;flex-basis:100%;max-width:none;margin:0}
  .app .rail .brand{display:none}
  .app{min-height:0}
}

/* ---- Home: blocks in a six-column grid; small = 2, medium = 4, large = 6 */
.home{display:grid;gap:18px;align-content:start}
.hgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.card.hw{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0;box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.03);gap:0;position:relative}
.hw.c2{grid-column:span 2}.hw.c4{grid-column:span 4}.hw.c6{grid-column:span 6}
@media (max-width:1180px){.hw.c2{grid-column:span 3}.hw.c4{grid-column:span 6}}
@media (max-width:700px){.hw.c2,.hw.c3,.hw.c4,.hw.c6{grid-column:span 6}}
.hw-h{display:flex;align-items:baseline;gap:8px;padding:16px 20px 2px}
.hw-h h3{margin:0;font-size:.9rem;font-weight:600;color:var(--muted)}
.hw-h small{color:var(--faint);font-size:.78rem}
.hw-h a{margin-left:auto;font-size:.8rem;color:var(--faint);text-decoration:none;font-weight:500}.hw-h a:hover{color:var(--accent)}
.hw-b{padding:6px 20px 18px}
.hw-empty,.hw-note{margin:0;color:var(--muted);font-size:.88rem}.hw-note{margin-top:6px}
.hw-more{margin:6px 0 0;font-size:.82rem;color:var(--muted)}.hw-more a{color:var(--accent)}
.hlist{display:grid}
.hli{display:flex;gap:14px;align-items:center;padding:10px 0;color:inherit;text-decoration:none}
.hli+.hli{border-top:1px solid var(--line)}
.hli .g{flex:1;min-width:0}.hli b{display:block;font-weight:600}
.hli small{display:block;color:var(--muted);font-size:.78rem}
.hdt{width:40px;flex:none;text-align:center;border-radius:12px;background:var(--surface-2);padding:4px 0;font-size:.6rem;font-weight:600;color:var(--muted);line-height:1.1;display:block}
.hdt i{display:block;font-style:normal;font-size:.98rem;font-weight:700;color:var(--fg)}
.hdt.p{background:var(--warn-soft);color:var(--warn)}.hdt.p i{color:var(--warn)}
.hdt.b{background:var(--info-soft);color:var(--info)}.hdt.b i{color:var(--info)}
.hnum{font-size:1.7rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}.hnum small{font-size:.82rem;font-weight:500;color:var(--muted);letter-spacing:0}
.hbar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:12px 0 7px}.hbar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.htwo{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted)}.htwo .late{color:var(--danger);font-weight:600}
.hem{display:flex;gap:12px;align-items:center;padding:16px 20px;color:inherit;text-decoration:none}.hem b{display:block}.hem small{display:block;color:var(--muted);font-size:.8rem}
.card.hw:has(.hem){border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
.hq{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0 4px}
.hq a{font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--surface-2);color:var(--fg);text-decoration:none}.hq a:hover{background:var(--accent-soft)}
.hw-help{margin:0}.hw-pre{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hw.editing{outline:2px dashed var(--line);outline-offset:3px}
.hw-tools{display:flex;gap:6px;align-items:center;padding:10px 12px 0;justify-content:flex-end}
.hw-tools button{min-width:30px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:9px;cursor:pointer;color:inherit;font:inherit;font-size:.8rem}
.hw-tools button:disabled{opacity:.35;cursor:default}
.hsz{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}.hsz button{border:0;border-radius:0;height:28px;min-width:28px}
.hsz button[aria-pressed="true"]{background:var(--fg);color:var(--surface)}
.hw.editing .hw-b,.hw.editing .hem{opacity:.55;pointer-events:none}
.hgi{display:flex;align-items:center;gap:10px;padding:8px 0}.hgi+.hgi{border-top:1px solid var(--line)}.hgi b{flex:1;font-weight:600}
.hw-gal{max-width:420px}