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

/* the mail rack (5 · Twelve Points): one pigeonhole per Tradition, in the order the Traditions have
   today. Each holds the subject of the letters as Bill W. (1957) or Lois W. (1979) named it, the
   trouble behind it, and where its story is told: a link to another piece, or "Coming in" a later part
   of this piece until that part is built (then make it a link). The rack is the dark night color in
   both themes; the holes follow the page. Phones stack the holes; from 700px two across, from 900px
   three, from 1100px four. */
.rack{margin:24px 0 0;padding:10px;list-style:none;background:var(--night);border:1px solid var(--night-edge);border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:700px){.rack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.rack{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px;gap:14px;margin-top:32px}}
@media (min-width:1100px){.rack{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hole{background:var(--card);border-radius:6px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 12px 14px -12px rgba(18,10,4,.55)}
.hole-top{display:flex;align-items:center;gap:12px}
.hole .num{margin:0;font:700 calc(30px*(1 + (var(--ts,1) - 1)*0.5))/1 var(--mono);color:var(--accent);min-width:1.4em}
.hole .subj{margin:0;display:flex;flex-direction:column;gap:2px}
.hole .subj .lbl{padding:3px 10px;align-self:flex-start;border:1px solid var(--line-2);border-radius:3px;background:var(--mat);font:600 calc(13px*var(--ts,1))/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.hole .subj .by{padding-left:2px;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.hole .why{margin:0;flex-grow:1;font-size:calc(17px*var(--ts,1));line-height:1.5}
.hole .told{margin:0;padding-top:10px;border-top:1px dashed var(--line-2);font:600 calc(14px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.hole .told a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;text-decoration:none}
.hole .told a:hover{text-decoration:underline}
.hole.none .subj .gap{padding:3px 10px;align-self:flex-start;border:1px dashed var(--line-2);border-radius:3px;font:600 calc(13px*var(--ts,1))/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* the roll (2 · A mile long): the membership rules the books record, typed down a strip of paper with a
   torn bottom edge, one rule to a line, with where and when and the source under each. The paper follows
   the page in both themes. One column at every width, centered, at most 760px wide. */
.roll-wrap{margin-top:24px;padding-bottom:14px}
@media (min-width:900px){.roll-wrap{margin-top:32px}}
.roll{position:relative;list-style:none;margin:0 auto;max-width:760px;padding:6px 20px 22px;background:var(--mat);border:1px solid var(--line-2);border-bottom:0;box-shadow:4px 5px 0 var(--ph);counter-reset:rule}
.roll::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-12px;height:12px;background:linear-gradient(135deg,var(--mat) 6px,transparent 0) 0 0/12px 12px repeat-x,linear-gradient(225deg,var(--mat) 6px,transparent 0) 0 0/12px 12px repeat-x}
.rule{display:grid;grid-template-columns:2em minmax(0,1fr);column-gap:10px;row-gap:4px;padding:14px 0;border-bottom:1px dashed var(--line-2);counter-increment:rule}
.rule:last-child{border-bottom:0}
.rule::before{content:counter(rule) ".";grid-row:1 / span 3;font:700 calc(15px*var(--ts,1))/1.6 var(--mono);color:var(--accent)}
.rule p{grid-column:2;margin:0}
.rule .rule-text{font:400 calc(16px*var(--ts,1))/1.55 var(--mono);color:var(--ink)}
.rule .rule-where{font:600 calc(12px*var(--ts,1))/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media (min-width:700px){.roll{padding:10px 32px 26px}.rule .rule-text{font-size:calc(17px*var(--ts,1))}}

/* a long one-word title (1 · The Washingtonians): "Washingtonians" at the shared 44px is wider than a
   390px phone, so the title shrinks with the screen below about 460px and is the shared size above. */
.room-head h1.long{font-size:calc(min(clamp(44px,7vw,76px),9.6vw)*(1 + (var(--ts,1) - 1)*0))}

/* three floors or four (4 · Middleton Group #1): the center as each of Bill's two tellings builds it,
   top floor first, one building per telling, side by side from 700px. The floors that were only
   dreamed of sit above the roof with a dashed edge. Under each building, whose idea, the rules and the
   card, in the shared .hw-dl list. */
.floors{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:24px}
.tower{margin:0;display:flex;flex-direction:column;gap:16px}
/* side by side, each tower spans three shared rows (title, building, notes) so both buildings stand on
   the same street line */
@media (min-width:700px){.floors{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:0}
  .tower{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:16px}.bldg{align-self:end}}
@media (min-width:900px){.floors{margin-top:32px;column-gap:40px}}
.tower h3{margin:0;display:flex;flex-direction:column;gap:2px;font:400 calc(26px*(1 + (var(--ts,1) - 1)*0.7))/1.15 var(--display)}
.tower h3 .y{font:700 calc(15px*var(--ts,1))/1.3 var(--mono);letter-spacing:.04em;color:var(--accent)}
.bldg{display:flex;flex-direction:column}
.dream{margin:0 14px;padding:12px 14px 14px;border:2px dashed var(--line-2);border-bottom:0;font-style:italic;font-size:calc(17px*var(--ts,1));line-height:1.4;color:var(--ink-2)}
.storeys{list-style:none;margin:0;padding:0;background:var(--card);border:2px solid var(--ink);border-top-width:8px;border-bottom-width:6px}
.storey{display:grid;gap:4px;padding:14px 16px;border-top:1px solid var(--line-2)}
.storey:first-child{border-top:0}
.storey .fl{font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.storey .use{font-size:calc(18px*var(--ts,1));line-height:1.45}

/* Rule #62 (4 · Middleton Group #1): the card as a details element. The summary is its cover; opening
   it unfolds the inside below, with the one sentence. Paper colors follow the page in both themes. */
.card62{margin:36px auto 0;max-width:440px}
.card62 summary{display:block;list-style:none;cursor:pointer;border-radius:4px}
.card62 summary::-webkit-details-marker{display:none}
.card62 summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.c62-cover{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px 10px;background:var(--mat);border:1px solid var(--line-2);border-radius:4px;box-shadow:4px 5px 0 var(--ph);text-align:center}
.c62-cover .g{font:700 calc(13px*var(--ts,1))/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.c62-cover .r{font:700 calc(34px*(1 + (var(--ts,1) - 1)*0.3))/1.1 var(--mono);color:var(--ink)}
.c62-hint{display:inline-flex;align-items:center;min-height:44px;font:600 calc(14px*var(--ts,1)) var(--sans);color:var(--accent)}
.c62-hint .x,.card62[open] .c62-hint .o{display:none}
.card62[open] .c62-hint .x{display:inline}
.card62[open] .c62-cover{border-radius:4px 4px 0 0;box-shadow:none}
.card62:not([open]) summary:hover .c62-hint{text-decoration:underline}
.c62-in{padding:28px 22px 24px;background:var(--mat);border:1px solid var(--line-2);border-top:1px dashed var(--line-2);border-radius:0 0 4px 4px;box-shadow:4px 5px 0 var(--ph);text-align:center}
.c62-in .s{margin:0;font:italic 400 calc(clamp(23px,2.6vw,28px)*(1 + (var(--ts,1) - 1)*0.8))/1.35 var(--serif)}
.c62-in .cite{margin:14px 0 0}

/* long into short (6 · The short form): each Tradition's words in the long form (muted) and the short
   form (accent) as paired bars on one scale, the longest, Six's long form, at full width; then the
   totals in the shared meters, with the Twelve Steps for comparison. Colors are the shared meter
   tokens. Bars leave room at the right for their counts. */
.cut-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;font:600 calc(14px*var(--ts,1))/1.3 var(--sans)}
.cut-key span{display:inline-flex;align-items:center;gap:8px}
.cut-key span::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--m-base)}
.cut-key .k-short::before{background:var(--m-lead)}
.cut{list-style:none;margin:16px 0 0;padding:0;max-width:880px;display:grid;gap:14px}
.cut-row{display:grid;grid-template-columns:2em minmax(0,1fr);column-gap:10px;align-items:center}
.cut-n{font:700 calc(18px*var(--ts,1))/1 var(--mono)}
.cut-bars{display:grid;gap:4px}
.cut-bar{display:flex;align-items:center;gap:8px;font:600 calc(13px*var(--ts,1))/1 var(--sans);color:var(--ink-2)}
.cut-bar::before{content:"";flex:0 0 auto;width:calc(var(--w) * .86);min-width:3px;height:12px;border-radius:0 3px 3px 0;background:var(--m-base)}
.cut-bar.short{color:var(--ink)}
.cut-bar.short::before{background:var(--m-lead)}
.cut-note{grid-column:2;margin:6px 0 0;font-size:calc(16px*var(--ts,1));line-height:1.5}
.cut-total{margin-top:40px}
@media (min-width:900px){.cut-bar::before{height:14px}.cut-total{margin-top:48px}}