/* Astra: daylight blue, midnight blue, a cream object in either room.
   Georgia is deliberate: a native book face, available before any network call.
   Controls use the device's own sans. The engraved number keeps its own voice. */
:root{
  --s0:#e6edef;--s1:#f1f5f6;--s2:#dae4e8;--s3:#cad9e0;
  --edge:#c5d2d8;--edge2:#afc0c9;--edge3:#768e9c;
  --txt1:#203746;--txt2:#3c5464;--txt3:#526978;
  --dim1:#526574;--dim2:#596d7b;--dim3:#647887;--dim:var(--dim1);
  --lime:#d8ed8d;--lime-hi:#e5f4b1;--lime-edge:#c3d87f;--lime-edge2:#8ba345;
  --lime-txt:#435e15;--ink:#28332e;--card:#f6f2e7;--card2:#e9e2d1;
  --card-accent:#415a60;--card-dim:#68675b;--card-edge:#d1cbb9;
  --action:#284c64;--action-text:#fff;--room-glow:rgba(255,255,255,.55);
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --book:Georgia,"Times New Roman",serif;--r:22px;
}
:root[data-theme="dark"]{
  --s0:#142634;--s1:#1b3040;--s2:#253e4e;--s3:#304c5c;
  --edge:#354f60;--edge2:#486372;--edge3:#72909e;
  --txt1:#eef2ee;--txt2:#cad7dc;--txt3:#b1c4cd;
  --dim1:#b0c1ca;--dim2:#a3b9c5;--dim3:#96adbb;--dim:var(--dim1);
  --lime:#d8ed8d;--lime-hi:#e5f4b1;--lime-edge:#c3d87f;--lime-edge2:#a5be67;
  --card:#f6f2e7;--card2:#e9e2d1;--ink:#28332e;--sub:#5f5c50;
  --lime-txt:#d8ed8d;--action:#d8ed8d;--action-text:#243617;
  --room-glow:rgba(160,192,205,.07);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--s0);color:var(--txt1)}
body.v-auth,body.v-deck,body.v-board,body.v-settings{font-family:var(--ui);background:var(--s0);line-height:1.5}
body.v-deck::before,body.v-board::before,body.v-settings::before{display:none}
button,input,textarea,select{font-family:var(--ui)}
button,a,summary,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
:focus-visible{outline:3px solid var(--sky);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body .quiet-link{background:none;border:0;color:var(--txt2);text-decoration:underline;text-underline-offset:4px;padding:10px 0;display:inline-flex;align-items:center;min-height:44px;font:14px/1.4 var(--ui)}
:is(#view-deck,#view-board,#view-settings) .astra-header{position:static;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:none;padding:0;margin:0 0 28px;gap:16px}
:is(#view-deck,#view-board,#view-settings) .astra-header h1{font:400 42px/1.15 var(--book);letter-spacing:-1.5px;color:var(--txt1);margin:0}
:is(#view-deck,#view-board,#view-settings) .astra-header p{font:15px/1.5 var(--ui);color:var(--dim1);margin:10px 0 0}
:is(#view-deck,#view-board,#view-settings) .astra-header .mind-link{font:14px/1.2 var(--ui);background:transparent;border:1px solid var(--edge2);border-radius:100px;color:var(--txt1);min-height:46px;padding:10px 18px;flex:none}
:is(#view-deck,#view-board,#view-settings) .astra-header .mark{display:none}
body .shellnav{background:var(--s0);border-color:var(--edge);box-sizing:border-box}
body .shellnav a{font:15px/1.3 var(--ui);min-height:52px;color:var(--txt2)}
body .shellnav a.on{background:var(--s2)}
body .shellnav a.on svg{color:var(--txt1)}
body .shellnav::before{font:32px/1 var(--book);padding-bottom:54px}
body .shellnav .bdg{display:none}
body .fbtn{width:44px;height:44px;color:var(--txt2);background:var(--s1);bottom:18px}
body .fsheet .box{padding:28px;box-sizing:border-box}
body .fsheet button{min-height:44px;font-family:var(--ui)}
body .fsheet p{font:14px/1.6 var(--ui)}
body .fsheet textarea{font:16px/1.5 var(--ui)}
@media(min-width:721px){
  body:not(.v-auth){padding:44px 48px 60px 230px!important}
  body .shellnav{width:182px;padding:44px 18px;border-right:1px solid var(--edge)}
  body .shellnav ul{gap:10px}
  body .shellnav a{padding:14px}
}
@media(max-width:720px){
  body:not(.v-auth){padding:24px 20px calc(98px + env(safe-area-inset-bottom))!important}
  body .shellnav{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  body .shellnav a{font-size:12px;gap:5px}
  body .fbtn{bottom:calc(88px + env(safe-area-inset-bottom));right:10px}
  :is(#view-deck,#view-board,#view-settings) .astra-header h1{font-size:32px;letter-spacing:-1px}
  :is(#view-deck,#view-board,#view-settings) .astra-header p{font-size:14px}
  :is(#view-deck,#view-board,#view-settings) .astra-header{margin-bottom:24px;gap:12px}
  :is(#view-deck,#view-board,#view-settings) .astra-header .mind-link{font-size:13px;padding:10px 14px}
}
/* Landing: the product in your hand, with room around it. */
body.v-auth.v-land{padding:0!important}
#screen-land{background:var(--s0);height:auto;min-height:100dvh}
:root[data-theme="dark"] #screen-land{background:var(--s0)}
#screen-land #l-sky{opacity:.55;--con-dot:rgba(70,102,118,.4);--con-line:rgba(70,102,118,.2)}
#screen-land .lnav{max-width:1320px;padding:28px 48px}
#screen-land .lmark{font:32px/1 var(--book)}
#screen-land .lmark em{color:inherit}
#screen-land .lnavr .lup{background:var(--s2);border-color:var(--edge2);box-shadow:none;color:var(--txt1)}
#screen-land .lhero{max-width:1220px;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;align-content:center;align-items:center;gap:0 70px;padding:32px 48px 60px;flex:1;}
#screen-land .lcopy{order:0;text-align:left;max-width:580px;align-self:end;padding-bottom:28px}
#screen-land h1{font:400 clamp(46px,4.9vw,72px)/1.06 var(--book);letter-spacing:-3px;text-wrap:balance;margin:0 0 28px}
#screen-land .lsub{font:16px/1.8 var(--ui);color:var(--txt2)}
#screen-land .lstack{order:0;grid-column:2;grid-row:1/3;gap:20px}
#screen-land .lcardwrap{width:304px;--r:22px;transform:rotate(3deg)}
#screen-land .lcardwrap .stage{max-width:none}
#screen-land .lcardwrap::before{display:none}
#screen-land .lcardwrap .face,:root[data-theme="dark"] #screen-land .lcardwrap .face{box-shadow:0 2px 2px rgba(0,0,0,.12),0 24px 38px -18px rgba(0,0,0,.4),0 1px 0 #fff inset}
#screen-land .lcta{grid-column:1;align-self:start;align-items:flex-start;gap:16px;margin:0}
#screen-land .lup,#screen-land .lyes{font:500 14px/1.3 var(--ui);background:var(--lime);border-color:var(--lime-edge2);box-shadow:0 2px 0 rgba(255,255,255,.5) inset}
#screen-land .lup.big{font-size:16px;padding:16px 30px;box-shadow:none;min-height:54px}
#screen-land .lup::after{display:none}
#screen-land .lprice{font:13px/1.7 var(--ui);color:var(--dim1)}
#screen-land .lsay{min-height:106px;width:340px;max-width:100%}
#screen-land .lhint{font:13px/1.5 var(--ui);text-transform:none;letter-spacing:0;padding-top:12px}
#screen-land .lwhy{font:12px/1.5 var(--ui)}
#screen-land .lfoot,:root[data-theme="dark"] #screen-land .lfoot{background:transparent;border-top:1px solid var(--edge);padding:28px 48px 22px;gap:22px}
#screen-land .lsteps{max-width:1124px;gap:38px;grid-template-columns:repeat(3,1fr)}
#screen-land .lstep{display:block;font:13px/1.6 var(--ui)}
#screen-land .lstep .n{display:block;font:20px/1.3 var(--book);text-transform:none;letter-spacing:0;color:var(--txt1);margin-bottom:7px}
#screen-land .lfine{font:11px/1.5 var(--ui)}
@media(max-width:879px){
  #screen-land .lnav{padding:18px 22px}
  #screen-land .lhero{display:flex;flex-direction:column;padding:22px 22px 36px;gap:24px}
  #screen-land .lcopy{align-self:center;text-align:center;padding:0;max-width:530px}
  #screen-land h1{font-size:46px;letter-spacing:-1.8px;margin-bottom:18px}
  #screen-land .lsub{font-size:14px;line-height:1.7}
  #screen-land .lcardwrap{width:260px;transform:rotate(2deg)}
  #screen-land .lstack{gap:8px}
  #screen-land .lsay{min-height:52px;width:300px}
  #screen-land .lcta{align-self:center;align-items:center;text-align:center}
  #screen-land .lfoot{padding:26px 24px}
  #screen-land .lsteps{grid-template-columns:1fr;gap:20px;max-width:440px}
  #screen-land .lstep .n{display:inline-block;min-width:72px;font-size:18px;margin:0 10px 0 0}
}
@media(min-width:880px) and (max-height:760px){
  #screen-land .lnav{padding-top:20px;padding-bottom:16px}
  #screen-land .lhero{padding-top:12px;padding-bottom:22px}
  #screen-land .lcardwrap{width:250px}
  #screen-land h1{font-size:52px}
  #screen-land .lfoot{padding-top:18px;padding-bottom:16px;gap:14px}
}
/* Today: a card with a resting place. */
body.v-deck{display:block;min-height:100dvh;height:auto;overflow-x:clip}
#view-deck.on{display:flex;align-items:center;flex-direction:column;width:100%;max-width:1120px;margin:0 auto}
#view-deck .astra-header{margin-bottom:0}
#view-deck .when{display:block;font:13px/1.5 var(--ui);color:var(--dim1);margin:8px 0 0;white-space:normal}
#view-deck .ritual-caption{font:16px/1.5 var(--book);color:var(--dim1);text-align:center;margin:24px 0 24px}
#view-deck #stage{width:100%;max-width:320px;min-height:0;padding:0;margin:0 auto}
#view-deck #stage:has(.done){max-width:560px;min-height:0;padding:28px 0}
#view-deck .rule{width:100%;max-width:340px;min-height:68px;margin:28px auto 0}
#view-deck .swipe{display:flex;gap:12px}
#view-deck .swipe button{min-height:54px;font:500 16px/1.2 var(--ui);padding:15px 22px;border-radius:100px}
#view-deck .swipe .no{background:transparent;border:1px solid var(--edge2);color:var(--txt1)}
#view-deck .swipe .ok{background:var(--lime);border:1px solid var(--lime-edge2);color:var(--on-accent)}
#view-deck .swipe button::before,#view-deck .swipe button::after{display:none}
#view-deck .swipe .ok:hover{transform:none;background:var(--lime);color:var(--on-accent);border-color:var(--lime-edge2)}
#view-deck .swipe .no:hover{transform:none;background:var(--s1);color:var(--txt1);border-color:var(--edge2)}
#view-deck .swipe .ok span{font-size:20px;padding-left:6px}
#view-deck .hint{font:14px/1.5 var(--ui);color:var(--dim1);letter-spacing:0;text-transform:none;padding:8px 0}
#view-deck .keep-receipt{font:20px/1.4 var(--book);color:var(--txt1);text-align:center;padding:12px}
#view-deck .card-thought{text-align:center;margin:9px 0 0}
#view-deck .card-thought summary{display:inline-flex;align-items:center;min-height:44px;font:14px/1.5 var(--ui);color:var(--dim1);cursor:pointer}
#view-deck .card-thought textarea{width:100%;font:16px/1.5 var(--ui);padding:14px;background:var(--s1);color:var(--txt1);border:1px solid var(--edge2);border-radius:14px;text-align:left}
#view-deck .done{width:100%;max-width:none;max-height:none;overflow:visible;padding:0;text-align:center}
#view-deck .done h2{font:400 40px/1.15 var(--book);letter-spacing:-1px;margin:20px 0}
#view-deck .done p{font:15px/1.7 var(--ui);color:var(--dim1)}
#view-deck .done .big,#view-deck .done .primary{display:block;margin:28px auto 8px;background:var(--action);color:var(--action-text);font:15px/1.4 var(--ui);padding:15px 24px;min-height:52px;border:0;border-radius:100px}
#view-deck .quiet-hour .quiet-link{display:flex;margin:0 auto;justify-content:center}
#view-deck .hour-seal{width:158px;height:200px;margin:20px auto 32px;display:grid;place-items:center;background:var(--card);color:var(--card-accent);font:38px/1 var(--book);border-radius:22px;border:1px solid var(--card-edge);outline:1px solid var(--card-edge);outline-offset:-12px;box-shadow:5px 6px 0 var(--card2),0 22px 40px -25px #203746;transform:rotate(-6deg)}
#view-deck .done.asking{padding:32px;text-align:left;color:var(--ink)}
#view-deck .done.asking .mq{font:28px/1.3 var(--book);margin:16px 0}
#view-deck .done.asking textarea{background:var(--card);color:var(--ink);font:16px/1.6 var(--ui);min-height:160px}
#view-deck .done.asking .mtier{font:13px/1.5 var(--ui);text-transform:none;letter-spacing:0}
#view-deck .mrow button{min-height:48px;font:14px/1.4 var(--ui)}
#view-deck .scrim{z-index:90}
#view-deck .sheet{z-index:91;max-height:90dvh;overflow-y:auto;background:var(--s1);padding:28px;border-color:var(--edge2)}
#view-deck .sheet .inner{max-width:480px;margin:auto}
#view-deck .sheet h2,#view-deck .mindsheet .mindq{font:30px/1.2 var(--book);color:var(--txt1);margin:10px 0 14px}
#view-deck .sheet .sheet-note,#view-deck .mindsheet .mindhint{font:14px/1.6 var(--ui);color:var(--dim1);margin-bottom:20px}
#view-deck .sheet textarea{font:16px/1.6 var(--ui);background:var(--s0);color:var(--txt1);border:1px solid var(--edge2);border-radius:14px;width:100%;padding:14px}
#view-deck .sheet .row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
#view-deck .sheet button,#view-deck .reads .row button{font:14px/1.4 var(--ui);min-height:48px;padding:12px 20px;border-radius:100px}
#view-deck .reads .row button{background:var(--action);color:var(--action-text);border:1px solid transparent}
#view-deck .reads .row button:hover{color:var(--action-text);border-color:var(--action)}
#view-deck .reads .row .skip{flex:1 1 140px!important;color:var(--txt2)!important}
#view-deck .smaller-choice{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:14px;font:14px/1.5 var(--ui);color:var(--txt2);cursor:pointer}
#view-deck .smaller-choice input{width:22px;height:22px;accent-color:var(--action)}
#view-deck #count-below{display:none!important}
@media(max-width:720px){
  #view-deck .when{display:none}
  #view-deck .ritual-caption{margin:18px 0 22px;font-size:15px}
  #view-deck #stage{max-width:min(304px,calc((100dvh - 280px)/1.4));min-width:230px}
  #view-deck .rule{margin-top:26px;max-width:320px}
  #view-deck .done h2{font-size:32px}
  #view-deck .done.asking{padding:22px}
  #view-deck .sheet{padding:22px 22px calc(28px + env(safe-area-inset-bottom))}
}
/* The object: edge, paper, photograph. Same in either room. */
#view-deck .face,.card3d .face,#view-auth .card3d .face{border-radius:22px;background:var(--card)}
#view-deck .front .body,#view-auth .card3d .front .body{padding:20px 22px}
#view-deck .front .wish,#view-auth .card3d .front .wish{font-family:var(--book);font-size:22px;line-height:1.17;letter-spacing:-.5px;color:var(--ink)}
#view-deck .front .why,#view-auth .card3d .front .why{font:13px/1.55 var(--ui);color:var(--sub);margin-top:12px}
#view-deck .front .cat,#view-auth .card3d .front .cat{font:11px/1.4 var(--ui);letter-spacing:0;text-transform:none;color:var(--sub);margin-bottom:10px}
#view-deck .front .cat b,#view-auth .card3d .front .cat b{display:none}
#view-deck .face.front,#view-auth .card3d .face.front{overflow:auto;scrollbar-width:none}
#view-deck .face.front::-webkit-scrollbar,#view-auth .card3d .face.front::-webkit-scrollbar{display:none}
#view-deck .shot,#view-auth .card3d .shot{height:44%;object-fit:cover}
.card3d .riser.float{animation:none!important}
.card3d .back .num{color:var(--card-accent)}
.card3d .foil{opacity:.22}
:root.the-eleven #view-deck .ritual-caption{color:var(--lime-txt)}
:root.the-eleven #view-deck .face{outline:2px solid var(--lime);outline-offset:5px}
/* Sign in and six unhurried questions. */
body.v-auth{padding:0 24px!important}
#view-auth .auth{padding:60px 0;min-height:100dvh;display:flex;align-items:center;justify-content:center}
#view-auth .auth.hide{display:none}
#view-auth .authbox{width:100%;max-width:400px}
#view-auth .authbox h1{font:44px/1 var(--book);color:var(--txt1);margin-bottom:22px}
#view-auth .authbox .sub2{font:16px/1.7 var(--ui);color:var(--dim1);margin-bottom:28px}
#view-auth .authbox label{text-transform:none;letter-spacing:0;font:14px/1.4 var(--ui);color:var(--txt2);margin:16px 0 8px}
#view-auth .authbox input{height:50px;font:16px/1.4 var(--ui);background:var(--s1);color:var(--txt1);border:1px solid var(--edge2);border-radius:12px;padding:12px}
#view-auth .authbox button.primary{letter-spacing:0;font:16px/1.4 var(--ui);background:var(--action);color:var(--action-text);min-height:52px;border-radius:100px;margin-top:26px}
#view-auth .authbox .swap{font:14px/1.7 var(--ui)}
#view-auth .swap button{font:14px/1.5 var(--ui);color:var(--txt1);min-height:44px;padding:8px 6px;background:none;border:0;text-decoration:underline;text-underline-offset:4px}
#view-auth .authbox .hint2{font:12px/1.5 var(--ui);color:var(--dim1)}
#view-auth #screen-interview{width:100%;padding:0;max-width:760px;margin:auto;min-height:100dvh;background:transparent}
#view-auth #screen-interview::before{display:none}
#view-auth #screen-interview .hd{padding:38px 0;position:static;margin:0;border:0;display:flex;justify-content:space-between;align-items:center}
#view-auth #screen-interview .hd h1{font:32px/1 var(--book);color:var(--txt1)}
#view-auth #screen-interview .sec{font:13px/1.5 var(--ui);letter-spacing:0;text-transform:none;color:var(--dim1)}
#view-auth #screen-interview main{padding:50px 0 60px;display:block;min-height:0}
#view-auth #screen-interview .card{background:none;border:0;box-shadow:none;padding:0;max-width:640px;width:100%;margin:auto;min-height:0}
#view-auth #screen-interview .q{font:400 38px/1.25 var(--book);letter-spacing:-1px;color:var(--txt1);margin-bottom:20px}
#view-auth #screen-interview .hint{font:15px/1.7 var(--ui);color:var(--dim1);margin-bottom:24px}
#view-auth #screen-interview textarea{font:18px/1.7 var(--ui);padding:22px;background:var(--s1);color:var(--txt1);border:1px solid var(--edge2);border-radius:18px;min-height:200px;width:100%;resize:vertical}
#view-auth #screen-interview .row{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
#view-auth #screen-interview button,#view-auth #screen-interview .row button{font:15px/1.4 var(--ui);padding:14px 24px;min-height:50px;border-radius:100px;background:var(--action);color:var(--action-text);border:0}
#view-auth #screen-interview .row button:hover{background:var(--action);color:var(--action-text)}
#view-auth #screen-interview button.ghost,#view-auth #screen-interview .row button.ghost{background:none;color:var(--txt2)}
#view-auth #screen-interview input.one{font:18px/1.7 var(--ui);padding:16px 22px;min-height:56px;background:var(--s1);color:var(--txt1);border:1px solid var(--edge2);border-radius:18px}
#view-auth #screen-interview textarea:focus,#view-auth #screen-interview input.one:focus{outline:2px solid var(--txt1);outline-offset:3px;border-color:var(--edge2);box-shadow:none}
#view-auth #screen-interview .kbd{font:12px/1.5 var(--ui);color:var(--dim1);margin-top:24px}
#view-auth #screen-interview .finish-mark{font:64px/1 var(--book);color:var(--txt1);margin:0 0 44px}
#view-auth #screen-interview .card.done{text-align:center;padding-top:30px}
#view-auth #screen-interview .arc{max-width:410px;margin:0 auto 32px}
@media(max-width:720px){
  #view-auth #screen-interview .hd{padding:28px 0}
  #view-auth #screen-interview .sec{font-size:12px}
  #view-auth #screen-interview main{padding-top:24px}
  #view-auth #screen-interview .q{font-size:29px;letter-spacing:-.5px}
  #view-auth #screen-interview textarea{font-size:16px;min-height:190px;padding:18px}
  #view-auth #screen-interview .kbd{display:none}
}
/* Motion is an addition to the finished frame, never a requirement for it. */
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.reduce-motion .tilt{transform:none!important}
html.reduce-motion .riser{transform:none!important}
html.reduce-motion .gone-keep,html.reduce-motion .gone-drop{visibility:hidden}
/* The board is a place to return to, then a collection to browse. */
#view-board .wrap{max-width:1160px;margin:0 auto}
#view-board .board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 26px}
#view-board .tabs{margin:0;display:flex;gap:4px}
#view-board .tabs button{min-height:44px;padding:10px 20px;font:14px/1.3 var(--ui);letter-spacing:0;border:1px solid transparent;border-radius:100px;color:var(--txt2);background:none}
#view-board .tabs button.on{background:var(--txt1);color:var(--s0);font-weight:500}
#view-board .board-search input{width:210px;min-height:44px;font:14px/1.3 var(--ui);color:var(--txt1);background:var(--s1);border:1px solid var(--edge);border-radius:100px;padding:12px 18px}
#view-board .revisit-card{display:grid;grid-template-columns:40% 1fr;gap:40px;padding:28px;background:var(--s1);border:1px solid var(--edge);border-radius:28px;margin-bottom:32px;align-items:center}
#view-board .revisit-photo{padding:0;border:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--card);transform:rotate(-2deg);box-shadow:0 14px 26px -18px #172d3c}
#view-board .revisit-photo img{display:block;width:100%;height:100%;object-fit:cover;border:9px solid var(--card);border-radius:18px}
#view-board .revisit-label{font:14px/1.5 var(--ui);color:var(--dim1);margin:0 0 14px}
#view-board .revisit-copy h2{font:400 34px/1.16 var(--book);letter-spacing:-.8px;color:var(--txt1);margin-bottom:18px;max-width:24ch;overflow-wrap:anywhere}
#view-board .revisit-why{font:14px/1.6 var(--ui);color:var(--txt2);max-width:52ch}
#view-board blockquote{font:18px/1.5 var(--book);color:var(--txt1);margin:12px 0;overflow-wrap:anywhere}
#view-board blockquote cite{display:block;font:12px/1.5 var(--ui);color:var(--dim1);margin-top:12px;font-style:normal}
#view-board .revisit-actions{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
#view-board .revisit-actions button:not(.quiet-link){background:var(--action);color:var(--action-text);border:0;min-height:46px;padding:12px 22px;border-radius:100px;font:14px/1.3 var(--ui)}
#view-board .cats{display:block;margin:0 0 20px;padding:0;overflow:visible}
#view-board .category-select select{min-height:46px;font:14px/1.3 var(--ui);border:1px solid var(--edge2);border-radius:100px;padding:10px 38px 10px 18px;background:var(--s0);color:var(--txt1);max-width:100%}
#view-board .grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));grid-auto-rows:auto;gap:24px;align-items:stretch}
#view-board .it{border:1px solid var(--card-edge);border-radius:22px;padding:8px;background:var(--card);color:var(--ink);text-align:left;box-shadow:0 6px 12px -8px #203746;min-width:0}
#view-board .it img{aspect-ratio:5/4;border-radius:15px 15px 4px 4px;background:var(--card2)}
#view-board .it .cap{padding:15px 10px 18px}
#view-board .it .cat{font:11px/1.4 var(--ui);color:var(--sub);letter-spacing:0;text-transform:none;margin-bottom:7px}
#view-board .it .t{font:20px/1.23 var(--book);color:var(--ink);margin:0;text-wrap:pretty;overflow-wrap:anywhere}
#view-board .it .remembered{font:11px/1.4 var(--ui);color:var(--sub);padding:0 10px 12px}
#view-board .it .dnote{font:13px/1.5 var(--ui);color:var(--sub);margin-top:12px}
#view-board .empty{font:16px/1.7 var(--ui);color:var(--dim1);max-width:540px;padding:50px 0}
#view-board .empty h2{font:34px/1.2 var(--book);color:var(--txt1);margin-bottom:20px}
#view-board #sh{z-index:95;padding:24px;align-items:center;background:rgba(10,25,35,.65)}
#view-board .panel{position:relative;background:var(--card);color:var(--ink);border:1px solid var(--card-edge);border-radius:22px;max-width:540px;padding:0;max-height:calc(100dvh - 48px);overflow-y:auto;box-shadow:0 35px 100px -30px #0c1924}
#view-board .panel-photo{display:block;width:100%;height:220px;object-fit:cover}
#view-board .panel-reading{padding:28px}
#view-board .panel-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-edge);background:var(--card);color:var(--ink);font:24px/1 var(--ui);z-index:2}
#view-board .panel .card-category{font:12px/1.4 var(--ui);color:var(--sub);margin-bottom:12px}
#view-board .panel h3{font:30px/1.2 var(--book);letter-spacing:-.5px;color:var(--ink);margin-bottom:18px}
#view-board .panel .why{font:15px/1.7 var(--ui);color:var(--sub);margin-bottom:24px;overflow-wrap:anywhere}
#view-board .panel .say{border:0;margin:24px 0;padding:0}
#view-board .panel .saylab{display:block;font:15px/1.4 var(--ui);color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:10px}
#view-board .panel textarea{font:16px/1.5 var(--ui);background:var(--card);color:var(--ink);border:1px solid var(--card-edge);border-radius:12px;padding:14px;width:100%;resize:vertical}
#view-board .panel .csave{min-height:46px;font:14px/1.4 var(--ui);background:#284c64;color:white;border:0;border-radius:100px;padding:12px 20px;margin-top:12px}
#view-board .panel .save-note{font:13px/1.5 var(--ui);color:var(--sub);margin-top:10px}
#view-board .panel .your-words{background:var(--card2);border-radius:12px;padding:18px;font:18px/1.5 var(--book);color:var(--ink)}
#view-board .panel .your-words cite{color:var(--sub)}
#view-board .panel .card-more{border-top:1px solid var(--card-edge);border-bottom:1px solid var(--card-edge);padding:5px 0}
#view-board .panel summary{font:14px/1.5 var(--ui);color:var(--sub);min-height:44px;display:flex;align-items:center;cursor:pointer}
#view-board .panel summary::after{content:'+';margin-left:auto}
#view-board .panel details[open] summary::after{content:'−'}
#view-board .panel .opts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
#view-board .panel .opts button{min-height:44px;padding:12px;border:1px solid var(--card-edge);border-radius:10px;background:var(--card2);color:var(--ink);font:14px/1.3 var(--ui);text-align:left}
#view-board .panel .opts b{font:14px/1.3 var(--ui);color:var(--ink)}
#view-board .panel .lab{font:14px/1.5 var(--ui);letter-spacing:0;text-transform:none;color:var(--sub);margin:24px 0 12px}
#view-board .panel .nearbit{border-color:var(--card-edge);min-width:115px}
#view-board .panel .nearttl{font:14px/1.3 var(--book);color:var(--ink);padding:10px}
#view-board .panel .card-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
#view-board .panel .card-actions button,#view-board .panel .proof,#view-board .panel .sayline,#view-board .panel .closebtn{min-height:44px;font:14px/1.5 var(--ui);background:none;border:0;color:var(--sub);padding:10px 0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){
  #view-board .board-toolbar{gap:10px;flex-wrap:wrap;margin-bottom:20px}
  #view-board .board-search{flex:1;min-width:110px}
  #view-board .board-search input{width:100%;padding-left:14px}
  #view-board .tabs button{padding:10px 12px;font-size:13px}
  #view-board .revisit-card{grid-template-columns:94px 1fr;gap:18px;padding:18px;border-radius:22px;margin-bottom:24px;align-items:start}
  #view-board .revisit-photo{aspect-ratio:3/4;margin-top:5px}
  #view-board .revisit-photo img{border-width:5px}
  #view-board .revisit-copy h2{font-size:24px;margin-bottom:12px}
  #view-board .revisit-label{font-size:12px;margin-bottom:10px}
  #view-board .revisit-why{font-size:13px}
  #view-board .revisit-actions{gap:4px;margin-top:14px}
  #view-board .revisit-actions button:not(.quiet-link){padding:10px 18px}
  #view-board blockquote{font-size:15px}
  #view-board .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #view-board .it{padding:5px;border-radius:18px}
  #view-board .it img{border-radius:13px 13px 4px 4px;aspect-ratio:1}
  #view-board .it .cap{padding:12px 7px 15px}
  #view-board .it .t{font-size:17px}
  #view-board .it .cat{font-size:10px}
  #view-board #sh{padding:14px 10px;align-items:center}
  #view-board .panel{max-height:calc(100dvh - 28px);border-radius:22px}
  #view-board .panel-photo{height:180px}
  #view-board .panel-reading{padding:22px}
  #view-board .panel h3{font-size:27px}
}
/* You: appearance first. No configuration stands between a person and a card. */
#view-settings .wrap{max-width:700px;margin:0 auto}
#view-settings .astra-header{margin-bottom:34px}
#view-settings section{margin-bottom:28px}
#view-settings h2{font:20px/1.4 var(--book);text-transform:none;letter-spacing:0;color:var(--txt1);margin-bottom:10px}
#view-settings h2 i{display:none}
#view-settings .note,#view-settings .danger{font:14px/1.7 var(--ui);color:var(--dim1);margin:8px 0 16px}
#view-settings .themes{gap:16px;margin-top:18px}
#view-settings .tsw{min-height:74px;font:15px/1.5 var(--ui);color:var(--txt2);border:1px solid var(--edge2);padding:14px 20px;border-radius:18px}
#view-settings .tsw.on{border:2px solid var(--txt1);padding:13px 19px;color:var(--txt1)}
#view-settings .sw{width:34px;height:42px;border-radius:7px;transform:rotate(-7deg);border:4px solid var(--card);box-shadow:2px 3px 0 var(--edge);background:#e6edef}
#view-settings .sw-d{background:#142634}
#view-settings .who{font:14px/1.7 var(--ui);color:var(--dim1);overflow-wrap:anywhere}
#view-settings .who b{font-weight:500;color:var(--txt1)}
#view-settings .plan{display:none}
#view-settings .preferences{border-top:1px solid var(--edge2);border-bottom:1px solid var(--edge2);margin-bottom:28px}
#view-settings .preferences summary{font:20px/1.4 var(--book);padding:20px 0;cursor:pointer;min-height:64px;list-style:none;color:var(--txt1)}
#view-settings .preferences summary span{display:block;font:13px/1.5 var(--ui);color:var(--dim1);margin-top:4px}
#view-settings .preferences summary::after{content:'+';float:right;margin-top:-32px;font:24px/1 var(--ui)}
#view-settings .preferences[open] summary::after{content:'−'}
#view-settings .preferences section{padding:12px 0}
#view-settings .pip{width:52px;height:48px;min-width:44px;font:15px/1.4 var(--ui);color:var(--txt1);border:1px solid var(--edge2);border-radius:12px}
#view-settings .pip.on{background:var(--txt1);color:var(--s0);border-color:var(--txt1)}
#view-settings .cat{font:14px/1.4 var(--ui);padding:0 0 0 14px;border:1px solid var(--edge2);min-height:46px;gap:2px}
#view-settings .cat button{width:44px;height:44px;font-size:20px;color:var(--txt2)}
#view-settings .addrow input{font:16px/1.4 var(--ui);min-height:48px;min-width:0;padding:12px 18px}
#view-settings .addrow button{min-height:48px;font:14px/1.4 var(--ui)}
#view-settings .plan-price{font:34px/1.2 var(--book);color:var(--txt1)}
#view-settings .plan-price span{font:14px/1.4 var(--ui);color:var(--dim1)}
#view-settings .signout{min-height:46px;padding:12px 24px;font:14px/1.4 var(--ui);color:var(--txt1);border-color:var(--edge2)}
#view-settings .grp button{min-width:44px;min-height:44px}
#view-settings .grp .note{font-size:13px}

/* Final browser pass: retain the theme on inherited controls and paper forms. */
#view-auth .authbox button.primary:hover{background:var(--action);color:var(--action-text)}
#view-auth #screen-interview .big-btn{font:15px/1.4 var(--ui);letter-spacing:0;background:var(--action);color:var(--action-text);min-height:50px;padding:14px 24px}
#view-auth #screen-interview .card.done .q{border:0;padding-left:0}
#view-deck .done.asking .mrow button{background:#284c64;color:#fff;border:1px solid #284c64;font:14px/1.4 var(--ui);letter-spacing:0;box-shadow:none;min-height:48px}
#view-deck .done.asking .mrow button::after{display:none}
#view-deck .done.asking .mrow .ghostb{background:transparent;color:var(--ink);border-color:var(--card-edge)}
#view-board .it.done .cat{color:var(--sub)}
/* A landing sample must show its whole reason at phone size. */
#view-auth .card3d .front .cat{border:0;border-radius:0;padding:0;background:none}
@media(max-width:879px){
  #view-auth .card3d .shot{height:36%;flex-shrink:0}
  #view-auth .card3d .front .why{padding-top:0}
  #view-auth .card3d .front .wish{margin-top:0}
}