/* ── 100% You · The Bridge Workshop ───────────────────────────────────────────
   Built for people who are not comfortable with computers: 17px floor on body
   text, 18px inside anything they type into, big targets, no hover-only
   affordances, and nothing that moves unless it has to. */

:root{
  --teal:    #00a8a3;   /* the lead colour — buttons, links, the bridge */
  --teal-dk: #007a76;   /* hover, and text on light backgrounds */
  --clay:    #c64e3f;
  --sky:     #5ba4cf;
  --pink:    #e967ba;
  --olive:   #7f8a3d;
  --gold:    #f0c105;

  --ink:     #22201C;
  --paper:   #F2EFE8;
  --paper-2: #E7E2D8;
  --white:   #fff;
  --muted:   #6B665C;
  --muted-2: #9A9488;
  --border:  #DFD9CD;
  --good:    #00807c;
  --warn-bg: #FDF4DA;
  --warn-br: #E8CE7A;
  --warn-tx: #6A5310;

  /* What is behind the artwork. The bridge symbol carves its speech bubble out
     in this colour, so a card must override it or the bubble goes invisible. */
  --surface: var(--paper);

  --font-display:'Fraunces', Georgia, serif;
  --font-body:   'Inter', -apple-system, "Segoe UI", sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;
  --radius: 16px;
  --shell: 1080px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden]{ display:none !important; }
a{ color:var(--teal-dk); }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0; }
h1{ font-size:34px; }
h2{ font-size:23px; }
h3{ font-size:19px; }
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal-dk); margin:0 0 8px;
}
.muted{ color:var(--muted); }
.lede{ font-size:18px; color:var(--muted); max-width:62ch; margin:10px 0 0; }
.prose p{ margin:0 0 14px; max-width:66ch; }
.prose p:last-child{ margin-bottom:0; }
.section-h{ margin:38px 0 6px; }
.section-sub{ color:var(--muted); margin:0 0 18px; max-width:66ch; }

/* ── Header ── */
.site-header{
  max-width:var(--shell); margin:0 auto; padding:20px 28px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand-logo{ height:42px; width:auto; display:block; }
.brand-mark{ font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.brand-mark i{ font-style:normal; }
.brand-mark .m1, .brand-mark .m2{ color:var(--teal); }
.brand-mark .m3{ color:var(--clay); }
.brand-mark .mp{ color:var(--pink); }
.brand-divider{ width:1px; height:24px; background:var(--border); }
.brand-sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.account{ display:flex; align-items:center; gap:16px; font-size:15px; color:var(--muted); }
.account b{ color:var(--ink); }
.linkish{
  background:none; border:none; padding:0; font:inherit; color:var(--teal-dk);
  cursor:pointer; border-bottom:1px solid currentColor;
}
.rule{
  max-width:var(--shell); margin:0 auto; height:4px; border-radius:4px;
  background:linear-gradient(90deg,
    var(--teal) 0 52%, var(--gold) 52% 68%, var(--clay) 68% 86%, var(--pink) 86% 100%);
}

/* ── The bridge ── */
/* A conversation carved out of the ground, with a plank across it.
   The symbol colours itself from these variables directly (as presentation
   attributes) — CSS selectors do not reach inside a <use> shadow tree, so
   styling .plank or .gap from here would silently paint everything black. */
.bridge{ display:block; color:var(--teal); }

/* ── Sign in ── */
.signin{ display:flex; justify-content:center; padding:56px 20px 90px; }
.signin-card{
  --surface:var(--white);
  background:var(--white); border:1px solid var(--border); border-radius:22px;
  padding:34px 36px 30px; max-width:520px; width:100%;
  box-shadow:0 22px 60px -30px rgb(34 32 28 / .35);
}
.signin-bridge{ width:230px; height:99px; margin:0 0 18px -6px; }
.signin-card h1{ font-size:30px; margin:0 0 12px; }
.signin-card__blurb{ color:var(--muted); margin:0 0 26px; font-size:16.5px; }
.signin-card label{ display:block; font-size:14.5px; font-weight:600; margin-bottom:18px; }
.signin-card input{
  display:block; width:100%; margin-top:8px; padding:14px 16px; font-size:18px;
  font-family:var(--font-body); color:var(--ink);
  border:1.5px solid var(--border); border-radius:12px; background:var(--white);
}
.signin-card input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgb(0 168 163 / .18); }
.signin-err{ color:#B3261E; font-size:15px; margin:0 0 12px; min-height:1.4em; }
.signin-foot{ font-size:14.5px; color:var(--muted); margin:18px 0 0; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:16px; font-weight:600; text-decoration:none;
  padding:13px 22px; border-radius:12px; border:1.5px solid transparent; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.btn--primary{ background:var(--teal); color:var(--white); }
.btn--primary:hover{ background:var(--teal-dk); }
.btn--ghost{ background:var(--white); border-color:var(--border); color:var(--ink); padding:10px 16px; font-size:15px; }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal-dk); }
.btn--block{ width:100%; padding:16px; font-size:18px; }
.btn--copy{ background:var(--teal); color:var(--white); font-size:17px; padding:14px 28px; }
.btn--copy:hover{ background:var(--teal-dk); }
.btn.is-done{ background:var(--clay); }
.btn:focus-visible, .tab:focus-visible, .linkish:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* ── Tabs ── */
main{ max-width:var(--shell); margin:0 auto; padding:0 28px 90px; }
.tabs{
  display:flex; gap:6px; margin:26px 0 30px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin;
}
.tab{
  flex:0 0 auto; background:transparent; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--muted);
  padding:11px 18px; border-radius:999px; white-space:nowrap;
}
.tab:hover{ color:var(--ink); background:var(--paper-2); }
.tab[aria-selected="true"]{ background:var(--teal); color:var(--white); }
.tab .tab__dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--clay); margin-left:8px; vertical-align:2px;
}
.tab[aria-selected="true"] .tab__dot{ background:var(--gold); }

/* ── Cards ── */
.card{
  --surface:var(--white);
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 28px;
}
/* ── Downloads ── */
/* Always at the foot of a panel, never at the head: at the top they read as the
   next thing to do, and nobody needs to download anything to take part. */
.dl-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:38px; padding:22px 26px;
  background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius);
}
.dl-bar__text{ flex:1 1 320px; min-width:0; }
.dl-bar__label{ display:block; font-family:var(--font-display); font-size:19px; font-weight:600; }
.dl-bar__note{ margin:6px 0 0; font-size:15.5px; color:var(--muted); max-width:60ch; }
.dl-bar__btns{ display:flex; gap:10px; }
.dl-bar .btn--ghost{ padding:12px 22px; font-size:16px; }
.access-note{ display:inline; }
.access-note::before{ content:" "; }

.access-banner{
  margin:0 0 30px; padding:16px 20px; font-size:16.5px;
  background:var(--white); border:1px solid var(--border);
  border-left:5px solid var(--gold); border-radius:12px; max-width:72ch;
}
.access-banner--quiet{
  border-left-color:var(--border); color:var(--muted); font-size:15.5px; margin:30px 0 0;
}

/* ── Welcome hero ── */
.hero{ display:flex; gap:34px; align-items:center; margin-bottom:34px; }
.hero__text{ flex:1 1 460px; min-width:0; }
.hero__text h1{ margin:0 0 16px; }
.hero__bridge{ flex:0 0 320px; width:320px; height:138px; }
@media (max-width:860px){ .hero__bridge{ display:none; } }

/* ── Checklist ── */
.checklist-head{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.checklist-head h2{ margin:0 0 4px; }
.checklist-head p{ margin:0; }
.progress{ display:flex; align-items:center; gap:12px; }
.progress__ring{ position:relative; width:54px; height:54px; }
.progress__ring svg{ width:54px; height:54px; transform:rotate(-90deg); }
.progress__ring span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.progress__track{ fill:none; stroke:var(--paper-2); stroke-width:5; }
.progress__value{
  fill:none; stroke:var(--teal); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:113; stroke-dashoffset:113; transition:stroke-dashoffset .4s ease;
}
.progress__label{ font-size:14.5px; color:var(--muted); white-space:nowrap; }

.checklist{ list-style:none; margin:24px 0 0; padding:0; }
.checklist li{ border-top:1px solid var(--border); }
.checklist li:last-child{ border-bottom:1px solid var(--border); }
.check-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 4px; cursor:pointer; }
.check-row input{
  flex:0 0 auto; width:26px; height:26px; margin:2px 0 0; accent-color:var(--teal); cursor:pointer;
}
.check-row__text{ min-width:0; }
.check-row__label{ font-size:18px; font-weight:600; display:block; }
.check-row__help{ color:var(--muted); font-size:16px; margin:6px 0 0; max-width:66ch; }
.check-row__actions{ margin-top:10px; display:flex; gap:16px; flex-wrap:wrap; font-size:15px; }
.check-row.is-done .check-row__label{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--muted-2); }
.checklist-foot{ margin:22px 0 0; font-size:15.5px; color:var(--muted); }

/* ── Schedule ── */
.days{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:26px; }
@media (max-width:860px){ .days{ grid-template-columns:1fr; } }
.day__label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dk); }
.day__title{ margin:2px 0 0; }
.day__date{ color:var(--muted); font-size:15.5px; margin:6px 0 0; }
.day__blocks{ list-style:none; margin:20px 0 0; padding:0; }
.day__blocks li{ display:flex; gap:16px; padding:11px 0; border-top:1px dashed var(--border); }
.day__time{ flex:0 0 62px; font-family:var(--font-mono); font-size:14px; color:var(--teal-dk); padding-top:2px; }
.day__what b{ font-weight:600; }
.day__what p{ margin:2px 0 0; color:var(--muted); font-size:15px; }
.day__foot{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.schedule-zoom{ margin-top:18px; }
.schedule-zoom:empty{ display:none; }

/* Dates, everywhere they appear. They are what people scan a page for, so they
   keep full-strength ink even inside a muted line. */
.when{ color:var(--ink); font-weight:600; }

/* ── Videos ── */
.videos{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:860px){ .videos{ grid-template-columns:1fr; } }
.video__len{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.08em; }
.video h3{ margin:6px 0 8px; }
.video p{ margin:0 0 18px; color:var(--muted); font-size:15.5px; }
.video__missing{
  background:var(--warn-bg); border:1px dashed var(--warn-br); border-radius:10px;
  padding:11px 14px; font-size:15px; color:var(--warn-tx);
}

/* ── Prompt cards ── */
.prompt{ margin-bottom:22px; }
.prompt__head{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.prompt__stage{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); background:var(--teal); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.prompt__stage--prework{ background:var(--gold); color:#463902; }
.prompt__stage--day2{ background:var(--clay); }
.prompt h3{ font-size:22px; }
.prompt__meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); margin:8px 0 0; }
.prompt__produces{
  margin:16px 0 0; padding:12px 16px; border-left:4px solid var(--teal);
  background:var(--paper); border-radius:0 10px 10px 0; font-size:16px;
}
.prompt__produces b{ font-weight:600; }
.howto{ margin:18px 0 0; }
.howto p{ margin:0 0 12px; font-size:16.5px; max-width:68ch; }
.howto p:last-child{ margin-bottom:0; }
.howto__steps{ margin:0 0 14px; padding-left:22px; font-size:16.5px; }
.howto__steps li{ margin-bottom:5px; }

.prompt__reveal{ margin-top:18px; }
.prompt__reveal summary{
  cursor:pointer; font-size:15px; color:var(--teal-dk); font-weight:600;
  list-style:none; display:inline-flex; align-items:center; gap:8px;
}
.prompt__reveal summary::-webkit-details-marker{ display:none; }
.prompt__reveal summary::before{ content:"▸"; font-size:13px; }
.prompt__reveal[open] summary::before{ content:"▾"; }
.prompt__text{
  font-family:var(--font-mono); font-size:13.5px; line-height:1.7; white-space:pre-wrap;
  background:var(--paper); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; margin:14px 0 0; max-height:420px; overflow:auto;
}
.prompt__actions{ display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap; }
.prompt__hint{ font-size:15.5px; color:var(--muted); max-width:46ch; }
.prompt__hint b{ color:var(--ink); }
.prompt__hint--warn{ color:var(--warn-tx); }

/* The prework prompt on the Prompts tab, folded away — by the time anyone is
   on this page it is behind them, and left open it reads as step one. */
.prompt-fold{
  margin-bottom:22px; background:var(--white);
  border:1px dashed var(--border); border-radius:var(--radius);
}
.prompt-fold > summary{
  cursor:pointer; list-style:none; padding:18px 24px;
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
}
.prompt-fold > summary::-webkit-details-marker{ display:none; }
.prompt-fold > summary::before{ content:"▸"; color:var(--teal-dk); font-size:13px; }
.prompt-fold[open] > summary::before{ content:"▾"; }
.prompt-fold__title{ font-family:var(--font-display); font-size:18px; font-weight:600; }
.prompt-fold__note{ color:var(--muted); font-size:15px; }
.prompt-fold .prompt{ margin:0 14px 14px; }

.techcheck{ margin-top:26px; border-left:5px solid var(--gold); }
.techcheck p{ margin:10px 0 0; max-width:66ch; }

.storymap-note{
  background:var(--white); border:1px solid var(--border); border-left:5px solid var(--teal);
  border-radius:12px; padding:16px 20px; margin-bottom:26px; font-size:16.5px;
}
.storymap-note--warn{ border-left-color:var(--gold); background:var(--warn-bg); border-color:var(--warn-br); }

/* ── Paste boxes ── */
.map-entry{ margin-bottom:22px; }
.map-entry__head{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; flex-wrap:wrap; }
.map-entry__step{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.map-entry__from{ color:var(--muted); font-size:15.5px; margin:6px 0 0; }
.paste-box{
  display:block; width:100%; margin-top:16px; min-height:150px; resize:vertical;
  font-family:var(--font-body); font-size:17px; line-height:1.65; color:var(--ink);
  padding:16px 18px; border:1.5px solid var(--border); border-radius:12px; background:var(--paper);
}
.paste-box--tall{ min-height:420px; font-size:18px; }
.paste-box:focus{ outline:none; border-color:var(--teal); background:var(--white); box-shadow:0 0 0 3px rgb(0 168 163 / .15); }
.save-state{ font-size:14px; color:var(--muted-2); font-family:var(--font-mono); letter-spacing:.06em; }
.save-state.is-saved{ color:var(--good); }
.writing-card__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; }

/* ── Footer ── */
.site-footer{ max-width:var(--shell); margin:0 auto; padding:0 28px 46px; }
.foot-row{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:18px; color:var(--muted); font-size:15px;
}

/* ── Toast ── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ink); color:var(--white); padding:14px 24px; border-radius:999px;
  font-size:16px; font-weight:600; box-shadow:0 12px 34px -12px rgb(0 0 0 / .5); z-index:50;
}

@media (max-width:640px){
  h1{ font-size:28px; }
  main{ padding:0 18px 70px; }
  .site-header, .site-footer{ padding-left:18px; padding-right:18px; }
  .card{ padding:22px 18px; }
  .signin-card{ padding:28px 22px 24px; }
  .signin-bridge{ width:100%; height:auto; }
  .panel-head{ gap:16px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }