/* Look "D" (agreed 3 Nov 2026), loaded after theme.css. Less rigid than B3, same cockpit meanings.
 * Mix of three directions (canvas "Navlog GUI — less rigid", board D):
 *   - A: a progress line across the top (done = green tick, current = lime dot + lime name, to do = grey ring)
 *   - B: every step is a short checklist of soft panels; an item still open is outlined (amber = check,
 *        red = no-go, grey = to do) so it stands out; items that are done stay plain
 *   - C: limit bars: the value against the SOP limit (white tick), green within, red outside, with the
 *        numbers written next to the bar (never colour alone)
 * Softer shapes: 10 px on controls, 14 px on panels; space instead of lines between groups.
 * Rules: navlog-gui-rules skill (§7 colour, §8 shapes). Steps rebuilt so far: Weather & NOTAMs. */

:root { --r: 10px; --r-card: 14px; --ck-bg: var(--panel); --track: #2C333D; --ring: #5B6573; }
:root[data-theme=light] { --ck-bg: #FFFFFF; --track: #D9DDE3; --ring: #8A93A0; }

/* ---------- Progress line (every step, every screen) ---------- */
.phases { display: none !important; }
@media (min-width: 900px) { :root { --top-h: 133px; } .tb-steps .modebar { padding: 10px 28px 6px !important; } }
.steps, .tb-steps .steps { border: 0 !important; border-radius: 0; overflow: visible; background: none; position: relative; }
.steps button, .tb-steps .steps button {
  position: relative; flex-direction: column; flex-wrap: nowrap !important; justify-content: flex-start; align-content: center;
  row-gap: 6px; min-height: 60px; padding: 4px 2px 2px; border: 0 !important; background: transparent !important;
  box-shadow: none !important; color: var(--label2); font-weight: 400; z-index: 0;
}
/* the line: from the previous dot to this one, green once the previous step is done */
.steps button + button::before { content: ""; position: absolute; z-index: -1; top: 15px; height: 2px; left: calc(-50% + 16px); right: calc(50% + 16px); background: var(--track); }
.steps button.done + button::before { background: var(--ok); }
.steps .num, .tb-steps .steps .num {
  width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--ring); background: var(--bg); color: var(--label2);
  font-size: var(--fs-4); font-weight: 700; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
}
:root[data-theme=light] .steps button:not(.on):not(.done) .num { background: var(--panel); }
.steps button.done:not(.on) .num { background: var(--ok); border-color: var(--ok); color: transparent; font-size: 0; position: relative; }
.steps button.done:not(.on) .num::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #0E1114; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); font-size: 0; }
.steps button.on .num { background: var(--tint); border-color: var(--tint); color: var(--on-tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent); }
.steps button.on { color: var(--tint-ink); font-weight: 700; }
:root[data-theme=light] .steps button.on { color: var(--navy); }
.steps button.done:not(.on) { color: var(--label); }
.steps .lbl { flex-basis: auto !important; }
/* a check / no-go sign only on steps you have reached; steps ahead show their number (nothing is wrong yet) */
.steps button.on ~ button .st { display: none !important; }
.steps button.on ~ button .num { display: inline-flex !important; }
.steps button:not(.on)[data-st=warn] .st, .steps button:not(.on)[data-st=bad] .st { background: var(--bg); border-radius: 50%; }
.steps .st svg { width: 24px; height: 24px; }
.steps button:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: var(--r); }
/* phones and the slim bar: dots on the line, only the current step named */
@media (max-width: 899px) {
  .steps, body.steps-mini .steps { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .steps button, body.steps-mini .steps button { min-height: 48px; flex-direction: column; grid-column: auto !important; }
  .steps button:not(.on) .lbl { display: none; }
  .steps button.on .lbl { display: block; font-size: var(--fs-4); white-space: nowrap; }
  .steps button.on .lbl-x { display: none; }
  .steps button + button::before { top: 15px; }
  .plans-btn, .icon-btn.gear { min-height: 44px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .steps button, body.steps-mini .steps button { min-width: 44px; padding-left: 0; padding-right: 0; }
}
@media (max-width: 520px) {
  .sheet .modebar { gap: 0 !important; padding-left: 6px !important; padding-right: 2px !important; }
  .steps, body.steps-mini .steps { flex: 1 1 auto; min-width: 264px; }
  .plans-btn { padding: 0 10px !important; }
  .icon-btn.gear { width: 44px !important; }
  .icon-btn.gear.on { color: var(--tint-ink); }
}

/* ---------- Softer controls ---------- */
.btn { border-radius: var(--r); }
.btn:not(.primary) { border-color: transparent; background: var(--fill2); }
.btn.ghost { background: transparent !important; border-color: transparent !important; }
.btn.primary { border-color: transparent; }
.topbar .btn, :root[data-theme=light] .topbar .btn { background: rgba(255, 255, 255, 0.12) !important; border-color: transparent !important; color: #FFFFFF !important; }
.field input, .field select { border-radius: 8px; }

/* ---------- Step head, look D: heading + task left, progress of the step right ---------- */
.dhead { display: flex; align-items: flex-end; gap: 20px; padding: 18px 0 12px; }
.dhead .grow { flex: 1; min-width: 0; }
.dhead h2 { margin: 2px 0 4px; font-size: var(--fs-1); line-height: 1.2; }
.dhead .step-task { margin: 0; }
.dhead .done-n { text-align: right; white-space: nowrap; }
.dhead .done-n b { font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.dhead .done-n span { font-size: var(--fs-2); color: var(--label2); }
.dhead .done-n small { display: block; font-size: var(--fs-4); color: var(--label2); }
@media (max-width: 899px) { .dhead { padding-top: 12px; } .dhead .step-task { display: none; } }

/* ---------- Checklist: one soft panel per item ---------- */
.cki-list { display: flex; flex-direction: column; gap: 10px; }
.cki { background: var(--ck-bg); border-radius: var(--r-card); border: 0 !important; }
:root[data-theme=light] .cki:not(.open-warn):not(.open-bad):not(.open-todo) { box-shadow: 0 0 0 1px var(--rule2); }
.cki.open-warn { box-shadow: inset 0 0 0 2px var(--warn); }
.cki.open-bad { box-shadow: inset 0 0 0 2px var(--bad); }
.cki.open-todo { box-shadow: inset 0 0 0 2px var(--ring); }
.cki-row { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 0; }
.cki-tog { all: unset; box-sizing: border-box; flex: 1; min-width: 0; min-height: 60px; padding: 8px 4px 8px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; border-radius: var(--r-card); }
.cki-tog:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
@media (hover: hover) { .cki-tog:hover .cki-t { text-decoration: underline; text-underline-offset: 3px; } }
.cki-ic { width: 24px; height: 24px; flex: none; }
.cki-txt { flex: 1; min-width: 0; }
.cki-t { display: block; font-weight: 700; font-size: calc(var(--u) * 17 / 16); }
.cki-t.alt { color: var(--alt); }
.cki-s { display: block; font-size: var(--fs-3); color: var(--label2); overflow-wrap: anywhere; }
.cki-word { font-weight: 700; font-size: var(--fs-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cki-word.ok { color: var(--ok); } .cki-word.warn { color: var(--warn); } .cki-word.bad { color: var(--bad); } .cki-word.todo, .cki-word.info { color: var(--label2); }
.cki-word svg { width: 16px; height: 16px; }
.cki-chev { width: 20px; height: 20px; flex: none; color: var(--label2); transition: transform 160ms ease-out; }
.cki[data-open] .cki-chev { transform: rotate(90deg); }
.cki-row > .btn { flex: none; }
.cki-body { padding: 0 18px 16px 54px; display: flex; flex-direction: column; gap: 10px; }
.cki-body .mono { color: var(--label2); line-height: 1.5; overflow-wrap: anywhere; }
.cki-body .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cki-body .acts .src-line { margin-left: auto; }
.cki-body .src-line { font-size: var(--fs-4); color: var(--label2); }
.cki-body ul.cki-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cki-body ul.cki-notes li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-3); }
.cki-body ul.cki-notes li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cki-body ul.cki-notes li.bad svg { color: var(--bad); } .cki-body ul.cki-notes li.warn svg { color: var(--warn); } .cki-body ul.cki-notes li.info svg { color: var(--label2); }
.cki-body .wxcharts, .cki-body .wx { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.cki-body .field { width: 100%; }
@media (max-width: 899px) {
  .cki-row { padding-right: 10px; }
  .cki-tog { padding-left: 14px; gap: 12px; }
  .cki-body { padding: 0 14px 14px 14px; }
  .cki-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cki-chev { transition: none; } }

/* ---------- Limit bars: value against the SOP limit ---------- */
.lims { display: flex; flex-direction: column; gap: 2px; }
.lim { display: grid; grid-template-columns: 96px 1fr 136px; align-items: center; gap: 14px; min-height: 32px; }
.lim .k { font-size: var(--fs-3); font-weight: 400; color: var(--label2); }
.lim .bar { position: relative; height: 10px; border-radius: 5px; background: var(--track); }
.lim .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--ok); }
.lim.bad .bar i { background: var(--bad); }
.lim .bar b { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--label); }
.lim .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lim.bad .v { color: var(--bad); }
.lim .v span { font-weight: 400; color: var(--label2); }
.lim .w { display: none; }
.lim.bad .w { display: block; grid-column: 2 / -1; font-size: var(--fs-4); color: var(--label2); margin-top: -2px; }
@media (max-width: 520px) { .lim { grid-template-columns: 74px 1fr 104px; gap: 10px; } .lim .v { font-size: var(--fs-3); } }

/* ---------- Weather step: full width, no chart, one centred column ---------- */
.sheet[data-mode=weather], .sheet[data-mode=weather] .sheet-body, .sheet[data-mode=weather] .action-bar { background: var(--bg) !important; }
:root[data-theme=light] .sheet[data-mode=weather], :root[data-theme=light] .sheet[data-mode=weather] .sheet-body,
:root[data-theme=light] .sheet[data-mode=weather] .action-bar { background: var(--bg) !important; }
@media (min-width: 900px) {
  body.full-panel .panel[data-panel=weather] { max-width: 920px; margin: 0 auto; }
  body.full-panel .panel[data-panel=weather] > .action-bar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
.panel[data-panel=weather] > .action-bar { border-top: 0 !important; display: flex; align-items: center; gap: 12px; }
.panel[data-panel=weather] > .action-bar .grow { flex: 1; }
.panel[data-panel=weather] > .action-bar .open-n { font-size: var(--fs-3); color: var(--label2); }
.panel[data-panel=weather] > .action-bar .next-step { min-width: 220px; width: auto; }
.btn.back-text { background: transparent !important; padding: 0 10px 0 4px; gap: 4px; }
.btn.back-text svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .panel[data-panel=weather] > .action-bar { display: grid !important; grid-template-columns: 52px 1fr; }
  .panel[data-panel=weather] > .action-bar .grow, .panel[data-panel=weather] > .action-bar .open-n { display: none; }
  .panel[data-panel=weather] > .action-bar .back-text { padding: 0; justify-content: center; background: var(--fill2) !important; }
  .panel[data-panel=weather] > .action-bar .back-text span { display: none; }
  .panel[data-panel=weather] > .action-bar .next-step { min-width: 0; width: 100%; }
}