/* Suggestions Only · styles only its pages use, loaded after /shared/deep-dive.css */

/* counting the words (4 · Wit's End): how often each book uses a word, per 10,000 words, as paired
   bars on one scale: the Big Book's Steps chapters of 1939 (muted) above the Twelve and Twelve's
   Step essays of 1953 (accent). The word sits over its bars, with the raw counts under it. Colors
   are the shared meter tokens. Bars leave room at the right for their numbers. One column at every
   width, at most 880px. */
.wc-h{margin:44px 0 0;font:400 calc(clamp(24px,2.6vw,30px)*(1 + (var(--ts,1) - 1)*0.8))/1.2 var(--display)}
.wc-intro{margin:10px 0 0;max-width:62ch;font-size:calc(18px*var(--ts,1));line-height:1.55}
.wc-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;font:600 calc(14px*var(--ts,1))/1.3 var(--sans)}
.wc-key span{display:inline-flex;align-items:center;gap:8px}
.wc-key span::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--m-base)}
.wc-key .k-tt::before{background:var(--m-lead)}
.wc{list-style:none;margin:16px 0 0;padding:0;max-width:880px;display:grid;gap:20px}
.wc-row{display:grid;gap:6px}
.wc-word{margin:0;font:600 calc(17px*var(--ts,1))/1.3 var(--sans)}
.wc-word .sub{display:block;margin-top:2px;font-weight:400;font-size:calc(14px*var(--ts,1));color:var(--ink-2)}
.wc-bars{display:grid;gap:4px}
.wc-bar{display:flex;align-items:center;gap:8px;font:600 calc(13px*var(--ts,1))/1 var(--sans);color:var(--ink-2)}
.wc-bar::before{content:"";flex:0 0 auto;width:calc(var(--w) * .88);min-width:3px;height:12px;border-radius:0 3px 3px 0;background:var(--m-base)}
.wc-bar.tt{color:var(--ink)}
.wc-bar.tt::before{background:var(--m-lead)}
.wc-note{margin:22px 0 0;max-width:62ch;font-size:calc(16px*var(--ts,1));line-height:1.5;color:var(--ink-2)}
@media (min-width:700px){
  .wc-row{grid-template-columns:minmax(0,13em) minmax(0,1fr);column-gap:20px;align-items:center}
}
@media (min-width:900px){.wc-bar::before{height:14px}.wc-h{margin-top:56px}}
/* on paper: gray and black bars, printed even when the browser leaves out backgrounds; the numbers
   beside them carry the meaning either way */
@media print{
  .wc-bar::before,.wc-key span::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wc-bar::before{background:#999 !important}
  .wc-bar.tt::before{background:#222 !important}
  .wc-key span::before{background:#999 !important}
  .wc-key .k-tt::before{background:#222 !important}
  /* the two length meters above the words, also on this page: print their bars too */
  .meter-bar,.meter-fill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .meter-bar{background:#DDD !important}
  .meter.base .meter-fill{background:#999 !important}
  .meter.lead .meter-fill{background:#222 !important}
}

/* Step One, fellowship by fellowship (5 · Problems other than alcohol): one row per fellowship, oldest
   first after AA and Al-Anon, quoting only the few words after "powerless over" in Step One and after
   "carry this message to" in Step Twelve, with the changed words in bold. On a phone each row stacks
   with its own small labels; from 900px the rows line up in four columns under one header and the
   labels are left to screen readers. */
.s1{margin-top:28px;border-top:2px solid var(--ink)}
.s1-head{display:none}
.s1-list{list-style:none;margin:0;padding:0}
.s1-row{display:grid;gap:10px;padding:18px 0 20px;border-bottom:1px solid var(--line-2)}
.s1-name{margin:0;font:400 calc(22px*(1 + (var(--ts,1) - 1)*0.9))/1.2 var(--display)}
.s1-when{display:block;margin-top:4px;font:600 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.s1-cell{margin:0;display:grid;gap:3px}
.s1-k{font:700 calc(11px*var(--ts,1))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.s1-q{font-style:italic;font-size:calc(19px*var(--ts,1));line-height:1.45}
.s1-q b{font-style:normal;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.s1-q .yr{font:600 calc(13px*var(--ts,1))/1 var(--sans);font-style:normal;color:var(--ink-2);margin-left:6px}
.s1-note{margin:0;font-size:calc(16px*var(--ts,1));line-height:1.5;color:var(--ink-2)}
.s1-row.base .s1-name{color:var(--ink-2)}
@media (min-width:900px){
  .s1-head,.s1-row{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,3fr) minmax(0,4fr);column-gap:28px;align-items:baseline}
  .s1-head{display:grid;padding:12px 0;border-bottom:1px solid var(--line-2);font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  .s1-head span:nth-child(2),.s1-head span:nth-child(3){color:var(--accent)}
  .s1-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .s1-row{padding:22px 0}
}

/* AA's own words about God, by year (7 · Good for God): a vertical line of dated entries, each a
   short quotation with its source and a note. A diamond marks the entries where AA says it isn't a
   religious organization. Year above the quote on a phone; from 700px the year sits in its own
   column left of the line. */
.gw-key{margin:18px 0 0;display:flex;align-items:center;gap:10px;font:600 calc(14px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.gw-key::before{content:"";flex:0 0 auto;width:11px;height:11px;transform:rotate(45deg);background:var(--accent)}
.gw{list-style:none;margin:24px 0 0;padding:0;max-width:880px;position:relative}
.gw::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line-2)}
.gw-item{position:relative;padding:0 0 28px 30px}
.gw-item:last-child{padding-bottom:0}
.gw-item::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--band);border:2px solid var(--ink-2)}
.gw-item.same::before{border-radius:1px;transform:rotate(45deg);background:var(--accent);border-color:var(--accent)}
.gw-y{margin:0;font:700 calc(15px*var(--ts,1))/1.3 var(--mono);letter-spacing:.04em;color:var(--accent)}
.gw-q{margin:6px 0 0;font-style:italic;font-size:calc(20px*var(--ts,1));line-height:1.45}
.gw-src{margin:6px 0 0;font:400 calc(13px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
.gw-n{margin:6px 0 0;font-size:calc(16px*var(--ts,1));line-height:1.5}
@media (min-width:700px){
  .gw::before{left:calc(5.5em + 25px)}
  .gw-item{display:grid;grid-template-columns:5.5em minmax(0,1fr);column-gap:50px;padding-left:0}
  .gw-item::before{left:calc(5.5em + 20px)}
  .gw-y{text-align:right}
}
@media print{
  .gw-key::before,.gw-item::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* The words, and the study (Legacy): a timeline in two lanes, AA's decisions about the words of the
   Steps and members' ways of studying them, one row per year. On a phone the rows stack, each card
   with its lane named above its title; from 900px the year runs down a center line, AA's decisions
   to its left and members' studies to its right, and the lane names move up into one key. */
.tw-key{display:none}
.tw{list-style:none;margin:28px 0 0;padding:0;position:relative}
.tw-row{display:grid;gap:12px;padding:0 0 26px}
.tw-row:last-child{padding-bottom:0}
.tw-y{margin:0;font:700 calc(15px*var(--ts,1))/1.3 var(--mono);letter-spacing:.04em;color:var(--ink)}
.tw-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;padding:16px 18px 14px}
.tw-card.b{border-left-color:var(--gold)}
.tw-lane{margin:0;font:700 calc(11px*var(--ts,1))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tw-card.b .tw-lane{color:var(--ink-2)}
.tw-card h3{margin:6px 0 0;font:400 calc(21px*var(--ts,1))/1.2 var(--display)}
.tw-card p{margin:8px 0 0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.tw-card .tw-lane{margin:0}
.tw-card .tw-src{margin-top:10px;font:400 calc(13px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
@media (min-width:900px){
  .tw-key{display:grid;grid-template-columns:minmax(0,1fr) 6em minmax(0,1fr);margin:26px 0 0;font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
  .tw-k.a{grid-column:1;text-align:right;color:var(--accent)}
  .tw-k.b{grid-column:3;color:var(--ink-2)}
  .tw{margin-top:14px}
  .tw::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line-2)}
  .tw-row{grid-template-columns:minmax(0,1fr) 6em minmax(0,1fr);column-gap:0;padding-bottom:22px;align-items:start}
  .tw-y{grid-column:2;grid-row:1;position:relative;z-index:1;justify-self:center;margin-top:14px;padding:3px 8px;background:var(--band);border:2px solid var(--line-2);border-radius:999px;font-size:calc(14px*var(--ts,1))}
  .tw-card.a{grid-column:1;grid-row:1;border-left-width:1px;border-right:4px solid var(--accent)}
  .tw-card.b{grid-column:3;grid-row:1}
  .tw-lane{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Ways to cut twelve (2 · Four nights): one row per beginners' plan, oldest first, with its place,
   year and how it met, then its evenings in order as small cards; a coloured rule on each card marks
   its place in the sequence. On a phone the cards sit two to a line (Passaic's twelve posters six to
   a line); from 700px each plan's cards run in one line, Rochester's widths following how many Steps
   each talk took. */
.cut{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--ink)}
.cut-row{display:grid;gap:12px;padding:20px 0 22px;border-bottom:1px solid var(--line-2)}
.cut-y{margin:0;font:700 calc(14px*var(--ts,1))/1.3 var(--mono);letter-spacing:.04em;color:var(--accent)}
.cut-who h3{margin:2px 0 0;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1.15 var(--display)}
.cut-when{margin:4px 0 0;font:600 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.cut-nights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cut-nights li{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:4px;padding:8px 10px 9px;font-size:calc(16px*var(--ts,1));line-height:1.35}
.cut-nights li:nth-child(4n+2){border-top-color:var(--gold)}
.cut-nights li:nth-child(4n+3){border-top-color:var(--ink-2)}
.cut-nights li:nth-child(4n+4){border-top-color:var(--ink)}
.cut-k{display:block;margin-bottom:2px;font:700 calc(12px*var(--ts,1))/1.2 var(--mono);color:var(--ink-2)}
.cut-nights.twelve{grid-template-columns:repeat(6,minmax(0,1fr))}
.cut-nights.twelve li{padding:10px 0;text-align:center;font:700 calc(15px*var(--ts,1))/1 var(--mono)}
.cut-src{margin:0;font:400 calc(13px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
@media (min-width:700px){
  .cut-row{grid-template-columns:11em minmax(0,1fr);column-gap:28px;align-items:start}
  .cut-src{grid-column:2}
  .cut-nights{display:flex}
  .cut-nights li{flex:var(--w,1) 1 0;min-width:0}
}
@media print{
  .cut-nights li{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}