/* Sub-site summaries inside the slider: a headline, one picture, one caption, one link. */
.sum-h { font-size: clamp(26px, 4.4vw, 34px); margin: 0; }
.sum-cap { min-height: 1.5em; margin: 8px 0 18px; font-size: 17px; color: var(--ink-2); }
.sum-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-weight: 600; }
.pic-note { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* grid */
.pic-grid canvas { display: block; width: 100%; cursor: pointer; border-radius: 6px; }
.grid-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.grid-big { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--gold-ink); font-variant-numeric: tabular-nums; min-width: 2.6em; }
.grid-unit { color: var(--muted); font-size: 14.5px; }
.grid-scrub { margin-top: 14px; }
.grid-scrub input { width: 100%; height: 40px; accent-color: var(--gold); margin: 0; }
.grid-ticks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.grid-ticks button { min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.grid-ticks button[aria-pressed="true"] { background: var(--gold-bg); color: var(--gold-ink); font-weight: 600; }
.grid-tap { margin-top: 10px; min-height: 0; }
.grid-tap .tap-k { margin: 0 0 8px; font-size: 15.5px; color: #c2553d; font-weight: 600; }
.grid-tap .tap-k.gold { color: var(--gold-ink); }
.tap-bar { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 5.5em; gap: 10px; align-items: center; margin-top: 6px; font-size: 14px; }
.tb-k { color: var(--muted); }
.tb-track { height: 14px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.tb-track i { display: block; width: 0; height: 100%; border-radius: 99px; background: #c2553d; transition: width .9s cubic-bezier(.3, .7, .2, 1); }
.tap-bar:last-child .tb-track i { background: var(--gold); }
.tb-v { font-family: var(--mono); font-weight: 600; text-align: right; }

/* toggle */
.tg-switch { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--tint); margin-bottom: 14px; }
.tg-switch button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.tg-switch button[aria-pressed="true"] { background: #1B3A7B; color: #fff; }
.tg-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tg-panel { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.tg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 22px; }
.tg-head b { font-size: 14.5px; line-height: 1.25; }
.tg-person { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); transition: opacity .5s, transform .5s; }
[data-state="1"] .tg-person { opacity: .12; transform: scale(.6); }
.tg-agents { display: flex; gap: 3px; margin-left: auto; }
.tg-agents i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity .4s; }
[data-state="1"] .tg-agents i { opacity: 1; }
[data-state="1"] .tg-agents i:nth-child(2) { transition-delay: .15s; }
[data-state="1"] .tg-agents i:nth-child(3) { transition-delay: .3s; }
.tg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin-top: 7px; }
.tg-k { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-sq { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.tg-sq i { aspect-ratio: 1; border-radius: 2px; background: #c2553d; opacity: .28; transition: background .35s, opacity .35s; }
.tg-sq i.on { background: var(--gold); opacity: 1; }

/* collapse */
.cl-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cl-n { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cl-u { color: var(--muted); font-size: 15px; }
.cl-bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; background: var(--tint); }
.cl-seg { flex: none; height: 100%; background: #7c8db5; box-shadow: inset -2px 0 0 var(--page); transition: width .6s cubic-bezier(.6, 0, .2, 1); }
.cl-seg:nth-child(odd) { background: #6a7ca6; }
.cl-seg.base { background: var(--gold); }
.cl-legend { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; font-size: 14px; color: var(--muted); }
.cl-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--gold); }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 14px; text-decoration: line-through; }
.cl-chip[aria-pressed="true"] { color: var(--ink); text-decoration: none; border-color: #7c8db5; }
.cl-all { min-height: 40px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* lanes */
.ln-ticks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.ln-ticks button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.ln-ticks button[aria-pressed="true"] { background: var(--gold-bg); color: var(--gold-ink); font-weight: 600; }
.ln-field { display: grid; gap: 0; }
.ln-lane { height: 26px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: #1B3A7B; color: #fff; font-size: 13px; font-weight: 600; }
.ln-lane.again { opacity: .35; }
.ln-gap { position: relative; min-height: 40px; margin: 2px 18px; padding: 0 12px; display: flex; align-items: center; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: transparent; font-size: 13px; text-align: left; transition: background .4s, border-color .4s, color .4s; }
.ln-gap:disabled { cursor: default; }
.ln-gap[data-st="1"] { border: 1px solid #c2553d; background: rgba(194, 85, 61, .14); color: #c2553d; }
.ln-gap[data-st="2"] { border: 1px solid var(--gold); background: var(--gold-bg); color: var(--gold-ink); }
.ln-gap[data-st="3"] { border: 1px solid var(--gold); background: var(--gold); color: #3d2e08; font-weight: 600; }
.ln-gap.sel { box-shadow: 0 0 0 2px var(--navy); }
.ln-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
.ln-legend i { width: 14px; height: 10px; border-radius: 3px; margin-left: 6px; }
.ln-legend i:first-child { margin-left: 0; }
.ln-legend .s1 { background: rgba(194, 85, 61, .3); border: 1px solid #c2553d; }
.ln-legend .s2 { background: var(--gold-bg); border: 1px solid var(--gold); }
.ln-legend .s3 { background: var(--gold); }
.ln-line { min-height: 1.5em; margin: 10px 0 0; font-size: 15.5px; color: var(--ink-2); }

/* pick */
.pk-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pk-opts .chip { min-height: 40px; }
.pk-opts .chip[aria-pressed="true"] { background: #1B3A7B; border-color: #1B3A7B; color: #fff; }
.pk-ans { animation: rise .25s ease-out; }
.pk-bar { margin-top: 12px; }
.pk-k { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.pk-track { display: flex; gap: 2px; min-height: 40px; }
.pk-seg { position: relative; display: flex; align-items: center; min-width: 4px; border-radius: 8px; overflow: visible; transition: width .9s cubic-bezier(.3, .7, .2, 1); }
.pk-seg.old { background: #7c8db5; }
.pk-seg.ours { background: var(--gold); }
.pk-seg.pending { background: repeating-linear-gradient(135deg, var(--gold) 0 6px, var(--gold-bg) 6px 12px); border: 1px solid var(--gold); }
.pk-tag { padding: 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: #0a1530; white-space: nowrap; }
.pk-seg.ours .pk-tag, .pk-seg.pending .pk-tag { position: absolute; left: calc(100% + 8px); color: var(--gold-ink); padding: 0; }
.pk-chain { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.pk-chain li { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.pk-chain li i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--line); }
.pk-chain li.past i { background: #7c8db5; }
.pk-chain li.stuck { border-color: #c2553d; color: var(--ink); font-weight: 600; }
.pk-chain li.stuck i { background: #c2553d; animation: stuck 1.2s ease-in-out infinite; }
@keyframes stuck { 50% { transform: translateX(4px); } }
.pk-fix { margin: 12px 0 0; padding: 12px 14px 12px 38px; position: relative; border-radius: 12px; background: var(--gold-bg); border: 1px solid var(--gold-line); font-size: 15.5px; }
.pk-fix::before { content: ''; position: absolute; left: 14px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.pk-bubble { display: flex; flex-direction: column; gap: 4px; max-width: 90%; padding: 12px 16px; border-radius: 18px; border-bottom-left-radius: 5px; background: var(--tint); font-size: 16px; }
.pk-who { font-family: var(--mono); font-size: 11.5px; color: var(--gold-ink); letter-spacing: .06em; }
.pk-link { margin-top: 14px; }

/* pick: more answers */
.pk-chain li.lit { border-color: var(--gold); background: var(--gold-bg); color: var(--ink); font-weight: 600; }
.pk-chain li.lit i { background: var(--gold); }
.pk-chain.flow li + li { position: relative; }
.pk-chain li i.who.agent { border-radius: 50%; background: var(--gold); }
.pk-chain li i.who.approve { border-radius: 50%; background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--gold); }
.pk-big { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.pk-n { font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.pk-u { color: var(--muted); font-size: 15px; }
.pk-dots { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.pk-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: 100%; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.pk-grp i { width: 10px; height: 10px; border-radius: 50%; }
.pk-grp i.person { width: 16px; height: 16px; background: var(--navy); margin-right: 4px; }
.pk-grp i.agent { background: var(--gold); animation: pop .35s ease-out both; }
.pk-gl { flex-basis: 100%; margin-top: 4px; font-size: 13px; color: var(--muted); }
@keyframes pop { from { opacity: 0; transform: scale(.2); } }
.pk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pk-tile { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); animation: rise .3s ease-out both; }
.pk-tile.main { grid-column: 1 / -1; background: #1B3A7B; border-color: #1B3A7B; color: #fff; }
.pk-tt { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.pk-tile.main .pk-tt { color: var(--gold-soft); }
.pk-tile b { font-size: 15.5px; }
.pk-heat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pk-hc { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--muted); }
.pk-hc i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--line); }
.pk-hc.h1 i { background: rgba(194, 85, 61, .3); }
.pk-hc.h2 i { background: rgba(194, 85, 61, .65); }
.pk-hc.h3 { border-color: #c2553d; color: var(--ink); font-weight: 600; }
.pk-hc.h3 i { background: #c2553d; }

/* curve */
.cv-svg { display: block; width: 100%; height: auto; }
.cv-base { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.cv-path { fill: none; stroke: #7c8db5; stroke-width: 4; stroke-linecap: round; }
.cv-dot { fill: var(--gold); stroke: var(--page); stroke-width: 3; transition: cx .5s cubic-bezier(.3, .7, .2, 1), cy .5s cubic-bezier(.3, .7, .2, 1); }
.cv-dot.low { fill: #c2553d; }
.cv-ticks { display: grid; gap: 4px; margin-top: 6px; }
.cv-ticks button { min-height: 44px; padding: 0 4px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 12.5px; line-height: 1.2; }
.cv-ticks button[aria-pressed="true"] { background: var(--gold-bg); color: var(--gold-ink); font-weight: 600; }
@media (max-width: 760px) { .pk-heat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-panel:only-child { grid-column: 1 / -1; }

/* threads */
.th-head, .th-track, .th-ticks { display: grid; gap: 3px; }
.th-head { margin-left: 9.5em; margin-bottom: 4px; }
.th-era { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-era .short { display: none; }
.th-field { display: grid; gap: 6px; }
.th-lane { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: center; transition: opacity .3s; }
.th-lane.dim { opacity: .35; }
.th-name { min-height: 40px; padding: 0 8px 0 0; border: 0; background: none; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.th-track { position: relative; align-items: center; min-height: 40px; }
.th-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.th-cell { position: relative; display: flex; justify-content: center; align-items: center; height: 40px; transition: opacity .4s; }
.th-cell.on::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 3px); height: 6px; border-radius: 3px; background: var(--navy); }
.th-cell.thru::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--navy); opacity: .45; }
.th-cell:last-child::before { content: ''; position: absolute; left: 0; right: 50%; top: calc(50% - 1px); height: 2px; background: var(--navy); opacity: .45; }
.th-cell.later { opacity: .08; }
.th-mark { position: relative; width: 40px; height: 40px; border: 0; background: none; padding: 0; }
.th-mark::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px var(--page); }
.th-end { position: relative; width: 40px; height: 40px; border: 0; background: none; padding: 0; }
.th-end { z-index: 1; }
.th-end::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid #7c8db5; background: var(--page); transition: background .4s, border-color .4s; }
.now .th-end.gold::after { background: var(--gold); border-color: var(--gold); }
.now .th-end:not(.gold)::after { background: #7c8db5; }
.th-agent { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity .4s, transform .6s cubic-bezier(.3,.7,.2,1); }
.th-agent:nth-child(1) { left: 2px; top: 6px; } .th-agent:nth-child(2) { right: 2px; top: 4px; } .th-agent:nth-child(3) { left: 4px; bottom: 4px; } .th-agent:nth-child(4) { right: 3px; bottom: 6px; }
.now .th-agent { opacity: 1; animation: orbit 3s ease-in-out infinite; }
.now .th-agent:nth-child(2) { animation-delay: .4s; } .now .th-agent:nth-child(3) { animation-delay: .8s; } .now .th-agent:nth-child(4) { animation-delay: 1.2s; }
@keyframes orbit { 50% { transform: translate(2px, -2px) scale(.8); } }
.th-ticks { margin: 0 0 6px 9.5em; }
.th-ticks button { min-height: 40px; padding: 0 2px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-ticks button[aria-pressed="true"] { background: var(--gold-bg); color: var(--gold-ink); font-weight: 600; }
.th-tip { min-height: 1.5em; margin: 10px 0 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 760px) {
  .th-head, .th-ticks { margin-left: 0; }
  .th-lane { grid-template-columns: minmax(0, 1fr); }
  .th-name { min-height: 40px; padding: 0; font-size: 13px; color: var(--ink-2); }
  .th-field { gap: 0; }
  .th-era .long { display: none; } .th-era .short { display: inline; }
}