/* ============================================================
   SAFELIST — DESIGN SYSTEM  (Iris)
   Dark slate + electric teal. Card-based, mobile-first.
   ============================================================ */
:root{
  --bg:#151f33;
  --bg-2:#1c2942;
  --surface:#223252;
  --surface-2:#2b3f66;
  --line:#3a5182;
  --text:#f2f6ff;
  --text-dim:#bccbe8;
  --text-mute:#90a3c6;
  --teal:#3ff0d2;
  --teal-dark:#21cfae;
  --amber:#ffcb61;
  --rose:#ff7f9b;
  --violet:#ab9dff;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 10px 28px rgba(0,0,0,.28);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,4.5vw,3rem)}
h2{font-size:clamp(1.4rem,3vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
small{color:var(--text-mute)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt2{margin-top:18px}.mt3{margin-top:28px}
.center{text-align:center}

/* ---------- top nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(21,31,51,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:22px;padding:12px 20px;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.15rem;color:var(--text)}
.logo:hover{text-decoration:none}
.logo-mark{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;
  background:linear-gradient(135deg,var(--teal),var(--violet));
  display:grid;place-items:center;color:#06121f;font-weight:900;
  font-size:.84rem;letter-spacing:-.02em;   /* sized to fit two initials */
}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{
  color:var(--text-dim);padding:8px 12px;border-radius:8px;font-size:.93rem;font-weight:600;
}
.nav-links a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.nav-links a.active{color:var(--teal);background:var(--surface)}
.nav-toggle{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);
  color:var(--text);border-radius:8px;padding:8px 12px;font-size:1.1rem;cursor:pointer}
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;margin-left:0}
  .nav-links.open{display:flex}
  .nav-in{flex-wrap:wrap}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--teal);color:#04231c;font-weight:800;border:0;cursor:pointer;
  padding:12px 22px;border-radius:10px;font-size:.98rem;transition:.15s;
  font-family:var(--font);
}
.btn:hover{background:var(--teal-dark);text-decoration:none;transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-lg{padding:16px 34px;font-size:1.08rem}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--surface);border-color:var(--teal)}
.btn-amber{background:var(--amber);color:#2b1e00}
.btn-amber:hover{background:#eab13f}
.btn-sm{padding:7px 14px;font-size:.85rem;border-radius:8px}
.btn-danger{background:var(--rose);color:#2b0710}
.btn-block{width:100%}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.card-tight{padding:16px}
.card h3{margin-top:0}

/* ---------- stat tiles ---------- */
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;position:relative;overflow:hidden;
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.stat.amber::before{background:var(--amber)}
.stat.violet::before{background:var(--violet)}
.stat.rose::before{background:var(--rose)}
.stat-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-mute);font-weight:700}
.stat-value{font-size:2rem;font-weight:900;letter-spacing:-.03em;margin:4px 0 0}
.stat-sub{font-size:.85rem;color:var(--text-dim)}

/* ---------- badges ---------- */
.badge{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.badge-teal{background:rgba(63,240,210,.17);color:var(--teal)}
.badge-amber{background:rgba(255,203,97,.17);color:var(--amber)}
.badge-violet{background:rgba(171,157,255,.18);color:var(--violet)}
.badge-rose{background:rgba(255,127,155,.17);color:var(--rose)}
.badge-mute{background:rgba(188,203,232,.14);color:var(--text-dim)}

/* ---------- forms ---------- */
label{display:block;font-weight:700;font-size:.9rem;margin:0 0 6px;color:var(--text-dim)}
input[type=text],input[type=email],input[type=password],input[type=url],
input[type=number],input[type=datetime-local],input[type=search],textarea,select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--text);font-size:1rem;font-family:var(--font);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:16px}
.hint{font-size:.83rem;color:var(--text-mute);margin-top:5px}

/* ---------- flash ---------- */
.flash{padding:13px 18px;border-radius:10px;margin:0 0 16px;font-weight:600;border:1px solid}
.flash-ok{background:rgba(63,240,210,.13);border-color:var(--teal);color:var(--teal)}
.flash-warn{background:rgba(255,203,97,.13);border-color:var(--amber);color:var(--amber)}
.flash-err{background:rgba(255,127,155,.13);border-color:var(--rose);color:var(--rose)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
th{text-align:left;padding:11px 14px;color:var(--text-mute);font-size:.76rem;
   text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}

/* ---------- progress ring (daily bonus) ---------- */
.ring-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .track{stroke:var(--line)}
.ring .fill{stroke:var(--teal);transition:stroke-dasharray .5s ease}
.ring-hole{position:relative;display:inline-grid;place-items:center}
.ring-text{position:absolute;text-align:center;font-weight:900;font-size:1.25rem;line-height:1.1}
.ring-text small{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}

/* ---------- hero ---------- */
.hero{
  padding:74px 0 60px;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(63,240,210,.17), transparent 60%),
    radial-gradient(760px 420px at 88% 0%, rgba(171,157,255,.17), transparent 60%);
  border-bottom:1px solid var(--line);
}
.eyebrow{
  display:inline-block;background:var(--surface);border:1px solid var(--line);
  color:var(--teal);padding:7px 16px;border-radius:999px;font-weight:800;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;
}
.lede{font-size:1.18rem;color:var(--text-dim);max-width:60ch}
.hl{color:var(--teal)}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding:9px 0 9px 32px;position:relative;color:var(--text-dim)}
.checklist li::before{
  content:"\2713";position:absolute;left:0;top:8px;color:var(--teal);font-weight:900;font-size:1.05rem;
}
.checklist b{color:var(--text)}

/* ---------- surf / ad viewer ---------- */
.surf-stage{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.surf-bar{
  display:flex;align-items:center;gap:16px;padding:14px 20px;flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.timer{font-size:1.6rem;font-weight:900;color:var(--amber);min-width:56px;text-align:center;
  font-variant-numeric:tabular-nums}
.ad-frame{width:100%;height:min(68vh,640px);border:0;background:#fff}
.ad-preview{padding:26px}
.ad-preview .ad-h{font-size:1.5rem;font-weight:800;color:var(--teal);margin:0 0 8px}

/* ---------- leaderboard ---------- */
.rank{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-weight:900;background:var(--surface-2);color:var(--text-dim);font-size:.95rem;
}
.rank.r1{background:linear-gradient(135deg,#ffd76e,#f5a623);color:#3a2600}
.rank.r2{background:linear-gradient(135deg,#dfe7f5,#a9b8d0);color:#1d2635}
.rank.r3{background:linear-gradient(135deg,#e6a87c,#c17c4b);color:#2e1706}

/* ---------- idea board ---------- */
.idea{display:flex;gap:16px;align-items:flex-start}
.vote{
  flex:0 0 62px;text-align:center;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:8px 0;cursor:pointer;color:var(--text);font-family:var(--font);
}
.vote:hover{border-color:var(--teal)}
.vote.voted{border-color:var(--teal);background:rgba(63,240,210,.13)}
.vote .arrow{font-size:1rem;line-height:1;color:var(--teal)}
.vote .count{font-weight:900;font-size:1.15rem;display:block}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:38px 0;margin-top:56px;color:var(--text-mute);font-size:.9rem}
.footer a{color:var(--text-dim)}

/* ---------- misc ---------- */
.copyfield{display:flex;gap:8px}
.copyfield input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem}
.divider{height:1px;background:var(--line);margin:28px 0;border:0}
.empty{text-align:center;padding:44px 20px;color:var(--text-mute)}
.empty .big{font-size:2.4rem;margin-bottom:8px}

/* ---------- messages ---------- */
.msg{display:flex;margin:12px 0}
.msg-mine{justify-content:flex-end}
.msg-theirs{justify-content:flex-start}
.msg-bubble{max-width:78%;padding:11px 15px;border-radius:14px;border:1px solid var(--line)}
.msg-mine .msg-bubble{background:rgba(63,240,210,.15);border-color:var(--teal);border-bottom-right-radius:4px}
.msg-theirs .msg-bubble{background:var(--bg-2);border-bottom-left-radius:4px}
.msg-body{font-size:.96rem;line-height:1.55;word-break:break-word}
.msg-time{font-size:.74rem;color:var(--text-mute);margin-top:5px}

/* ---------- nav count pill ---------- */
.navcount{
  display:inline-block;min-width:19px;padding:1px 6px;margin-left:5px;
  border-radius:999px;background:var(--teal);color:#04231c;
  font-size:.72rem;font-weight:900;text-align:center;line-height:1.5;
}

/* ---------- analytics bar chart ---------- */
.chart{display:flex;align-items:flex-end;gap:5px;height:190px;padding:10px 0 0;overflow-x:auto}
.chart-col{flex:1 1 0;min-width:22px;display:flex;flex-direction:column;
           align-items:center;justify-content:flex-end;height:100%}
.chart-val{font-size:.7rem;color:var(--text-mute);font-weight:800;margin-bottom:4px;height:14px}
.chart-bar{width:100%;max-width:46px;background:linear-gradient(180deg,var(--teal),var(--violet));
           border-radius:5px 5px 0 0;min-height:2px;transition:.2s}
.chart-col:hover .chart-bar{filter:brightness(1.25)}
.chart-lab{font-size:.68rem;color:var(--text-mute);margin-top:6px;white-space:nowrap}

/* ---------- founder slot grid ---------- */
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{
  flex:1 1 44px;min-width:44px;max-width:64px;aspect-ratio:1;
  display:grid;place-items:center;border-radius:10px;
  font-weight:900;font-size:.95rem;border:2px solid var(--line);
}
.slot-taken{background:linear-gradient(135deg,var(--teal),var(--violet));
            border-color:transparent;color:#06121f}
.slot-open{background:var(--bg-2);color:var(--text-mute);border-style:dashed}

/* ---------- member avatars + cards ---------- */
.avatar{
  border-radius:50%;object-fit:cover;flex:0 0 auto;display:inline-grid;
  place-items:center;border:2px solid var(--line);background:var(--surface-2);
}
.avatar-initials{color:#fff;font-weight:900;letter-spacing:-.02em;line-height:1}
.card-head{display:flex;gap:16px;align-items:flex-start}
.card-head .avatar{border-color:var(--teal)}
.mcard-hero{
  background:radial-gradient(600px 200px at 20% 0%, rgba(46,230,197,.13), transparent 65%),
             var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
}
.linkchip{
  display:inline-flex;align-items:center;gap:7px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:.9rem;font-weight:600;color:var(--text);
}
.linkchip:hover{border-color:var(--teal);text-decoration:none;color:var(--teal)}
.bio{white-space:pre-line;color:var(--text-dim);line-height:1.7}
.dirrow{display:flex;gap:13px;align-items:flex-start}

/* ---------- training library ---------- */
.videoframe{position:relative;width:100%;padding-top:56.25%;background:#000;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidcard{display:block;text-decoration:none;transition:.15s;padding:14px}
.vidcard:hover{text-decoration:none;border-color:var(--teal);transform:translateY(-2px)}
.vidthumb{position:relative;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.vidthumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vidlock{position:absolute;top:8px;right:8px;background:var(--amber);color:#2b1e00;
  font-weight:900;font-size:.72rem;padding:4px 9px;border-radius:999px}
.vidrow{display:flex;gap:11px;align-items:flex-start;padding:10px 0;
  border-top:1px solid var(--line);text-decoration:none}
.vidrow:hover{text-decoration:none}
.vidrow img{width:88px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;flex:0 0 88px}

/* ---------- ad builder ---------- */
.ad-preview-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.adimg-current{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.adimg-current img{width:180px;border-radius:9px;border:1px solid var(--line)}
.noimg{
  width:130px;flex:0 0 130px;aspect-ratio:4/3;border-radius:9px;
  border:1px dashed var(--line);background:var(--bg-2);
  display:grid;place-items:center;color:var(--text-mute);
  font-size:.78rem;text-align:center;padding:6px;
}

/* The founders landing page and its questions page now carry their own
   styles inline. The old .lp-* block that lived here was the previous
   design and was quietly overriding the new one - .lp-bar arrived with
   justify-content:space-between and pushed the logo apart from the name. */

/* A checkbox with its label on one line, big enough to hit easily. */
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;line-height:1.5}
.check input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--teal)}
.check span{color:var(--text)}

/* ---------- the rich text box ---------- */
.rich{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);overflow:hidden}
.rich-bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--line);
          background:var(--surface)}
.rich-btn{border:1px solid var(--line);background:var(--bg-2);color:var(--text-dim);
          border-radius:7px;padding:6px 11px;font-size:.85rem;font-weight:700;cursor:pointer;
          line-height:1.1}
.rich-btn:hover{border-color:var(--teal);color:var(--text)}
.rich-sep{width:1px;background:var(--line);margin:2px 4px}
.rich-area{min-height:220px;padding:14px 16px;color:var(--text);line-height:1.65;outline:none;
           overflow-y:auto;max-height:520px}
.rich-area:focus{background:rgba(63,240,210,.03)}
.rich-area:empty::before{content:attr(data-placeholder);color:var(--text-mute)}
.rich-area mark{background:#ffe08a;color:#2b2000;padding:0 3px;border-radius:3px}
.rich-area a{color:var(--teal);text-decoration:underline}
.rich-area ul,.rich-area ol{padding-left:22px;margin:0 0 1em}
.rich-area h3,.rich-area h4{margin:1em 0 .4em}
.rich-area blockquote{border-left:3px solid var(--teal);margin:0 0 1em;padding:2px 0 2px 14px;
                      color:var(--text-dim)}

/* the same formatting, when it is being READ rather than written */
.richtext{color:var(--text-dim);line-height:1.7}
.richtext mark{background:#ffe08a;color:#2b2000;padding:0 3px;border-radius:3px}
.richtext a{color:var(--teal);text-decoration:underline}
.richtext b,.richtext strong{color:var(--text)}
.richtext ul,.richtext ol{padding-left:22px;margin:0 0 1em}
.richtext li{margin-bottom:.35em}
.richtext h3,.richtext h4{color:var(--text);margin:1.2em 0 .4em;font-size:1.03rem}
.richtext blockquote{border-left:3px solid var(--teal);margin:0 0 1em;padding:2px 0 2px 14px}
.richtext code{background:var(--bg-2);border:1px solid var(--line);border-radius:5px;
               padding:1px 6px;font-size:.9em}

/* ============================================================
   MEMBER CARDS — the portrait style

   Modelled on what Mr. Martin liked at My Daily Mailer: a round
   portrait with a coloured halo, the name directly under it.
   A ring reads as "a person" instantly, and it carries status
   without needing a word — which is why the ring colour is the
   member's standing rather than decoration:

     rose   the host
     violet a founder
     amber  Pro
     teal   everybody else

   Their cream-and-orange palette does not transplant to a dark
   site, so only the structure was borrowed.
   ============================================================ */
.mgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.mtile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 16px 16px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:2px;transition:.14s;
}
.mtile:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow)}

/* The halo. An outer ring drawn with box-shadow so it never nudges layout. */
.mring{display:inline-block;border-radius:50%;padding:4px;margin-bottom:12px;line-height:0}
.mring .avatar{border:none;display:block}
.mring.is-teal  {background:linear-gradient(140deg,var(--teal),#1e9e87)}
.mring.is-amber {background:linear-gradient(140deg,var(--amber),#c78f1e)}
.mring.is-violet{background:linear-gradient(140deg,var(--violet),#6f5fd6)}
.mring.is-rose  {background:linear-gradient(140deg,var(--rose),#c9456a)}
.mtile:hover .mring{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent)}

.mtile .mname{font-weight:800;color:var(--text);font-size:1.02rem;line-height:1.25;
              word-break:break-word}
.mtile a.mname:hover{color:var(--teal);text-decoration:none}
.mtile .mreal{color:var(--text-dim);font-size:.88rem;margin-top:2px}
.mtile .mbadges{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.mtile .mline{color:var(--text-dim);font-size:.9rem;line-height:1.5;margin:11px 0 0;
              min-height:2.7em}
.mtile .mfoot{margin-top:auto;padding-top:14px;width:100%;
              border-top:1px solid var(--line)}
.mtile .mfoot .btn{width:100%}
.mtile .mpts{color:var(--text-mute);font-size:.8rem;margin-top:9px}

/* A compact row of portraits, for dashboards and sidebars. */
.mstrip{display:flex;gap:18px;flex-wrap:wrap}
.mstrip .mtile{background:transparent;border:0;padding:0;min-width:84px;max-width:96px}
.mstrip .mtile:hover{transform:none;box-shadow:none}
.mstrip .mname{font-size:.82rem;font-weight:700}

/* ========== banner builder ========== */
.bchoices { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.bchoice { position:relative; flex:1 1 150px; cursor:pointer; }
.bchoice input { position:absolute; opacity:0; width:0; height:0; }
.bchoice span {
  display:block; padding:9px 11px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-2);
  transition:border-color .12s, background .12s;
}
.bchoice span strong { display:block; font-size:.9rem; }
.bchoice span em { font-style:normal; color:var(--teal); font-size:.78rem; font-weight:700; }
.bchoice span small { display:block; color:var(--text-mute); font-size:.76rem; margin-top:2px; }
.bchoice:hover span { border-color:var(--teal); }
.bchoice input:checked + span { border-color:var(--teal); background:rgba(47,214,180,.10); }
.bchoice input:focus-visible + span { outline:2px solid var(--teal); outline-offset:2px; }

.bswatches { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.bswatch {
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 10px 6px 6px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2);
  color:var(--text); font:inherit; font-size:.82rem; font-weight:600;
}
.bswatch span { width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.bswatch:hover { border-color:var(--teal); }

.bcolours { display:flex; flex-wrap:wrap; gap:10px; }
.bcolours label {
  display:flex; align-items:center; gap:7px;
  font-size:.8rem; color:var(--text-dim); font-weight:600;
}
.bcolours input[type=color] {
  width:34px; height:28px; padding:2px; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:var(--bg-2);
}

.bstage {
  display:flex; align-items:center; justify-content:center;
  margin-top:10px; padding:16px; border-radius:12px;
  border:1px dashed var(--line);
  /* a chequerboard, so a see-through banner is visibly see-through */
  background-color:#9aa3ad;
  background-image:
    linear-gradient(45deg, #7f8892 25%, transparent 25%, transparent 75%, #7f8892 75%),
    linear-gradient(45deg, #7f8892 25%, transparent 25%, transparent 75%, #7f8892 75%);
  background-size:16px 16px;
  background-position:0 0, 8px 8px;
  overflow:auto;
}
.bstage canvas { display:block; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.bsticky { position:sticky; top:82px; }
.bthumb { background:#9aa3ad; border-radius:8px; padding:8px; overflow:auto; }
.bthumb img { display:block; max-width:100%; height:auto; margin:0 auto; }

@media (max-width:820px) {
  #bform { grid-template-columns:1fr !important; }
  .bsticky { position:static; }
}

/* ========== what to do next ========== */
.ob-card { border-color: var(--teal); }
.ob-bar {
  height:7px; border-radius:99px; background:var(--bg-2);
  overflow:hidden; border:1px solid var(--line);
}
.ob-bar span {
  display:block; height:100%;
  background:linear-gradient(90deg, var(--teal), var(--violet, #8b7cf6));
  transition:width .3s ease;
}
.ob-list { list-style:none; margin:0; padding:0; }
.ob-step {
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.ob-step:last-child { border-bottom:0; padding-bottom:0; }
.ob-tick {
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--line); background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800; color:var(--bg);
}
.ob-step.is-done .ob-tick { border-color:var(--teal); background:var(--teal); }
.ob-text { flex:1 1 220px; min-width:0; }
.ob-text strong { display:block; font-size:.95rem; }
.ob-text small { display:block; color:var(--text-mute); font-size:.82rem; margin-top:2px; }
.ob-step.is-done .ob-text strong { color:var(--text-mute); text-decoration:line-through; }
.ob-state { color:var(--teal); font-size:.82rem; font-weight:700; }

/* ========== reading a sent email in Admin ========== */
.emailframe {
  display:block; width:100%; min-width:320px; max-width:680px;
  height:460px; margin:10px 0 4px;
  border:1px solid var(--line); border-radius:10px; background:#0d1830;
}

/* ========== dated note feed ========== */
.notefeed { list-style:none; margin:14px 0 0; padding:0; }
.notefeed-item {
  position:relative; padding:0 0 16px 18px; margin:0 0 16px;
  border-left:2px solid var(--line);
}
.notefeed-item:last-child { margin-bottom:0; padding-bottom:0; }
.notefeed-item::before {
  content:""; position:absolute; left:-6px; top:5px;
  width:10px; height:10px; border-radius:50%;
  background:var(--teal); border:2px solid var(--bg-2);
}
.notefeed-when {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:6px; font-size:.82rem;
}
.notefeed-when strong { color:var(--teal); font-weight:700; }
.notefeed-when span   { color:var(--text-dim); }
.notefeed-when em     { color:var(--text-mute); font-style:normal; }
.notefeed-item .richtext { margin:0; }
.notefeed-item form { margin-top:8px; }

/* ========== pictures inside notes ========== */
.richtext img, .rich-area img {
  display:block; max-width:100%; height:auto;
  margin:12px 0; border-radius:8px; border:1px solid var(--line);
}
.rich-uploading {
  display:inline-block; padding:2px 8px; border-radius:6px;
  background:var(--bg-2); border:1px dashed var(--teal);
  color:var(--text-dim); font-size:.85rem;
}
.rich-area.rich-drop { outline:2px dashed var(--teal); outline-offset:-4px; }
.rich-btn input[type=file] { display:none; }

/* ========== dragging cards into order ========== */
.sortrow { transition:box-shadow .12s, opacity .12s; }
.sortrow.is-dragging { opacity:.45; box-shadow:0 0 0 2px var(--teal); }
.sorthandle {
  flex:none; cursor:grab; user-select:none;
  padding:2px 8px 0 0; font-size:1.2rem; line-height:1;
  color:var(--text-mute);
}
.sorthandle:active { cursor:grabbing; }
.sortarrows { display:flex; flex-direction:column; gap:4px; flex:none; }
.sortarrows form { margin:0; }
.sortarrows .btn { padding:2px 9px; line-height:1.2; }
.sortarrows .btn[disabled] { opacity:.3; cursor:not-allowed; }
.reorder-save {
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:10px 12px;
  border:1px solid var(--teal); border-radius:10px; background:var(--bg-2);
}

/* ========== member video gallery ========== */
.vgrid {
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.vcard {
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.vthumb {
  position:relative; display:block; aspect-ratio:16/9;
  background:#0b1424; overflow:hidden;
}
.vthumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .18s ease;
}
.vthumb:hover img { transform:scale(1.04); }
.vplay {
  position:absolute; inset:0; margin:auto;
  width:56px; height:40px; border-radius:10px;
  background:rgba(220,30,30,.92); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; padding-left:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.vthumb:hover .vplay { background:#ff0000; }
.vbody { padding:14px; display:flex; flex-direction:column; gap:6px; }
.vbody > strong { font-size:.98rem; line-height:1.35; }
.vbody p {
  margin:0; color:var(--text-dim); font-size:.88rem; line-height:1.5;
}
.vwho {
  display:flex; align-items:center; gap:10px;
  margin-top:8px; padding-top:10px; border-top:1px solid var(--line);
}
.vname { font-weight:700; font-size:.88rem; }

/* ========== the weekly declaration ==========
   The three states are told apart by SHAPE as much as colour — a ring,
   a filled dot with a tick, a hollow amber ring — so it still reads on a
   bad screen or to somebody who cannot separate teal from amber.

   "Not this time" is amber and never red. Red is for errors, and admitting
   a miss in a mastermind is not an error; it is the point. */
.declare-mine { border-color: var(--teal); }

.goals { list-style:none; margin:0; padding:0; }
.goal {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.goal:last-child { border-bottom:0; padding-bottom:0; }
.gdot {
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  margin-top:4px; border:2px solid var(--line); background:transparent;
}
.gdot.gopen   { border-color:var(--teal); }
.gdot.gdone   { border-color:var(--teal); background:var(--teal); }
.gdot.gmissed { border-color:var(--amber,#f5b301); border-style:dashed; }
.gtext { flex:1 1 200px; min-width:0; line-height:1.5; font-size:.94rem; }
.goal.done .gtext   { color:var(--text-mute); text-decoration:line-through; }
.goal.missed .gtext { color:var(--text-dim); }
.gtools { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.gtools form { margin:0; }
.gtools .btn { padding:3px 9px; font-size:.78rem; }

/* Folded weeks. A summary row you can read without opening it. */
.weekfold {
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); margin-top:10px; padding:0 14px;
}
.weekfold > summary {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0; cursor:pointer; list-style:none;
  font-size:.92rem;
}
.weekfold > summary::-webkit-details-marker { display:none; }
.weekfold > summary::before {
  content:"\25B8"; color:var(--text-mute); margin-right:8px;
  display:inline-block; transition:transform .15s;
}
.weekfold[open] > summary::before { transform:rotate(90deg); }
/* The arrow is a flex child too, so space-between was spreading three items
   and leaving the date stranded in the middle. Push the score right instead. */
.wfdate  { font-weight:700; margin-right:auto; }
.wfscore { color:var(--text-dim); margin-left:auto; }
.weekfold > ul, .weekfold > .dgrid { padding-bottom:14px; }
.weekfold-room { background:transparent; border-color:transparent; padding:0; }
.weekfold-room > summary { border-bottom:1px solid var(--line); }

.dgrid {
  display:grid; gap:14px; margin-top:14px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.dcard {
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px;
}
.dcard.is-me { border-color:var(--teal); }
.dhead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.dname { font-weight:700; font-size:.92rem; }

/* Goal numbering. Fixed width so the text of every goal lines up down the
   left edge, however many there are. */
.gnum {
  flex:0 0 auto; min-width:1.5em;
  color:var(--text-mute); font-weight:700; font-size:.88rem;
  margin-top:1px;
}
.goal.is-editing { align-items:center; }

/* The affiliate-link toggle. Given a switch-like outline so it reads as
   something you press, not a label somebody stuck on the card. */
.reftoggle {
  border-style:dashed !important;
  font-weight:800; letter-spacing:.01em;
}
.reftoggle:hover { border-style:solid !important; }

/* ========== notes opened from a safelist card ========== */
.cardnotes { margin-top:8px; }
.cardnotes > summary {
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; list-style:none;
  padding:3px 10px; border-radius:999px;
  border:1px dashed var(--line); background:var(--bg-2);
  color:var(--teal); font-size:.82rem; font-weight:700;
}
.cardnotes > summary::-webkit-details-marker { display:none; }
.cardnotes > summary::before { content:"\1F5D2"; font-size:.9em; }
.cardnotes > summary::after  { content:" \25B8"; transition:transform .15s; }
.cardnotes[open] > summary { border-style:solid; border-color:var(--teal); }
.cardnotes[open] > summary::after { content:" \25BE"; }
.cardnotes > summary:hover { border-color:var(--teal); }
.cardnotes .notefeed {
  margin-top:12px; padding:12px 0 0;
  border-top:1px solid var(--line);
}

/* ========== the downline builder ==========
   Same shape as the layout Mr. Martin asked for — bold banner, numbered
   steps panel, pinned cards, an inherited-from strip on each — but in this
   site's own colours. A bright cyan-and-yellow page dropped into a dark navy
   site reads as somebody else's page bolted on, and members would wonder
   whether they had left. */
.dlhero {
  display:grid; gap:20px; align-items:start;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
  background:linear-gradient(135deg, var(--teal) 0%, #1f7f9c 60%, #2b4d8f 100%);
  color:#06231f;
  border-radius:18px; padding:26px 28px;
  box-shadow:0 10px 0 rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.35);
}
.dlhero-tag {
  display:inline-block; margin-bottom:12px;
  background:var(--amber,#f5b301); color:#2b2000;
  font-size:.72rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 12px; border-radius:6px;
}
.dlhero h1 {
  margin:0 0 10px; font-size:clamp(1.7rem,4.2vw,2.6rem);
  line-height:1.05; letter-spacing:-.02em; color:#04201c;
}
.dlhero p { margin:0; color:#06322c; font-size:.98rem; line-height:1.55; max-width:52ch; }
.dlhero-steps {
  background:var(--bg); color:var(--text);
  border-radius:14px; padding:18px 20px;
  box-shadow:0 6px 0 rgba(0,0,0,.3);
}
.dlhero-steps > strong { display:block; margin-bottom:12px; font-size:1.02rem; }
.dlhero-steps ol { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.dlhero-steps li {
  display:flex; gap:10px; align-items:flex-start;
  font-size:.88rem; line-height:1.45; color:var(--text-dim);
}
.dlhero-steps li span {
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--teal); color:#06231f;
  font-weight:900; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
}

.dlsection { margin-top:28px; }
.dlsection-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.dlkicker {
  font-size:.7rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-mute);
}
.dlgrid {
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
}
.dlcard {
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.dlcard.is-pinned { border-color:var(--teal); box-shadow:0 4px 0 rgba(47,214,180,.18); }
.dldomain {
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-mute); margin-bottom:2px;
}
.dlpin {
  flex:none; font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background:var(--bg-2); border:1px solid var(--teal); color:var(--teal);
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.dlblurb { margin:0; color:var(--text-dim); font-size:.89rem; line-height:1.5; }
.dlform { margin:0; }
.dlform label { display:block; font-weight:700; font-size:.84rem; margin-bottom:5px; }
.dlnow {
  margin-top:auto; padding:11px 12px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
}
.dltag {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.76rem; font-weight:800;
}
.dltag-mine { background:rgba(47,214,180,.16); color:var(--teal);  border:1px solid var(--teal); }
.dltag-up   { background:var(--bg);            color:var(--text-dim); border:1px dashed var(--line); }
.dltag-none { background:var(--bg);            color:var(--text-mute); border:1px dashed var(--line); }

@media (max-width:760px) {
  .dlhero { grid-template-columns:1fr; padding:20px; }
}

/* ========== the blog ========== */
.postlist { display:grid; gap:0; }
.postcard {
  padding:22px 0; border-bottom:1px solid var(--line);
}
.postcard:first-child { padding-top:6px; }
.postcard:last-child  { border-bottom:0; }
.postcard-title { margin:0; font-size:1.22rem; line-height:1.3; }
.postcard-title a { color:var(--teal); text-decoration:none; }
.postcard-title a:hover { text-decoration:underline; }
.postcard-meta { color:var(--text-mute); font-size:.84rem; font-style:italic; white-space:nowrap; }
.postcard-excerpt { margin:10px 0 0; color:var(--text-dim); line-height:1.65; }
.postcard-more { white-space:nowrap; font-weight:700; }

.post-title {
  margin:6px 0 14px; font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.15; letter-spacing:-.015em;
}
.post-by {
  display:flex; gap:12px; align-items:center;
  padding-bottom:18px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.post-author { font-weight:800; }
.post-body { font-size:1.02rem; line-height:1.75; }
.post-body p { margin:0 0 1.1em; }
.post-body h3, .post-body h4 { margin:1.6em 0 .5em; }
.post-body img { border-radius:10px; }
.rich-tall { min-height:320px; }

/* ========== the page banner ==========
   Same gradient as the Downline Builder, which Mr. Martin asked for across
   the main pages. The Downline Builder's own hero keeps its numbered-steps
   panel; everything else uses this simpler form. */
.pagehero {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:22px; flex-wrap:wrap;
  background:
    radial-gradient(700px 260px at 0% 50%, rgba(255,255,255,.30), transparent 72%),
    linear-gradient(135deg, var(--teal) 0%, #1f7f9c 60%, #2b4d8f 100%);
  color:#06231f;
  border-radius:18px; padding:24px 26px; margin-bottom:22px;
  box-shadow:0 8px 0 rgba(0,0,0,.3), 0 16px 34px rgba(0,0,0,.3);
}
.pagehero-main { min-width:0; flex:1 1 320px; }
.pagehero-tag {
  display:inline-block; margin-bottom:10px;
  background:var(--amber,#f5b301); color:#2b2000;
  font-size:.7rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px;
}
.pagehero h1 {
  margin:0 0 8px; color:#04201c;
  font-size:clamp(1.55rem,3.6vw,2.2rem); line-height:1.1; letter-spacing:-.02em;
}
.pagehero p {
  margin:0; color:#06322c; font-size:.96rem; line-height:1.55; max-width:52ch;
}
.pagehero p a { color:#032a24; text-decoration:underline; font-weight:700; }
.pagehero-side { flex:0 0 auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pagehero-side .btn {
  background:var(--bg); color:var(--text); border-color:transparent;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.pagehero-side .btn:hover { background:var(--bg-2); }
/* On a phone the band is tall and narrow, so a diagonal gradient drops the
   last lines of text onto the dark blue end. Lift the whole thing instead. */
@media (max-width:640px) {
  .pagehero {
    padding:20px;
    background:
      radial-gradient(680px 560px at 10% 30%, rgba(255,255,255,.34), transparent 78%),
      linear-gradient(150deg, var(--teal) 0%, #2c8fad 55%, #3a65a8 100%);
  }
  .pagehero p { max-width:none; }
}

/* ============================================================
   WHAT IS WAITING  (the admin tab buttons)

   Amber means somebody is waiting for a decision. Red means the
   oldest one has been waiting more than two days. Nothing else
   is ever coloured, so a colour here always means work.
   ============================================================ */
.queueline {
  margin: 14px 0 0; font-size: .95rem; color: var(--text-dim);
}
.queueline strong { color: var(--amber, #f5b301); font-size: 1.05rem; }
.queueline .queuelate { color: var(--rose, #ff6b8a); }
.queueline.queueclear { color: var(--text-dim); opacity: .75; }

.adtabs .btn.has-wait {
  border-color: var(--amber, #f5b301);
}
.tabcount {
  display: inline-block; min-width: 18px; margin-left: 7px; padding: 1px 6px;
  background: var(--amber, #f5b301); color: #2b2000;
  border-radius: 999px;
  font-size: .72rem; font-weight: 900; line-height: 1.5; text-align: center;
  vertical-align: 1px;
}
/* Waiting too long. Red is earned by age, never by category. */
.tabcount.is-late {
  background: var(--rose, #ff6b8a); color: #2b0008;
  animation: tabpulse 2.4s ease-in-out infinite;
}
.adtabs .btn.has-wait:has(.tabcount.is-late) { border-color: var(--rose, #ff6b8a); }

@keyframes tabpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,138,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(255,107,138,0); }
}
/* Someone who has asked their computer to stop moving things gets a
   still badge. It is just as red; it simply does not breathe. */
@media (prefers-reduced-motion: reduce) {
  .tabcount.is-late { animation: none; }
}
/* The count beside Admin in the menu. Amber like the tab badges, so the
   two mean the same thing wherever you happen to be standing. */
.navcount.navcount-wait { background: var(--amber, #f5b301); color: #2b2000; }

/* ============================================================
   THE AFFILIATE DISCLOSURE

   Quiet, but never hidden. The rule it has to meet is "clear and
   conspicuous", so it is deliberately NOT the faintest thing on
   the page - it sits above the footer links in readable grey,
   separated by a rule so the eye finds it.
   ============================================================ */
.disclosure {
  margin: 20px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: .82rem; line-height: 1.6;
  max-width: 86ch;
}
.disclosure strong { color: var(--text); }
/* The one-line version, on the two pages with their own small footer. */
.disclosure-sm {
  margin: 10px auto 0; padding: 10px 16px 0;
  border-top: 1px solid var(--line);
  max-width: 82ch; text-align: center;
  font-size: .78rem; line-height: 1.55; color: var(--text-dim);
}

/* ============================================================
   THE RECORDING NOTICE

   Amber-edged, not red. This is not a warning - it is a fact
   somebody needs before they decide, and it should read as
   straightforward rather than alarming.
   ============================================================ */
.recnotice {
  margin: 0 0 22px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--amber, #f5b301);
  border-left-width: 4px; border-radius: 12px;
  max-width: 78ch;
}
.recnotice > strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 1.02rem; }
.recnotice p { margin: 0 0 9px; color: var(--text-dim); font-size: .92rem; line-height: 1.6; }
.recnotice p:last-child { margin-bottom: 0; }
.recnotice .recnotice-soft {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); color: var(--text-dim); font-size: .88rem;
}
/* The tick box on the seat form. Given room so it is read, not skated past. */
.reccheck {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 12px; padding: 11px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  font-size: .85rem; line-height: 1.5; color: var(--text-dim); cursor: pointer;
}
.reccheck input { margin-top: 2px; flex: none; }
.reccheck:hover { border-color: var(--amber, #f5b301); }

/* ============================================================
   THE GLOSSARY

   Thirty-odd definitions is a wall of text unless it is broken
   up, so: a letter bar that jumps, a heading per letter, and
   each term as its own card with the one-line answer in bold
   before the fuller explanation.
   ============================================================ */
.azbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 18px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.azbar a, .azbar span {
  display: inline-block; min-width: 26px; padding: 3px 0;
  text-align: center; font-size: .82rem; font-weight: 800; border-radius: 6px;
}
.azbar a { color: var(--teal); text-decoration: none; }
.azbar a:hover { background: var(--bg-2); }
.azbar span { color: var(--text-dim); opacity: .35; }   /* a letter with nothing behind it */

.azhead {
  margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--teal);
  font-size: 1.5rem; color: var(--teal); letter-spacing: .04em;
  scroll-margin-top: 90px;                               /* clears the sticky menu */
}
.gterm { margin-bottom: 12px; scroll-margin-top: 90px; }
.gterm:target { border-color: var(--amber, #f5b301); }   /* the one you linked to */
.gperma {
  margin-left: 6px; color: var(--text-dim); opacity: 0;
  font-weight: 400; text-decoration: none; transition: opacity .15s;
}
.gterm:hover .gperma { opacity: .6; }
.gperma:hover { opacity: 1 !important; color: var(--teal); }
.galso {
  margin-top: 6px; font-size: .8rem; color: var(--text-dim);
  font-style: italic;
}
.gshort {
  margin: 10px 0 0; color: var(--text); font-size: .97rem;
  line-height: 1.55; font-weight: 600;
}
.gbody {
  margin: 9px 0 0; color: var(--text-dim); font-size: .92rem;
  line-height: 1.65; max-width: 80ch;
}

/* ============================================================
   THE DELETE CONFIRMATION

   This used to be an absolutely-positioned panel next to the
   Delete button, inside a table that scrolls sideways - so it
   opened wherever the table happened to be scrolled to, which
   was often off the right-hand edge of the screen. For a thing
   that permanently destroys a member record, "easy to miss" is
   the wrong failure.

   Now it is a proper dialog: dead centre, page dimmed behind
   it, nothing else clickable until a choice is made.
   ============================================================ */
.delconf { display: inline-block; }
.delconf > summary {
  cursor: pointer; color: var(--rose); font-size: .85rem; font-weight: 700;
  list-style: none; padding: 6px 4px;
}
.delconf > summary::-webkit-details-marker { display: none; }
.delconf > summary::marker { content: ''; }
.delconf > summary:hover { text-decoration: underline; }

/* Closed: neither piece exists on the page at all. */
.delconf > .delback,
.delconf > .delcard { display: none; }

.delconf[open] > .delback {
  display: block; position: fixed; inset: 0; z-index: 400;
  background: rgba(3, 8, 20, .74);
  animation: delfade .12s ease-out;
}
.delconf[open] > .delcard {
  display: block; position: fixed; z-index: 401;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 28px));
  max-height: calc(100vh - 36px); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rose); border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .65);
  text-align: left; white-space: normal;
  animation: delpop .14s ease-out;
}
.delcard-title { margin: 0 0 12px; color: var(--text); font-size: 1.12rem; line-height: 1.3; }
.delcard-p { margin: 0 0 11px; color: var(--text-dim); font-size: .9rem; line-height: 1.6; }
.delcard-alt {
  padding: 10px 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
}
.delcard-alt strong { color: var(--text); }
.delcard-foot { margin: 14px 0 0; color: var(--text-mute); font-size: .8rem; }
.delcard .field label { font-size: .85rem; }

@keyframes delfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes delpop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .delconf[open] > .delback,
  .delconf[open] > .delcard { animation: none; }
}

/* ============================================================
   THE BOOK CLUB
   ============================================================ */
.bcnext { border-left: 4px solid var(--amber, #f5b301); }
.bcnext.is-live { border-left-color: var(--teal); }
.bcpulse { animation: bcbeat 2s ease-in-out infinite; }
@keyframes bcbeat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 240, 210, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(63, 240, 210, 0); }
}
@media (prefers-reduced-motion: reduce) { .bcpulse { animation: none; } }

.bcbook { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.bccover {
  flex: none; width: 140px; height: auto; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.bcbook-main { flex: 1 1 320px; min-width: 0; }
.bcauthor { margin: 6px 0 0; color: var(--text-dim); font-size: .95rem; }
.bcblurb  { margin: 14px 0 0; color: var(--text-dim); line-height: 1.65; max-width: 70ch; }
.bcweek {
  margin-top: 16px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: 9px;
  color: var(--text-dim); font-size: .92rem; line-height: 1.55;
}
.bcweek strong { color: var(--text); display: block; margin-bottom: 3px; }
.bcpast strong { display: block; }

.bcleave {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line);
}
.bcleave span { color: var(--text-mute); font-size: .85rem; }
/* The cover currently on a book, shown in the admin form beside the
   file picker so you can see what you are about to replace. */
.bccover-now {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 12px; padding: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.bccover-now img {
  flex: none; width: 76px; height: auto; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
/* The book currently on the go, shown at the top of Admin > Book Club so
   that coming back to the tab answers "did that save?" before anything
   else does. */
.bcnow { border-left: 4px solid var(--teal); }
.bcnow-cover {
  flex: none; width: 64px; height: auto; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

/* ============================================================
   THE CONCEPT TABLE

   The board is genuinely white. Everything else on this site is
   dark, and a whiteboard that is dark grey is not a whiteboard -
   it also photographs and screen-shares far better light.
   ============================================================ */
.cbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.cbar-hint  { color: var(--text-dim); font-size: .88rem; line-height: 1.5; max-width: 72ch; }
.cbar-hint strong { color: var(--text); }
.cbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.csave {
  font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--line);
}
.csave.is-busy { color: var(--amber, #f5b301); border-color: var(--amber, #f5b301); }
.csave.is-bad  { color: var(--rose, #ff6b8a); border-color: var(--rose, #ff6b8a); }

.cwrap { display: block; }
.cwrap.is-admin {
  display: grid; gap: 16px;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 760px) {
  .cwrap.is-admin { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the tray ---- */
.ctray {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; max-height: 78vh; overflow-y: auto;
}
.ctray.is-target { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(63,240,210,.25); }
.ctray-head { margin: 0 0 4px; font-size: 1rem; display: flex; justify-content: space-between; }
.ctray-head span { color: var(--text-dim); font-weight: 700; }
.ctray-hint  { margin: 0 0 12px; color: var(--text-dim); font-size: .8rem; line-height: 1.45; }
.ctray-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.ctray-empty { color: var(--text-mute); font-size: .82rem; margin: 0; }
.cadd { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.cadd > summary {
  cursor: pointer; color: var(--teal); font-weight: 700; font-size: .88rem;
  list-style: none; padding: 4px 0;
}
.cadd > summary::-webkit-details-marker { display: none; }
.cadd .field { margin-bottom: 10px; }
.cadd label  { font-size: .8rem; }

/* ---- the board ---- */
.cboard {
  position: relative;
  min-height: 620px; aspect-ratio: 16 / 10;
  background: #fdfdfb;
  background-image:
    linear-gradient(rgba(10,30,60,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,30,60,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid #c9d2e0; border-radius: 14px;
  box-shadow: inset 0 2px 18px rgba(10, 25, 50, .07);
  overflow: hidden;
}
.cboard.is-target { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(63,240,210,.3); }
.cboard-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; color: #5a6b86; pointer-events: none;
}
.cboard-empty strong { font-size: 1.05rem; color: #2e3f5c; }
.cboard-empty span   { font-size: .9rem; }

/* ---- a tile ---- */
.ctile {
  position: relative;
  width: 82px; height: 82px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid rgba(10, 25, 50, .22);
  box-shadow: 0 2px 6px rgba(10, 25, 50, .18);
  text-align: center; overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: none;                    /* the drag handler wants the gesture */
}
.ctile.is-placed { position: absolute; }
.ctile.can-move  { cursor: grab; }
.ctile.is-dragging {
  cursor: grabbing; opacity: .92;
  transform: scale(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
}
.ctile-num {
  position: absolute; top: 3px; left: 5px;
  font-size: .56rem; font-weight: 700; opacity: .7; line-height: 1;
}
.ctile-sym {
  font-size: 1.85rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
}
.ctile-name {
  margin-top: 3px; padding: 0 3px;
  font-size: .56rem; font-weight: 700; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .02em;
  max-width: 100%; word-break: break-word;
}

/* ---- the key ---- */
.ckey {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.ckey-item { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: .82rem; }
.ckey-dot  { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(10,25,50,.3); }

/* ---- shown to a room ---- */
.cwrap:fullscreen { background: var(--bg); padding: 18px; }
.cwrap:fullscreen .cboard { height: calc(100vh - 42px); aspect-ratio: auto; }
.cwrap.is-big .cboard { min-height: 86vh; }       /* fallback if fullscreen is refused */
/* A tile shrunk to table-row size, for the admin list. */
.ctile-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid rgba(10, 25, 50, .22);
  font-weight: 900; font-size: .95rem;
}

/* ============================================================
   ARROWS BETWEEN TILES

   The layer sits UNDER the tiles so a line never covers a
   symbol, and ignores the mouse entirely unless arrows are
   being drawn - otherwise it would swallow every click meant
   for a tile.
   ============================================================ */
.clinks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.ctile.is-placed { z-index: 2; }          /* tiles sit above the lines */

.clink-line {
  stroke: #2c3f5e; stroke-width: 2.2; fill: none; stroke-linecap: round;
}
.clink-line.is-dashed { stroke-dasharray: 7 5; }
.clink-hit { stroke: transparent; stroke-width: 18; fill: none; }

.clink-tagbg { fill: #fdfdfb; stroke: #c3cddc; stroke-width: 1; }
.clink-tag {
  fill: #2c3f5e; font-size: 11px; font-weight: 700;
  text-anchor: middle; font-family: inherit;
}

/* ---- while arrows are being drawn ---- */
.cboard.is-linking { cursor: crosshair; }
.cboard.is-linking .ctile { cursor: crosshair; }
.cboard.is-linking .clinks { pointer-events: auto; }
.clink.is-live { cursor: pointer; }
.clink.is-live:hover .clink-line { stroke: #d6304f; stroke-width: 3.4; }
.clink.is-live:hover .clink-hit  { stroke: rgba(214, 48, 79, .1); }

/* The first tile of a pair, waiting for the second. */
.ctile.is-chosen {
  outline: 3px solid #d6304f; outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(214, 48, 79, .18);
}

.ckind {
  font-size: .78rem; padding: 5px 8px; border-radius: 8px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); max-width: 140px;
}
/* The video currently open in the form, so it is obvious which card
   the fields below belong to. */
.vcard.is-editing { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(63,240,210,.22); }
/* The definition writer panel in Admin > Glossary. */
.lexis { border-left: 4px solid var(--violet, #ab9dff); }
/* The band across the board while arrows are being drawn, so nobody has to
   remember which mode they are in. */
.clinkband {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  padding: 9px 14px;
  background: rgba(214, 48, 79, .93); color: #fff;
  font-size: .85rem; line-height: 1.45;
  border-radius: 13px 13px 0 0;
  pointer-events: none;
}
.clinkband strong { color: #fff; }
.btn.is-on { background: var(--rose, #ff6b8a); color: #2b0008; border-color: transparent; }

/* ============================================================
   SOCIAL PROFILES

   On the card they are buttons, each carrying its network's own
   colour so the eye finds the right one without reading. In the
   edit form the same coloured mark sits beside the box, so it is
   obvious which box is which.
   ============================================================ */
.socialrow {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
}
.socialchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.socialchip:hover { border-color: var(--teal); transform: translateY(-1px); }
.socialchip-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  color: #fff; font-size: .68rem; font-weight: 900; line-height: 1;
  text-transform: lowercase;
}
.socialchip-tx { white-space: nowrap; }

/* ---- the boxes on the account page ---- */
.socialedit { display: grid; gap: 10px; margin-bottom: 4px; }
.socialedit-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 24px minmax(78px, 110px) minmax(0, 1fr);
}
.socialedit-row label {
  margin: 0; font-size: .86rem; font-weight: 700; color: var(--text-dim);
}
.socialedit-row input { margin: 0; }
@media (max-width: 560px) {
  .socialedit-row { grid-template-columns: 24px minmax(0, 1fr); }
  .socialedit-row input { grid-column: 1 / -1; }
}

/* ============================================================
   RECORDINGS OF THE MASTERMIND
   ============================================================ */
.mmgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.mmcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.mmcard:hover { border-color: var(--teal); transform: translateY(-2px); }
.mmthumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--bg); overflow: hidden;
}
.mmthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmplay {
  position: absolute; inset: 0; margin: auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 18, 34, .74); color: #fff; font-size: 1.1rem;
  padding-left: 3px;                       /* the triangle sits visually left */
}
.mmcard:hover .mmplay { background: var(--teal); color: #04201c; }
/* The mastermind number, where the eye lands first. */
.mmnum {
  position: absolute; top: 8px; left: 8px;
  background: var(--amber, #f5b301); color: #2b2000;
  font-size: .72rem; font-weight: 900; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 6px;
}
.mmbody { padding: 13px 14px 15px; }
.mmbody strong { display: block; line-height: 1.3; }
.mmwhen {
  margin-top: 5px; color: var(--teal);
  font-size: .78rem; font-weight: 700;
}
.mmbody p {
  margin: 8px 0 0; color: var(--text-dim);
  font-size: .86rem; line-height: 1.5;
}

/* ============================================================
   CASE STUDIES AND WORKFLOWS
   ============================================================ */
.casecard { display: block; text-decoration: none; color: inherit; }
.casecard:hover { border-color: var(--teal); }
.casecard strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.casecard p { margin: 8px 0 10px; color: var(--text-dim); font-size: .9rem; line-height: 1.55; }

.longread { color: var(--text-dim); line-height: 1.75; max-width: 72ch; font-size: .97rem; }

/* ---- screenshots ---- */
.shotgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.shot { margin: 0; }
.shot img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
}
.shot figcaption {
  margin-top: 7px; color: var(--text-dim); font-size: .83rem; line-height: 1.45;
}

/* ---- the peek at a CSV ---- */
.csvpeek { font-size: .82rem; }
.csvpeek th {
  background: var(--bg); color: var(--text);
  font-weight: 800; white-space: nowrap;
}
.csvpeek td { color: var(--text-dim); white-space: nowrap; }

/* ---- the stages of a workflow ---- */
.stagelist { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.stage {
  position: relative; padding: 0 0 6px 0; margin-bottom: 22px;
}
.stage-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.stage-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #04201c;
  font-weight: 900; font-size: 1rem;
}
.stage-head h2 { font-size: 1.25rem; }
.stage-sub { margin: 4px 0 0; color: var(--text-dim); font-size: .9rem; line-height: 1.5; }
.stage-empty { margin-left: 50px; }

.steplist { list-style: none; margin: 0 0 0 50px; padding: 0; }
.step {
  position: relative; padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--violet, #ab9dff); border-radius: 9px;
}
.step strong { display: block; line-height: 1.4; }
.step p { margin: 6px 0 0; color: var(--text-dim); font-size: .88rem; line-height: 1.6; }
@media (max-width: 560px) {
  .steplist { margin-left: 0; }
  .stage-empty { margin-left: 0; }
}

/* ---- the journal ---- */
.jfeed { margin-top: 16px; }
.jempty { color: var(--text-mute); font-size: .88rem; }
.jnote {
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: 10px;
}
/* A private note looks different, so it is never mistaken for published. */
.jnote.is-private { border-left-color: var(--text-mute); border-style: dashed; }
.jmeta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px; font-size: .78rem; color: var(--text-dim);
}
.jdate { font-weight: 800; color: var(--text); }
.jedited { font-style: italic; }
.jbody { color: var(--text-dim); line-height: 1.7; font-size: .93rem; }

/* ============================================================
   SUB-STEPS — the fourth layer of a workflow

   Indented under their step and visually quieter, so the shape
   reads at a glance: stage, step, then the list under it.
   ============================================================ */
.itemlist {
  list-style: none; margin: 10px 0 0 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--line);
}
.wfitem { padding: 7px 0; }
.wfitem-t {
  display: block; color: var(--text); font-size: .9rem; font-weight: 700;
}
.wfitem-t::before {
  content: '—'; margin-right: 7px; color: var(--violet, #ab9dff); font-weight: 400;
}
.wfitem-b {
  display: block; margin-top: 3px; padding-left: 20px;
  color: var(--text-dim); font-size: .85rem; line-height: 1.6;
}

/* ---- editing them ---- */
.substeps { margin-top: 8px; }
.substeps > summary {
  cursor: pointer; color: var(--violet, #ab9dff);
  font-size: .8rem; font-weight: 700; padding: 3px 0; list-style: none;
}
.substeps > summary::-webkit-details-marker { display: none; }
.substeps > summary::before { content: '▸ '; }
.substeps[open] > summary::before { content: '▾ '; }
.substep-row {
  align-items: flex-start; gap: 8px;
  padding: 6px 0 6px 12px; margin-left: 2px;
  border-left: 2px solid var(--line);
}
.substep-add {
  display: grid; gap: 6px; margin: 8px 0 4px 14px;
  padding: 10px; background: var(--bg);
  border: 1px dashed var(--line); border-radius: 8px;
}
.substep-add input, .substep-add textarea { margin: 0; font-size: .85rem; }
.substep-add button { justify-self: start; }

/* ============================================================
   LINKS ON A WORKFLOW

   A link is a destination, so it is drawn as something you press
   rather than as more text to read.
   ============================================================ */
.wflinks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.wflink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  color: var(--teal); font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.wflink:hover { border-color: var(--teal); transform: translateY(-1px); }
.wflink-go { opacity: .7; font-size: .9em; }
/* Inside a sub-step the chips sit under its explanation, indented with it. */
.wfitem .wflinks { margin-left: 20px; }

/* ---- editing them ---- */
.wflinkedit { margin-top: 8px; }
.wflinkedit > summary {
  cursor: pointer; color: var(--teal);
  font-size: .8rem; font-weight: 700; padding: 3px 0; list-style: none;
}
.wflinkedit > summary::-webkit-details-marker { display: none; }
.wflinkedit > summary::before { content: '🔗 '; }
.wflinkrow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0 6px 12px; border-left: 2px solid var(--line);
}
.wflinkadd {
  display: grid; gap: 6px; margin: 8px 0 4px 12px; padding: 10px;
  background: var(--bg); border: 1px dashed var(--line); border-radius: 8px;
}
.wflinkadd input { margin: 0; font-size: .85rem; }
.wflinkadd button { justify-self: start; }

/* making a video category without leaving the Add a video form */
.newcat-inline{
  margin-top:10px; padding:10px 12px;
  border:1px dashed var(--line); border-radius:10px;
  background:rgba(255,255,255,.02);
}
.newcat-inline .hint{display:block;margin-bottom:7px}
.newcat-inline input[type=text]{margin:0}

/* ============================================================
   YOUTUBE DATA
   A dashboard that shows every number equally shows none of
   them, so four tiles lead and everything else is quieter.
   ============================================================ */
.yt-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}
.yt-tile{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; position:relative; overflow:hidden;
}
.yt-tile::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--teal)}
.yt-tile.yt-good::before{background:var(--teal)}
.yt-tile.yt-watch::before{background:var(--amber,#f0b429)}
.yt-tile.yt-bad::before{background:var(--rose)}
.yt-big{font-size:1.9rem;font-weight:900;line-height:1.1;letter-spacing:-.02em}
.yt-lab{font-size:.8rem;color:var(--text-dim);font-weight:700;margin-top:2px}
.yt-sub{font-size:.76rem;color:var(--text-mute);margin-top:6px;line-height:1.45}
.yt-delta{font-weight:800}
.yt-delta.up{color:var(--teal)}
.yt-delta.down{color:var(--rose)}

/* ---- what the numbers say ---- */
.yt-finds{list-style:none;padding:0;margin:14px 0 0}
.yt-find{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.yt-find:first-child{border-top:0;padding-top:4px}
.yt-find p{margin:3px 0 0;color:var(--text-dim);font-size:.9rem;line-height:1.55}
.yt-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--text-mute)}
.yt-good .yt-dot{background:var(--teal)}
.yt-watch .yt-dot{background:var(--amber,#f0b429)}
.yt-bad  .yt-dot{background:var(--rose)}

.yt-todo{margin:12px 0 0;padding-left:22px}
.yt-todo li{margin-bottom:11px;line-height:1.6}
.yt-todo li::marker{font-weight:900;color:var(--teal)}

/* ---- every video ---- */
.yt-table{width:100%;font-size:.88rem}
.yt-table th{white-space:nowrap}
.yt-table td{vertical-align:middle}
.yt-n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.yt-vcell{display:flex;gap:10px;align-items:center;min-width:260px}
.yt-thumb{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:0 0 72px}
.yt-vt{display:block;font-weight:700;line-height:1.35}
.yt-vmeta{display:block;font-size:.76rem;color:var(--text-mute);margin-top:2px}
.yt-opp{color:var(--teal);font-weight:800}

/* ---- Argus ---- */
.argus{
  margin-top:18px;padding:18px 20px;border-radius:14px;
  border:1px solid var(--teal); background:rgba(46,230,197,.05);
}
.argus-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.argus-eye{font-size:1.3rem}
.argus-sum{margin:0;font-size:1.02rem;line-height:1.65}
.argus-h{margin:16px 0 6px;font-size:.84rem;text-transform:uppercase;
         letter-spacing:.06em;color:var(--text-dim)}
.argus-list{margin:0;padding-left:20px}
.argus-list li{margin-bottom:9px;line-height:1.6}
.argus-do li::marker{font-weight:900;color:var(--teal)}

/* ---- picking a week ---- */
.yt-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.yt-pick{
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  font-size:.86rem;font-weight:700;color:var(--text-dim);text-decoration:none;
}
.yt-pick:hover{border-color:var(--teal);color:var(--text)}
.yt-pick.on{background:var(--teal);border-color:var(--teal);color:#06231f}

/* ---- the admin side ---- */
.yt-reps{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.yt-rep{
  display:block;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.yt-rep:hover{border-color:var(--teal)}
.yt-rep.on{border-color:var(--teal);background:rgba(46,230,197,.06)}
.yt-rep .hint{display:block;margin-top:3px}
.yt-files{margin-top:12px}
.yt-file{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-top:1px solid var(--line);
}
.yt-steps{margin:12px 0 0;padding-left:22px;line-height:1.75}
.yt-steps li{margin-bottom:5px}

/* ---- the way in, on the Case Studies page ---- */
.ytcard{display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit}
.ytcard:hover{border-color:var(--teal)}
.ytcard-icon{font-size:2rem;flex:0 0 auto}
.ytcard-body{flex:1}
.ytcard-body p{margin:4px 0 6px;color:var(--text-dim);font-size:.92rem;line-height:1.55}
.ytcard-go{font-size:1.4rem;color:var(--teal);flex:0 0 auto}

@media (max-width:640px){
  .yt-big{font-size:1.5rem}
  .yt-thumb{display:none}
  .yt-vcell{min-width:170px}
}

/* ---------- a chart for every metric ----------
   Sideways bars, because the labels are video titles and upright bars
   would cut every one of them to an unreadable stub. */
.yt-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-top:14px}
.yt-chartcard{margin:0}
.yt-chartcard h4{margin:0 0 4px;font-size:1rem}
.yt-chartblurb{margin:0 0 14px;line-height:1.5}

.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:9px;align-items:center}
.hbar-lab{
  font-size:.78rem;color:var(--text-dim);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hbar-track{position:relative;height:17px;border-radius:5px;background:rgba(255,255,255,.05)}
.hbar-fill{
  height:100%;border-radius:5px;min-width:3px;
  background:linear-gradient(90deg,var(--violet),var(--teal));
}
.hbar-fill.hb-good {background:linear-gradient(90deg,var(--teal-dark),var(--teal))}
.hbar-fill.hb-watch{background:linear-gradient(90deg,#c9893a,var(--amber))}
.hbar-fill.hb-bad  {background:linear-gradient(90deg,#c2425f,var(--rose))}
.hbar-fill.hb-amber{background:linear-gradient(90deg,#c9893a,var(--amber))}
/* the channel average, drawn through every bar so it reads as one line */
.hbar-avg{
  position:absolute;top:-3px;bottom:-3px;width:0;
  border-left:2px dashed rgba(255,255,255,.45);
}
.hbar-val{
  font-size:.79rem;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right;
}
.hbar-foot{margin:12px 0 0;line-height:1.5}

/* ---------- each video's own daily line ----------
   A sparkline needs thin bars over a short run. Given the whole page
   width, 28 days becomes 28 fat blocks and the shape disappears, so the
   strip is deliberately capped and the bars very nearly touch.
   NOTE: the quiet-day class is spark-off, NOT .empty - .empty is the
   site-wide empty-state box and its 44px padding blows the strip apart. */
.sparks{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.spark-row{
  display:grid;grid-template-columns:minmax(104px,20%) minmax(0,460px) auto;
  gap:14px;align-items:end;
}
.spark-lab{
  font-size:.79rem;color:var(--text-dim);line-height:1.3;padding-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.spark{
  display:flex;align-items:flex-end;gap:1px;height:40px;
  border-bottom:1px solid var(--line);
}
.spark-b{
  flex:1 1 0;min-width:0;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--teal),var(--violet));
}
.spark-b:hover{filter:brightness(1.3)}
/* a day with nothing: a faint tick on the baseline, so the gap is visible
   as a gap rather than as missing chart */
.spark-b.spark-off{background:rgba(255,255,255,.08);height:2px}
.spark-tot{
  font-size:.79rem;font-weight:800;min-width:30px;text-align:right;
  font-variant-numeric:tabular-nums;padding-bottom:2px;
}

@media (max-width:640px){
  .yt-charts{grid-template-columns:1fr}
  .hbar{grid-template-columns:minmax(72px,34%) 1fr auto}
  .hbar-lab,.spark-lab{font-size:.72rem}
  .spark-row{grid-template-columns:minmax(76px,28%) 1fr auto;gap:9px}
}

/* ============================================================
   AI ANSWERS
   Answers are long, so a card shows a preview and the question
   page shows them in full. Each tool gets its own chip colour
   so a comparison can be read without reading the labels.
   ============================================================ */
.aichip{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  border:1px solid transparent;
}
.aichip-sm{padding:2px 8px;font-size:.7rem;margin:1px 2px 1px 0}
.aichip.ai-green  {background:rgba(63,240,210,.14); color:var(--teal);   border-color:rgba(63,240,210,.35)}
.aichip.ai-teal   {background:rgba(63,240,210,.10); color:var(--teal);   border-color:rgba(63,240,210,.25)}
.aichip.ai-orange {background:rgba(255,203,97,.14); color:var(--amber);  border-color:rgba(255,203,97,.35)}
.aichip.ai-blue   {background:rgba(123,170,255,.14);color:#9dc0ff;       border-color:rgba(123,170,255,.35)}
.aichip.ai-violet {background:rgba(171,157,255,.14);color:var(--violet); border-color:rgba(171,157,255,.35)}
.aichip.ai-slate  {background:rgba(255,255,255,.07);color:var(--text-dim);border-color:var(--line)}

/* ---- searching ---- */
.aisearch{margin-bottom:4px}
.aitopics{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.aitopic{
  display:inline-block;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);font-size:.8rem;font-weight:700;
  color:var(--text-dim);text-decoration:none;
}
.aitopic:hover{border-color:var(--teal);color:var(--text)}
.aitopic.on{background:var(--teal);border-color:var(--teal);color:#06231f}
.aitopic-n{opacity:.65;font-weight:800;margin-left:3px}

/* ---- the list ---- */
.aiq-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.aiq-card{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit}
.aiq-card:hover{border-color:var(--teal)}
.aiq-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aiq-when{margin-left:auto;font-size:.74rem;color:var(--text-mute);white-space:nowrap}
.aiq-q{font-size:1rem;line-height:1.45}
.aiq-ex{margin:0;color:var(--text-dim);font-size:.88rem;line-height:1.55}
.aiq-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto;padding-top:4px}

/* ---- one question ---- */
.aiq-single{border-color:var(--teal)}
.aiq-block{margin-top:12px}
.aiq-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.aiq-text{
  font-size:1.12rem;line-height:1.6;font-weight:700;
  padding:14px 16px;border-radius:11px;
  background:rgba(63,240,210,.06);border:1px solid rgba(63,240,210,.2);
}
.ainotes p{margin:0;color:var(--text-dim);line-height:1.65}

/* ---- the answers ---- */
.aians-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.aians-card{margin:0}
.aians-card.is-best{border-color:var(--teal)}
.aians-head{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.aians-model{font-size:.78rem;color:var(--text-dim);font-weight:700}
.aians-len{font-size:.76rem;color:var(--text-mute)}
.aicopy{margin-left:auto}
.aicopy.is-copied{color:var(--teal);border-color:var(--teal)}
.aians-body{
  line-height:1.7;font-size:.96rem;
  white-space:normal;word-break:break-word;overflow-wrap:anywhere;
}

/* a pasted answer is long, so the box it is pasted into should be too */
textarea.aipaste{min-height:200px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem;line-height:1.6}

@media (max-width:640px){
  .aiq-list{grid-template-columns:1fr}
  .aiq-text{font-size:1rem;padding:12px 13px}
  .aians-head{gap:7px}
  .aicopy{margin-left:0}
}

/* ============================================================
   SEARCH DATA
   Reuses the AI Answers card and chip layout - these two
   sections are the same shape of thing and should not look
   like two different websites.
   ============================================================ */
.sdchip{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;white-space:nowrap;
  background:rgba(171,157,255,.14);color:var(--violet);
  border:1px solid rgba(171,157,255,.35);
}
.sdmeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.sdmeta-k{font-weight:800}

/* whatever sat above the headings in the file - kept, because on a Trends
   export it is the only place the date range is written down */
.sd-pre{
  margin-top:10px;padding:9px 12px;border-radius:9px;
  border-left:3px solid var(--line);background:rgba(255,255,255,.03);
  font-size:.84rem;color:var(--text-dim);line-height:1.55;
}
.sd-pre .hint{display:block;margin-bottom:3px}

/* Let the table scroll sideways rather than crush the first column into
   one word per line. A keyword phrase has to be readable on one line. */
.sdtable{width:100%;min-width:620px;font-size:.86rem}
.sdtable td:first-child,.sdtable th:first-child{min-width:190px}
.sdtable th{white-space:nowrap;position:sticky;top:0;background:var(--card);z-index:1}
.sdtable td{vertical-align:top;max-width:360px}
.sdtable .sd-n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sdtable tbody tr:hover{background:rgba(255,255,255,.03)}

.sd-steps{margin:10px 0 0;padding-left:22px;line-height:1.75}
.sd-steps li{margin-bottom:4px}

.sdnote.is-private{border-left:3px solid var(--amber)}

/* a journal note written with the formatting bar */
.jbody h3,.jbody h4{margin:14px 0 6px;font-size:1rem}
.jbody p{margin:0 0 10px}
.jbody ul,.jbody ol{margin:0 0 10px;padding-left:22px}
.jbody li{margin-bottom:5px}
.jbody blockquote{
  margin:10px 0;padding:8px 14px;border-left:3px solid var(--teal);
  background:rgba(63,240,210,.05);
}
.jbody img{max-width:100%;height:auto;border-radius:9px;margin:8px 0}
.jbody mark{background:#ffe08a;color:#2b2000;padding:0 3px;border-radius:3px}
.jbody code{
  background:rgba(255,255,255,.07);padding:1px 5px;border-radius:4px;
  font-size:.9em;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.jbody pre{
  background:rgba(0,0,0,.25);padding:11px 13px;border-radius:9px;overflow-x:auto;
  font-size:.85rem;line-height:1.6;
}
.jbody a{color:var(--teal)}

@media (max-width:640px){
  .sdtable{font-size:.8rem}
  .sdtable td{max-width:200px}
}

/* ============================================================
   CHECKLISTS
   A checklist that cannot be ticked is just a list, so the tick
   and the bar that moves when you press it are the whole design.
   ============================================================ */
.clchip{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;white-space:nowrap;
  background:rgba(63,240,210,.12);color:var(--teal);
  border:1px solid rgba(63,240,210,.3);
}
.clnum{
  display:inline-block;min-width:22px;padding:1px 6px;margin-right:4px;
  border-radius:6px;background:rgba(255,255,255,.07);
  font-size:.78rem;font-weight:900;text-align:center;color:var(--text-dim);
}

/* ---- the bar ---- */
.clbar-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clbar{
  flex:1;min-width:120px;height:9px;border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden;
}
.clbar-fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--violet),var(--teal));
  transition:width .25s ease;
}
.clbar-fill.is-done{background:linear-gradient(90deg,var(--teal-dark),var(--teal))}
.clbar-n{font-size:.78rem;font-weight:800;color:var(--text-dim);white-space:nowrap}

/* ---- the steps ---- */
.cllist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.clstep{
  display:flex;gap:13px;align-items:flex-start;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
  transition:border-color .15s,opacity .15s;
}
.clstep:hover{border-color:rgba(63,240,210,.4)}
.clstep.is-done{border-color:rgba(63,240,210,.35);background:rgba(63,240,210,.04)}
.clstep.is-done .clstep-label{color:var(--text-mute);text-decoration:line-through}

.clstep-form{margin:0;flex:0 0 auto}
.cltick{
  background:none;border:0;padding:0;cursor:pointer;display:block;
}
.cltick-box{
  display:grid;place-items:center;width:26px;height:26px;margin-top:1px;
  border-radius:7px;border:2px solid var(--line);
  font-size:.95rem;font-weight:900;color:#06231f;line-height:1;
  transition:background .15s,border-color .15s;
}
.cltick:hover .cltick-box{border-color:var(--teal)}
.clstep.is-done .cltick-box{background:var(--teal);border-color:var(--teal)}

.clstep-body{flex:1;min-width:0}
.clstep-n{
  display:inline-block;min-width:20px;margin-right:6px;
  font-size:.78rem;font-weight:900;color:var(--text-mute);
}
.clstep-label{font-weight:700;line-height:1.5}
.clstep-note{
  display:block;margin-top:5px;font-size:.87rem;
  color:var(--text-dim);line-height:1.6;
}

/* ---- a checklist card in the list ---- */
.clcard.is-done{border-color:rgba(63,240,210,.4)}

@media (max-width:640px){
  .clstep{padding:12px 13px;gap:11px}
  .clbar-n{font-size:.74rem}
}

/* ============================================================
   AVATAR — a member's own ideal customer
   Four questions, so each one gets its own card with a number
   on it and goes quietly green once it has been answered.
   ============================================================ */
.avnote{
  border-left:3px solid var(--teal);
  background:rgba(63,240,210,.05);
  font-size:.95rem;line-height:1.6;
}
/* the privacy line, on the avatar itself: quiet, but impossible to miss */
.avprivate{display:flex;gap:11px;align-items:flex-start;
  font-size:.93rem;line-height:1.6;color:var(--text-dim)}
.avprivate strong{color:var(--text)}
.avprivate-lock{flex:0 0 auto;font-size:1.05rem;line-height:1.5;opacity:.9}
/* not a card when it rides under the hero - just a line under the chip */
div.avprivate:not(.card){margin:14px 2px 0;padding-left:13px;
  border-left:3px solid var(--teal)}

.avq-preview{margin:12px 0 0;padding-left:22px;line-height:1.7}
.avq-preview li{margin-bottom:10px}
.avq-preview .hint{display:block;margin-top:2px}

.avq-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.avq-head .hint{margin:4px 0 0;line-height:1.55}
.avq-n{
  flex:0 0 32px;display:grid;place-items:center;width:32px;height:32px;
  border-radius:9px;background:rgba(255,255,255,.07);
  font-size:1rem;font-weight:900;color:var(--text-dim);
}
.avq.is-filled{border-color:rgba(63,240,210,.35)}
.avq.is-filled .avq-n{background:var(--teal);color:#06231f}
.avq-eg{
  margin:0 0 14px;padding:9px 13px;border-radius:9px;
  background:rgba(255,255,255,.03);border-left:3px solid var(--line);
  line-height:1.6;
}

/* ---- the characteristics ---- */
.avtraits{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:5px}
.avtrait{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.03);
}
.avtrait-dot{
  flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--teal);
}
.avtrait-text{flex:1;min-width:140px;line-height:1.5}
.avtrait-tools{display:flex;gap:2px;align-items:center;opacity:.45;transition:opacity .15s}
.avtrait:hover .avtrait-tools,.avtrait:focus-within .avtrait-tools{opacity:1}
.avtrait-btn{
  background:none;border:0;cursor:pointer;padding:3px 6px;border-radius:5px;
  color:var(--text-dim);font-size:.9rem;line-height:1;
}
.avtrait-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.avtrait-x:hover{color:var(--rose)}
/* A class with display on it BEATS the browser rule for [hidden], so the
   edit box would sit open on every line. It has to be said explicitly. */
.avtrait-edit{display:flex;gap:8px;width:100%;margin-top:7px}
.avtrait-edit[hidden]{display:none}
.avtrait-edit input[type=text]{margin:0}

/* ---- the two pictures ---- */
.avpics{display:flex;gap:16px;flex-wrap:wrap}
.avpic{
  flex:1 1 150px;max-width:210px;display:flex;flex-direction:column;
  align-items:center;gap:7px;text-align:center;
}
.avpic-box{
  width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px dashed var(--line);
}
.avpic-box img{width:100%;height:100%;object-fit:cover}
.avpic-none{font-size:2.6rem;opacity:.3}
.avpic-form{margin:0}
.avpic-pick{cursor:pointer;display:inline-block}

@media (max-width:640px){
  .avq-head{gap:10px}
  .avq-n{flex:0 0 26px;width:26px;height:26px;font-size:.88rem}
  .avtrait-tools{opacity:1}
  .avpic{max-width:none}
}

/* ------------------------------------------------------------
   [hidden] LOSES TO A CLASS THAT SETS display.
   Both of these are meant to stay out of sight until something
   reveals them, and both carry a class with display on it, so
   the browser's own [hidden] rule was being overruled and they
   sat open on the page. Said explicitly here instead.
   ------------------------------------------------------------ */
.reorder-save[hidden]{display:none}
.avtrait-edit[hidden]{display:none}

/* ============================================================
   AI VISIBILITY (GEO) — his own tab
   ============================================================ */
.geoscore{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.geochecks{list-style:none;margin:0;padding:0}
.geocheck{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line)}
.geocheck:first-child{border-top:0}
.geocheck p{margin:4px 0 0;color:var(--text-dim);font-size:.9rem;line-height:1.55}
.geodot{
  flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin-top:6px;
  background:var(--text-mute);display:inline-block;
}
.geodot.geo-good{background:var(--teal)}
.geodot.geo-warn{background:var(--amber)}
.geodot.geo-bad {background:var(--rose)}

.geocounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.geocount{
  padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.geocount strong{font-size:1.6rem;font-weight:900;line-height:1}
.geocount span{font-size:.78rem;color:var(--text-dim);font-weight:700}
.geocount.geoc-doing{border-color:rgba(63,240,210,.45)}
.geocount.geoc-done{border-color:rgba(63,240,210,.25);opacity:.75}

.geotac{margin-bottom:0}
.geochip{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;white-space:nowrap;
  border:1px solid var(--line);color:var(--text-dim);
}
.geochip.geoa-onsite {background:rgba(63,240,210,.12); color:var(--teal);   border-color:rgba(63,240,210,.3)}
.geochip.geoa-content{background:rgba(171,157,255,.12);color:var(--violet); border-color:rgba(171,157,255,.3)}
.geochip.geoa-offsite{background:rgba(255,203,97,.12); color:var(--amber);  border-color:rgba(255,203,97,.3)}
.geochip.geoa-measure{background:rgba(123,170,255,.12);color:#9dc0ff;       border-color:rgba(123,170,255,.3)}

/* the written-up week */
.georep h4{margin:18px 0 7px;font-size:.84rem;text-transform:uppercase;
           letter-spacing:.06em;color:var(--text-dim)}
.georep-lede{margin:0;color:var(--text-dim)}
.georep-list{margin:0;padding-left:20px}
.georep-list li{margin-bottom:9px;line-height:1.6}
.georep-list .hint{font-weight:400}
.georep-list p{margin:3px 0 0}

/* a pasted transcript, read back */
.geotext{
  max-height:420px;overflow-y:auto;padding:14px 16px;border-radius:10px;
  background:rgba(0,0,0,.18);line-height:1.75;font-size:.93rem;
}

@media (max-width:640px){
  .geocount strong{font-size:1.3rem}
}
.geoempty{margin:8px 0 0;padding:10px 14px;border-radius:9px;
          border:1px dashed var(--line);background:rgba(255,255,255,.02)}

/* ---------- the FAQ page ---------- */
.faqlist{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.faqitem{
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:0;overflow:hidden;
}
.faqitem summary{
  cursor:pointer;padding:15px 18px;font-weight:800;font-size:1.02rem;
  line-height:1.45;list-style:none;
}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::before{content:'+ ';color:var(--teal);font-weight:900}
.faqitem[open] summary::before{content:'\2212 '}
.faqitem summary:hover{color:var(--teal)}
.faqanswer{padding:0 18px 17px;line-height:1.7;color:var(--text-dim)}
.faqmore p{margin:6px 0 0;line-height:1.65}
.faqrules{margin:10px 0 0;padding-left:20px;line-height:1.65}
.faqrules li{margin-bottom:9px}

/* ---------- a mastermind written up (session.php) ---------- */
.mmnote{max-width:760px;margin:0 auto}
.mmnote-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.mmnote-h1{font-size:1.9rem;line-height:1.25;margin:0 0 14px}
.mmnote-lede{color:var(--text);font-size:1.07rem;line-height:1.65;margin:0 0 20px;
  padding-left:14px;border-left:3px solid var(--teal)}
.mmnote-video{position:relative;width:100%;padding-top:56.25%;background:#000;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:0 0 24px}
.mmnote-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mmnote-body h2{font-size:1.25rem;color:var(--text);margin:1.7em 0 .5em}
.mmnote-foot h3{margin:0 0 6px;font-size:1.05rem}
.mmnote-foot p{margin:0;color:var(--text-dim);line-height:1.7}
@media (max-width:640px){
  .mmnote-h1{font-size:1.5rem}
  .mmnote-lede{font-size:1rem}
}

/* ---------- book club recordings, grouped under their book ---------- */
.bcvgroup{border-top:1px solid var(--line);padding-top:16px;margin-top:22px}
.bcvgroup:first-of-type{border-top:0;padding-top:0}
.bcvgroup-head{display:flex;gap:13px;align-items:center}
.bcvgroup-cover{width:46px;flex:0 0 46px;border-radius:5px;display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.45)}
.bcvgroup-head h3{line-height:1.25}

/* ---------- the prompt library ---------- */
.promptmeta{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.promptcard h3 a{text-decoration:none;color:var(--text)}
.promptcard h3 a:hover{color:var(--teal)}
.promptbar{align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}

/* The prompt itself. pre-wrap is the whole point: every space and every
   line break the author typed is kept, and long lines still wrap instead
   of forcing the page sideways on a phone. */
.promptbody{
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  margin:0;padding:15px 16px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88rem;line-height:1.6;color:var(--text);
  max-height:460px;overflow-y:auto;
}
.promptfold summary{cursor:pointer;font-weight:800;margin-bottom:10px}
.promptfold[open] summary{margin-bottom:12px}

/* The writing box in the admin, same monospace so the shape he types is
   the shape he sees. */
.promptinput{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88rem;line-height:1.6;white-space:pre;overflow-wrap:normal;
  overflow-x:auto;
}

/* ============================================================
   THE WORKSPACE SHELL (signed in)

   Sidebar down the left, page to the right of it. Visitors
   never see any of this - they keep the top bar, so none of
   these rules touch the pages a stranger lands on.
   ============================================================ */
.shell{display:flex;align-items:flex-start;min-height:100vh}

.side{
  width:248px;flex:0 0 248px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;z-index:30;
}
.side-logo{
  display:flex;align-items:center;gap:10px;
  padding:17px 18px;text-decoration:none;color:var(--text);font-weight:900;
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--surface);z-index:2;
}
.side-logo:hover{text-decoration:none}

.shellmain{flex:1;min-width:0}
/* The page used to sit in a 1180px column centred on the whole window.
   With a sidebar taking the left, centring on what is left of it is
   what keeps the content under the heading rather than off to one side. */
.shellmain .wrap{max-width:1160px}

.sidenav{display:flex;flex-direction:column;flex:1;padding:10px 10px 18px}

.sidenav a{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;margin:1px 0;border-radius:8px;
  color:var(--text-dim);text-decoration:none;font-size:.92rem;font-weight:600;
  line-height:1.3;
}
.sidenav a:hover{background:var(--bg-2);color:var(--text);text-decoration:none}
.sidenav a.on{background:rgba(63,240,210,.12);color:var(--teal)}
.sidenav a span:first-child{flex:1;min-width:0}

.side-top{padding-bottom:9px;margin-bottom:5px;border-bottom:1px solid var(--line)}

/* ---- a folding group ---- */
.sidegroup{border:0}
.sidegroup summary{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;margin:1px 0;border-radius:8px;
  cursor:pointer;list-style:none;
  color:var(--text-mute);font-size:.78rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.sidegroup summary::-webkit-details-marker{display:none}
.sidegroup summary:hover{background:var(--bg-2);color:var(--text-dim)}
.sidegroup-i{font-size:.95rem;opacity:.75;flex:0 0 auto}
.sidegroup-t{flex:1;min-width:0}
/* The arrow. Drawn rather than a character, so it turns smoothly and
   points the same way in every browser. */
.sidegroup-a{
  flex:0 0 auto;width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;opacity:.7;
}
.sidegroup[open] > summary .sidegroup-a{transform:rotate(45deg)}
.sidegroup[open] > summary{color:var(--text-dim)}
.sidegroup-in{padding-left:14px;margin:2px 0 6px;border-left:1px solid var(--line);margin-left:19px}
.sidegroup-in a{font-weight:500;font-size:.9rem;padding:7px 10px}

/* ---- account, pushed to the bottom ---- */
.side-foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.side-pro{color:var(--amber) !important;font-weight:800 !important}
.side-out{color:var(--text-mute) !important}

/* ---- the toggle and the scrim, both only on small screens ---- */
.sidetoggle{display:none}
.side-scrim{display:none}

.skiplink{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--teal);color:#04201c;padding:10px 16px;border-radius:0 0 8px 0;font-weight:800;
}
.skiplink:focus{left:0}

@media (max-width:980px){
  .shell{display:block}
  .side{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .side.open{transform:translateX(0)}
  .sidetoggle{
    display:flex;align-items:center;justify-content:center;
    position:sticky;top:0;z-index:25;
    width:46px;height:46px;margin:8px 0 0 10px;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;
    color:var(--text);font-size:1.25rem;cursor:pointer;
  }
  .side-scrim{
    display:block;position:fixed;inset:0;z-index:28;
    background:rgba(0,0,0,.55);border:0;
  }
  .side-scrim[hidden]{display:none}
  .shellmain .wrap{max-width:100%}
}

/* ============================================================
   THE WORD PUZZLE
   ============================================================ */
.pzwrap{--pz-cell:38px}
.pzbar{align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* The frame. Scrolls sideways rather than squashing, because a crossword
   square that is not square stops reading as a crossword. */
.pzframe{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;overflow-x:auto;
}
.pzgrid{display:grid;gap:3px;justify-content:center;min-width:min-content;margin:0 auto}

/* One slot, covering as many squares as the word is long. */
.pz-slot{
  display:grid;gap:3px;cursor:pointer;border-radius:5px;
  outline-offset:2px;transition:background .12s,box-shadow .12s;
}
.pz-slot{grid-auto-flow:column}
.pz-slot.is-down{grid-auto-flow:row}
.pz-slot:hover:not(.is-filled){background:rgba(63,240,210,.08)}
.pz-slot.is-over{background:rgba(63,240,210,.18);box-shadow:0 0 0 2px var(--teal)}
.pz-slot.is-wrong{box-shadow:0 0 0 2px var(--rose)}
.pz-slot:focus-visible{outline:2px solid var(--teal)}

/* One square. */
.pz-sq{
  width:var(--pz-cell);height:var(--pz-cell);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  font-weight:800;font-size:1rem;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.pz-sq.is-letter{background:rgba(63,240,210,.14);border-color:var(--teal);color:var(--teal)}

/* The loose pieces. They have to look like pieces - something with weight
   that you could pick up - not like a list of links. */
.pztray-wrap{margin-top:20px}
.pztray-h{margin:0 0 4px}
.pztray{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;min-height:46px}
.pz-tile{
  display:inline-flex;align-items:center;
  padding:11px 16px;border-radius:9px;cursor:grab;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(0,0,0,.35);
  color:var(--text);font-weight:700;font-size:.95rem;font-family:inherit;
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
.pz-tile:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(0,0,0,.35);border-color:var(--teal)}
.pz-tile:active{cursor:grabbing}
.pz-tile.is-dragging{opacity:.4}
.pz-tile.is-picked{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal);transform:translateY(-2px)}
.pz-tile.is-wrong{border-color:var(--rose);box-shadow:0 0 0 2px var(--rose)}

.pzclue-list{margin:10px 0 0;padding-left:20px;line-height:1.7;color:var(--text-dim)}
.pzclue-list li{margin-bottom:7px}

/* Finished. */
.pzwrap.is-done .pzframe{border-color:var(--teal);box-shadow:0 0 0 2px rgba(63,240,210,.25)}

@media (max-width:640px){
  .pzwrap{--pz-cell:30px}
  .pzframe{padding:11px}
  .pz-sq{font-size:.85rem}
  .pz-tile{padding:9px 13px;font-size:.88rem}
}