/* Ringedingeding — a blue call-chain cockpit with one gold signal.
   One local stylesheet, no framework and no network-loaded decoration. */

:root {
  --ink: #10233f;
  --muted: #566b83;
  --line: #ceddec;
  --bg: #f3f8fd;
  --surface: #ffffff;
  --soft: #edf4fb;
  --navy: #082440;
  --navy-deep: #061a30;
  --cockpit-blue: #155fae;
  --cobalt: #1d6fd1;
  --sky: #79cfff;
  --signal: #e3b341;
  --can: #2f7d4f;
  --cannot: #b3352c;
  --warn: #9a6b12;
  --accent: #155fae;
  --advisor: #3157b9;
  --schedule: #087ca4;
  --glow: #dceeff;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 Aptos, system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image:
    linear-gradient(rgba(21, 95, 174, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 95, 174, .035) 1px, transparent 1px),
    radial-gradient(circle at 92% 4%, #dfefff 0, transparent 30rem),
    radial-gradient(circle at 5% 30%, #e6f6fb 0, transparent 25rem);
  background-size: 32px 32px, 32px 32px, auto, auto;
  background-attachment: fixed;
}

main { max-width: 1120px; margin: 0 auto; padding: 0 24px 72px; }
footer { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; }

h1, h2, h3 { font-family: Bahnschrift, "Aptos Display", "Segoe UI", sans-serif; }
h1 { font-size: 1.7rem; font-weight: 650; margin: 32px 0 8px; letter-spacing: -0.025em; }
h2 { font-size: 1.15rem; font-weight: 650; margin: 32px 0 10px; }
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
h4 { font-size: 0.85rem; font-weight: 600; margin: 0 0 6px; text-transform: uppercase;
     letter-spacing: 0.04em; color: var(--muted); }

a { color: var(--accent); }
code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0d4d8d; outline-offset: 3px;
}
.top nav a:focus-visible, .launch-card:focus-visible { outline-color: #fff; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.greyed { opacity: 0.55; }

/* ---- chrome ---- */

.top {
  display: flex; align-items: center; gap: 16px;
  max-width: none; margin: 0; padding: 17px max(24px, calc((100vw - 1072px) / 2));
  background: var(--navy-deep); color: #fff;
  border-bottom: 1px solid #1a4269; box-shadow: 0 10px 35px rgba(6, 26, 48, .18);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.05rem; text-decoration: none; color: #fff; letter-spacing: .01em; }
.brand-mark { display: block; width: 32px; height: 32px; flex: none; }
.tagline { color: #aac6df; font-size: 0.82rem; }
.top nav { margin-left: auto; display: flex; gap: 14px; font-size: 0.9rem; align-items: center; }
.top nav a { color: #dbeafa; text-decoration-color: transparent; text-underline-offset: 5px; }
.top nav a:hover { color: #fff; text-decoration-color: var(--signal); }
.language-picker { display: inline-flex; padding: 2px; border: 1px solid #5d7893; border-radius: 999px; }
.top .language { min-width: 30px; padding: 2px 7px; border-radius: 999px; text-align: center; text-decoration: none; font-size: .75rem; }
.top .language.active { background: var(--signal); color: var(--navy-deep); font-weight: 750; }

.project-bar {
  max-width: 1120px; margin: 0 auto; padding: 12px 24px 10px;
  border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap;
}

.steps {
  max-width: 1120px; margin: 0 auto 8px; padding: 0 24px 12px;
  display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.step {
  font-size: 0.85rem; text-decoration: none; color: var(--muted);
  padding: 4px 10px; border-radius: 999px;
}
.step:hover { background: var(--soft); }
.step.here { background: var(--ink); color: #fff; }

/* ---- blocks ---- */

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin: 14px 0; background: var(--surface);
}
.card { box-shadow: 0 14px 36px rgba(8, 36, 64, .065); }
.hero { padding: 34px 0 12px; max-width: 740px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -.045em; margin-top: 8px; }
.hero p:last-child, .lead { color: var(--muted); font-size: 1.08rem; max-width: 690px; }
.eyebrow { margin: 0; color: var(--accent); font: 750 .74rem/1.3 "Cascadia Mono", Consolas, monospace; text-transform: uppercase; letter-spacing: .13em; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.section-title h2 { margin-bottom: 10px; }
.hint { display: block; color: var(--muted); font-size: .82rem; margin-top: 5px; }
.empty-state { padding: 34px 20px; border: 1px dashed #c9c2d8; border-radius: var(--radius); color: var(--muted); text-align: center; background: #ffffffaa; }
.button { display: inline-block; font: inherit; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
.button:hover { background: var(--soft); }
.muted-card { background: var(--soft); }
.error-card { border-color: var(--cannot); }
.warn-card { border-color: var(--warn); background: #fdf6e6; }
.live-card { border-color: var(--cannot); border-width: 2px; background: #fffafa; }

label { display: block; margin: 10px 0; font-size: 0.9rem; color: var(--muted); }
label.inline { display: flex; align-items: center; gap: 8px; color: var(--ink); }
label.grow { flex: 1; }

input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=date], input[type=time], select, textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 9px 10px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label.inline input[type=checkbox], label.inline input[type=radio] { width: auto; margin: 0; }

fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 14px 0; }
legend { font-size: 0.85rem; color: var(--muted); padding: 0 6px; }

button {
  font: inherit; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
button:hover { background: var(--soft); }
button.primary { background: var(--cockpit-blue); border-color: var(--cockpit-blue); box-shadow: 0 8px 18px rgba(21, 95, 174, .18); }
button.primary:hover { background: #0d4d8d; }
button.danger { background: var(--cannot); color: #fff; border-color: var(--cannot); }
button.danger:hover { background: #922; }
button[disabled] { opacity: 0.4; cursor: not-allowed; }
button.link {
  border: none; background: none; padding: 2px 4px; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
button.link.danger { background: none; color: var(--cannot); }

.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.row.spread { justify-content: space-between; align-items: center; }
.inline-form { display: inline; }
.next { font-weight: 600; text-decoration: none; }

.badge {
  font-size: 0.75rem; padding: 2px 8px; border-radius: 999px;
  background: var(--soft); color: var(--muted); border: 1px solid var(--line);
}
.badge.warn { color: var(--warn); border-color: #e6d9b8; background: #fdf6e6; }
.badge.script { color: var(--accent); }
.badge.success { color: var(--can); background: #f1faf5; border-color: #b9dfc8; }
.mode-badge { font-size: .7rem; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.mode-badge.schedule { color: var(--schedule); background: #e8f7f7; }
.mode-badge.roundtable { color: var(--advisor); background: #edf0ff; }

/* ---- cockpit home ------------------------------------------------------ */

.cockpit-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px; align-items: center; min-height: 390px; margin: 34px 0 26px;
  padding: 52px 56px; overflow: hidden; border: 1px solid #c9dceb;
  border-radius: 28px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 70px rgba(8, 36, 64, .12);
}
.cockpit-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px;
  background: var(--signal);
}
.cockpit-copy { position: relative; z-index: 1; max-width: 660px; }
.hero-logo {
  display: block; width: min(100%, 310px); max-height: 190px; object-fit: contain;
  object-position: left center; margin: 12px 0 14px;
  filter: drop-shadow(0 14px 18px rgba(21, 95, 174, .12));
}
.cockpit-copy h1 { margin: 0 0 12px; font-size: clamp(2rem, 4.2vw, 3.7rem); line-height: .98; max-width: 680px; }
.cockpit-copy > p:last-child { margin: 0; max-width: 610px; color: var(--muted); font-size: 1.08rem; }
.signal-console {
  position: relative; width: 270px; aspect-ratio: 1; justify-self: end;
  overflow: hidden; border: 1px solid #24527c; border-radius: 50%;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 14px #092948, 0 20px 40px rgba(6, 26, 48, .22);
}
.signal-console::before, .signal-console::after {
  content: ""; position: absolute; background: rgba(121, 207, 255, .2);
}
.signal-console::before { width: 1px; top: 22px; bottom: 22px; left: 50%; }
.signal-console::after { height: 1px; left: 22px; right: 22px; top: 50%; }
.signal-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(121, 207, 255, .38); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 58px; height: 58px; }
.orbit-two { width: 120px; height: 120px; }
.orbit-three { width: 190px; height: 190px; animation: signal-pulse 3.2s ease-in-out infinite; }
.signal-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 8px rgba(227, 179, 65, .13), 0 0 24px rgba(227, 179, 65, .72); }
.signal-readout { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 7px; width: max-content; color: #dbeafa; font: .66rem/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.signal-readout strong { color: var(--signal); font-size: 1.3rem; }
@keyframes signal-pulse { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } }

.brand-cable {
  width: min(760px, 88vw); height: 24px; margin: -14px auto 10px;
  background: url("/static/brand/motiv.png") center 84% / 720px auto no-repeat;
  opacity: .11; pointer-events: none;
}

.launch-section, .cockpit-areas, .new-chain, .chains-section, .offline-demo { scroll-margin-top: 24px; }
.launch-section { padding: 24px 0 18px; }
.cockpit-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 16px; }
.cockpit-heading h2 { margin: 5px 0 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.cockpit-heading.compact { margin-top: 18px; }
.cockpit-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: .72rem/1.2 "Cascadia Mono", Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.cockpit-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--can); box-shadow: 0 0 0 5px rgba(47, 125, 79, .12); }
.launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.launch-card {
  position: relative; min-height: 260px; padding: 25px; overflow: hidden;
  display: grid; grid-template-columns: 62px 1fr; grid-template-rows: 1fr auto; gap: 18px;
  border-radius: 22px; color: #fff; text-decoration: none;
  box-shadow: 0 18px 38px rgba(8, 36, 64, .18); transition: transform .2s ease, box-shadow .2s ease;
}
.launch-card::after { content: ""; position: absolute; right: -52px; bottom: -72px; width: 210px; height: 210px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255, 255, 255, .035), 0 0 0 68px rgba(255, 255, 255, .025); }
.launch-card.schedule { background: #0b528f; }
.launch-card.advisor { background: #173b79; }
.launch-card:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 24px 48px rgba(8, 36, 64, .24); }
.launch-number { position: absolute; top: 17px; right: 21px; color: rgba(255, 255, 255, .52); font: .7rem/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; }
.launch-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .27); border-radius: 16px; background: rgba(255, 255, 255, .08); }
.launch-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.launch-card.advisor .launch-icon svg { stroke: #b9caff; }
.launch-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; padding-right: 28px; }
.launch-copy strong { font: 680 clamp(1.5rem, 2.8vw, 2.25rem)/1 Bahnschrift, "Aptos Display", sans-serif; letter-spacing: -.025em; }
.launch-copy span { color: #d9eaf8; font-size: .92rem; max-width: 380px; }
.launch-action { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 650; }
.launch-action b { color: var(--signal); font-size: 1.25rem; }

.cockpit-areas { padding: 28px 0 20px; }
.area-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.area-tile {
  position: relative; min-height: 194px; padding: 18px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-top: 4px solid var(--cockpit-blue); border-radius: 16px;
  background: rgba(255, 255, 255, .94); color: var(--ink); text-decoration: none;
  box-shadow: 0 10px 26px rgba(8, 36, 64, .07); transition: border-color .18s ease, transform .18s ease;
}
.area-tile:nth-child(2) { border-top-color: #258cae; }
.area-tile:nth-child(3) { border-top-color: #3c67bc; }
.area-tile:nth-child(4) { border-top-color: #0b7896; }
.area-tile:nth-child(5) { border-top-color: var(--signal); }
.area-tile:hover { transform: translateY(-2px); border-color: var(--cockpit-blue); color: var(--ink); }
.area-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 5px; border-radius: 11px; background: var(--soft); color: var(--cockpit-blue); }
.area-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.area-tile strong { font-size: 1rem; line-height: 1.2; }
.area-tile > span:nth-of-type(2) { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.area-tile > b { position: absolute; right: 15px; top: 16px; color: #8aa0b5; font-size: 1rem; }
.area-tile em { position: absolute; right: 14px; bottom: 12px; display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font: normal .72rem/1 "Cascadia Mono", Consolas, monospace; }

.new-chain { margin: 48px 0 20px; padding: 30px; border: 1px solid #bdd3e7; border-left: 7px solid var(--signal); border-radius: 22px; background: rgba(232, 243, 253, .82); }
.new-chain-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.new-chain-head h2 { margin: 5px 0 0; font-size: 1.8rem; }
.new-chain-head > p { max-width: 390px; margin: 0; color: var(--muted); }
.chain-form { margin-bottom: 0; }
.chain-form[data-mode="schedule"] { border-top: 4px solid var(--schedule); }
.chain-form[data-mode="roundtable"] { border-top: 4px solid var(--advisor); }
.mode-summary { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--soft); }
.mode-summary[data-mode-panel="schedule"] { border-left: 4px solid var(--schedule); }
.mode-summary[data-mode-panel="roundtable"] { border-left: 4px solid var(--advisor); }
.mode-summary span { color: var(--muted); font-size: .86rem; }
[hidden] { display: none !important; }
.chains-section { margin-top: 44px; }
.project-list { padding: 5px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .9); }
.offline-demo { margin-top: 44px; }

/* A mode radio is a decision card: clicking the whole card chooses the product. */
.mode-choice { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; border: 0; padding: 0; }
.mode-choice legend { margin-bottom: 8px; }
.mode-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 3px 11px; padding: 17px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; background: #fff; }
.mode-card input { position: absolute; opacity: 0; }
.mode-card .mode-icon { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.25rem; }
.mode-card span:last-child { color: var(--muted); font-size: .82rem; }
.mode-card.schedule .mode-icon { background: #e8f7f7; color: var(--schedule); }
.mode-card.advisor .mode-icon { background: #edf0ff; color: var(--advisor); }
.mode-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(21, 95, 174, .12); }
.mode-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.advisor-accent { border-top: 4px solid var(--advisor); }
.group-accent { border-top: 4px solid var(--schedule); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 5px 15px; }

/* Global calendar: display rows are also the export selection. */
.filter-bar { border-top: 4px solid var(--accent); }
.export-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 16px 0; }
.calendar-list { display: grid; gap: 8px; }
.calendar-entry { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.calendar-entry time { font-variant-numeric: tabular-nums; color: var(--muted); }
.calendar-entry div { display: flex; flex-direction: column; }
.calendar-entry div span { color: var(--muted); font-size: .82rem; }
.calendar-entry.decided { border-color: #a7d4b8; box-shadow: inset 4px 0 var(--can); }
.project-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }

/* Advisor results distinguish trend from dissent instead of pretending consensus. */
.advisor-summary { padding: 24px; border-radius: 20px; color: #fff; background: linear-gradient(130deg, #123b75, #326bbd); box-shadow: 0 18px 40px rgba(21, 95, 174, .2); }
.advisor-summary .eyebrow, .advisor-summary p { color: #e0efff; }
.advisor-summary h2 { margin: 6px 0; font-size: 1.55rem; }
.tally-grid, .answer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; margin: 16px 0; }
.tally, .answer-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: flex; flex-direction: column; }
.tally strong { font-size: 2rem; color: var(--accent); }
.tally small { color: var(--muted); margin-top: 6px; }
.quote-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.quote-list li { border-left: 3px solid var(--accent); padding: 9px 13px; background: #fff; border-radius: 0 10px 10px 0; }
.quote-list li strong { display: block; font-size: .8rem; color: var(--muted); }
.quote-list q { quotes: "“" "”"; }
.quote-list.counter li { border-left-color: var(--advisor); background: #fff7fb; }

.banner { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: 0.9rem; }
.banner.rehearsal { background: #fdf6e6; border: 1px solid #e6d9b8; color: var(--warn); }
.banner.live { background: #fdecea; border: 1px solid #f0c2be; color: var(--cannot); }
.banner.error { background: #fdecea; border: 1px solid var(--cannot); color: var(--cannot); }
.warn-line { color: var(--warn); font-size: 0.9rem; }

.list { list-style: none; padding: 0; margin: 8px 0; }
.list li {
  padding: 8px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

pre.task, pre.speech, pre.detail {
  background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px; overflow-x: auto; font-size: 0.82rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
pre.speech { max-height: 320px; overflow-y: auto; }

.facts { display: flex; gap: 32px; flex-wrap: wrap; }
.facts div { display: flex; flex-direction: column; }
.facts .big { font-size: 1.6rem; font-weight: 600; }
.facts span:last-child { font-size: 0.8rem; color: var(--muted); }

/* ---- people ---- */

.avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: #fff; flex: 0 0 auto;
}
.avatar.big { width: 52px; height: 52px; font-size: 1rem; }
.avatar.initials { background: var(--muted); }
.avatar.faded { background: #c9c9c9; color: #fff; }
.avatar.struck { position: relative; }
.avatar.struck::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 2px; background: var(--cannot); transform: rotate(-20deg);
}

.people { list-style: none; padding: 0; margin: 0; }
.people li { border-bottom: 1px solid var(--line); }
.people label { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--ink); }
.people .name { font-weight: 500; }
.people input[type=checkbox] { width: auto; margin: 0; }

.contact-head { display: flex; gap: 14px; align-items: center; }
.contact-head input[type=text] { font-weight: 600; }

/* ---- live ---- */

.callers { list-style: none; padding: 0; margin: 12px 0; }
.caller {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px;
}
.caller .mark { width: 1.4em; text-align: center; font-size: 1.05rem; }
.caller .name { font-weight: 500; }
.caller .detail { margin-left: auto; }
.caller.calling { border-color: var(--accent); background: #f4f8fc; }
.caller.calling .mark { color: var(--accent); animation: ring 1.1s ease-in-out infinite; }
/* The end states of ABLAUF.md section 2. Red means somebody said no; grey with
   a question mark means nobody was there and nothing is known. Striking a name
   through belongs to the first case only — a struck-out name reads as "this
   person is out", which about an unanswered telephone would be a lie. */
.caller.answered .mark { color: var(--can); }
.caller.answered { border-color: #cfe6d8; background: #f6fbf8; }
.caller.declined .mark { color: var(--cannot); }
.caller.declined { border-color: #f0d3d1; background: #fdf7f7; }
.caller.declined .name { text-decoration: line-through; color: var(--muted); }
.caller.absent .mark { color: var(--muted); font-weight: 700; }
.caller.absent { border-color: var(--line); background: var(--soft); }
.caller.absent .name { color: var(--muted); }
.caller.absent .avatar { filter: grayscale(1); opacity: 0.7; }
.caller.failed .mark { color: var(--cannot); font-weight: 700; }
.caller.failed { border-color: var(--cannot); background: #fdf7f7; }
.caller.waiting { opacity: 0.65; }
/* A simulated round's "answered"/"calling" rows must never look like the
   real thing (R4, live finding 2026-08-22) — dashed border and the warning
   colour instead of the solid, "can" green/accent blue a real call earns. */
.callers.simulated .caller.answered,
.callers.simulated .caller.calling {
  border-style: dashed; border-color: var(--warn); background: #fdf6e6;
}
.callers.simulated .caller.answered .mark,
.callers.simulated .caller.calling .mark {
  color: var(--warn); animation: none;
}

@keyframes ring { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .caller.calling .mark { animation: none; } }

/* ---- calendar ---- */

.basis { background: var(--soft); border-radius: 8px; padding: 12px 14px; font-size: 0.92rem; }

.calendar { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.day { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 150px; }
.day-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 8px; }
.day-head .weekday { font-weight: 600; }
.day-head .date { color: var(--muted); font-size: 0.85rem; }

.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; margin-bottom: 6px; padding: 8px 10px;
}
.slot .count { font-size: 1.5rem; font-weight: 650; line-height: 1.1; }
.slot .slot-time { font-size: 0.82rem; color: var(--muted); }
.slot .score { font-size: 0.72rem; color: var(--muted); }
.slot .score.full { color: var(--can); font-weight: 600; }
.slot.perfect { border-color: var(--can); background: #f6fbf8; }
.slot.decided { border-color: var(--ink); background: var(--ink); color: #fff; }
.slot.decided .slot-time, .slot.decided .score { color: #ddd; }

.detail-slot:empty { display: none; }
.slot-card .state-group { margin: 12px 0; }
.faces { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; }
.faces li { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; text-align: center; }
.state-group.can h4 { color: var(--can); }
.state-group.cannot h4 { color: var(--cannot); }

.suggestion { background: #f6fbf8; border: 1px solid #cfe6d8; border-radius: 8px; padding: 12px 14px; }
.decided-line { background: var(--soft); border-radius: 8px; padding: 12px 14px; }

.grid-days { display: flex; gap: 8px; flex-wrap: wrap; }
.grid-days input { width: auto; flex: 0 0 auto; }
.time-row { align-items: center; gap: 8px; }
.time-row input { width: auto; }

table.slots { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.slots th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.8rem; padding: 4px; }
table.slots td { padding: 4px; border-top: 1px solid var(--line); }
table.slots input { margin-top: 0; }
tr.extra { background: var(--soft); }

.channels { list-style: none; padding: 0; margin: 0; }
.channels li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* Optional steps stay folded away. An optional section that sits open gets
   worked through, and then it was not optional. */
details.optional { margin: 20px 0; border-top: 1px solid var(--line); }
details.optional > summary {
  cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 1.05rem;
  list-style-position: outside;
}
details.optional > summary::marker { color: var(--muted); }
details.optional > summary:hover { color: var(--accent); }

/* The invitation's channel picker (R7): each channel is its own collapsible
   card so picking one does not hide the others — a person can use both. */
details.channel-picker > summary {
  cursor: pointer; font-weight: 700; font-size: 1.15rem; list-style-position: outside;
}
details.channel-picker > summary:hover { color: var(--accent); }
details.channel-picker .channel-body { margin-top: 14px; }
details.channel-picker .live-card { padding: 16px; border: 1px solid var(--cannot); border-radius: 10px; background: #fffafa; margin-top: 14px; }

@media (max-width: 700px) {
  .tagline { display: none; }
  .top { align-items: center; flex-wrap: wrap; padding-inline: 18px; }
  .top nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .mode-choice { grid-template-columns: 1fr; }
  .calendar-entry { grid-template-columns: 1fr auto; }
  .calendar-entry time { grid-column: 1 / -1; }
  main { padding-inline: 16px; }
  .cockpit-hero { grid-template-columns: 1fr; min-height: 0; padding: 34px 26px; margin-top: 20px; }
  .signal-console { width: 200px; justify-self: center; }
  .launch-grid { grid-template-columns: 1fr; }
  .launch-card { min-height: 240px; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .area-tile:last-child { grid-column: 1 / -1; }
  .new-chain { padding: 24px 18px; }
  .new-chain-head, .cockpit-heading { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .cockpit-hero { grid-template-columns: 1fr 230px; gap: 28px; padding: 42px 38px; }
  .signal-console { width: 220px; }
  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .area-grid { grid-template-columns: 1fr; }
  .area-tile:last-child { grid-column: auto; }
  .launch-card { grid-template-columns: 50px 1fr; padding: 21px; }
  .launch-icon { width: 48px; height: 48px; }
  .signal-console { width: 176px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-orbit, .launch-card, .area-tile { animation: none; transition: none; }
}