/* Ask the Atlas: the interactive questionnaire. Uses the site tokens from /site/styles.css. */
.atlas-app { padding: clamp(1.5rem, 4vw, 3rem) 0 3rem; }
.atlas-note { color: var(--quiet); font-size: 14px; margin: 0 0 1.5rem; }
.atlas-grid { display: grid; grid-template-columns: minmax(18rem, 25rem) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 960px) { .atlas-grid { grid-template-columns: 1fr; } }

.atlas-form, .atlas-out { background: var(--cream); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); padding: clamp(1rem, 2.5vw, 1.6rem); }
.atlas-form { position: sticky; top: 1rem; }
@media (max-width: 960px) { .atlas-form { position: static; } }
.atlas-h2 { font: 600 1.2rem/1.25 var(--font-display); margin: 1.4rem 0 .7rem; display: flex; align-items: center; gap: .55rem; }
.atlas-h2:first-child { margin-top: 0; }
.step-no { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 600 .85rem/1 var(--font-body); }
.atlas-label { display: block; font-weight: 600; font-size: 14px; margin: .6rem 0 .3rem; }
.atlas-hint { color: var(--quiet); font-size: 13px; margin: .4rem 0 0; }
.atlas-form select, .atlas-form textarea { width: 100%; font: inherit; font-size: 15px; padding: .55rem .65rem; border: 1px solid var(--rim); border-radius: 3px; background: #fff; color: var(--ink); }
.atlas-form textarea { resize: vertical; min-height: 4.5rem; }
fieldset.stack, fieldset.concerns { border: 0; padding: 0; margin: 0; }
.group-name { font: 600 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: .7rem 0 .25rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .35rem .4rem 0; padding: .3rem .6rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 14px; cursor: pointer; background: #fff; user-select: none; }
.chip input { accent-color: var(--accent); margin: 0; }
.chip:has(input:checked) { border-color: var(--ink); background: #EAE3D2; }
.chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.concerns .chip { border-radius: 4px; display: flex; width: 100%; align-items: flex-start; line-height: 1.4; }
.concerns .chip input { margin-top: .2rem; }
.atlas-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

.trace-wrap { border: 1px solid var(--rule); border-radius: 4px; background: url('/paper.svg') center / 180px 180px, #F6F0E2; overflow: hidden; }
.trace { display: block; width: 100%; height: auto; min-height: 220px; }
.trace .edge { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-opacity: .12; transition: stroke-opacity .35s, stroke .35s; }
.trace .edge.lit { stroke-opacity: .55; }
.trace .edge.lit.v-supported { stroke: #2F6B3E; stroke-opacity: .85; stroke-width: 1.8; }
.trace .edge.lit.v-partial { stroke: #9A7424; stroke-opacity: .85; stroke-width: 1.6; stroke-dasharray: 6 3; }
.trace .edge.lit.v-gap { stroke: var(--accent); stroke-opacity: .8; stroke-width: 1.5; stroke-dasharray: 2 3; }
.trace .edge.lit.v-out { stroke: var(--rim); stroke-opacity: .45; stroke-dasharray: 1 4; }
.trace .edge.v-alt { stroke-dasharray: 3 5; }
.trace .edge.lit.fill, .trace .edge.lit.offer { stroke: #3E5C76; stroke-opacity: .6; }
.trace .pulse { fill: var(--accent); }
.trace .node { cursor: default; transition: opacity .35s; }
.trace .node[role="button"] { cursor: pointer; }
.trace .node[role="button"]:focus { outline: none; }
.trace .node[role="button"]:focus circle, .trace .node[role="button"]:focus rect { stroke: var(--accent); stroke-width: 3; }
.trace .node.dim { opacity: .22; }
.trace .node.idle { opacity: .45; }
.trace .node circle, .trace .node rect { stroke: var(--ink); stroke-width: 1.2; }
.trace .n-concern circle { fill: var(--accent); stroke: var(--accent); }
.trace .n-control circle { fill: var(--cream); }
.trace .n-control.s-covered circle { fill: #2F6B3E; stroke: #2F6B3E; }
.trace .n-control.s-partial circle { fill: #E9D49B; stroke: #9A7424; }
.trace .n-control.s-gap circle { fill: var(--cream); stroke: var(--accent); stroke-width: 2; }
.trace .n-platform circle { fill: #1F2B26; }
.trace .n-alt circle { fill: var(--cream); stroke: #2F6B3E; stroke-dasharray: 2 2; }
.trace .n-fill rect { fill: #DDE5EC; stroke: #3E5C76; }
.trace .n-offering rect { fill: var(--accent); stroke: var(--accent); }
.trace text { font: 500 12.5px var(--font-body); fill: var(--ink); pointer-events: none; paint-order: stroke; stroke: #F6F0E2; stroke-width: 4px; stroke-linejoin: round; }
.trace text.col { font: 600 11px var(--font-body); letter-spacing: .08em; fill: var(--accent); }
.trace text.empty { font-size: 17px; fill: var(--quiet); }
.trace-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 0; padding: .5rem .8rem; border-top: 1px solid var(--rule); font-size: 12px; color: var(--quiet); }
.trace-legend li::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; border: 1px solid var(--ink); }
.trace-legend .k-concern::before { background: var(--accent); border-color: var(--accent); }
.trace-legend .k-control::before { background: var(--cream); }
.trace-legend .k-platform::before { background: #1F2B26; }
.trace-legend .k-alt::before { background: var(--cream); border: 1px dashed #2F6B3E; }
.trace-legend .k-fill::before { background: #DDE5EC; border-color: #3E5C76; border-radius: 2px; }
.trace-legend .k-offering::before { background: var(--accent); border-color: var(--accent); border-radius: 3px; }
.trace-legend .edge-key::before { width: 1.3rem; height: 0; border-radius: 0; border: 0; border-top: 2px solid; vertical-align: 3px; }
.trace-legend .e-sup::before { border-top-color: #2F6B3E; }
.trace-legend .e-par::before { border-top: 2px dashed #9A7424; }
.trace-legend .e-gap::before { border-top: 2px dotted var(--accent); }
.trace-legend .e-out::before { border-top: 2px dotted var(--rim); }

.trace-log { margin: 1rem 0 0; padding-left: 1.3rem; font-size: 14px; color: var(--quiet); max-height: 15rem; overflow: auto; }
.trace-log li { margin: .2rem 0; }
.trace-log code { font-size: 12px; background: #EEE7D7; padding: 1px 4px; border-radius: 3px; overflow-wrap: anywhere; }
.trace-log:empty { display: none; }

.answer { border-top: 1px solid var(--rule); margin-top: 1.4rem; padding-top: 1.1rem; }
.answer h3 { font: 600 1.15rem/1.3 var(--font-display); margin: 0 0 .5rem; }
.answer .route { font-size: 13px; color: var(--quiet); margin: 0 0 .7rem; }
.answer .summary { margin: 0 0 .8rem; }
.claims { list-style: none; padding: 0; margin: 0 0 .8rem; }
.claims li { padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 3px; margin: 0 0 .45rem; background: #fff; font-size: 14px; line-height: 1.5; }
.claims li.alt { background: #F7F3E8; }
.claim-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-top: .35rem; font-size: 12px; color: var(--quiet); align-items: center; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule); font-size: 11.5px; font-weight: 600; }
.tag.supported { background: #DCE7DA; border-color: #A9C4AA; color: #1F4A2A; }
.tag.partial { background: #F4E7C4; border-color: #DCC27F; color: #5E4610; }
.tag.not-addressed, .tag.unresolved { background: #F0E3DE; border-color: #DCC0B9; color: #6E3426; }
.tag.verified { background: #274931; border-color: #274931; color: #fff; }
.tag.pass { color: #1F4A2A; }
.tag.fail { color: var(--accent); border-color: var(--accent); }
.claim-meta button { font: inherit; font-size: 12px; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; }
.answer h4 { font: 600 .95rem/1.3 var(--font-body); margin: .9rem 0 .35rem; }
.answer ul.plain { margin: 0 0 .5rem; padding-left: 1.2rem; font-size: 14px; }
.frame { margin-top: 1.6rem; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 4px; background: #F6F0E2; }
.frame h3 { font: 600 1.1rem/1.3 var(--font-display); margin: 0 0 .4rem; }
.frame table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: .6rem; }
.frame th, .frame td { text-align: left; padding: .4rem .35rem; border-bottom: 1px solid var(--rule); vertical-align: top; }

.record-card { position: fixed; right: 1rem; bottom: 1rem; width: min(26rem, calc(100% - 2rem)); max-height: 70vh; overflow: auto; z-index: 20; background: var(--cream); border: 1px solid var(--rim); border-radius: 4px; box-shadow: var(--shadow); padding: 1rem 1.1rem; font-size: 14px; }
.record-card h3 { font: 600 1.05rem/1.3 var(--font-display); margin: 0 1.6rem .4rem 0; }
.record-card .close { position: absolute; top: .5rem; right: .6rem; background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--ink); }
.record-card code { font-size: 12px; overflow-wrap: anywhere; }
.record-card blockquote { margin: .5rem 0; padding: .4rem .7rem; border-left: 3px solid var(--accent); background: #F6F0E2; font-family: var(--font-display); }
.atlas-foot { margin-top: 1.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .trace .edge, .trace .node { transition: none; } }
.trace-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.trace-tabs:empty { display: none; }
.tab { font: 600 13px var(--font-body); padding: .35rem .7rem; border: 1px solid var(--rule); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.tab[aria-pressed='true'] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* Phones: keep the graph's labels readable and let it scroll sideways inside its panel. */
.trace-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trace-hint { display: none; margin: 0 0 .4rem; font-size: 12.5px; color: var(--quiet); }
@media (max-width: 760px) { .trace { min-width: 700px; } .trace-hint { display: block; } }
.atlas-grid > * { min-width: 0; }

/* The intro sits on its own leaf so it reads clearly over the wall's sketches. */
.atlas-intro { background: url('/paper.svg') center / 180px 180px, var(--cream); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); padding: clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2.2rem); margin-bottom: clamp(1.25rem, 3vw, 2rem); position: relative; }
.atlas-intro::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--hairline); pointer-events: none; }
.atlas-intro .breadcrumb, .atlas-intro .eyebrow { margin-top: 0; }
.atlas-intro .lede { margin-bottom: 1.1rem; }
.atlas-sample-note { border-left: 3px solid var(--accent); background: #F3EAD6; padding: .8rem 1rem; border-radius: 0 4px 4px 0; max-width: 52rem; font-size: 15px; }
.atlas-sample-note p { margin: 0 0 .4rem; }
.atlas-sample-note p:last-child { margin-bottom: 0; }
.sample-kicker { font: 600 12px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.atlas-foot { background: var(--cream); border: 1px solid var(--rule); border-radius: 4px; padding: .8rem 1rem; box-shadow: var(--shadow); }

/* Platforms reserved for the full version: visible, greyed, not selectable. */
.chip.reserved { cursor: not-allowed; background: transparent; border-style: dashed; color: var(--quiet); opacity: .62; }
.chip.reserved input { cursor: not-allowed; }
.chip.reserved:hover { opacity: .8; }
.reserved-note { margin: 0 0 .5rem; }
.atlas-form { max-height: calc(100vh - 2rem); overflow: auto; }
@media (max-width: 960px) { .atlas-form { max-height: none; overflow: visible; } }

/* The stack report, the ladder and the offerings (decision 0011 gap logic). */
.scan-chip { margin-top: .8rem; }
.report, .ladder, .offer { border-top: 1px solid var(--rule); margin-top: 1.4rem; padding-top: 1.1rem; }
.report-sum { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: baseline; margin: 0 0 .8rem; }
.sum { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-size: 14px; }
.sum strong { font-size: 1.15rem; margin-right: .2rem; }
.sum.s-covered { background: #DCE7DA; border-color: #A9C4AA; color: #1F4A2A; }
.sum.s-partial { background: #F4E7C4; border-color: #DCC27F; color: #5E4610; }
.sum.s-gap { background: #F0E3DE; border-color: #DCC0B9; color: #6E3426; }
.sum-note { font-size: 13px; color: var(--quiet); }
.report-h3 { font: 600 1rem/1.3 var(--font-body); margin: 1rem 0 .5rem; }
.covered-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.covered-list li { border: 1px solid #A9C4AA; background: #F1F6EF; border-radius: 4px; padding: .3rem .6rem; font-size: 13.5px; }
.covered-list .by { color: var(--quiet); }
button.link { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.gap-card { border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 3px; background: #fff; padding: .7rem .85rem; margin: 0 0 .6rem; }
.gap-card.s-partial { border-left-color: #9A7424; }
.gap-card header { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; justify-content: space-between; }
.gap-card h4 { font: 600 1rem/1.3 var(--font-display); margin: 0; }
.gap-card .cat { font-size: 13px; color: var(--quiet); margin: .3rem 0 .4rem; }
.gap-labels { font-size: 13px; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.fills { margin: .2rem 0 0; padding-left: 1.2rem; font-size: 14px; }
.fills li { margin: .3rem 0; }
.fill-tag { display: inline-block; min-width: 4.6rem; text-align: center; padding: 1px 6px; border-radius: 3px; font: 600 11px/1.6 var(--font-body); letter-spacing: .04em; text-transform: uppercase; margin-right: .3rem; border: 1px solid; }
.fill-tag.f-adopt { background: #DDE5EC; border-color: #3E5C76; color: #22384A; }
.fill-tag.f-extend { background: #E7E1F0; border-color: #5B4B7A; color: #3A2D55; }
.fill-tag.f-policy { background: #F4E7C4; border-color: #9A7424; color: #4F3B0C; }
.fill-tag.f-managed { background: #DCE7DA; border-color: #2F6B3E; color: #1F4A2A; }
.fill-tag.f-verify { background: #fff; border-color: var(--accent); color: var(--accent); }
.tag.lab-confirmed { background: #6E3426; border-color: #6E3426; color: #fff; }
.tag.lab-likely { background: #F0E3DE; border-color: #B98A7D; color: #6E3426; }
.tag.lab-unchecked { background: #fff; border-color: var(--rim); color: var(--quiet); border-style: dashed; }
.tag.lab-disputed { background: #F4E7C4; border-color: #9A7424; color: #4F3B0C; }
.tag.lab-out-of-scope { background: #EEE7D7; border-color: var(--rule); color: var(--quiet); }
.tag.fits { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.ladder-list { list-style: none; padding: 0; margin: .6rem 0 0; font-size: 13.5px; }
.ladder-list li { padding: .3rem 0; border-bottom: 1px dotted var(--rule); }
.ladder-list .sim { font-size: 12px; color: var(--quiet); font-style: italic; }
.ladder-list .real { font-size: 12.5px; color: #1F4A2A; }
#ladder-out { margin-top: .7rem; }
.offer-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; }
.offer-item { border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: 3px; background: #fff; padding: .75rem .85rem; font-size: 14px; }
.offer-item header { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; justify-content: space-between; }
.offer-item h3 { font: 600 1.02rem/1.3 var(--font-display); margin: 0; }
.offer-item p { margin: .4rem 0 0; }
.engage { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 4px; background: #F6F0E2; }
.engage h3 { font: 600 1.05rem/1.3 var(--font-display); margin: 0 0 .5rem; }
.engage-steps { margin: 0 0 .8rem; padding-left: 1.3rem; font-size: 14px; }
.engage-steps li { margin: .3rem 0; }
.answers-details { margin-top: 1.4rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.answers-details summary { cursor: pointer; font: 600 1rem/1.3 var(--font-body); }
.fill-tag.f-configure { background: #E3EEF0; border-color: #2E6470; color: #1D4650; }
.fill-tag.f-accept { background: #EEE7D7; border-color: var(--rim); color: #3E3A31; }
.tag.size { background: #fff; border-color: var(--rim); color: var(--quiet); }
.offer-item.w-assess { border-top-color: var(--ink); }
.offer-item.w-current { border-top-color: #2E6470; }
.offer-item .also { font-size: 12.5px; color: var(--quiet); }
.fills li.primary span:not(.fill-tag):not(.rec) { font-weight: 600; }
.rec { font: 600 11px/1.5 var(--font-body); color: #1F4A2A; background: #DCE7DA; border: 1px solid #A9C4AA; border-radius: 999px; padding: 0 6px; margin-left: .3rem; white-space: nowrap; }

/* The traversal terminal: a fixed-size log of every hop. Contrast checked on the dark ground. */
.term-wrap { margin-top: 1rem; border: 1px solid #1F2B26; border-radius: 6px; overflow: hidden; background: #1F2B26; box-shadow: var(--shadow); }
.term-head { margin: 0; padding: .35rem .7rem; background: #2C3A34; color: #C9D3CD; font: 600 11.5px/1.4 ui-monospace, Consolas, 'Cascadia Mono', monospace; letter-spacing: .04em; display: flex; align-items: center; gap: .35rem; }
.term-head .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #5E6E66; display: inline-block; }
.term { height: 16rem; overflow: auto; padding: .55rem .75rem; font: 12.5px/1.55 ui-monospace, Consolas, 'Cascadia Mono', 'Courier New', monospace; color: #E8E2D4; overscroll-behavior: contain; }
.term:focus-visible { outline: 2px solid #9CC8E8; outline-offset: -2px; }
.term .ln { white-space: pre-wrap; overflow-wrap: anywhere; }
.term .ts { color: #A9B5AE; }
.term .cmd { color: #FFFFFF; font-weight: 600; }
.term .stage { color: #E9C46A; font-weight: 600; }
.term .op { display: inline-block; min-width: 3.4em; font-weight: 600; }
.term .op.route { color: #F2A38A; }
.term .op.read { color: #8FD19E; }
.term .op.alt { color: #C6B4F0; }
.term .op.fill { color: #9CC8E8; }
.term .op.plan { color: #E9C46A; }
.term .k { color: #A9B5AE; }
.term .v { color: #E8E2D4; }
.term .v.ok { color: #8FD19E; }
.term .v.warn { color: #E9C46A; }
.term .v.bad { color: #F2A38A; }
.term .v.dim, .term .ln.dim { color: #A9B5AE; }
.term .why { color: #A9B5AE; font-style: italic; }
.term .wl { font: inherit; color: #9CC8E8; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(156, 200, 232, .45); text-underline-offset: 2px; }
.term .wl:hover, .term .wl:focus-visible { color: #FFFFFF; text-decoration-color: #FFFFFF; outline: none; }
.term .ln.end { color: #FFFFFF; border-top: 1px dashed #5E6E66; margin-top: .3rem; padding-top: .3rem; }

/* Scenario starters and the gap headline. */
.scenario-box { margin: 0 0 1.2rem; padding: 0 0 1rem; border-bottom: 1px solid var(--rule); }
.scenario-box .atlas-label { margin-top: 0; }
.scenarios { display: grid; gap: .45rem; }
.scenario { text-align: left; font: inherit; font-size: 13.5px; line-height: 1.4; padding: .55rem .7rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer; }
.scenario strong { display: block; font-size: 14px; }
.scenario span { color: var(--quiet); }
.scenario:hover { background: #F6F0E2; }
.scenario:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-head { margin: 0 0 .6rem; font-size: 15.5px; }
.chip.alias { border-style: dashed; }