/* Runner-specific layout. Tokens come from ../assets/styles.css. */
body { background: var(--depth) fixed, var(--bg); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { font: 600 0.92rem/1 var(--f-body); color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.tab:hover { color: var(--ink); border-color: var(--line); }
.tab[aria-current="page"] { color: var(--on-sun); background: var(--sunset); }
#early { margin-bottom: 22px; }
main { display: flex; flex-direction: column; gap: 22px; padding-bottom: 12px; }
main:focus { outline: none; }

.head { display: flex; flex-direction: column; gap: 10px; }
.head .lede { max-width: 60ch; }
.crumb { align-self: flex-start; }

.front { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; padding: 22px; }
.front img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 36px rgba(244, 162, 97, 0.35); }
.front .copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 640px) { .front { grid-template-columns: minmax(0, 1fr); } .front img { width: 56px; height: 56px; } }

.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.stage-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stage-col > .stage { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wf { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0; }
.wf p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.45; }
.wf .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wf.soon { opacity: 0.78; box-shadow: none; background: rgba(19, 45, 66, 0.4); }

.panel { padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-3); font-size: 0.92rem; }
.form { display: flex; flex-direction: column; gap: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.run { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .run { grid-template-columns: minmax(0, 1fr); } }
.progress { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.progress li { display: flex; gap: 10px; align-items: baseline; padding: 6px 4px; color: var(--ink-3); font-size: 0.93rem; }
.progress li b { font-family: var(--f-mono); font-size: 0.78rem; width: 1.5em; flex: none; }
.progress li.done { color: var(--ink-2); }
.progress li.done b { color: var(--sage); }
.progress li.now { color: var(--ink); }
.progress li.now b { color: var(--gold); }
@media (max-width: 860px) { .progress { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; } .progress li { padding: 2px 0; } }
.run-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink-3); }
.ais a { display: inline-flex; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
.ais a:hover { color: var(--ink); border-color: var(--glass-line); }
details.derive { border-top: 1px dashed var(--line); padding-top: 10px; }
details.derive summary { cursor: pointer; color: var(--ink-2); font-size: 0.92rem; }
details.derive ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--ink-3); }
details.derive q { color: var(--ink-2); font-style: normal; }

.routes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.routes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(10, 30, 46, 0.45); }
.routes li .what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.routes li strong { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { .routes li { grid-template-columns: minmax(0, 1fr); } }

.todos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.todos label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.todos input { margin-top: 5px; accent-color: var(--orange); }
.todos .done span { text-decoration: line-through; color: var(--ink-3); }
.check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { accent-color: var(--orange); width: 18px; height: 18px; }

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 16px; }
.history .what { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.history .snip { color: var(--ink-3); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .history li { grid-template-columns: minmax(0, 1fr); } }

.check-it h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flags li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); background: rgba(10, 30, 46, 0.45); }
.flags .vals { display: flex; flex-wrap: wrap; gap: 6px; }
.flags mark { font: 600 0.82rem/1.3 var(--f-mono); color: var(--on-sun); background: var(--gold); border-radius: 4px; padding: 2px 6px; overflow-wrap: anywhere; }
.flags .line { color: var(--ink-2); font-size: 0.93rem; overflow-wrap: anywhere; }
.panel-inner { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wf p::first-letter { text-transform: uppercase; }

/* Lenses (Dojo Genesis seed patterns) */
.lens-details { margin-top: 4px; }
.lens-details > .lens-set { margin-top: 12px; }
.lens-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.lens-set legend { padding: 0; font-weight: 600; margin-bottom: 4px; }
.lenses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.check.lens { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(10, 30, 46, 0.35); }
.check.lens input { margin-top: 2px; flex: none; }
.check.lens span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check.lens small { color: var(--ink-3); font-size: 0.82rem; line-height: 1.35; }
.from a, .lens-set a { color: inherit; text-decoration: underline; }
.check-it h3 { margin-top: 8px; }
.flags.claims li { border-left-color: var(--orange); }
.card-preview { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 16px; margin: 4px 0 0; }
.card-preview dt { color: var(--ink-3); font-size: 0.9rem; }
.card-preview dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .card-preview { grid-template-columns: 1fr; } .card-preview dd { margin-bottom: 6px; } }
.own-steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 18px; }
.own-steps > li > strong { display: block; margin-bottom: 4px; }
.own-steps > li > p { margin: 0 0 8px; }