:root{
  /* Candlelit Night palette — from the reference photo:
     deep midnight navy sky, warm cream candle wax, star gold,
     forest pine green, and natural wood brown */
  --bg:#F5EEDB; --surface:#FFFCF0; --surface2:#EDE3C8; --ink:#13233C; --muted:#5E6B7E; --line:#D8C9A3;
  --black:#0B1D38; --sage:#2F4D2E; --sage-soft:#DDE8D3;
  --teal:#13233C; --teal2:#0B1D38; --teal-soft:#E9DFC2; --gold:#8A6314; --gold-soft:#F3E8C3; --brass:#D9A94E;
  /* Three new accents (Nov 6): terracotta clay, cranberry, glacier blue */
  --terra:#B0511F; --terra-soft:#F7DFCE;
  --berry:#96354E; --berry-soft:#F4DCE3;
  --sky:#2C6383; --sky-soft:#D9E9F0;
  /* Four MORE accents (Nov 6, v10) — still not enough color, so: plum,
     jade, cobalt, and olive join the palette and get used everywhere */
  --plum:#7A3FA0; --plum-soft:#EBDFF7;
  --jade:#0E7A67; --jade-soft:#D2EEE7;
  --cobalt:#2E4FA3; --cobalt-soft:#DCE4F7;
  --olive:#5F7A0A; --olive-soft:#E6EDC8;
  /* Chip text shades — dark enough to read on the pale oval tints (AA for 11px labels) */
  --gold-tx:#6B4A06; --sage-tx:#1E3A1C; --terra-tx:#7A3410; --berry-tx:#6E1F36; --sky-tx:#17455E; --neutral-tx:#3D4756;
  --plum-tx:#4E2570; --jade-tx:#084F42; --cobalt-tx:#1D3570; --olive-tx:#3D5206;
  /* Completed items — neutral grey-out treatment */
  --done-bg:#E4E4E0; --done-line:#B4B4AC; --done-ink:#3F444A; --done-muted:#565C63; --done-chip-bg:#C9CCC6; --done-chip-tx:#33383E;
  --radius:6px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0B1D38; --surface:#152A4A; --surface2:#1D365E; --ink:#F5EEDB; --muted:#A9B4C4; --line:#2E4A6E; --black:#050F1F; --sage:#8BB486; --sage-soft:#1E3322; --teal:#F5EEDB; --teal2:#FFFCF0; --teal-soft:#1D365E; --gold:#E2B95A; --gold-soft:#2C2410; --brass:#EBC979; --terra:#E8935F; --terra-soft:#3B2413; --berry:#E58CA4; --berry-soft:#3A1F2A; --sky:#8FC0DA; --sky-soft:#1C3547; --plum:#C9A6EC; --plum-soft:#2E1F45; --jade:#7ED3BC; --jade-soft:#14362F; --cobalt:#9AB0F0; --cobalt-soft:#1E2A4A; --olive:#C8D97A; --olive-soft:#2E3512; --gold-tx:#F0CD78; --sage-tx:#B9D6A9; --terra-tx:#F5B183; --berry-tx:#F2A9BC; --sky-tx:#BFE0F0; --plum-tx:#DECDF7; --jade-tx:#AEE8D8; --cobalt-tx:#C2D0F8; --olive-tx:#E0EBB0; --neutral-tx:#D6DCE6; --done-bg:#272E35; --done-line:#49525B; --done-ink:#C3C9CF; --done-muted:#9AA3AD; --done-chip-bg:#39424A; --done-chip-tx:#E4E9EE; }
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;line-height:1.5}
a{color:inherit}
.wrap{max-width:none;margin:0 auto;padding:20px 18px 56px}
.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(44px,6vw,68px);line-height:1.0;letter-spacing:-.01em;font-weight:600;margin:6px 0 10px}
h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;color:var(--gold);font-size:1.05em;letter-spacing:0}
.lede{font-size:16.5px;color:var(--muted);max-width:680px;margin:0}
.hero-head{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;align-items:end;margin:18px 0 20px}
@media(max-width:760px){.hero-head{grid-template-columns:1fr}}
.meta-card{background:var(--black);color:#F5EEDB;border-radius:6px;padding:22px;border:1px solid #2E4A6E;box-shadow:inset 0 0 0 4px var(--black),inset 0 0 0 5px #8A6D2B}
@media(prefers-color-scheme:dark){.meta-card{background:#050F1F;border:1px solid #2E4A6E}}
.meta-card b{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.meta-card p{margin:6px 0 0;font-size:14.5px;line-height:1.55;opacity:.95}
.meta-card strong{color:var(--brass)}
/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);padding:6px;border-radius:999px;width:fit-content;margin:22px 0 18px}
.tabs button{border:0;background:transparent;padding:10px 16px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.stage{display:none}.stage.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stage.active{animation:none}}
/* Browser frame */
.browser{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:clip;box-shadow:0 24px 50px rgba(11,29,56,.16)}
.browser-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.circles{display:flex;gap:6px}.circles i{width:10px;height:10px;border-radius:50%;background:#D8C9A3;display:block}
.url{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--neutral-tx);text-align:center}
/* === LOGO — Kevin's actual Instagram mark =================================
   His real profile badge, used as supplied: a circular black disc inside a
   silver ring — "THE" in small serif caps over the stacked white brush
   script "Intentional / Doc", with the dark atomic graphic behind the words.
   ring). Every placement is the same <img class="tid-logo">; to swap in a
   newer logo file later, Kevin just replaces that one file. */
.tid-logo{display:block;border-radius:50%;flex-shrink:0}
.tid-logo--side{width:148px;height:148px;margin:2px auto 4px}
.tid-logo--hero{width:172px;height:172px;margin:12px auto 6px}
.tid-logo--pwa{width:104px;height:104px}
.tid-pwa-band{background:#050505;display:flex;justify-content:center;padding:14px 12px 12px}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:820px){.people-grid{grid-template-columns:1fr}}
.person{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px}
.person .avatar{width:36px;height:46px;border-radius:50%;background:var(--black);color:var(--brass);display:grid;place-items:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;font-weight:600;margin-bottom:8px;border:1px solid var(--gold)}
.person h4{margin:0 0 2px;font-size:15px}.person .role{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-tx)}
.person p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
/* Dashboard */
.dash{display:grid;grid-template-columns:220px 1fr;min-height:620px}
@media(max-width:820px){.dash{grid-template-columns:1fr}.sidebar{display:none}}
/* Sidebar (Nov 7, 2026): sticky so it stays locked while the content
   scrolls, and height:100vh so its background and right border extend
   all the way down the viewport instead of ending after the nav items.
   A long sidebar scrolls internally. Sticky needs the .browser ancestor
   to use overflow:clip, not hidden — overflow:hidden breaks sticky.
   Mobile (max-width 820px) still hides it. */
.sidebar{border-right:1px solid var(--line);padding:18px 14px;background:var(--surface2);position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.side-item{padding:9px 10px;border-radius:6px;font-size:14px;font-weight:600;color:var(--neutral-tx);margin-bottom:2px}
.side-item.active{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
/* min-width:0 (Nov 7, 2026): a grid item's automatic minimum is its
   content's min-content width, so a wide child (the swimlane track)
   blew .main out to ~2890px on a phone instead of letting the track
   scroll internally. With min-width:0 the 1fr track constrains .main
   to the available width. */
.main{padding:20px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px}.kpi b{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:600;display:block;line-height:1}.kpi span{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.progress{height:4px;background:var(--surface2);border-radius:999px;overflow:hidden;margin-top:10px}.progress i{display:block;height:100%;width:33%;background:var(--gold)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}@media(max-width:820px){.two{grid-template-columns:1fr}}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checklist li{display:flex;flex-wrap:wrap;gap:12px;padding:13px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.badge{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800}
.done{background:var(--teal-soft);color:var(--teal)} .next{background:var(--gold-soft);color:var(--gold-tx);border:1px solid var(--gold-tx)} .wait{background:var(--surface2);color:var(--neutral-tx)}
.tag{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;height:26px;line-height:1;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--surface2);color:var(--neutral-tx)}
.pipeline{list-style:none;margin:0;padding:0;display:grid;gap:10px}.pipeline li{padding:12px;border:1px solid var(--line);border-radius:6px}
.pipeline b{font-size:14.5px}.pipeline p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:14px}.table th{text-align:left;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 6px;border-bottom:1px solid var(--line)}.table td{padding:10px 6px;border-bottom:1px solid var(--line)}
.pill-status{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;height:26px;line-height:1;white-space:nowrap;font-size:12px;font-weight:800;padding:4px 8px;border-radius:999px}.ok{background:var(--sage-soft);color:var(--sage-tx)} .soon{background:var(--gold-soft);color:var(--gold-tx)} .later{background:var(--surface2);color:var(--neutral-tx)}
/* Phones */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:900px){.phones{grid-template-columns:1fr;justify-items:center}}
.phone{width:100%;max-width:320px;background:#0B1D38;border-radius:36px;padding:10px;box-shadow:0 18px 36px rgba(11,29,56,.28)}
.screen{background:var(--bg);border-radius:28px;overflow:hidden;min-height:560px;display:flex;flex-direction:column}
.screen-head{padding:16px 16px 10px}.screen-head small{color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.screen-body{padding:0 14px 14px;display:grid;gap:10px;flex:1}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:13px}.mini b{font-size:14.5px}.mini p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.bottomnav{margin-top:auto;display:flex;justify-content:space-around;padding:12px;border-top:1px solid var(--line);background:var(--surface);font-size:11px;font-weight:700;color:var(--neutral-tx)}
.bottomnav span.active{color:var(--teal)}
.note{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.note{grid-template-columns:1fr}}
.note h3{margin:0 0 6px}.note p,.note li{font-size:14px;color:var(--muted)} .note ul{margin:6px 0 0;padding-left:18px}
.footer{margin-top:18px;font-size:12.5px;color:var(--muted);text-align:center}
.section-label{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-tx);margin:0 0 6px}
@media(max-width:640px){.tabs{width:100%;border-radius:6px}.tabs button{flex:1 1 30%;text-align:center;padding:10px 8px;font-size:13px}}
/* ElevenMD-pattern sections, adapted for Kevin */
.facts-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:14px 0}
@media(max-width:900px){.facts-strip{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.facts-strip{grid-template-columns:1fr}}
.fact{background:var(--surface);padding:11px 12px}.fact span{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.fact b{font-size:13.5px;line-height:1.3;display:block;margin-top:2px}.fact b em{font-style:normal;color:var(--teal)}
.attention{background:var(--black);border:1px solid #2E4A6E;border-radius:6px;padding:20px;margin:14px 0;color:#F5EEDB;box-shadow:inset 0 0 0 4px var(--black),inset 0 0 0 5px #8A6D2B}
.attention h3{color:#F5EEDB}
.attention .attention-head p{color:#C9BFA3!important}
.attention>p{color:var(--brass)!important}
@media(prefers-color-scheme:dark){.attention{background:#050F1F}}
.attention-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:10px}
.attention-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:820px){.attention-grid{grid-template-columns:1fr}}
.att-item{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px;display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.att-item .num{width:26px;height:26px;border-radius:50%;background:var(--black);color:var(--brass);display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;border:1px solid var(--gold)}
.att-item p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.owner-tag{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;height:26px;line-height:1;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:999px;white-space:nowrap}
.owner-kevin{background:var(--gold-soft);color:var(--gold-tx)}.owner-jina{background:var(--sage-soft);color:var(--sage-tx)}
.dash-section{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.dash-section h3{margin:0;font-size:17px}.dash-section .sub{color:var(--muted);font-size:13.5px;margin:4px 0 12px;max-width:640px}
.tap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:900px){.tap-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.tap-grid{grid-template-columns:1fr}}
.tap-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;text-align:left;width:100%;font:inherit;cursor:pointer}
.tap-card:hover{border-color:var(--teal)}
.tap-card .icon{font-size:20px}.tap-card b{display:block;margin:6px 0 4px;font-size:14.5px}.tap-card p{margin:0;font-size:13px;color:var(--muted)}
.tap-card .explainer{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink);line-height:1.5}
.tap-card.open .explainer{display:block}.tap-card .tap-hint{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-top:8px;display:block}
.log-table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.log-wrap{overflow-x:auto;border-radius:6px}
@media(max-width:700px){.log-wrap{overflow:visible}.log-table,.log-table tbody,.log-table tr,.log-table td{display:block;width:100%}.log-table thead{display:none}.log-table tr{border-bottom:1px solid var(--line);padding:8px 0}.log-table td{border:0!important;padding:4px 10px!important}}
.log-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-tx);padding:10px;border-bottom:1px solid var(--line);background:var(--surface2)}
.log-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.flag{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;height:26px;line-height:1;white-space:nowrap;font-size:11px;font-weight:800;padding:3px 7px;border-radius:999px}.flag-biz{background:var(--teal-soft);color:var(--teal)}.flag-pers{background:var(--surface2);color:var(--neutral-tx)}
.reminders{display:grid;gap:8px}.reminder{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px}
.rem-date{flex-shrink:0;text-align:center;background:var(--surface2);border-radius:6px;padding:7px 9px;min-width:62px}.rem-date b{display:block;font-size:15px;line-height:1}.rem-date span{font-size:11px;font-weight:700;color:var(--neutral-tx);text-transform:uppercase;letter-spacing:.05em}
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:820px){.doc-grid{grid-template-columns:1fr}}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px}.doc.filed{border-color:var(--teal);background:var(--teal-soft)}
.mail-list{display:grid;gap:8px}.mail-item{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px;align-items:flex-start}
.tax-note{background:var(--surface);border:1px dashed var(--teal);border-radius:6px;padding:14px;display:flex;gap:12px}
.mileage-total{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}.mileage-total div{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px}.mileage-total b{font-size:18px;display:block}.mileage-total span{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* === Individual pages inside the dashboard (Nov 6 restructure) ============ */
.dpage{display:none}.dpage.active{display:block;animation:fade .25s ease}
@media(prefers-reduced-motion:reduce){.dpage.active{animation:none}}
.page-head{margin:2px 0 16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.page-head h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;margin:2px 0 4px;line-height:1.05}
.page-head p{margin:0;color:var(--muted);font-size:14px;max-width:640px}
.lbl-terra{color:var(--terra-tx)} .lbl-berry{color:var(--berry-tx)} .lbl-sky{color:var(--sky-tx)}
.side-item{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;font:inherit;cursor:pointer}
.side-item:hover{color:var(--ink)}
.page-nav{display:none}
@media(max-width:820px){
  /* Bottom tab bar (Nov 7, 2026): fixed to the viewport bottom, app-like,
     icon above a short label. The bar itself never scrolls away; it
     scrolls sideways within itself when all 10 buttons don't fit. */
  .page-nav{display:flex;flex-wrap:nowrap;gap:2px;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);border-radius:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .page-nav::-webkit-scrollbar{display:none}
  .page-nav button{flex:none;white-space:nowrap;border:1px solid transparent;background:transparent;color:var(--neutral-tx);border-radius:10px;padding:7px 8px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px}
  .page-nav button .nav-ic{display:block;font-size:18px;line-height:1}
  .page-nav button .nav-lb{display:block;font-size:11px;line-height:1.25}
  .page-nav button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  /* Keep the last page content clear of the fixed bar (bar ~60px tall
     + the iPhone home-indicator inset). */
  .main{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}
/* === Photos from Kevin's Instagram ======================================== */
.photo-band{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 6px}
@media(max-width:700px){.photo-band{grid-template-columns:1fr}}
figure.shot{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
figure.shot img{width:100%;height:250px;object-fit:cover;display:block}
figure.shot figcaption{padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.45}
figure.shot figcaption b{color:var(--ink)}
.page-photo{margin:0 0 16px}
.page-photo img{height:230px}
/* === Vision board — the Phases, as a dreams / manifesting board =========== */
.board{background:var(--black);border:1px solid #2E4A6E;border-radius:8px;padding:24px 22px 26px;color:#F5EEDB;box-shadow:inset 0 0 0 4px var(--black),inset 0 0 0 5px #8A6D2B}
@media(prefers-color-scheme:dark){.board{background:#050F1F}}
.board-head{text-align:center;margin-bottom:8px}
.board-head .section-label{color:var(--brass)}
.board-head h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,4vw,42px);font-weight:600;margin:2px 0 6px;color:#F5EEDB}
.board-head p{margin:0 auto;color:#C9BFA3;font-size:14px;max-width:560px}
.board-words{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;align-items:baseline;margin:18px 0 22px}
.board-words span{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;line-height:1}
.w-gold{color:#EBC979;font-size:30px}.w-terra{color:#F0A868;font-size:24px}.w-berry{color:#EE9DB4;font-size:27px}.w-sky{color:#A5CFE4;font-size:23px}.w-sage{color:#B9D6A9;font-size:26px}.w-cream{color:#F5EEDB;font-size:21px}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:900px){.board-grid{grid-template-columns:1fr}}
.pin-card{background:var(--surface);color:var(--ink);border-radius:4px;padding:16px;position:relative;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.pin-card::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F3D98B,var(--brass) 60%,#8A6D2B);box-shadow:0 2px 5px rgba(0,0,0,.45);z-index:2}
.tilt-l{transform:rotate(-1.1deg)} .tilt-r{transform:rotate(1.1deg)}
.pin-card img{width:100%;height:180px;object-fit:cover;border-radius:3px;display:block}
.pin-card .phase-tag{display:inline-block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.pt-now{background:var(--gold-soft);color:var(--gold-tx)} .pt-next{background:var(--terra-soft);color:var(--terra-tx)} .pt-dream{background:var(--berry-soft);color:var(--berry-tx)}
.pin-card h4{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;margin:8px 0 2px;line-height:1.1}
.pin-card .dream-line{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;color:var(--muted);margin:0 0 4px}
.vcheck{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);display:grid;gap:8px;font-size:13.5px}
.vcheck li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.vcheck .mk{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.mk-done{background:var(--sage-soft);color:var(--sage-tx)} .mk-now{background:var(--gold);color:var(--bg);border:1px solid var(--gold)} .mk-later{background:transparent;color:var(--neutral-tx);border:1.5px dashed var(--neutral-tx)}
.board-targets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:900px){.board-targets{grid-template-columns:1fr}}
.btarget{border:1px solid #2E4A6E;border-radius:6px;padding:14px 16px;text-align:center;background:rgba(245,238,219,.04)}
.btarget b{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;display:block;line-height:1;color:#EBC979}
.btarget.t b{color:#F0A868} .btarget.b b{color:#EE9DB4}
.btarget span{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#C9BFA3}
.board-note{text-align:center;font-size:12.5px;color:#C9BFA3;margin:16px auto 0;max-width:600px}
/* Count pill on the dark attention panel — explicit ink-on-surface pairing so it never washes out */
.pill-count{background:var(--surface);color:var(--ink);border-color:var(--line)}
/* === Completed items — greyed out ==========================================
   Anything marked done gets the same neutral grey treatment everywhere:
   grey fill, grey border, dimmed (still readable) text, and grey
   chips/badges inside, so a finished box reads as finished at a glance
   in both color modes and on both light and dark panels. */
.is-done{background:var(--done-bg)!important;border-color:var(--done-line)!important;color:var(--done-ink)}
.is-done b,.is-done h4{color:var(--done-ink)!important}
.is-done p{color:var(--done-muted)!important}
.is-done .tag,.is-done .pill-status,.is-done .flag,.is-done .owner-tag{background:var(--done-chip-bg);color:var(--done-chip-tx)}
.is-done .badge,.is-done .mk,.is-done .num{background:var(--done-chip-bg)!important;color:var(--done-chip-tx)!important;border-color:var(--done-line)!important}
.vcheck li.is-done{padding:6px 8px;border-radius:4px}
.log-table tr.is-done td{background:var(--done-bg);color:var(--done-ink)}
.log-table tr.is-done td span{color:var(--done-muted)!important}
/* === Accent expansion v10 — color on every surface, not just labels =======
   Four new accents (plum, jade, cobalt, olive) join gold, sage, terra,
   berry, and sky. Each component family cycles the full palette so no
   page reads monotone. None of these rules use !important, so the
   .is-done grey-out above still wins on every completed item. */
/* Segmented color bar under the topbar — the whole palette at a glance */
.color-strip{display:flex;height:8px;border-radius:999px;overflow:hidden;margin:0 0 18px}
.color-strip i{flex:1;display:block}
.lbl-plum{color:var(--plum-tx)} .lbl-jade{color:var(--jade-tx)} .lbl-cobalt{color:var(--cobalt-tx)} .lbl-olive{color:var(--olive-tx)}
/* Topbar pills + browser dots pick up color */
.topbar .pill:first-child{background:var(--gold-soft);color:var(--gold-tx);border-color:var(--gold)}
.topbar .pill:last-child{background:var(--cobalt-soft);color:var(--cobalt-tx);border-color:var(--cobalt)}
.circles i:nth-child(1){background:var(--terra)} .circles i:nth-child(2){background:var(--brass)} .circles i:nth-child(3){background:var(--jade)}
.hero-head .section-label{color:var(--plum-tx)}
/* Sidebar — every page gets its own color, dot + active tint */
.side-item{position:relative;padding-left:26px}
.side-item::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--neutral-tx)}
.side-item[data-page="overview"]::before{background:var(--gold)}
.side-item[data-page="formation"]::before{background:var(--terra)}
.side-item[data-page="people"]::before{background:var(--cobalt)}
.side-item[data-page="money"]::before{background:var(--jade)}
.side-item[data-page="documents"]::before{background:var(--plum)}
.side-item[data-page="grants"]::before{background:var(--olive)}
.side-item[data-page="changelog"]::before{background:var(--sky)}
.side-item.active[data-page="overview"]{background:var(--gold-soft);border-color:var(--gold)}
.side-item.active[data-page="formation"]{background:var(--terra-soft);border-color:var(--terra)}
.side-item.active[data-page="people"]{background:var(--cobalt-soft);border-color:var(--cobalt)}
.side-item.active[data-page="money"]{background:var(--jade-soft);border-color:var(--jade)}
.side-item.active[data-page="documents"]{background:var(--plum-soft);border-color:var(--plum)}
.side-item.active[data-page="grants"]{background:var(--olive-soft);border-color:var(--olive)}
.side-item.active[data-page="changelog"]{background:var(--sky-soft);border-color:var(--sky)}
/* Photo band — colored top edge per photo */
.photo-band figure.shot:nth-child(1){border-top:5px solid var(--terra)}
.photo-band figure.shot:nth-child(2){border-top:5px solid var(--cobalt)}
.photo-band figure.shot:nth-child(3){border-top:5px solid var(--berry)}
.photo-band figure.shot:nth-child(1) figcaption b{color:var(--terra-tx)}
.photo-band figure.shot:nth-child(2) figcaption b{color:var(--cobalt-tx)}
.photo-band figure.shot:nth-child(3) figcaption b{color:var(--berry-tx)}
.page-photo{border-top:5px solid var(--plum)}
/* Business facts strip — one accent per fact */
.facts-strip .fact{border-top:4px solid var(--gold)}
.facts-strip .fact:nth-child(2){border-top-color:var(--jade)}
.facts-strip .fact:nth-child(3){border-top-color:var(--plum)}
.facts-strip .fact:nth-child(4){border-top-color:var(--cobalt)}
.facts-strip .fact:nth-child(5){border-top-color:var(--terra)}
.facts-strip .fact:nth-child(1) span{color:var(--gold-tx)} .facts-strip .fact:nth-child(2) span{color:var(--jade-tx)}
.facts-strip .fact:nth-child(3) span{color:var(--plum-tx)} .facts-strip .fact:nth-child(4) span{color:var(--cobalt-tx)}
.facts-strip .fact:nth-child(5) span{color:var(--terra-tx)}
/* KPI cards — tinted fills, not just a top rule */
.kpis .kpi:nth-child(1){background:var(--gold-soft)} .kpis .kpi:nth-child(2){background:var(--terra-soft)}
.kpis .kpi:nth-child(3){background:var(--berry-soft)} .kpis .kpi:nth-child(4){background:var(--cobalt-soft)}
.kpis .kpi:nth-child(1) span{color:var(--gold-tx)} .kpis .kpi:nth-child(2) span{color:var(--terra-tx)}
.kpis .kpi:nth-child(3) span{color:var(--berry-tx)} .kpis .kpi:nth-child(4) span{color:var(--cobalt-tx)}
/* Needs-attention cards — numbered badges cycle the palette */
.attention-grid .att-item{border-top:3px solid var(--gold)}
.attention-grid .att-item:nth-child(2){border-top-color:var(--terra)} .attention-grid .att-item:nth-child(3){border-top-color:var(--berry)}
.attention-grid .att-item:nth-child(4){border-top-color:var(--cobalt)} .attention-grid .att-item:nth-child(5){border-top-color:var(--plum)}
.attention-grid .att-item:nth-child(6){border-top-color:var(--jade)} .attention-grid .att-item:nth-child(7){border-top-color:var(--olive)}
.attention-grid .att-item:nth-child(2) .num{background:var(--terra-soft);color:var(--terra-tx);border-color:var(--terra)}
.attention-grid .att-item:nth-child(3) .num{background:var(--berry-soft);color:var(--berry-tx);border-color:var(--berry)}
.attention-grid .att-item:nth-child(4) .num{background:var(--cobalt-soft);color:var(--cobalt-tx);border-color:var(--cobalt)}
.attention-grid .att-item:nth-child(5) .num{background:var(--plum-soft);color:var(--plum-tx);border-color:var(--plum)}
.attention-grid .att-item:nth-child(7) .num{background:var(--olive-soft);color:var(--olive-tx);border-color:var(--olive)}
.owner-jina{background:var(--jade-soft);color:var(--jade-tx)}
/* Formation — checklist badges + pipeline edges in rotating accents */
.checklist li:nth-child(2) .badge{background:var(--plum-soft);color:var(--plum-tx);border-color:var(--plum)}
.checklist li:nth-child(3) .badge{background:var(--cobalt-soft);color:var(--cobalt-tx)}
.checklist li:nth-child(4) .badge{background:var(--olive-soft);color:var(--olive-tx)}
.pipeline li{border-left:4px solid var(--jade)}
.pipeline li:nth-child(2){border-left-color:var(--berry)} .pipeline li:nth-child(3){border-left-color:var(--plum)} .pipeline li:nth-child(4){border-left-color:var(--cobalt)}
.pipeline li:nth-child(1) .tag{background:var(--jade-soft);color:var(--jade-tx)} .pipeline li:nth-child(2) .tag{background:var(--berry-soft);color:var(--berry-tx)}
.pipeline li:nth-child(3) .tag{background:var(--plum-soft);color:var(--plum-tx)} .pipeline li:nth-child(4) .tag{background:var(--cobalt-soft);color:var(--cobalt-tx)}
.pill-status.ok{background:var(--jade-soft);color:var(--jade-tx)} .pill-status.later{background:var(--cobalt-soft);color:var(--cobalt-tx)}
/* People — one accent per person */
.people-grid .person{border-top:5px solid var(--gold)}
.people-grid .person:nth-child(2){border-top-color:var(--plum)} .people-grid .person:nth-child(3){border-top-color:var(--cobalt)}
.people-grid .person:nth-child(2) .avatar{background:var(--plum);color:var(--surface);border-color:var(--plum)}
.people-grid .person:nth-child(3) .avatar{background:var(--cobalt);color:var(--surface);border-color:var(--cobalt)}
.people-grid .person:nth-child(2) .role{color:var(--plum-tx)} .people-grid .person:nth-child(3) .role{color:var(--cobalt-tx)}
/* Reminders — date boxes cycle every accent */
.reminders .reminder:nth-child(8n+1) .rem-date{background:var(--gold-soft);color:var(--gold-tx)}
.reminders .reminder:nth-child(8n+2) .rem-date{background:var(--cobalt-soft);color:var(--cobalt-tx)}
.reminders .reminder:nth-child(8n+3) .rem-date{background:var(--terra-soft);color:var(--terra-tx)}
.reminders .reminder:nth-child(8n+4) .rem-date{background:var(--plum-soft);color:var(--plum-tx)}
.reminders .reminder:nth-child(8n+5) .rem-date{background:var(--jade-soft);color:var(--jade-tx)}
.reminders .reminder:nth-child(8n+6) .rem-date{background:var(--berry-soft);color:var(--berry-tx)}
.reminders .reminder:nth-child(8n+7) .rem-date{background:var(--olive-soft);color:var(--olive-tx)}
.reminders .reminder:nth-child(8n+8) .rem-date{background:var(--sky-soft);color:var(--sky-tx)}
.rem-date span{color:inherit;opacity:.85}
/* Tap cards — colored top edge + tinted icon disc per card */
.tap-grid .tap-card{border-top:4px solid var(--terra)}
.tap-grid .tap-card:nth-child(3n+2){border-top-color:var(--plum)} .tap-grid .tap-card:nth-child(3n+3){border-top-color:var(--jade)}
.tap-card .icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--terra-soft)}
.tap-grid .tap-card:nth-child(3n+2) .icon{background:var(--plum-soft)} .tap-grid .tap-card:nth-child(3n+3) .icon{background:var(--jade-soft)}
/* Money — tinted log headers, flags, and mileage totals */
#page-money .log-table th{background:var(--jade-soft);color:var(--jade-tx)}
#page-grants .log-table th{background:var(--berry-soft);color:var(--berry-tx)}
.flag-biz{background:var(--jade-soft);color:var(--jade-tx)}
.mileage-total div:nth-child(1){background:var(--gold-soft);border-top:3px solid var(--gold)}
.mileage-total div:nth-child(2){background:var(--jade-soft);border-top:3px solid var(--jade)}
.mileage-total div:nth-child(3){background:var(--cobalt-soft);border-top:3px solid var(--cobalt)}
/* Documents + key mail — colored top/left edges per card */
.doc-grid .doc{border-top:5px solid var(--gold)}
.doc-grid .doc:nth-child(2){border-top-color:var(--cobalt)} .doc-grid .doc:nth-child(3){border-top-color:var(--plum)}
.doc-grid .doc:nth-child(4){border-top-color:var(--berry)} .doc-grid .doc:nth-child(5){border-top-color:var(--jade)} .doc-grid .doc:nth-child(6){border-top-color:var(--olive)}
.mail-list .mail-item{border-left:4px solid var(--terra)}
.mail-list .mail-item:nth-child(2){border-left-color:var(--cobalt)} .mail-list .mail-item:nth-child(3){border-left-color:var(--plum)}
.mail-list .mail-item:nth-child(4){border-left-color:var(--olive)} .mail-list .mail-item:nth-child(5){border-left-color:var(--berry)}
.tax-note{border-color:var(--plum);background:var(--plum-soft)}
/* Vision board — new word colors, pin-card top edges, fourth target hue */
.w-plum{color:#C9A6EC;font-size:25px}.w-jade{color:#7ED3BC;font-size:24px}.w-cobalt{color:#9AB0F0;font-size:28px}.w-olive{color:#C8D97A;font-size:22px}
.pin-card{border-top:6px solid var(--gold)}
.board-grid .pin-card:nth-child(2){border-top-color:var(--jade)} .board-grid .pin-card:nth-child(3){border-top-color:var(--plum)}
.btarget.plum b{color:#C9A6EC} .btarget.jade b{color:#7ED3BC}
/* PWA — mini cards cycle accent top edges; each phone's nav gets its own hue */
.screen-body .mini{border-top:3px solid var(--plum)}
.screen-body .mini:nth-child(3n+2){border-top-color:var(--jade)} .screen-body .mini:nth-child(3n+3){border-top-color:var(--cobalt)}
.phones .phone:nth-child(1) .bottomnav span.active{color:var(--plum-tx)}
.phones .phone:nth-child(2) .bottomnav span.active{color:var(--jade-tx)}
.phones .phone:nth-child(3) .bottomnav span.active{color:var(--cobalt-tx)}
/* Review note at the bottom — split the two halves by accent */
.note>div:first-child{border-top:4px solid var(--berry);padding-top:12px}
.note>div:last-child{border-top:4px solid var(--olive);padding-top:12px}
/* === Launch plan page (Nov 6, v11; renamed from Blueprint Phases in v12;
   renamed from Blueprint to Launch plan Nov 7, 2026) ====
   The full launch plan — all 108 steps — shown as Kevin's
   instance: every step carries his real status today. The five phases run
   as a journey; Org and Routing sit underneath as the foundation. Each
   phase keeps its own accent, and done steps reuse the .is-done grey-out. */
/* Step-status legend — its own standout box (Nov 7, 2026: was buried at
   the end of the intro paragraph and hard to see). */
.bp-legend{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;background:var(--sky-soft);border:2px solid var(--sky);border-radius:6px;padding:12px 16px;margin:0 0 16px;font-size:13.5px;font-weight:600}.bp-legend b{color:var(--sky-tx);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bp-legend .lg{display:inline-flex;align-items:center;gap:7px}
.bp-legend .mk{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800}
/* Calendar page (Nov 7, 2026): the sync-provider placeholder banner. */
.sync-banner{background:var(--sky-soft);border:2px solid var(--sky);border-radius:6px;padding:12px 16px;margin:0 0 16px;font-size:13.5px}
.sync-banner b{color:var(--sky-tx)}
.sync-banner p{margin:4px 0 0;color:var(--muted)}
/* Document links on list items (Nov 7, 2026). */
.doc-link{font-weight:700;color:var(--sky-tx);text-decoration:underline;text-underline-offset:2px}
/* Load-error banner (Nov 7, 2026): shown above the pages when one or
   more dashboard lists fail to load after retries. Amber/berry so it
   reads as a warning, not an error that blocks the page. */
.load-error{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--gold-soft);border:2px solid var(--gold);border-radius:6px;padding:10px 14px;margin:0 0 16px;font-size:13.5px;font-weight:600;color:var(--gold-tx)}
.load-error[hidden]{display:none}
.side-item[data-page="blueprint"]::before{background:var(--sky)}
.side-item.active[data-page="blueprint"]{background:var(--sky-soft);border-color:var(--sky)}
.side-item.active[data-page="changelog"]{background:var(--surface2);border-color:var(--line)}
.bp-journey{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:0 0 18px}
.bp-node{flex:1 1 150px;border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--surface)}
.bp-node b{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:600;display:block;line-height:1.1}
.bp-node span{font-size:12px;color:var(--muted);font-weight:700}
.bp-node small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.bp-node.n-plan{border-top:5px solid var(--gold);background:var(--gold-soft)} .bp-node.n-plan b{color:var(--gold-tx)}
.bp-node.n-source{border-top:5px solid var(--terra);background:var(--terra-soft)} .bp-node.n-source b{color:var(--terra-tx)}
.bp-node.n-make{border-top:5px solid var(--cobalt);background:var(--cobalt-soft)} .bp-node.n-make b{color:var(--cobalt-tx)}
.bp-node.n-deliver{border-top:5px solid var(--jade);background:var(--jade-soft)} .bp-node.n-deliver b{color:var(--jade-tx)}
.bp-node.n-maintain{border-top:5px solid var(--plum);background:var(--plum-soft)} .bp-node.n-maintain b{color:var(--plum-tx)}
.bp-phase{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:16px;margin-bottom:14px}
.bp-phase-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.bp-phase-head h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;line-height:1.1}
.bp-phase-head p{margin:3px 0 0;font-size:13.5px;color:var(--muted);max-width:560px}
.bp-count{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.bp-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bp-steps li{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.bp-steps .mk{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.bp-steps b{font-size:14px}
.bp-steps p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.bp-steps .tag{margin-left:auto;flex-shrink:0}
.bp-org{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:700px){.bp-org{grid-template-columns:1fr}}
.bp-org-group{border:1px solid var(--line);border-radius:6px;padding:12px;background:var(--surface);min-width:0}
.bp-org-group h4{margin:0 0 8px;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.bp-roles{display:flex;flex-wrap:wrap;gap:6px}
.bp-role{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;min-height:26px;height:auto;line-height:1.25;white-space:normal;text-align:center;font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--surface2);color:var(--neutral-tx)}
.bp-gates{display:grid;gap:8px}
.bp-gate{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:12px;background:var(--surface)}
.bp-gate .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;background:var(--sky-soft);color:var(--sky-tx);border:1px solid var(--sky)}
.bp-gate p{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* === v12 — Action Items page + team-model assignments =====================
   Assignee color code, used on the People page team model and the Action
   Items page: Kevin = gold, Jina = jade, Kiara = plum, AI-handled =
   glacier blue with a DASHED border so it reads differently at a glance,
   licensed partner slots = terracotta, everything else = future hire. */
.side-item[data-page="actions"]::before{background:var(--berry)}
.side-item.active[data-page="actions"]{background:var(--berry-soft);border-color:var(--berry)}
.owner-wife{background:var(--plum-soft);color:var(--plum-tx)}
.act-head{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin:20px 0 10px}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.bp-role{border:1px solid var(--line)}
.bp-role i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:var(--surface);border:1px solid currentColor}
.bp-role.r-kevin{background:var(--gold-soft);color:var(--gold-tx);border-color:var(--gold)}
.bp-role.r-jina{background:var(--jade-soft);color:var(--jade-tx);border-color:var(--jade)}
.bp-role.r-wife{background:var(--plum-soft);color:var(--plum-tx);border-color:var(--plum)}
.bp-role.r-ai{background:var(--sky-soft);color:var(--sky-tx);border:1.5px dashed var(--sky)}
.bp-role.r-partner{background:var(--terra-soft);color:var(--terra-tx);border-color:var(--terra)}

/* ==========================================================================
   LIVE APP — styles the mockup never needed: buttons, the real app header,
   the sign-in screens, modals, toasts, forms, Q&A, and the extra owner
   tags. All colors come from the palette variables above, so light/dark
   follow prefers-color-scheme like the rest of the dashboard.
   ========================================================================== */

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;white-space:nowrap;font:inherit;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--teal)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--black);color:#F5EEDB;border-color:var(--black)}
.btn-primary:hover{border-color:var(--gold);background:#050F1F}
.btn-small{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;height:26px;line-height:1;padding:5px 10px;font-size:12.5px;white-space:nowrap}


/* Real app header (replaces the mockup's fake browser bar) */
.appbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 0 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.appbar-brand{display:flex;gap:10px;align-items:center}
.appbar-brand img{width:40px;height:40px}
.appbar-brand b{display:block;font-size:15px;line-height:1.2}
.appbar-brand span{display:block;font-size:12px;color:var(--muted)}
.appbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.appbar-btn{font:inherit;font-weight:700;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.appbar-btn:hover{border-color:var(--teal)}
.appbar-user{font-size:12.5px;font-weight:700;color:var(--muted)}

/* [hidden] must win over display rules (Nov 7, 2026: .auth-view sets
   display:grid, which overrode the hidden attribute, so the sign-in
   screen stayed visible at the top after login). */
[hidden]{display:none!important}

/* Sign-in / first-use setup */
.auth-view{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.auth-card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:28px 24px;box-shadow:0 12px 40px rgba(11,29,56,.18)}
.auth-card img{width:72px;height:72px;display:block;margin:0 auto 12px}
.auth-card h1{font-size:30px;text-align:center;margin:0 0 4px}
.auth-card h2{font-size:19px;margin:18px 0 6px}
.auth-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 8px}
.auth-note{font-size:13px;color:var(--muted);line-height:1.5}
.auth-error{background:var(--berry-soft);color:var(--berry-tx);border:1px solid var(--berry);border-radius:6px;padding:10px 12px;font-size:13.5px;font-weight:600;margin:12px 0}
.auth-card form{display:grid;gap:12px;margin-top:10px}
.auth-card label,.fld{display:grid;gap:5px;font-size:13px;font-weight:700}
.auth-card input,.fld input,.fld select,.fld textarea{font:inherit;font-weight:400;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%}
.auth-card input:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--gold);outline-offset:1px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(5,15,31,.62);display:grid;place-items:center;padding:16px;z-index:50}
.modal{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.modal-wide{max-width:680px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.modal-head h3{margin:0;font-size:19px}
.modal-close{font:inherit;font-size:22px;line-height:1;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:2px 8px}
.modal-form{display:grid;gap:12px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.form-error{background:var(--berry-soft);color:var(--berry-tx);border:1px solid var(--berry);border-radius:6px;padding:9px 11px;font-size:13.5px;font-weight:600}
.fld small{font-weight:400;color:var(--muted);font-size:12.5px}
.fld-check{display:flex!important;gap:8px;align-items:flex-start;font-size:13.5px}
.fld-check input{width:auto;margin-top:2px}

/* Toasts */
#toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;display:grid;gap:8px;width:min(92vw,480px)}
.toast{background:var(--black);color:#F5EEDB;border:1px solid var(--gold);border-radius:6px;padding:11px 14px;font-size:14px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;box-shadow:0 8px 28px rgba(5,15,31,.35)}
.toast.show{opacity:1;transform:none}
.toast.warn{border-color:var(--berry);color:#F2A9BC}

/* Tax-deductible tip callout (Accounting page, Nov 7, 2026) — static
   content in the mockup, no JS. Facts verified against IRS Publication
   463 (2025) and the IRS "Business Taxes for the Self-Employed: The
   Basics" page before they were written here. */
.tip-box{background:var(--jade-soft);border:1px solid var(--jade);border-radius:6px;padding:14px 16px;margin:16px 0 0}
.tip-box p{margin:0 0 8px;font-size:13.5px}
.tip-box p:last-child{margin-bottom:0}
.tip-box ul{margin:0 0 8px;padding-left:20px;font-size:13.5px}
.tip-box li{margin:0 0 4px}

/* Swimlane roadmap (Launch plan, Nov 7, 2026) — the same live steps as
   the phase lists above, one horizontal lane per phase. Lanes scroll
   horizontally on narrow screens instead of squishing the cards. */
.swimlane{border:1px solid var(--line);border-top:5px solid var(--line);border-radius:6px;background:var(--surface);padding:12px;margin:0 0 12px}
.swimlane[data-phase="plan"]{border-top-color:var(--gold)}
.swimlane[data-phase="source"]{border-top-color:var(--terra)}
.swimlane[data-phase="make"]{border-top-color:var(--cobalt)}
.swimlane[data-phase="deliver"]{border-top-color:var(--jade)}
.swimlane[data-phase="maintain"]{border-top-color:var(--plum)}
.swimlane-head{display:flex;gap:10px;align-items:baseline;margin:0 0 8px}
.swimlane-head b{font-size:14px}
.swimlane-head span{font-size:12px;color:var(--muted);font-weight:700}
.swimlane-track{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.swimlane-card{flex:0 0 210px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.swimlane-card .mk{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800}
.swimlane-card b{font-size:13px;line-height:1.35}
.swimlane-card .owner-tag{align-self:flex-start}

/* Extra owner tags + checklist badges (the mockup only defined 3 owners) */
.owner-ai{background:var(--sky-soft);color:var(--sky-tx)}
.owner-partner{background:var(--terra-soft);color:var(--terra-tx)}
.badge.done{background:var(--sage-soft)!important;color:var(--sage-tx)!important;border-color:var(--sage)!important}
.badge.next{background:var(--gold-soft);color:var(--gold-tx);border:1px solid var(--gold-tx)}
.badge.wait{background:var(--surface2);color:var(--neutral-tx);border:1px solid var(--line)}
.empty-row{color:var(--muted);font-size:13.5px}
.total-row td{background:var(--surface2);font-size:13.5px}
.muted{color:var(--muted);font-size:13.5px}

/* Settings dialog */
.settings-block{border-top:1px dashed var(--line);padding-top:12px}
.settings-block h4{margin:0 0 8px;font-size:14px}
.passkey-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.passkey-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;padding:9px 11px}
.passkey-list li b{display:block;font-size:13.5px}
.passkey-list li span{font-size:12px;color:var(--muted)}

/* Two-factor authentication (Settings) */
.qr-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;place-items:center;margin:10px 0}
.qr-box svg{width:200px;height:200px;max-width:100%}
.totp-secret{font-size:13.5px;word-break:break-all}
.totp-secret code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--surface2);padding:2px 5px;border-radius:4px}
.backup-codes{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.backup-codes li{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;text-align:center;border:1px solid var(--line);border-radius:6px;padding:8px 4px;background:var(--surface)}

/* === Phone + installed PWA (Nov 7, 2026) =================================
   Phone audit at 390px: the appbar took three rows (brand, Settings +
   user chip, Sign out), and the Launch plan / People pages blew out
   past the viewport (fixed by the min-width:0 rules above and the
   wrapping role chips). These rules compact the header on a phone and
   make the installed PWA read as an app. Desktop is unchanged. */
@media(max-width:640px){
  .appbar-brand span{display:none}
  .appbar-brand b{font-size:14px}
}
@media(max-width:480px){
  .appbar-user{display:none}
}
/* Installed PWA — display-mode: standalone. The build already strips
   the mockup hero / phone-frame preview from index.html, so the
   installed app opens straight to the dashboard; these rules remove
   the last browser-looking remnants (the fake browser bar and the
   framed card) so it reads as a phone app, edge to edge. */
@media (display-mode: standalone){
  .browser-bar{display:none}
  .browser{border:0;border-radius:0;box-shadow:none}
  .wrap{padding:0 0 48px}
  .appbar{padding-left:14px;padding-right:14px}
  .main{padding:16px 14px calc(72px + env(safe-area-inset-bottom, 0px))}
}

/* ==========================================================================
   NOV 8, 2026 — MOBILE EDITS (Jina)
   Collapsible sections, task-row layout, owner tints, the 5-item bottom
   bar + "More" sheet, Vision Board collage, mobile card polish.
   All colors come from the palette variables above.
   ========================================================================== */

/* ---- #5a Owner group headlines: clearly larger, bold section headlines */
.section-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:transparent;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.section-toggle .act-head{font-size:22px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin:0;line-height:1.2}
.section-toggle .section-title{font-size:18px;font-weight:800;line-height:1.2}
.section-toggle .chev{flex:none;font-size:15px;color:var(--muted);transition:transform .15s ease}
.section-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.section-toggle-inline{width:auto;margin-left:8px;vertical-align:middle}
.section-toggle-inline .chev{font-size:13px}
h3 .section-toggle-inline{display:inline-flex}
.section-body[hidden]{display:none}
.owner-group{border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 14px}
.owner-group .section-body{margin-top:10px}
.owner-kevin{background:var(--gold-soft)} .owner-kevin .act-head{color:var(--gold-tx)}
.owner-wife{background:var(--plum-soft)} .owner-wife .act-head{color:var(--plum-tx)}
.owner-jina{background:var(--jade-soft)} .owner-jina .act-head{color:var(--jade-tx)}
/* ---- #6 Formation sub-sections: one tint each */
.collapsible{border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 14px}
.collapsible .section-body{margin-top:10px}
.tint-terra{background:var(--terra-soft)} .tint-terra .section-title{color:var(--terra-tx)}
.tint-berry{background:var(--berry-soft)} .tint-berry .section-title{color:var(--berry-tx)}
.tint-jade{background:var(--jade-soft)} .tint-jade .section-title{color:var(--jade-tx)}
.tint-cobalt{background:var(--cobalt-soft)} .tint-cobalt .section-title{color:var(--cobalt-tx)}
/* ---- #6 Dash sections read as distinct tinted cards, not one beige block */
.dash-section{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:16px}
.dash-section .section-body{margin-top:4px}
#people{background:var(--gold-soft)}
#team{background:var(--cobalt-soft)}
#calendar{background:var(--sky-soft)}
#accounting{background:var(--jade-soft)}
#mileage{background:var(--gold-soft)}
#documents{background:var(--plum-soft)}
#keymail{background:var(--terra-soft)}
#agreements{background:var(--berry-soft)}
#grants{background:var(--olive-soft)}
/* ---- #6 Launch plan phases: tinted to match their top rule */
.bp-phase .bp-toggle{flex:none;width:auto;padding:6px 8px}
.bp-phase .section-body{margin-top:0}

/* ---- #5c/d Task rows: collapsed description, pill on the title row */
.task-row{align-items:flex-start}
.task-main{flex:1;min-width:0}
.task-top{display:flex;gap:10px;align-items:flex-start}
.task-top .owner-tag{flex:none;margin-top:1px}
.task-desc{flex:1;min-width:0}
.task-desc summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline}
.task-desc summary::-webkit-details-marker{display:none}
.task-desc summary::marker{content:''}
.task-desc summary b{font-size:14.5px;line-height:1.35}
.task-chev{flex:none;font-size:11px;color:var(--muted);transition:transform .15s ease}
.task-desc[open ] .task-chev{transform:rotate(180deg)}
.task-desc p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.task-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.task-actions:empty{display:none}

/* ---- #2 Vision Board collage */
.board-collage{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 20px}
.collage-tile{margin:0;position:relative;border-radius:10px;overflow:hidden;border:3px solid #FFFCF0;box-shadow:0 6px 16px rgba(0,0,0,.35);background:#222;padding:0}
.collage-tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile-large{height:230px}
.tile-small{height:170px}
.board-collage .collage-tile:nth-child(4n+1){transform:rotate(-1.6deg)}
.board-collage .collage-tile:nth-child(4n+2){transform:rotate(1.2deg);margin-top:10px}
.board-collage .collage-tile:nth-child(4n+3){transform:rotate(-.8deg)}
.board-collage .collage-tile:nth-child(4n+4){transform:rotate(1.5deg);margin-top:6px}
.collage-overlay{position:absolute;left:10px;bottom:8px;z-index:2}
.collage-script{font-family:'Caveat','Segoe Script','Brush Script MT',cursive;font-size:36px;font-weight:600;line-height:1;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75);transform:rotate(-4deg)}
.collage-year{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:26px;line-height:1;background:#FFFCF0;color:#13233C;padding:4px 14px;border-radius:4px;left:50%;transform:translateX(-50%)}
.collage-snippet{margin:0;display:grid;place-items:center;text-align:center;font-family:'Caveat','Segoe Script','Brush Script MT',cursive;font-size:27px;font-weight:600;line-height:1.25;color:#F5EEDB;background:rgba(245,238,219,.07);border:1px dashed #8A6D2B;border-radius:10px;padding:16px;transform:rotate(-1deg)}
@media(max-width:900px){.board-collage{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.board-collage{grid-template-columns:repeat(2,1fr);gap:10px}.tile-large{height:190px}.tile-small{height:140px}.collage-script{font-size:30px}.collage-snippet{font-size:23px}}

/* ---- PWA install — "Add to Home Screen" (Nov 8, 2026) */
.install-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--jade-soft);border:1px solid var(--jade);border-radius:12px;padding:12px 14px;margin:0 0 14px}
.install-card p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.install-card .btn{flex:none}
.install-sheet p{margin:0 0 10px}
.install-steps{margin:0 0 10px;padding-left:22px;display:grid;gap:8px;line-height:1.5}
.install-steps li::marker{font-weight:700}
.ios-share{display:inline-block;width:1.25em;height:1.25em;border:2px solid currentColor;border-radius:3px;text-align:center;line-height:1.05em;font-weight:700;vertical-align:-0.2em}

/* ---- #8 "More" sheet (mobile only; desktop never shows it) */
.more-menu{display:none}
.more-menu .more-sheet button .nav-ic{font-size:18px;line-height:1}
@media(max-width:820px){
  .page-nav button{flex:1 1 0;min-width:0}
  /* Settings / Sign out move off the appbar into the "More" sheet. */
  .appbar-actions #btn-settings,.appbar-actions #btn-signout{display:none}
  .more-menu:not([hidden]){display:block}
  .more-sheet{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--surface);border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(11,29,56,.25);padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:2px}
  .more-sheet button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;border:0;font:inherit;font-weight:700;font-size:15px;padding:12px 10px;border-radius:8px;cursor:pointer;color:var(--ink)}
  .more-sheet button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
  .more-sheet hr{border:0;border-top:1px solid var(--line);margin:6px 0}
  /* ---- #10 Mobile polish: bigger headlines, rounded cards, soft shadow */
  .page-head h3{font-size:30px}
  .dash-section h3{font-size:19px}
  .bp-phase-head h3{font-size:23px}
  .checklist li,.bp-phase,.person,.doc,.kpi,.fact,.pin-card,.owner-group,.collapsible,.dash-section{border-radius:12px;box-shadow:0 2px 10px rgba(11,29,56,.08)}
  .swimlane-card{border-radius:10px}
}

/* ==========================================================================
   DRAG AND DROP (Nov 8, 2026 — Jina)
   Grip handles on task rows; a floating ghost follows the pointer; a
   "Move to" tray appears at the bottom while dragging; drop targets
   highlight. Works with mouse and touch (pointer-based, no HTML5 DnD).
   ========================================================================== */
/* Unassigned / AI owner box (Action Items, 4th group). */
.owner-other{background:var(--surface2)} .owner-other .act-head{color:var(--neutral-tx)}
/* Grip handle: the thing you hold to drag. Always visible so the
   feature is discoverable on touch, where there is no hover. */
.drag-handle{flex:none;align-self:flex-start;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--muted);font-size:15px;font-weight:800;letter-spacing:1px;line-height:1.4;padding:2px 4px;margin:-2px 0 0 -4px;border-radius:4px}
.drag-handle:hover,.drag-handle:focus-visible{color:var(--ink);background:var(--surface2);outline:none}
.drag-handle:active{cursor:grabbing}
.bp-role .drag-handle{font-size:11px;padding:0 2px;margin:0 2px 0 -2px;line-height:1}
.swimlane-card .drag-handle{align-self:flex-start}
/* The row being dragged: faded, so the gap reads as "this moved". */
.drag-source{opacity:.45}
/* Ghost: the floating card that follows the pointer while dragging. */
.drag-ghost{position:fixed;z-index:70;pointer-events:none;max-width:min(320px,80vw);background:var(--ink);color:var(--bg);font-size:13px;font-weight:700;line-height:1.35;padding:9px 12px;border-radius:8px;box-shadow:0 10px 28px rgba(11,29,56,.35)}
/* Floating "Move to" tray: appears only while a drag is active. Sits
   above the mobile bottom nav (which is ~72px tall). */
#drag-tray{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:55;display:none;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:min(94vw,560px);background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 30px rgba(11,29,56,.28);padding:8px 12px;opacity:0;transition:opacity .12s ease,transform .12s ease}
#drag-tray.visible{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:821px){#drag-tray{bottom:18px}}
.drag-tray-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.drag-tray-btn{border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer}
.drag-tray-btn.drop-hot{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Drop target highlight: the box / phase / person card under the pointer. */
.drop-hot{outline:2px dashed var(--gold);outline-offset:3px}
.owner-group.drop-hot,.bp-phase.drop-hot,.swimlane.drop-hot,.person.drop-hot{outline:2px dashed var(--gold);outline-offset:3px}
/* Insertion point inside a phase list: a gold line above (or below) the row. */
.task-row.drop-insert-before{box-shadow:0 -3px 0 var(--gold)}
.task-row.drop-insert-after{box-shadow:0 3px 0 var(--gold)}
/* While dragging, stop the page selecting text under the pointer. */
body.dragging{user-select:none;-webkit-user-select:none}
body.dragging .task-desc summary{pointer-events:none}