/* design.html: how the questions are made. Builds on styles.css tokens. */
.dz p, .dz li { line-height: 1.55; }
.dz .block-head p { max-width: 76ch; }
.dz code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--tint); padding: 1px 6px; border-radius: 4px; color: var(--muted); }
.dz h5 { margin: 0 0 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sub-h { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 34px 0 12px; }

/* level colors */
.lvl-teal, .pyr-teal   { --lv: var(--teal); }
.lvl-blue, .pyr-blue   { --lv: var(--blue); }
.lvl-violet, .pyr-violet { --lv: var(--violet); }
.lvl-coral, .pyr-coral { --lv: var(--coral); }

/* ---- pipeline flow ---- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: none; }
.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 12px; display: flex; flex-direction: column; min-width: 0; }
.flow li + li::before { content: "\2192"; position: absolute; left: -11px; top: 50%; transform: translate(-50%, -50%); color: var(--muted); font-size: 15px; background: var(--paper); line-height: 1; padding: 2px 0; }
.flow .step { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.flow h4 { margin: 2px 0 6px; font-size: 15px; }
.flow p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); flex: 1; }
.flow em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.flow li.gem { border-color: var(--blue); background: var(--blue-bg); }
.flow li.gem em { color: var(--blue); border-top-color: var(--blue); }
.flow-note { font-size: 13.5px; color: var(--muted); max-width: 80ch; margin: 12px 0 0; }

/* ---- pyramid ---- */
.pyr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 30px; }
.pyr-row { width: var(--w); min-width: 230px; display: flex; gap: 10px; align-items: baseline; justify-content: center; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: var(--on-accent); background: var(--lv); font-size: 14px; }
.pyr-row b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; opacity: .85; }
.pyr-row:hover { filter: brightness(1.08); }

/* ---- level block ---- */
.lvl { border: 1px solid var(--line); border-top: 4px solid var(--lv); border-radius: 10px; background: var(--surface); padding: 20px 20px 22px; margin: 0 0 22px; scroll-margin-top: 72px; }
.lvl-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.lvl-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 15px; color: var(--on-accent); background: var(--lv); border-radius: 6px; padding: 6px 10px; flex: none; }
.lvl-head h3 { margin: 0 0 3px; font-size: 20px; }
.lvl-head p { margin: 0; max-width: 72ch; color: var(--ink); }
.lvl-panels { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.5fr); margin-bottom: 6px; }
.panel { background: var(--tint); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12.5px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 9px; line-height: 1.5; }
.quote { margin: 0; font-size: 14px; font-style: italic; border-left: 3px solid var(--lv); padding-left: 10px; }
.rules { margin: 0; padding-left: 17px; font-size: 13.5px; }
.rules li { margin: 0 0 4px; }
.grp { margin: 20px 0 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.grp span { color: var(--lv); font-weight: 700; }
.grp::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- sample cards ---- */
.samp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.samp { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.samp header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.samp-name { font-weight: 600; font-size: 14px; }
.samp-q { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; }
.samp-opts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.samp-opts li { font-size: 13.5px; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line); display: flex; gap: 8px; overflow-wrap: anywhere; line-height: 1.4; }
.samp-opts li b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); flex: none; }
.samp-opts li.ok { background: var(--good-bg); border-color: var(--good); font-weight: 600; }
.samp-opts li.ok b { color: var(--good); }
.samp-how { margin: 0 0 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; flex: 1; align-content: start; }
.samp-how dt { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 1px; }
.samp-how dd { margin: 0; line-height: 1.45; }
.samp footer { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }

/* ---- prompt parts ---- */
.prompt-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.pp { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.pp > span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.pp h4 { margin: 2px 0 6px; font-size: 14.5px; }
.pp p { margin: 0 0 10px; font-size: 13px; flex: 1; }
.pp em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.pp-var { border-color: var(--coral); background: var(--note-bg); }
.pp-var em { color: var(--coral); border-top-color: var(--coral); }
.io { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.io figure { margin: 0; min-width: 0; }
.io figcaption { font-size: 11px; letter-spacing: .09em; color: var(--muted); margin-bottom: 6px; }
.io pre, .fmt-card pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.io-arrow { font-size: 20px; color: var(--muted); }
.tpl { margin-top: 28px; }
.tpl h3 { margin: 0 0 4px; font-size: 17px; }
.tpl p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 620px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tbl th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--tint); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: nowrap; }
.tbl td:nth-child(2) { white-space: nowrap; font-weight: 600; }

/* ---- format tree ---- */
.tree { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 18px; }
.tree-root { text-align: center; border: 1px solid var(--ink); border-radius: 8px; padding: 10px 14px; max-width: 340px; margin: 0 auto 26px; position: relative; background: var(--paper); }
.tree-root b { display: block; font-size: 15px; }
.tree-root span { font-size: 12.5px; color: var(--muted); }
.tree-root::after { content: ""; position: absolute; left: 50%; bottom: -27px; height: 26px; border-left: 1px solid var(--line); }
.tree-arms { align-items: start; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2.4fr); border-top: 1px solid var(--line); padding-top: 14px; }
.arm { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--paper); min-width: 0; display: flex; flex-direction: column; }
.arm h4, .fmt-card h4 { margin: 4px 0 4px; font-size: 14.5px; }
.arm p { margin: 0 0 8px; font-size: 13px; flex: 1; }
.arm em, .split em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fnum { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--ink); border-radius: 4px; padding: 1px 6px; align-self: flex-start; }
.arm-q { background: var(--tint); }
.arm-q > .fnum { background: var(--coral); }
.arm-q > h4 { margin-bottom: 10px; }
.split { display: grid; gap: 10px; grid-template-columns: 1.15fr 1fr; }
.split > div { border-radius: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.split > div > b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.split .yes { border-color: var(--good); }
.split .yes > b { color: var(--good); }
.split .no { border-color: var(--coral); }
.split .no > b { color: var(--coral); }
.split p { margin: 0 0 8px; font-size: 13px; }
.two { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 14px 16px; border-top-width: 3px; min-width: 0; }
.col h4 { margin: 0 0 8px; font-size: 15px; }
.col ul { margin: 0; padding-left: 18px; font-size: 14px; }
.col li { margin: 0 0 5px; }
.yes-col { border-top-color: var(--good); }
.no-col { border-top-color: var(--coral); }
.fmt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.fmt-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.fmt-card pre { background: var(--tint); border: 0; }
.fmt-card .gold { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--good); }
.fmt-card .gold::before { content: "Right answer: "; font-weight: 400; color: var(--muted); }

@media (max-width: 980px) {
  .flow, .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-3 { grid-template-columns: minmax(0, 1fr); }
  .flow li + li::before { display: none; }
  .lvl-panels { grid-template-columns: minmax(0, 1fr); }
  .tree-arms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arm-q { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .flow, .prompt-grid, .tree-arms, .split, .two { grid-template-columns: minmax(0, 1fr); }
  .io { grid-template-columns: minmax(0, 1fr); }
  .io-arrow { transform: rotate(90deg); justify-self: center; }
  .lvl { padding: 16px 14px 18px; }
  .pyr-row { width: 100%; }
}

.dz a:not(.brand):not(.pyr-row):not(.mono) { color: inherit; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
.dz .contents a { text-decoration: none; }
.samp-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- writer / answerer independence ---- */
.roles { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.role { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.role span { display: block; font-size: 11px; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.role b { font-size: 16px; }
.role-hot { border-color: var(--coral); background: var(--note-bg); }
.role-hot span { color: var(--coral); }
.tbl-plain td:first-child { font-family: inherit; font-size: 14px; white-space: normal; font-weight: 600; }
.tbl-plain td:nth-child(2) { white-space: normal; font-weight: 400; }
@media (max-width: 980px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .roles { grid-template-columns: minmax(0, 1fr); } }

/* ---- results ---- */
.take { font-size: 17px; line-height: 1.45; max-width: 76ch; margin: 0 0 12px; }
.tbl-num td:not(:first-child), .tbl-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-num td:first-child { font-family: inherit; font-size: 14px; white-space: normal; font-weight: 600; }
.tbl-num td:nth-child(2) { font-weight: 400; }
.tbl-num tr.chance td { color: var(--muted); font-weight: 400; background: var(--tint); }
.dz .tbl-wrap + .tbl-wrap { margin-top: 10px; }
.notes { margin: 12px 0 0; padding-left: 20px; max-width: 86ch; font-size: 14.5px; }
.notes li { margin: 0 0 6px; }

/* ---- result charts (dumbbells) ---- */
.dc { min-width: 0; overflow: hidden; margin: 6px 0 12px; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.dc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dc-sw { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dc-sw-hollow { border: 2px solid var(--muted); background: var(--surface); box-sizing: border-box; }
.dc-sw-solid { background: var(--muted); }
.dc-sw-chance { width: 0; height: 13px; border-left: 2px dashed var(--muted); display: inline-block; }
.dc-plot { min-width: 0; width: 100%; }
.fig.dc .dc-plot svg { display: block; width: 100%; max-width: 100%; min-width: 0; }  /* overrides the site-wide .fig svg min-width */
.dc-grid { stroke: var(--line); stroke-width: 1; }
.dc-tick { fill: var(--muted); font-size: 11px; }
.dc-label { fill: var(--ink); font-size: 13.5px; font-weight: 600; }
.dc-chance { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }
.dc-link { stroke-width: 2; opacity: .55; }
.dc-from { fill: var(--surface); stroke-width: 2; }
.dc-to { stroke: var(--surface); stroke-width: 2; }
.dc-val { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.dc-hit { fill: transparent; }
.dc-lane { outline: none; cursor: default; }
.dc-lane:hover .dc-hit, .dc-lane:focus-visible .dc-hit { fill: var(--tint); }
.dc-tip { position: absolute; z-index: 30; pointer-events: none; white-space: pre-line; font-size: 12.5px; line-height: 1.45; background: var(--ink); color: var(--paper); padding: 8px 10px; border-radius: 6px; max-width: 260px; }
.dc-data { margin: 0 0 12px; }
.dc-data summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.dc-data[open] summary { margin-bottom: 8px; }