/* ==========================================================================
   features.css -- the fact-sheet panel (2026-10-06) and the Resources
   experience. Kept apart from app.css so each can evolve on its own; uses the
   same design tokens (:root in app.css).
   ========================================================================== */

/* ---------- Fact sheet panel (every writing screen) ---------- */
.fact-sheet{
  margin:12px 0 14px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--gold-soft) 0%, #fff 140px);
  overflow:hidden;
}
.fact-sheet > summary{
  list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  padding:12px 16px; border-bottom:1px solid transparent;
}
.fact-sheet > summary::-webkit-details-marker{display:none;}
.fact-sheet > summary::after{content:"\25BE"; margin-left:auto; color:var(--gold-deep); transition:transform .2s;}
.fact-sheet:not([open]) > summary::after{transform:rotate(-90deg);}
.fact-sheet[open] > summary{border-bottom-color:var(--line-soft);}
.fs-title{font-family:var(--font-display, inherit); font-weight:700; font-size:1rem; color:var(--gold-ink);}
.fs-hint{font-size:.78rem; color:var(--ink-soft);}
.fs-body{padding:14px 16px 16px;}
.fs-grid{display:grid; gap:10px;}
.fs-sides{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:640px){.fs-sides{grid-template-columns:1fr;}}
.fs-item{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:10px 12px;
  box-shadow:0 1px 0 rgba(38,33,59,.04);}
.fs-label{display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); margin-bottom:4px;}
.fs-ico{font-size:.95rem; text-transform:none; letter-spacing:0;}
.fs-text{font-size:.9rem; line-height:1.55; color:var(--ink);}
.fs-text .md-p{margin:0 0 4px;}
.fs-text .md-p:last-child{margin-bottom:0;}
.fs-scene{border-left:4px solid var(--accent); background:var(--accent-soft);}
.fs-fact, .fs-time{border-left:4px solid var(--gold);}
.fs-law{border-left:4px solid #3b6fd8;}
.fs-for{border-top:4px solid #2e9e6a;}
.fs-against{border-top:4px solid #d0463c;}
.fs-trap{border-left:4px solid #e08a1e; background:#fff8ee;}
.fs-gap, .fs-think{border-left:4px dashed var(--accent);}
.fs-compare, .fs-how{border-left:4px solid var(--line);}
.fs-voice{margin:0; position:relative; padding:12px 14px 10px 40px; background:#fbfaf7;}
.fs-voice .fs-ico{position:absolute; left:12px; top:12px;}
.fs-voice blockquote{margin:0; font-style:italic; font-size:.92rem; line-height:1.5;}
.fs-voice blockquote .md-p{margin:0;}
.fs-voice figcaption{margin-top:4px; font-size:.75rem; font-weight:700; color:var(--ink-soft);}
.fs-plain{font-size:.9rem;}
.drill-fact .fs-grid{gap:8px;}

/* ---------- Resources: rail extras ---------- */
.res-home-link{display:block; font-size:.8rem; font-weight:700; color:var(--accent); text-decoration:none; margin-bottom:10px;}
.res-done{margin-left:auto; color:#2e9e6a; font-weight:800; font-size:.8rem;}
.res-drawer .res-item{flex-direction:row; align-items:center; gap:6px;}
.res-drawer-bar{height:3px; background:var(--line-soft); margin:0 12px;}
.res-drawer-bar span{display:block; height:100%; background:var(--drawer-hue, var(--accent)); border-radius:3px; transition:width .6s ease;}
.res-drawer > summary .res-drawer-icon{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:color-mix(in srgb, var(--drawer-hue, #8B2FD9) 14%, #fff);}

/* ---------- Resources: hub ---------- */
.res-hub{display:flex; flex-direction:column; gap:18px;}
.res-hero-band{
  display:flex; align-items:center; gap:20px; justify-content:space-between; padding:22px 24px; border-radius:var(--r);
  color:#fff; background:linear-gradient(120deg, #3B1F7A 0%, #8B2FD9 55%, #D4A017 130%);
  box-shadow:0 12px 30px -14px rgba(59,31,122,.55); position:relative; overflow:hidden;
}
.res-hero-band::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events:none;}
.res-hero-band h1{font-family:var(--font-display, inherit); font-size:2rem; margin:0 0 6px; color:#fff;}
.res-hero-band p{margin:0; max-width:56ch; opacity:.92; font-size:.92rem; line-height:1.5;}
.res-ring{
  --pct:0; flex:0 0 auto; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  background:conic-gradient(#FBF1D6 calc(var(--pct) * 1%), rgba(255,255,255,.22) 0);
}
.res-ring > span{width:72px; height:72px; border-radius:50%; background:#3B1F7A; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1;}
.res-ring strong{font-size:1.15rem;}
.res-ring small{font-size:.66rem; opacity:.8; text-transform:uppercase; letter-spacing:.06em;}
@media(max-width:640px){.res-hero-band{flex-direction:column; align-items:flex-start;} .res-hero-band h1{font-size:1.6rem;}}

.res-searchbar{display:flex; align-items:center; gap:10px; padding:4px 6px 4px 16px; border:2px solid var(--line); border-radius:999px; background:#fff;
  transition:border-color .2s, box-shadow .2s;}
.res-searchbar:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.res-searchbar input{flex:1; border:none; outline:none; background:transparent; font:inherit; font-size:1rem; padding:10px 6px; min-width:0; box-shadow:none;}
.res-results-head{font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:8px;}
.res-result{display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; font:inherit; cursor:pointer; margin-bottom:8px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--drawer-hue, var(--accent)); border-radius:var(--r-sm); padding:12px 14px;
  transition:transform .15s, box-shadow .15s;}
.res-result:hover{transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(38,33,59,.35);}
.res-result-top{display:flex; justify-content:space-between; font-size:.75rem;}
.res-result-drawer{font-weight:700; color:var(--ink-soft);}
.res-result-heading{font-size:.8rem; color:var(--accent-ink); font-weight:700;}
.res-result-snippet{font-size:.85rem; color:var(--ink-soft); line-height:1.5;}
.res-result mark, .res-hub mark{background:#FBF1D6; color:inherit; padding:0 2px; border-radius:3px;}

.res-row h3, .res-section-h{font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 8px;}
.res-chips{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity;}
.res-mini{flex:0 0 200px; scroll-snap-align:start; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .15s, box-shadow .15s;}
.res-mini:hover{transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(38,33,59,.4);}
.res-mini-title{font-weight:700; font-size:.85rem; line-height:1.3;}
.res-mini-bar, .res-tile-bar{height:5px; border-radius:5px; background:var(--line-soft); overflow:hidden;}
.res-mini-bar span, .res-tile-bar span{display:block; height:100%; background:var(--drawer-hue, var(--accent)); border-radius:5px; transition:width .8s ease;}

.res-rec-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;}
.res-rec{padding:14px; border-radius:var(--r-sm); background:linear-gradient(160deg, var(--accent-soft), #fff 70%); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;}
.res-rec-why{font-size:.75rem; color:var(--ink-soft);}
.res-rec-title{font-weight:800; color:var(--accent-ink); text-decoration:none;}
.res-rec-mod{font-size:.8rem; color:var(--accent); text-decoration:none; font-weight:700;}

.res-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.res-tile{position:relative; padding:16px; border-radius:var(--r); background:#fff; border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; gap:10px; transition:transform .18s, box-shadow .18s;}
.res-tile::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--drawer-hue, var(--accent));}
.res-tile:hover{transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(38,33,59,.45);}
.res-tile-top{display:flex; gap:12px; align-items:center;}
.res-tile-icon{flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.35rem;
  background:color-mix(in srgb, var(--drawer-hue, #8B2FD9) 14%, #fff);}
.res-tile h3{margin:0; font-size:1.02rem; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.res-tile-meta{font-size:.75rem; color:var(--ink-soft);}
.res-tile p{margin:0; font-size:.82rem; color:var(--ink-soft); line-height:1.45;}
.res-tile ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.res-tile li{display:flex; align-items:center; gap:6px; font-size:.86rem;}
.res-tile li a{color:var(--ink); text-decoration:none; padding:4px 0; border-bottom:1px dashed transparent;}
.res-tile li a:hover{color:var(--accent); border-bottom-color:var(--accent);}
.res-tile-modules .btn{align-self:flex-start;}

/* ---------- Resources: reader ---------- */
.res-reader{position:relative;}
.res-progress{position:sticky; top:0; height:4px; margin:-22px -22px 14px; background:var(--line-soft); z-index:5;}
.res-progress span{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--gold)); transition:width .15s linear;}
.res-crumb-drawer{font-weight:700; color:var(--drawer-hue, var(--ink));}
.res-doc-title{margin-bottom:6px;}
.res-doc-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px;}
.res-meta{font-size:.78rem; color:var(--ink-soft); background:var(--line-soft); border-radius:999px; padding:3px 10px;}
.res-act{font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 12px;
  color:var(--ink); transition:background .15s, border-color .15s;}
.res-act[aria-pressed="true"]{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink);}
.res-resume{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:var(--r-sm); background:var(--accent-soft); margin-bottom:12px; font-size:.86rem;}
.res-sec{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); padding:4px 18px 10px; margin:0 0 14px;
  box-shadow:0 1px 0 rgba(38,33,59,.03); transition:box-shadow .4s, border-color .4s;}
.res-sec > .md-h2:first-child{margin-top:14px;}
.res-sec-flash{border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft);}
.res-callout{padding:10px 14px 10px 40px; border-radius:var(--r-sm); position:relative; margin:10px 0;}
.res-callout::before{position:absolute; left:13px; top:9px; font-size:1rem;}
.res-callout-weak{background:#fdf0ef; border-left:4px solid #d0463c;}
.res-callout-weak::before{content:"\2716"; color:#d0463c;}
.res-callout-strong{background:#ecf7f1; border-left:4px solid #2e9e6a;}
.res-callout-strong::before{content:"\2714"; color:#2e9e6a;}
.res-callout-example{background:#eef3fd; border-left:4px solid #3b6fd8;}
.res-callout-example::before{content:"\270E"; color:#3b6fd8;}
.res-callout-tip{background:var(--gold-soft); border-left:4px solid var(--gold);}
.res-callout-tip::before{content:"\2605"; color:var(--gold-deep);}
.res-callout-why{background:var(--accent-soft); border-left:4px solid var(--accent);}
.res-callout-why::before{content:"?"; color:var(--accent); font-weight:800;}
.res-next{display:flex; flex-direction:column; gap:2px;}

/* ---------- Quick Reference: toolbar + study mode ---------- */
.qr-toolbar{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.qr-toolbar .qr-chips{flex:1; margin-bottom:0;}
.study-modal{max-width:640px; width:min(640px, 94vw);}
.study{display:flex; flex-direction:column; gap:14px; padding-top:6px;}
.study-top{display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--ink-soft); padding-right:28px;}
.study-card{perspective:1400px; cursor:pointer; outline:none; min-height:320px;}
.study-card:focus-visible .study-inner{box-shadow:0 0 0 4px var(--accent-soft);}
.study-inner{position:relative; width:100%; min-height:320px; transition:transform .6s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; border-radius:var(--r);}
.study-card.flipped .study-inner{transform:rotateY(180deg);}
.study-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--r); padding:22px; overflow:auto;}
.study-front{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; color:#fff;
  background:linear-gradient(135deg, #3B1F7A, #8B2FD9);}
.study-front h3{font-family:var(--font-display, inherit); font-size:1.6rem; margin:0; color:#fff;}
.study-front .faint{color:rgba(255,255,255,.75);}
.study-cat{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:.85;}
.study-back{transform:rotateY(180deg); background:#fff; border:1px solid var(--line); font-size:.92rem; line-height:1.55;}
.study-back h4{margin:0 0 8px; color:var(--accent-ink);}
.study-nav{display:flex; align-items:center; gap:12px;}
.study-dots{flex:1; height:6px; background:var(--line-soft); border-radius:6px; overflow:hidden;}
.study-dots span{display:block; height:100%; background:var(--accent); transition:width .3s ease;}

@media (prefers-reduced-motion: reduce){
  .study-inner, .res-tile, .res-mini, .res-result, .res-drawer-bar span, .res-mini-bar span, .res-tile-bar span, .res-progress span{transition:none !important;}
  .res-tile:hover, .res-mini:hover, .res-result:hover{transform:none;}
}

.res-hub > div:empty{display:none;}

/* Module + reading links under a named weakness (Analytics, Portfolio, Readiness) */
.crit-links{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:4px; font-size:.8rem;}
.crit-links a{color:var(--accent); font-weight:700; text-decoration:none;}
.crit-links a:hover{text-decoration:underline;}
.wp-swot-row .crit-links a{color:inherit; opacity:.9;}

/* Quick Reference button in the lesson rail */
.lr-qr{display:block; width:100%; margin:10px 0 6px; padding:9px 12px; border-radius:var(--r-sm); cursor:pointer; font:inherit;
  font-size:.82rem; font-weight:700; text-align:left; color:var(--gold-ink); background:var(--gold-soft); border:1px solid var(--gold);
  transition:box-shadow .15s, transform .15s;}
.lr-qr:hover{box-shadow:var(--glow-gold); transform:translateY(-1px);}
/* Pop-ups opened from inside a lesson must sit above the lesson screen (z 90). */
body.lesson-open .modal-backdrop{z-index:95;}

/* Current-issue prompts (2026-10-06) */
.chip.current-issue { background: #fff3d6; color: #7a4b00; border: 1px solid #f0c66b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.current-issue { background: #3a2a08; color: #f6d48a; border-color: #6b5016; } }
:root[data-theme="dark"] .chip.current-issue { background: #3a2a08; color: #f6d48a; border-color: #6b5016; }

/* Timed test (2026-10-07): per-genre drawers, rules screen, locked test window */
.tt-random-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.tt-drawers { display:flex; flex-direction:column; gap:8px; }
.tt-drawer { border:1px solid var(--line); border-radius:var(--r); background:var(--card, #fff); overflow:hidden; }
.tt-drawer[open] { box-shadow:var(--glow-mystic); }
.tt-drawer > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 14px; font-weight:700; }
.tt-drawer > summary::-webkit-details-marker { display:none; }
.tt-drawer > summary::after { content:"\25BE"; margin-left:auto; color:var(--ink-soft); transition:transform .2s ease; }
.tt-drawer[open] > summary::after { transform:rotate(180deg); }
.tt-dname { flex:1 1 auto; }
.tt-badge { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-size:.8rem; font-weight:800; flex:0 0 auto; }
.tt-badge-ph { background:var(--gold-soft); color:var(--gold-ink); letter-spacing:.02em; }
.tt-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.tt-topic { display:flex; flex-direction:column; gap:6px; text-align:left; width:100%; padding:11px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; font:inherit; cursor:pointer; transition:background .15s ease; }
.tt-topic:hover { background:var(--accent-soft); }
.tt-topic.active { background:var(--accent-soft); box-shadow:inset 4px 0 0 var(--accent); }
.tt-tchips { display:flex; flex-wrap:wrap; gap:6px; }
.tt-drawer-foot { padding:8px 14px; display:flex; justify-content:flex-end; }
.tt-bar { position:sticky; bottom:0; display:flex; align-items:center; gap:12px; padding:12px 14px; margin-top:8px; border:1px solid var(--line); border-radius:var(--r); background:var(--card, #fff); box-shadow:0 -4px 16px rgba(0,0,0,.08); }
.tt-picked { flex:1 1 auto; min-width:0; }
.tt-rule-list { padding-left:1.2em; display:flex; flex-direction:column; gap:12px; }
.tt-warn { background:var(--warn-soft); border-radius:var(--r-sm); padding:10px 12px; list-style-position:inside; }
.tt-crits { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.tt-crit { border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 10px; }
.tt-crit summary { cursor:pointer; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tt-crit ul { margin:8px 0 2px; padding-left:1.1em; }
.tt-ack { display:flex; align-items:center; gap:8px; margin-top:14px; font-weight:600; }
.tt-live-banner { padding:10px 14px; border-radius:var(--r-sm); margin-bottom:var(--gap); background:var(--warn-soft); color:var(--warn); font-weight:700; }
.tt-live-banner.tt-ended { background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); }
.tt-live-banner.tt-done { background:var(--accent-soft); color:var(--accent-ink); }
.tt-clock { font-size:1.15rem; }
@media (max-width:600px) { .tt-bar { flex-direction:column; align-items:stretch; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tt-drawer, :root:not([data-theme="light"]) .tt-bar { background:#1b1f27; } }
:root[data-theme="dark"] .tt-drawer, :root[data-theme="dark"] .tt-bar { background:#1b1f27; }

/* Readiness tab (2026-10-13): two-step start flow, and every topic is a button */
.rt-step { padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r, 12px); background:var(--card, #fff); margin-top:6px; }
.rt-topic-card { padding:10px 12px; border-left:4px solid var(--accent, #8b2fd9); background:var(--accent-soft, #f4ecfc); border-radius:8px; }
.rt-pick { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 6px; border:0; border-bottom:1px solid var(--line-soft, #eee); background:transparent; color:inherit; font:inherit; cursor:pointer; transition:background .15s ease; }
.rt-pick:hover, .rt-pick:focus-visible { background:var(--accent-soft, #f4ecfc); }
.rt-pick-side { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.rt-pick-go { font-weight:700; color:var(--accent, #8b2fd9); white-space:nowrap; font-size:.9rem; }
@media (max-width: 600px) {
  .rt-pick { flex-direction:column; align-items:flex-start; }
}

/* Clear directions (2026-10-13): what to do on every page, and what's next */
.learn-gate-hint { margin:10px 0 0; font-size:.92rem; color:var(--ink-soft, #555); }
.learn-gate-hint.open { color:var(--ok, #1d7a46); }
.learn-howto { margin:10px 0 4px; padding:8px 12px; border-radius:8px; background:var(--accent-soft, #f4ecfc); font-size:.95rem; }
.learn-next-line { margin:10px 0; padding:8px 12px; border-left:4px solid var(--ok, #1d7a46); background:rgba(29,122,70,.07); border-radius:6px; }
.pw-clock-row { display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; margin:6px 0 10px; padding:8px 12px; border-radius:8px; background:var(--gold-soft, #fff7e0); font-size:.95rem; }

/* Presence and activity log (2026-10-13) */
.pres-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; background:#9a96a8; box-shadow:0 0 0 2px rgba(154,150,168,.25); }
.pres-dot.online { background:#2fb36a; box-shadow:0 0 0 2px rgba(47,179,106,.28); animation:presPulse 2.4s ease-in-out infinite; }
.pres-dot.busy { background:#e5a11c; box-shadow:0 0 0 2px rgba(229,161,28,.3); }
@keyframes presPulse { 0%,100% { box-shadow:0 0 0 2px rgba(47,179,106,.28); } 50% { box-shadow:0 0 0 5px rgba(47,179,106,.12); } }
@media (prefers-reduced-motion: reduce) { .pres-dot.online { animation:none; } }
.ri-pres { font-size:.85rem; margin:1px 0 2px; }
.pres-now { margin:2px 0 10px; font-size:.95rem; }
.pres-bar { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:2px 0 10px; font-size:.9rem; }
.pres-person { display:inline-flex; align-items:center; gap:2px; margin-right:12px; }
.hd-presence { display:inline-flex; align-items:center; gap:4px; font-size:.85rem; margin-right:10px; }
.pres-switch { display:inline-flex; align-items:center; gap:4px; }
.pres-switch select { font-size:.85rem; padding:2px 6px; border-radius:8px; }
.act-day { margin:14px 0 4px; font-weight:700; font-size:.9rem; color:var(--ink-soft, #555); border-bottom:1px solid var(--line-soft, #eee); padding-bottom:3px; }
.act-row { display:flex; align-items:baseline; gap:10px; padding:5px 0; flex-wrap:wrap; }
.act-time { font-variant-numeric:tabular-nums; color:var(--ink-soft, #666); min-width:78px; font-size:.88rem; }
.act-kind { min-width:70px; text-align:center; }
.act-label { flex:1 1 260px; }
@media (max-width: 600px) { .act-time { min-width:0; } }

/* ===== Home page funnel (2026-10-13) ===== */
.mkt-nav-right #mktTryFree .fn-short { display:none; }
@media (max-width: 480px) {
  .mkt-nav-right #mktTryFree .fn-long { display:none; }
  .mkt-nav-right #mktTryFree .fn-short { display:inline; }
}
.mkt-hero-lead { max-width:36em; margin:0 auto 14px; font-size:1.25rem; line-height:1.45; font-weight:600; color:var(--ink); transition:opacity .2s; }
.fn-cta-xl { font-size:1.08rem !important; padding:16px 34px !important; box-shadow:0 8px 24px rgba(212,160,23,.35); }
.fn-cta-lg { font-size:1.02rem; padding:14px 30px; }
.fn-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-size:.86rem; color:var(--ink-soft); margin:12px 0 4px; }
.fn-trust span { white-space:nowrap; }
.fn-trust-light { color:rgba(255,255,255,.85); }
.fn-promo-line { font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }
.fn-cta-row { display:flex; flex-direction:column; align-items:center; gap:6px; margin:30px 0 4px; text-align:center; }
.fn-link { font-weight:700; }
.fn-cta-light { background:#fff !important; color:#2B1E05 !important; }

.fn-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:980px; margin:0 auto; }
.fn-step { background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:24px 22px; text-align:center; }
.fn-step h3 { margin:10px 0 6px; }
.fn-step p { margin:0; color:var(--ink-soft); line-height:1.55; }
.fn-step-n { width:44px; height:44px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; color:#2B1E05; background:var(--gold-metal, #e3b23c); }

.fn-benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:980px; margin:0 auto; }
.fn-benefit { background:var(--card); border-radius:16px; padding:22px; border:1.5px solid var(--line); }
.fn-benefit h3 { margin:8px 0 6px; }
.fn-benefit p { margin:0; color:var(--ink-soft); line-height:1.55; }
.fn-b-icon { font-size:1.8rem; }

.fn-sample { max-width:640px; margin:0 auto; background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:22px; position:relative; box-shadow:0 10px 30px rgba(60,40,100,.08); }
.fn-sample-tag { position:absolute; top:-12px; left:20px; background:var(--gold-metal, #e3b23c); color:#2B1E05; font-weight:800; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:3px 12px; border-radius:999px; }
.fn-sample-row { display:grid; grid-template-columns:150px 1fr 56px; gap:12px; align-items:center; padding:7px 0; font-size:.95rem; }
.fn-sample-row b { text-align:right; }
.fn-bar { height:10px; background:var(--line-soft, #eee); border-radius:999px; overflow:hidden; }
.fn-bar i { display:block; height:100%; background:linear-gradient(90deg, var(--mystic, #8b2fd9), var(--gold, #e3b23c)); border-radius:999px; }
.fn-sample-fix { margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--accent-soft, #f4ecfc); line-height:1.5; }

.fn-who { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1100px; margin:0 auto; }
.fn-who-card { background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:22px 18px; display:flex; flex-direction:column; gap:10px; }
.fn-who-card h3 { margin:0; }
.fn-who-card p { margin:0; color:var(--ink-soft); line-height:1.5; flex:1; }

.fn-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto; align-items:stretch; }
.fn-plan { background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:26px 22px; display:flex; flex-direction:column; text-align:center; position:relative; }
.fn-plan.feat { border-color:var(--gold, #e3b23c); box-shadow:0 14px 36px rgba(212,160,23,.22); transform:translateY(-6px); }
.fn-plan-flag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold-metal, #e3b23c); color:#2B1E05; font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:4px 14px; border-radius:999px; white-space:nowrap; }
.fn-plan-name { font-weight:800; }
.fn-plan-price { font-family:var(--font-display, serif); font-size:2.6rem; font-weight:800; margin:6px 0 0; }
.fn-plan-price-sm { font-size:1.7rem; margin-top:14px; }
.fn-plan-per { color:var(--ink-soft); font-size:.9rem; margin-bottom:12px; }
.fn-plan ul { text-align:left; padding-left:20px; margin:0 0 18px; flex:1; line-height:1.7; }
.fn-plan .btn.block { width:100%; }
.fn-note { text-align:center; color:var(--ink-soft); margin-top:22px; }

.fn-form { background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:24px; }
.fn-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.fn-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fn-thanks { text-align:center; padding:18px; }

.fn-final { background:linear-gradient(135deg, #2a1f4d, #5a2b9a); color:#fff; padding:64px 20px; text-align:center; }
.fn-final-inner { max-width:720px; margin:0 auto; }
.fn-final h2 { color:#fff; margin:0 0 10px; font-size:clamp(1.6rem, 5vw, 2.3rem); }
.fn-final p { color:rgba(255,255,255,.88); font-size:1.08rem; margin:0 0 22px; }
.fn-final-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.fn-final-alt { background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.6) !important; }
.fn-signin-line { margin-top:18px !important; font-size:.95rem !important; }
.fn-signin-line a { color:#ffe08a; font-weight:700; }

.fn-sticky { display:none; }
.fn-signup-perks { display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin:6px 0 10px; font-size:.9rem; color:var(--ink-soft); }

.inq-row { padding:10px 0; border-bottom:1px solid var(--line-soft, #eee); display:flex; flex-direction:column; gap:3px; }
.inq-row.done { opacity:.6; }

@media (max-width: 860px) {
  .fn-steps, .fn-benefits, .fn-plans, .fn-who { grid-template-columns:1fr; }
  .fn-who { grid-template-columns:1fr 1fr; }
  .fn-plan.feat { transform:none; order:-1; }
  .fn-sticky { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:10px; align-items:center; justify-content:space-between;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
    border-top:1.5px solid var(--line); box-shadow:0 -6px 20px rgba(60,40,100,.12); transform:translateY(110%); transition:transform .25s ease; }
  .fn-sticky.show { transform:none; }
  .fn-sticky .btn { flex:1; }
  .fn-sticky-in { font-weight:700; padding:10px 14px; border:1.5px solid var(--line); border-radius:999px; white-space:nowrap; }
  .mkt-footer { padding-bottom:70px; }
}
@media (max-width: 600px) {
  .fn-who, .fn-form-grid { grid-template-columns:1fr; }
  .fn-sample-row { grid-template-columns:110px 1fr 46px; font-size:.88rem; }
  .fn-cta-xl { width:100%; padding:16px 20px !important; }
  .fn-final-ctas .btn { width:100%; }
}

/* Small phones (320-360px): nothing may push the page wider than the screen */
@media (max-width: 400px) {
  .mkt-audience-toggle { display:flex; width:100%; }
  .mkt-audience-toggle button { flex:1; padding:9px 6px; font-size:.8rem; white-space:nowrap; }
  .mkt-mockup-chrome { overflow:hidden; }
  .mkt-mockup-url { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; margin-left:6px; }
  .fn-trust span { white-space:normal; }
}
@media (max-width: 360px) {
  .mkt-brand .brand-text { display:none; }
  .mkt-nav-right .btn { padding:9px 12px; }
}

/* Phones: get the main button into the first screen */
@media (max-width: 480px) {
  .mkt-hero-icon { display:none; }
  .mkt-hero .mkt-eyebrow { font-size:.7rem; padding:6px 12px; margin-bottom:10px; }
  .mkt-hero-sub { display:none; }
  .mkt-hero-lead { font-size:1.08rem; margin-bottom:16px; }
  .mkt-hero { padding-top:28px; }
}
@media (max-width: 400px) {
  .mkt-course-grid { grid-template-columns:1fr; }
  .mkt-course-brand-block .mcb-wordmark { font-size:clamp(1.3rem, 8vw, 1.8rem); }
}
.fn-plan ul { list-style:none; padding-left:0; }
.fn-plan li { padding-left:24px; position:relative; }
.fn-plan li::before { content:"\2713"; position:absolute; left:0; color:var(--ok, #1d7a46); font-weight:800; }

/* Interlinked numbers (2026-10-13): anything that is a number opens its list */
a.stat-link { display:block; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; border:1.5px solid transparent; }
a.stat-link:hover, a.stat-link:focus-visible { transform:translateY(-2px); box-shadow:0 8px 22px rgba(60,40,100,.14); border-color:var(--accent, #8b2fd9); text-decoration:none; }
.stat-go { margin-top:6px; font-size:.78rem; font-weight:700; color:var(--accent, #8b2fd9); opacity:.85; }
a.num-link { color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; font-weight:inherit; }
a.num-link:hover { color:var(--accent, #8b2fd9); text-decoration-style:solid; }
a.an-hcell { display:flex; align-items:center; justify-content:center; text-decoration:none; color:inherit; }
a.an-hcell:hover { outline:2px solid var(--accent, #8b2fd9); outline-offset:1px; }
.pc-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.pc-chip { text-decoration:none; cursor:pointer; }
.pc-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 8px; border-bottom:1px solid var(--line-soft, #eee); text-decoration:none; color:inherit; flex-wrap:wrap; border-radius:8px; }
.pc-row:hover, .pc-row:focus-visible { background:var(--accent-soft, #f4ecfc); text-decoration:none; }
.pc-main { flex:1 1 320px; min-width:0; }
.pc-topic { font-weight:600; line-height:1.35; }
.pc-side { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pc-score { font-weight:800; font-size:1.1rem; }
.pc-score small { font-weight:400; opacity:.6; }
.pc-open { font-size:.82rem; font-weight:700; color:var(--accent, #8b2fd9); white-space:nowrap; }
.sub-related { display:inline-flex; flex-wrap:wrap; gap:6px; }
.sub-related .chip { text-decoration:none; }
/* Readiness topic rows: title button + written capsule + write button */
.rt-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft, #eee); flex-wrap:wrap; }
.rt-row .rt-pick { flex:1 1 280px; width:auto; display:block; border:0; padding:6px 4px; }
.rt-row .rt-title { flex:1 1 280px; }
.rt-row .rt-pick-side { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rt-go { border:1.5px solid var(--accent, #8b2fd9); background:transparent; color:var(--accent, #8b2fd9); border-radius:999px; padding:4px 12px; font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.rt-go:hover { background:var(--accent-soft, #f4ecfc); }
a.rt-capsule { text-decoration:none; cursor:pointer; }
a.rt-capsule:hover { filter:brightness(.95); text-decoration:underline; }

/* ---------------------------------------------------------------------------
   Format Rescue Module (2026-10-18)
   --------------------------------------------------------------------------- */
.rescue-hero { border-left: 4px solid var(--gold); }
.rescue-why { background: var(--gold-soft); border-radius: var(--r-sm); padding: 8px 12px; }
.rescue-progress { height: 10px; border-radius: 6px; background: var(--line-soft); overflow: hidden; margin: 12px 0 4px; }
.rescue-progress-bar { height: 100%; background: var(--ok); border-radius: 6px; transition: width .4s ease; }
.rescue-map { display: grid; gap: 6px; margin-top: 8px; }
.rescue-map-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.rescue-map-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--indigo); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.rescue-chant { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); margin-left: 6px; }
.rescue-steps { display: grid; gap: 8px; margin-top: 8px; }
.rescue-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink); background: var(--card); }
.rescue-step:hover { border-color: var(--indigo); }
.rescue-step.locked { opacity: .55; cursor: not-allowed; }
.rescue-step.current { border: 2px solid var(--gold); background: var(--gold-soft); }
.rescue-step.done { background: var(--ok-soft); }
.rescue-step-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--line-soft);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.rescue-step.done .rescue-step-n { background: var(--ok); color: #fff; }
.rescue-step.current .rescue-step-n { background: var(--gold); color: #fff; }
.rescue-step-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rescue-step-go { flex: none; font-weight: 600; font-size: .9rem; color: var(--indigo); }
.rescue-q { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rescue-q-n { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.rescue-q-p { margin: 4px 0 8px; font-weight: 600; }
.rescue-passage { background: var(--paper); border-left: 3px solid var(--line); padding: 8px 12px; margin-bottom: 8px; }
.rescue-choices { display: grid; gap: 6px; }
.rescue-tf { grid-template-columns: 1fr 1fr; }
.rescue-choice, .rescue-order-item, .rescue-order-picked { text-align: left; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; width: 100%; }
.rescue-choice.picked { border: 2px solid var(--indigo); background: var(--accent-soft); }
.rescue-order-pool { display: grid; gap: 6px; margin-top: 6px; }
.rescue-order-built { margin: 6px 0; padding-left: 22px; display: grid; gap: 6px; }
.rescue-order-picked { background: var(--accent-soft); }
.rescue-q.right .rescue-q-result { background: var(--ok-soft); }
.rescue-q.wrong .rescue-q-result { background: var(--bad-soft); }
.rescue-q-result { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm); display: grid; gap: 4px; }
.rescue-fixup { background: var(--gold-soft); border-radius: var(--r-sm); padding: 8px 12px; margin: 8px 0 12px; }
.rescue-facts { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; }
.rescue-facts ol { margin: 6px 0 0; padding-left: 20px; }
.rescue-part { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 12px; }
.rescue-part.ok { border-color: var(--ok); background: var(--ok-soft); }
.rescue-part.todo { border-color: var(--gold); }
.rescue-part-h { display: flex; justify-content: space-between; gap: 8px; }
.rescue-frame { font-size: .88rem; background: var(--paper); border-radius: var(--r-sm); padding: 6px 10px; margin: 6px 0; }
.rescue-part textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line); min-height: 110px; }
.rescue-part-problems { margin: 6px 0 0; padding-left: 20px; color: #5a1f1f; }
.rescue-part-problems:empty { display: none; }
.rescue-check { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.report-reminders { border-left: 4px solid var(--gold); }
.report-reminders li { margin-bottom: 4px; }
@media (max-width: 520px) {
  .rescue-tf { grid-template-columns: 1fr; }
  .rescue-step { padding: 8px 10px; gap: 8px; }
}

/* Tiered promotion standard (2026-10-18): main frame vs supplemental. */
.chip.tier-core{background:var(--ok-soft, #E3F3EA); color:var(--ok, #1E7F4F);}
.chip.tier-growing{background:var(--info-soft); color:var(--info);}
.chip.tier-supplemental{background:var(--line-soft); color:var(--ink-soft);}
.learn-mainframe ul{margin:8px 0 0; padding-left:20px;}
.learn-mainframe li{margin:4px 0;}
.learn-mainframe .mf-use{margin-top:14px; padding:10px 12px; border-radius:var(--r-sm, 10px); background:var(--accent-soft); color:var(--accent-ink, #3B1F7A);}
.mf-checklist{margin:8px 0 10px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:var(--r-sm, 10px); background:var(--paper, #fffdf8);}
.mf-checklist summary{cursor:pointer;}
.mf-checklist ol.mf-parts{margin:8px 0 4px; padding-left:20px; font-size:.9rem;}
.mf-checklist ul.mf-pillars{list-style:none; margin:6px 0 0; padding-left:2px; font-size:.9rem;}
.mf-checklist li{margin:3px 0;}

/* ---- Readiness assignments, the do-it-now banner, the category picker, assignments by type (2026-10-21) ---- */
.donow-banner { background:#fdecea; border:1.5px solid #c0392b; border-radius:var(--r-sm, 8px); padding:10px 14px; margin:0 0 14px; }
.donow-banner[hidden] { display:none; }
.donow-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:3px 0; }
.rt-assigned { border:1.5px solid var(--mystic, #6d5bd0); }
.rt-asg { padding:10px 0; border-top:1px solid var(--line-soft, #eee); }
.rt-asg:first-of-type { border-top:0; }
.rt-cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px; }
.rt-cat { display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 12px; }
.rt-topic-list { max-height:360px; overflow:auto; }
.plain-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.plain-table th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft, #666); padding:6px 8px; border-bottom:1.5px solid var(--line, #ddd); }
.plain-table td { padding:7px 8px; border-bottom:1px solid var(--line-soft, #eee); vertical-align:top; }
.table-wrap { overflow-x:auto; }
@media (max-width: 600px) { .donow-row { flex-direction:column; align-items:flex-start; } }
.field label.opt { display:flex; align-items:center; gap:8px; margin:0; font-size:.95rem; font-weight:400; color:var(--ink, #222); cursor:pointer; }
.field label.opt input[type=radio], .field label.opt input[type=checkbox] { width:auto; flex:none; margin:0; padding:0; }
.field input.inline { width:auto; flex:none; }