/* ============================================================================
   portal.css — page styles for the portal's suite pages (home, setup, person,
   app setup, reports). Tokens, dock, footer, dialog and toast live in
   shell.css; load that first. Pages set <body data-page="…"> so the few
   layouts that differ between pages can share class names.
   ========================================================================== */
html.booting body{visibility:hidden}
body{margin:0;background:var(--paper)}
.page{font-family:Inter,sans-serif;color:var(--ink);background:var(--paper);min-height:100vh;box-sizing:border-box;padding-top:14px;position:relative;-webkit-font-smoothing:antialiased}
.wash{position:absolute;left:0;right:0;top:0;height:540px;pointer-events:none;background:radial-gradient(820px 420px at 18% 0%,var(--wash1),transparent 62%),radial-gradient(640px 360px at 92% 4%,var(--wash2),transparent 60%)}
.page a{color:inherit;text-decoration:none}
.wrap{max-width:1440px;box-sizing:border-box;margin:0 auto;padding:0 32px 32px;position:relative}
[hidden]{display:none!important}

/* hero */
.hero{padding:44px 0 0}
.when{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 12.5px/1.3 Inter,sans-serif;color:var(--dim)}
.when::before{content:"";width:18px;height:1px;background:var(--dim);opacity:.6;margin-right:2px}
.page .when a{color:var(--cobalt)}
.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:16px}
.h1{font:300 clamp(36px,4.2vw,44px)/1.1 'Crimson Pro',serif;letter-spacing:-.015em;margin:0}
.em{font-style:italic;font-weight:500;color:var(--cobalt)}
.save{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;box-sizing:border-box;border-radius:12px;font:600 13.5px/1 Inter,sans-serif;border:1px solid var(--l14);background:var(--elev);color:var(--ink);cursor:pointer;transition:background .2s ease;white-space:nowrap}
.btn:hover{background:var(--field)}
.btn.pri,.page a.btn.pri{background:var(--btn);border-color:var(--btn);color:#fff}
.btn.pri:hover,.page a.btn.pri:hover{background:var(--btn-h)}
.btn.sm{height:36px;padding:0 14px;border-radius:10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.tbtn{border:0;background:none;padding:0;font:500 13px/1.4 Inter,sans-serif;color:var(--cobalt);cursor:pointer;text-align:left;white-space:nowrap}
.tbtn.out{color:var(--burg)}
.tbtn:disabled{color:var(--faint);cursor:default}
.ibtn{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0;transition:background .15s ease,color .15s ease}
.ibtn:hover{background:var(--quiet);color:var(--ink)}
.btn:focus-visible,.tbtn:focus-visible,.ibtn:focus-visible,.page a:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

/* section heads + panels */
.sech{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 6px 6px}
.cav{font:700 26px/1.25 Caveat,cursive;color:var(--cobalt);transform:rotate(-1.5deg);transform-origin:left center;display:inline-block;padding:6px 4px 8px;margin:0}
.meta{font:500 12.5px/1.3 Inter,sans-serif;color:var(--dim)}
.page a.meta:hover{color:var(--cobalt)}
.panel{background:var(--elev);border:1px solid var(--l07);border-radius:22px;overflow:hidden}
.panel.open{overflow:visible}
.gap{margin-top:24px}
.note{font:400 12.5px/1.5 Inter,sans-serif;color:var(--dim);margin:14px 8px 0}
.hint{font:400 12.5px/1.5 Inter,sans-serif;color:var(--dim);margin:12px 0 0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.empty{padding:26px 28px;font:400 14px/1.55 Inter,sans-serif;color:var(--dim)}
.empty b{display:block;font:400 22px/1.2 'Crimson Pro',serif;color:var(--ink);margin-bottom:6px}

/* form bits shared by setup, person, app setup */
.selw{position:relative}
.selw select{-webkit-appearance:none;appearance:none;display:block;width:100%;box-sizing:border-box;height:42px;padding:0 40px 0 14px;border-radius:12px;border:1px solid var(--l16);background:var(--field);font:500 14.5px/1 Inter,sans-serif;color:var(--ink);cursor:pointer}
.selw select:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.selw select:disabled{opacity:.6;cursor:default}
.selw svg{position:absolute;right:14px;top:50%;margin-top:-8px;color:var(--muted);pointer-events:none}
.fld label,.fld .cap{display:block;font:600 12px/1 Inter,sans-serif;color:var(--muted);margin:0 0 8px}
.txt{display:block;width:100%;box-sizing:border-box;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--l16);background:var(--field);font:400 14.5px/1 Inter,sans-serif;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.txt::placeholder{color:var(--dim)}
.txt:focus{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(46,86,148,.16)}
.cap{font:600 12px/1 Inter,sans-serif;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-block}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--l16);background:var(--field);font:500 13px/1 Inter,sans-serif;color:var(--muted);transition:background .2s ease,color .2s ease,border-color .2s ease}
.chip input:checked + span{background:var(--pill);border-color:var(--pill);color:var(--pill-ink)}
.chip input:focus-visible + span{outline:2px solid var(--cobalt);outline-offset:2px}
.chip input:disabled{cursor:default}
.chip input:disabled + span{opacity:.55}
.f{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;min-height:24px}
.f input,.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sw{position:relative;width:38px;height:22px;border-radius:999px;background:var(--track);flex:none;transition:background .2s ease}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px rgba(20,22,26,.25);transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.f input:checked + .sw{background:var(--pill)}
.f input:checked + .sw::after{transform:translateX(16px)}
.f input:focus-visible + .sw,.opt input:focus-visible + .rd{outline:2px solid var(--cobalt);outline-offset:2px}
.f input:disabled + .sw{opacity:.5}
.f:has(input:disabled),.opt:has(input:disabled){cursor:default}
.ft b{display:block;font:500 14px/1.35 Inter,sans-serif}
.ft small{display:block;font:400 12.5px/1.45 Inter,sans-serif;color:var(--dim);margin-top:1px}
.chg{display:inline-block;font:600 10.5px/1 Inter,sans-serif;font-style:normal;color:var(--deep);background:var(--tint2);border-radius:999px;padding:3px 7px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.face{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2E5694,#6A8DC4);color:#fff;font:600 12px/34px Inter,sans-serif;text-align:center;flex:none}
.face.alt{background:linear-gradient(135deg,#1E3E72,#2E5694)}
.face.wait{background:transparent;box-shadow:inset 0 0 0 1.5px var(--l20);color:var(--dim)}

/* rail (setup, app setup) */
.rail{padding:8px}
.rail a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:13px 14px;border-radius:15px;transition:background .2s ease}
.page .rail a:hover{background:var(--hover)}
.page .rail a.on{background:var(--tint)}
.rail .n{font:400 21px/1.2 'Crimson Pro',serif;letter-spacing:-.005em}
.rail .s{grid-column:1;font:400 12.5px/1.4 Inter,sans-serif;color:var(--dim)}
.rail .c{grid-column:2;grid-row:1/3;color:var(--dim)}
.rail a.on .c{color:var(--deep)}
.rail .all .n{font:600 14px/1.5 Inter,sans-serif;letter-spacing:0}
.rail hr{border:0;border-top:1px solid var(--l07);margin:6px 8px}
.rail .dim .n{color:var(--muted)}
.rail .add{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;margin-top:6px;padding:14px;border:1px dashed var(--l20);border-radius:15px;background:none;font:600 13.5px/1 Inter,sans-serif;color:var(--cobalt);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.rail .add:hover{background:var(--hover);border-color:var(--cobalt)}
.rail.tight a{padding:10px 14px}
.rail .r{font:500 14px/1.3 Inter,sans-serif}
.rail .k{font:500 12.5px/1 Inter,sans-serif;color:var(--dim)}

/* ------------------------------------------------------------------ home */
.morning{display:grid;grid-template-columns:216px minmax(0,1fr);gap:10px 36px;align-items:start;margin-top:28px;padding:26px 30px 28px;background:var(--elev);border:1px solid var(--l07);border-radius:22px}
.mhead{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:9px;font:500 12.5px/1 Inter,sans-serif;color:var(--dim)}
.mhead .src{display:flex;align-items:center;gap:8px}
.mhead svg.mk{color:var(--cobalt);flex:none}
.mhead b{font-weight:700;letter-spacing:.2em;font-size:11px;color:var(--ink)}
.mhead .asof{display:flex;align-items:center;gap:4px}
.mline{font:300 25px/1.45 'Crimson Pro',serif;color:var(--ink);margin:0;max-width:86ch;text-wrap:pretty}
.mline b{font-weight:500}
.mline.quiet{color:var(--dim);font-size:21px}
[data-page=home] .cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:32px;margin-top:40px;align-items:start}
.app{display:grid;grid-template-columns:132px minmax(0,1fr) auto 20px;align-items:center;column-gap:18px;row-gap:16px;padding:17px 24px;border-top:1px solid var(--l07);transition:background .2s ease}
.app:first-child{border-top:0}
.page a.app:hover{background:var(--hover)}
.app .n{font:400 25px/1.1 'Crimson Pro',serif;letter-spacing:-.01em}
.app .s{font:400 14px/1.45 Inter,sans-serif;color:var(--muted)}
.app .s b{font-weight:600;color:var(--ink)}
.app .fig{text-align:right;white-space:nowrap}
.app .fig .v{display:block;font:300 32px/1 'Crimson Pro',serif;font-variant-numeric:lining-nums}
.app .fig .l{display:block;font:500 11.5px/1 Inter,sans-serif;color:var(--dim);margin-top:5px}
.app .go{color:var(--dim);transition:transform .3s cubic-bezier(.22,.61,.36,1),color .2s ease}
.app:hover .go{color:var(--cobalt);transform:translateX(3px)}
.app.lead{padding-top:22px;padding-bottom:22px}
.app .pace{grid-column:1/-1}
.bar{display:flex;gap:3px;height:8px}
.bar span{border-radius:99px;min-width:4px}
.bar .b-on,.key .b-on{background:var(--cobalt)}
.bar .b-slow,.key .b-slow{background:var(--amber)}
.bar .b-off,.key .b-off{background:var(--burg)}
.bar .b-none{background:var(--l10);flex:1}
.key{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:11px;font:500 12px/1 Inter,sans-serif;color:var(--muted)}
.key span{display:inline-flex;align-items:center;gap:7px}
.key i{width:7px;height:7px;border-radius:50%}
.key .heavy{font-weight:700;color:var(--ink)}
.key .end{margin-left:auto;color:var(--dim)}
.item{display:grid;grid-template-columns:7px minmax(0,1fr) auto;gap:12px;padding:14px 20px 15px;border-top:1px solid var(--l07);align-items:start;transition:background .2s ease}
.item:first-child{border-top:0}
.page a.item:hover{background:var(--hover)}
.item .d{width:7px;height:7px;border-radius:50%;margin-top:8px;background:var(--cobalt)}
.item .d.hot{background:var(--burg)}
.item .d.quiet{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.item .t{font:400 16.5px/1.4 'Crimson Pro',serif;color:var(--ink)}
.item small{display:block;font:400 12px/1.4 Inter,sans-serif;color:var(--dim);margin-top:3px}
.item .w{font:500 11.5px/2 Inter,sans-serif;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.tbl{width:100%;min-width:760px;border-collapse:collapse;font:400 14px/1.3 Inter,sans-serif}
.tbl th{font:600 11.5px/1.3 Inter,sans-serif;color:var(--dim);text-align:right;padding:16px 20px 12px;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left;padding-left:24px}
.tbl td{padding:14px 20px;text-align:right;border-top:1px solid var(--l07);font-variant-numeric:tabular-nums}
.tbl td:first-child{font:400 19px/1.2 'Crimson Pro',serif}
.tbl td:last-child,.tbl th:last-child{padding-right:24px}
.tbl .off{font-weight:700}
.tbl .off i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--burg);margin-right:8px;vertical-align:1px}
.tbl .zero{color:var(--dim)}
.tbl tfoot td{font-weight:600;background:var(--zebra)}
.tbl tfoot td:first-child{font:600 13px/1.3 Inter,sans-serif}
.tbl tbody tr{transition:background .2s ease}
.tbl tbody tr:hover{background:var(--hover)}
.roofs{display:none}
.roof{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:15px 18px;border-top:1px solid var(--l07)}
.roof:first-child{border-top:0}
.roof .n{font:400 20px/1.2 'Crimson Pro',serif}
.roof .s{grid-column:1;font:400 13px/1.45 Inter,sans-serif;color:var(--muted)}
.roof .s b{font-weight:600;color:var(--ink)}
.roof svg{grid-column:2;grid-row:1/3;color:var(--dim)}

/* passkey nudge (home) */
.nudge{position:fixed;right:24px;bottom:24px;z-index:60;width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:18px 20px 16px;background:var(--elev);border:1px solid var(--l14);border-radius:18px;box-shadow:var(--pop-shadow);font-family:Inter,sans-serif;animation:sv-rise .3s cubic-bezier(.22,.61,.36,1)}
.nudge b{display:block;font:400 21px/1.2 'Crimson Pro',serif;color:var(--ink)}
.nudge p{font:400 13px/1.5 Inter,sans-serif;color:var(--muted);margin:6px 0 0}
.nudge div{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ------------------------------------------------------------------ setup */
[data-page=setup] .cols,[data-page=app] .cols{display:grid;grid-template-columns:316px minmax(0,1fr);gap:32px;margin-top:32px;align-items:start}
.rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px 22px}
.rhead .n{font:400 34px/1.1 'Crimson Pro',serif;letter-spacing:-.015em;margin:0}
.rhead .a{font:400 13.5px/1.4 Inter,sans-serif;color:var(--dim);margin:6px 0 0}
.rhead .pace{font:400 13px/1.4 Inter,sans-serif;color:var(--muted);margin:0 4px 0 auto;padding:0 0 9px}
.rhead .pace b{font-weight:700;color:var(--ink)}
.rhead .pace i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--burg);margin-right:6px;vertical-align:1px}
.block{padding:20px 28px 24px;border-top:1px solid var(--l07)}
.lbl{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font:600 12px/1.3 Inter,sans-serif;color:var(--dim);margin:0 0 14px}
.lbl span{font-weight:400}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;margin:0}
.facts dt{font:400 12.5px/1.3 Inter,sans-serif;color:var(--dim)}
.facts dd{margin:5px 0 0;font:500 14.5px/1.4 Inter,sans-serif;color:var(--ink)}
.facts dd small{display:block;font:400 12.5px/1.4 Inter,sans-serif;color:var(--dim);margin-top:1px}
.facts dd img{display:block;max-height:30px;max-width:150px;margin-bottom:4px}
.apps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.apps > a,.apps > div{display:block;padding:13px 14px 12px;border-radius:14px;border:1px solid var(--l10);background:var(--field);transition:border-color .2s ease}
.page .apps > a:hover{border-color:var(--cobalt)}
.apps .an{display:block;font:400 20px/1.15 'Crimson Pro',serif}
.apps .st{display:flex;align-items:center;gap:6px;font:500 12px/1 Inter,sans-serif;color:var(--green);margin-top:8px}
.apps .st i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.apps .set{display:block;font:500 12px/1 Inter,sans-serif;color:var(--cobalt);margin-top:9px}
.apps .set.tbtn{font-size:12px;line-height:1}
.apps .off{background:transparent;border-style:dashed;border-color:var(--l20)}
.apps .off .an{color:var(--muted)}
.apps .off .st{color:var(--dim)}
.apps .off .st i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.invite{padding:22px 28px 22px;border-bottom:1px solid var(--l07);background:rgba(46,86,148,.035)}
body.dark .invite{background:rgba(122,167,230,.05)}
.irow{display:grid;grid-template-columns:minmax(0,1fr) 280px auto;gap:14px;align-items:end}
.irow.four{grid-template-columns:minmax(0,1fr) 220px 220px auto}
.can{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.can .cap{margin:0 6px 0 0}
.ihint{font:400 12.5px/1.5 Inter,sans-serif;color:var(--dim);margin:14px 0 0}
.prow{display:grid;grid-template-columns:34px minmax(0,1.35fr) 150px minmax(0,1.2fr) 118px 62px;align-items:center;gap:16px;padding:13px 28px;border-top:1px solid var(--l07);font:400 13.5px/1.4 Inter,sans-serif;color:var(--muted);transition:background .2s ease}
.prow.head{border-top:0;padding-top:16px;padding-bottom:10px;font:600 11.5px/1.3 Inter,sans-serif;color:var(--dim)}
.page a.prow:hover{background:var(--hover)}
.prow .who{min-width:0}
.prow .who b{display:block;font:400 19px/1.2 'Crimson Pro',serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .who small{display:block;font:400 12.5px/1.4 Inter,sans-serif;color:var(--dim);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .role{font-weight:500;color:var(--ink)}
.prow .role small{display:block;font:400 12.5px/1.4 Inter,sans-serif;color:var(--dim);margin-top:1px}
.prow .last{font-variant-numeric:tabular-nums}
.prow .go{color:var(--dim);justify-self:end}
.prow .act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;justify-self:end}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 28px 17px;border-top:1px solid var(--l07);font:500 13px/1 Inter,sans-serif;color:var(--dim)}
.page .pfoot a,.pfoot .tbtn{color:var(--cobalt)}

/* ------------------------------------------------------------------ person */
.say{display:grid;grid-template-columns:284px minmax(0,1fr);gap:10px 36px;align-items:start;margin-top:28px;padding:26px 30px 28px}
.say .who{display:flex;align-items:center;gap:14px;min-width:0}
.say .face{width:46px;height:46px;font:600 15px/46px Inter,sans-serif;background:linear-gradient(135deg,#1E3E72,#2E5694)}
.say .who b{display:block;font:400 22px/1.15 'Crimson Pro',serif;overflow-wrap:anywhere}
.say .who small{display:block;font:400 12.5px/1.4 Inter,sans-serif;color:var(--dim);margin-top:2px;overflow-wrap:anywhere}
.words{font:300 23px/1.5 'Crimson Pro',serif;margin:0;max-width:84ch;text-wrap:pretty}
.words b{font-weight:500}
[data-page=person] .cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:32px;margin-top:30px;align-items:start}
.box{padding:20px 22px 22px}
.box .selw select{height:46px;padding:0 42px 0 14px;font:500 15px/1 Inter,sans-serif}
.acts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.opt{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--l07);cursor:pointer}
.opt:first-child{border-top:0;padding-top:2px}
.opt:last-of-type{padding-bottom:0}
.rd{width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--l40);flex:none;margin-top:1px;background:var(--field);transition:border .15s ease}
.opt input:checked + .rd{border:5.5px solid var(--pill)}
.opt input:disabled + .rd{opacity:.5}
.ot b{display:block;font:500 14px/1.35 Inter,sans-serif}
.ot small{display:block;font:400 12.5px/1.45 Inter,sans-serif;color:var(--dim);margin-top:1px}
.box .f,.grps .f{padding:11px 0;border-top:1px solid var(--l07)}
.box .f:first-child{border-top:0;padding-top:2px}
.box .f:last-of-type{padding-bottom:0}
.dl{margin:0}
.dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--l07);font:400 13.5px/1.4 Inter,sans-serif}
.dl div:first-child{border-top:0;padding-top:2px}
.dl dt{color:var(--dim)}
.dl dd{margin:0;font-weight:500;text-align:right}
.appx{border-top:1px solid var(--l07)}
.appx:first-child{border-top:0}
.appx summary{display:grid;grid-template-columns:minmax(0,1fr) auto 74px 20px;align-items:center;gap:18px;padding:19px 28px;cursor:pointer;list-style:none;border-radius:21px;transition:background .2s ease}
.appx summary::-webkit-details-marker{display:none}
.appx summary:hover{background:var(--hover)}
.an{display:block;font:400 26px/1.15 'Crimson Pro',serif;letter-spacing:-.01em}
.as{display:block;font:400 13.5px/1.45 Inter,sans-serif;color:var(--muted);margin-top:3px}
.tag{font:600 12px/1 Inter,sans-serif;color:var(--deep);background:var(--tint2);border-radius:999px;padding:7px 11px;white-space:nowrap}
.tag.off{color:var(--soft);background:var(--quiet2)}
.cnt{font:500 12.5px/1 Inter,sans-serif;color:var(--dim);text-align:right;white-space:nowrap}
.chev{color:var(--dim);transition:transform .25s ease}
.appx[open] .chev{transform:rotate(90deg)}
.appx .body{padding:2px 28px 26px}
.levrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0 18px}
.lev{position:relative;display:inline-grid;grid-template-columns:repeat(4,auto);margin:0;padding:4px;border:0;border-radius:12px;background:var(--quiet2);min-width:0}
.lev input{position:absolute;opacity:0;pointer-events:none}
.lev label{display:flex;align-items:center;justify-content:center;height:32px;padding:0 16px;border-radius:9px;font:500 13px/1 Inter,sans-serif;color:var(--muted);cursor:pointer}
.lev input:checked + label{background:var(--elev);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,22,26,.14),0 0 0 1px rgba(20,22,26,.05)}
.lev input:focus-visible + label{outline:2px solid var(--cobalt);outline-offset:1px}
.lev input:disabled + label{cursor:default;opacity:.6}
.levrow .hint{margin:0;flex:1;min-width:240px}
.grps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;align-items:start}
.gh{font:600 12px/1 Inter,sans-serif;color:var(--dim);margin:0;padding:0 0 10px}
.grps .gh + .f{border-top:0;padding-top:2px}
.stages{margin-top:18px;padding:16px 18px 18px;border-radius:16px;background:var(--hover);border:1px solid var(--tint2)}
.stages .cap{display:block;margin-bottom:12px}
.noton{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:19px 28px;border-top:1px dashed var(--l16)}
.noton .an{color:var(--muted)}
.namefld{margin-top:28px;padding:22px 30px 24px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:10px 36px;align-items:end}
.namefld p{font:400 13.5px/1.5 Inter,sans-serif;color:var(--muted);margin:0;padding-bottom:4px}

/* ------------------------------------------------------------------ app setup */
.inapp{padding:20px 22px 22px}
.inapp p{font:400 13.5px/1.55 Inter,sans-serif;color:var(--muted);margin:0}
.carry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 28px;padding:18px 28px}
.carry .lead{font:600 12px/1.3 Inter,sans-serif;color:var(--dim)}
.carry dl{display:flex;flex-wrap:wrap;gap:6px 32px;margin:0}
.carry dl div{display:flex;gap:8px;font:400 13.5px/1.4 Inter,sans-serif}
.carry dt{color:var(--dim)}
.carry dd{margin:0;font-weight:500}
.srow{display:grid;grid-template-columns:minmax(0,1fr) 168px minmax(0,1.3fr) 150px;align-items:center;gap:20px;padding:13px 28px;border-top:1px solid var(--l07);font:400 13.5px/1.4 Inter,sans-serif;color:var(--muted)}
.srow.head{border-top:0;padding-top:18px;padding-bottom:10px;font:600 11.5px/1.3 Inter,sans-serif;color:var(--dim)}
.sn{display:flex;align-items:baseline;gap:12px}
.sn i{font:500 12px/1 Inter,sans-serif;font-style:normal;color:var(--dim);width:14px;font-variant-numeric:tabular-nums}
.sn b{font:400 21px/1.2 'Crimson Pro',serif;color:var(--ink)}
.srow .pace{display:flex;align-items:center;gap:8px}
.num{width:54px;height:36px;box-sizing:border-box;border-radius:10px;border:1px solid var(--l16);background:var(--field);font:500 14.5px/1 Inter,sans-serif;color:var(--ink);text-align:center;padding:0;font-variant-numeric:tabular-nums;outline:none}
.num:focus{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(46,86,148,.16)}
.num:disabled{opacity:.6}
.srow .selw select{height:36px;border-radius:10px;font:500 13.5px/1 Inter,sans-serif}
.srow .f{justify-content:flex-start}
.srow .f span.t{font:400 13px/1.3 Inter,sans-serif;color:var(--muted)}
.sfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:15px 28px 17px;border-top:1px solid var(--l07);font:400 13px/1.4 Inter,sans-serif;color:var(--dim)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;padding:8px 28px 10px}
.rules .f{padding:15px 0;border-top:1px solid var(--l07)}
.rules .f:nth-child(-n+2){border-top:0}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;padding:20px 28px 22px}
.trio .fld .pace{display:flex;align-items:center;gap:8px;font:400 13.5px/1.4 Inter,sans-serif;color:var(--muted)}
.trio small{display:block;font:400 12.5px/1.45 Inter,sans-serif;color:var(--dim);margin-top:8px}
.copy{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;padding:20px 28px 22px}
.copy p{font:400 13.5px/1.5 Inter,sans-serif;color:var(--muted);margin:0;flex:1;min-width:260px}

/* ------------------------------------------------------------------ account */
[data-page=account] .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:30px;align-items:start}
.box .fld + .fld{margin-top:16px}
.box > .hint:first-child{margin-top:0;margin-bottom:14px}
.arow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--l07)}
.arow:first-child{border-top:0;padding-top:2px}
.arow .at{flex:1;min-width:0}
.arow .at b{display:block;font:500 14px/1.35 Inter,sans-serif;overflow-wrap:anywhere}
.arow .at small{display:block;font:400 12.5px/1.45 Inter,sans-serif;color:var(--dim);margin-top:1px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin-top:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--l10);background:var(--field);font:500 14.5px/1.5 Inter,sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.range{display:flex;align-items:center;gap:16px}
.range input{flex:1;min-width:0;accent-color:var(--cobalt)}
.range output{font:400 24px/1 'Crimson Pro',serif;min-width:78px;text-align:right}

/* ------------------------------------------------------------------ reports */
.rlist a{display:grid;grid-template-columns:132px minmax(0,1fr) 20px;align-items:center;gap:18px;padding:19px 24px;border-top:1px solid var(--l07);transition:background .2s ease}
.rlist a:first-child{border-top:0}
.page .rlist a:hover{background:var(--hover)}
.rlist .n{font:400 25px/1.1 'Crimson Pro',serif;letter-spacing:-.01em}
.rlist .s{font:400 14px/1.45 Inter,sans-serif;color:var(--muted)}
.rlist svg{color:var(--dim)}

/* ------------------------------------------------------------------ narrower */
@media(max-width:1100px){
  [data-page=setup] .cols,[data-page=app] .cols,[data-page=person] .cols,[data-page=account] .cols,.say,.namefld{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .irow,.irow.four{grid-template-columns:1fr}
  .prow{grid-template-columns:34px minmax(0,1fr) 62px}
  .prow .role,.prow .can-open,.prow .last,.prow.head{display:none}
  .grps{grid-template-columns:1fr}
  .grps > div + div{margin-top:18px}
  .appx summary{grid-template-columns:minmax(0,1fr) auto 20px}
  .cnt{display:none}
  .carry{grid-template-columns:1fr}
  .srow{grid-template-columns:minmax(0,1fr) 150px}
  .srow{row-gap:10px}
  .srow.head span:nth-child(3),.srow.head span:nth-child(4){display:none}
  .rules,.trio{grid-template-columns:1fr}
  .trio .fld + .fld{margin-top:18px}
  .rules .f:nth-child(2){border-top:1px solid var(--l07)}
}
@media(max-width:1000px){
  [data-page=home] .cols{display:flex;flex-direction:column;gap:0;margin-top:0}
  [data-page=home] .cols > aside{order:-1}
  [data-page=home] .cols .sech{margin-top:26px}
  .morning{grid-template-columns:1fr}
  .mhead{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:0}
}
@media(max-width:600px){
  .page{padding-top:8px}
  .wash{height:420px;background:radial-gradient(420px 300px at 10% 0%,var(--wash1),transparent 64%)}
  .wrap{padding:0 16px 16px}
  .hero{padding:30px 2px 0}
  .h1{font:300 36px/1.1 'Crimson Pro',serif}
  .greet > .btn,.save,.save .btn{width:100%}
  .greet > .btn,.save .btn{height:48px;border-radius:13px;font:600 14.5px/1 Inter,sans-serif}
  .greet > .btn{margin-top:4px}
  .morning{margin-top:22px;padding:18px 20px 22px;border-radius:20px}
  .mline{font:300 20px/1.5 'Crimson Pro',serif}
  .sech{margin:26px 6px 4px}
  .sech.gap{margin-top:26px}
  .cav{font-size:25px}
  .panel{border-radius:20px}
  .item{padding:15px 18px 16px}
  .item .t{font-size:17px}
  .app{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px;row-gap:6px;padding:16px 18px 17px}
  .app.lead{padding-top:16px;padding-bottom:17px}
  .app .n{font-size:24px}
  .app .fig{display:flex;align-items:baseline;gap:6px}
  .app .fig .v{font-size:28px}
  .app .fig .l{margin-top:0}
  .app .s{grid-column:1/-1}
  .app .go{display:none}
  .app .pace{margin-top:8px}
  .key .end{flex-basis:100%;margin-left:0}
  .tblwrap{display:none}
  .roofs{display:block}
  .say{margin-top:22px;padding:20px 20px 22px}
  .words{font-size:20px}
  .rhead,.block,.invite{padding-left:20px;padding-right:20px}
  .rhead .n{font-size:28px}
  .rhead .pace{margin-left:0}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prow,.pfoot,.sfoot,.srow,.copy,.carry{padding-left:20px;padding-right:20px}
  .appx summary,.noton{padding:17px 20px}
  .appx .body{padding:2px 20px 22px}
  .an{font-size:23px}
  .lev{display:grid;width:100%;grid-template-columns:repeat(4,1fr)}
  .lev label{padding:0 6px}
  .rules,.trio{padding-left:20px;padding-right:20px}
  .srow{grid-template-columns:minmax(0,1fr) 120px}
  .rlist a{grid-template-columns:minmax(0,1fr) 20px;padding:17px 18px}
  .rlist .s{grid-column:1}
  .rlist svg{grid-column:2;grid-row:1/3}
  .nudge{right:16px;bottom:16px}
  .namefld{padding:20px}
}
@media(prefers-reduced-motion:reduce){.page *{transition:none!important;animation:none!important}}