/* ============================================================
   Sage — a tarot reading journal
   ============================================================ */

:root{
  --ink:#0b0d15;
  --ink-2:#11141f;
  --panel:#171b29;
  --panel-2:#1e2334;
  --line:rgba(198,167,104,.16);
  --line-strong:rgba(198,167,104,.34);
  --gold:#c6a768;
  --gold-bright:#e6cd96;
  --gold-dim:rgba(198,167,104,.55);
  --cream:#ece6da;
  --cream-dim:#c3bcae;
  --muted:#8d879a;
  --rose:#c07a80;
  --violet:#8b7bb8;

  --serif:'Cormorant Garamond','EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --card-ratio:1.714;
  --radius:10px;
  --maxw:1160px;
  --col:880px;      /* long-form reading column */
  --measure:72ch;   /* comfortable line length for body prose */
  --gutter:32px;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(139,123,184,.10), transparent 60%),
    radial-gradient(900px 500px at 88% 4%, rgba(198,167,104,.08), transparent 62%),
    var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;   /* keeps the footer at the bottom of short pages */
}
/* min-width:0 is the important part: without it this flex item will not shrink
   below the intrinsic width of its widest child, so one over-wide element makes
   the whole page wider than a phone screen and the gutters slide off to the
   left. overflow-x:clip contains anything that still refuses to fit — clip
   rather than hidden, so it creates no scroll container. */
main{flex:1 0 auto;min-width:0;width:100%;max-width:100%;overflow-x:clip;}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.01em;margin:0;line-height:1.2;}
h1{font-size:2.4rem;}
h2{font-size:1.75rem;}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
a{color:var(--gold-bright);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Plain padding first, so it always applies. The safe-area version is layered
   on only where max() and env() are both supported — written the other way
   round, a browser that dislikes env() throws the whole declaration away and
   the page ends up with no gutters at all. */
.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter,20px);
}
@supports (padding:max(0px,1px)){
  .wrap{
    padding-left:max(var(--gutter,20px), env(safe-area-inset-left));
    padding-right:max(var(--gutter,20px), env(safe-area-inset-right));
  }
}
.hidden{display:none !important;}

/* ---------------- header ---------------- */

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,13,21,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:28px;height:66px;}

.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit;}
.brand:hover{text-decoration:none;}
.brand .mark{
  font-family:var(--serif);font-size:1.6rem;color:var(--gold-bright);
  letter-spacing:.16em;text-transform:uppercase;
}
.brand .sub{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);}

nav.main{display:flex;gap:2px;margin-left:24px;flex-wrap:wrap;}

.top-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.streak-chip{font-size:.76rem;color:var(--muted);white-space:nowrap;}
.streak-chip:empty{display:none;}
.top-settings{
  background:none;border:1px solid var(--line-strong);color:var(--cream-dim);
  font-family:var(--sans);font-size:.76rem;padding:7px 14px;border-radius:var(--radius,4px);
  cursor:pointer;transition:.15s;
}
.top-settings:hover{color:var(--cream);border-color:var(--cream-dim);}
.top-settings.active{background:var(--gold);border-color:var(--gold);color:var(--on-accent,#1a1508);font-weight:600;}

/* tabs within a section */
.sec-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-14px 0 28px;}
.sec-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;padding:12px 18px;cursor:pointer;transition:.15s;margin-bottom:-1px;
}
.sec-tab:hover{color:var(--cream);}
.sec-tab.on{color:var(--cream);border-bottom-color:var(--gold);}
nav.main button{
  background:none;border:none;color:var(--cream-dim);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 14px;border-radius:6px;cursor:pointer;transition:.16s;
}
nav.main button:hover{color:var(--cream);background:rgba(255,255,255,.04);}
nav.main button.active{color:var(--ink);background:var(--gold);font-weight:600;}

/* ---------------- generic bits ---------------- */

/* Vertical only. A padding shorthand here would also set left and right to
   zero, wiping out the gutters from .wrap on any element that carries both
   classes — invisible above the max-width, edge-to-edge below it. */
.view{padding-top:52px;padding-bottom:120px;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.page-head{margin-bottom:42px;border-bottom:1px solid var(--line);padding-bottom:26px;}
.page-head .eyebrow{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:12px;
}
.page-head p.lede{color:var(--cream-dim);max-width:60ch;margin:.7em 0 0;font-size:1.02rem;}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--gold);color:#1a1508;border:1px solid var(--gold);
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 22px;border-radius:6px;cursor:pointer;transition:.16s;
}
.btn:hover{background:var(--gold-bright);border-color:var(--gold-bright);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.ghost{background:transparent;color:var(--gold-bright);border-color:var(--line-strong);}
.btn.ghost:hover{background:rgba(198,167,104,.10);}
.btn.quiet{background:transparent;color:var(--muted);border-color:transparent;}
.btn.quiet:hover{color:var(--cream);background:rgba(255,255,255,.05);}
.btn.danger{background:transparent;color:var(--rose);border-color:rgba(192,122,128,.4);}
.btn.danger:hover{background:rgba(192,122,128,.12);}
.btn.sm{padding:8px 14px;font-size:.7rem;}

input[type=text],input[type=password],textarea,select{
  width:100%;background:var(--ink-2);border:1px solid var(--line);
  color:var(--cream);font-family:var(--sans);font-size:.95rem;
  padding:12px 14px;border-radius:6px;outline:none;transition:.16s;
}
input:focus,textarea:focus,select:focus{border-color:var(--line-strong);background:var(--panel);}
textarea{display:block;resize:vertical;line-height:1.65;min-height:120px;}
textarea.grow{overflow:hidden;resize:none;}   /* sized by script to fit its content */
input::placeholder,textarea::placeholder{color:#6a6478;}
label.field{display:block;margin-bottom:18px;}
label.field .lab{
  display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:8px;
}
label.field .hint{display:block;font-size:.82rem;color:var(--muted);margin-top:6px;}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;}
.panel > p{max-width:66ch;}

.divider{height:1px;background:var(--line);margin:48px 0;border:none;}

.ornament{text-align:center;color:var(--gold-dim);letter-spacing:.6em;margin:56px 0;font-size:.8rem;}

/* ---------------- list rows ---------------- */

.rows,.journal-list{display:flex;flex-direction:column;}
.row{
  display:grid;gap:20px;align-items:center;width:100%;
  background:none;border:none;border-bottom:1px solid var(--line);
  padding:15px 8px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background .15s;
}
.row:hover{background:var(--hover,rgba(255,255,255,.04));}
.row .rname{
  display:block;font-family:var(--serif);font-size:1.28rem;line-height:1.2;color:var(--cream);
}
.row .rsub{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.5;}
.row .rdate{text-align:center;}
.row .rdate b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:400;line-height:1;color:var(--gold-bright);}
.row .rdate i{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-top:4px;}
.row .thumbs{display:flex;gap:3px;align-items:center;}
.row .thumbs .th{display:block;width:23px;height:39px;overflow:hidden;border-radius:2px;border:1px solid var(--line);}
.row .thumbs .th img{width:100%;height:100%;object-fit:cover;display:block;}
.row .thumbs .more{font-size:.7rem;color:var(--muted);padding-left:4px;}

.row.spread{grid-template-columns:minmax(0,1fr) auto;}

/* entries are the densest list in the app — a journal of forty wants to be scannable */
.row.entry{grid-template-columns:50px minmax(0,1fr) auto;gap:20px;padding:10px 8px;}
.row.entry .rname{font-size:1.08rem;}
.row.entry .rsub{font-size:.76rem;margin-top:2px;}
.row.entry .rdate b{font-size:1.3rem;}
.row.entry .rdate i{font-size:.54rem;margin-top:2px;}
.row.entry .thumbs .th{width:19px;height:32px;}
.row.entry.compact{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:9px 6px;}
.row.entry.compact .rname{font-size:.98rem;}
.row.entry.compact .rsub{font-size:.72rem;}

.pips{display:flex;gap:3px;align-items:center;}
.pips i{display:block;width:9px;height:15px;border:1px solid var(--gold-dim);border-radius:2px;}

@media (max-width:620px){
  .row.entry{grid-template-columns:46px minmax(0,1fr);gap:16px;}
  .row.entry .thumbs{display:none;}
}

/* ---------------- the read page ---------------- */

.read{display:block;animation:fade .35s ease;}
.read-band{border-bottom:1px solid var(--line);background:var(--panel);}
.band-inner{max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter) 38px;}
.band-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.band-top .eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.band-cols{display:flex;gap:52px;align-items:flex-end;flex-wrap:wrap;}
.band-lead{flex:1 1 360px;}
.band-lead h1{font-size:2.9rem;line-height:1.05;margin:0 0 14px;}
.band-lead .lede{color:var(--cream-dim);font-size:1rem;line-height:1.7;margin:0 0 22px;max-width:48ch;}
.band-lead .actions{margin:0;}
.band-strip{flex:0 0 auto;}
.band-strip .eyebrow{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}

.read-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
}
.read-spreads{padding:32px var(--gutter) 64px;border-right:1px solid var(--line);}
.read-rail{padding:32px var(--gutter) 64px;background:var(--panel);}
.read-grid .eyebrow{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.rail-lead{font-family:var(--serif);font-size:1.3rem;line-height:1.35;margin:0 0 6px;color:var(--cream);}
.rail-sub{font-size:.88rem;color:var(--cream-dim);line-height:1.65;margin:0 0 14px;}
.divider.tight{margin:24px 0;}

@media (max-width:940px){
  .read-grid{grid-template-columns:1fr;}
  .read-spreads{border-right:none;border-bottom:1px solid var(--line);padding-bottom:40px;}
  .band-lead h1{font-size:2.2rem;}
}

/* guest switch, compact */
.guest-switch{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto;}
.guest-switch .rev-toggle{padding:7px 13px;}
.guest-switch .lbl{font-size:.68rem;}
.guest-switch input{width:150px;padding:7px 11px;font-size:.85rem;}
.guest-switch .note{font-size:.76rem;color:var(--muted);}
.guest-switch.on .rev-toggle .sw{background:rgba(139,123,184,.55);}
.guest-switch.on .rev-toggle .sw::after{background:var(--violet);}
.guest-switch.on .rev-toggle .lbl{color:var(--violet);}
@media (max-width:820px){
  .guest-switch{margin-left:0;width:100%;}
  .guest-switch .note{width:100%;}
}

/* ---------------- consent ---------------- */

.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--panel);border-top:1px solid var(--line-strong);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
  animation:fade .3s ease;
}
.consent-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.consent-inner p{
  margin:0;font-size:.88rem;line-height:1.65;color:var(--cream-dim);max-width:78ch;flex:1 1 420px;
}
.consent-acts{display:flex;gap:10px;flex:none;margin-left:auto;}
@media (max-width:700px){ .consent-acts{margin-left:0;width:100%;} }

.consent-state{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius,6px);
  padding:13px 16px;margin:4px 0 16px;max-width:620px;font-size:.9rem;color:var(--cream-dim);
}
.consent-state .dot{
  width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;
}
.consent-state .dot.on{background:#7fa87f;}
.consent-state b{color:var(--cream);font-weight:500;}
.consent-state .btn{margin-left:auto;}
@media (max-width:560px){ .consent-state .btn{margin-left:0;} }

/* ---------------- first run ---------------- */

.welcome{padding-top:64px;}
.welcome-inner{max-width:760px;}
.welcome-inner .eyebrow{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:14px;
}
.welcome-inner h1{font-size:2.7rem;line-height:1.08;margin:0 0 18px;}
.welcome-inner .lede{color:var(--cream-dim);font-size:1.06rem;line-height:1.75;margin:0 0 36px;max-width:64ch;}

.welcome-points{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px;padding:28px 0;margin-bottom:32px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.welcome-points b{
  display:block;font-family:var(--serif);font-size:1.14rem;font-weight:500;
  color:var(--gold-bright);margin-bottom:8px;
}
.welcome-points p{font-size:.9rem;line-height:1.65;color:var(--cream-dim);margin:0;}
.welcome-actions{gap:12px;}

/* quiet backup reminder */
.nudge{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);
  border-bottom:1px solid var(--line);background:rgba(198,167,104,.07);
  font-size:.88rem;color:var(--cream-dim);line-height:1.6;
}
.nudge b{color:var(--cream);font-weight:500;}
.nudge-acts{display:flex;gap:8px;margin-left:auto;flex:none;}
@media (max-width:700px){ .nudge-acts{margin-left:0;} }

/* ---------------- document pages (Birth Cards, Learn) ----------------
   These sit inside a section alongside grid pages, so they keep the same left
   edge as everything else rather than centring their own column — otherwise the
   whole page jumps sideways when you switch tabs. */

.doc .prose,.doc .look-closer,.doc .note-card p{max-width:70ch;}
.doc .card-row,.doc .working,.doc .learn-toc,.doc .suit-table{margin-left:0;margin-right:0;}
.doc .note-card{max-width:var(--col);}
.doc .ornament{max-width:var(--col);margin-left:0;}

/* ---------------- main + rail split (journal) ---------------- */

.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start;}
.split.solo{grid-template-columns:1fr;}
.split-rail{
  border-left:1px solid var(--line);padding-left:32px;position:sticky;top:88px;
}
.split-rail .eyebrow{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
@media (max-width:940px){
  .split{grid-template-columns:1fr;gap:32px;}
  .split-rail{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:28px;position:static;}
}

/* ---------------- settings grid ---------------- */

/* Two even columns in a constrained width. auto-fit was giving three narrow
   columns on a wide screen while the full-width panels stretched to 1160 —
   which is what made the page look lopsided. */
/* Two even columns. Panels stretch to match their row-mate, so each row shares
   a baseline instead of stair-stepping. */
.set-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;align-items:stretch;
}
.set-grid > .panel{display:flex;flex-direction:column;}
.set-grid > .panel .actions{margin-top:auto;padding-top:8px;}
/* The panels fill the page, but the controls inside stay a usable size rather
   than stretching to the full width of a wide panel. */
.set-grid select,.set-grid input[type=date],.set-grid input[type=text],
.set-grid input[type=password]{max-width:360px;}
.set-grid .hint,.set-grid .panel-lead{max-width:58ch;}
/* key and model fields already share a grid of their own */
.set-grid .prov-fields input{max-width:none;}
@media (max-width:780px){ .set-grid{grid-template-columns:1fr;} }

/* keys on the left, which one leads on the right */
.ai-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:30px;align-items:start;}
.ai-primary{border-left:1px solid var(--line);padding-left:26px;}
.ai-note b{
  display:block;font-family:var(--serif);font-size:1.02rem;color:var(--gold-bright);margin-bottom:7px;
}
.ai-note p{font-size:.84rem;line-height:1.6;color:var(--muted);margin:0;}
@media (max-width:780px){
  .ai-layout{grid-template-columns:1fr;gap:22px;}
  .ai-primary{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px;}
}
.set-grid .panel{padding:22px 24px;}
.set-grid .panel.wide{grid-column:1/-1;}
.set-grid .panel h3{font-size:1.18rem;margin-bottom:14px;}
.set-grid .panel .field{margin-bottom:14px;}
.set-grid .panel .hint{font-size:.8rem;line-height:1.55;}
.set-grid .panel-lead{font-size:.88rem;color:var(--cream-dim);line-height:1.6;margin:0 0 16px;max-width:74ch;}
.set-grid .actions{margin-top:4px;}
.set-grid #artCheck:not(:empty){margin-top:16px;}
.set-grid .voice-sample{grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 16px;max-width:620px;}
.set-grid .voice-sample > div{padding:11px 13px;}
.set-grid .voice-sample p{font-size:.82rem;}
.set-grid .prov{padding-top:14px;margin-top:14px;}
.set-grid .prov-head b{font-size:1rem;}

/* ---------------- spread chooser ---------------- */

.spread-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.spread-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;cursor:pointer;transition:.18s;text-align:left;color:inherit;font:inherit;
  display:flex;flex-direction:column;gap:12px;
}
.spread-card:hover{border-color:var(--line-strong);transform:translateY(-2px);background:var(--panel-2);}
.spread-card h3{font-size:1.35rem;color:var(--gold-bright);}
.spread-card .tag{
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;align-self:flex-start;
}
.spread-card p{color:var(--cream-dim);font-size:.92rem;margin:0;}
.mini-layout{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:8px;}
.mini-layout i{display:block;width:11px;height:18px;border:1px solid var(--gold-dim);border-radius:2px;}

/* ---------------- the spread board ---------------- */

.board-shell{
  background:
    radial-gradient(700px 420px at 50% 20%, rgba(139,123,184,.10), transparent 70%),
    var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 26px;overflow-x:auto;
}
.board{display:grid;gap:16px;justify-content:center;margin:0 auto;}

.slot{position:relative;}
.slot .slot-inner{
  position:relative;width:100%;aspect-ratio:1/1.714;
  border:1px dashed var(--line-strong);border-radius:8px;
  background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:.18s;overflow:hidden;padding:8px;text-align:center;
}
.slot .slot-inner:hover{border-color:var(--gold);background:rgba(198,167,104,.07);}
.slot.filled .slot-inner{border-style:solid;border-color:var(--line-strong);background:none;padding:0;}
.slot .num{
  position:absolute;top:-9px;left:-9px;z-index:3;
  width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#1a1508;
  font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.slot .plus{font-size:1.6rem;color:var(--gold-dim);line-height:1;margin-bottom:6px;}
.slot .slot-name{
  font-family:var(--serif);font-size:.9rem;color:var(--cream-dim);line-height:1.25;
}
.slot .pos-label{
  margin-top:8px;text-align:center;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
/* The crossing card: a landscape box holding a card turned on its side, so it
   takes up the space it appears to and stays clickable in its own right. */
.slot.crossing{align-self:center;}
.cross-box{position:relative;margin:0 auto;}
.slot.crossing .slot-inner{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.slot.crossing .slot-name{transform:rotate(-90deg);white-space:nowrap;}

.card-face{position:relative;width:100%;height:100%;}
.card-face img{width:100%;height:100%;object-fit:cover;display:block;}
.card-face.rev img{transform:rotate(180deg);}
.card-face .rev-flag{
  position:absolute;top:6px;right:6px;z-index:2;
  background:rgba(11,13,21,.85);color:var(--rose);
  border:1px solid rgba(192,122,128,.5);border-radius:4px;
  font-size:.6rem;letter-spacing:.14em;padding:2px 6px;text-transform:uppercase;
}
/* reverse control on a placed card — also the reversed marker */
.flip{
  position:absolute;top:6px;right:6px;z-index:6;
  width:27px;height:27px;border-radius:50%;padding:0;
  background:rgba(8,10,16,.86);border:1px solid var(--line-strong);
  color:var(--cream-dim);font-size:.92rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.6;transition:.15s;
}
.slot:hover .flip{opacity:1;}
.flip:hover{border-color:var(--gold);color:var(--gold-bright);transform:scale(1.08);}
.flip:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:2px;}
.flip.on{
  opacity:1;color:var(--rose);border-color:rgba(192,122,128,.6);
  background:rgba(40,16,20,.9);transform:rotate(180deg);
}
.flip.on:hover{transform:rotate(180deg) scale(1.08);}

.card-face .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(transparent,rgba(6,7,12,.94) 55%);
  padding:20px 7px 6px;font-family:var(--serif);font-size:.78rem;
  color:var(--cream);text-align:center;line-height:1.15;
}

/* fallback face when the image cannot load */
.card-fallback{
  width:100%;height:100%;aspect-ratio:1/1.714;
  background:linear-gradient(160deg,#1c2133,#0f121c);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:10px;text-align:center;
  border:1px solid var(--line);
}
.card-fallback .glyph{font-size:1.9rem;color:var(--gold);line-height:1;}
.card-fallback .nm{font-family:var(--serif);font-size:.82rem;color:var(--cream);line-height:1.2;}
.card-fallback .rn{font-size:.62rem;letter-spacing:.2em;color:var(--muted);}

/* ---------------- card picker modal ---------------- */

.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(4,5,9,.86);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
  animation:fade .2s ease;
}
.modal{
  background:var(--ink-2);border:1px solid var(--line-strong);border-radius:var(--radius);
  width:100%;max-width:960px;box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.modal-head{
  padding:22px 26px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.modal-head h3{color:var(--gold-bright);}
.modal-head .posq{font-size:.86rem;color:var(--muted);width:100%;margin:0;}
.modal-body{padding:22px 26px 30px;}
.modal-close{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.6rem;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--cream);}

.picker-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.picker-controls input[type=text]{flex:1;min-width:200px;}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  background:transparent;border:1px solid var(--line);color:var(--cream-dim);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 13px;border-radius:99px;cursor:pointer;transition:.15s;font-family:var(--sans);
}
.chip:hover{border-color:var(--line-strong);color:var(--cream);}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1a1508;font-weight:600;}

.rev-toggle{
  display:flex;align-items:center;gap:11px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:10px 16px;cursor:pointer;user-select:none;
}
.rev-toggle .sw{
  width:38px;height:21px;border-radius:99px;background:#2c3145;position:relative;transition:.18s;flex:none;
}
.rev-toggle .sw::after{
  content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--cream-dim);transition:.18s;
}
.rev-toggle.on .sw{background:rgba(192,122,128,.55);}
.rev-toggle.on .sw::after{transform:translateX(17px);background:var(--rose);}
.rev-toggle span.lbl{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-dim);}
.rev-toggle.on span.lbl{color:var(--rose);}

.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px;
  max-height:52vh;overflow-y:auto;padding:4px;
}
.card-pick{
  border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel);
  cursor:pointer;transition:.15s;padding:0;position:relative;
}
.card-pick:hover{border-color:var(--gold);transform:translateY(-2px);}
.card-pick .thumb{width:100%;aspect-ratio:1/1.714;overflow:hidden;background:var(--ink);}
.card-pick .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card-pick .nm{
  font-family:var(--serif);font-size:.7rem;color:var(--cream-dim);
  padding:6px 4px;line-height:1.15;text-align:center;
}
.card-pick.used{opacity:.28;}
.card-pick.used::after{
  content:'IN USE';position:absolute;top:40%;left:0;right:0;text-align:center;
  font-size:.55rem;letter-spacing:.2em;color:var(--gold-bright);
}
.card-pick.chosen{border-color:var(--gold);box-shadow:0 0 0 2px rgba(198,167,104,.28);}
.card-pick.chosen .nm{color:var(--gold-bright);}
.card-pick.chosen::after{
  content:'✓';position:absolute;top:5px;right:6px;
  font-size:.8rem;color:var(--gold-bright);text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* ---------------- reading output ---------------- */

/* Long-form content sits in a narrower centred column; the spread board
   is allowed to use the full width of the page. */
.reading > .page-head,
.reading > .reading-meta,
.reading > blockquote.q,
.reading > h1,
.reading > .section-label,
.reading > .prose,
.reading > .panel,
.reading > .note-card,
.reading > ul.advice,
.reading > .entry,
.reading > .ornament,
.reading > textarea,
.reading > .rate-row,
.reading > .note-print,
.reading > .card-row,
.reading > .working,
.reading > .guest-bar,
.reading > .sec-tabs,
.reading > .council-summary,
.reading > .ai-tabs,
.reading > .ai-meta,
.reading > .ai-run,
.reading > .actions,
.reading > .divider{
  max-width:var(--col);margin-left:auto;margin-right:auto;
}
.reading > .board-shell{margin-bottom:0;}

.reading-meta{
  display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;
}
.reading blockquote.q{
  font-family:var(--serif);font-size:1.6rem;color:var(--gold-bright);
  border-left:2px solid var(--gold-dim);margin:0 auto 30px;padding:4px 0 4px 22px;line-height:1.35;
}

.section-label{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);
  margin:56px 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.section-label:first-child{margin-top:0;}
.section-label[id]{scroll-margin-top:96px;}
.ornament + .section-label{margin-top:0;}

.prose{font-size:1.06rem;line-height:1.8;color:var(--cream);max-width:var(--measure);}
.prose p{margin:0 0 1.2em;}
.prose p:last-child{margin-bottom:0;}

.entry{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:34px;
  padding:38px 0;border-bottom:1px solid var(--line);align-items:start;
}
.entry:last-child{border-bottom:none;}
.entry .fig{position:sticky;top:88px;}
.entry .fig .shot{
  width:100%;aspect-ratio:1/1.714;border-radius:8px;overflow:hidden;
  border:1px solid var(--line-strong);box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.entry .fig .shot img{width:100%;height:100%;object-fit:cover;display:block;}
.entry .fig .shot.rev img{transform:rotate(180deg);}
.entry .fig .cname{
  font-family:var(--serif);font-size:1.05rem;color:var(--gold-bright);
  margin-top:12px;line-height:1.2;
}
.entry .fig .corient{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.entry .fig .corient.rev{color:var(--rose);}

.entry .pos-title{
  font-family:var(--serif);font-size:1.5rem;color:var(--cream);margin:0 0 4px;
}
.entry .pos-q{font-size:.86rem;color:var(--muted);font-style:italic;margin:0 0 16px;}
/* keyword pills — used in readings, card detail and anywhere else */
.kw{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0;}
.kw span{
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dim);
  border:1px solid var(--line);border-radius:99px;padding:4px 11px;line-height:1.4;
  white-space:nowrap;
}
.mean-block.rev .kw span{color:var(--rose);border-color:rgba(192,122,128,.3);}
.look-closer{
  margin-top:20px;border-left:2px solid var(--line-strong);padding:3px 0 3px 18px;
  font-size:.94rem;line-height:1.7;color:var(--cream-dim);max-width:68ch;
}
.look-closer b{
  display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:5px;font-weight:600;
}

.note-card{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold-dim);
  border-radius:6px;padding:22px 26px;margin-bottom:16px;
}
.note-card h4{font-family:var(--serif);font-size:1.15rem;color:var(--gold-bright);margin-bottom:8px;}
.note-card p{margin:0;font-size:.98rem;color:var(--cream-dim);line-height:1.72;max-width:68ch;}
.note-card.opposing{border-left-color:var(--rose);}
.note-card.reinforce{border-left-color:var(--gold);}
.note-card.friendly{border-left-color:#7fa87f;}
.note-card.neutral{border-left-color:var(--muted);}

ul.advice{list-style:none;padding:0;margin:0;}
ul.advice li{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
ul.advice li:last-child{border-bottom:none;}
ul.advice .src{
  font-family:var(--serif);font-size:1rem;color:var(--gold-bright);line-height:1.4;
}
ul.advice .txt{color:var(--cream);line-height:1.7;max-width:60ch;}

.stat-row{display:flex;gap:34px;flex-wrap:wrap;margin-top:6px;}
.stat{min-width:74px;}
.stat .v{font-family:var(--serif);font-size:1.9rem;color:var(--gold-bright);line-height:1;}
.stat .l{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;}

.bar{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;display:flex;margin-top:10px;}
.bar i{display:block;height:100%;}
.bar i.wands{background:#c9683f;}
.bar i.cups{background:#4f83b8;}
.bar i.swords{background:#9aa4bd;}
.bar i.pentacles{background:#7e9a5e;}
.bar i.major{background:var(--gold);}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.72rem;color:var(--muted);}
.legend b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;}

/* one-line plain summary of a card */
.in-short{
  margin:0 0 16px;font-size:.95rem;color:var(--cream);
  background:rgba(198,167,104,.07);border:1px solid var(--line);
  border-radius:6px;padding:11px 15px;max-width:62ch;line-height:1.55;
}
.in-short b{
  display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);font-weight:600;margin-right:10px;
}
.in-short.big{font-size:1.08rem;padding:14px 18px;margin-bottom:24px;}

/* ---------------- question + topic row ---------------- */

.ask-row{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:30px;align-items:start;margin-bottom:28px;
}
@media (max-width:820px){ .ask-row{grid-template-columns:1fr;gap:22px;} }

.topic-tag{
  border:1px solid var(--line-strong);border-radius:99px;padding:2px 12px;
  color:var(--gold-bright);letter-spacing:.12em;
}

.note-card.topical{border-left-color:var(--muted);}
.note-card.topical.s-wands{border-left-color:#c9683f;}
.note-card.topical.s-cups{border-left-color:#4f83b8;}
.note-card.topical.s-swords{border-left-color:#9aa4bd;}
.note-card.topical.s-pentacles{border-left-color:#7e9a5e;}
.note-card.topical.s-major{border-left-color:var(--gold);}
.note-card.topical.s-court,.note-card.topical.s-reversed{border-left-color:var(--violet);}

/* ---------------- outcome rating ---------------- */

.rate-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.rated-on{font-size:.8rem;color:var(--muted);margin-left:4px;}
.rated-on a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.rated-on a:hover{color:var(--rose);}
.rate{
  background:var(--panel);border:1px solid var(--line);color:var(--cream-dim);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 20px;border-radius:6px;cursor:pointer;transition:.15s;
}
.rate:hover{border-color:var(--line-strong);color:var(--cream);}
.rate.on.landed{background:rgba(127,168,127,.16);border-color:#7fa87f;color:#a8cba8;}
.rate.on.partly{background:rgba(198,167,104,.16);border-color:var(--gold);color:var(--gold-bright);}
.rate.on.missed{background:rgba(192,122,128,.16);border-color:var(--rose);color:#d99aa0;}

.rate-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;
}
.rate-dot.landed{background:#7fa87f;}
.rate-dot.partly{background:var(--gold);}
.rate-dot.missed{background:var(--rose);}

.acc-note{font-size:.86rem;margin:14px 0 0;padding:10px 13px;border-radius:6px;line-height:1.6;}
.acc-note.good{background:rgba(127,168,127,.1);border:1px solid rgba(127,168,127,.3);color:#a8cba8;}
.acc-note.bad{background:rgba(192,122,128,.1);border:1px solid rgba(192,122,128,.3);color:#d99aa0;}

/* ---------------- daily practice ---------------- */

.daily{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
}
.daily-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;}
.daily-head h3{font-size:1.35rem;color:var(--cream);}
.streak{text-align:right;flex:none;}
.streak .n{
  display:block;font-family:var(--serif);font-size:2.4rem;color:var(--gold-bright);line-height:1;
}
.streak .l{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}

.strip{display:flex;gap:4px;flex-wrap:wrap;}
.strip .day{
  width:26px;height:45px;border-radius:3px;padding:0;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-2);flex:none;
}
.strip .day.empty{background:rgba(255,255,255,.02);}
.strip .day.filled{cursor:pointer;transition:.15s;}
.strip .day.filled:hover{border-color:var(--gold);transform:translateY(-2px);}
.strip .day.filled img{width:100%;height:100%;object-fit:cover;display:block;}
.strip .day.today{border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(198,167,104,.18);}

.daily-note{margin:16px 0 0;font-size:.9rem;color:var(--cream-dim);max-width:64ch;line-height:1.6;}
.daily-note b{color:var(--gold-bright);font-weight:500;}

/* ---------------- your cards ---------------- */

.card-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:20px;max-width:var(--col);margin:0 auto 34px;
}
.big-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:hidden;cursor:pointer;transition:.18s;text-align:left;
  color:inherit;font:inherit;display:flex;flex-direction:column;
}
.big-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.big-card .art{display:block;width:100%;aspect-ratio:1/1.714;overflow:hidden;background:var(--ink);}
.big-card .art img{width:100%;height:100%;object-fit:cover;display:block;}
.big-card .meta{display:block;padding:14px 15px 16px;}
.big-card .cap{
  display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:6px;
}
.big-card .nm{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--gold-bright);line-height:1.2;}
.big-card .sh{display:block;font-size:.82rem;color:var(--cream-dim);margin-top:7px;line-height:1.45;}
.big-card .why{display:block;font-size:.68rem;color:var(--muted);margin-top:8px;letter-spacing:.05em;}

.working{
  max-width:var(--col);margin:0 auto 26px;padding:16px 20px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
}
.working b{
  display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:10px;font-weight:600;
}
.working code{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;color:var(--cream);padding:3px 0;letter-spacing:.02em;
}

.note-card.personal{border-left-color:var(--violet);}

/* ---------------- learn ---------------- */

.learn-toc{
  display:flex;flex-wrap:wrap;gap:8px;max-width:var(--col);
  margin:0 auto 12px;
}
.learn-toc a{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  color:var(--cream-dim);text-decoration:none;transition:.15s;
}
.learn-toc a:hover{border-color:var(--line-strong);color:var(--gold-bright);text-decoration:none;}

.suit-table{
  width:100%;max-width:var(--col);margin:4px auto 26px;
  border-collapse:collapse;font-size:.95rem;
}
.suit-table th{
  text-align:left;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dim);font-weight:600;
  padding:0 14px 10px 0;border-bottom:1px solid var(--line);
}
.suit-table td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);color:var(--cream-dim);vertical-align:top;}
.suit-table td:first-child{font-family:var(--serif);font-size:1.15rem;white-space:nowrap;}
.suit-table td:nth-child(2){color:var(--muted);white-space:nowrap;}
.suit-table td.s-wands{color:#d98a5c;}
.suit-table td.s-cups{color:#6fa3d4;}
.suit-table td.s-swords{color:#aab4cd;}
.suit-table td.s-pentacles{color:#94b072;}

.voice-sample{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 20px;max-width:760px;
}
.voice-sample > div{
  border:1px solid var(--line);border-radius:6px;padding:14px 16px;background:var(--ink-2);
}
.voice-sample b{
  display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:8px;
}
.voice-sample p{margin:0;font-size:.88rem;line-height:1.6;color:var(--cream-dim);}
@media (max-width:700px){ .voice-sample{grid-template-columns:1fr;} }

/* ---------------- guest mode ---------------- */

.guest-toggle{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;
  background:var(--panel);margin-bottom:8px;
}
.guest-toggle.on{border-color:rgba(139,123,184,.45);background:rgba(139,123,184,.07);}
.guest-toggle .rev-toggle{width:max-content;}
.guest-toggle.on .rev-toggle .sw{background:rgba(139,123,184,.55);}
.guest-toggle.on .rev-toggle .sw::after{transform:translateX(17px);background:var(--violet);}
.guest-toggle.on .rev-toggle .lbl{color:var(--violet);}
.guest-toggle .hint{display:block;font-size:.86rem;color:var(--muted);margin:12px 0 0;max-width:66ch;line-height:1.6;}
.guest-name{display:block;margin-top:16px;max-width:320px;}
.guest-flag{color:var(--violet);font-weight:500;}

.guest-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(139,123,184,.35);border-left:3px solid var(--violet);
  background:rgba(139,123,184,.07);border-radius:6px;
  padding:14px 18px;margin-bottom:24px;
}
.guest-bar .tag{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);font-weight:600;
}
.guest-bar label{
  display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--cream-dim);
}
.guest-bar input{width:190px;padding:7px 11px;font-size:.9rem;}
.guest-bar .msg{font-size:.8rem;color:var(--muted);margin-left:auto;}
@media (max-width:700px){ .guest-bar .msg{margin-left:0;width:100%;} }

.topic-tag.guest{color:var(--violet);border-color:rgba(139,123,184,.45);}
.guest-name span{
  display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:8px;
}

body.guest-mode .topbar{border-bottom-color:rgba(139,123,184,.4);}
body.guest-mode .brand .sub::after{
  content:' · guest';color:var(--violet);
}

/* ---------------- ai council ---------------- */

.ai-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
.ai-tab{
  background:transparent;border:1px solid var(--line);color:var(--cream-dim);
  font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 18px;border-radius:6px;cursor:pointer;transition:.15s;
}
.ai-tab:hover{border-color:var(--line-strong);color:var(--cream);}
.ai-tab.on{background:var(--gold);border-color:var(--gold);color:#1a1508;font-weight:600;}

.ai-meta{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:6px 0 20px;
}

/* All council readings live in the page; the tabs just choose which is shown,
   so that printing captures every one of them. */
.ai-run{display:none;}
.ai-run.on{display:block;}
.ai-run-head{display:none;}

.council-summary{
  border:1px solid rgba(139,123,184,.35);border-left:3px solid var(--violet);
  border-radius:6px;padding:20px 24px;margin-bottom:28px;background:rgba(139,123,184,.06);
}
.council-summary b{
  display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet);margin-bottom:10px;font-weight:600;
}
.council-summary .prose{font-size:1rem;}

/* provider key fields */
.prov{border-top:1px solid var(--line);padding:18px 0 0;margin-top:18px;}
.prov:first-of-type{border-top:none;margin-top:8px;}
.prov-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.prov-head b{font-family:var(--serif);font-size:1.1rem;color:var(--gold-bright);font-weight:500;}
.prov-head span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.prov-head a{margin-left:auto;font-size:.74rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.prov-head a:hover{color:var(--gold-bright);}
.prov-fields{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;}
@media (max-width:640px){ .prov-fields{grid-template-columns:1fr;} }

/* ---------------- journal ---------------- */

.journal-list{display:grid;gap:14px;}
.journal-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;cursor:pointer;transition:.16s;text-align:left;color:inherit;font:inherit;
}
.journal-item:hover{border-color:var(--line-strong);background:var(--panel-2);}
.journal-item .date{
  font-family:var(--serif);color:var(--gold-bright);text-align:center;min-width:62px;line-height:1.1;
}
.journal-item .date .d{font-size:1.6rem;display:block;}
.journal-item .date .m{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.journal-item .q{font-family:var(--serif);font-size:1.16rem;color:var(--cream);margin:0 0 4px;}
.journal-item .sub{font-size:.78rem;color:var(--muted);letter-spacing:.06em;}
.journal-item .thumbs{display:flex;gap:3px;}
.journal-item .thumbs img{width:23px;height:39px;object-fit:cover;border-radius:2px;border:1px solid var(--line);}
.journal-item .thumbs .more{font-size:.7rem;color:var(--muted);align-self:center;padding-left:4px;}

/* ---------------- library + study ---------------- */

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px;}
.lib-card{
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);
  cursor:pointer;transition:.16s;padding:0;position:relative;
}
.lib-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.lib-card .thumb{width:100%;aspect-ratio:1/1.714;overflow:hidden;background:var(--ink);}
.lib-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lib-card .nm{font-family:var(--serif);font-size:.78rem;color:var(--cream-dim);padding:8px 5px;text-align:center;line-height:1.2;}
/* One dot, one meaning: you have drawn this card. */
.lib-card .drawn-dot{
  position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
  background:#C9A45C;box-shadow:0 0 0 2px rgba(0,0,0,.35);
}
.lib-card .times{
  display:block;font-size:.68rem;color:var(--muted);margin-top:3px;letter-spacing:.04em;
}
.lib-card .times.good{color:#7fa87f;}
.lib-card .times.poor{color:var(--rose);}

.detail{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start;max-width:1020px;}
.detail .art{border-radius:10px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 16px 44px rgba(0,0,0,.55);}
.detail .art img{width:100%;display:block;}
.meta-table{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:.86rem;}
.meta-table td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.meta-table td:first-child{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;width:44%;}
.meta-table td:last-child{color:var(--cream);text-align:right;}

.mean-block{margin-bottom:28px;}
.mean-block h4{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:10px;font-weight:600;
}
.mean-block.rev h4{color:var(--rose);}

.quiz-stage{max-width:640px;margin:0 auto;text-align:center;}
.quiz-stage .art{
  width:210px;margin:0 auto 26px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-strong);box-shadow:0 16px 44px rgba(0,0,0,.55);
}
.quiz-stage .art img{width:100%;display:block;}
.quiz-stage .art.rev img{transform:rotate(180deg);}
.quiz-prompt{font-family:var(--serif);font-size:1.5rem;color:var(--cream);margin-bottom:26px;}
.quiz-opts{display:grid;gap:11px;}
.quiz-opt{
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:15px 20px;cursor:pointer;transition:.15s;text-align:left;
  color:var(--cream);font-family:var(--sans);font-size:.98rem;
}
.quiz-opt:hover{border-color:var(--gold);background:var(--panel-2);}
.quiz-opt.right{border-color:#7fa87f;background:rgba(127,168,127,.12);}
.quiz-opt.wrong{border-color:var(--rose);background:rgba(192,122,128,.12);}
.quiz-opt:disabled{cursor:default;}
.quiz-feedback{margin-top:24px;text-align:left;}

.progress-track{height:4px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin-bottom:28px;}
.progress-track i{display:block;height:100%;background:var(--gold);transition:width .3s;}

/* ---------------- footer ---------------- */

.site-foot{
  flex:none;border-top:1px solid var(--line);
  padding:26px 0 32px;background:rgba(0,0,0,.18);
}
.site-foot .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:.74rem;letter-spacing:.1em;color:var(--muted);
}
.site-foot .sep{color:var(--gold-dim);}
.site-foot a{color:var(--muted);text-decoration:none;transition:.15s;}
.site-foot a:hover{color:var(--gold-bright);}
.site-foot .attrib{
  width:100%;font-size:.68rem;letter-spacing:.04em;color:#655f73;margin-top:2px;
}
@media (max-width:560px){
  .site-foot .sep{display:none;}
  .site-foot .wrap{gap:6px;}
  .site-foot span:first-child,.site-foot a{width:100%;}
}

/* ---------------- misc ---------------- */

.empty{
  text-align:center;padding:70px 20px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius);
}
.empty .glyph{font-size:2.4rem;color:var(--gold-dim);margin-bottom:14px;}
.empty h3{color:var(--cream-dim);margin-bottom:8px;}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:7px;
  padding:13px 24px;color:var(--cream);z-index:200;font-size:.9rem;
  box-shadow:0 12px 40px rgba(0,0,0,.6);animation:fade .2s ease;
}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

.diag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;}
.diag-grid .d{
  aspect-ratio:1/1.714;border-radius:4px;border:1px solid var(--line);overflow:hidden;position:relative;background:var(--panel);
}
.diag-grid .d img{width:100%;height:100%;object-fit:cover;}
.diag-grid .d.fail{border-color:var(--rose);}
.diag-grid .d.fail::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--rose);}

/* spans used as blocks inside buttons */
.card-pick .thumb,.card-pick .nm,
.lib-card .thumb,.lib-card .nm,
.journal-item .q,.journal-item .sub{display:block;}

/* ---------------- responsive ---------------- */

@media (max-width:1000px){
  :root{--gutter:24px;}
  .detail,.two-col{grid-template-columns:1fr;gap:30px;}
  .entry{grid-template-columns:130px minmax(0,1fr);gap:24px;padding:32px 0;}
  ul.advice li{grid-template-columns:1fr;gap:6px;padding:16px 0;}
  ul.advice .src{font-size:1.05rem;}
  .topbar .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:10px;}
  nav.main{margin-left:0;width:100%;}
  h1{font-size:2rem;}
  .view{padding-top:38px;padding-bottom:90px;}
  .ornament{margin:44px 0;}
  .section-label{margin-top:44px;}
  .board-shell{padding:26px 18px;}
  .entry .fig{position:static;}   /* the header wraps at this width, so sticky would tuck under it */
}
@media (max-width:620px){
  :root{--gutter:20px;}

  /* Nothing on a phone should be able to force the page wider than the screen. */
  .band-cols{gap:26px;}
  .band-lead h1{font-size:1.9rem;}
  .band-strip{width:100%;}
  .strip{flex-wrap:wrap;}
  .sec-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sec-tab{padding:11px 13px;font-size:.74rem;white-space:nowrap;}
  .learn-toc a{font-size:.68rem;padding:6px 11px;}
  .set-grid .panel,.panel{padding:20px 18px;}
  .working code{font-size:.78rem;word-break:break-word;}
  .stat-row{gap:22px;}
  .guest-switch input{width:100%;}

  .entry{grid-template-columns:1fr;gap:18px;}
  .entry .fig{position:static;max-width:132px;}
  .journal-item{grid-template-columns:auto minmax(0,1fr);padding:16px 18px;gap:16px;}
  .journal-item .thumbs{display:none;}
  .panel{padding:22px 20px;}
  .note-card{padding:18px 20px;}
  .modal-backdrop{padding:16px 10px;}
  .modal-head,.modal-body{padding-left:18px;padding-right:18px;}
  .prose{font-size:1.02rem;}
  h1{font-size:1.75rem;}
  .reading blockquote.q{font-size:1.3rem;}
}

/* ---------------- print / save as PDF ---------------- */

.note-print{display:none;}

@media print{
  /* recolour the whole palette for paper in one go */
  :root{
    --ink:#fff; --ink-2:#fff; --panel:#fff; --panel-2:#fff;
    --cream:#111; --cream-dim:#333; --muted:#555;
    --gold:#8a6d2f; --gold-bright:#6b5320; --gold-dim:#7d6330;
    --line:#dcdcdc; --line-strong:#b8b8b8; --rose:#9c4a51;
    --col:100%; --gutter:0;
  }
  @page{margin:16mm 14mm;}

  body{background:#fff !important;color:#111;font-size:11pt;display:block;}
  .topbar,nav.main,.actions,.btn,.modal-backdrop,.toast,.consent-bar,.nudge{display:none !important;}
  .site-foot{
    border-top:1px solid #dcdcdc;background:none;padding:12px 0 0;margin-top:24px;
  }
  .site-foot .wrap{font-size:8pt;color:#777;}
  .site-foot .attrib{color:#999;font-size:7.5pt;}
  .view{padding:0;animation:none;}
  .wrap{max-width:none;padding:0;}

  /* the note the user typed: the textarea itself clips, so print a plain copy */
  textarea{display:none !important;}
  .rate-row{gap:8px;}
  .rate{border:1px solid #dcdcdc;color:#666;padding:5px 12px;}
  .rate:not(.on){display:none;}          /* only the rating actually given */
  .rate.on{color:#111;border-color:#8a8a8a;font-weight:600;}
  .rated-on a{display:none;}
  .note-print{
    display:block;white-space:pre-wrap;color:#111;font-size:11pt;line-height:1.6;
    border-left:2px solid #b8b8b8;padding-left:14px;max-width:none;
  }
  .note-print:empty{display:none;}

  .prose,.note-card p,.look-closer,ul.advice .txt{max-width:none;}
  .prose{font-size:11pt;line-height:1.55;}

  /* Print every council reading, not just whichever tab was open. */
  .ai-tabs{display:none !important;}
  .ai-meta{display:none !important;}
  .ai-run{display:block !important;}
  .ai-run + .ai-run{
    margin-top:22px;padding-top:18px;border-top:1px solid #e2e2e2;
    break-before:auto;page-break-before:auto;
  }
  .ai-run-head{
    display:block !important;font-family:var(--serif);font-size:13pt;color:#111;
    margin:0 0 10px;break-after:avoid;page-break-after:avoid;
  }
  .council-summary{
    border:1px solid #dcdcdc;border-left:3px solid #999;background:none;
    break-inside:avoid;page-break-inside:avoid;
  }
  .council-summary b{color:#555;}

  /* Keep whose reading it is on the printed page, drop the editing controls. */
  .guest-bar{
    border:none;border-left:2px solid #999;background:none;
    padding:0 0 0 12px;margin-bottom:18px;display:block;
  }
  .guest-bar .tag{color:#555;}
  .guest-bar label{display:inline;color:#111;}
  .guest-bar input{
    display:inline !important;border:none;background:none;padding:0;
    width:auto;color:#111;font-size:11pt;
  }
  .guest-bar .msg{display:none;}

  .entry,.note-card,.quiz-stage,li{break-inside:avoid;page-break-inside:avoid;}
  .entry{grid-template-columns:120px minmax(0,1fr);border-bottom:1px solid #e2e2e2;}
  .entry .fig{position:static;}
  .section-label{break-after:avoid;page-break-after:avoid;margin-top:26px;}
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid;}

  .panel,.note-card,.board-shell{
    background:#fff !important;border:1px solid #dcdcdc;box-shadow:none;
  }
  .board-shell{overflow:visible;padding:14px;}
  .entry .fig .shot,.card-face,.detail .art{box-shadow:none;}
  .kw span{color:#6b5320;border-color:#dcdcdc;}
  a{color:#111;text-decoration:none;}

  img{print-color-adjust:exact;-webkit-print-color-adjust:exact;}
}