/* CarmenOne – style.css – Ignite theme */
/* Self-hosted Lusitana (was Google Fonts @import). SIL OFL 1.1 — see assets/fonts/OFL-Lusitana.txt */
@font-face {
  font-family: 'Lusitana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lusitana-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lusitana';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lusitana-700.woff2') format('woff2');
}
/* Share Tech Mono — Matrix skin only. SIL OFL 1.1 — see assets/fonts/OFL-ShareTechMono.txt */
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sharetechmono-400.woff2') format('woff2');
}

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --gold:   #e6a117;
  --gold-d: #A87227;
  --gold-l: #fdf5e4;
  --red:    #c0392b;
  --red-d:  #96281b;
  --red-l:  #fdecea;
  --green:  #1A7A3A;
  --bg:     #EEEDE8;
  --bg2:    #ffffff;
  --bg3:    #E0DDD8;
  --border: #D9DCDF;
  --text:   #373B41;
  --text2:  #7C7D7F;
  --text3:  #AEADAB;
  --dark:   #373B41;
  --font:   'Calibri','Segoe UI',sans-serif;
  --serif:  'Lusitana',serif;
  --header-h: 52px;
  --footer-h: 36px;
}

:root[data-theme="dark"]{
  --bg:     #0b0e17;
  --bg2:    #131826;
  --bg3:    #1a2130;
  --border: #232a36;
  --text:   #e8e9ec;
  --text2:  #9ba1aa;
  --text3:  #6b717a;
  --dark:   #05070c;
}

/* Matrix skin (2026-10-21): same pages, green-on-black look. Set by core.js
   applySkin() as <html data-skin="matrix">, always together with data-theme="dark",
   so every [data-theme="dark"] rule applies too and this only re-colours on top.
   The [data-theme] in the selector makes it win over the dark block above.
   Component tweaks live in the MATRIX SKIN section at the end of this file. */
:root[data-theme][data-skin="matrix"]{
  --gold:   #00ff41;
  --gold-d: #00b32d;
  --gold-l: #032b0c;
  --red:    #ff3b3b;
  --red-d:  #c41e1e;
  --red-l:  #2b0505;
  --green:  #00ff41;
  --bg:     #000300;
  --bg2:    #020d04;
  --bg3:    #032b0c;
  --border: #0d4d1a;
  --text:   #c8f7d2;
  --text2:  #4fd36a;
  --text3:  #1f8a36;
  --dark:   #000000;
  --font:   'Share Tech Mono',monospace;
  --serif:  'Share Tech Mono',monospace;
  --glow:   0 0 6px rgba(0,255,65,.65),0 0 14px rgba(0,255,65,.25);
}

body{font-family:var(--font);font-size:14.5pt;color:var(--text);background:var(--bg);height:100vh;overflow:hidden;transition:background-color .2s,color .2s;}
[data-theme="dark"] body.cc-page{
  background-image:url('/assets/carmenone_stars_background.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
[data-theme="dark"] body.cc-page main{background:transparent;}

/* ── LOGIN ─────────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;background:var(--bg) center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;
}
.login-card{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.45);
  border-top:3px solid var(--gold);
  border-radius:16px;
  padding:28px 40px;
  width:min(500px,92vw);
}
.login-inner{display:flex;align-items:center;gap:36px;}
.login-logo{width:200px;flex-shrink:0;display:block;}
.login-form-side{flex:1;min-width:0;}
.login-field{
  width:100%;border:1px solid var(--border);
  padding:9px 13px;font-size:13.3pt;font-family:var(--font);color:var(--text);
  background:rgba(255,255,255,0.75);margin-bottom:10px;outline:none;transition:border-color .15s;
  border-radius:6px;
}
.login-field:focus{border-color:var(--gold);}
.login-btn{
  width:100%;background:var(--gold);color:var(--dark);border:none;
  padding:10px;font-size:13.3pt;font-family:var(--font);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .15s;
  border-radius:6px;
}
.login-btn:hover{background:var(--gold-d);color:#fff;}
.login-error{color:var(--red);font-size:12.1pt;margin-top:10px;min-height:16px;}
.login-page-footer{
  position:fixed;bottom:0;left:0;right:0;
  text-align:center;padding:8px 16px;
  font-size:10.9pt;color:rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.38);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  letter-spacing:.04em;
}

/* ── APP SHELL ─────────────────────────────────────────────── */
#app{display:none;height:100vh;flex-direction:column;}
#app.visible{display:flex;}

/* ── HEADER / TOP NAV ──────────────────────────────────────── */
header{
  height:var(--header-h);
  background:var(--dark);
  border-bottom:3px solid var(--gold);
  display:flex;align-items:stretch;
  flex-shrink:0;
  /* Own stacking context, above the in-flow page body, so the floating nav
     submenu overlays main content instead of slipping behind it. */
  position:relative;z-index:50;
}
[data-theme="dark"] header{background:var(--bg2);border-bottom:1px solid var(--border);}
.header-logo{
  display:flex;align-items:center;padding:0 20px;
  border-right:1px solid #4a4f56;cursor:pointer;text-decoration:none;
  font-family:var(--serif);font-size:21.8px;color:#fff;white-space:nowrap;flex-shrink:0;
}
.header-logo span{color:var(--gold);}
.header-logo:hover{opacity:.85;}

/* hide the old logo img */
/*.header-logo img{display:none;} */

/* overflow must stay visible — the floating submenu hangs below the header */
.header-nav{display:flex;align-items:stretch;flex:1;overflow:visible;}

/* One wrapper per top-level entry. Positioning anchor for the submenu, and the
   hover area that keeps it open (hovering the submenu still counts as hovering
   the group, since it is a descendant). */
.nav-group{position:relative;display:flex;align-items:stretch;}

.nav-item{
  display:flex;align-items:center;gap:0;padding:0 14px;
  font-size:13px;font-family:var(--serif);letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:#D9DCDF;cursor:pointer;border-right:1px solid #4a4f56;
  transition:background .1s,color .1s;user-select:none;white-space:nowrap;
}
.nav-item:hover{background:#2d3138;color:#fff;}
.nav-item.active{background:var(--gold);color:var(--dark);}
[data-theme="dark"] .nav-item.active{background:var(--bg2);color:var(--gold);border-bottom:2px solid var(--gold);}
.nav-parent{outline:none;}
.nav-parent:focus-visible{background:#2d3138;color:#fff;}

/* ── FLOATING SUBMENU ──────────────────────────────────────────
   On-demand only: revealed on hover or keyboard focus, absolutely positioned so
   it overlays the page rather than pushing it down. All child pages sit in one
   compact box, separated by vertical dividers, active child in gold.
   The transparent TOP BORDER bridges the header's 3px gold border, so the
   pointer never leaves the hover area on its way down; background-clip keeps the
   dark fill from painting into that bridge. */
.nav-submenu{
  display:none;
  position:absolute;top:100%;left:0;z-index:60;
  border-top:3px solid transparent;
  background:var(--dark);background-clip:padding-box;
  border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.28);
  padding:5px 2px;white-space:nowrap;
}
.nav-group:hover > .nav-submenu,
.nav-group:focus-within > .nav-submenu{display:flex;}
[data-theme="dark"] .nav-submenu{background:var(--bg2);box-shadow:0 6px 16px rgba(0,0,0,.5);}

.nav-sub-item{
  display:flex;align-items:center;padding:5px 15px;
  font-size:12px;font-family:var(--serif);letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:#D9DCDF;cursor:pointer;user-select:none;white-space:nowrap;transition:color .1s;
}
/* Same blue as the .nvl-dash separators in the header Links panel */
.nav-sub-item + .nav-sub-item{border-left:1px solid #1a6fc4;}
/* Admin's submenu: last nav entry, so it hangs from the right edge and can't run
   off a narrow window. Its admin-only pages appear once core.js puts .is-admin
   on <html>. */
.nav-submenu-right{left:auto;right:0;}
.nav-sub-item.nav-admin-only{display:none;}
.is-admin .nav-sub-item.nav-admin-only{display:flex;}
.nav-sub-item:hover{color:#fff;}
.nav-sub-item.active{color:var(--gold);}

.header-right{
  margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-left:1px solid #4a4f56;
}
.logout-btn{
  background:none;border:1px solid #4a4f56;
  padding:5px 14px;font-size:12.1px;font-family:var(--font);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-radius:6px;
  color:#D9DCDF;cursor:pointer;transition:all .15s;
}
.logout-btn:hover{border-color:var(--gold);color:var(--gold);}
.theme-toggle-btn{
  background:none;border:1px solid #4a4f56;border-radius:50%;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:14pt;line-height:1;color:#D9DCDF;cursor:pointer;padding:0;transition:all .15s;
}
.theme-toggle-btn:hover{border-color:var(--gold);color:var(--gold);}
.fc-typhoon-season{background:none;border:1px solid #4a4f56;padding:5px 12px;border-radius:6px;color:#D9DCDF;cursor:default;font-size:13pt;line-height:1;transition:all .15s;filter:grayscale(1) opacity(0.6);}
.fc-typhoon-season:hover{border-color:var(--gold);filter:grayscale(1) opacity(0.9);}
.fc-typhoon-season--active{border-color:#4a7a5a;filter:grayscale(0) opacity(0.75);}
.fc-typhoon-season--active:hover{border-color:#6ab880;filter:grayscale(0) opacity(1);}

.nvl-wrap{position:relative;display:flex;align-items:center;}
.nvl-toggle{
  background:none;border:1px solid #4a4f56;border-radius:50%;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:14pt;line-height:1;color:#D9DCDF;cursor:pointer;padding:0;transition:all .15s;
}
.nvl-toggle:hover{border-color:var(--gold);color:var(--gold);}
.nvl-panel{
  position:absolute;top:50%;right:calc(100% + 8px);transform:translateY(-50%);
  width:0;overflow:hidden;opacity:0;
  background:var(--dark);border:1px solid #4a4f56;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:width .28s ease,opacity .2s ease;z-index:50;
}
.nvl-panel.open{opacity:1;}
.nvl-panel-inner{display:flex;align-items:center;gap:8px;padding:10px 12px;white-space:nowrap;}
.nvl-link{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;
  color:#D9DCDF;text-decoration:none;font-size:13px;font-family:var(--serif);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .12s,color .12s;
}
.nvl-dash{color:#1a6fc4;font-weight:900;font-size:16px;}
.nvl-link:hover{background:#2d3138;color:var(--gold);}
.nvl-favicon{width:14px;height:14px;border-radius:3px;flex-shrink:0;}

/* ── BODY / MAIN ───────────────────────────────────────────── */
.app-body{display:flex;flex:1;overflow:hidden;}
aside{display:none;}
main{flex:1;overflow-y:auto;padding:26px 30px;background:var(--bg);}

/* ── FOOTER ────────────────────────────────────────────────── */
footer{
  height:var(--footer-h);
  background:var(--dark);
  border-top:3px solid var(--gold);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  font-size:10.9pt;color:#7C7D7F;letter-spacing:.06em;flex-shrink:0;
}
[data-theme="dark"] footer{border-top:1px solid var(--border);}
.footer-brand span{color:var(--gold);}

/* Footer right-hand cluster — slideshow button + radio player. footer is
   space-between with exactly TWO children (brand / this), so a new control goes
   in here rather than straight into <footer>, which would spread them apart. */
.footer-right{display:flex;align-items:center;gap:14px;}

/* ── Slideshow button (footer, left of the radio) ───────────────────── */
/* Same 24px gold pill as .radio-btn, and turns green while running for the
   same reason — one visual language for "this footer thing is active". */
.slideshow-btn{
  width:24px;height:24px;flex-shrink:0;border:none;border-radius:50%;
  background:var(--gold);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s;
}
.slideshow-btn:hover{background:var(--gold-d);}
.slideshow-btn.slideshow-on{background:var(--green);}

/* ── Radio player (footer) ─────────────────────────────────────────── */
.radio-player{display:flex;align-items:center;gap:9px;letter-spacing:normal;position:relative;}
.radio-btn{
  width:24px;height:24px;flex-shrink:0;border:none;border-radius:50%;
  background:var(--gold);color:#fff;font-size:11px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s;
}
.radio-btn:hover{background:var(--gold-d);}
.radio-player.radio-on .radio-btn{background:var(--green);}
.radio-name{color:#D9DCDF;font-size:10.4pt;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;}
.radio-player.radio-on .radio-name{color:var(--gold);}
.radio-vol{
  width:80px;height:4px;cursor:pointer;accent-color:var(--gold);
  background:transparent;
}
/* ── Focus Music popup ─────────────────────────────────────────────── */
/* Footer button = .slideshow-btn look (green while playing). The popup reuses
   .modal-overlay (grey backdrop) + .modal; tiles 4 across, picture on top,
   label + duration below. Tracks without a picture get a letter placeholder. */
.focus-overlay[hidden]{display:none;}
.focus-overlay{letter-spacing:normal;}
/* Darker than the shared .modal-overlay (.45). Double class: .modal-overlay is
   defined further down this file and would otherwise win. */
.modal-overlay.focus-overlay{background:rgba(0,0,0,.88);}
.focus-modal{width:min(860px,calc(100vw - 40px));}
/* Purple (the sandbox's) instead of gold for everything inside the pop-up (top border, tile frames, ▶ badge, volume slider, Stop hover). */
.focus-modal{--gold:#8e44ad;--gold-d:#6c3483;--gold-l:#f4ecf7;}
.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:640px){.focus-grid{grid-template-columns:repeat(2,1fr);}}
.focus-tile{
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  background:none;border:none;padding:0;cursor:pointer;text-align:center;
  font-family:var(--font);color:var(--text);
}
.focus-tile-pic{
  position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:var(--bg3);border:2px solid transparent;transition:border-color .15s,transform .15s;
}
.focus-tile-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.focus-tile-ph{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-family:var(--serif);font-size:30pt;color:var(--text3);
}
.focus-tile:hover .focus-tile-pic,.focus-tile:focus-visible .focus-tile-pic{border-color:var(--gold);transform:translateY(-2px);}
.focus-tile:focus-visible{outline:none;}
.focus-tile.active .focus-tile-pic{border-color:var(--gold);}
.focus-tile.playing .focus-tile-pic{border-color:var(--green);}
/* ▶ / ⏸ badge in the picture's corner: shown on hover, and always on the loaded track */
.focus-tile-state{
  position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;
}
.focus-tile-state::before{content:'▶';}
.focus-tile.playing .focus-tile-state{background:var(--green);}
.focus-tile.playing .focus-tile-state::before{content:'⏸';}
.focus-tile:hover .focus-tile-state,.focus-tile.active .focus-tile-state{opacity:1;}
.focus-tile-label{font-size:12.1pt;font-weight:700;}
.focus-tile-dur{font-size:10.9pt;color:var(--text3);}
.focus-footer{align-items:center;}
/* Progress row between the grid and the footer: elapsed · bar (drag to jump) · length */
.focus-progress{display:flex;align-items:center;gap:12px;padding:12px 20px 0;border-top:1px solid var(--border);flex-shrink:0;}
.focus-progress + .focus-footer{border-top:none;}
.focus-time{font-size:10.9pt;color:var(--text2);font-variant-numeric:tabular-nums;min-width:4.2em;}
.focus-time:last-child{text-align:right;}
.focus-seek{flex:1;height:4px;cursor:pointer;accent-color:var(--gold);background:transparent;}
.focus-seek:disabled{cursor:default;opacity:.4;}
.focus-now{flex:1;font-size:12.1pt;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.focus-vol{width:110px;}

/* ── PAGE TITLE ─────────────────────────────────────────────── */
.page-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:24.2px;font-weight:400;
  color:var(--text);margin-bottom:20px;
  border-bottom:2px solid var(--dark);padding-bottom:10px;
}
/* Page-header underline → gold in dark mode (was near-black var(--dark)).
   Covers both the plain .page-title line and the toolbar-wrapped variants.
   .page-toolbar (Admin, Slideshow) and .ver-tab-bar (Versions — its base rule
   lives in versions.js) were missing until 2026-09-27 and stayed black at night.
   A new header row with its own 2px var(--dark) underline must be added here. */
/* The 56px module icon at the start of a page title (2026-10-10, was inline on 21 pages). */
.page-icon{width:56px;height:56px;}
[data-theme="dark"] .page-title,
[data-theme="dark"] .tt-toolbar,
[data-theme="dark"] .page-toolbar,
[data-theme="dark"] .ver-tab-bar,
[data-theme="dark"] .cost-toolbar,
[data-theme="dark"] .cg-toolbar{border-bottom-color:var(--gold);}
.placeholder-page{color:var(--text2);font-size:13.3pt;padding:16px 0;}
/* News tab: 3-widget grid */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;margin-top:8px;}
.news-tile{display:flex;flex-direction:column;height:440px;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:18px 20px;box-sizing:border-box;}
[data-theme="dark"] .news-tile{border-top:1px solid var(--border);}
.news-tile-head{font-size:15.7pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:10px;}
.news-tile-body{flex:1;display:flex;flex-direction:column;min-height:0;}
/* Subscriptions sub-tab: YouTube + RSS tiles side by side, wrapping below each other on narrow screens */
.news-subs-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;}
.news-subs-col{flex:1 1 560px;max-width:820px;min-width:0;display:flex;}
.news-head-link{color:var(--text3);display:inline-flex;align-items:center;flex:0 0 auto;transition:color .15s;}
.news-head-link:hover{color:var(--gold);}
/* Launches widget (News slot 2) */
#news-launches{margin-top:4px;gap:0;}
.launch-item{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-bottom:1px solid var(--border);}
.launch-item:last-child{border-bottom:none;}
.launch-thumb{flex-shrink:0;width:46px;height:46px;object-fit:cover;border-radius:8px;background:var(--bg3);}
.launch-body{flex:1;min-width:0;}
.launch-row1{display:flex;align-items:baseline;gap:8px;justify-content:space-between;}
.launch-title{font-size:11.6pt;font-weight:600;color:var(--text);line-height:1.3;min-width:0;}
.launch-mission{font-weight:400;color:var(--text2);}
.launch-status{flex-shrink:0;font-size:8.6pt;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border:1px solid;border-radius:8px;padding:1px 7px;line-height:1.5;}
.launch-sub{font-size:9.8pt;color:var(--text3);margin-top:1px;}
.launch-when{font-size:10pt;color:var(--text2);margin-top:2px;}
@media (max-width:900px){.news-grid{grid-template-columns:1fr;}.news-tile{height:auto;min-height:280px;}}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  background:var(--gold);color:#fff;border:none;
  padding:8px 16px;font-size:12.8pt;font-family:var(--font);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .15s;
  border-radius:8px;
}
.btn:hover{background:var(--gold-d);color:#fff;}
.btn-danger{background:var(--red)!important;color:#fff!important;border-color:var(--red);}
.btn-danger:hover{background:var(--red-d)!important;}

/* Buttons sitting next to a page/tab name: match the Vacation year-selector height (33px).
   Fixed height + inline-flex (not padding) because box-sizing is border-box —
   .btn-secondary's 1px border would otherwise make it 2px taller than plain .btn.
   `.page-title > .dl-tab` covers the sub-tab buttons (Daily, Calendar, News, Networld,
   Take42) and by using the direct-child selector leaves the small .dl-tab-sm card
   variant alone. Modal/form/sub-toolbar buttons keep their 8px padding. */
.page-title    > .dl-tab,
.tt-toolbar    > .btn,
.cost-toolbar  > .btn,
.cg-toolbar    > .btn,
.ver-tab-bar   > .btn,
.ver-tab-bar   > .ver-tab,
.page-toolbar  > .btn{
  height:33px;padding-top:0;padding-bottom:0;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ── INPUTS ────────────────────────────────────────────────── */
.tt-input{
  border:1px solid var(--border);padding:7px 10px;
  font-size:12.8pt;font-family:var(--font);color:var(--text);
  background:var(--bg2);outline:none;transition:border-color .12s;
}
.tt-input:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:-1px;}

/* ── CARDS ──────────────────────────────────────────────────── */
/* ── SINGLE-ROW HEADER TABLES ───────────────────────────────── */
table.steps-tt thead tr:first-child th,
table.steps-tt thead tr:last-child th{position:static;top:auto;z-index:auto;}
/* Steps entries (2026-10-11): one centred card like a Learning path's steps
   (.ln-detail + .ln-steps) — max 1000px, framed, rows split by fine lines only. */
.st-card{max-width:1000px;margin:0 auto;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:6px 20px 14px;overflow-x:auto;}
[data-theme="dark"] .st-card{border-top:1px solid var(--border);}
.st-card table.steps-tt{min-width:0;}
.st-card table.summary-table{width:100%;min-width:0;}
.st-card table.summary-table td:first-child{white-space:nowrap;}
.st-card table.summary-table th,.st-card table.summary-table td{padding-left:14px;padding-right:14px;}
.st-card table.summary-table th:nth-child(2),.st-card table.summary-table td:nth-child(2){padding-left:6px;padding-right:6px;}
/* position:static — the table.tt sticky header rules (further down, so they beat
   the steps-tt reset above) pushed this one-row header 34px down over row 1. */
.st-card table.tt.steps-tt thead tr th{position:static;top:auto;border-bottom:1px solid var(--border);padding:10px 7px;font-size:12.1pt;font-weight:700;color:var(--text);}
.st-card table.steps-tt td{border-left:none;border-top:none;padding:6px 7px;}
.st-card table.steps-tt td.date-cell{font-size:12.8pt;font-weight:600;}
.st-card table.steps-tt tbody tr:first-child td{border-top:none;}
.st-card table.steps-tt tbody tr:last-child td{border-bottom:none;}

/* ── STEPS TRACKER ──────────────────────────────────────────── */
.steps-bar-wrap{width:100%;height:10px;background:var(--bg3);overflow:hidden;}
.steps-bar-fill{height:100%;transition:width .4s ease,background .4s ease;}

/* ── SUMMARY TABLE ──────────────────────────────────────────── */
table.summary-table{border-collapse:collapse;width:auto;min-width:600px;font-size:12.8pt;}
table.summary-table th{
  text-align:center;padding:8px 28px;font-size:12.1pt;font-weight:700;
  color:var(--text2);border-bottom:2px solid var(--dark);
  background:var(--bg2);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;
}
table.summary-table th:first-child{text-align:left;}
table.summary-table td{
  padding:11px 28px;text-align:center;
  border-bottom:1px solid var(--border);background:var(--bg2);
}
table.summary-table td:first-child{text-align:left;font-weight:600;}
table.summary-table tbody tr:hover td{background:var(--bg);}

/* ── TIME TRACKER ───────────────────────────────────────────── */
.tt-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;border-bottom:2px solid var(--dark);padding-bottom:10px;}
.tt-toolbar .page-title{border-bottom:none;padding-bottom:0;margin-bottom:0;}
/* Admin's page-header row (was inline-styled on the div in admin.js) */
.page-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:18px;border-bottom:2px solid var(--dark);padding-bottom:10px;}
.tt-wrapper{overflow-x:auto;}
table.tt thead tr:first-child th{position:sticky;top:0;z-index:11;background:var(--bg2)!important;}
table.tt thead tr:last-child th{position:sticky;top:34px;z-index:10;background:var(--bg2)!important;border-bottom:1px solid var(--border);}
table.tt thead tr:first-child th[rowspan]{border-bottom:1px solid var(--border);background:var(--bg2)!important;}
table.tt{border-collapse:collapse;width:100%;min-width:1120px;font-size:12.1pt;border:none;}
table.tt th{
  background:var(--bg2);border:none;
  padding:6px 7px;font-weight:700;font-size:10.9pt;
  color:var(--text2);white-space:nowrap;text-align:center;
  letter-spacing:.05em;text-transform:uppercase;
}
table.tt thead tr:first-child th:first-child{vertical-align:bottom;}
table.tt td{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  border-left:1px solid var(--border);border-right:none;
  padding:4px 5px;vertical-align:middle;background:var(--bg2);
}
table.tt tbody tr:first-child td{border-top:15px solid var(--bg);}
table.tt td:first-child{border-left:none;}
table.tt td:last-child{border-right:none;}

.time-wrap{display:flex;align-items:center;gap:4px;}
.clock-btn{
  background:none;border:none;cursor:pointer;color:var(--text3);
  font-size:16.9px;line-height:1;padding:0 2px;transition:color .12s;
}
.clock-btn:hover{color:var(--gold);}
.time-input{flex:1;min-width:0;width:0;text-align:center;}

.loc-wrap{position:relative;display:flex;align-items:center;gap:4px;}
.loc-pill{
  display:inline-block;padding:3px 10px;
  font-size:11.6pt;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:opacity .12s;user-select:none;
}
.loc-pill:hover{opacity:.8;}
.loc-pill-empty{
  background:var(--bg);color:var(--text3);
  border:1px dashed var(--border);font-weight:400;
}
.loc-clear{
  font-size:12.1px;font-weight:700;color:var(--text3);cursor:pointer;
  padding:1px 4px;line-height:1;transition:all .12s;
}
.loc-clear:hover{background:var(--red-l);color:var(--red);}
.loc-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;z-index:200;
  background:var(--bg2);border:1px solid var(--border);
  border-top:2px solid var(--gold);
  display:none;padding:6px;
  flex-direction:column;gap:5px;min-width:110px;
}
.loc-dropdown.open{display:flex;}
.loc-option{
  padding:4px 12px;cursor:pointer;font-size:11.6pt;font-weight:700;
  transition:background .1s;
}
.loc-option:hover{background:var(--bg);}

.cb-wrap{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;}
.cb-wrap input[type=checkbox]{width:14px;height:14px;accent-color:var(--gold);cursor:pointer;}
.cb-label{font-size:11.6pt;color:var(--text2);}

.computed{background:var(--bg2);text-align:center;font-weight:700;color:var(--text);font-size:12.1pt;min-width:58px;}
.ot-pos{color:#1A7A3A;}
.ot-neg{color:var(--red);}
.ot-zero{color:var(--text3);}

.notes-input{min-width:120px;max-width:180px;}
.date-cell{white-space:nowrap;font-weight:700;font-size:11.6pt;color:var(--text);text-align:center;min-width:120px;background:var(--bg2);}
.date-display{cursor:pointer;padding:2px 4px;border:1px solid transparent;transition:border-color .12s;}
.date-display:hover{border-color:var(--border);}
.date-input{font-weight:700;font-size:11.6pt;text-align:center;background:var(--bg2);padding:3px 4px;}
.date-input:focus{border-color:var(--gold);}

/* Time Tracker day cards (redesign 2026-10-11): two 50/50 columns — a card per
   day left (today's open, the rest one line; click to open), summary card right.
   table.tt above is still used by Steps. */
.tt-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.tt-days{display:flex;flex-direction:column;gap:16px;}
.tt-card,.tt-sum-card{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;}
[data-theme="dark"] .tt-card,[data-theme="dark"] .tt-sum-card{border-top:1px solid var(--border);}
.tt-card-closed{display:flex;align-items:center;gap:20px;padding:16px 22px;cursor:pointer;transition:background .1s;}
.tt-card-closed:hover{background:var(--bg);}
.tt-card-absence{cursor:default;}
.tt-card-absence:hover{background:var(--bg2);}
.tt-date-line{flex:1;font-size:12.8pt;font-weight:600;color:var(--text);white-space:nowrap;}
.tt-sm-total{font-size:12.1pt;font-weight:700;color:var(--text);min-width:58px;text-align:right;}
.tt-sm-ot{font-size:12.1pt;font-weight:700;min-width:70px;padding-left:20px;border-left:1px solid var(--border);}
.tt-absence{font-size:12.1pt;color:var(--text2);font-style:italic;}
.tt-card-open{padding:18px 22px 12px;}
.tt-card-main{display:flex;align-items:flex-start;gap:20px;}
.tt-date-block{flex-shrink:0;min-width:150px;font-size:12.8pt;font-weight:600;color:var(--text);line-height:1.25;}
.tt-date-block .date-display{display:inline-block;padding:2px 4px;margin-left:-5px;}
.tt-date-block .date-input{font-size:12.1pt;}
.tt-segs{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0;}
.tt-seg{display:flex;align-items:center;gap:12px;}
.tt-seg-label{width:112px;flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:10.9pt;font-weight:700;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;}
.tt-seg-label img{width:36px;height:36px;}
.tt-seg .time-wrap{width:124px;flex-shrink:0;padding-right:12px;border-right:1px solid var(--border);}
.tt-seg .time-input{font-size:12.1pt;}
.tt-totals{flex-shrink:0;min-width:90px;text-align:right;}
.tt-big-total{font-size:12.8pt;font-weight:700;color:var(--text);line-height:1.3;}
.tt-big-ot{font-size:12.8pt;font-weight:700;line-height:1.3;}
.tt-card-foot{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
.tt-card-foot .cb-wrap{margin-left:170px;cursor:pointer;}
.tt-card-foot .notes-input{flex:1;max-width:none;font-size:12.1pt;}
.tt-card-closed .del-btn,.tt-card-foot .del-btn{margin-left:auto;}
.tt-sum-card{padding:10px 16px 14px;overflow-x:auto;}
.tt-sum-card table.summary-table{width:100%;min-width:0;}
.tt-sum-card table.summary-table th,.tt-sum-card table.summary-table td{padding-left:14px;padding-right:14px;}
.tt-sum-card .tt-sum-row td:first-child{white-space:nowrap;}
/* Right column: summary card with the page's settings tile below (2026-10-12,
   Time Tracker + Steps; Settings used to be its own view). */
.tt-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.tt-side .admin-tile{flex:none;}
.tt-page .st-card{max-width:none;margin:0;}
@media (max-width:1500px){ .tt-page{grid-template-columns:minmax(0,1fr);} }

/* ── ADMIN ──────────────────────────────────────────────────── */
.admin-section{max-width:400px;margin-bottom:28px;}
.admin-label{display:block;font-size:12.8pt;color:var(--text2);margin-bottom:7px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.9pt;}
.admin-row{display:flex;gap:10px;align-items:center;}
.admin-input{width:110px;}
.admin-msg{font-size:12.1pt;color:var(--green);margin-top:8px;margin-bottom:0;min-height:16px;}

.del-btn{
  background:none;border:none;color:var(--red);cursor:pointer;
  font-size:15.7px;font-weight:700;padding:3px 7px;transition:background .12s;
}
.del-btn:hover{background:var(--red-l);}
/* Delete = bin icon everywhere (BIN_ICON in core.js, 2026-10-11): grey, red on
   hover. button.bin-btn outranks the colours of .del-btn / .td-icon-btn etc. that
   the same buttons still carry. Slideshow's .gal-del keeps its own white circle. */
.bin-btn{background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:5px;line-height:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
button.bin-btn{color:var(--text3);}
button.bin-btn:hover{color:var(--red);background:var(--red-l);}
.bin-icon{display:block;width:16px;height:16px;}

/* Admin → Notifications (2026-10-11) */
.ntf-table{width:100%;border-collapse:collapse;}
.ntf-table th{font-size:10.9pt;font-weight:700;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);}
.ntf-table td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:top;}
.ntf-table tr:last-child td{border-bottom:none;}
.ntf-table .ntf-cell{width:70px;text-align:center;}
.ntf-cell input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer;margin-top:2px;}
.ntf-label{font-size:12.1pt;font-weight:700;color:var(--text);}
.ntf-desc{font-size:11pt;color:var(--text3);margin-top:2px;line-height:1.35;}
.ntf-req{font-size:9.5pt;font-weight:600;color:var(--text3);border:1px solid var(--border);border-radius:6px;padding:0 6px;margin-left:6px;vertical-align:middle;}
.ntf-devices{display:flex;flex-direction:column;gap:10px;}
.ntf-device{display:flex;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.ntf-device:last-child{border-bottom:none;padding-bottom:0;}

.version-btn{
  background:var(--gold-l);color:var(--gold-d);border:1px solid var(--gold);
  padding:5px 12px;font-size:12.1px;font-weight:700;border-radius:6px;
  font-family:var(--font);cursor:pointer;transition:all .15s;letter-spacing:.04em;text-transform:uppercase;
}
.version-btn:hover{background:var(--gold);color:var(--dark);}

/* ── VERSION HISTORY ────────────────────────────────────────── */
.version-form-card{
  background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:16px;padding:20px 24px;margin-bottom:28px;
}
[data-theme="dark"] .version-form-card{border-top:1px solid var(--border);}
.vf-row{display:flex;gap:20px;align-items:flex-start;}
.vf-field{display:flex;flex-direction:column;gap:6px;}
.vf-label{font-size:10.9pt;color:var(--text2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.vf-notes{resize:vertical;min-height:100px;font-family:var(--font);}
select.tt-input{cursor:pointer;}

.version-entry{border:1px solid var(--border);border-radius:16px;padding:18px 22px;margin-bottom:12px;background:var(--bg2);}
.version-latest{border-top:3px solid var(--gold);}
[data-theme="dark"] .version-latest{border-top:1px solid var(--border);}
.version-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.version-number{font-family:var(--serif);font-size:19.4px;font-weight:700;color:var(--text);}
.version-date{font-size:12.1pt;color:var(--text3);margin-left:auto;}
.version-notes{font-size:12.8pt;color:var(--text2);line-height:1.6;white-space:pre-wrap;}
.badge-minor{background:var(--gold-l);color:var(--gold-d);padding:2px 10px;font-size:10.9pt;font-weight:700;border:1px solid var(--gold);}
.badge-major{background:var(--red-l);color:var(--red);padding:2px 10px;font-size:10.9pt;font-weight:700;border:1px solid var(--red);}
.badge-bug{background:var(--bg3);color:var(--text2);padding:2px 10px;font-size:10.9pt;font-weight:700;border:1px solid var(--border);}
/* "+ New Version" form: meaning of the picked type, under the select (2026-09-23).
   Fixed width so switching types never reflows the form row. */
.vf-type-help{font-size:10.5pt;color:var(--text3);margin-top:5px;width:230px;line-height:1.35;}
.badge-latest{background:var(--gold);color:var(--dark);padding:2px 10px;font-size:10.9pt;font-weight:700;}
.badge-app{padding:2px 10px;font-size:10.9pt;font-weight:700;border-radius:3px;}
.badge-app-co{background:var(--gold-l);color:var(--gold-d);border:1px solid var(--gold);}
.badge-app-slate{background:#dbeafe;color:#1450a3;border:1px solid #1a6fc4;}
.badge-app-both{background:#f0f0ff;color:#444;border:1px solid #aaa;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:999;}
.modal-box{background:var(--bg2);border-top:3px solid var(--gold);border-radius:16px;overflow:hidden;padding:32px 36px;width:320px;text-align:center;}
[data-theme="dark"] .modal-box{border-top:1px solid var(--border);}
.modal-box h3{font-family:var(--serif);font-size:19.4px;font-weight:400;margin-bottom:8px;color:var(--text);}
.modal-box p{font-size:12.8pt;color:var(--text2);margin-bottom:24px;line-height:1.5;}
.modal-actions{display:flex;gap:10px;justify-content:center;}
.modal-cancel{
  background:none;border:1px solid var(--border);padding:8px 20px;
  font-size:12.8pt;font-family:var(--font);color:var(--text2);cursor:pointer;transition:all .12s;
}
.modal-cancel:hover{border-color:var(--text2);color:var(--text);}
.modal-confirm{
  background:var(--red);color:#fff;border:none;padding:8px 20px;
  font-size:12.8pt;font-family:var(--font);cursor:pointer;transition:background .12s;
}
.modal-confirm:hover{background:var(--red-d);}

/* ── SPINNER ────────────────────────────────────────────────── */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── VACATION PLANNER ────────────────────────────────────────── */
.vac-year-wrap{position:relative;}
.vac-year-btn{
  background:var(--gold-l);color:var(--gold-d);border:1px solid var(--gold);
  padding:5px 14px;font-size:12.1pt;font-weight:700;border-radius:6px;
  font-family:var(--font);cursor:pointer;transition:all .15s;letter-spacing:.04em;text-transform:uppercase;
}
.vac-year-btn:hover{background:var(--gold);color:var(--dark);}
.vac-year-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;z-index:300;
  background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--gold);
  display:none;flex-direction:column;max-height:260px;overflow-y:auto;min-width:90px;padding:5px;
}
.vac-year-dropdown.open{display:flex;}
.vac-year-option{padding:5px 14px;cursor:pointer;font-size:12.1pt;font-weight:700;color:var(--text2);transition:background .1s;text-align:center;}
.vac-year-option:hover{background:var(--bg);}
.vac-year-option.active{background:var(--gold-l);color:var(--gold-d);}

.vac-cal-wrap{overflow-x:auto;margin-bottom:20px;background:var(--bg2);padding:16px;display:inline-block;border-top:3px solid var(--gold);border-radius:16px;}
[data-theme="dark"] .vac-cal-wrap{border-top:1px solid var(--border);}
table.vac-cal{border-collapse:collapse;font-size:10.9pt;table-layout:fixed;}
.vac-month-head{width:108px;}
.vac-day-head{width:34px;min-width:34px;max-width:34px;text-align:center;font-weight:700;font-size:10.9pt;color:var(--text);padding:5px 0 4px;border-bottom:1px solid var(--border);white-space:nowrap;}
.vac-month-label{font-size:12.1pt;font-weight:700;color:var(--text);padding:2px 14px 2px 0;white-space:nowrap;border-right:1px solid var(--border);vertical-align:middle;}
.vac-cell{width:34px;min-width:34px;max-width:34px;height:26px;border:1px solid var(--border);text-align:center;vertical-align:middle;cursor:pointer;transition:filter .1s;padding:0;}
.vac-cell:hover{filter:brightness(.93);}
.vac-weekend{background:var(--bg);color:var(--text);cursor:pointer;}
.vac-invalid{background:var(--bg3);cursor:default;border-color:var(--bg3);}
.vac-invalid:hover{filter:none;}
.vac-today{outline:2px solid #e00;outline-offset:-2px;}
.vac-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:0;line-height:1;}
.vac-wknd-label{font-size:10.3pt;color:inherit;font-weight:700;line-height:1;}
.vac-val-badge{font-size:10.9pt;font-weight:700;line-height:1;color:inherit;}
.vac-picker{background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--gold);z-index:500;padding:5px;min-width:170px;display:flex;flex-direction:column;gap:3px;}
.vac-picker-clear{padding:5px 12px;cursor:pointer;font-size:11.6pt;color:var(--text3);transition:background .1s;}
.vac-picker-clear:hover{background:var(--red-l);color:var(--red);}
.vac-picker-option{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;font-size:11.6pt;transition:opacity .1s;}
.vac-picker-option strong{min-width:20px;font-size:11.6pt;}
.vac-picker-option span{font-size:10.9pt;opacity:.85;}
.vac-picker-option:hover{background:var(--bg);}
.vac-picker-option.selected{outline:2px solid var(--gold);}
.vac-summary{display:flex;flex-direction:column;gap:18px;}
.vac-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;}
.vac-legend-item{display:flex;align-items:center;gap:7px;}
.vac-legend-pill{display:inline-block;padding:2px 9px;font-size:10.9pt;font-weight:700;white-space:nowrap;}
.vac-legend-name{font-size:11.6pt;color:var(--text2);}
.vac-legend-cnt{font-size:11.6pt;font-weight:700;color:var(--text);min-width:24px;text-align:right;}
.vac-stats-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;}
.vac-stat-card{display:flex;flex-direction:column;gap:5px;background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:12px 18px;min-width:140px;}
[data-theme="dark"] .vac-stat-card{border-top:1px solid var(--border);}
.vac-stat-label{font-size:10.9pt;color:var(--text2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.vac-stat-value{font-family:var(--serif);font-size:26.6px;font-weight:700;color:var(--text);line-height:1;}
.vac-stat-input{width:90px;font-size:16.9px;font-weight:700;padding:4px 8px;}
.vac-result-card .vac-stat-label{color:var(--gold-d);}
.vac-main-layout{display:flex;align-items:flex-start;gap:20px;}
.vac-cal-col{display:flex;flex-direction:column;width:max-content;}
.vac-holidays-cols{flex:1;min-width:0;display:flex;align-items:flex-start;gap:20px;}
.vac-holidays-panel{flex:1;min-width:180px;background:var(--bg2);border-top:3px solid #CCE5FF;border:1px solid #CCE5FF;border-top-width:3px;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:0;}
.vac-hol-title{display:flex;align-items:center;gap:8px;font-size:10.9pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text2);margin-bottom:10px;}
.vac-hol-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);}
.vac-hol-row:last-child{border-bottom:none;}
.vac-hol-date{font-size:10.3pt;font-weight:700;color:var(--text3);min-width:40px;flex-shrink:0;}
.vac-hol-name{font-size:10.9pt;color:var(--text);line-height:1.3;}

/* ── HINT PANEL ─────────────────────────────────────────────── */
.hint-btn{background:#CCE5FF;border:none;border-radius:6px;padding:3px 9px;font-size:13pt;font-weight:700;line-height:1;color:#fff;cursor:pointer;margin-left:auto;opacity:.9;transition:opacity .15s;}
.hint-btn:hover{opacity:1;}
.hint-panel{position:fixed;z-index:8000;width:340px;background:var(--bg2);border:1px solid #CCE5FF;border-top:3px solid #CCE5FF;border-radius:12px;padding:14px 18px;font-size:12.1pt;color:var(--text2);line-height:1.6;box-shadow:0 8px 24px rgba(0,0,0,.13);}
.hint-panel-hidden{display:none;}
.hint-panel p{margin:0 0 8px;}
.hint-panel p:last-child{margin-bottom:0;}
.hint-panel ul{margin:0 0 8px;padding-left:20px;}
.hint-panel li{margin-bottom:3px;}
.hint-panel strong{color:var(--text);font-weight:700;}
.hint-panel-loading{color:var(--text3);font-style:italic;}

/* ── TOAST ──────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  padding:11px 20px;font-size:12.8pt;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;max-width:360px;
}
.toast.visible{opacity:1;transform:translateY(0);}
.toast-error{background:var(--red);color:#fff;}
.toast-success{background:var(--green);color:#fff;}

/* ── MODAL (generic) ──────────────────────────────────────── */
.modal{background:var(--bg2);border-top:3px solid var(--gold);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh;}
[data-theme="dark"] .modal{border-top:1px solid var(--border);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-title{font-size:14.5pt;font-weight:700;color:var(--text);}
.modal-close{background:none;border:none;font-size:20pt;line-height:1;cursor:pointer;color:var(--text3);padding:0 4px;transition:color .15s;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px;overflow-y:auto;flex:1;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;}

/* ── FORM ELEMENTS (generic) ─────────────────────────────── */
.form-row{display:flex;flex-direction:column;gap:5px;}
.form-label{font-size:11pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.form-input{width:100%;border:1px solid var(--border);padding:8px 11px;font-size:13.3pt;font-family:var(--font);color:var(--text);background:var(--bg2);outline:none;transition:border-color .15s;resize:vertical;}
.form-input:focus{border-color:var(--gold);}

/* ── BTN VARIANTS ─────────────────────────────────────────── */
.btn-secondary{background:var(--bg2);border:1px solid var(--border);color:var(--text2);}
.btn-secondary:hover{border-color:var(--gold);color:var(--text);}
/* Sub-tabs of the four Admin pages: open tab in gold, same as .dl-tab.active */
.admin-tab-btn.active,.admin-tab-btn.active:hover{background:var(--gold);border-color:var(--gold);color:var(--dark);}

/* ── COST TRACKER ─────────────────────────────────────────── */
.cost-toolbar{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--dark);margin-bottom:18px;}
.cost-toolbar .page-title{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.cost-view-btn.active{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--dark)!important;}

.cost-month-nav{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.cost-month-arrow{background:none;border:1px solid var(--border);width:30px;height:30px;font-size:20pt;cursor:pointer;color:var(--text2);line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;}
.cost-month-arrow:hover{border-color:var(--gold);color:var(--gold);}
.cost-month-label{font-size:14.5pt;font-weight:700;color:var(--text);min-width:160px;}

.cost-accounts-row{display:flex;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.cost-acc-card{flex:1;min-width:200px;padding:16px 20px;border:1px solid var(--border);border-top:3px solid var(--border);background:var(--bg2);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.cost-acc-card:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.cost-acc-card.active{border-top-color:var(--gold);border-color:var(--gold);}
.cost-acc-name{font-size:12.1pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.cost-acc-currency{font-size:10.9pt;color:var(--text3);margin-bottom:8px;}
.cost-acc-total{font-size:22pt;font-weight:700;color:var(--text);margin-bottom:4px;}
.cost-acc-count{font-size:10.9pt;color:var(--text3);}

.cost-entries-wrap{overflow-y:auto;padding-bottom:24px;}
.cost-empty{color:var(--text3);font-size:13.3pt;padding:20px 0;font-style:italic;}

.cost-table{width:100%;border-collapse:collapse;font-size:13.3pt;}
.cost-table thead th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);font-size:11pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.cost-table tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
.cost-table tbody tr:hover{background:var(--bg);}
.cost-table td{padding:8px 10px;color:var(--text);vertical-align:middle;}
.cost-th-amount{text-align:right!important;}
.cost-th-icon{text-align:center!important;width:36px;}
.cost-td-date{white-space:nowrap;color:var(--text2);font-size:12.1pt;}
.cost-td-amount{text-align:right;font-weight:700;white-space:nowrap;}
.cost-td-acc{font-size:12.1pt;color:var(--text2);}
.cost-td-actions{white-space:nowrap;text-align:right;width:90px;}

.cost-cat-badge{display:inline-block;font-size:10.9pt;font-weight:700;padding:2px 8px;border-radius:3px;white-space:nowrap;}
.cost-cat-none{color:var(--text3);border:1px solid var(--border);background:transparent;}
.cost-icon-recur{font-size:15pt;color:var(--gold);cursor:default;}
.cost-icon-doc{font-size:13pt;cursor:pointer;opacity:.8;transition:opacity .15s;}
.cost-icon-doc:hover{opacity:1;}
.cost-action-btn{background:none;border:1px solid var(--border);padding:3px 10px;font-size:11pt;font-family:var(--font);cursor:pointer;color:var(--text2);transition:all .15s;margin-left:4px;}
.cost-action-btn:hover{border-color:var(--gold);color:var(--text);}
.cost-del-btn:hover{border-color:var(--red);color:var(--red);}
.cost-currency-badge{display:inline-block;font-size:10.9pt;font-weight:700;padding:1px 6px;background:var(--bg);border:1px solid var(--border);color:var(--text2);border-radius:2px;}

.cost-doc-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);}
.cost-doc-link{flex:1;color:var(--text);text-decoration:none;font-size:12.1pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cost-doc-link:hover{color:var(--gold);}
.cost-doc-del-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:13pt;padding:0 4px;line-height:1;transition:color .15s;flex-shrink:0;}
.cost-doc-del-btn:hover{color:var(--red);}
.cost-no-docs{color:var(--text3);font-size:12.1pt;font-style:italic;}

/* Yearly view */
.cost-yr-table{margin-bottom:28px;}
.cost-yr-month{font-size:13.3pt;color:var(--text2);white-space:nowrap;}
.cost-yr-amount{text-align:right;font-size:13.3pt;white-space:nowrap;}
.cost-yr-amount.has-value{color:var(--text);font-weight:600;}
.cost-yr-total-row td{font-weight:700;font-size:13.3pt;border-top:2px solid var(--dark);padding-top:10px;color:var(--text);}
.cost-yr-cats-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;padding-bottom:24px;}
.cost-yr-cat-panel{border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;background:var(--bg2);}
[data-theme="dark"] .cost-yr-cat-panel{border-top:1px solid var(--border);}
.cost-yr-cat-title{font-size:13.3pt;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.cost-yr-cat-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--border);}
.cost-yr-cat-row:last-child{border-bottom:none;}
.cost-yr-bar-wrap{flex:1;background:var(--bg);height:8px;border-radius:4px;overflow:hidden;}
.cost-yr-bar{height:100%;border-radius:4px;transition:width .4s ease;}
.cost-yr-cat-amount{font-size:12.1pt;font-weight:700;color:var(--text);white-space:nowrap;min-width:80px;text-align:right;}



/* ── CARMENGO ─────────────────────────────────────────────── */
.cg-toolbar{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--dark);margin-bottom:18px;}
.cg-toolbar .page-title{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.cg-nav-btn.active{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--dark)!important;}
.cg-loading{color:var(--text3);font-size:13.3pt;font-style:italic;padding:20px 0;}

/* Dashboard stat cards */
.cg-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
.cg-stat-card{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
[data-theme="dark"] .cg-stat-card{border-top:1px solid var(--border);}
.cg-stat-icon{font-size:20pt;line-height:1;}
.cg-stat-value{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--text);line-height:1.1;}
.cg-stat-label{font-size:10.9pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.cg-stat-sub{font-size:10.9pt;color:var(--text3);}
.cg-streak-countdown{font-size:10.5pt;color:var(--gold);margin-top:4px;}

/* Level distribution */
.cg-level-panel{background:var(--bg2);border:1px solid var(--border);padding:16px 20px;margin-bottom:24px;}
.cg-level-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.cg-level-title{font-size:12.1pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.cg-level-acc{font-size:12.1pt;color:var(--text2);}
.cg-level-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin-bottom:10px;}
.cg-level-seg{height:100%;min-width:4px;transition:flex .4s;}
.cg-level-legend{display:flex;flex-wrap:wrap;gap:8px 18px;}
.cg-level-lbl{display:flex;align-items:center;gap:5px;font-size:11pt;color:var(--text2);}
.cg-level-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* Start button */
.cg-start-row{display:flex;align-items:center;gap:20px;}
.cg-start-btn{font-size:14.5pt;padding:12px 28px;}
.cg-hint{font-size:11pt;color:var(--text3);}

/* Empty session */
.cg-empty-session{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 0;text-align:center;}
.cg-empty-title{font-size:19.4pt;font-weight:700;color:var(--text);}
.cg-empty-sub{font-size:13.3pt;color:var(--text2);max-width:400px;}

/* Session */
.cg-session{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:560px;margin:0 auto;padding-top:8px;}
.cg-session-meta{display:flex;align-items:center;justify-content:space-between;width:100%;}
.cg-progress-txt{font-size:12.1pt;color:var(--text3);}
.cg-session-pts{font-size:13.3pt;font-weight:700;color:var(--text);}
.cg-progress-bar-wrap{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.cg-progress-bar{height:100%;background:var(--gold);transition:width .4s;}

/* Flashcard */
.cg-card-container{width:100%;height:220px;perspective:1000px;cursor:pointer;}
.cg-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .45s ease;}
.cg-card.flipped{transform:rotateY(180deg);}
.cg-card-front,.cg-card-back{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);
  padding:24px;
}
[data-theme="dark"] .cg-card-front,[data-theme="dark"] .cg-card-back{border-top:1px solid var(--border);}
.cg-card-back{transform:rotateY(180deg);}
.cg-card.cg-flash-correct{background:#e6f4ea!important;}
.cg-card.cg-flash-wrong  {background:#fdecea!important;}
.cg-word-jp{font-size:36pt;font-weight:700;color:var(--text);text-align:center;}
.cg-word-en{font-size:28pt;font-weight:700;color:var(--text);text-align:center;}
.cg-word-jp-small{font-size:14.5pt;color:var(--text3);text-align:center;}
.cg-flip-hint{font-size:11pt;color:var(--text3);font-style:italic;}

/* Timer */
.cg-timer-row{display:flex;align-items:center;gap:12px;width:100%;}
.cg-timer-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.cg-timer-bar{height:100%;background:var(--gold);width:100%;transition:width 1s linear;}
.cg-timer-txt{font-size:12.1pt;font-weight:700;color:var(--text2);min-width:20px;text-align:right;}

/* Answer buttons */
.cg-answer-row{display:flex;gap:16px;width:100%;transition:opacity .25s;}
.cg-ans-btn{flex:1;padding:12px;font-size:14.5pt;font-family:var(--font);font-weight:700;cursor:pointer;border:2px solid var(--border);background:var(--bg2);color:var(--text);transition:all .15s;}
.cg-correct-btn:hover{background:#e6f4ea;border-color:var(--green);color:var(--green);}
.cg-wrong-btn:hover{background:var(--red-l);border-color:var(--red);color:var(--red);}
.cg-quit-btn{align-self:flex-end;font-size:11pt;}

/* Summary */
.cg-summary{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 0;max-width:560px;margin:0 auto;text-align:center;}
.cg-summary-icon{font-size:48pt;line-height:1;}
.cg-summary-title{font-family:var(--serif);font-size:24.2px;color:var(--text);}
.cg-summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;}
.cg-sum-item{display:flex;flex-direction:column;gap:4px;background:var(--bg2);border:1px solid var(--border);padding:14px;}
.cg-sum-val{font-size:22pt;font-weight:700;color:var(--text);}
.cg-sum-lbl{font-size:10.9pt;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.cg-sum-correct .cg-sum-val{color:var(--green);}
.cg-sum-wrong .cg-sum-val{color:var(--red);}
.cg-streak-badge{background:var(--gold-l);border:1px solid var(--gold);color:var(--gold-d);padding:8px 20px;font-size:13.3pt;font-weight:700;}

/* Words management */
.cg-words-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.cg-words-filters{display:flex;gap:6px;flex-wrap:wrap;}
.cg-lvl-btn.active{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--dark)!important;}
.cg-words-table{margin-bottom:12px;}
.cg-level-badge{display:inline-block;font-size:10.9pt;font-weight:700;padding:2px 8px;border-radius:3px;white-space:nowrap;}
.cg-badge-new{display:inline-block;font-size:10.9pt;font-weight:700;padding:2px 8px;background:var(--bg);border:1px solid var(--border);color:var(--text3);border-radius:3px;}
.cg-pagination{display:flex;align-items:center;gap:12px;padding:8px 0;}

/* ── Sentences ──────────────────────────────────────────────────────────────── */
.cg-sentence-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding-top:8px;}
.cg-sentence-card{perspective:900px;cursor:pointer;height:160px;}
.cg-sentence-card .cg-sentence-front,
.cg-sentence-card .cg-sentence-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px;transition:transform .4s ease;}
[data-theme="dark"] .cg-sentence-card .cg-sentence-front,
[data-theme="dark"] .cg-sentence-card .cg-sentence-back{border-top:1px solid var(--border);}
.cg-sentence-card{position:relative;transform-style:preserve-3d;}
.cg-sentence-card.flipped .cg-sentence-front{transform:rotateY(180deg);}
.cg-sentence-card .cg-sentence-back{transform:rotateY(180deg);}
.cg-sentence-card.flipped .cg-sentence-back{transform:rotateY(0deg);}
/* ── Points stat card (wide, merged) + mini bar chart ───────────────────────── */
.cg-stat-card-wide{grid-column:span 2;flex-direction:column;gap:12px;}
.cg-bar-chart{display:flex;align-items:flex-end;gap:4px;width:100%;}
.cg-bar-chart-mini{height:44px;}
.cg-bar-col{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;gap:2px;height:100%;}
.cg-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--border);border-radius:2px 2px 0 0;overflow:hidden;}
.cg-bar-fill{width:100%;background:var(--gold);border-radius:2px 2px 0 0;transition:height .4s ease;min-height:2px;}
.cg-bar-label{font-size:8.5pt;color:var(--text3);white-space:nowrap;}
.cg-bar-tooltip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:8pt;padding:2px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:10;}
.cg-bar-col:hover .cg-bar-tooltip{display:block;}

.cg-ls-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px;}
.cg-ls-tile{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 8px 8px;text-align:center;cursor:default;transition:box-shadow .15s,transform .15s;}
.cg-ls-unlocked{border-top:3px solid var(--green);cursor:pointer;}
.cg-ls-unlocked:hover,.cg-ls-unlocked.active{box-shadow:0 4px 14px rgba(0,0,0,.10);transform:translateY(-2px);}
.cg-ls-unlocked.active{border-color:var(--green);background:var(--bg3);}
.cg-ls-locked{border-top:3px solid var(--border);opacity:.75;}
.cg-ls-num{font-size:9.3pt;color:var(--text3);margin-bottom:4px;}
.cg-ls-check{font-size:14.5pt;color:var(--green);font-weight:700;line-height:1.2;}
.cg-ls-count{font-size:9pt;color:var(--text3);margin-top:2px;}
.cg-ls-pct{font-size:12.1pt;font-weight:700;color:var(--text2);line-height:1.2;}
.cg-ls-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:5px;}
.cg-ls-bar-fill{height:100%;background:var(--gold);transition:width .4s;}
.cg-ls-detail-header{display:flex;align-items:baseline;gap:12px;padding:12px 0 10px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.cg-sentence-jp{font-size:15.4pt;font-weight:700;color:var(--text);line-height:1.4;}
.cg-sentence-kana{font-size:12.1pt;color:var(--text2);}
.cg-sentence-hint{font-size:10.9pt;color:var(--text3);font-style:italic;margin-top:4px;}
.cg-sentence-en{font-size:14.5pt;font-weight:700;color:var(--text);line-height:1.4;}
.cg-sentence-jp-small{font-size:11pt;color:var(--text3);}
.cg-quiz-card{border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:36px 32px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:180px;justify-content:center;width:100%;}
[data-theme="dark"] .cg-quiz-card{border-top:1px solid var(--border);}
.cg-quiz-kana{font-size:52pt;line-height:1;color:var(--text);}
.cg-quiz-input-row{display:flex;gap:10px;align-items:center;}
.cg-quiz-input{font-size:16.9px;padding:10px 14px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);width:240px;outline:none;font-family:var(--font);}
.cg-quiz-input:focus{border-color:var(--gold);}
.cg-quiz-submit-btn{padding:10px 20px;}
.cg-quiz-feedback{min-height:22px;font-size:12.1pt;text-align:center;}
.cg-quiz-retry{color:var(--gold-d);font-weight:700;}
.cg-quiz-answer{color:var(--text2);}
.cg-quiz-flash-correct{animation:cg-quiz-green .7s ease;}
.cg-quiz-flash-wrong{animation:cg-quiz-red .7s ease;}
.cg-quiz-shake{animation:cg-quiz-shake .5s ease;}
@keyframes cg-quiz-green{0%,100%{background:var(--bg2);}50%{background:#d4edda;}}
@keyframes cg-quiz-red{0%,100%{background:var(--bg2);}50%{background:#fdecea;}}
@keyframes cg-quiz-shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-8px);}40%,80%{transform:translateX(8px);}}

/* Admin — Users tab */
.admin-users-table{width:100%;border-collapse:collapse;font-size:12.5pt;}
.admin-users-table th{text-align:left;padding:10px 16px;color:var(--text3);font-size:11pt;font-weight:600;border-bottom:2px solid var(--border);}
.admin-users-table td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--text);}
.admin-users-table tr:last-child td{border-bottom:none;}
.btn-sm{padding:4px 12px;font-size:11pt;}
/* Tiny inline-edit Save/Cancel buttons in list rows (2026-10-10, was inline 13x). */
.btn-xs{padding:2px 10px;font-size:12px;}
/* Plain full-width list tables + their small-caps header cells, and an inline
   load-error line (2026-10-10, were inline styles in admin, news, core etc.). */
.data-table{width:100%;border-collapse:collapse;}
.th-caps{padding:8px 14px;font-size:11pt;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.msg-error{color:var(--red,#c62828);font-size:12.1pt;}

/* ── CALENDAR MODULE ──────────────────────────────────────── */

.cal-layout{display:flex;gap:20px;align-items:flex-start;}
.cal-main{flex:1;min-width:0;}

.cal-month-nav{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.cal-month-arrow{background:none;border:1px solid var(--border);width:30px;height:30px;font-size:18pt;cursor:pointer;color:var(--text2);line-height:1;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:border-color .15s,color .15s;}
.cal-month-arrow:hover{border-color:var(--gold);color:var(--gold-d);}
.cal-month-label{font-size:15.7pt;font-weight:700;color:var(--text);min-width:170px;}

table.cal-grid{border-collapse:collapse;width:100%;table-layout:fixed;background:var(--bg2);border-top:1px solid var(--border);border-radius:16px;overflow:hidden;}
table.cal-grid th{padding:8px 4px;font-size:10.9pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;text-align:center;border-bottom:1px solid var(--border);}
.cal-day-cell{border:1px solid var(--border);vertical-align:top;height:96px;padding:6px;cursor:pointer;transition:background .1s;}
/* Calendar (events.js): 20% taller than .cal-day-cell (2026-09-21). */
.ev-day-cell{height:115px;}
.cal-day-cell:hover{background:var(--bg);}
.cal-outside-month{background:var(--bg3);color:var(--text3);}
.cal-today .cal-day-num{color:#fff;background:var(--gold);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;}
.cal-day-num{font-size:11.6pt;font-weight:700;color:var(--text);margin-bottom:4px;}
.cal-day-events{display:flex;flex-direction:column;gap:2px;}
.cal-pill{font-size:9.7pt;color:#fff;padding:2px 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-pill-more{font-size:9.3pt;color:var(--text3);padding:0 4px;}

.cal-legend{width:220px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);border-top:1px solid var(--border);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
.cal-legend-title{font-size:10.9pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text2);margin-bottom:2px;}
.cal-legend-item{display:flex;align-items:center;}
.cal-legend-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.1pt;color:var(--text);}
.cal-legend-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.cal-legend-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.cal-event-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.cal-event-row:last-child{border-bottom:none;}
.cal-event-title{flex:1;font-size:12.8pt;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-event-time{font-size:10.9pt;color:var(--text3);white-space:nowrap;}
.cal-event-edit-btn,.cal-event-del-btn{background:none;border:none;font-size:14pt;color:var(--text3);cursor:pointer;padding:0 4px;line-height:1;transition:color .15s;}
.cal-event-edit-btn:hover{color:var(--gold-d);}
.cal-event-del-btn:hover{color:var(--red);}

/* 24h time picker (core.js timePickerHtml, 2026-10-10): Calendar event form + Admin night mode */
.time-pick{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;}
.time-pick select.form-input{width:auto;padding:8px 6px;cursor:pointer;}
.time-pick-colon{font-weight:700;color:var(--text2);}

/* Calendar: Agenda view (events.js loadEvAgenda, 2026-10-10) */
.ev-ag-list{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.ev-ag-day{display:flex;gap:18px;padding:12px 18px;border-bottom:1px solid var(--border);}
.ev-ag-day:last-child{border-bottom:none;}
.ev-ag-today{background:var(--gold-l);}
.ev-ag-date{width:130px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;font-size:12.1pt;color:var(--text2);padding-top:6px;}
.ev-ag-rel{font-weight:700;color:var(--text);}
.ev-ag-day-date{font-weight:600;color:var(--text);}
.ev-ag-rel + .ev-ag-day-date{font-weight:400;color:var(--text2);}
.ev-ag-today .ev-ag-rel{color:var(--gold-d);}
.ev-ag-entries{flex:1;min-width:0;}
.ev-ag-time{width:100px;flex-shrink:0;font-size:12.1pt;color:var(--text2);font-variant-numeric:tabular-nums;}
.ev-ag-loc{color:var(--text3);font-size:12.1pt;}
.ev-ag-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:12.1pt;}

/* ── C&C DASHBOARD (moved from core.js inline <style>, 2026-07-05) ──────── */
.fc-wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 0 2rem;}
.fc-grid{display:grid;grid-template-columns:repeat(5,305px);gap:40px;grid-auto-rows:250px;}
.fc-new-half{border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);display:flex;flex-direction:column;padding:18px 20px;box-sizing:border-box;}
[data-theme="dark"] .fc-new-half{border-top:1px solid var(--border);}
.fc-half-head{font-size:15.7pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);}
.fc-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 30px;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);}

/* Weather widget — Tokyo + Mainz side by side (Open-Meteo, self-hosted) */
.fc-wx{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
/* The whole forecast half of a city tile clicks through to the Weather page
   (2026-07-25) — no link icon, the hover tint is the affordance. */
.fc-wx-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:2px 12px;text-align:center;min-width:0;cursor:pointer;border-radius:10px;transition:background .15s;}
.fc-wx-col:hover{background:var(--bg3);}
.fc-wx-now{display:flex;align-items:center;gap:12px;}
.fc-wx-icon{font-size:42px;line-height:1;}
.fc-wx-nowtext{display:flex;flex-direction:column;align-items:flex-start;}
.fc-wx-temp{font-size:30px;font-weight:700;color:var(--text);line-height:1.05;}
.fc-wx-cond{font-size:10.6pt;color:var(--text2);text-align:left;}
.fc-wx-meta{font-size:9.8pt;color:var(--text3);}
[data-theme="dark"] .fc-clock{border-top:1px solid var(--border);}
.fc-clock-divider{width:1px;height:180px;background:var(--border);flex-shrink:0;}
/* Tokyo + Mainz in ONE tile (2026-10-11; were two tiles, each clock left + weather
   right with a 3-day strip). Now Tokyo | Mainz side by side, each a column: city
   head · hh:mm flip clock (no seconds, no labels) · date · today's weather. */
.fc-city-tile{display:flex;flex-direction:column;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);overflow:hidden;}
[data-theme="dark"] .fc-city-tile{border-top:1px solid var(--border);}
.fc-city-head{flex:0 0 auto;text-align:center;padding:9px 0 3px;font-size:15.7pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);}
.fc-clocks-tile{flex-direction:row;align-items:center;}
.fc-city-col{flex:1 1 0;min-width:0;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:18px 16px 10px;}
.fc-city-col .fc-city-head{padding:0;line-height:1.2;}
.fc-city-col .fc-units{gap:6px;}
.fc-city-col .fc-card{width:54px;height:66px;}
.fc-city-col .panel{height:33px;}
.fc-city-col .panel-bot{top:33px;}
.fc-city-col .panel span{font-size:40px;line-height:66px;height:66px;}
.fc-city-col .panel-bot span{top:-33px;}
.fc-city-col .fc-colon{font-size:36px;margin-bottom:0;}
.fc-city-col .fc-wx{height:auto;}
.fc-city-col .fc-wx-col{flex:0 1 auto;padding:4px 14px;}
.fc-units{display:flex;align-items:center;gap:10px;}
.fc-unit{display:flex;flex-direction:column;align-items:center;gap:10px;}
.fc-card{position:relative;width:72px;height:88px;perspective:400px;}
.panel{position:absolute;left:0;right:0;height:44px;overflow:hidden;background:#1c1c1c;z-index:1;}
.panel-top{top:0;border-radius:8px 8px 0 0;}
.panel-bot{top:44px;border-radius:0 0 8px 8px;border-top:2px solid #080808;}
.panel span{position:absolute;left:0;right:0;text-align:center;font-size:54px;font-family:'Courier New',monospace;font-weight:700;color:#fff;line-height:88px;height:88px;}
.panel-top span{top:0;}
.panel-bot span{top:-44px;}
.flap-top{z-index:2;transform-origin:center bottom;transform:rotateX(0deg);backface-visibility:hidden;}
.flap-bot{z-index:2;transform-origin:center top;transform:rotateX(90deg);backface-visibility:hidden;}
.flap-top.go{animation:flapOut 0.22s ease-in forwards;}
.flap-bot.go{animation:flapIn  0.22s ease-out forwards;}
@keyframes flapOut{from{transform:rotateX(0deg);}to{transform:rotateX(-90deg);}}
@keyframes flapIn {from{transform:rotateX(90deg);}to{transform:rotateX(0deg);}}
.fc-colon{font-size:50.8px;font-weight:700;font-family:'Courier New',monospace;color:var(--text);margin-bottom:20px;line-height:1;user-select:none;}
.fc-date{font-size:16.9pt;font-weight:600;color:var(--text);}
/* Japanese Reading (2026-10-11): a normal .fc-new-half with its title top-left like
   every tile; only the phrase itself is centred in the space below. */
.fc-phrase-tile{height:100%;}
.fc-phrase{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;}
.fc-phrase-jp{font-size:20pt;font-weight:700;color:var(--text);}
.fc-phrase-romaji{font-size:13.3pt;color:var(--text2);letter-spacing:.04em;}
.fc-phrase-en{font-size:12.1pt;color:var(--text3);}
.fc-greeting{font-size:20.6pt;font-weight:600;color:var(--text);text-align:center;letter-spacing:.01em;}
.fc-playlist{grid-column:1/-1;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;background:var(--bg2);}
[data-theme="dark"] .fc-playlist{border-top:1px solid var(--border);}
.fc-playlist-scroll{overflow-y:auto;display:flex;flex-direction:column;gap:4px;flex:1;}
.fc-pl-item{display:flex;align-items:center;gap:12px;padding:5px 6px;border-radius:8px;}
.fc-pl-item:hover{background:var(--bg2);}
.fc-pl-num{font-size:9.7pt;color:var(--text3);min-width:20px;text-align:right;}
.fc-pl-note{font-size:15.7px;}
.fc-pl-song{font-size:12.1pt;color:var(--text);flex:1;}
.fc-pl-date{font-size:9.7pt;color:var(--text3);white-space:nowrap;}
/* C&C Calendar month tile (2026-10-11): 2 wide × 2 tall, replaced the To-Do tile.
   The grid's row template (weekday row + 5 or 6 week rows) is set inline by core.js. */
.fc-cal-tile{overflow:hidden;}
.fc-cal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.fc-cal-month{flex:1;text-align:right;font-size:12.1pt;font-weight:600;color:var(--text2);}
.fc-cal-nav{background:none;border:1px solid var(--border);border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--text2);font-size:14pt;line-height:1;padding:0;}
.fc-cal-nav:hover{border-color:var(--gold);color:var(--gold);}
.fc-cal-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
.fc-cal-wd{font-size:9.7pt;font-weight:700;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;text-align:center;padding-bottom:2px;}
.fc-cal-day{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:3px 4px;border-radius:6px;background:var(--bg);cursor:pointer;transition:background .1s;}
.fc-cal-day:hover{background:var(--bg3);}
.fc-cal-out{opacity:.45;}
.fc-cal-today{box-shadow:inset 0 0 0 2px var(--gold);}
.fc-cal-today .fc-cal-num{color:var(--gold);}
.fc-cal-num{font-size:10.9pt;font-weight:700;color:var(--text2);line-height:1.1;}
.fc-cal-pill{font-size:9.7pt;color:#fff;border-radius:4px;padding:0 4px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-cal-more{font-size:9pt;color:var(--text3);}
.fc-todo-tile{display:flex;flex-direction:column;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:18px 20px;box-sizing:border-box;height:100%;overflow:hidden;}
[data-theme="dark"] .fc-todo-tile{border-top:1px solid var(--border);}
.fc-todo-head{font-size:15.7pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:8px;flex-shrink:0;}
.fc-todo-scroll{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1px;}

/* C&C "New Videos" (YouTube subscriptions) widget */
.fc-yt-scroll{margin-top:8px;gap:2px;}
.fc-yt-clear{display:flex;justify-content:flex-end;margin-bottom:2px;}
.fc-yt-clearall{background:none;border:none;cursor:pointer;color:var(--text3);font-size:10.6pt;padding:2px 4px;border-radius:5px;}
.fc-yt-clearall:hover{color:var(--text);background:var(--bg3);}
.fc-yt-group{display:flex;flex-direction:column;gap:2px;}
.fc-yt-group + .fc-yt-group{margin-top:10px;}
.fc-yt-group-head{display:flex;align-items:baseline;gap:8px;padding:2px 6px 4px;border-bottom:1px solid var(--border);}
.fc-yt-group-name{font-size:12.1pt;font-weight:700;color:var(--gold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fc-yt-group-type{flex-shrink:0;padding:1px 7px;border-radius:9px;font-size:9.5pt;font-weight:600;letter-spacing:.02em;background:var(--bg3);color:var(--text3);}
.fc-yt-group-count{flex-shrink:0;margin-left:auto;font-size:10.6pt;color:var(--text3);}
.fc-yt-item{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;border-radius:8px;}
.fc-yt-item:hover{background:var(--bg3);}
.fc-yt-link{flex:1;display:flex;align-items:flex-start;gap:8px;text-decoration:none;color:inherit;cursor:pointer;min-width:0;}
.fc-yt-play{color:#FF0000;font-size:11pt;line-height:1.4;flex-shrink:0;}
.fc-rss-dot{color:#F26522;font-size:8pt;line-height:1.95;flex-shrink:0;}  /* RSS widget reuses the .fc-yt-* rows */
.fc-yt-text{font-size:12.1pt;color:var(--text2);line-height:1.35;}
.fc-yt-link:hover .fc-yt-text{color:var(--text);}
.fc-yt-x{background:none;border:none;cursor:pointer;color:var(--text3);font-size:15px;line-height:1;padding:0 4px;flex-shrink:0;border-radius:5px;}
.fc-yt-x:hover{color:var(--red,#c62828);background:var(--bg2);}
.fc-todo-sec{font-size:9.7pt;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin:6px 0 2px;padding:0 4px;}
.fc-todo-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;transition:background .1s;}
.fc-todo-item:hover{background:var(--bg);}
.fc-todo-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fc-todo-text{font-size:11.6pt;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-todo-date{font-size:9.7pt;color:var(--text3);white-space:nowrap;flex-shrink:0;}
.fc-banner-row{width:calc(305px * 5 + 40px * 4);box-sizing:border-box;display:flex;gap:16px;}
.fc-banner-row > div{flex:1;min-width:0;}
.fc-vac-banner{width:100%;box-sizing:border-box;border:1px solid var(--gold);border-top:3px solid var(--gold);border-radius:16px;background:var(--gold-l);padding:16px 28px;display:flex;align-items:center;gap:12px;}
.fc-vac-banner-text{font-size:13.3pt;color:var(--gold-d);line-height:1.4;}
[data-theme="dark"] .fc-vac-banner-text{color:var(--gold);}
.fc-typhoon-banner{width:100%;box-sizing:border-box;border:1px solid var(--red);border-top:3px solid var(--red);border-radius:16px;background:var(--red-l);padding:16px 28px;display:flex;align-items:center;gap:12px;}
.fc-typhoon-banner-text{font-size:13.3pt;color:var(--red-d);line-height:1.4;}
[data-theme="dark"] .fc-typhoon-banner-text{color:var(--red);}
.fc-typhoon-banner-link{color:var(--red-d);font-weight:700;text-decoration:underline;cursor:pointer;}
[data-theme="dark"] .fc-typhoon-banner-link{color:var(--red);}
.fc-links-banner{width:calc(305px * 5 + 40px * 4);border:1px solid var(--gold);border-top:3px solid var(--gold);border-radius:16px;background:var(--gold-l);padding:16px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-sizing:border-box;}
.fc-links-banner-list{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.fc-links-banner-pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--gold);border-radius:20px;padding:5px 14px;font-size:12.1pt;color:var(--gold-d);text-decoration:none;font-weight:600;transition:background .15s;}
[data-theme="dark"] .fc-links-banner-pill{color:var(--gold);}
.fc-links-banner-pill:hover{background:var(--gold-l);}
[data-theme="dark"] .fc-vac-banner,[data-theme="dark"] .fc-typhoon-banner,[data-theme="dark"] .fc-links-banner{background:var(--bg2);border:1px solid var(--border);border-top:1px solid var(--border);}
.fc-links-banner-favicon{width:14px;height:14px;border-radius:3px;flex-shrink:0;}
.fc-cg-tile{cursor:pointer;transition:background .15s;}
.fc-cg-tile:hover{background:var(--bg2);}
.fc-steps-tile{transition:background .15s;}
.fc-steps-tile:hover{background:var(--bg2);}
/* C&C News tile (2026-07-25) — headline counts from the News page (unread
   YouTube uploads + launches inside 24h). Whole tile navigates to News. */
.fc-news-tile{transition:background .15s;}
.fc-news-tile:hover{background:var(--bg2);}
.fc-news-body{display:flex;flex-direction:column;gap:10px;margin-top:12px;flex:1;min-height:0;}
.fc-news-line{display:flex;align-items:flex-start;gap:10px;font-size:12.1pt;color:var(--text2);line-height:1.35;}
.fc-news-ico{flex:0 0 auto;}
.fc-news-more{margin-top:auto;font-size:10.6pt;color:var(--text3);}
.fc-steps-recent{display:flex;flex-direction:column;gap:3px;margin:8px 0 10px;}
.fc-steps-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5pt;}
.fc-steps-day{color:var(--text2);}
.fc-steps-val{font-weight:700;color:var(--text);}
.fc-steps-val.met{color:var(--green);}
.fc-steps-chart{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:auto;padding-top:6px;border-top:1px solid var(--border);}
.fc-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.fc-bar-track{width:100%;background:var(--bg2);border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;height:44px;position:relative;}
.fc-bar-fill{width:100%;border-radius:4px;transition:height .3s;position:relative;display:flex;align-items:flex-end;justify-content:center;}
.fc-bar-val{font-size:7pt;color:#fff;font-weight:700;padding-bottom:2px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.fc-bar-label{font-size:8pt;color:var(--text3);white-space:nowrap;}
.fc-cg-stats{display:flex;gap:24px;flex:1;align-items:center;justify-content:center;}
.fc-cg-stat{display:flex;flex-direction:column;align-items:center;gap:4px;}
.fc-cg-icon{font-size:22pt;line-height:1;}
.fc-cg-value{font-size:20.6pt;font-weight:700;color:var(--text);}
.fc-cg-label{font-size:9.7pt;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;}
.fc-cg-countdown{font-size:10pt;color:var(--text2);text-align:center;line-height:1.5;border-top:1px solid var(--border);padding-top:10px;margin-top:auto;}
.fc-fx-rate-info{font-size:10.3pt;color:var(--text2);margin-bottom:2px;}
.fc-fx-updated{font-size:9.7pt;color:var(--text3);margin-bottom:10px;}
.fc-fx-calc{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center;}
.fc-fx-row{display:flex;align-items:center;gap:8px;}
.fc-fx-input{border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13.3pt;font-family:var(--font);color:var(--text);background:var(--bg);width:100%;box-sizing:border-box;-moz-appearance:textfield;}
.fc-fx-input::-webkit-outer-spin-button,.fc-fx-input::-webkit-inner-spin-button{-webkit-appearance:none;}
.fc-fx-input:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:-1px;}
.fc-fx-ccy{font-size:12.1pt;font-weight:700;color:var(--text2);min-width:34px;}
.fc-fx-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:5px 11px;font-size:14pt;cursor:pointer;color:var(--text2);transition:all .15s;align-self:flex-start;font-family:var(--font);}
.fc-fx-toggle:hover{border-color:var(--gold);color:var(--gold);}
.fc-fx-result-row{display:flex;align-items:baseline;gap:8px;}
.fc-fx-result{font-size:17pt;font-weight:700;color:var(--text);}
.fc-fx-result-ccy{font-size:12.1pt;font-weight:700;color:var(--text2);}
.fc-wrap{position:relative;}
.fc-wrap > *{position:relative;z-index:1;}
/* Night-mode background picture now lives on body.cc-page in style.css
   (body never scrolls — only #main-content does — so it stays put automatically).
   Previous CSS-only starfield confined to this card, kept for easy revert:
[data-theme="dark"] .fc-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent 60%),
    radial-gradient(1px 1px at 80% 8%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 40%, #fff, transparent 60%),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 60%, #fff, transparent 60%),
    radial-gradient(1px 1px at 65% 25%, #fff, transparent 60%),
    radial-gradient(1px 1px at 15% 90%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 10%, #fff, transparent 60%),
    radial-gradient(1px 1px at 95% 35%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 5% 50%, #fff, transparent 60%);
  background-repeat:repeat;background-size:260px 260px;opacity:.6;
}
*/
.cc-moon{display:none;}
[data-theme="dark"] .cc-moon{
  display:block;position:absolute;top:6px;right:40px;width:85px;height:85px;
  z-index:0;
}
/* Previous CSS-only crescent moon (kept for easy revert):
[data-theme="dark"] .cc-moon{
  display:block;position:absolute;top:6px;right:40px;width:64px;height:64px;
  border-radius:50%;background:#e9e6da;box-shadow:18px -8px 0 0 var(--bg) inset;
  z-index:0;
}
*/

/* ── DAILY LOG (moved from dailylog.js inline <style>, 2026-07-05) ──────── */
/* 50/50 with the 28px gutter like .tt-page (2026-10-12, was 2fr 1fr / 20px). */
.dl-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:1500px){ .dl-wrap { grid-template-columns:minmax(0,1fr); } }
.dl-right-col { display:flex; flex-direction:column; gap:20px; }
.dl-manage-card { background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; padding:20px 24px; margin-bottom:24px; max-width:calc((100% - 28px) / 2); }
[data-theme="dark"] .dl-manage-card { border-top:1px solid var(--border); }
.dl-manage-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.dl-freq-wrap { display:flex; flex-direction:column; gap:4px; }
.dl-freq-wrap label { font-size:10.9pt; color:var(--text3); }
.dl-select { padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:12.1pt; font-family:var(--font); }
.dl-manage-list { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.dl-manage-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.dl-manage-item.inactive { opacity:.5; }
.dl-manage-name { font-size:12.1pt; font-weight:600; color:var(--text); flex:1; }
.dl-manage-freq { font-size:10.9pt; color:var(--text3); margin-right:4px; }
.dl-btn-sm { padding:5px 12px; font-size:10.9pt; border:1px solid var(--border); border-radius:7px; cursor:pointer; background:var(--bg2); color:var(--text); font-family:var(--font); }
.dl-btn-sm:hover { border-color:var(--text); }
.dl-tile { border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; background:var(--bg2); padding:22px 26px; }
[data-theme="dark"] .dl-tile { border-top:1px solid var(--border); }
.dl-tile-title { font-size:10.9pt; font-weight:700; color:var(--text2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.dl-date-nav { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.dl-date-label { font-size:16.9pt; font-weight:700; color:var(--text); flex:1; }
.dl-arrow { background:none; border:1px solid var(--border); border-radius:8px; cursor:pointer; padding:4px 12px; font-size:16.9px; color:var(--text2); }
.dl-arrow:hover { color:var(--text); border-color:var(--text); }
.dl-today-btn { font-size:10.9pt; color:var(--gold); cursor:pointer; border:none; background:none; padding:0; text-decoration:underline; }
.dl-field-label { font-size:10.9pt; font-weight:700; color:var(--text2); letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.dl-mood-habits-area { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; align-items:flex-start; }
.dl-mood-row { display:flex; flex-wrap:wrap; gap:8px; }
.dl-mood-sep { width:1px; background:var(--border); align-self:stretch; margin:0 8px; flex-shrink:0; min-height:64px; }
.dl-habit-btns { display:flex; flex-wrap:wrap; gap:8px; }
.dl-mood-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--bg2); transition:all .15s; user-select:none; }
.dl-mood-btn:hover { border-color:var(--text2); }
.dl-mood-btn.selected { border-color:var(--gold); background:var(--gold-l); }
.dl-mood-emoji { font-size:26.6px; line-height:1; }
.dl-mood-label { font-size:9.7pt; color:var(--text3); }
.dl-mood-btn.selected .dl-mood-label { color:var(--gold); font-weight:600; }
.dl-habit-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--bg2); transition:all .15s; user-select:none; min-width:60px; }
.dl-habit-btn:hover { border-color:var(--text2); }
.dl-habit-btn.done { border-color:var(--green,#2E7D32); background:#E6F4EA; }
.dl-habit-icon { font-size:22px; line-height:1; }
.dl-habit-name { font-size:9.7pt; color:var(--text3); text-align:center; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-habit-btn.done .dl-habit-name { color:var(--green,#2E7D32); font-weight:600; }
.dl-habit-auto { cursor:default; }
.dl-habit-auto:hover { border-color:var(--border); }
.dl-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.dl-field { display:flex; flex-direction:column; gap:6px; }
.dl-input { padding:9px 12px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); font-size:12.1pt; width:100%; box-sizing:border-box; resize:none; font-family:inherit; }
.dl-input:focus { outline:none; border-color:var(--gold); }
.dl-textarea { min-height:90px; }
.dl-notes-field { margin-bottom:20px; }
.dl-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dl-save-msg { font-size:10.9pt; color:var(--text3); }
.dl-todo-input-row { display:flex; gap:8px; margin-top:8px; }
.dl-todo-input-row .dl-input { flex:1; }
.dl-cal-nav { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.dl-cal-month { font-size:12.1pt; font-weight:700; color:var(--text); flex:1; text-align:center; }
.dl-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }
.dl-cal-dow { font-size:9.7pt; color:var(--text3); padding:2px 0; font-weight:600; }
.dl-cal-day { font-size:10.9pt; padding:5px 2px; border-radius:6px; cursor:pointer; position:relative; color:var(--text2); line-height:1.4; }
.dl-cal-day:hover { background:var(--bg); }
.dl-cal-day.today { font-weight:700; color:var(--gold); }
.dl-cal-day.selected { background:var(--gold); color:#fff !important; font-weight:700; }
.dl-cal-day.has-entry::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--gold); }
.dl-cal-day.selected::after { background:#fff; }
.dl-cal-day.empty { cursor:default; }
.dl-cal-day.other-month { color:var(--border); cursor:default; }
.dl-history { display:flex; flex-direction:column; gap:10px; }
.dl-hist-row { display:flex; align-items:center; gap:8px; }
.dl-hist-name { font-size:9.7pt; color:var(--text2); width:72px; flex-shrink:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-hist-grid { display:flex; gap:3px; flex-wrap:nowrap; }
.dl-sq { width:13px; height:13px; border-radius:3px; flex-shrink:0; }
.dl-sq-done { background:var(--green,#2E7D32); }
.dl-sq-miss { background:var(--border); }
.dl-sq-future { background:transparent; border:1px solid var(--border); }
.dl-sq-inactive { background:transparent; }
.dl-tab { padding:8px 16px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12.8pt; font-family:var(--font); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text2); background:var(--bg2); }
.dl-tab:hover { border-color:var(--gold); color:var(--text); }
.dl-tab.active { background:var(--gold); border-color:var(--gold); color:var(--dark); }
/* Lets an <a> wear .dl-tab and still look like the button (2026-07-25). */
a.dl-tab { display:inline-block; text-decoration:none; }
/* Gold/filled variant — same fill as .dl-tab.active but permanent, for buttons
   that are links rather than tab states (Take42 "Login", 2026-07-25).
   Must sit after .dl-tab:hover so it wins the hover colours (equal specificity). */
.dl-tab-gold, .dl-tab-gold:hover { background:var(--gold); border-color:var(--gold); color:var(--dark); }
.dl-tab-gold:hover { filter:brightness(1.08); }
/* Small variant — same look, scaled down. Used for the "Login" button on the
   Networld website cards (2026-07-25). Works on <a> too (inline-block + no underline). */
.dl-tab-sm { display:inline-block; padding:3px 11px; border-radius:6px; font-size:10.6pt; text-decoration:none; }

/* ── WEATHER PAGE (forecast.js, 2026-07-25) ──────────────────────────────
   One card per city, stacked. The hourly strip is a fixed-width-column row
   that scrolls sideways — `min-width:0` on the card is what lets it actually
   scroll instead of stretching the card (flex children default to min-content). */
/* Width cap raised 1250px → 1500px (2026-09-19). `main` only has 30px padding, so at
   1250px the card filled ~67% of a 1920px screen and left ~600px of dead page beside
   it. 1500px reclaims part of that without the 7-day table's seven columns spreading
   so far apart that rows get hard to scan left-to-right.
   ⚠️ Marco tuned this BY EYE, downwards: 1800 → 1700 → 1500, each still reading as
   "thin". Don't widen it again without asking. If it ever still feels thin, the cause
   is more likely .wf-cur-meta below spreading its 5 metrics with big trailing gaps
   than the card being too wide — tighten that grid before touching this number.
   Everything inside cooperates: the table is width:100%, and the hourly strip is a
   scrollable flex row, so extra width becomes MORE visible hours. */
.wf-cities { display:flex; flex-direction:column; gap:24px; max-width:1500px; }
.wf-city { min-height:0; min-width:0; gap:14px; }
.wf-section-title { font-size:11pt; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3); margin-top:4px; }
.wf-current { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.wf-cur-icon { font-size:52px; line-height:1; }
.wf-cur-main { display:flex; flex-direction:column; gap:2px; }
.wf-cur-temp { font-size:34pt; font-weight:700; line-height:1; color:var(--text); }
.wf-cur-cond { font-size:12.1pt; color:var(--text2); }
/* The four metrics now SPREAD across the leftover width instead of clustering at the
   right edge (2026-09-19, with the max-width removal above — otherwise a wider card
   just grows the gap in the middle). `flex:1` makes the block absorb the free space;
   auto-fit collapses the unused tracks so the 4 items end up evenly distributed.
   minmax keeps it self-adjusting with no media query — this page has none — and 180px
   clears the longest line, "💨 Wind 100 km/h WNW". Replaces margin-left:auto, which
   is what pinned it right. */
.wf-cur-meta { flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:4px 26px; font-size:12.1pt; color:var(--text2); }
.wf-hours { display:flex; gap:2px; overflow-x:auto; padding-bottom:6px; }
.wf-hour { flex:0 0 58px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:8px; }
.wf-hour:hover { background:var(--bg3); }
/* Midnight column starts a new day — a left border marks the boundary. */
.wf-hour-newday { border-left:2px solid var(--border); }
.wf-hour-time { font-size:10.6pt; color:var(--text3); }
.wf-hour-icon { font-size:19px; line-height:1; }
.wf-hour-temp { font-size:12.1pt; font-weight:600; color:var(--text); }
.wf-hour-pop  { font-size:10.6pt; color:var(--text3); }
.wf-pop-on    { color:#3d7fd6; font-weight:600; }

/* ── NOTES / TODOS (moved from todos.js inline <style>, 2026-07-05) ─────── */
/* Split into two nav pages again 2026-07-25 (they shared one page 50/50 from
   2026-07-05 until then). `max-width` reproduces exactly the column width each
   had inside the old two-column row — half the content area minus the 28px
   gutter — so the split changed nothing about how wide either list renders.
   The old .td-top-row/.td-bottom-row/.td-col-main/.td-col-side classes are
   gone; they existed only to build that 50/50 row. */
.nt-page       { display:flex; flex-direction:column; gap:24px; max-width:calc((100% - 28px) / 2); }
/* To-Dos (2026-10-10): two 50/50 columns — the filter tiles + list left (filters on
   top since 2026-10-11), the add card right. */
.td-page { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.td-side { display:flex; flex-direction:column; gap:24px; }
.td-main .td-filter-row { margin-bottom:16px; flex-wrap:wrap; }
.td-main #td-tag-tile { flex:1; min-width:220px; }
/* To-Dos → Tags (2026-10-11): the tag list in the same card as "Add a new to-do",
   as wide as one To-Dos column (50%). */
.tgm-card { width:calc((100% - 28px) / 2); background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; padding:20px 24px; }
[data-theme="dark"] .tgm-card { border-top:1px solid var(--border); }
.td-add-card { background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; padding:20px 24px; display:flex; flex-direction:column; }
[data-theme="dark"] .td-add-card { border-top:1px solid var(--border); }
.td-add-row  { flex:1; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.td-add-row textarea            { flex:1; height:0; width:100%; box-sizing:border-box; resize:vertical; min-height:80px; }
.td-add-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.td-add-controls input[type="date"]  { width:148px; }
.td-add-controls .td-tag-input-wrap { flex:1; min-width:180px; }
.td-recur-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:2px; }
.td-recur-toggle { display:flex; align-items:center; gap:6px; font-size:10.9pt; color:var(--text2); cursor:pointer; user-select:none; }
.td-recur-options { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.td-recur-preview { font-size:10.9pt; color:var(--gold); font-weight:600; }
.td-filter-row { display:flex; gap:16px; margin-bottom:20px; align-items:flex-start; }
.td-filter-tile { background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; padding:14px 20px; }
[data-theme="dark"] .td-filter-tile { border-top:1px solid var(--border); }
.td-filter-tile-title { font-size:9.7pt; font-weight:700; color:var(--text2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.td-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.td-filter-btn { padding:5px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:10.9pt; color:var(--text2); background:var(--bg); }
.td-filter-btn.active { background:var(--gold); border-color:var(--gold); color:#fff; font-weight:600; }
.td-section { font-size:10.9pt; font-weight:700; color:var(--text2); letter-spacing:.06em; text-transform:uppercase; margin:20px 0 8px; display:flex; align-items:center; gap:6px; }
.td-section-count { font-weight:400; font-size:9.7pt; opacity:.7; }
/* To-Do list (2026-10-10, sections split 2026-10-11): each section is its own
   framed card (.td-group) with a solid header in the status colour; rows split by
   fine lines, a coloured left edge per status (same colours), hover tint. */
.td-list { display:flex; flex-direction:column; gap:16px; }
.td-group { display:flex; flex-direction:column; background:var(--bg2); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.td-list .td-section { margin:0; padding:8px 16px; color:#fff; background:#757575; }
.td-list .td-section-count { opacity:.85; }
.td-sec-overdue  .td-section { background:#e53935; }
.td-sec-today    .td-section { background:#fb8c00; }
.td-sec-upcoming .td-section { background:#1e88e5; }
.td-list > .td-empty { padding:16px; background:var(--bg2); border:1px solid var(--border); border-radius:16px; }
.td-empty { font-size:12.1pt; color:var(--text3); padding:8px 0; }
.td-item { border-left:4px solid transparent; border-bottom:1px solid var(--border); background:var(--bg2); transition:background .1s; }
.td-item:last-child { border-bottom:none; }
.td-item:hover { background:var(--bg); }
.td-st-overdue  { border-left-color:#e53935; }
.td-st-today    { border-left-color:#fb8c00; }
.td-st-upcoming { border-left-color:#1e88e5; }
.td-st-nodate,
.td-st-done     { border-left-color:var(--text3); }
.td-item.done-item { opacity:.5; }
.td-item-row { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; flex-wrap:wrap; }
.td-check { width:22px; height:22px; border-radius:6px; border:2px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15.7px; transition:all .1s; }
.done-item .td-check { background:var(--green,#2E7D32); border-color:var(--green,#2E7D32); color:#fff; }
.td-title { flex:1; font-size:12.1pt; color:var(--text); min-width:0; word-break:break-word; white-space:pre-wrap; }
.done-item .td-title { text-decoration:line-through; color:var(--text3); }
.td-badge { font-size:9.7pt; border-radius:5px; padding:2px 7px; flex-shrink:0; white-space:nowrap; }
.td-badge-overdue  { background:#ffeaea; color:#c62828; border:1px solid #ffcdd2; font-weight:600; }
.td-badge-today    { background:#fff3e0; color:#e65100; border:1px solid #ffe0b2; font-weight:600; }
.td-badge-upcoming { background:#e3f2fd; color:#1565c0; border:1px solid #bbdefb; }
.td-badge-done     { background:var(--bg2); color:var(--text3); border:1px solid var(--border); }
.td-badge-cat      { background:var(--bg2); color:var(--text2); border:1px solid var(--border); }
.td-badge-source   { background:var(--bg2); color:var(--text3); border:1px solid var(--border); }
/* Tag chip input (architecture rethink §10, Step 3b, 2026-09-22) — used for both
   the Add row and an item's Edit row. Chips are removable (×); typing shows a
   suggestion dropdown of existing tags plus a "Create …" option. View-mode tag
   badges (not editable) reuse .td-badge / .td-badge-cat above, unchanged. */
.td-tag-input-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1px solid var(--border); background:var(--bg2); border-radius:6px; padding:5px 7px; }
.td-tag-input-wrap:focus-within { border-color:var(--gold); }
.td-tag-chip { display:inline-flex; align-items:center; gap:5px; font-size:11pt; border-radius:5px; padding:2px 6px 2px 8px; background:var(--bg); white-space:nowrap; }
.td-tag-chip-x { background:none; border:none; cursor:pointer; font-size:12px; line-height:1; padding:0; color:inherit; opacity:.7; }
.td-tag-chip-x:hover { opacity:1; }
.td-tag-suggest { position:relative; flex:1; min-width:120px; }
.td-tag-text { border:none; background:none; outline:none; width:100%; font-size:12.1pt; color:var(--text); padding:3px 2px; }
.td-tag-suggest-list { position:absolute; top:calc(100% + 2px); left:0; z-index:20; background:var(--bg2); border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.18); max-height:180px; overflow-y:auto; min-width:180px; }
.td-tag-suggest-item { padding:6px 12px; font-size:11.8pt; cursor:pointer; color:var(--text); }
.td-tag-suggest-item:hover { background:var(--bg3); }
.td-tag-suggest-new { color:var(--text2); font-style:italic; }
.td-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.td-icon-btn { background:none; border:none; cursor:pointer; color:var(--text3); font-size:18.1px; padding:3px 6px; border-radius:5px; line-height:1; }
.td-icon-btn:hover { color:var(--text); background:var(--bg2); }
.td-icon-btn.has-attach { color:var(--gold); }
/* Little green badge on the 📎 clip with the NUMBER of attachments (was a ✓ while
   a to-do could only hold one — 2026-09-27). The gold color above is invisible on
   the emoji glyph, so this is the real cue. */
.td-attach-btn { position:relative; }
.td-attach-btn.has-attach::after {
  content:attr(data-count);
  position:absolute; top:-1px; right:1px;
  min-width:13px; height:13px; padding:0 2px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:900; line-height:1;
  color:#fff; background:var(--green,#2E7D32);
  border-radius:50%;
  box-shadow:0 0 0 1.5px var(--bg);   /* ring separates it from the clip in both themes */
  pointer-events:none;                 /* don't block the button click / tooltip */
}
.td-edit-row { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-top:1px solid var(--border); }
.td-edit-fields { display:flex; gap:8px; flex-wrap:wrap; }
.td-edit-fields input[type="text"] { flex:2; min-width:140px; }
.td-edit-fields textarea.td-edit-title { flex:2; min-width:140px; width:100%; box-sizing:border-box; resize:vertical; min-height:60px; }
.td-edit-fields input[type="date"] { width:148px; }
.td-edit-fields .td-tag-input-wrap { flex:2; min-width:220px; }
.td-edit-btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.td-attach-info { font-size:10.9pt; color:var(--text2); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* One attached file (To-Dos + Notes): 📎 name ×  — they wrap as a row of chips. */
.att-chip { display:inline-flex; align-items:center; gap:4px; }
.td-attach-info a { color:var(--gold); text-decoration:none; }
.td-attach-info a:hover { text-decoration:underline; }
.btn-ghost { background:none; border:1px solid var(--border); color:var(--text2); }
.btn-ghost:hover { background:var(--bg2); }
.nt-add-card { background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; }
[data-theme="dark"] .nt-add-card { border-top:1px solid var(--border); }
.nt-inner { flex:1; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.nt-add-card input[type="text"] { width:100%; box-sizing:border-box; }
.nt-add-card textarea { flex:1; height:0; width:100%; box-sizing:border-box; resize:vertical; min-height:120px; font-family:var(--font); }
.nt-add-btns { display:flex; gap:8px; }
.nt-list { display:flex; flex-direction:column; gap:8px; }
.nt-empty { font-size:12.1pt; color:var(--text3); padding:4px 0; }
.nt-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.nt-card-header { display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; user-select:none; }
.nt-card-header:hover { background:var(--bg3,var(--bg)); }
.nt-chevron { font-size:11px; color:var(--text3); transition:transform .18s; flex-shrink:0; }
.nt-card.expanded .nt-chevron { transform:rotate(90deg); }
.nt-card-title { flex:1; font-size:12.1pt; color:var(--text); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-card-body { display:none; border-top:1px solid var(--border); padding:14px 16px; }
.nt-card.expanded .nt-card-body { display:block; }
.nt-content { font-size:12.1pt; color:var(--text2); line-height:1.6; white-space:pre-wrap; word-break:break-word; margin-bottom:12px; min-height:24px; }
.nt-view-actions { display:flex; gap:8px; }
.nt-edit-form { display:none; }
.nt-card.editing .nt-content, .nt-card.editing .nt-view-actions { display:none; }
.nt-card.editing .nt-edit-form { display:block; }
.nt-edit-form input[type="text"] { width:100%; box-sizing:border-box; margin-bottom:8px; }
.nt-edit-form textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:120px; margin-bottom:10px; font-family:var(--font); }
.nt-edit-btns { display:flex; gap:8px; }
.nt-clip { flex-shrink:0; font-size:11pt; }
.nt-attach-view { font-size:10.9pt; color:var(--text2); margin-bottom:12px; display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; }
.nt-attach-info { font-size:10.9pt; color:var(--text2); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.nt-attach-view a, .nt-attach-info a { color:var(--gold); text-decoration:none; }
.nt-attach-view a:hover, .nt-attach-info a:hover { text-decoration:underline; }
.nt-card.editing .nt-attach-view { display:none; }

/* ── ADMIN TILES (moved from admin.js inline <style>, 2026-07-05) ───────── */
.admin-tile-row { display:flex; gap:20px; align-items:stretch; }
.admin-tile { flex:1; background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:16px; padding:16px 20px; display:flex; flex-direction:column; }
[data-theme="dark"] .admin-tile { border-top:1px solid var(--border); }
.admin-tile-title { font-size:13pt; font-weight:700; color:var(--text); margin-bottom:12px; }
.admin-tile .admin-section:last-child { margin-bottom:0; }
.admin-tile .admin-msg { margin-bottom:0; }

/* ── PHRASES (moved from phrases.js inline <style>, 2026-07-05) ─────────── */
.phrases-wrap{max-width:720px;}
.phrases-add-card{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:24px 28px;margin-bottom:28px;display:flex;flex-direction:column;gap:10px;}
[data-theme="dark"] .phrases-add-card{border-top:1px solid var(--border);}
.phrases-add-card .admin-row{margin-top:4px;}
.phrases-list{display:flex;flex-direction:column;gap:10px;}
.phrase-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:var(--bg);}
.phrase-item-text{display:flex;flex-direction:column;gap:3px;}
.phrase-item-jp{font-size:18.1pt;font-weight:700;color:var(--text);}
.phrase-item-romaji{font-size:12.1pt;color:var(--text2);}
.phrase-item-en{font-size:12.1pt;color:var(--text3);}
.phrase-empty{color:var(--text3);font-size:12.1pt;padding:12px 0;}

/* -- TAKE42 -------------------------------------------------------------- */
/* The Take42 logo is a white outline on transparency, so it is invisible on
   the light theme. invert(1) flips it to a dark outline (alpha is untouched);
   the dark theme uses the original white. */
.t42-logo{filter:invert(1);}
[data-theme="dark"] .t42-logo{filter:none;}
/* Episode Composer overview: the whole row opens the Composer (2026-10-14). */
.t42e-row{cursor:pointer;}
.t42e-row:hover td{background:var(--bg3);}

/* -- GALLERY (Explore → Slideshow; page key is still 'gallery') ----------- */
.gal-summary{font-size:10.9pt;color:var(--text3);letter-spacing:.04em;margin-left:auto;}

/* 4 across, as specified. Cards stretch to the tallest in the row so the
   description fields line up. */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start;}
@media (max-width:1400px){.gal-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:1050px){.gal-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){.gal-grid{grid-template-columns:1fr;}}

.gal-empty{font-size:12.1pt;color:var(--text3);padding:8px 0;}

.gal-card{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;
  background:var(--bg2);padding:12px;box-sizing:border-box;
}
[data-theme="dark"] .gal-card{border-top:1px solid var(--border);}

/* Fixed-ratio window so mixed portrait/landscape photos still tile evenly. */
.gal-thumb-wrap{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  background:var(--bg3);
}
.gal-thumb{width:100%;height:100%;object-fit:cover;display:block;}

.gal-del{
  position:absolute;top:6px;right:6px;width:24px;height:24px;
  border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  font-size:16px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s,background .15s;
}
.gal-card:hover .gal-del{opacity:1;}
.gal-del:hover{background:var(--red);}

.gal-desc{
  width:100%;box-sizing:border-box;
  border:1px solid var(--border);border-radius:8px;padding:6px 9px;
  font-family:var(--font);font-size:12.1pt;color:var(--text);
  background:var(--bg);outline:none;transition:border-color .12s;
}
.gal-desc:focus{border-color:var(--gold);}

.gal-flags{display:flex;align-items:center;gap:16px;}
.gal-flag{
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  font-size:10.9pt;color:var(--text2);
}
.gal-flag input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer;margin:0;}

/* -- SLIDESHOW OVERLAY ---------------------------------------------------- */
/* Above everything: header is z-index 50, toasts sit lower still. Always dark
   regardless of theme — it is a photo viewer, a light frame would wash the
   pictures out. */
.slideshow-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:#000;
  align-items:center;justify-content:center;
}
.slideshow-overlay.visible{display:flex;}
body.slideshow-active{overflow:hidden;}

.slideshow-img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .6s ease;
}
.slideshow-img.loaded{opacity:1;}

/* Lower right, as specified. The shadow keeps it readable over a bright photo
   without putting a solid box on top of the picture. */
.slideshow-caption{
  position:absolute;right:34px;bottom:30px;max-width:60%;
  font-family:var(--serif);font-size:20px;line-height:1.35;color:#fff;
  text-align:right;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7);
  pointer-events:none;
}

.slideshow-close{
  position:absolute;top:20px;right:24px;width:38px;height:38px;
  border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.25;transition:opacity .2s,background .2s;
}
.slideshow-overlay:hover .slideshow-close{opacity:1;}
.slideshow-close:hover{background:rgba(255,255,255,.3);}

/* ── LINKS: category card headers (inline rename, 2026-09-06) ──────────────── */
/* The header itself is the affordance — click the name to rename the whole
   category. Hover tint rather than an edit icon, same pattern as the C&C
   weather tiles. C&C / Navbar render without .is-editable (they are wired into
   the dashboard banner and navbar dropdown) and show a 🔒 instead. */
.lk-cat-head{display:flex;align-items:center;gap:8px;min-height:32px;}
.lk-cat-view{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:2px 6px;margin-left:-6px;border-radius:8px;transition:background .15s;}
.lk-cat-view.is-editable{cursor:pointer;}
.lk-cat-view.is-editable:hover{background:var(--bg3);}
.lk-cat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lk-cat-count{color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0;font-size:11pt;}
.lk-cat-lock{font-size:11pt;opacity:.55;cursor:help;}
/* The head is uppercase + letter-spaced; the input must opt out of both. */
.lk-cat-edit{display:none;align-items:center;gap:6px;flex:1;min-width:0;}
.lk-cat-input{flex:1;min-width:0;font-size:12.1pt;font-weight:400;text-transform:none;letter-spacing:0;padding:4px 8px;}
.lk-cat-head.is-editing .lk-cat-view{display:none;}
.lk-cat-head.is-editing .lk-cat-edit{display:flex;}

/* ── LEARNING (learning.js, 2026-09-23) ───────────────────────────────────── */
/* Two views (2026-09-23 rework): OVERVIEW = summary card + a 3-per-row grid of
   path widgets (picture, name, ring chart, next step — picture or name opens
   the path); DETAIL = one path's header + steps, centred. Step states:
   is-done / is-next (the only completable one — strict order) / is-locked.
   All row text sets 12.1pt explicitly (body default is 14.5pt). */
.ln-title-icon{font-size:40px;line-height:1;}
.ln-summary{border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:16px 20px;margin-bottom:20px;}
[data-theme="dark"] .ln-summary{border-top:1px solid var(--border);}
.ln-summary-head{display:flex;justify-content:space-between;align-items:baseline;font-size:15.7pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:10px;}
.ln-summary-pct{color:var(--gold);font-size:20pt;}
.ln-summary-sub{font-size:12.1pt;color:var(--text3);margin-top:8px;}
.ln-bar{width:100%;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.ln-bar-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .4s;}
.ln-bar-fill.is-full{background:var(--green);}
.ln-path-title{font-size:15.7pt;font-weight:700;color:var(--text);}
.ln-path-desc{font-size:12.1pt;color:var(--text2);margin-top:2px;white-space:pre-line;}
.ln-done-badge{font-size:9.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--green);border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:middle;}
.ln-path-count{font-size:12.1pt;color:var(--text2);margin-top:4px;}
.ln-tools{display:flex;gap:2px;flex-shrink:0;}
.ln-tool{background:none;border:1px solid transparent;border-radius:6px;color:var(--text3);font-size:12.1pt;width:26px;height:26px;cursor:pointer;padding:0;}
.ln-tool:hover:not(:disabled){border-color:var(--border);color:var(--text);background:var(--bg);}
.ln-tool-del:hover:not(:disabled){color:var(--red);border-color:var(--red);}
.ln-tool:disabled{opacity:.25;cursor:default;}
/* Overview grid — Networld website-card layout (.fc-new-half cards, 3 per row,
   picture in a 40% column). Rows stay even via the grid's default stretch. */
.ln-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
.ln-widget{position:relative;min-height:0;gap:10px;}
.ln-widget.is-finished{border-top-color:var(--green);}
.ln-widget-tools{position:absolute;bottom:8px;right:10px;opacity:.35;transition:opacity .15s;}
.ln-widget:hover .ln-widget-tools{opacity:1;}
.ln-widget-row{display:flex;gap:16px;align-items:stretch;flex:1;min-height:0;}
.ln-widget-img{flex:0 0 40%;max-width:40%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ln-img{max-width:100%;max-height:250px;width:auto;height:auto;border-radius:8px;display:block;transition:filter .15s;}
.ln-widget-img:hover .ln-img{filter:brightness(1.08);}
.ln-img-empty{width:100%;aspect-ratio:1;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:44px;}
.ln-widget-body{flex:1;min-width:0;padding-bottom:24px;display:flex;flex-direction:column;gap:10px;}
.ln-widget-name{font-weight:800;font-size:19pt;line-height:1.15;color:var(--text);cursor:pointer;transition:color .15s;overflow-wrap:anywhere;}
.ln-widget-name:hover{color:var(--gold);}
.ln-widget-progress{display:flex;align-items:center;gap:12px;}
.ln-widget-count{font-size:12.1pt;color:var(--text2);line-height:1.3;}
.ln-widget-status{font-size:12.1pt;color:var(--text2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ln-w-next-label{font-weight:700;color:var(--text);}
.ln-w-finished{font-weight:700;color:var(--green);}
/* Progress ring (lnRing) — SVG arc over a track, % in the middle. */
.ln-ring{position:relative;flex-shrink:0;}
.ln-ring svg{display:block;}
.ln-ring-track{stroke:var(--bg3);}
.ln-ring-fill{stroke:var(--gold);transition:stroke-dashoffset .5s;}
.ln-ring.is-full .ln-ring-fill{stroke:var(--green);}
.ln-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text);}
/* Detail view — one path, centred on the page. */
.ln-detail{max-width:1000px;margin:0 auto;}
.ln-detail-nav{margin-bottom:12px;}
.ln-detail-head{display:flex;align-items:center;gap:18px;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:16px 20px;margin-bottom:14px;}
.ln-detail-head.is-finished{border-top-color:var(--green);}
.ln-detail-img{width:88px;height:88px;object-fit:contain;border-radius:8px;flex-shrink:0;}
.ln-detail-img.ln-img-empty{font-size:36px;}
.ln-detail-titles{flex:1;min-width:0;}
.ln-detail-head .ln-tools{align-self:flex-start;}
/* Path dialog — picture field */
.ln-pic-row{display:flex;align-items:center;gap:12px;}
.ln-pic-thumb{width:56px;height:56px;object-fit:contain;border-radius:6px;background:var(--bg3);flex-shrink:0;}
.ln-pic-remove{display:flex;align-items:center;gap:6px;font-size:12.1pt;color:var(--text2);margin-top:6px;cursor:pointer;}
.ln-pic-remove input{accent-color:var(--gold);}
.ln-steps{border:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:6px 20px 14px;}
.ln-step-item{border-bottom:1px solid var(--border);}
.ln-step{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.1pt;}
/* Step notes (2026-09-23): indented to line up with the step title (24px num + 2×10px gap + ~22px kind icon). */
.ln-note-view{margin:0 0 10px 68px;padding:6px 10px;border-left:3px solid var(--gold);background:var(--bg);border-radius:0 8px 8px 0;font-size:12.1pt;color:var(--text2);white-space:pre-wrap;cursor:pointer;transition:background .15s;}
.ln-note-view:hover{background:var(--bg3);}
.ln-note-edit{margin:0 0 10px 68px;}
.ln-note-input{width:100%;box-sizing:border-box;font-size:12.1pt;resize:vertical;}
.ln-note-status{font-size:10.5pt;color:var(--text3);margin-top:3px;}
.ln-tool.has-note{opacity:1;filter:none;}
.ln-tool[data-note-toggle]:not(.has-note){filter:grayscale(1);opacity:.5;}
.ln-step-num{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10.5pt;font-weight:700;border:1px solid var(--border);color:var(--text3);}
.ln-step.is-done .ln-step-num{background:var(--green);border-color:var(--green);color:#fff;}
.ln-step.is-next .ln-step-num{border-color:var(--gold);color:var(--gold);}
.ln-step-kind{flex-shrink:0;}
.ln-step-main{flex:1;min-width:0;}
.ln-step-title{font-size:12.1pt;color:var(--text);text-decoration:none;font-weight:600;}
.ln-step-title:hover{color:var(--gold);text-decoration:underline;}
.ln-step.is-done .ln-step-title{color:var(--text2);font-weight:400;}
.ln-step-meta{font-size:10.5pt;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ln-step-date{font-size:10.5pt;color:var(--green);flex-shrink:0;}
.ln-step-action{flex-shrink:0;min-width:92px;text-align:right;}
.ln-lock{opacity:.45;cursor:help;}
.ln-empty{font-size:12.1pt;color:var(--text3);font-style:italic;padding:10px 0;}
.ln-add-row{padding-top:12px;}
.ln-kind-pick{display:flex;gap:22px;font-size:12.1pt;}
.ln-kind-pick label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.ln-kind-pick input{accent-color:var(--gold);}
@media (max-width:1100px){.ln-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:760px){.ln-grid{grid-template-columns:1fr;}.ln-detail-head{flex-wrap:wrap;}.ln-step{flex-wrap:wrap;}.ln-note-view,.ln-note-edit{margin-left:0;}}

/* ── ADMIN → STYLE GUIDE (2026-09-27) ───────────────────────────────────────────
   Content styles for assets/js/styleguide.js (the Brand Guide inside the app).
   The page LAYOUT reuses the Learning classes (.ln-summary / .ln-grid / .ln-widget /
   .ln-detail) so it has the same dimensions; only the guide's content is styled here.
   Components on that page use the app's real classes (.btn, .dl-tab, .modal …). */
.sg-lede{font-size:12.1pt;color:var(--text);max-width:95ch;margin:0;}
/* Card picture: same square as Learning's picture placeholder */
.sg-prev{width:100%;aspect-ratio:1;background:var(--bg3);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:filter .15s;}
.ln-widget-img:hover .sg-prev{filter:brightness(1.05);}
.sg-prev img{max-width:78%;max-height:78%;}
.sg-prev-sm{width:88px;height:88px;flex-shrink:0;}
.sg-prev-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:66%;}
.sg-prev-dots i{display:block;aspect-ratio:1;border-radius:50%;border:1px solid var(--border);}
.sg-prev-night{width:100%;height:100%;background:#0b0e17 url(/assets/carmenone_stars_background.jpg) center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.sg-prev-night img{width:45%;max-width:45%;}
/* Section content */
.sg-body code,.sg-lede code{font-family:Consolas,'Cascadia Mono',monospace;font-size:.86em;background:var(--bg3);padding:1px 5px;border-radius:4px;}
.sg-intro{max-width:70ch;margin:0 0 16px;}
.sg-sub{font-family:var(--serif);font-weight:400;font-size:18.2px;margin:22px 0 10px;}
.sg-rules{list-style:none;display:grid;gap:8px;max-width:78ch;margin:0;padding:0;}
.sg-rules li{font-size:12.8pt;padding-left:18px;position:relative;}
.sg-rules li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold);}
.sg-stage + .sg-rules li{font-size:11.6pt;}
.sg-tile{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;}
[data-theme="dark"] .sg-tile{border-top:1px solid var(--border);}
.sg-tile-head{font-size:13pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;}
.sg-grid{display:grid;gap:24px;}
.sg-g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));}
.sg-g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.sg-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px;}
.sg-pillars p{font-size:12.1pt;color:var(--text2);margin:0;}
.sg-note{font-size:11.6pt;color:var(--text2);margin:10px 0 0;}
/* Logo */
.sg-logo-card{display:flex;flex-direction:column;gap:12px;}
.sg-logo-stage{border-radius:10px;min-height:180px;display:flex;align-items:center;justify-content:center;padding:24px;}
.sg-logo-stage img{max-height:150px;max-width:100%;}
.sg-cap{font-size:12.1pt;}
.sg-cap b{display:block;font-size:11pt;letter-spacing:.05em;text-transform:uppercase;}
.sg-cap span{color:var(--text2);}
.sg-dont{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px;margin-top:18px;}
.sg-dont figure{margin:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;}
.sg-dont-box{height:90px;display:flex;align-items:center;justify-content:center;}
.sg-dont img{height:70px;}
.sg-dont figcaption{font-size:11pt;color:var(--text2);text-align:center;}
.sg-dont figcaption b{color:var(--red);letter-spacing:.05em;text-transform:uppercase;font-size:10.5pt;display:block;}
/* Colour */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:18px;}
.sg-sw{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.sg-sw-chip{height:78px;display:flex;align-items:flex-end;justify-content:flex-end;padding:8px 10px;font-size:10.5pt;font-weight:700;}
.sg-sw-pair{display:flex;height:78px;}
.sg-sw-pair div{flex:1;display:flex;align-items:flex-end;padding:8px 10px;font-size:10pt;font-weight:700;}
.sg-sw-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;}
.sg-sw-name{font-weight:700;font-size:12.1pt;display:flex;justify-content:space-between;gap:8px;}
.sg-sw-name code{font-weight:400;}
.sg-sw-hex{font-family:Consolas,monospace;font-size:10.5pt;color:var(--text2);font-variant-numeric:tabular-nums;}
.sg-sw-use{font-size:11pt;color:var(--text2);}
.sg-stage{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:16px;background:var(--bg);border-radius:10px;border:1px dashed var(--border);margin-bottom:12px;}
.sg-loc-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-weight:600;font-size:11.5pt;}
.sg-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg2);}
.sg-table{border-collapse:collapse;width:100%;font-size:12.1pt;}
.sg-table th,.sg-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;}
.sg-table th{font-size:10.5pt;letter-spacing:.05em;text-transform:uppercase;color:var(--text2);background:var(--bg3);white-space:nowrap;}
.sg-table tr:last-child td{border-bottom:none;}
.sg-num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.sg-ok{color:var(--green);font-weight:700;}
.sg-warn{color:var(--red);font-weight:700;}
[data-theme="dark"] .sg-ok{color:#6ab880;}
[data-theme="dark"] .sg-warn{color:#f08a7e;}
.sg-demo-sample{display:inline-block;padding:2px 10px;border-radius:6px;font-weight:700;font-size:11pt;}
.sg-table + .sg-rules,.sg-table-wrap + .sg-rules{margin-top:16px;}
/* Typography */
.sg-faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;margin-bottom:18px;}
.sg-big{font-size:64px;line-height:1;margin:6px 0 10px;}
.sg-abc{font-size:15pt;word-break:break-all;color:var(--text2);}
.sg-spec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--border);align-items:baseline;}
.sg-spec:last-child{border-bottom:none;}
.sg-spec-lab{font-size:10.5pt;color:var(--text2);letter-spacing:.04em;}
.sg-spec-lab b{display:block;color:var(--text);font-size:11pt;letter-spacing:.05em;text-transform:uppercase;}
.sg-spec-sample{overflow-wrap:anywhere;}
/* Layout & shape */
.sg-scale{display:flex;flex-direction:column;gap:10px;}
.sg-scale-row{display:grid;grid-template-columns:110px 60px minmax(0,1fr);gap:12px;align-items:center;font-size:12.1pt;}
.sg-scale-row code{justify-self:start;}
.sg-scale-bar{height:14px;background:var(--gold);border-radius:3px;}
.sg-radii{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;}
.sg-radii figure{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center;font-size:11pt;text-align:center;}
.sg-radii figcaption span{display:block;color:var(--text2);}
.sg-radius-shape{width:90px;height:64px;background:var(--bg2);border:2px solid var(--gold);}
.sg-shell{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);font-size:10.5pt;}
.sg-shell-h{height:34px;background:var(--dark);border-bottom:3px solid var(--gold);color:#D9DCDF;display:flex;align-items:center;padding:0 12px;letter-spacing:.05em;}
.sg-shell-m{padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sg-shell-m div{height:60px;background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:8px;}
.sg-shell-f{height:24px;background:var(--dark);border-top:3px solid var(--gold);color:#7C7D7F;display:flex;align-items:center;padding:0 12px;letter-spacing:.05em;}
.sg-shell-note{padding:0 14px 12px;color:var(--text2);}
.sg-shell-mini{width:80%;}
.sg-shell-mini .sg-shell-h{height:12px;border-bottom-width:2px;}
.sg-shell-mini .sg-shell-m{padding:6px;gap:4px;}
.sg-shell-mini .sg-shell-m div{height:24px;border-top-width:2px;border-radius:3px;}
.sg-shell-mini .sg-shell-f{height:9px;border-top-width:2px;}
/* Components (real app classes, tamed for display inside a stage) */
.sg-stage .toast{position:static;opacity:1;transform:none;pointer-events:auto;}
.sg-stage-title{width:100%;margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.sg-full{grid-column:1/-1;}
.sg-stage-modal{width:100%;max-width:420px;border:1px solid var(--border);border-top:3px solid var(--gold);}
.sg-mini-header{width:100%;height:52px;background:var(--dark);border-bottom:3px solid var(--gold);display:flex;align-items:stretch;border-radius:8px 8px 0 0;overflow:hidden;}
.sg-mh-logo{display:flex;align-items:center;padding:0 14px;border-right:1px solid #4a4f56;}
.sg-mh-logo img{height:30px;}
.sg-mh-item{display:flex;align-items:center;padding:0 12px;font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#D9DCDF;border-right:1px solid #4a4f56;white-space:nowrap;}
.sg-mh-item.active{background:var(--gold);color:#373B41;}
.sg-mini-sub{display:inline-flex;flex-wrap:wrap;background:var(--dark);border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.28);padding:5px 2px;margin-top:6px;}
.sg-mini-sub span{padding:5px 15px;font-size:12px;font-family:var(--serif);letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#D9DCDF;}
.sg-mini-sub span + span{border-left:1px solid #1a6fc4;}
.sg-mini-sub span.active{color:var(--gold);}
.sg-mini-footer{width:100%;height:36px;background:var(--dark);border-top:3px solid var(--gold);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:10.9pt;color:#7C7D7F;letter-spacing:.06em;gap:10px;}
.sg-mini-footer .slideshow-btn,.sg-mini-footer .radio-btn{cursor:default;}
/* Voice */
.sg-quotes{display:grid;gap:10px;}
.sg-q{display:flex;gap:12px;align-items:flex-start;font-size:12.1pt;}
.sg-q-tag{flex:0 0 auto;font-size:9.7pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:20px;}
.sg-q-tag.y{background:#E6F4EA;color:#1A7A3A;}
.sg-q-tag.n{background:var(--red-l);color:var(--red-d);}
/* Imagery */
.sg-night-demo{border-radius:16px;overflow:hidden;min-height:220px;background:#0b0e17 url(/assets/carmenone_stars_background.jpg) center/cover no-repeat;position:relative;display:flex;align-items:flex-end;padding:18px;}
.sg-moon{position:absolute;top:20px;right:24px;width:85px;height:85px;}
.sg-night-card{background:#131826;border:1px solid #232a36;border-radius:16px;padding:14px 18px;color:#e8e9ec;font-size:12.1pt;max-width:280px;}
.sg-night-card b{display:block;font-size:12pt;letter-spacing:.05em;text-transform:uppercase;}
@media (max-width:760px){.sg-spec{grid-template-columns:1fr;}}
@media (max-width:560px){.sg-hide-sm{display:none!important;}}

/* ── MCP WIKI (Knowledge → MCP Wiki, assets/js/mcpwiki.js) ── read-only wiki browser.
   Explicit font-sizes everywhere on purpose: body is 14.5pt, list/row text is 12.1pt. */
.mw-layout{display:grid;grid-template-columns:450px minmax(0,1fr);gap:22px;align-items:start;}   /* shared with Aurora; sidebar 300 → 450 on 2026-10-18 */
.mw-side{position:sticky;top:12px;max-height:calc(100vh - var(--header-h) - var(--footer-h) - 40px);overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:10px;}
.mw-spaces{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--border);}
.mw-space{font-size:11pt;padding:3px 10px;border-radius:12px;background:var(--bg3);color:var(--text);cursor:pointer;user-select:none;}
.mw-space:hover{color:var(--gold-d);}
.mw-space.active{background:var(--gold);color:#fff;}
.mw-count{font-size:9.5pt;opacity:.75;margin-left:2px;}
.mw-pages{display:flex;flex-direction:column;}
.mw-page-link{display:block;font-size:12.1pt;color:var(--text);text-decoration:none;padding:4px 8px;border-radius:5px;line-height:1.3;}
.mw-page-link:hover{background:var(--bg3);}
.mw-page-link.active{background:var(--gold-l);color:var(--gold-d);font-weight:600;}
[data-theme="dark"] .mw-page-link.active{background:var(--bg3);color:var(--gold);}
.mw-side-head{font-size:10.5pt;color:var(--text3);padding:2px 8px 6px;}
.mw-hit-space{font-size:9.5pt;color:var(--text3);padding:0 8px 4px;margin-top:-3px;}
.mw-empty{font-size:12.1pt;color:var(--text3);padding:12px 8px;}
.mw-main{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 26px 22px;min-width:0;}
/* gold top line + 16px corners like .admin-tile / .fc-new-half (2026-10-24); dark drops the line like they do */
[data-theme="dark"] .mw-side, [data-theme="dark"] .mw-main{border-top:1px solid var(--border);}
.mw-crumb{font-size:10.5pt;color:var(--text3);font-family:Consolas,monospace;}
.mw-title{font-family:var(--serif);font-size:22pt;font-weight:700;color:var(--text);margin:4px 0 6px;}
.mw-summary{font-size:12.1pt;color:var(--text2);font-style:italic;margin-bottom:6px;}
.mw-meta{font-size:10.5pt;color:var(--text3);padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid var(--gold);}
.mw-old{font-size:12.1pt;background:var(--gold-l);color:var(--gold-d);border-radius:6px;padding:8px 12px;margin-bottom:12px;}
[data-theme="dark"] .mw-old{background:var(--bg3);color:var(--gold);}
.mw-body{font-size:12.1pt;line-height:1.55;color:var(--text);overflow-wrap:anywhere;}
.mw-body p{margin:0 0 10px;}
.mw-body .mw-h{font-family:var(--serif);color:var(--text);margin:18px 0 8px;line-height:1.25;}
.mw-body h2.mw-h{font-size:17pt;} .mw-body h3.mw-h{font-size:14.5pt;} .mw-body h4.mw-h,.mw-body h5.mw-h,.mw-body h6.mw-h{font-size:12.1pt;}
.mw-body hr{border:none;border-top:1px solid var(--border);margin:16px 0;}
.mw-list{margin:0 0 10px;padding-left:22px;} .mw-list .mw-list{margin:3px 0 3px;}
.mw-list li{margin:2px 0;font-size:12.1pt;}
.mw-code{font-family:Consolas,monospace;font-size:10.5pt;background:var(--bg3);border-radius:3px;padding:1px 4px;}
.mw-pre{font-family:Consolas,monospace;font-size:10.5pt;background:var(--bg3);border-radius:6px;padding:10px 12px;overflow-x:auto;margin:0 0 12px;line-height:1.4;}
.mw-pre code{white-space:pre;}
.mw-quote{border-left:3px solid var(--gold);margin:0 0 12px;padding:4px 12px;background:var(--bg);color:var(--text2);}
.mw-table-wrap{overflow-x:auto;margin:0 0 12px;}
.mw-table{border-collapse:collapse;font-size:11.5pt;}
.mw-table th,.mw-table td{border:1px solid var(--border);padding:5px 9px;vertical-align:top;text-align:left;}
.mw-table th{background:var(--bg3);font-weight:600;}
.mw-link{color:#1a6fc4;text-decoration:none;border-bottom:1px dotted #1a6fc4;}
.mw-link:hover{border-bottom-style:solid;}
.mw-ext{color:#1a6fc4;}
.mw-wanted{color:var(--red);border-bottom:1px dashed var(--red);cursor:help;font-size:inherit;}
.mw-dim{color:var(--text3);font-size:10.5pt;}
.mw-nowrap{white-space:nowrap;}
.mw-badge{display:inline-block;font-size:9.5pt;font-weight:600;padding:0 6px;border-radius:8px;background:var(--bg3);color:var(--text2);vertical-align:middle;font-family:var(--font);font-style:normal;}
.mw-draft{background:var(--gold-l);color:var(--gold-d);} .mw-discarded,.mw-archived{background:var(--red-l);color:var(--red-d);}
.mw-foot{margin-top:22px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}
.mw-foot-head{font-size:10.5pt;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.mw-chips{display:flex;flex-wrap:wrap;gap:4px 10px;}
.mw-chips .mw-page-link,.mw-chips .mw-wanted{display:inline-block;padding:1px 6px;font-size:11pt;}
.mw-history summary{font-size:11pt;color:var(--text2);cursor:pointer;}
.mw-history table,.mw-recent{border-collapse:collapse;margin-top:6px;font-size:11pt;width:100%;}
.mw-history td,.mw-recent td{padding:4px 8px;border-bottom:1px solid var(--border);vertical-align:top;font-size:11pt;}
.mw-history a{color:#1a6fc4;text-decoration:none;font-size:11pt;}
.mw-hist-cur td{background:var(--gold-l);} [data-theme="dark"] .mw-hist-cur td{background:var(--bg3);}
@media (max-width:820px){
  .mw-layout{grid-template-columns:1fr;}
  .mw-side{position:static;max-height:260px;}
  .mw-main{padding:14px 14px 18px;}
}

/* ── Hover utilities (CSP stage 2, 2026-09-30) ─────────────────────────────── */
/* Replace the old onmouseover/onmouseout="this.style..." handlers, which the CSP  */
/* (no script-src 'unsafe-inline') no longer runs. !important because the base  */
/* value still sits in the element's inline style="" and would otherwise win.       */
.hov-ul:hover{text-decoration:underline!important;}
.hov-gold:hover{color:var(--gold)!important;}
.hov-bg3:hover{background:var(--bg3)!important;}
.hov-lift:hover{box-shadow:0 4px 16px rgba(0,0,0,.10)!important;transform:translateY(-2px)!important;}
.hov-dim:hover{opacity:.8!important;}
.hov-opaque:hover{opacity:1!important;}

/* ── Aurora (Knowledge → Aurora, assets/js/aurora.js) ──
   A page of the app since 2026-10-17 (was the separate aurora/assets/aurora.css).
   Builds on the MCP Wiki look (.mw-* above) and adds the outline tree, the editor,
   review notes and modals. Style tokens only, so night mode just works.
   Explicit font-size on every text rule (else it inherits the 14.5pt body default). */
#au-new-btn{white-space:nowrap;}
.au-stats{font-family:var(--font);font-size:11pt;font-weight:400;color:var(--text3);margin-left:6px;}
.au-nav-count{display:inline-block;min-width:18px;font-size:9.5pt;font-weight:700;line-height:18px;text-align:center;
  padding:0 5px;border-radius:9px;background:var(--red);color:#fff;vertical-align:middle;}
.au-nav-count:empty{display:none;}

/* ── Outline tree ── */
.au-tree{display:flex;flex-direction:column;}
.au-node{display:flex;align-items:flex-start;}
.au-twisty{flex:0 0 16px;width:16px;font-size:10pt;line-height:24px;text-align:center;color:var(--text3);text-decoration:none;user-select:none;}
a.au-twisty:hover{color:var(--gold-d);}
.au-node-link{flex:1;min-width:0;}
.au-d0 > .au-node-link{font-weight:600;}
.au-num{font-size:10.5pt;color:var(--text3);margin-right:6px;font-variant-numeric:tabular-nums;}
.mw-page-link.active .au-num{color:inherit;}
.au-retired{text-decoration:line-through;opacity:.6;}
.au-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);vertical-align:middle;margin-left:3px;}
.au-hit{font-size:10pt;color:var(--text3);font-weight:400;margin-top:1px;}

/* ── Page ── */
.au-crumb a{color:var(--text3);text-decoration:none;font-size:10.5pt;}
.au-crumb a:hover{color:var(--gold-d);text-decoration:underline;}
.au-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.au-title-num{color:var(--gold-d);margin-right:12px;}
[data-theme="dark"] .au-title-num{color:var(--gold);}
.au-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.au-actions .btn{font-size:10.5pt;padding:4px 10px;}
.au-tag{display:inline-block;font-size:9.5pt;padding:0 7px;border-radius:8px;background:var(--bg3);color:var(--text2);margin-right:3px;}
.au-wrapper .mw-retired{background:var(--red-l);color:var(--red-d);}
.au-children{margin:18px 0 6px;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;}
.au-child{font-size:12.1pt;padding:3px 0;}
.au-child .mw-dim{font-size:10.5pt;}
.au-prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:22px;padding-top:12px;border-top:1px solid var(--border);}
.au-prevnext a{font-size:11pt;color:#1a6fc4;text-decoration:none;max-width:48%;}
.au-prevnext a:hover{text-decoration:underline;}
.au-empty-start p{font-size:12.1pt;color:var(--text2);max-width:620px;margin:6px 0 16px;line-height:1.5;}

/* ── Editor ── */
.au-form{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.au-l{display:flex;flex-direction:column;gap:3px;font-size:11pt;color:var(--text2);font-weight:600;flex:1;}
.au-l .mw-dim{font-weight:400;}
.au-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.au-check,.au-radio{display:flex;align-items:center;gap:6px;font-size:11.5pt;color:var(--text);padding:4px 0;}
.au-field{font-family:var(--font);font-size:12.1pt;color:var(--text);background:var(--bg);border:1px solid var(--border);
  border-radius:6px;padding:6px 9px;width:100%;box-sizing:border-box;}
.au-field:focus{outline:none;border-color:var(--gold);}
.au-title-in{font-family:var(--serif);font-size:15pt;font-weight:700;}
select.au-field{width:auto;}
.au-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.au-hint{font-size:10pt;margin-left:8px;}
.au-hint .mw-code{font-size:9.5pt;}
.au-editor{font-family:Consolas,monospace;font-size:11pt;line-height:1.5;min-height:60vh;resize:vertical;tab-size:4;}
.au-preview{border:1px dashed var(--border);border-radius:6px;padding:12px 16px;background:var(--bg);}
.au-form-actions{display:flex;align-items:center;gap:10px;}

/* ── Review notes ── */
.au-notes{margin-top:18px;}
.au-notes-box > summary{font-size:12.1pt;font-weight:600;color:var(--text);cursor:pointer;margin-bottom:6px;}
.au-note{border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:6px;padding:7px 12px;margin:6px 0;background:var(--bg);}
.au-note-resolved,.au-note-wontfix{border-left-color:var(--border);opacity:.7;}
.au-note-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5pt;}
.au-note-head .mw-link{font-size:11pt;}
.au-note-acts{margin-left:auto;font-size:10.5pt;}
.au-note-acts a{color:#1a6fc4;text-decoration:none;font-size:10.5pt;}
.au-note-acts a:hover{text-decoration:underline;}
.au-note-body{margin-top:4px;}
.au-note-body p:last-child{margin-bottom:0;}
.au-kind{font-size:9.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 7px;border-radius:8px;background:var(--bg3);color:var(--text2);}
.au-kind-inconsistency{background:var(--red-l);color:var(--red-d);}
.au-kind-question{background:#dbe9f7;color:#1a5a9c;}
.au-kind-todo{background:var(--gold-l);color:var(--gold-d);}
.au-kind-idea{background:#e3f1df;color:#3d6b2f;}
[data-theme="dark"] .au-kind-question,[data-theme="dark"] .au-kind-idea{background:var(--bg3);color:var(--text);}
.au-note-form{display:flex;gap:8px;align-items:flex-start;margin-top:8px;}
.au-note-form select{flex:0 0 auto;}
.au-note-form textarea{flex:1;font-size:11.5pt;resize:vertical;}
.au-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.au-sep{width:1px;height:20px;background:var(--border);margin:0 6px;}

/* ── Modal ── */
.au-modal{background:var(--bg2);border-top:3px solid var(--gold);border-radius:12px;padding:22px 26px;width:min(520px,92vw);
  max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25);}
[data-theme="dark"] .au-modal{border-top:1px solid var(--border);}
.au-modal h3{font-family:var(--serif);font-size:17pt;font-weight:700;color:var(--text);margin:0 0 12px;}
.au-modal-body{display:flex;flex-direction:column;gap:8px;}
.au-modal-body p{font-size:12.1pt;color:var(--text2);line-height:1.5;margin:0 0 6px;}
.au-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}

@media (max-width:820px){
  .au-wrapper .mw-layout{grid-template-columns:1fr;}
  .au-hint{display:none;}
  .au-note-form{flex-direction:column;}
}

/* ── MATRIX SKIN ───────────────────────────────────────────────────────────
   Component tweaks on top of the :root[data-skin="matrix"] tokens near the top.
   Only colours, glow and font — no layout changes, so every page keeps working.
   Hardcoded hex colours elsewhere in this file / the JS still show through until
   they are moved onto tokens (page by page). */
[data-skin="matrix"] body.cc-page{background-image:none;}
[data-skin="matrix"] ::selection{background:var(--gold);color:#000;}
[data-skin="matrix"] *{scrollbar-color:var(--border) var(--bg);}
[data-skin="matrix"] input,
[data-skin="matrix"] select,
[data-skin="matrix"] textarea,
[data-skin="matrix"] button{font-family:var(--font);}
/* Dark-only: the night toggle has nothing to switch while the skin is on. */
[data-skin="matrix"] .theme-toggle-btn{display:none;}

/* Header + nav */
[data-skin="matrix"] header{background:var(--bg2);border-bottom:1px solid var(--gold-d);}
[data-skin="matrix"] .header-logo{border-right-color:var(--border);color:var(--gold);}
[data-skin="matrix"] .nav-item{color:var(--text2);border-right-color:var(--border);font-weight:400;}
[data-skin="matrix"] .nav-item:hover,
[data-skin="matrix"] .nav-parent:focus-visible{background:var(--bg3);color:var(--gold);}
[data-skin="matrix"] .nav-item.active{background:transparent;color:var(--gold);border-bottom:2px solid var(--gold);text-shadow:var(--glow);}
[data-skin="matrix"] .nav-submenu{border:1px solid var(--border);border-top:3px solid transparent;}
[data-skin="matrix"] .nav-sub-item{color:var(--text2);font-weight:400;}
[data-skin="matrix"] .nav-sub-item + .nav-sub-item{border-left-color:var(--border);}
[data-skin="matrix"] .nav-sub-item:hover{color:var(--gold);}
[data-skin="matrix"] .nav-sub-item.active{color:var(--gold);text-shadow:var(--glow);}

/* Footer */
[data-skin="matrix"] footer{background:var(--bg2);border-top:1px solid var(--border);color:var(--text3);}
[data-skin="matrix"] .footer-brand span{text-shadow:var(--glow);}

/* Titles glow green */
[data-skin="matrix"] .page-title{color:var(--gold);text-shadow:var(--glow);border-bottom-color:var(--gold-d);}
[data-skin="matrix"] .fc-half-head,
[data-skin="matrix"] .news-tile-head,
[data-skin="matrix"] .admin-tile-title{color:var(--gold);text-shadow:var(--glow);}

/* Buttons: black text on green (white on #00ff41 is unreadable) */
[data-skin="matrix"] .btn:not(.btn-secondary):not(.btn-ghost),
[data-skin="matrix"] .btn:not(.btn-secondary):not(.btn-ghost):hover{color:#000;}
[data-skin="matrix"] .btn:hover{box-shadow:var(--glow);}
[data-skin="matrix"] .btn-danger{color:#000!important;}
/* Active pills that hardcode white text on the accent */
[data-skin="matrix"] .td-filter-btn.active,
[data-skin="matrix"] .mw-space.active,
[data-skin="matrix"] .sg-mh-item.active{color:#000;}

/* Digital rain behind C&C — canvas added by core.js updateMatrixRain().
   z-index -1 paints it above the page background but below everything else;
   C&C's <main> is already transparent in dark mode. */
#matrix-rain{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;}