/* Sumi-e ink theme. Washi paper by day, night ink after dark; it follows the device unless a theme is picked.
   Fonts are hosted here, so the app looks the same offline. Both are SIL Open Font License (see fonts/).
   Shippori Mincho is for headings and numbers, Zen Kaku Gothic New for everything else. The "jikan" files hold
   only the few kanji and kana the app draws itself (時間, the path kanji and しごと). The old 8-bit look is kept in docs/pixel-theme/. */
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/shippori-mincho-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/shippori-mincho-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/shippori-mincho-jikan-700.woff2') format('woff2'); unicode-range: U+4E8B, U+4ED5, U+5177, U+5712, U+6599, U+65E5, U+6642, U+672C, U+7406, U+82B8, U+8A9E, U+8ECA, U+9053, U+9593; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/shippori-mincho-jikan-700.woff2') format('woff2'); unicode-range: U+4E8B, U+4ED5, U+5177, U+5712, U+6599, U+65E5, U+6642, U+672C, U+7406, U+82B8, U+8A9E, U+8ECA, U+9053, U+9593; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/zen-kaku-gothic-new-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/zen-kaku-gothic-new-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/zen-kaku-gothic-new-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/zen-kaku-gothic-new-jikan-500.woff2') format('woff2'); unicode-range: U+3054, U+3057, U+3068; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/zen-kaku-gothic-new-jikan-500.woff2') format('woff2'); unicode-range: U+3054, U+3057, U+3068; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/zen-kaku-gothic-new-jikan-500.woff2') format('woff2'); unicode-range: U+3054, U+3057, U+3068; }

/* ---------------------------------------------------------------- theme tokens
   Light (washi) is the base. Dark (night ink) applies when the device is dark and no theme is picked,
   or when dark is picked. The old token names are kept so every screen picks up the new colors. */
:root {
  color-scheme: light;
  --bg:#F1ECE0; --card:#EAE4D5; --inner:#E1DAC8; --locked-bg:#E6E0D1; --tab-active:#F7F3EA;
  --cell-unread:#D9D1BE; --cell-future:#E3DCCB; --cell-unread-border:#CBC2AE; --cell-read:#8A6512;
  --gold-text:#7A5A10; --gold:#8A6512; --gold-open:#A08548; --gold-ring-dim:#B3A27A; --gold-line-dim:#D2C6A6;
  --border:#D3CBB8; --border-strong:#A9A08D; --line2:#C9C0AC; --divider:#D6CEBB; --ring-dim:#CFC7B4;
  --dashed:#A49B88; --dim:#8A8476; --text:#1B1916; --muted:#5A554B; --locked-name:#4B473F;
  --accent:#8B1E24; --accent-hover:#6E161B; --accent-fill:#1B1916; --on-accent:#F1ECE0;
  --ink:#2A2723; --ink-hover:#000000; --green:#46642F; --orange:#9A520F; --blue:#26446E; --violet:#5E3C74; --yellow:#8A6512; --teal:#36675E; --violet-fill:#7A5A92;
  --medal:#F7F3EA; --check:#F1ECE0; --panel-glass:rgba(234,228,213,0.72);
  --seal:#8B1E24; --danger:#B8321F; --wash:#1B1916; --snow:#FAF7F0; --well:#F7F3EA;
  --grain-blend:multiply; --grain-op:.45;
  --page-bg-image:none;
  --tex:transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:#14130F; --card:#1C1B17; --inner:#25231E; --locked-bg:#191814; --tab-active:#100F0C;
  --cell-unread:#34312A; --cell-future:#25231E; --cell-unread-border:#3E3B33; --cell-read:#D8B25C;
  --gold-text:#E2C06A; --gold:#D8B25C; --gold-open:#A89060; --gold-ring-dim:#6E6248; --gold-line-dim:#3F3929;
  --border:#38352E; --border-strong:#58534A; --line2:#3A3730; --divider:#2E2C26; --ring-dim:#3A3730;
  --dashed:#6A645A; --dim:#7E786B; --text:#EDE7D9; --muted:#B8B1A1; --locked-name:#CFC8B8;
  --accent:#C24A40; --accent-hover:#D9655B; --accent-fill:#EDE7D9; --on-accent:#14130F;
  --ink:#E4DDCF; --ink-hover:#FFFFFF; --green:#A3C186; --orange:#E8A05A; --blue:#8FA9D4; --violet:#B9A0D0; --yellow:#D8B25C; --teal:#8CC2B6; --violet-fill:#9479AD;
  --medal:#100F0C; --check:#14130F; --panel-glass:rgba(28,27,23,0.72);
  --seal:#C24A40; --danger:#EF6A55; --wash:#EDE7D9; --snow:#A49D8E; --well:#100F0C;
  --grain-blend:screen; --grain-op:.06;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#14130F; --card:#1C1B17; --inner:#25231E; --locked-bg:#191814; --tab-active:#100F0C;
  --cell-unread:#34312A; --cell-future:#25231E; --cell-unread-border:#3E3B33; --cell-read:#D8B25C;
  --gold-text:#E2C06A; --gold:#D8B25C; --gold-open:#A89060; --gold-ring-dim:#6E6248; --gold-line-dim:#3F3929;
  --border:#38352E; --border-strong:#58534A; --line2:#3A3730; --divider:#2E2C26; --ring-dim:#3A3730;
  --dashed:#6A645A; --dim:#7E786B; --text:#EDE7D9; --muted:#B8B1A1; --locked-name:#CFC8B8;
  --accent:#C24A40; --accent-hover:#D9655B; --accent-fill:#EDE7D9; --on-accent:#14130F;
  --ink:#E4DDCF; --ink-hover:#FFFFFF; --green:#A3C186; --orange:#E8A05A; --blue:#8FA9D4; --violet:#B9A0D0; --yellow:#D8B25C; --teal:#8CC2B6; --violet-fill:#9479AD;
  --medal:#100F0C; --check:#14130F; --panel-glass:rgba(28,27,23,0.72);
  --seal:#C24A40; --danger:#EF6A55; --wash:#EDE7D9; --snow:#A49D8E; --well:#100F0C;
  --grain-blend:screen; --grain-op:.06;
}
:root {
  --core-h: 604px;
  --serif:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',Georgia,serif;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',system-ui,sans-serif;
  --pixel:var(--serif);
  --jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.45 var(--sans);
  background-color: var(--bg); background-image: var(--page-bg-image);
  background-size: auto, 7px 7px; background-repeat: no-repeat, repeat;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--serif); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.serif { font-family: var(--serif); }
.kicker { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 16px 32px 72px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 640px) { .wrap { padding: 12px 16px 64px; gap: 22px; } }

/* ---------------------------------------------------------------- buttons and fields */
.btn, .btn-o, .btn-i {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  font-family: var(--serif); font-weight: 700; letter-spacing: .08em; text-decoration: none; border: 1.5px solid transparent; background: none;
}
.btn { background: var(--accent-fill); color: var(--on-accent); }
.btn:hover { color: var(--on-accent); filter: brightness(1.1); }
.btn-o { border-color: var(--accent); color: var(--accent); }
.btn-i { border-color: var(--ink); color: var(--ink); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.btn-i:hover { color: var(--ink-hover); }
.btn-t { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--muted); text-decoration: underline; }
.btn.sm, .btn-o.sm, .btn-i.sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.full { width: 100%; }
.field {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--border-strong); color: var(--text); border-radius: 0;
}
textarea.field { resize: vertical; }
.num { width: 88px; text-align: center; padding: 8px; min-height: 40px; }
label.lab { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-fill); flex: 0 0 auto; }

/* ---------------------------------------------------------------- top bar and header */
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.brandlink { font-family: var(--serif); font-weight: 600; letter-spacing: .18em; font-size: 14px; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.tb-right { display: flex; align-items: center; gap: 4px 14px; }
.seg-toggle { display: inline-flex; border: 1px solid var(--border-strong); }
.seg-toggle button { min-height: 40px; min-width: 64px; padding: 0 14px; background: transparent; border: 0; font-weight: 600; }
.seg-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sync { font-size: 14px; }
.sync.ok { display: none; }
.iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text); background: var(--card); }
.iconbtn svg { width: 22px; height: 22px; }
.banner { padding: 10px 14px; border: 1px solid var(--border-strong); background: var(--inner); font-size: 15px; }
.banner.err { border-color: var(--accent); }
.hdr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.hdr h1 { font-size: 48px; line-height: 1; letter-spacing: .03em; margin-top: 4px; }
.lvl { flex: 0 1 440px; min-width: 260px; }
.lvl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lvl-n { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.lvl-line { display: flex; align-items: baseline; gap: 12px; }
.lvl-line .lvl-n { font-size: 20px; }
.xpbar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 10px 0 8px; }
.xpbar i { height: 10px; background: var(--border); }
.xpbar i.on { background: var(--accent-fill); }
.layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.maincol { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sec { display: flex; flex-direction: column; gap: 14px; }
.sec-h { font-size: 16px; font-weight: 600; letter-spacing: .16em; color: var(--ink); }
.sec-h.dim { color: var(--muted); }

/* ---------------------------------------------------------------- cores */
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.tab { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; text-align: left; background: var(--card); border: 1px solid var(--border); border-bottom: 3px solid var(--border); color: var(--text); }
.tab[aria-selected="true"] { background: var(--tab-active); border-color: var(--tc); }
.tab .tab-t { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: .06em; display: block; }
.tab .tab-s { font-size: 14px; color: var(--muted); display: block; }
.tab svg { width: 28px; height: 28px; color: var(--tc); flex: 0 0 auto; }
.tc-spiritual { --tc: var(--violet); --cell-read: var(--violet-fill); --mark: var(--violet); } .tc-mental { --tc: var(--blue); } .tc-physical { --tc: var(--yellow); --mark: var(--yellow); } .tc-financial { --tc: var(--green); }
.core { background: var(--card); border-top: 3px solid var(--tc); padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 20px; height: var(--core-h); overflow: hidden; }
.core-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.core-top h3 { font-size: 26px; letter-spacing: .04em; margin-top: 2px; }
.core .kicker { color: var(--tc); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.box { border: 1px solid var(--border); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.box h4 { font-size: 18px; font-weight: 600; }
.box.dashed { border-style: dashed; border-color: var(--dashed); }
.stagebox { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.stagebox b.serif { font-size: 17px; font-weight: 600; }
.box-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.chk small { display: block; color: var(--muted); font-size: 14px; }
.chk.done > span { color: var(--muted); }
.yearnav { display: flex; align-items: center; gap: 6px; }
.yearnav button { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--border-strong); }
.ywrap { overflow-x: auto; padding-bottom: 6px; }
.ygrid { position: relative; width: max-content; padding: 22px 0 0 34px; }
.ymo { position: absolute; top: 0; font-size: 13px; color: var(--muted); }
.ywd { position: absolute; left: 0; font-size: 12px; color: var(--muted); }
.ycells { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.d { display: block; width: 12px; height: 12px; padding: 0; border-radius: 2px; border: 1px solid var(--cell-unread-border); background: var(--cell-unread); }
.d.read { background: var(--cell-read); border: 0; }
.d.note { background-color: var(--mark, var(--gold-text)); background-image: radial-gradient(circle, var(--bg) 1.8px, transparent 2.3px); border: 0; }
.d.future { background: var(--cell-future); border-color: var(--divider); cursor: default; }
.d.blank { visibility: hidden; }
.d:disabled { opacity: 1; }
.d.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); position: relative; z-index: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.daycard { border: 1px solid var(--border); background: var(--inner); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.daycard .l { flex: 0 1 260px; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.daycard .m { flex: 0 1 280px; min-width: 240px; }
.daycard .r { flex: 1 1 280px; min-width: 0; }
.daycard h4 { font-size: 20px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.sqbtn { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--border-strong); }
.readbtn { min-height: 44px; padding: 0 16px; font-weight: 600; border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
.readbtn[aria-pressed="true"] { background: transparent; color: var(--mark, var(--gold-text)); border-color: var(--mark, var(--gold)); }
.gym { display: grid; grid-template-columns: 74px repeat(7, 24px); gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.gcell { width: 24px; height: 24px; padding: 0; border-radius: 2px; border: 1px solid var(--cell-unread-border); background: var(--cell-unread); }
.gcell.fut { background: var(--cell-future); border-color: var(--divider); }
.gcell.w { background: var(--orange); border: 0; }
.gcell.c { background: var(--green); border: 0; border-radius: 50%; }
.gcell.b { background: var(--orange); border: 0; box-shadow: inset 0 0 0 5px var(--green); }
.gcell:disabled { opacity: 1; cursor: default; }
.lgc { border-radius: 50%; background: var(--green); } .lgw { background: var(--orange); }

/* ---------------------------------------------------------------- path cards */
.pcards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.pcards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pc { background-color: var(--card); background-image: repeating-linear-gradient(135deg, var(--tex) 0, var(--tex) 2px, transparent 2px, transparent 6px); border: 1px solid var(--border); padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 18px; }
.pc.s { padding: 18px 22px 22px; gap: 14px; }
.pc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line2); padding-bottom: 10px; }
.pc-h h3 { font-size: 26px; font-weight: 700; letter-spacing: .08em; }
.pc.s .pc-h h3 { font-size: 20px; }
.pc-b { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.pc.s .pc-b { flex-wrap: nowrap; gap: 16px; }
.pc-r { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pc.s .pc-r { gap: 6px; font-size: 15px; }
.rw { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--divider); padding-bottom: 6px; }
.rw:last-child { border-bottom: 0; padding-bottom: 0; }
.rw b { font-weight: 600; white-space: nowrap; }
.pc-f { border-top: 1px solid var(--line2); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc.s .pc-f { flex-direction: column; align-items: stretch; padding-top: 12px; }
.ring { flex: 0 0 auto; }

/* ---------------------------------------------------------------- side panel */
.sidecard { background: var(--card); border-top: 3px solid var(--ink); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.sidecard h2 { font-size: 20px; letter-spacing: .1em; }
.todo-g { display: flex; flex-direction: column; gap: 10px; }
.todo-g + .todo-g { border-top: 1px solid var(--border); padding-top: 14px; }
.todo-i { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.todo-i small { display: block; color: var(--muted); font-size: 13px; }
.stages { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.stage { display: flex; gap: 10px; align-items: center; }
.stage .grow { flex: 1; }
.dm { width: 11px; height: 11px; transform: rotate(45deg); flex: 0 0 auto; display: inline-block; }
.dm.done { background: var(--gold); }
.dm.avail { border: 2px solid var(--gold); }
.dm.lock { border: 1.5px dashed var(--dashed); }
.tag { font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.tag.on { color: var(--green); } .tag.off { color: var(--muted); }

/* ---------------------------------------------------------------- path pages */
.path-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.path-top h1 { font-size: 44px; line-height: 1; letter-spacing: .05em; }
.pathlayout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pathmain { flex: 999 1 640px; min-width: 0; }
.tree-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--panel-glass); }
.tree { position: relative; width: 1000px; height: 770px; overflow: hidden; }
.arc { position: absolute; border-radius: 50%; border: 1px solid var(--border); opacity: .6; }
.lines { position: absolute; left: 0; top: 0; }
.node {
  position: absolute; width: 64px; height: 64px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--inner); border: 2px solid var(--nc); color: var(--nc);
}
.node.hub { width: 96px; height: 96px; }
.node .ico { width: 30px; height: 30px; } .node.hub .ico { width: 44px; height: 44px; }
.node.n-open { border-width: 2px; }
.node.n-prog { border-width: 3px; background-image: linear-gradient(color-mix(in srgb, var(--nc) 14%, transparent), color-mix(in srgb, var(--nc) 14%, transparent)); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--nc); }
.node.n-done { border-width: 3px; background-image: linear-gradient(color-mix(in srgb, var(--nc) 22%, transparent), color-mix(in srgb, var(--nc) 22%, transparent)); }
.node.n-locked { border: 2px dashed var(--dashed); background: var(--locked-bg); color: var(--dim); }
.node.sel { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent); }
.b-hvac { --nc: var(--green); } .b-dc { --nc: var(--orange); } .b-bas { --nc: var(--blue); } .b-shared { --nc: var(--ink); } .b-hub { --nc: var(--gold); }
.badge { position: absolute; width: 18px; height: 18px; right: -4px; }
.badge.ck { top: -4px; } .badge.lk { bottom: -4px; }
.nlabel { position: absolute; font-size: 14px; line-height: 18px; }
.nlabel b { font-size: 15px; display: block; font-weight: 600; }
.nlabel.left { text-align: right; } .nlabel.below, .nlabel.above { text-align: center; }
.nlabel.locked { color: var(--muted); }
.nlabel .pp { letter-spacing: .1em; }
.chip { position: absolute; transform: translate(-50%, -50%); padding: 2px 10px; background: var(--card); border: 1px solid currentColor; font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.xlink { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }

.rowspanel { border: 1px solid var(--border); background: var(--card); padding: 28px 32px 32px; overflow-x: auto; }
.rowsec + .rowsec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.rowsec h2 { font-size: 20px; font-weight: 700; letter-spacing: .1em; }
.cols { display: flex; margin-top: 22px; }
.col { position: relative; flex: 0 0 176px; width: 176px; }
.conn { position: absolute; left: 132px; top: 37px; width: 88px; height: 2px; background: var(--gold-line-dim); }
.conn.lit { background: var(--gold); }
.med {
  position: relative; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto; padding: 0; border-radius: 50%;
  background: var(--medal); border: 3px solid var(--gold-open); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-line-dim);
}
.med.started { border-color: var(--gold); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-ring-dim); }
.med.locked { background: var(--locked-bg); border: 2px dashed var(--dashed); box-shadow: none; }
.med.sel { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
.med .glyph { font-family: var(--jp); font-size: 34px; line-height: 1; color: var(--gold-open); }
.med.started .glyph { color: var(--gold); }
.med.locked .glyph { color: var(--dim); }
.med .ico { width: 34px; height: 34px; color: var(--gold-open); } .med.started .ico { color: var(--gold); } .med.locked .ico { color: var(--dim); }
.mname { margin-top: 14px; text-align: center; }
.mname b { font-family: var(--serif); font-size: 17px; font-weight: 600; display: block; }
.mname span { font-size: 14px; color: var(--muted); }
.mname.locked b { color: var(--locked-name); }
.dms { display: flex; flex-direction: column; gap: 6px; width: 120px; margin: 12px auto 0; font-size: 14px; line-height: 18px; color: var(--muted); }
.dms div { display: flex; align-items: center; gap: 10px; }
.dms .av { color: var(--text); font-weight: 600; }
.dms .dm { width: 12px; height: 12px; }

.panel { flex: 1 1 320px; min-width: 0; background: var(--card); border: 1px solid var(--accent); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.emblem { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--locked-bg); border: 1px solid var(--border); color: var(--nc, var(--accent)); }
.emblem .glyph { font-family: var(--jp); font-size: 72px; line-height: 1; color: var(--accent); }
.emblem .ico { width: 72px; height: 72px; }
.panel h2 { font-size: 30px; line-height: 1.1; margin-top: 4px; }
.pipsline { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.pipsline .pp { color: var(--accent); font-size: 18px; letter-spacing: .12em; }
.reqbox { border: 1px solid var(--border); background: var(--inner); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.lvsec { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lvsec h3 { font-size: 17px; font-weight: 600; }
.lvsec.avail h3 { color: var(--accent); } .lvsec.done h3 { color: var(--ink); } .lvsec.locked h3 { color: var(--muted); }
.lvsec .meta { font-size: 13px; color: var(--muted); }
.lvh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctr { display: flex; flex-direction: column; gap: 6px; }
.ctrc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.ctrc .sqbtn { min-width: 40px; min-height: 40px; }
.rm { margin-left: auto; background: none; border: 0; color: var(--muted); text-decoration: underline; min-height: 32px; font-size: 14px; }
.addform { display: flex; flex-wrap: wrap; gap: 8px; }
.addform .field { flex: 1 1 140px; width: auto; }
.lockedlist { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; display: flex; flex-direction: column; gap: 4px; }

/* ---------------------------------------------------------------- project, settings, login */
.narrow { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.apps { display: flex; flex-direction: column; gap: 10px; }
.approw { border: 1px solid var(--border); background: var(--inner); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.apptop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.apptop b { font-family: var(--serif); font-size: 18px; }
.appctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.appctl select { width: auto; min-width: 150px; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat3 { border: 1px solid var(--border); padding: 10px 6px; text-align: center; }
.stat3 b { display: block; font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.stat3 span { font-size: 13px; color: var(--muted); }
.login { max-width: 420px; margin: 8vh auto 0; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--accent); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login h1 { font-size: 30px; }
.msg { font-size: 15px; }
.msg.err { color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); background: var(--text); color: var(--bg); padding: 10px 18px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 20; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) { .hdr h1 { font-size: 38px; } .path-top h1 { font-size: 36px; } .rowspanel { padding: 20px 16px; } }


/* ---------------------------------------------------------------- core pages, workouts, charts */
@media (max-width: 700px) { :root { --core-h: 820px; } .hide-sm { display: none; } }
.corepage { display: flex; flex-direction: column; gap: 24px; }
.stats4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.prog { display: flex; flex-direction: column; gap: 6px; }
.bar { height: 10px; background: var(--border); }
.bar i { display: block; height: 100%; background: var(--tc, var(--accent-fill)); }
.exlist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.exbox { border-top: 1px solid var(--divider); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.setrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.frow .field { width: auto; min-width: 150px; }
select.sel { width: auto; min-width: 150px; }
.histrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--divider); padding: 8px 0; }
.histrow:last-child { border-bottom: 0; }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font: 12px var(--sans); }
.chart .lastv { fill: var(--text); font-weight: 600; }
.chart .grid { stroke: var(--divider); stroke-width: 1; }
.chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.gcell.s { background: var(--accent-fill); border: 0; }
.chartgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }

/* ---------------------------------------------------------------- Mental: watch and read list */
.mtag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .1em; border: 1px solid currentColor; padding: 1px 6px; vertical-align: middle; }
.mk-book { color: var(--gold-text); } .mk-tv { color: var(--blue); } .mk-movie { color: var(--orange); } .mk-anime { color: var(--accent); }
.core.tc-mental { gap: 14px; }
.mrow { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--divider); padding-bottom: 10px; }
.mrow:last-child { border-bottom: 0; padding-bottom: 0; }
.mitem { border: 1px solid var(--border); background: var(--inner); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--divider); padding: 10px 0; }
.hrow:last-child { border-bottom: 0; }
.stars { color: var(--gold-text); letter-spacing: .12em; }
.mstrip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; border-top: 1px solid var(--line2); padding-top: 12px; color: var(--muted); }
.yrow { display: grid; grid-template-columns: 56px 1fr 28px; gap: 4px 10px; align-items: center; }
.yrow > .muted:last-child { grid-column: 2 / -1; }
.ybar { display: flex; height: 14px; gap: 1px; }
.ybar i { display: block; min-width: 3px; }
.editform { display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------------------------------------------- phone: app layout with a bottom menu */
.bnav { display: none; }
@media (max-width: 700px) {
  .bnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--border-strong); padding: 0 4px env(safe-area-inset-bottom, 0px); }
  .bnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; color: var(--muted); text-decoration: none; font-size: 12px; border-top: 3px solid transparent; margin-top: -1px; }
  .bnav a svg { width: 24px; height: 24px; }
  .bnav a[aria-current="page"] { color: var(--text); border-top-color: var(--c); }
  .bnav a[aria-current="page"] svg { color: var(--c); }
  .wrap { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .cores-sec, .backrow { display: none; }
  .side { order: -1; flex-basis: 100%; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- gym mode, and workout days and splits */
.gymwrap { max-width: 600px; padding-bottom: 140px; gap: 14px; }
.gymtop { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.block { display: block; }
.grow { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 64px; width: 100%; background: var(--card); border: 1px solid var(--border); padding: 10px 14px; text-align: left; color: var(--text); font: inherit; }
.gcard { background: var(--card); border: 1px solid var(--accent); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ghead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: none; border: 0; padding: 0; color: var(--text); font: inherit; text-align: left; min-height: 44px; width: 100%; }
.ghead b { font-size: 20px; }
.gset { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 6px; align-items: center; }
.gset.nw { grid-template-columns: 22px minmax(0, 1fr) 48px; }
.gset.head { font-size: 12px; color: var(--muted); text-align: center; }
.step { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; border: 1px solid var(--border-strong); background: var(--inner); }
.step .stp { min-height: 52px; background: none; border: 0; color: var(--text); font-size: 22px; padding: 0; cursor: pointer; }
.step .field { min-height: 52px; border: 0; background: transparent; text-align: center; font-size: 20px; font-family: var(--serif); font-weight: 700; padding: 0 2px; width: 100%; min-width: 0; -moz-appearance: textfield; }
.step .field::-webkit-outer-spin-button, .step .field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chkc { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--dashed); background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; font-size: 22px; }
.chkc.on { border: 2px solid var(--gold); background: var(--gold); color: var(--bg); }
.chkc svg { width: 22px; height: 22px; }
.gbar { position: sticky; bottom: 0; padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--border); display: flex; gap: 10px; z-index: 5; }
.gbar .btn { flex: 1; }
.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); background: none; color: var(--text); font: inherit; white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.card { background: var(--card); border: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.card.sel { border-color: var(--accent); }
.radio { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; min-height: 44px; color: var(--text); font: inherit; text-align: left; }
.radio b { font-size: 18px; }
.dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dashed); flex: 0 0 auto; display: inline-block; }
.dot.on { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 5px, transparent 6px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip2 { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); background: var(--inner); font-size: 15px; }
.dexr { display: flex; align-items: center; gap: 6px; }
.dexr > .field { flex: 1; min-width: 0; }
.ordr { display: inline-flex; gap: 2px; }
.rest-on { color: var(--accent); }
@media (max-width: 700px) {
  .gymwrap { padding-bottom: 130px; }
  .gbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .gbar.withnav { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
}
.gbar .btn, .gbar .btn-i { min-height: 52px; }

/* ---------------------------------------------------------------- small touch-ups */
.corepage .path-top h1 { margin-bottom: 10px; }
.btnpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
.btnpair .btn, .btnpair .btn-o { width: 100%; min-height: 48px; justify-content: center; text-align: center; box-sizing: border-box; padding: 0 12px; }
@media (max-width: 420px) { .btnpair { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- phone trees: map, zoom, and the wheel */
.tpage { gap: 14px; padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
.tm-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tm-title h1 { font-size: 36px; line-height: 1.1; letter-spacing: .04em; margin: 0; }
.tm-sub { margin: 0; }
.tm-map { position: relative; width: 358px; max-width: 100%; height: 620px; margin: 0 auto; }
.tm-map .tm-lines { position: absolute; left: 0; top: 0; }
.tm-hubl { position: absolute; left: 0; right: 0; top: -2px; text-align: center; font-size: 13px; font-weight: 600; color: var(--locked-name); }
.tm-hubl span { font-weight: 400; color: var(--muted); }
.tm-bh { position: absolute; top: 104px; width: 110px; transform: translateX(-50%); text-align: center; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.tm-pill { display: block; width: 110px; box-sizing: border-box; padding: 4px 0; border: 1px solid currentColor; background: var(--card); font-family: var(--serif); font-weight: 700; font-size: 12px; letter-spacing: .05em; white-space: nowrap; }
.tm-bar { display: block; height: 6px; background: var(--border); margin-top: 8px; }
.tm-bar i { display: block; height: 100%; background: currentColor; }
.tm-ct { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.tm-n { position: absolute; width: 112px; transform: translateX(-50%); text-align: center; background: none; border: 0; color: var(--text); font: inherit; padding: 0; cursor: pointer; }
.tm-n b { display: block; font-size: 13px; line-height: 1.2; margin-top: 6px; font-weight: 600; }
.tm-n .st { display: block; font-size: 12px; color: var(--muted); }
.tm-n.l b { color: var(--locked-name); }
.tm-nc, .tm-med { position: relative; width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--nc); background: var(--bg); color: var(--nc); flex: 0 0 auto; }
.tm-n.big .tm-nc { width: 56px; height: 56px; }
.tm-nc svg, .tm-med svg.ico { width: 24px; height: 24px; }
.tm-nc.s-locked, .tm-med.s-locked { border-style: dashed; border-color: var(--dashed); color: var(--dim); }
.tm-nc.s-done, .tm-med.s-done { background: var(--card); }
.tm-nc.s-prog, .tm-med.s-prog { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--nc); }
.tm-med { background: var(--medal); border: 3px solid var(--gold-open); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-line-dim); color: var(--gold-text); }
.tm-med.s-prog, .tm-med.s-done { border-color: var(--gold); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-ring-dim); }
.tm-med.s-locked { box-shadow: none; }
.tm-med .glyph, .opt .glyph, .tm-nc .glyph { font-family: var(--serif); font-size: 24px; line-height: 1; }
.tbadge { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--nc); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; font-weight: 700; }
.tlock { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 1px solid var(--border-strong); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.tlock svg { width: 10px !important; height: 10px !important; }
.tm-secs { display: flex; flex-direction: column; gap: 12px; }
.tm-sec { background: var(--card); border: 1px solid var(--border); padding: 8px 8px 14px; display: flex; flex-direction: column; gap: 10px; }
.tm-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 8px; min-height: 44px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; width: 100%; cursor: pointer; }
.tm-sh b { font-family: var(--serif); font-size: 18px; letter-spacing: .08em; }
.tm-sh span { font-size: 13px; color: var(--muted); }
.tm-mrow { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); text-align: center; row-gap: 12px; }
.tm-mrow:not(.wrap)::before { content: ""; position: absolute; top: 25px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 3px; background: var(--gold-line-dim); }
.tm-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--text); font: inherit; padding: 0; min-height: 96px; cursor: pointer; }
.tm-cell b { font-size: 12.5px; line-height: 1.15; font-weight: 600; padding: 0 2px; }
.tm-cell.l b { color: var(--locked-name); }
.tm-dm { display: flex; gap: 4px; }
.tm-dm i { width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--dashed); display: inline-block; }
.tm-dm i.av { border: 2px solid var(--gold); }
.tm-dm i.done { background: var(--gold); border-color: var(--gold); }
.tm-sw { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.tm-sw button { display: block; min-height: 64px; padding: 8px 6px; background: var(--card); border: 1px solid var(--border); border-bottom: 3px solid var(--border); color: var(--bc); text-align: center; font: inherit; cursor: pointer; }
.tm-sw button[aria-pressed="true"] { background: var(--tab-active); border-color: var(--bc); }
.tm-sw .pl { display: block; font-family: var(--serif); font-weight: 700; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.tm-sw .tm-bar { margin: 8px 4px 0; }
.tm-sw .ct { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.tm-lane { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; background: var(--card); border: 1px solid var(--border); }
.tm-lane::before { content: ""; position: absolute; left: 44px; top: 42px; bottom: 42px; width: 3px; background: var(--nc); opacity: .4; }
.tm-row { position: relative; display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 14px; min-height: 84px; padding: 6px 14px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; width: 100%; cursor: pointer; }
.tm-row.sel { background: var(--inner); }
.tm-row .tm-nc, .tm-row .tm-med { width: 60px; height: 60px; }
.tm-row .tm-nc svg, .tm-row .tm-med svg.ico { width: 28px; height: 28px; }
.tm-row .glyph { font-size: 28px; }
.tm-nt b { display: block; font-size: 18px; }
.tm-nt .s { display: block; font-size: 14px; color: var(--muted); }
.tm-nt .p { display: block; font-size: 13px; margin-top: 2px; color: var(--muted); }
.tm-row.l .tm-nt b { color: var(--locked-name); }
.tm-note { font-size: 14px; color: var(--muted); text-align: center; }
.tm-note .btn-t { padding: 0 2px; min-height: 32px; }
.wheel .dim { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 31; background: rgba(15, 14, 13, .72); }
.wheel[data-open="true"] .dim { display: block; }
.wheel .fabwrap { position: fixed; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); height: 0; display: flex; justify-content: center; z-index: 32; pointer-events: none; }
.wheel .fab { position: absolute; bottom: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--c); color: var(--bg); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--c); display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto; touch-action: none; cursor: pointer; }
.wheel .fab svg { width: 30px; height: 30px; }
.wheel .fab .glyph { font-size: 28px; }
.wheel .fab .x { display: none; }
.wheel[data-open="true"] .fab .ic { display: none; }
.wheel[data-open="true"] .fab .x { display: inline-flex; }
.wheel .arc { display: none; position: absolute; bottom: 32px; left: 50%; width: 0; height: 0; pointer-events: auto; touch-action: none; }
.wheel[data-open="true"] .arc { display: block; }
.wheel .opt { position: absolute; left: calc(var(--x) - 34px); top: calc(var(--y) - 34px); width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--text); font: inherit; padding: 0; cursor: pointer; }
.wheel .opt .oc { width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 2px solid var(--oc); color: var(--oc); display: flex; align-items: center; justify-content: center; }
.wheel .opt .oc svg { width: 26px; height: 26px; }
.wheel .opt .ol { font-size: 11px; font-weight: 600; letter-spacing: .06em; line-height: 1.1; text-align: center; white-space: nowrap; }
.wheel .opt.sel .oc, .wheel .opt.hov .oc { background: var(--oc); color: var(--bg); width: 64px; height: 64px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .1); }
.wheel .opt.sel .ol, .wheel .opt.hov .ol { color: var(--oc); }
.wheel .tip { position: absolute; left: -130px; top: -236px; width: 260px; text-align: center; font-size: 14px; color: var(--text); background: var(--card); border: 1px solid var(--border-strong); padding: 8px 10px; }

/* ---------------------------------------------------------------- number wheel (phone) */
body.pk-open { overflow: hidden; }
.picker { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 60; }
.picker[hidden] { display: none; }
.pk-dim { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(15, 14, 13, .72); }
.pk-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 3px solid var(--accent); padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.pk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; }
.pk-head b { font-size: 17px; text-align: center; flex: 1; }
.pk-head .btn-t { min-width: 64px; min-height: 44px; }
.pk-done { color: var(--accent); font-weight: 700; }
.pk-cols { display: flex; gap: 10px; }
.pk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.pk-label { font-size: 13px; color: var(--muted); }
.pk-wrap { position: relative; height: 220px; }
.pk-wrap::before, .pk-wrap::after { content: ""; position: absolute; left: 0; right: 0; height: 74px; pointer-events: none; z-index: 1; }
.pk-wrap::before { top: 0; background: linear-gradient(var(--card), transparent); }
.pk-wrap::after { bottom: 0; background: linear-gradient(transparent, var(--card)); }
.pk-list { height: 220px; overflow-y: auto; scroll-snap-type: y mandatory; padding: 88px 0; box-sizing: border-box; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; }
.pk-list::-webkit-scrollbar { display: none; }
.pk-list:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.pk-item { height: 44px; box-sizing: border-box; padding-bottom: 2px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-family: var(--serif); font-size: 22px; color: var(--muted); cursor: pointer; }
.pk-item.on { color: var(--text); font-weight: 700; font-size: 26px; padding-bottom: 4px; }
.pk-band { position: absolute; left: 0; right: 0; top: 88px; height: 44px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: rgba(255, 255, 255, .04); pointer-events: none; z-index: 2; }
input[data-pick][readonly] { cursor: pointer; caret-color: transparent; }
.gset.pv { grid-template-columns: 22px minmax(0, 1fr) 48px; }
.gset.head.pv span:nth-child(2) { text-align: center; }
.pkv { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 1px solid var(--border-strong); background: var(--inner); color: var(--text); font: inherit; padding: 0 8px 2px; cursor: pointer; }
.pkw { display: flex; align-items: baseline; gap: 6px; }
.pkv b { font-family: var(--serif); font-size: 26px; line-height: 1; }
.pkv small { font-size: 13px; color: var(--muted); }
.pkv i { font-style: normal; color: var(--muted); padding: 0 2px; }

/* ---------------------------------------------------------------- phone home: a card for every path and project */
.homewrap { gap: 14px; }
.homecol { display: flex; flex-direction: column; gap: 14px; }
.gt-grid { display: grid; gap: 10px; }
.gt-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 122px; padding: 10px 4px; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--c); color: var(--text); text-decoration: none; font: inherit; cursor: pointer; min-width: 0; }
.gtile.big { min-height: 136px; }
.gtile b { font-size: 15px; letter-spacing: .06em; line-height: 1.15; overflow-wrap: anywhere; }
.gtile.sm b { font-size: 12.5px; letter-spacing: .03em; }
.gtile .gt-m { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gtile .lv { color: var(--c); font-weight: 600; }
.gtile.dashed { border-style: dashed; background: none; }
.tring { width: 64px; height: 64px; }
.gtile.big .tring { width: 72px; height: 72px; }
.tagc { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.tagc.on { color: var(--green); }
.cptitle { font-family: var(--serif); font-size: 26px; font-weight: 600; }
@media (max-width: 700px) {
  .wrap.homewrap { gap: 12px; }
  .homewrap .sec-h { margin-bottom: 8px; }
  .homewrap .sidecard { padding: 12px 14px 14px; gap: 8px; }
  .homewrap .tsub { display: none; }
}

/* ---------------------------------------------------------------- softer corners on buttons */
:root { --r: 6px; }
.btn, .btn-o, .btn-i, .sqbtn, .readbtn, .pill, .pkv, .yearnav button { border-radius: var(--r); }
.seg-toggle, .step { border-radius: var(--r); overflow: hidden; }

/* ---------------------------------------------------------------- XP card, and matching Career pills */
.xpseg { align-self: flex-start; }
.xpseg button { min-height: 44px; padding: 0 14px; }
.wktype .seg-toggle button { min-height: 44px; padding: 0 14px; }
.xpnote { margin: 0; }
.xpfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
@media (max-width: 700px) { .xpbest { display: none; } }
.chip { width: 148px; box-sizing: border-box; text-align: center; }

/* ---------------------------------------------------------------- Today: habits and projects, due dates */
.trow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; }
.xpb { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.overdue { color: var(--accent); }
.duein { width: auto; min-width: 0; max-width: 156px; min-height: 40px; }
.duein.over { border-color: var(--accent); }
.chk.static { cursor: default; }
.chk.static input:disabled { opacity: 1; cursor: default; }
.wktype { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wktype p { margin: 0; }
.todo-link { display: block; padding: 8px 0 8px 30px; color: var(--text); }
@media (max-width: 700px) { .taskrow { flex-wrap: wrap; } .taskrow .chk { flex: 1 1 100% !important; } }

/* ---------------------------------------------------------------- two-step sign-in */
.mfaqr { background: #fff; padding: 10px; align-self: flex-start; max-width: 100%; height: auto; }
.mfakey { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mfakey code { font-size: 15px; letter-spacing: .08em; overflow-wrap: anywhere; padding: 8px 10px; background: var(--inner); border: 1px solid var(--border); }

/* ---------------------------------------------------------------- XP activity page */
.xplink { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.xpnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.xplabel { font-family: var(--serif); font-size: 18px; flex: 0 1 auto; }
.evgroup { display: flex; flex-direction: column; }
.evday { display: flex; align-items: center; gap: 12px; padding-top: 14px; }
.evday h3 { font-size: 17px; flex: 1; }
.evrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.evmain { display: flex; flex-direction: column; min-width: 0; }
.evxp { white-space: nowrap; }
.evxp em { font-style: normal; font-size: 12px; }
.evrow button { min-height: 44px; }
.evrow.cleared .evmain { opacity: .6; }
.evrow.cleared .evxp { color: var(--muted); }
.box.danger { border-color: var(--accent); }

.xpwrap .seg-toggle button, .xpwrap .btn-t, .xpwrap .sqbtn { min-height: 44px; }

/* ---------------------------------------------------------------- hours invested */
.cardmode button { min-height: 40px; padding: 0 12px; }
.xprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.goalbars { display: flex; flex-direction: column; gap: 10px; }
.goalbar { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.goalbar-h { display: flex; justify-content: space-between; gap: 10px; }
.tgoals { display: flex; flex-direction: column; }
.gname { font-weight: 600; }
.gtrack { height: 8px; background: var(--inner); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.gtrack i { display: block; height: 100%; }
.gres { margin-top: 2px; }
.tgoal { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.tbtn { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--inner); color: var(--muted); border-radius: var(--r); cursor: pointer; }
.tbtn.on { color: var(--accent); border-color: var(--accent); }
.trow3 { align-items: center; gap: 8px; }
.tdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.timerbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px calc(8px); padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: var(--card); border-bottom: 2px solid var(--accent); }
.timerbar .tlabel { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timerbar .tclock { font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; }
.timerbar.warn { border-bottom-color: var(--yellow); }
.timerbar .btn-i.sm, .timeask .btn-i.sm { min-height: 44px; }
.timeask { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 45; max-width: 520px; margin: 0 auto; background: var(--card); border: 1px solid var(--border-strong); border-top: 3px solid var(--ink); border-radius: var(--r); padding: 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.timeask p { margin: 0 0 8px; }
.timeask .btn-t { min-height: 44px; }
@media (max-width: 700px) { .timeask { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
.tacts { display: inline-flex; gap: 4px; }
.trow2 .evxp { font-variant-numeric: tabular-nums; }
.tedit { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.tedit .btnrow { grid-column: 1 / -1; }
.tadd { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tadd .wide { grid-column: 1 / -1; }
.tset { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.tset label { flex: 1; }
.tset .field { width: 110px; flex: 0 0 auto; }
.timewrap .tacts .btn-t { min-height: 44px; }

/* ================================================================ 8-bit handheld layer
   Square corners, stepped (notched) panels, pixel headings, segmented bars. */
:root { --r: 0px; --n: 4px; --notch: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))); }
body { font-size: 16px; line-height: 1.4; }
.sidecard, .core, .pc, .box, .gtile, .login, .panel, .approw, .daycard, .reqbox, .mitem, .card, .tm-sec, .tm-lane, .stat3, .banner, .tab, .grow, .gcard, .rowspanel, .tree-wrap { clip-path: var(--notch); }
.sidecard, .core, .pc, .box, .gtile, .login, .panel, .approw, .daycard, .mitem, .card, .tm-sec, .tm-lane, .stat3, .tab, .grow, .gcard, .rowspanel { border-width: 2px; }
.sidecard { border: 2px solid var(--border); border-top: 3px solid var(--ink); }
.core { border: 2px solid var(--border); border-top: 3px solid var(--tc); }
.box { background: var(--card); }
.core .box, .sidecard .box, .panel .box { background: var(--inner); }
.pc { background-image: none; }
.login { border-top: 3px solid var(--accent); }
.panel { border-color: var(--accent); }
.tab { border-bottom-width: 2px; }
.tab[aria-selected="true"] { border-color: var(--tc); }
.card.sel { border-color: var(--accent); }

h1 { font-family: var(--pixel); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: 0; }
.hdr h1, .path-top h1, .tm-title h1, .gymtop + div h1 { font-size: 22px; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .hdr h1, .path-top h1, .tm-title h1, h1 { font-size: 18px; } }
h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
.brandlink { font-family: var(--pixel); font-weight: 400; font-size: 11px; letter-spacing: .04em; }
/* The 時間 mark: a pixel kanji font holding only these two characters. It is built on a 16px grid, so it stays crisp at 16px. */
.kj { font-family: 'DotGothic16 Jikan', var(--jp); font-weight: 400; font-size: 16px; letter-spacing: .08em; line-height: 1; }
.kicker { font-family: var(--pixel); font-weight: 400; font-size: 11px; letter-spacing: .02em; line-height: 1.5; }
.sec-h { font-family: var(--pixel); font-weight: 400; font-size: 11px; letter-spacing: .02em; line-height: 1.6; }
.sidecard h2 { font-family: var(--pixel); font-weight: 400; font-size: 12px; letter-spacing: 0; line-height: 1.5; }
.lvl-n { font-family: var(--pixel); font-weight: 400; font-size: 18px; letter-spacing: 0; }
.lvl-line .lvl-n { font-size: 13px; }
.hdr { border-bottom: 2px dotted var(--border); }
.stat3 b, .pk-item, .pkv b { font-weight: 600; }

.btn, .btn-o, .btn-i, .sqbtn, .readbtn, .pill, .pkv, .yearnav button, .tbtn, .iconbtn { border-radius: 0; border-width: 2px; }
.btn, .btn-o { font-family: var(--pixel); font-weight: 400; font-size: 11px; letter-spacing: .02em; line-height: 1.4; text-align: center; padding: 0 16px; }
.btn-i { font-weight: 600; letter-spacing: 0; }
.btn:active, .btn-o:active, .btn-i:active, .sqbtn:active, .pill:active, .tbtn:active, .iconbtn:active { transform: translateY(2px); }
.iconbtn { background: var(--card); border-color: var(--border-strong); }
.seg-toggle, .step { border-width: 2px; border-radius: 0; overflow: visible; }
.seg-toggle { border: 2px solid var(--border-strong); }
.seg-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.field { border-width: 2px; border-radius: 0; }

input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--text); border-radius: 0; background: transparent; flex: 0 0 auto; cursor: pointer; }
input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 3px; top: 3px; width: 2px; height: 2px; background: transparent; box-shadow: 8px 0 0 var(--check), 6px 2px 0 var(--check), 0 4px 0 var(--check), 4px 4px 0 var(--check), 2px 6px 0 var(--check), 8px 2px 0 var(--check), 2px 4px 0 var(--check); }
input[type="checkbox"]:disabled { cursor: default; }
.chk.done > span { color: var(--muted); }

.todo-g + .todo-g { border-top: 2px dotted var(--border); }
.rw, .histrow, .hrow, .mrow, .tgoal, .exbox, .stagebox, .pc-h, .pc-f, .evrow, .lvsec, .ft { border-color: var(--divider); border-style: dotted; border-width: 0; }
.rw { border-bottom-width: 2px; } .rw:last-child { border-bottom-width: 0; }
.histrow, .hrow, .mrow { border-bottom-width: 2px; } .histrow:last-child, .hrow:last-child, .mrow:last-child { border-bottom-width: 0; }
.tgoal, .exbox, .stagebox, .evrow, .lvsec { border-top-width: 2px; }
.pc-h { border-bottom-width: 2px; } .pc-f { border-top-width: 2px; }

.xpbar { gap: 3px; }
.xpbar i { height: 12px; }
.xpbar i.on { background: var(--ink); }
.gtrack, .bar, .tm-bar { position: relative; border-radius: 0; border: 0; background: var(--border); height: 10px; overflow: hidden; }
.tm-bar { height: 6px; }
.gtrack::after, .bar::after, .tm-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), var(--card) calc(10% - 2px), var(--card) 10%); }
.inner .gtrack::after, .box .gtrack::after, .core .bar::after { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), var(--inner) calc(10% - 2px), var(--inner) 10%); }
.pxbar { display: flex; gap: 2px; width: 100%; }
.pxbar i { flex: 1; height: 8px; background: var(--border); display: block; }
.pxbar i.on { background: var(--c); }
.pxring { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 160px; flex: 0 0 auto; color: var(--c); }
.pxring svg { width: 56px; height: 56px; }
.tico { width: 30px; height: 30px; color: var(--c); }

.d, .gcell, .lg { border-radius: 0; }
.gcell.c, .lgc { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; }
.chkc, .dot, .tdot, .iconbtn, .node, .med, .tm-nc, .tm-med, .tbadge, .tlock, .wheel .fab, .wheel .opt .oc, .arc { border-radius: 0; }
.dot.on { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--card); }
.chkc.on { background: var(--gold); }
.node.hub, .node { border-width: 3px; }
.dm { transform: none; }
.mtag, .tag { border-radius: 0; }
.timeask { box-shadow: none; border: 2px solid var(--border-strong); border-top: 3px solid var(--ink); clip-path: var(--notch); }
.toast { border-radius: 0; border: 2px solid var(--border-strong); background: var(--card); color: var(--text); clip-path: var(--notch); }
.timerbar { border-bottom-width: 3px; }
.banner { background: var(--inner); }

.bnav { border-top: 3px solid var(--border-strong); background: var(--card); }
.bnav a { color: var(--muted); font-size: 12px; border-top: 3px solid transparent; }
.bnav a svg { color: var(--c); }
.bnav a[aria-current="page"] { color: var(--text); border-top-color: var(--accent); }

.drawer { display: block; }
.drawer > .dr-head { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; background: var(--card); border: 2px solid var(--border); cursor: pointer; width: 100%; text-align: left; color: var(--text); font: inherit; }
.drawer > .dr-head { border-radius: 0; clip-path: var(--notch); }
.hdr.compact h1 { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--muted); letter-spacing: 0; line-height: 1.3; }
.gtile .pxbar { width: 76%; }
.stats4 { gap: 0; border: 2px solid var(--border); background: var(--card); clip-path: var(--notch); }
.stats4 .stat3 { border: 0; clip-path: none; background: none; border-top: 2px dotted var(--divider); }
.stats4 .stat3:nth-child(odd) { border-right: 2px dotted var(--divider); }
.stats4 .stat3:nth-child(-n+2) { border-top: 0; }
.dr-head b { font-family: var(--serif); font-size: 17px; font-weight: 600; flex: 1; }
.dr-head .dr-meta { font-size: 14px; color: var(--muted); }
.dr-head .dr-chev { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; transition: transform .12s steps(2); }
.drawer.open > .dr-head { border-color: var(--border-strong); }
.drawer.open > .dr-head .dr-chev { transform: rotate(90deg); }
.dr-body { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.dr-body > .box, .dr-body > .sec { margin: 0; }
.drawers { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 700px) {
  .wrap { gap: 16px; }
  .hdr.compact { display: flex; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 0; padding-bottom: 0; }
  .hdr.compact .lvl { flex: none; min-width: 0; }
  .hdr.compact .nm { color: var(--muted); font-size: 15px; }
  .hdr.compact .xpbar { margin: 8px 0 6px; }
  .homewrap .sidecard { padding: 12px 14px 14px; }
  .homewrap .todo-g { gap: 6px; }
  .homewrap .todo-i, .homewrap .chk { padding: 2px 0; }
  .gtile { min-height: 104px; gap: 8px; }
  .gtile.big { min-height: 116px; }
  .gtile b { font-family: var(--serif); font-weight: 600; letter-spacing: 0; font-size: 15px; }
  .gtile.sm b { font-size: 13px; }
  .gtile .lv { font-weight: 600; }
}
.stats4 .stat3 { padding: 12px 6px; }
.stat3 b { font-family: var(--pixel); font-size: 15px; font-weight: 400; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .btn:active, .btn-o:active, .btn-i:active { transform: none; } }
@media (max-width: 700px) {
  .sec { gap: 10px; }
  .homewrap .sec-h { margin-bottom: 0; }
  .gt-grid { gap: 8px; }
}
.chart text { font-size: 10px; }
.tabs { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

html { font-synthesis: none; }
.chart text { font-size: 11px; }

/* ---------------------------------------------------------------- Claude planner */
.aibtn, .inboxbtn { position: relative; }
.aidot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border: 2px solid var(--bg); box-sizing: border-box; }
.aidot.on { background: var(--green); }
.aidot.off { background: var(--orange); }
.aicount { position: absolute; top: -8px; right: -8px; min-width: 22px; padding: 0 4px; box-sizing: border-box; background: var(--orange); color: var(--bg); border: 2px solid var(--bg); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.aihead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.aiform { display: flex; flex-direction: column; gap: 12px; }
.aiform textarea.field, .aiform input.field, .aiform select.field { width: 100%; box-sizing: border-box; }
.aigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ai-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ai-right { text-align: right; min-width: 0; }
.ai-row .ai-st { width: auto; max-width: 100%; min-height: 44px; margin-top: 6px; }
.ai-next { flex-direction: column; align-items: stretch; }
.ai-next .btnrow { margin-top: 8px; }
.ai-acts { align-items: center; }
.aimv { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 18px; }
.aimv[aria-disabled="true"] { color: var(--muted); }
.ai-mv { flex-wrap: nowrap; gap: 6px; }

/* ---------------------------------------------------------------- Monthly overview and Calendar sync */
.mwide { max-width: 1100px; }
.mhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mhead h1 { flex: 1; text-align: center; margin: 0; font-size: 24px; min-width: 0; }
.month-layout { display: grid; gap: 16px; }
@media (min-width: 701px) { .month-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.mleft { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mwd { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.mcell { min-height: 52px; padding: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--card); border: 2px solid var(--border); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.mcell.out { opacity: .45; }
.mcell.today { border-color: var(--accent); }
.mcell[aria-pressed="true"] { background: var(--inner); border-color: var(--ink); }
.mnum { font-size: 14px; }
.mdots { display: flex; gap: 3px; flex-wrap: wrap; }
.mdot { display: inline-block; width: 7px; height: 7px; }
.mdot.ev { background: var(--blue); } .mdot.tk { background: var(--orange); } .mdot.od { background: var(--accent); }
.mlegend { margin-top: 8px; }
.mo-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px dotted var(--divider); }
.mwhen { flex: 0 0 96px; font-size: 13px; color: var(--muted); }
.mwhat { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mo-row.done .mtitle { text-decoration: line-through; opacity: .7; }
.mtag2 { font-size: 11px; padding: 1px 5px; border: 1px solid var(--border-strong); }
.mtag2.late { color: var(--accent); border-color: var(--accent); }
.mtag2.ok { color: var(--green); border-color: var(--green); }
.tokenbox { border: 2px dashed var(--orange); padding: 10px; margin: 8px 0; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; width: 100%; box-sizing: border-box; }
.steps summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.steps ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Budget: cards and bills (v11.2.2) */
.mdot.bl { background: var(--green); }
.bcard { gap: 10px; }
.bc-line { margin: 0; }
.trackrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.trackbox { border: 1px solid var(--divider); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.trackbox p { margin: 0; }
.tb-bal { font-size: 20px; }
.bills-toggle { align-self: flex-start; }
.brow { align-items: flex-start; border-bottom: 0; padding-bottom: 2px; }
.bname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bamt { text-align: right; flex: 0 0 auto; }
.bbtns { padding: 2px 0 10px; border-bottom: 1px solid var(--divider); }
.b-total { font-size: 28px; }
.budgetcard { margin-top: 0; }

/* Financial page, paychecks, templates (v11.2.3) */
.mdot.pd { background: var(--yellow); }
.neg { color: var(--accent); }
.notice { margin: 0; padding: 10px 12px; border: 1px dashed var(--border-strong); font-size: 15px; background: var(--inner); }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-head h2 { flex: 1 1 0; min-width: 0; margin: 0; }
.fb-head .btn-t { flex-basis: 100%; order: 5; text-align: left; }
@media (max-width: 700px) { .fb-head h2 { font-size: 17px !important; } }
.gtiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gtile2 { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border); background: var(--inner); color: var(--text); text-decoration: none; position: relative; min-width: 0; }
a.gtile2:hover { border-color: var(--green); }
.gtile2.soon { opacity: .8; }
.gt-l { font-weight: 600; font-size: 15px; }
.gt-a { font-family: var(--serif); font-size: 20px; overflow-wrap: anywhere; }
.gt-go { position: absolute; right: 10px; top: 10px; color: var(--muted); }
.gt-unalloc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--border-strong); font-size: 17px; }
.gt-unalloc b { font-family: var(--serif); font-size: 22px; }
.gt-unalloc.neg b, .gt-unalloc.neg { color: var(--accent); }
.dn-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.dn-row:last-child { border-bottom: 0; }
.dn-row .chk { flex: 1 1 auto; min-width: 0; }
.dn-name { font-weight: 600; }
.dn-amt { text-align: right; display: flex; flex-direction: column; flex: 0 0 auto; }
.dn-row.late .dn-name, .dn-row.late .dn-amt, .dn-flag { color: var(--accent); }
.dn-flag { font-size: 13px; font-weight: 600; }
.pay-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pay-step { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; }
.pay-step .aimv:disabled { opacity: .35; }
.pcard2 { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); background: var(--inner); color: var(--text); text-decoration: none; min-width: 0; }
.pcard2.cur { border: 2px solid var(--green); }
.pc2-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pc2-r { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.tagc { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.pcrow { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.pcrow.cur { border-left: 4px solid var(--green); padding-left: 10px; }
.pcr-d { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pcr-n { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.qrow { padding: 8px 10px; background: var(--inner); border: 1px dashed var(--border-strong); margin: 4px 0; }
.lrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.lrow .chk { flex: 1 1 auto; min-width: 0; }
.lr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lr-main small, .lrow .chk small { display: block; }
.lr-amt { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; }
.lr-run { flex: 0 0 74px; text-align: right; }
.lrow.sum { font-size: 17px; }
.lrow.total { border-top: 2px solid var(--border-strong); border-bottom: 0; font-size: 19px; }
.lrow.total.neg b { color: var(--accent); }
.lbtns { padding: 0 0 8px; flex-wrap: wrap; }
.warn { color: var(--accent); font-size: 13px; }
a.btn-i.off { opacity: .4; pointer-events: none; }
@media (max-width: 700px) {
  .gtiles { grid-template-columns: 1fr; gap: 0; }
  .gtile2 { flex-direction: row; align-items: center; gap: 10px; border-width: 0 0 1px; padding: 12px 6px; background: transparent; }
  .gt-l { flex: 1 1 auto; } .gt-s { order: 3; } .gt-go { position: static; font-size: 20px; }
  .pay-three { grid-template-columns: 1fr; }
}

/* v11.2.4: net worth, Can I afford this?, savings, debts, loan calculator */
.nw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nw-today { font-family: var(--serif); font-size: 26px; }
.nw-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.nw-h b { font-family: var(--serif); font-size: 22px; }
.nw-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 6px; align-items: center; }
.nwl { white-space: nowrap; flex: 0 0 auto; }
.nwl::before { content: ''; display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--ink); margin-right: 6px; vertical-align: middle; }
.nwl-wi::before { border-top: 3px dashed var(--orange); }
.nw-ctl { display: flex; flex-direction: column; gap: 10px; }
.nw-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-presets .btn-i[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.nw-slider { width: 100%; min-height: 44px; accent-color: var(--green); }
.chart .zero { stroke-width: 1; }
.af-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.af-tile { border: 1px solid var(--border); padding: 12px; background: var(--inner); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.af-t { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.af-st { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.af-pass { border-color: var(--green); } .af-pass .af-st { color: var(--green); }
.af-fail { border-color: var(--accent); } .af-fail .af-st, .af-fail .af-h { color: var(--accent); }
.af-info .af-st, .af-off .af-st { color: var(--muted); }
.af-h, .af-tile p { margin: 0; overflow-wrap: anywhere; }
.sv-bal { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv-bal b { font-family: var(--serif); font-size: 24px; }
.tag-japan { color: var(--accent); } .tag-emergency { color: var(--green); }
.lc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lc-col { border: 1px solid var(--border); padding: 12px; background: var(--inner); min-width: 0; }
.lc-col h3 { margin: 0 0 6px; font-size: 16px; }
.lc-col p { margin: 4px 0; display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.lc-saved { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.lc-saved div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 2px solid var(--green); }
.lc-saved b { font-family: var(--serif); font-size: 26px; }
@media (max-width: 700px) { .af-tiles, .lc-cols { grid-template-columns: 1fr; } .lc-saved b { font-size: 22px; } }

/* v11.3a: the board as a money flow */
.flow { display: flex; flex-direction: column; gap: 4px; }
.flow-row { display: grid; grid-template-columns: 190px 1fr 190px; grid-template-areas: "name bar amts" ". short ."; column-gap: 14px; row-gap: 2px; align-items: center; padding: 10px 8px; border: 1px solid var(--border); background: var(--inner); color: var(--text); text-decoration: none; min-width: 0; position: relative; }
a.flow-row:hover, a.flow-row:focus-visible { border-color: var(--green); color: var(--text); }
.fr-top { display: contents; }
.fr-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.fr-name small, .fr-amts small { color: var(--muted); font-size: 13px; }
.fr-amts { grid-area: amts; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--serif); min-width: 0; }
.fr-amts b { font-size: 18px; }
.fr-amts small.neg { color: var(--accent); }
.fbar { grid-area: bar; display: flex; height: 18px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; min-width: 0; }
.fbar i { display: block; height: 100%; flex: 0 0 auto; }
.fb-in { background: var(--blue); }
.fb-left { background: var(--green); }
.fb-take { background: var(--accent); opacity: .6; }
.fr-short { grid-area: short; font-size: 13px; font-weight: 700; }
.flow-row.short { border-color: var(--accent); }
.flow-arrow { text-align: center; color: var(--muted); font-size: 14px; line-height: 1; padding: 0; }
.flow-last { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 8px 4px; border-top: 2px solid var(--border-strong); color: var(--green); }
.flow-last .fr-name small { color: var(--muted); }
.flow-last .fr-big { font-family: var(--serif); font-size: 26px; }
.flow-last.neg, .flow-last.neg .fr-big { color: var(--accent); }
.flow-cov { margin: 6px 0 0; font-size: 15px; }
.cov-ok { color: var(--green); } .cov-warn { color: var(--text); } .cov-info { color: var(--muted); }
.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; }
.flow-legend .sw { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: middle; }
.sw-in { background: var(--blue); } .sw-take { background: var(--accent); opacity: .6; } .sw-left { background: var(--green); }
@media (max-width: 700px) {
  .flow-row { grid-template-columns: 1fr; grid-template-areas: "top" "bar" "short"; row-gap: 6px; }
  .fr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; grid-area: top; }
  .fr-name, .fr-amts { grid-area: auto; }
}

/* v11.3b: income sources, the inline monthly amount, "More", and the desktop layouts (900px and wider) */
.block { display: block; }
details.more { margin: 6px 0; }
details.more > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--ink); font-weight: 600; }
.inc-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--border); min-width: 0; }
.inc-main { flex: 1 1 180px; min-width: 0; }
.inc-amt { font-family: var(--serif); font-size: 20px; }
.inc-btns { flex: 1 0 100%; align-items: center; }
.inc-row.off { opacity: .7; }
.sv-mo { margin: 4px 0; }
.sv-monthly { background: none; border: 1px dashed var(--border-strong); color: var(--text); padding: 6px 12px; min-height: 40px; font-family: var(--serif); font-size: 18px; cursor: pointer; max-width: 100%; }
.sv-monthly.unset { color: var(--muted); }
.sv-monthly:hover, .sv-monthly:focus-visible { border-color: var(--green); }
.sv-mo-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.sv-mo-in { max-width: 180px; min-height: 40px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.col-main, .col-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fin-grid { display: flex; flex-direction: column; gap: 24px; }
.fin-grid > .fg { min-width: 0; }
.tpl-cols { display: flex; flex-direction: column; gap: 14px; }
.ledger-cols { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
  .gymwrap.bwide { max-width: 1200px; }
  .corepage.tc-financial { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
  .fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .fin-grid > .fg-full { grid-column: 1 / -1; }
  .tpl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .ledger-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .ledger-cols > section { grid-column: 2; }
  .ledger-cols > section.ledger-main { grid-column: 1; grid-row: 1 / span 3; }
}
/* the money flow as six columns */
.flow.cols { flex-direction: row; align-items: stretch; gap: 0; }
.flow.cols .flow-row, .flow.cols .flow-last { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center; padding: 10px 6px; margin: 0; }
.flow.cols .flow-last { border-top: none; border-left: 2px solid var(--border-strong); margin-top: 0; }
.flow.cols .fbar { flex-direction: column-reverse; height: 240px; width: 64%; max-width: 96px; align-self: center; }
.flow.cols .fbar i { width: 100%; height: auto; }
.flow.cols .fr-top { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flow.cols .fr-name, .flow.cols .fr-amts { grid-area: auto; align-items: center; }
.flow.cols .fr-amts b { font-size: 17px; }
.flow.cols .fr-short { grid-area: auto; }
.flow.cols .flow-last .fr-big { font-size: 22px; }
.flow.cols .flow-arrow { flex: 0 0 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 118px; font-size: 20px; line-height: 1; }
.flow.cols .flow-arrow.to-plan { flex-basis: 78px; }
.flow.cols .flow-arrow small { font-size: 12px; margin-top: 4px; text-align: center; }
details.more > summary::before { content: '▸'; display: inline-block; width: 1.1em; }
details.more[open] > summary::before { content: '▾'; }

/* v11.3c: shared lists, Spiritual projects, Ministry */
.mdot.ls { background: var(--violet); } .mdot.vs { background: var(--text); }
.ls-row { padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.ls-row.late .overdue { color: var(--accent); }
.ls-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ls-link { min-height: 40px; display: inline-flex; align-items: center; }
.ls-btns { align-items: center; margin-top: 2px; }
.ls-detail { margin: 6px 0 2px; padding: 8px 10px; border-left: 2px solid var(--border-strong); }
.ls-h { display: inline-block; margin: 0 8px 0 6px; }
.ls-tick { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 6px 0; }
.hrow.sp-proj { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.mn-chips { margin: 8px 0; }
.mn-chip { min-height: 40px; padding: 4px 14px; background: none; border: 1px solid var(--border-strong); color: var(--text); cursor: pointer; font: inherit; }
.mn-chip.on { border-color: var(--green); color: var(--green); }
.mn-tools { margin: 6px 0; }
.mn-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 6px; min-height: 48px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.mn-row:hover, .mn-row:focus-visible { background: var(--inner); }
.mn-row.off { opacity: .7; }
.mn-name { display: flex; flex-direction: column; min-width: 0; }
.mn-name small, .mn-meta { color: var(--muted); }
.mn-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mn-meta .overdue { color: var(--accent); }
.mn-visit { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.todo-link small { display: block; }
/* v11.4a: the muscle map and the muscle picker */
.mfigs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mfig-w { margin: 0; text-align: center; flex: 0 1 270px; min-width: 0; }
.mfig { width: 100%; max-width: 270px; height: auto; display: block; margin: 0 auto; }
.mfig .mb { fill: var(--border); stroke: none; }
.mfig .mr { stroke: var(--border-strong); stroke-width: 1; cursor: pointer; fill: var(--yellow); }
.mfig .mr.s0 { fill: var(--inner); fill-opacity: 1; }
.mfig .mr.s1 { fill: color-mix(in srgb, var(--yellow) 35%, var(--inner)); } .mfig .mr.s2 { fill: color-mix(in srgb, var(--yellow) 65%, var(--inner)); } .mfig .mr.s3 { fill: var(--yellow); }
.mfig .mr.sel { stroke: var(--text); stroke-width: 2.5; }
.mfig .mr:hover, .mfig .mr:focus-visible { stroke: var(--text); stroke-width: 2; outline: none; }
.mlegend2 { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.msw { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border: 1px solid var(--border-strong); vertical-align: middle; background: var(--yellow); }
.msw.s0 { background: var(--inner); } .msw.s1 { background: color-mix(in srgb, var(--yellow) 35%, var(--inner)); } .msw.s2 { background: color-mix(in srgb, var(--yellow) 65%, var(--inner)); } .msw.s3 { background: var(--yellow); }
.mdetail { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--yellow); }
.mlist { list-style: none; padding: 0; margin: 6px 0; }
.mlist li { border-bottom: 1px solid var(--border); }
.mlist-b { display: flex; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 4px; align-items: center; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mlist-b.sel { border-left: 3px solid var(--yellow); padding-left: 8px; }
.dex-chips { margin: 4px 0 8px; }
.dex-chk { min-height: 40px; }
details.dex-m > summary small { margin-left: 8px; }

/* v11.4b: inventory and the Equity page */
.mdot.iv { background: var(--orange); }
.inv-sum { margin: 4px 0 8px; }
.inv-sum > b { font-family: var(--serif); font-size: 22px; }
.inv-row { padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.inv-row.late .overdue { color: var(--accent); }
.inv-row.inv-sold { opacity: .75; }
.inv-btns { align-items: center; margin-top: 2px; }
.inv-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 6px 0; }
.inv-act .field { max-width: 180px; }
.eq-total { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding-top: 8px; border-top: 2px solid var(--border-strong); }
[data-equity-page] .inv-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (min-width: 900px) {
  #inv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  #inv-list > :not(.inv-row), #inv-list > .inv-row:has(form) { grid-column: 1 / -1; }
}

/* v11.4c: the calendar, the element pages, and the plan check */
.flow.cols .fbar { height: 120px; } /* half the old bar height on desktop */
.mdot.oo { background: var(--green); outline: 1px solid var(--ink); }
.cal-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

.cal-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .cal-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .cal-tiles { grid-template-columns: 1fr; } }
.cal-tile { border: 2px solid var(--border-strong); padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-tile b { font-family: var(--serif); font-size: 19px; white-space: nowrap; }
.cal-tile.good { border-color: var(--green); } .cal-tile.bad { border-color: var(--danger, #c0392b); }
.cal-tile .pos, b.pos, .pos { color: var(--green); } .cal-tile .neg, b.neg, .neg { color: var(--danger, #c0392b); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.cal-day { min-height: 48px; padding: 4px; background: var(--bg-alt, var(--bg)); border: 1px solid var(--border); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; font: inherit; }
.cal-day.off { opacity: .45; } .cal-day.pre { opacity: .6; } .cal-day.today { border: 2px solid var(--ink); } .cal-day.sel { outline: 3px solid var(--accent, #c0392b); outline-offset: -3px; }
.cd-dots { display: flex; gap: 3px; min-height: 10px; }
.cdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cdot.in { background: var(--green); } .cdot.out { background: var(--danger, #c0392b); }
.cdot.plan { background: transparent; border: 2px solid currentColor; box-sizing: border-box; } .cdot.in.plan { color: var(--green); } .cdot.out.plan { color: var(--danger, #c0392b); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; } .cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-panel { margin-top: 14px; border-top: 2px solid var(--border-strong); padding-top: 10px; }
.cal-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cal-item .ci-main { flex: 1 1 160px; min-width: 0; } .cal-item .ci-amt { white-space: nowrap; } .cal-item .ci-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-item.editing { display: block; }
.co-form .seg-toggle { margin-bottom: 8px; } .co-more { margin: 6px 0; }
.co-prev { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--border-strong); } .co-prev p { margin: 3px 0; }
.chk-list { list-style: none; margin: 6px 0 0; padding: 0; } .chk-list li { padding: 4px 0; } .chk-pass b { color: var(--green); } .chk-fail b { color: var(--danger, #c0392b); }
.ygrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .ygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ytile { min-height: 86px; padding: 8px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; background: var(--bg-alt, var(--bg)); color: var(--ink); border: 3px solid var(--border); font: inherit; cursor: pointer; position: relative; text-align: left; }
.ytile.profit { border-color: var(--green); } .ytile.deficit { border-color: var(--danger, #c0392b); } .ytile.now { box-shadow: 0 0 0 2px var(--ink); } .ytile.pre { opacity: .55; border-style: dashed; }
.ytile .ynet { font-family: var(--serif); font-size: 18px; } .ywarn { position: absolute; top: 6px; right: 8px; color: var(--orange); font-size: 18px; }
.ysw { display: inline-block; width: 14px; height: 10px; border: 3px solid; } .ysw.profit { border-color: var(--green); } .ysw.deficit { border-color: var(--danger, #c0392b); }
.cal-yr { margin-left: auto; } .cal-yr svg { width: 22px; height: 22px; }
.nw-banner { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--border-strong); } .nw-banner.pass { border-color: var(--green); } .nw-banner.fail { border-color: var(--danger, #c0392b); } .nw-banner.off { border-color: var(--muted); }
.nw-over { display: block; margin-top: 8px; }
.el-total .el-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .el-total .el-big b { font-family: var(--serif); font-size: 30px; }
.el-two { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .el-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .el-two #inv-list { grid-template-columns: minmax(0, 1fr); } }
.el-stack { display: grid; gap: 14px; }
.up-row, .pa-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.up-row .up-main, .pa-row .pa-main { flex: 1 1 auto; min-width: 0; } .up-row.paid { opacity: .6; text-decoration: line-through; } .up-d { min-width: 64px; font-weight: 600; }
.up-row input[type=checkbox] { width: 24px; height: 24px; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.btn-t.inl { display: inline; min-height: 0; padding: 0 2px; }

.cal .ygrid, .cal .cal-layout, .cal .cal-panel { width: 100%; box-sizing: border-box; }
.ytile { width: 100%; box-sizing: border-box; }
.ygrid { margin: 0; padding: 0; }

.db-plan-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; } .db-plan-form .sv-mo-in { max-width: 130px; } .db-plan-form .db-day-in { max-width: 70px; }

/* v11.4d: Food on Physical */
.fd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.fd-day { min-width: 120px; text-align: center; }
.fd-date { width: 160px; }
.fd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.fd-chip { min-height: 44px; padding: 0 14px; border: 2px solid var(--border-strong); background: var(--bg-alt, var(--bg)); color: var(--ink); font: inherit; cursor: pointer; }
.fd-chip.on { border-color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }
.fd-meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.fd-meal { min-height: 48px; padding: 6px 10px; text-align: left; border: 2px solid var(--border-strong); background: var(--bg-alt, var(--bg)); color: var(--ink); font: inherit; cursor: pointer; }
.fd-meal:active { transform: translateY(1px); }
.fd-sub { font-size: 16px; margin: 14px 0 6px; }
.fd-out { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fd-out .fd-on { flex: 2 1 200px; } .fd-out .fd-num { flex: 1 1 90px; max-width: 130px; }
.fd-ent { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fd-ent.off { opacity: .6; } .fd-ent .fd-main { flex: 1 1 180px; min-width: 0; } .fd-ent .rm { min-height: 44px; min-width: 44px; }
.fd-btns { display: flex; gap: 2px; flex-wrap: wrap; }
.fd-tot { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; margin-top: 10px; padding: 10px 12px; background: var(--bg-alt, transparent); border: 1px solid var(--border); }
.fd-t b { display: block; font-family: var(--serif); font-size: 20px; } .fd-approx { flex: 1 1 100%; }
.fd-n { flex: 1 1 110px; }
.fd-hrow { display: grid; grid-template-columns: 110px 1fr 1.6fr; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); }
.fd-hday { text-align: left; min-height: 40px; }
@media (max-width: 700px) { .fd-hrow { grid-template-columns: 1fr; } .fd-hday { min-height: 44px; } }
.fd-ap { font-family: var(--serif); font-size: 1.15em; }

/* ================================================================ sumi-e ink layer
   Sits on top of everything above. Washi paper and ink: soft corners, thin lines, Mincho headings,
   brush-stroke progress, an ensō for the level, and a Fuji banner on Home. The 8-bit look is kept in docs/pixel-theme/. */
:root { --notch: none; --r: 6px; --rc: 8px; }
html { font-synthesis: none; }
body { position: relative; background-color: var(--bg); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
/* Paper grain: a fixed overlay that never takes a tap. */
body::before { content: ""; position: absolute; inset: 0; z-index: 9999; pointer-events: none; mix-blend-mode: var(--grain-blend); opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* panels: soft corners, thin lines, no notches */
.sidecard, .core, .pc, .box, .gtile, .login, .panel, .approw, .daycard, .reqbox, .mitem, .card, .tm-sec, .tm-lane, .stat3, .banner, .tab, .grow, .gcard, .rowspanel, .tree-wrap, .drawer > .dr-head, .timeask, .toast, .stats4 { clip-path: none; }
.sidecard, .core, .pc, .box, .gtile, .login, .panel, .approw, .daycard, .mitem, .card, .tm-sec, .tm-lane, .tab, .grow, .gcard, .rowspanel, .tree-wrap, .drawer > .dr-head, .stats4, .reqbox, .banner, .timeask { border-width: 1px; border-radius: var(--rc); }
.stat3 { border-width: 1px; border-radius: var(--r); }
.stats4 .stat3 { border-radius: 0; }
.sidecard { border: 1px solid var(--border); border-top: 1px solid var(--border); }
.core { border: 1px solid var(--border); border-top: 2px solid var(--tc); }
.pc { border-color: var(--border); position: relative; }
.panel, .gcard, .login { border-color: var(--border-strong); }
.login { border-top: 2px solid var(--seal); }
.tab { border-width: 1px; border-radius: var(--r); background: transparent; position: relative; }
.tab[aria-selected="true"] { background: var(--tab-active); border-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 4px; border-radius: 4px; background: var(--tc); clip-path: polygon(0 40%, 100% 0, 98% 100%, 2% 90%); }
.toast { border: 1px solid var(--border-strong); border-radius: var(--rc); background: var(--text); color: var(--bg); }
.timeask { border-top: 2px solid var(--ink); box-shadow: 0 8px 28px rgba(0,0,0,.18); }

/* type: Mincho for headings, quiet spaced labels */
h1 { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: .02em; }
.hdr h1, .path-top h1, .tm-title h1, .gymtop + div h1 { font-size: 30px; line-height: 1.15; letter-spacing: .02em; }
@media (max-width: 640px) { .hdr h1, .path-top h1, .tm-title h1, h1 { font-size: 24px; } }
h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: .01em; }
.kicker { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: .2em; line-height: 1.4; color: var(--muted); }
.sec-h { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: .22em; line-height: 1.5; color: var(--muted); display: flex; align-items: center; gap: 14px; }
.sec-h::after { content: ""; flex: 1; height: 6px; opacity: .45; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M4 5 Q200 0.5 396 5 Q200 9.5 4 5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M4 5 Q200 0.5 396 5 Q200 9.5 4 5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.sidecard h2 { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .02em; line-height: 1.3; }
.lvl-n { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--text); }
.lvl-line .lvl-n { font-size: 15px; }
.stat3 b { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; }
.tab .tab-t { font-family: var(--serif); font-size: 18px; letter-spacing: .03em; }
.pc-h h3 { font-size: 24px; letter-spacing: .06em; }
.pc.s .pc-h h3 { font-size: 19px; }
.rw b { font-variant-numeric: tabular-nums; }

/* buttons and fields: ink-filled main action, ink outline for the rest */
.btn, .btn-o, .btn-i, .sqbtn, .readbtn, .pill, .pkv, .yearnav button, .tbtn, .iconbtn { border-width: 1px; border-radius: var(--r); }
.btn, .btn-o { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; line-height: 1.4; text-align: center; padding: 0 18px; }
.btn { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.btn:hover { color: var(--on-accent); filter: none; opacity: .88; }
.btn-o { border-color: var(--text); color: var(--text); }
.btn-o:hover { background: var(--tab-active); color: var(--text); }
.btn-i { border-color: var(--border-strong); color: var(--text); }
.btn:active, .btn-o:active, .btn-i:active, .sqbtn:active, .pill:active, .tbtn:active, .iconbtn:active { transform: translateY(1px); }
.iconbtn { border-radius: var(--rc); background: transparent; border-color: var(--border-strong); }
.seg-toggle, .step { border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; }
.seg-toggle button[aria-pressed="true"], .pill[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.field { border-width: 1px; border-radius: var(--r); background: var(--well); }
.readbtn { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.readbtn[aria-pressed="true"] { background: transparent; color: var(--mark, var(--text)); border-color: var(--mark, var(--text)); }
.gbar { background: var(--bg); }

/* checkboxes: an empty ring, then a small red stamp when done */
input[type="checkbox"] { width: 21px; height: 21px; border: 1.5px solid var(--muted); border-radius: 50%; }
input[type="checkbox"]:checked { background: var(--seal); border-color: var(--seal); border-radius: 4px; transform: rotate(-4deg); }
input[type="checkbox"]:checked::after { left: 6.5px; top: 2.5px; width: 5px; height: 10px; background: transparent; box-shadow: none; border: solid var(--check); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* dividers: fine dotted ink */
.todo-g + .todo-g { border-top: 1px dotted var(--border-strong); }
.rw, .histrow, .hrow, .mrow { border-bottom-width: 1px; border-color: var(--border-strong); }
.tgoal, .exbox, .stagebox, .evrow, .lvsec { border-top-width: 1px; border-color: var(--border-strong); }
.pc-h { border-bottom-width: 1px; border-color: var(--border-strong); } .pc-f { border-top-width: 1px; border-color: var(--border-strong); }
.stats4 .stat3 { border-top: 1px dotted var(--border-strong); }
.stats4 .stat3:nth-child(odd) { border-right: 1px dotted var(--border-strong); }
.stats4 .stat3:nth-child(-n+2) { border-top: 0; }

/* progress: one brush stroke that fills with the path's color (10 steps, as before) */
.pxbar { gap: 0; height: 9px; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.pxbar i { height: 100%; background: color-mix(in srgb, var(--muted) 28%, transparent); }
.pxbar i.on { background: var(--c); }
:root { --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 3.2 Q100 1.2 197 4.2 Q199 5 197 5.8 Q100 8.8 3 6.8 Q1 5 3 3.2Z'/%3E%3C/svg%3E"); }
.gtrack, .bar, .tm-bar { border-radius: 6px; background: color-mix(in srgb, var(--muted) 25%, transparent); }
.gtrack::after, .bar::after, .tm-bar::after, .inner .gtrack::after, .box .gtrack::after, .core .bar::after { display: none; }
.xpbar { gap: 0; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.xpbar i { height: 10px; background: color-mix(in srgb, var(--muted) 28%, transparent); }
.xpbar i.on { background: var(--text); }

/* path marks: a kanji in the path's color in place of the icon */
.pglyph { font-family: var(--serif); font-weight: 700; color: var(--c); line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.pglyph ruby { ruby-position: over; }
.pglyph rt { font-family: var(--sans); font-weight: 500; font-size: .3em; letter-spacing: .14em; color: var(--muted); padding-bottom: .15em; }
.pxring .pglyph { font-size: 46px; }
.pxring.sm .pglyph { font-size: 36px; }
.pglyph.n3 { letter-spacing: 0; }
.pxring .pglyph.n3 { font-size: 38px; }
.gtile .pglyph { font-size: 30px; }
.gtile .pglyph.n3 { font-size: 26px; }

/* small shapes: round, like ink dots */
.d, .lg { border-radius: 50%; }
.d.read, .d.note { border-radius: 50%; }
.d.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--seal); }
.gcell { border-radius: 4px; }
.gcell.c, .lgc { clip-path: none; border-radius: 50%; }
.chkc, .dot, .tdot, .node, .med, .tm-nc, .tm-med, .tbadge, .tlock, .wheel .fab, .wheel .opt .oc, .arc { border-radius: 50%; }
.mtag, .tag, .tagc, .chip, .chip2, .tm-pill { border-radius: 4px; }
.node.hub, .node { border-width: 2px; }
.dm { transform: rotate(45deg); }
.dot.on { background: radial-gradient(circle, var(--seal) 5px, transparent 6px); border-color: var(--seal); box-shadow: none; }
.chkc.on { background: var(--seal); border-color: var(--seal); color: var(--check); }
.mfaqr { border-radius: var(--r); }

/* bottom menu on the phone */
.bnav { border-top: 1px solid var(--border-strong); background: var(--card); }
.bnav a { color: var(--muted); font-size: 12px; border-top: 0; position: relative; }
.bnav a[aria-current="page"] { color: var(--text); font-weight: 700; }
.bnav a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 24%; right: 24%; height: 3px; border-radius: 3px; background: var(--seal); clip-path: polygon(0 30%, 100% 0, 96% 100%, 4% 90%); }

/* the 時間 mark: a red seal */
.brandlink .kj { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 5px; background: var(--seal); color: var(--bg); font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.02; letter-spacing: 0; padding: 0 11px; box-sizing: border-box; text-align: center; word-break: break-all; transform: rotate(-3deg); }

/* Home banner: Mount Fuji over still water with a red sun. Your name sits on the left, the level on the right. */
.hdr.ink-hdr { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; padding: 70px 4px 18px; margin: -8px 0 -4px; min-height: 230px; align-items: flex-end; }
.ink-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ink-art .wash { fill: var(--wash); } .ink-art .sun { fill: var(--seal); } .ink-art .snow { fill: var(--snow); }
.ink-art .stroke { fill: none; stroke: var(--wash); stroke-linecap: round; }
.ink-hdr .who { display: flex; flex-direction: column; gap: 2px; }
.ink-hdr .who h1 { font-size: 46px; line-height: 1.05; }
.ink-hdr .lvl.enso { flex: 0 1 420px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--rc); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.enso-ring { position: relative; flex: 0 0 auto; width: 80px; height: 80px; }
.enso-ring svg { width: 100%; height: 100%; display: block; }
.enso-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 32px; font-weight: 700; }
.lvl.enso .lvl-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hdr.compact.ink-hdr { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 40px; min-height: 0; }
.hdr.compact.ink-hdr .lvl.enso { flex: none; min-width: 0; }
.hdr.compact.ink-hdr .who h1 { font-size: 34px; color: var(--text); font-weight: 700; }
@media (max-width: 640px) { .ink-hdr .who h1 { font-size: 34px; } .hdr.ink-hdr { padding-top: 60px; } .ink-hdr .lvl.enso { padding: 10px 12px; } .enso-ring { width: 70px; height: 70px; } }
.ink-art.narrow { display: none; }
.hdr.ink-hdr:not(.compact) { min-height: clamp(220px, calc(min(100vw, 1440px) * .19), 280px); padding-top: 40px; }
@media (max-width: 640px) { .ink-art.wide { display: none; } .ink-art.narrow { display: block; } .hdr.ink-hdr { flex-direction: column; align-items: stretch; gap: 12px; } .hdr.ink-hdr .lvl.enso { flex: none; } }
.hdr.compact.ink-hdr .ink-art.wide { display: none; } .hdr.compact.ink-hdr .ink-art.narrow { display: block; }

/* four secondary paths: two by two rather than three and one */
.pcards3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }