/* Family Vault 1.7: slate and sky. A light page with white cards, a floating slate menu, dark main buttons and a sky-blue
   mark for where you are. Red, amber and green appear only when something is late, due or done. The font is Geist, bundled
   with the app. Loaded last, for the standard look (the Quiet, Soft cards and Night looks keep their own colours). */

:root:not([data-skin]){
  --bg:#F3F5F7; --surface:#FFFFFF; --surface-2:#EAEEF2; --s3:#DDE3E9; --line:#D5DBE1; --fg:#141B24; --muted:#4A5766; --faint:#66727F;
  --accent:#1B6FB0; --accent-fg:#FFFFFF; --accent-soft:#DCEBF8; --sky:#6FB7E9;
  --warn:#6B3F00; --warn-soft:#FCE8C8; --danger:#8A2E45; --danger-soft:#FBE9ED; --ok:#2F4A33; --ok-soft:#DCE3D6; --info:#1F4E79; --info-soft:#DCEBF8;
  --k1:#2B6CB0; --k2:#B03A57; --k3:#B7791F; --k4:#2F7D5B; --k5:#5B4B9A; --k6:#2C7A8C; --k7:#8A6D1F; --k8:#4A5766;
  --f-display:"Geist","Segoe UI",system-ui,sans-serif; --f-body:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:26px; --r-sm:14px;
  --shadow:0 1px 2px rgba(20,27,36,.04),0 8px 28px rgba(20,27,36,.07);
  --today-slab:#141B24; --today-ink:#F3F5F7;
  --rail-a:#243242; --rail-b:#19232F;
}
@media (prefers-color-scheme:dark){:root:not([data-skin]):not([data-theme="light"]){
  --bg:#0E141B; --surface:#17202A; --surface-2:#1E2935; --s3:#283544; --line:#2A3746; --fg:#E8EEF4; --muted:#A3B1BF; --faint:#8493A2;
  --accent:#7DBCEB; --accent-fg:#0E141B; --accent-soft:#1D3345; --sky:#7DBCEB;
  --warn:#F2C27A; --warn-soft:#3A2B13; --danger:#F29BAE; --danger-soft:#3D1D27; --ok:#9CC7A2; --ok-soft:#1A2E20; --info:#9CC9EE; --info-soft:#1B2D3F;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); --rail-a:#1B2632; --rail-b:#131B24}}
:root[data-theme="dark"]:not([data-skin]){
  --bg:#0E141B; --surface:#17202A; --surface-2:#1E2935; --s3:#283544; --line:#2A3746; --fg:#E8EEF4; --muted:#A3B1BF; --faint:#8493A2;
  --accent:#7DBCEB; --accent-fg:#0E141B; --accent-soft:#1D3345; --sky:#7DBCEB;
  --warn:#F2C27A; --warn-soft:#3A2B13; --danger:#F29BAE; --danger-soft:#3D1D27; --ok:#9CC7A2; --ok-soft:#1A2E20; --info:#9CC9EE; --info-soft:#1B2D3F;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); --rail-a:#1B2632; --rail-b:#131B24}

/* ---- the frame: transparent top bar with round white buttons, a floating slate menu */
html:not([data-skin]) body{font-feature-settings:"ss01","cv11"}
html:not([data-skin]) .banner{background:var(--bg)}
html:not([data-skin]) .bn-ib{background:var(--surface);border:0;border-radius:50%;box-shadow:var(--shadow);color:var(--fg)}
html:not([data-skin]) .bn-search .search{background:var(--surface);box-shadow:var(--shadow);border-radius:999px}
html:not([data-skin]) .bn-brand{font-weight:700;letter-spacing:-.02em}
html:not([data-skin]) .app{grid-template-columns:252px minmax(0,1fr)}
html:not([data-skin]) .app .rail{margin:4px 0 12px 14px;border:0;border-radius:28px;padding:20px 12px;background:linear-gradient(180deg,var(--rail-a),var(--rail-b));
  box-shadow:0 10px 34px rgba(20,27,36,.22);color:#C9D5E1;scrollbar-width:thin}
html:not([data-skin]) .rail .brand,html:not([data-skin]) .rail .brand-name{color:#fff}
html:not([data-skin]) .rail .mark{background:linear-gradient(135deg,#8CC8F0,#4B9FE0);color:#10202F;border-radius:12px}
html:not([data-skin]) .rail .where{display:none}
html:not([data-skin]) .rail .navgroup .label,html:not([data-skin]) .rail .navgroup .label.grp{color:#8FA3B8;text-transform:none;letter-spacing:0;font-size:.75rem;font-weight:600}
html:not([data-skin]) .rail .nav a,html:not([data-skin]) .rail .nav button{min-height:44px;border-radius:15px;color:#C9D5E1;font-weight:500}
html:not([data-skin]) .rail .nav a:hover,html:not([data-skin]) .rail .nav button:hover{background:rgba(255,255,255,.07);color:#fff}
html:not([data-skin]) .rail .nav a[aria-current="true"],html:not([data-skin]) .rail .nav button[aria-current="true"]{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
html:not([data-skin]) .rail .nav a[aria-current="true"] svg,html:not([data-skin]) .rail .nav button[aria-current="true"] svg{color:#8CC8F0}
html:not([data-skin]) .rail .nav .navsub{border-left-color:rgba(255,255,255,.14)}
html:not([data-skin]) .rail .nav .navsub a{color:#B5C3D1;min-height:0}
html:not([data-skin]) .rail .nav .navsub a[aria-current="true"],html:not([data-skin]) .rail .nav .navsub a[aria-current="page"],html:not([data-skin]) .rail .nav .navsub a[aria-pressed="true"]{background:rgba(96,165,250,.16);color:#fff}
html:not([data-skin]) .rail .nav .count{background:#B03A57;color:#fff}
html:not([data-skin]) .rail .nav .chev{color:#9FB2C5}
html:not([data-skin]) .rail .me{border-top-color:rgba(255,255,255,.12)}
html:not([data-skin]) .rail .me,html:not([data-skin]) .rail .me .muted{color:#C9D5E1}
html:not([data-skin]) .rail .me b{color:#fff}
html:not([data-skin]) .rail .btn.ghost{color:#C9D5E1}
html:not([data-skin]) .rail .railtoggle{color:#C9D5E1}

/* ---- titles, buttons, chips */
html:not([data-skin]) .head h1{font-size:clamp(1.9rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.1}
html:not([data-skin]) .btn{border-radius:999px;font-weight:600;background:var(--surface);border-color:var(--line)}
html:not([data-skin]) .btn.primary{background:#141B24;border-color:#141B24;color:#fff;box-shadow:0 6px 18px rgba(20,27,36,.22)}
html:not([data-skin]) .btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
html:not([data-skin]) .btn.small{padding:5px 12px}
html:not([data-skin]) .chip,html:not([data-skin]) .pill{border-radius:999px}
html:not([data-skin]) .pill.bad,html:not([data-skin]) .pill.danger{background:var(--danger-soft);color:var(--danger)}
html:not([data-skin]) .pill.warn{background:var(--warn-soft);color:var(--warn)}
html:not([data-skin]) .pill.ok{background:var(--ok-soft);color:var(--ok)}
html:not([data-skin]) .input,html:not([data-skin]) .sel,html:not([data-skin]) textarea.input{border-radius:14px}

/* ---- cards: white, large radius, soft shadow, no outline */
html:not([data-skin]) .screen>.card,html:not([data-skin]) .screen>section.card,html:not([data-skin]) .hb-solo,html:not([data-skin]) .hbcustom>.card,
html:not([data-skin]) .screen>div>section.card:not(.hb-off){background:var(--surface);border:0;border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
html:not([data-skin]) .dialog{border-radius:26px}

/* ---- the breadcrumb: always on top of the title, each step a link */
.crumbs{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;font-size:.84rem;color:var(--faint);margin-bottom:6px;position:relative}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:500}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--fg);font-weight:600}
.crumbs .sep{opacity:.55}
.crumb-sib{display:inline-flex;align-items:center;gap:4px;border:0;background:var(--surface-2);color:var(--fg);font:inherit;font-weight:600;padding:2px 8px 2px 10px;border-radius:999px;cursor:pointer}
.crumb-sib:hover,.crumb-sib[aria-expanded="true"]{background:var(--accent-soft)}
.crumb-sib .dd{width:14px;height:14px;transform:rotate(90deg)}
.crumb-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:60;min-width:230px;max-width:min(92vw,340px);background:var(--surface);border-radius:18px;box-shadow:0 14px 44px rgba(20,27,36,.22);padding:8px;display:grid;gap:2px}
.crumb-pop a{padding:9px 12px;border-radius:12px;color:var(--fg);text-decoration:none;font-weight:500}
.crumb-pop a:hover{background:var(--surface-2);text-decoration:none}
.crumb-pop a[aria-current="true"]{background:var(--accent-soft);font-weight:700}
.crumb-pop a:first-child{color:var(--muted);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;margin-bottom:4px}

/* ---- hub pages: a simple overview of categories */
.hb-off{display:none!important}
.hb-over .homegrid{display:none}
.hubgrid{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.hubcard{position:relative;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;min-width:0}
.hubcard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,27,36,.06),0 14px 34px rgba(20,27,36,.12)}
.hubcard .hc-main{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:2px 14px;align-items:center;padding:20px 22px;color:inherit;text-decoration:none;min-height:96px}
.hubcard .hc-ico{grid-row:1/3;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--kc,var(--k8));color:var(--k-fg,#fff)}
.hubcard .hc-ico svg{width:24px;height:24px}
.hubcard .hc-name{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;align-self:end;min-width:0;overflow-wrap:anywhere}
.hubcard .hc-meta{grid-column:2;grid-row:2;font-size:.86rem;color:var(--muted);align-self:start}
.hubcard .go{grid-row:1/3;grid-column:3;color:var(--faint);width:18px;height:18px}
.hubcard .hc-edit{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--faint);display:none;place-items:center;cursor:pointer}
.hubcard:hover .hc-edit,.hubcard:focus-within .hc-edit{display:grid}
.hubcard .hc-edit:hover{background:var(--surface-2);color:var(--fg)}
.hubcard .hc-edit svg{width:15px;height:15px}
.hubcard.is-hidden{opacity:.55}
.hubcard.add{display:flex;align-items:center;justify-content:center;gap:10px;min-height:96px;border:2px dashed var(--line);background:transparent;box-shadow:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.hubcard.add:hover{border-color:var(--accent);color:var(--accent);transform:none;box-shadow:none}
.hubcard .hc-ico.k1{--kc:var(--k1)}.hubcard .hc-ico.k2{--kc:var(--k2)}.hubcard .hc-ico.k3{--kc:var(--k3)}.hubcard .hc-ico.k4{--kc:var(--k4)}
.hubcard .hc-ico.k5{--kc:var(--k5)}.hubcard .hc-ico.k6{--kc:var(--k6)}.hubcard .hc-ico.k7{--kc:var(--k7)}.hubcard .hc-ico.k8{--kc:var(--k8)}
.needstrip{display:flex;align-items:center;gap:10px;background:#FFF6E6;color:var(--warn);border:1px solid #F3DDB5;border-radius:18px;padding:12px 16px;font-weight:600}
.needstrip svg{width:18px;height:18px;flex:none}
.hbcustom{display:grid;gap:22px}
@media (max-width:820px){
  html:not([data-skin]) .app{grid-template-columns:minmax(0,1fr)}
  html:not([data-skin]) .app .rail{margin:0;border-radius:0 0 22px 22px}
  .hubgrid{grid-template-columns:1fr}
}

/* ---- the family tree pop-up: nearly the whole screen, closed with the X */
.treepop{position:fixed;inset:8px;z-index:40;background:var(--surface);border-radius:22px;box-shadow:0 0 0 9999px rgba(20,27,36,.45),0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.tp-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tp-bar h2{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.tp-centre{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.tp-centre .sel{max-width:230px}
.tp-bar .spacer{flex:1}
.tp-act{display:inline-flex;gap:8px;flex-wrap:wrap}
.tp-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.tp-x:hover{background:var(--s3)}
.tp-x svg{width:20px;height:20px}
.tp-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px 14px 12px}
.tp-body .ftree{flex:1;min-height:0}
.tp-body .ftv{height:100%;min-height:0}
.tp-body>.empty,.tp-body>div.empty{margin:auto;max-width:520px}
.tp-help{margin:0}
body.tree-open{overflow:hidden}
.ftm{position:absolute;right:12px;bottom:68px;width:170px;height:110px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:3;cursor:pointer}
.ftms{width:100%;height:100%;display:block}
.ftms rect{fill:var(--s3)}
.ftms rect.me{fill:var(--sky)}
.ftms rect.vw{fill:rgba(111,183,233,.14);stroke:var(--accent);stroke-width:14}
@media (max-width:560px){.ftm{display:none}.tp-bar{padding:10px 12px}.treepop{inset:4px}}
.hubcard.big{grid-column:span 2}
.hubcard .hc-prev{grid-column:1/-1;grid-row:3;height:96px;margin-top:10px;border-radius:14px;background:var(--surface-2);display:block;padding:8px;overflow:hidden}
.trmini{width:100%;height:100%;display:block}
.trmini rect{fill:var(--accent);opacity:.85}
.trmini path{fill:none;stroke:var(--faint);stroke-width:5;opacity:.6}
@media (max-width:820px){.hubcard.big{grid-column:auto}}

/* ---- tax declarations: the Timeline | List switch and the list */
html:not([data-skin]) .seg{background:var(--surface);border:0;box-shadow:var(--shadow);padding:3px}
html:not([data-skin]) .seg button{padding:6px 16px;font-weight:600;font-size:.86rem}
html:not([data-skin]) .seg button[aria-pressed="true"]{background:#141B24;color:#fff}
html:not([data-skin]) .txchip[aria-pressed="true"]{background:#141B24;border-color:#141B24;color:#fff}
.txlist{max-width:980px}

/* ---- shell details */
html:not([data-skin]) .rail .nav a,html:not([data-skin]) .rail .nav a[aria-current="true"]{border:0;outline:0}
html:not([data-skin]) .rail .nav a:focus-visible{outline:2px solid #8CC8F0;outline-offset:-2px}

/* ---- calendar: today in sky */
html:not([data-skin]) .calgrid .day.today{background:var(--sky);color:#0E2233;font-weight:700;border-color:transparent}
html:not([data-skin]) .calgrid .day{border-radius:16px}
html:not([data-skin]) .calgrid .day.today .dn{color:#0E2233}

/* ---- documents: the folder tree in the system blue */
html:not([data-skin]) [aria-selected=true] > .lt-n{background:#0A64D8;color:#fff;font-weight:600}
html:not([data-skin]) [aria-selected=true] > .lt-n .i,html:not([data-skin]) [aria-selected=true] > .lt-n svg{color:#fff}
html:not([data-skin]) [data-type=folder] > .lt-n .i:not(.tw .i){color:#3D8BE8}

/* ---- home: the "needs you" card keeps its red band, only when something needs you */
html:not([data-skin]) .todayblk{border:0;border-radius:var(--r);box-shadow:var(--shadow)}
html:not([data-skin]) .todayblk h2{background:var(--danger);color:#fff}
html:not([data-skin]) .todayblk.warn h2{background:#B7791F}
html:not([data-skin]) .todayblk.clear h2{background:var(--ok)}
html:not([data-skin]) .rail .menubtn{color:#141B24;font-weight:600}

/* ---- layout (1.7.1): the page is centred with equal margins on wide screens; the search sits in the middle of the top bar */
html:not([data-skin]) main .screen:not(.embed){max-width:1280px;margin-inline:auto;width:100%}
html:not([data-skin]) .banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);gap:14px}
html:not([data-skin]) .banner .bn-search{margin:0;max-width:none;width:100%;justify-self:center}
html:not([data-skin]) .banner .bn-tools{justify-self:end}
html:not([data-skin]) .banner .bn-brand{justify-self:start}
@media (max-width:820px){html:not([data-skin]) .banner{display:flex}html:not([data-skin]) .banner .bn-search{margin-left:0}}
/* cards that follow each other inside a block always have room between them */
html:not([data-skin]) .screen>div:not(.hubgrid):not(.head)>section.card+section.card,html:not([data-skin]) #ibxScope>.card+.card{margin-top:22px}

/* ---- Money: the country picker in the menu (1.7.2) */
html:not([data-skin]) .rail .bookbox{margin:2px 0 6px}
html:not([data-skin]) .rail .bookpick,html:not([data-skin]) .rail .bookopt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:12px;font:inherit;font-weight:600;font-size:.92rem;text-align:left;cursor:pointer;color:#E6EDF4;background:rgba(7,11,19,.55);border-color:rgba(255,255,255,.1)}
html:not([data-skin]) .rail .bookpick .bt,html:not([data-skin]) .rail .bookopt .bt{flex:1}
html:not([data-skin]) .rail .bookpick svg{width:14px;height:14px;color:#9FB2C5;transition:transform .15s;transform:rotate(90deg)}
html:not([data-skin]) .rail .bookpick[aria-expanded="true"] svg{transform:rotate(-90deg)}
html:not([data-skin]) .rail .booklist{display:grid;gap:3px;margin-top:6px;padding:6px;border-radius:12px;background:rgba(7,11,19,.55);border:1px solid rgba(255,255,255,.1)}
html:not([data-skin]) .rail .booklist[hidden]{display:none}
html:not([data-skin]) .rail .bookopt{background:none;border-color:transparent;font-weight:500;color:#C9D5E1}
html:not([data-skin]) .rail .bookopt:hover{background:rgba(255,255,255,.07);color:#fff}
html:not([data-skin]) .rail .bookopt[aria-pressed="true"]{background:rgba(140,200,240,.16);border-color:rgba(140,200,240,.35);color:#BFE0F7;font-weight:700}
html:not([data-skin]) .rail .chip{font:600 .72rem ui-monospace,Menlo,monospace;padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#C9D5E1}
html:not([data-skin]) .rail .nav svg.i{stroke-width:1.4}

/* ---- 1.7.3: the menu as designed: full height, straight edges, wider, plain sub-items */
@media (min-width:821px){
  html:not([data-skin]){--rw:300px}
  html:not([data-skin]):has(.app.collapsed){--rw:88px}
  html:not([data-skin]) .app{display:block;padding-left:var(--rw);transition:padding-left .22s ease}
  html:not([data-skin]) .app .rail{position:fixed;left:0;top:0;bottom:0;width:var(--rw);height:100dvh;margin:0;border:0;border-radius:0;padding:0;gap:0;
    background:#151D29;box-shadow:none;z-index:40;transition:width .22s ease;overflow:visible}
  html:not([data-skin]) .banner{margin-left:var(--rw);transition:margin-left .22s ease}
  html:not([data-skin]) .banner .bn-brand{display:none}
  html:not([data-skin]) .banner .bn-search{grid-column:2}
  html:not([data-skin]) .banner .bn-tools{grid-column:3}
  html:not([data-skin]) main .screen:not(.embed){max-width:1600px}
  html:not([data-skin]) .rail .brand{padding:22px 20px 18px;border-bottom:1px solid #2A3544;gap:14px;font-size:1.18rem;font-weight:700;color:#fff}
  html:not([data-skin]) .rail .brand .mark{width:46px;height:46px;border-radius:12px;background:#4F5BE8;color:#fff}
  html:not([data-skin]) .rail .brand .mark svg{width:24px;height:24px}
  html:not([data-skin]) .rail .railtoggle{top:30px;right:-13px;background:#1E2836;border:1px solid #2F3B4C;color:#B9C6D6}
  html:not([data-skin]) .rail .navs{padding:0 14px 12px;gap:4px;margin-top:6px}
  html:not([data-skin]) .rail .me{margin:0;padding:12px 18px;border-top:1px solid #2A3544}
  html:not([data-skin]) .rail .navgroup .label,html:not([data-skin]) .rail .navgroup .label.grp{text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;font-weight:700;color:#93A4B8;margin-top:14px}
  html:not([data-skin]) .rail .nav a,html:not([data-skin]) .rail .nav .sect-row a{gap:14px;padding:10px;font-size:1rem;border-radius:10px;font-weight:500;color:#DCE4EE}
  html:not([data-skin]) .rail .nav a svg{width:22px;height:22px;color:#B4C2D3}
  html:not([data-skin]) .rail .nav a[aria-current="true"],html:not([data-skin]) .rail .nav a[aria-current="page"]{background:rgba(96,165,250,.16);box-shadow:inset 0 0 0 1px rgba(96,165,250,.6);color:#fff;font-weight:700}
  html:not([data-skin]) .rail .nav a[aria-current="true"]::after,html:not([data-skin]) .rail .nav a[aria-current="page"]::after{content:"";width:8px;height:8px;border-radius:50%;background:#4ADE80;margin-left:auto;flex:none}
  html:not([data-skin]) .rail .nav .sect:has(.navsub a:is([aria-current="true"],[aria-current="page"])) > .sect-row > a{background:none;box-shadow:none;font-weight:500;color:#DCE4EE}
  html:not([data-skin]) .rail .nav .sect:has(.navsub a:is([aria-current="true"],[aria-current="page"])) > .sect-row > a::after{display:none}
  html:not([data-skin]) .rail .nav .navsub{margin:2px 0 8px 22px;padding-left:12px;gap:2px}
  html:not([data-skin]) .rail .nav .navsub a{background:none;box-shadow:none;border-radius:9px;padding:8px 12px;min-height:40px;font-size:.94rem;font-weight:500;color:#A9B8C9}
  html:not([data-skin]) .rail .nav .navsub a:hover{background:rgba(255,255,255,.06);color:#fff}
  html:not([data-skin]) .rail .nav .navsub a[aria-current="true"],html:not([data-skin]) .rail .nav .navsub a[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(96,165,250,.6);background:rgba(96,165,250,.16);color:#fff;font-weight:700;display:flex;align-items:center}
  html:not([data-skin]) .rail .nav .navsub a.sub2{padding-left:26px;font-size:.9rem}
  html:not([data-skin]) .app .rail .brand{display:flex!important}
  html:not([data-skin]) .rail .bookpick{flex-wrap:nowrap;white-space:nowrap}
  html:not([data-skin]) .rail .bookpick .bt,html:not([data-skin]) .rail .bookopt .bt{min-width:0;overflow:hidden;text-overflow:ellipsis}
  html:not([data-skin]) .app.collapsed .rail .bookbox{display:none}
}

/* 1.8 pages, categories and records (pages.js) */
.pg-wrap{overflow-x:auto;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.pg-table{width:100%;border-collapse:collapse;font-size:.95rem}
.pg-table th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line)}
.pg-table td{padding:12px 16px;border-bottom:1px solid var(--line)}
.pg-table tr:last-child td{border-bottom:0}
.pg-table tbody tr{cursor:pointer}
.pg-table tbody tr:hover{background:var(--hover,rgba(96,165,250,.08))}
.pg-table td a{color:inherit;font-weight:600;text-decoration:none}
.pg-table td.go{width:24px;color:var(--muted)}
.pg-tl{display:grid;gap:18px}
.pg-tl-group h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.pg-tl-item{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 16px;margin-bottom:8px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);color:inherit;text-decoration:none;border-left:3px solid var(--accent)}
.pg-tl-date{color:var(--muted);font-size:.9rem}
.pg-tl-title{font-weight:600}
.pg-cal{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.pg-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pg-cal-h .flip{transform:rotate(180deg)}
.pg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.pg-dh{font-size:.72rem;color:var(--muted);text-align:center;padding:4px 0}
.pg-day{min-height:72px;border:1px solid var(--line);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pg-day.off{border-color:transparent}
.pg-dn{font-size:.75rem;color:var(--muted)}
.pg-chip{font-size:.75rem;background:rgba(96,165,250,.16);border-radius:6px;padding:2px 5px;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px 24px;margin:0 0 12px}
.pg-fields dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pg-fields dd{margin:4px 0 0;font-size:1rem;overflow-wrap:anywhere}
.pg-frow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) auto auto;gap:8px;align-items:center;margin-bottom:8px}
@media (max-width:620px){.pg-frow{grid-template-columns:1fr 1fr}.pg-tl-item{grid-template-columns:1fr}.pg-day{min-height:48px}.pg-chip{font-size:.65rem}}

/* 1.10 categories everywhere: item pages open on tiles (pagekit.js), one list to show and order them (hubs.js) */
.pk-off{display:none!important}
.pk-tiles{margin:4px 0 8px}
.cat-list .cat-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat-list .cat-row .grow{min-width:140px}
.cat-list .cat-row .check{white-space:nowrap}
.cat-list svg.up{transform:rotate(-90deg)}
.cat-list svg.down{transform:rotate(90deg)}
.btn.icon-only{padding-inline:8px}

/* 1.11: Needs you on Home, the year at a glance, own records in the panel */
.needs .sheet-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.needs-sub{margin:4px 0 8px}
.needs-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.needs-row .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--sunk,#EEF1F6)}
.needs-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#2F6BB0}
.needs-dot.late{background:#C2410C}.needs-dot.week{background:#D99A12}.needs-dot.later{background:#93A4B8}
.needs-act{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.needs-host{margin-bottom:16px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}
.yr-wrap{overflow-x:auto}
.yr-grid{min-width:860px;display:grid}
.yr-lane{display:grid;grid-template-columns:140px repeat(12,minmax(0,1fr));border-top:1px solid var(--line)}
.yr-head{border-top:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.yr-head .yr-m{padding:6px 4px}
.yr-who{display:flex;align-items:center;gap:8px;padding:10px 8px;min-width:0}
.yr-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yr-who .ico{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--sunk,#EEF1F6)}
.yr-m{border-left:1px solid var(--line);padding:6px 3px;display:flex;flex-direction:column;gap:3px;min-width:0}
.yr-m.now{background:rgba(96,165,250,.08)}
.yr-ev{display:block;font-size:.72rem;line-height:1.25;padding:3px 5px;border-radius:6px;background:rgba(47,107,176,.12);color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yr-ev.src-birthdays{background:rgba(176,58,87,.12)}.yr-ev.src-rentals{background:rgba(63,127,147,.14)}.yr-ev.src-records{background:rgba(107,77,176,.12)}.yr-ev.src-dates{background:rgba(181,115,28,.14)}
.yr-ev.late{box-shadow:inset 0 0 0 1px #C2410C}
.yr-busy{margin:4px 0 10px;color:var(--muted)}
.pg-conn{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.needs-extra{display:flex;flex-direction:column}
.needs-extra .it{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.needs-extra .it:first-child{border-top:0}
.needs-extra .it .grow{display:flex;flex-direction:column;min-width:200px}
.needs-extra .it .grow span{color:var(--muted);font-size:.85rem}
.needs-extra .it.late{box-shadow:inset 3px 0 0 #C2410C}