/* A Family Disease · styles only its pages use, loaded after /shared/deep-dive.css. The pilot (4 · A
   merry-go-round named denial) needs nothing of its own: its feature is the shared stay cards, and its
   hero's steam uses the shared rise wisps. 2 · A fellowship of its own uses the shared .cards.five.
   5 · Adult children and 6 · A place to call our own reuse 3's .wsc rows, with a bar in place of the
   dots; 7 · Online has its own window of dated lines and the one movement in its hero (af-led). */

/* the dark last stay card's who-label in gold, as its year line is, so it reads on the dark ground
   (4 · A merry-go-round named denial and 2 · A fellowship of its own) */
.stay.last .who{color:var(--gold)}

/* Step One, five ways (1 · Before the name): one card per wording, in the order written, the year and
   who wrote it on top, the step in italics, a note under it. Words that differ from AA's are .chg:
   highlighted on screen, underlined on paper. AA's own wording (.aa) has an accent edge; the last
   card is the dark one, as with the stay cards. From 900px the year and writer sit to the left. */
.wordings{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.wd{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.wd.aa{border-left:4px solid var(--accent)}
.wd-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wd-y{margin:0;font:700 calc(22px*(1 + (var(--ts,1) - 1)*0.9))/1.1 var(--mono);white-space:nowrap}
.wd-who{margin:0;font:600 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-align:right}
.wd-step{margin:0;font:italic 400 calc(20px*var(--ts,1))/1.45 var(--serif)}
.wd-note{margin:0;font:400 calc(15px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.chg{background:var(--hl);border-radius:3px;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wd.last{background:var(--night);color:var(--night-ink);border-color:var(--night-edge);border-left-color:var(--gold)}
.wd.last .wd-who{color:var(--gold)}
.wd.last .wd-note{color:var(--night-2)}
@media (min-width:900px){
  .wordings{gap:12px;margin-top:32px}
  .wd{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:28px;row-gap:6px;padding:20px 24px}
  .wd-top{grid-row:1 / span 2;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px}
  .wd-who{text-align:left}
  .wd-step{font-size:calc(22px*(1 + (var(--ts,1) - 1)*0.9))}
}
@media print{
  .chg{background:none;padding:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
  .wd{break-inside:avoid}
}

/* Five Conferences (3 · The first Conference): one row per year, the delegates as dots (one dot each,
   aria-hidden: the count is in .wsc-n), and what that year's Conference did. On a phone the year and
   count sit on one line, the dots under them, then the text; from 900px three columns. */
.wsc{list-style:none;margin:24px 0 0;padding:0;border-top:2px solid var(--ink)}
.wsc-row{display:grid;gap:10px;padding:18px 0 20px;border-bottom:1px solid var(--line-2)}
.wsc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wsc-y{margin:0;font:700 calc(26px*(1 + (var(--ts,1) - 1)*0.7))/1 var(--mono)}
.wsc-n{margin:0;font:600 calc(13px*var(--ts,1))/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.wsc-dots{display:flex;flex-wrap:wrap;gap:5px;max-width:330px}
.wsc-dots i{display:block;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.wsc-body h3{margin:0 0 4px;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1.2 var(--display)}
.wsc-body .what{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.55}
@media (min-width:900px){
  .wsc{margin-top:32px}
  .wsc-row{grid-template-columns:150px 260px minmax(0,1fr);column-gap:32px;align-items:start;padding:24px 0}
  .wsc-head{flex-direction:column;align-items:flex-start;gap:8px}
  .wsc-dots{padding-top:6px}
}
@media (min-width:1100px){.wsc-row{grid-template-columns:170px 300px minmax(0,1fr)}}
@media print{
  .wsc-dots i{background:none;border:4px solid currentColor;width:0;height:0}   /* borders print; backgrounds don't */
  .wsc-row{break-inside:avoid}
}

/* From one group to a thousand (5 · Adult children): 3's rows with one bar each in place of the dots,
   all on one scale (--v, the count as a share of 1,200). A second, paler fill (.more) behind the first
   is the same year's later count. A row with no count has an empty bar (.none). */
.wsc-bar{position:relative;display:block;height:16px;max-width:330px;border-radius:3px;background:var(--track)}
.wsc-bar i{position:absolute;left:0;top:0;bottom:0;z-index:1;width:var(--v);min-width:3px;border-radius:3px;background:var(--accent)}
.wsc-bar i.more{z-index:0;opacity:.42}
.wsc-bar.none{height:0;background:none}
@media (min-width:900px){.wsc-bar{margin-top:6px}}
@media print{.wsc-bar,.wsc-bar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Six votes on a building (6 · A place to call our own): 3's rows with one bar per vote, split in
   proportion to the count (--v): yes in the accent (.y), no in gray (.n), abstentions and void
   ballots pale (.a). The counts are in the row's words; a vote with no count has no bar (.none). */
.vbar{display:flex;height:16px;max-width:330px;border-radius:3px;overflow:hidden;background:var(--track)}
.vbar i{display:block;flex:var(--v) 0 0;min-width:2px}
.vbar .y{background:var(--accent)}
.vbar .n{background:var(--m-base)}
.vbar .a{background:var(--line-2)}
.vbar.none{height:0;background:none}
@media (min-width:900px){.vbar{margin-top:6px}}
@media print{.vbar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Logging on (7 · Online): a browser window of the late 1990s holding a list of dated lines. The bar
   along the top (dots and the first website's address) is decoration, aria-hidden; the last line
   (.now) is the dark one, as the last stay card is. From 900px the window keeps to a reading width. */
.wlog{margin-top:24px;max-width:860px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.wl-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line-2);background:var(--band)}
.wl-dots{display:flex;gap:5px;flex-shrink:0}
.wl-dots i{display:block;width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.wl-addr{flex:1;min-width:0;padding:3px 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--paper);font:400 calc(12px*var(--ts,1))/1.4 var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-list{list-style:none;margin:0;padding:4px 18px 0}
.wl-list li{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:4px 14px;padding:13px 0;border-top:1px dashed var(--line-2)}
.wl-list li:first-child{border-top:0}
.wl-d{margin:0;font:700 calc(14px*var(--ts,1))/1.55 var(--mono);color:var(--accent);white-space:nowrap}
.wl-t{margin:0;font:600 calc(17px*var(--ts,1))/1.4 var(--sans)}
.wl-x{margin:2px 0 0;font-size:calc(16px*var(--ts,1));line-height:1.5}
.wl-list li.now{margin:0 -18px;padding:16px 18px 18px;border-top:0;background:var(--night);color:var(--night-ink)}
.wl-list li.now .wl-d{color:var(--gold)}
@media (min-width:900px){.wlog{margin-top:32px}.wl-list{padding:6px 24px 0}.wl-list li{grid-template-columns:6.4em minmax(0,1fr);gap:4px 20px}.wl-list li.now{margin:0 -24px;padding:18px 24px 20px}}
@media print{
  .wlog{border-color:#999}
  .wl-bar{background:none}
  .wl-list li{break-inside:avoid}
  .wl-list li.now{background:none;color:inherit;border-top:1px solid #999}
}

/* the modem's lights (hero of 7 · Online, drawn by docs/drawing/al-anon-online.py): its two front
   lights (af-led, the second af-led2) dim to two-fifths and come back, out of step, once every 1.8
   and 2.4 seconds, as data comes in. Without this stylesheet they stay lit. */
@keyframes af-blink{0%,100%{opacity:1}50%{opacity:.4}}
.hero .af-led{animation:af-blink 1.8s ease-in-out infinite}
.hero .af-led2{animation:af-blink 2.4s ease-in-out infinite;animation-delay:-.9s}
@media (prefers-reduced-motion:reduce){.hero .af-led,.hero .af-led2{animation:none}}

/* rain on the kitchen window (hero of the entrance, drawn by docs/drawing/al-anon-entrance.py): one
   strip of streaks 120 units tall is repeated down the glass, and the strips slide down by that much
   every 2.8 seconds, so the loop never jumps. Without this stylesheet the rain stands still. */
@keyframes afe-rain{from{transform:translateY(0)}to{transform:translateY(120px)}}
.hero .afe-rain{animation:afe-rain 2.8s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .afe-rain{animation:none}}

/* The readable story (piloted on 1 · Before the name, November 2026, then rolled out to every part;
   docs/readability-rewrite.md has the pattern): short paragraphs, with a beat every few paragraphs so
   the eye has somewhere to land. Three kinds of beat, all inside .panel:
   .more  a fold-out under the paragraph it belongs to, holding side detail (an aside, a cross-link,
          a figure) so the main line stays lean. Closed by default; deep-dive.js opens it for print.
   .pull  a quotation set large where it falls. It appears once, so it's read, searched and marked
          like any other line of the story (unlike Go deeper's .typeset, which repeats a line).
   .spot  a small drawing in a mat, seen from straight above (no perspective camera), with its own
          caption. Its scene script is in docs/drawing/. Dimmed in the dark theme as heroes are. */
.panel .more{margin:-6px 0 0;padding-left:14px;border-left:2px solid var(--line-2)}
.more summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:600 calc(14px*var(--ts,1))/1.3 var(--sans);color:var(--accent)}
.more summary::-webkit-details-marker{display:none}
.more summary:hover .nt{text-decoration:underline;text-underline-offset:3px}
.more .nk{font-size:calc(11px*var(--ts,1));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.more .chev{flex-shrink:0;transition:transform .2s ease}
.more[open] .chev{transform:rotate(180deg)}
.more .body{display:flex;flex-direction:column;gap:10px;padding:0 0 8px}
.panel .more p{font:400 calc(16px*var(--ts,1))/1.6 var(--sans);color:var(--ink-2)}
.pull{margin:8px 0;padding:20px 0 16px;border-top:3px solid var(--gold);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.panel .pull .pq{margin:0;font:400 calc(clamp(25px,2.6vw,30px)*(1 + (var(--ts,1) - 1)*0.8))/1.25 var(--display);color:var(--accent)}
.pull .cite{font:400 calc(13px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.spot{margin:6px 0;display:flex;flex-direction:column;gap:8px}
.spot .mat{padding:8px}
.spot svg{display:block;width:100%;height:auto;filter:brightness(var(--art-dim))}
.spot figcaption{font:400 calc(13px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
@media print{.more summary .chev{display:none}.pull,.spot{break-inside:avoid}}