/* Next — its own style sheet, over the suite's web kit (/suite/tokens.css and
   /suite/kit.css, linked before it): the kit draws the frame, sign-in,
   Settings and notices; what is here is Next's own: its dialogs, the step
   line, the board, the project view and the overview. No preprocessor and no
   build: native CSS variables and nothing else. */

:root {
  /* Brand. Next's colour is cyan (its icon); the accent the interface takes
     from it, and the neutrals with a touch of it, are the web kit's
     (tokens.css, by <html data-app="next">). The yolk is Cronum Studio's dot,
     "now": in Next it marks the next step and today, nothing else. */
  --now: var(--kit-now);

  --accent: var(--kit-accent);
  --accent-soft: var(--kit-accent-soft);
  --accent-text: var(--kit-on-accent);

  /* The colours of projects and branches (PROJECT_COLORS in util.js and
     store.js): each project's main line takes its own, and its other branches
     the rest, in the order they were opened. Away from the yolk and from the
     green, amber and red that say how long a branch has gone still, and dark
     enough to be read as text on white. */
  --hue-cyan: #0A7EA6;
  --hue-blue: #1f5fd6;
  --hue-violet: #6a52b8;
  --hue-plum: #8e3fa6;
  --hue-magenta: #b8457a;
  --hue-brown: #8a6a45;
  --hue-olive: #6e7a2a;
  --hue-slate: #4a5675;

  /* How long a branch has gone without moving. The same colours on the board,
     in the project view and in the overview. */
  --fresh: #2e9d62;
  --stalled: #d9870b;
  --stuck: #d1453b;
  --paused: #8a90a0;

  /* The kit's neutrals, with a touch of cyan in them. */
  --bg: var(--kit-bg);
  --panel: var(--kit-panel);
  --hover: var(--kit-hover);
  --text: var(--kit-text);
  --text-muted: var(--kit-muted);
  --border: var(--kit-border);
  --shadow: var(--kit-shadow);

  --radius: 10px;
  --topbar-height: 56px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* The dark theme hangs from `data-theme`, which is always "light" or "dark":
   theme.js resolves it before painting, and then the user's saved theme. */
:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  /* In the dark, lighter steps of the same hues; the accent and the
     neutrals change in the kit. */
  --hue-cyan: #5cc3e4;
  --hue-blue: #6f9ff7;
  --hue-violet: #a593ea;
  --hue-plum: #d08be6;
  --hue-magenta: #e8799f;
  --hue-brown: #c49a6c;
  --hue-olive: #a8b55a;
  --hue-slate: #9aa6c4;
  --fresh: #4cc184;
  --stalled: #f0a531;
  --stuck: #f06a60;
  --paused: #7d8394;
}

* { box-sizing: border-box; }
::selection { background: var(--accent); color: var(--accent-text); }

/* The hidden attribute wins over any display below: without this, a rule of
   our own with display beats the browser's and hiding doesn't hide. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* only the central area scrolls */
  overscroll-behavior: none;
}

body {
  font: var(--look-body, 15px)/1.45 var(--kit-font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --------------------------------- fields --------------------------------- */

.field { display: grid; gap: 5px; }
.field > span, .field > label { font-size: var(--look-footnote, 13px); color: var(--text-muted); }
.field > label { justify-self: start; cursor: pointer; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.field textarea { resize: vertical; min-height: 44px; line-height: 1.4; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--look-body, 14.5px);
}
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.field__hint { color: var(--text-muted); font-size: var(--look-footnote, 12.5px); margin: 0; }

/* -------------------------------- buttons -------------------------------- */

.btn {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: background .12s ease;
}
.btn:hover { background: var(--hover); }
/* A link that looks like a button (the way to the admin panel). */
a.btn { display: inline-block; text-decoration: none; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.btn--primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn--danger { background: var(--stuck); border-color: var(--stuck); color: #fff; font-weight: 600; }
.btn--danger:hover { filter: brightness(1.08); background: var(--stuck); }
.btn[disabled] { opacity: .55; cursor: default; }

.icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: var(--look-title3, 18px);
  text-decoration: none;
}
.icon-btn:hover { background: var(--hover); }

.link-btn {
  border: 0;
  background: none;
  padding: 4px 2px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }
.link-btn--danger { color: var(--stuck); }

.chip {
  flex: none;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font-size: var(--look-subhead, 13.5px);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--hover); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.status-chip {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--look-caption, 12px);
  font-weight: 600;
  background: var(--hover);
  color: var(--text-muted);
}
.status-chip--closed { text-decoration: line-through; }

.caption {
  font-size: var(--look-caption2, 11.5px);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ------------------------------- structure ------------------------------- */

/* The view beside the sidebar; on a phone it leaves room for the floating button. */
.main-area {
  container: next-main / inline-size;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 var(--look-gutter, 14px) calc(88px + var(--safe-bottom));
}
@container kit-app (min-width: 640px) {
  .main-area { padding: 0 var(--look-gutter, 24px) calc(32px + var(--safe-bottom)); }
}

/* The view's head (the kit's) reaches over the area's padding to its edges, as in every app, and
   is what keeps the room at the top: a sticky head would stop below a padding there, with the
   view showing above it. Within the view's width where the screen is wider than it. */
.main-area > section > .kit-head { margin: 0 -14px 12px; }
@container kit-app (min-width: 640px) {
  .main-area > section > .kit-head { margin: 0 -24px 14px; }
}

.loading { color: var(--text-muted); text-align: center; margin-top: 12vh; }

.empty {
  max-width: 460px;
  margin: 10vh auto 0;
  text-align: center;
  color: var(--text-muted);
}
.empty h2 { color: var(--text); font-size: var(--look-title1, 20px); margin: 0 0 8px; }
.empty p { margin: 0 0 18px; }
.empty__note { font-size: var(--look-footnote, 13.5px); margin-top: 18px !important; }
.empty--short { margin-top: 6vh; }

/* --------------------------------- board --------------------------------- */

.board, .overview, .project-view { max-width: 1100px; margin: 0 auto; }

.filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.project {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--look-r-lg, 14px);
  padding: var(--look-row-y, 10px) 12px var(--look-row-y, 8px);
  transition: opacity .15s ease;
}
/* What has been idle for a while is still there, but doesn't compete for attention. */
.project.is-dimmed { opacity: .6; }
.project.is-dimmed:hover, .project.is-dimmed:focus-within { opacity: 1; }

.project__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 4px;
}
.project__name {
  font-weight: 700;
  font-size: var(--look-headline, 16px);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
.project__name:hover { text-decoration: underline; }
.project__meta { margin-left: auto; font-size: var(--look-footnote, 12.5px); color: var(--text-muted); white-space: nowrap; }
.project__meta a { text-decoration: none; }
.project__meta a:hover { text-decoration: underline; }

/* -------------------------------- the line ------------------------------- */

/* The line and its cards slide sideways together (graph.js, slide()): the
   past is to the left. No bar: a finger or a trackpad slides it, and the
   mouse drags it. */
.graph {
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* At the start of the history, a trackpad swipe doesn't become "back". */
  overscroll-behavior-x: contain;
  /* What is left on the left fades out: there is more history, but what
     matters is on the right, next to the cards. */
  mask-image: linear-gradient(to right, transparent 0, #000 22px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
}
.graph::-webkit-scrollbar { display: none; }
.graph__strip {
  display: flex;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
}
.graph__line {
  display: flex;
  flex: 1 0 auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.graph.is-dragging, .graph.is-dragging .graph__line { cursor: grabbing; }
/* margin-left:auto: a short line sits next to the cards, not at the far left. */
.graph__svg { display: block; flex: none; margin-left: auto; overflow: visible; }

.graph__segment.is-abandoned { stroke-dasharray: 3 5; opacity: .55; }
/* How a line ends: a cross where a path was dropped, a flag where the project finished. */
.graph__end.is-abandoned { opacity: .55; }
.graph__dot { cursor: pointer; outline: none; }
.graph__dot:hover .graph__disc, .graph__dot:focus-visible .graph__disc {
  stroke: var(--text);
  stroke-width: 2;
}

/* As wide as they were beside the line: half the panel, or 340 px when there is room. */
.graph__cards { flex: none; width: max(150px, 52cqi); }
@container next-main (min-width: 730px) {
  .graph__cards { width: 340px; }
}
/* One slot per lane: thin when the lane has no card, as tall as the card when
   it has one. The line is drawn from these heights. */
.graph__slot { height: 30px; }
.graph__slot.has-card { height: auto; padding: 3px 0; }
/* With "how long ago" over the dots, lanes without a card make room for it. */
.graph.has-ages .graph__slot:not(.has-card) { height: 42px; }
.graph__age {
  font: 10.5px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  fill: var(--text-muted);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-height: 44px;
  padding: 5px 10px 6px 11px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--branch-color, var(--accent));
  border-radius: var(--look-r-md, 10px);
  background: color-mix(in srgb, var(--branch-color, var(--accent)) 7%, var(--panel));
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card:active { transform: scale(.99); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--look-caption, 11.5px);
  line-height: 1.3;
  color: var(--text-muted);
}
.card__branch {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--branch-color, var(--accent));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__when { flex: none; }
/* The yolk dot of the icon: what the card shows is the next step. */
.card__branch::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--now);
  vertical-align: 1px;
}
.card__text {
  font-weight: 600;
  font-size: var(--look-headline, 14px);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card__text.is-empty { font-weight: 400; font-style: italic; color: var(--text-muted); }

.card.is-stalled .card__when { color: var(--stalled); font-weight: 700; }
.card.is-stuck .card__when { color: var(--stuck); font-weight: 700; }
.card.is-stuck { border-color: color-mix(in srgb, var(--stuck) 45%, var(--border)); }

/* Someone is on this step (an assistant took it): a live dot and who. On a
   narrow card it goes to a line of its own rather than cutting both. */
.card.is-working .card__header { flex-wrap: wrap; row-gap: 1px; }
.card__working {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--accent);
}
.card__working::before,
.working-note::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
  animation: working-pulse 1.6s ease-in-out infinite;
}
.card.is-working { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
/* No news for a while: still there, greyed and still, until someone logs or frees it. */
.card__working.is-quiet,
.working-note.is-quiet { color: var(--text-muted); font-weight: 600; }
.card__working.is-quiet::before,
.working-note.is-quiet::before { background: var(--text-muted); animation: none; }
@keyframes working-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .card__working::before, .working-note::before { animation: none; }
}

/* --------------------------------- bubble -------------------------------- */

.bubble {
  position: fixed;
  z-index: 70;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--look-r-lg, 12px);
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: var(--look-callout, 14px);
  line-height: 1.4;
  animation: fade-in .12s ease;
}
.bubble p { margin: 6px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.bubble__header { display: flex; align-items: center; gap: 8px; font-size: var(--look-footnote, 13px); }
.bubble__branch { margin-left: auto; color: var(--text-muted); font-size: var(--look-caption, 12px); }
.bubble__mark { color: var(--text-muted); font-style: italic; font-size: var(--look-footnote, 13px); }
.bubble__title { font-weight: 600; }
/* What was done, cut after a few lines: the whole text is in the project's history. */
.bubble__done {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  font-size: var(--look-footnote, 13.5px);
}
.bubble__title + .bubble__done { margin-top: 2px; color: var(--text-muted); }

/* The pending step, with its detail, above the log form. */
.pending {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-left: 4px solid var(--now);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.pending p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--look-callout, 14px); }
.pending .pending__detail { color: var(--text-muted); font-size: var(--look-footnote, 13.5px); }

/* Editing a project: its colour (a ring marks the chosen one) and its emoji. */
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; max-width: 320px; }
.swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--look-subhead, 13.5px);
  cursor: pointer;
}
.swatch__dot { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--swatch); }
.swatch--auto { padding: 0 12px 0 6px; border-color: var(--border); }
.swatch--auto .swatch__dot { width: 18px; height: 18px; }
.swatch[aria-pressed="true"] { border-color: var(--swatch); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-field { display: grid; gap: 8px; }
.field .icon-input { width: 4.2em; font-size: var(--look-title2, 22px); line-height: 1.2; text-align: center; padding: 6px; }
.icon-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.icon-pick {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--look-r-sm, 8px);
  background: var(--panel);
  font-size: var(--look-title3, 18px);
  line-height: 1;
  cursor: pointer;
}
.icon-pick:hover { background: var(--hover); }
.icon-picks .link-btn { margin-left: 6px; }

/* Who is on the step, with the button to free it, above the pending step. */
.working-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--look-footnote, 13.5px);
  color: var(--accent);
}
.working-note[hidden] { display: none; }
.working-note::before { margin-right: 0; vertical-align: 0; }

.color-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ------------------------------ project view ----------------------------- */

/* The project's name, the way back and its buttons are in the view's head (the kit's). */
.project-view__meta { color: var(--text-muted); font-size: var(--look-subhead, 13px); margin: 0 0 12px; }

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--hover);
}
.segmented button {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: var(--look-footnote, 13.5px);
  cursor: pointer;
  color: var(--text-muted);
}
.segmented button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.section { margin-top: var(--look-section, 22px); }
.section > h2 {
  font-size: var(--look-footnote, 13px);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--look-r-lg, 14px);
  padding: 10px 12px;
}

.closed-branches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.closed-branch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hover);
  font-size: var(--look-footnote, 13px);
}

.day { margin-top: 14px; }
.day__title { font-size: var(--look-footnote, 12.5px); font-weight: 700; color: var(--text-muted); margin: 0 0 4px 4px; }

.entry {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 4px var(--look-row-gap, 10px);
  width: 100%;
  padding: var(--look-row-y, 9px) 10px;
  border: 0;
  border-radius: var(--look-r-md, 10px);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.entry:hover { background: var(--hover); }
.entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.entry .color-dot { margin-top: 6px; }
.entry__header { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: var(--look-footnote, 12.5px); color: var(--text-muted); }
.entry__branch { font-weight: 700; color: var(--branch-color, var(--accent)); }
.entry__mark { font-style: italic; }
.entry__title { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.entry__done, .entry__next { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.entry__next { color: var(--text-muted); }
.entry__next::before { content: "→ "; }
/* The summary hangs from the next step it explains, indented like its text. */
.entry__summary { margin: 1px 0 0 1.2em; font-size: var(--look-subhead, 13.5px); overflow-wrap: anywhere; }
.entry__body { min-width: 0; }
.entry__detail { margin-top: 4px; font-size: var(--look-subhead, 13.5px); color: var(--text-muted); }
.entry__detail summary { cursor: pointer; font-weight: 600; color: var(--branch-color, var(--accent)); }
.entry__detail p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* -------------------------------- overview ------------------------------- */

.overview__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.overview__bar .filters { margin: 0; }

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.stat { padding: 12px 14px; }
.stat strong { display: block; font-size: var(--look-title1, 26px); line-height: 1.1; }
.stat span { font-size: var(--look-footnote, 13px); color: var(--text-muted); }
.stat.is-alert strong { color: var(--stuck); }

.stuck-list { display: grid; gap: 8px; }
.stuck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: var(--look-row-y, 10px) 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--stalled);
  border-radius: var(--look-r-md, 10px);
  background: var(--panel);
  text-decoration: none;
}
.stuck.is-stuck { border-left-color: var(--stuck); }
.stuck:hover { box-shadow: var(--shadow); }
.stuck__where { font-size: var(--look-footnote, 13px); color: var(--text-muted); overflow-wrap: anywhere; }
.stuck__where strong { color: var(--text); }
.stuck__days { grid-row: span 2; align-self: center; font-weight: 700; color: var(--stalled); white-space: nowrap; font-size: var(--look-footnote, 13.5px); }
.stuck.is-stuck .stuck__days { color: var(--stuck); }
.stuck__next { font-weight: 600; overflow-wrap: anywhere; }
.stuck-list__none { color: var(--text-muted); margin: 0; }

.timeline { overflow: hidden; }
.timeline svg { display: block; width: 100%; height: auto; overflow: visible; }
.timeline__axis { font-size: var(--look-caption2, 11px); fill: var(--text-muted); }
.timeline__grid { stroke: var(--border); stroke-width: 1; }
/* Today, in the yolk of "now": solid, so it never reads as one of the dotted waits. */
.timeline__today { stroke: var(--now); stroke-width: 2; }
.timeline__name { font-size: var(--look-caption, 12.5px); font-weight: 700; fill: var(--text); }
.timeline__name.is-paused { fill: var(--text-muted); font-weight: 600; }
.timeline__wait { stroke-width: 3; stroke-dasharray: 2 4; stroke-linecap: round; }
.timeline a { cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--look-footnote, 12.5px); color: var(--text-muted); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 3px dotted currentColor; }

/* -------------------------------- notices -------------------------------- */

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------- dialogs -------------------------------- */

.dialog {
  width: min(94vw, 480px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--look-r-xl, 16px);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
/* A column: the header (and Settings' tabs) stay, and only the body scrolls,
   whatever sits above it. */
.dialog[open] { display: flex; flex-direction: column; }
.dialog__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 10px 10px 20px;
  border-bottom: 1px solid var(--border);
}
.dialog__header h2 { margin: 6px 0 0; font-size: var(--look-title2, 17px); }
.dialog__subtitle { margin: 2px 0 0; font-size: var(--look-subhead, 13px); color: var(--text-muted); overflow-wrap: anywhere; }
.dialog__body { padding: 16px 20px; overflow-y: auto; }
.dialog__text { margin: 0; white-space: pre-line; }
.dialog__error { margin: 12px 0 0; color: var(--stuck); font-size: var(--look-subhead, 14px); }
.dialog__extra { padding: 0 20px 10px; }
.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--border);
}

/* On the phone the dialog slides up from the bottom: it stays within thumb
   reach and the keyboard doesn't cover it. */
@media (max-width: 560px) {
  .dialog {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    border-radius: var(--look-r-xl, 18px) var(--look-r-xl, 18px) 0 0;
    animation: slide-up .18s ease;
  }
}
@keyframes slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.stack { display: grid; gap: 14px; }
.branch-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* --------------------------------- the card -------------------------------- */

/* A branch's card, opened: it reads as the card it comes from (the branch's
   colour down its left edge) and not as a form. The fields only appear under
   the way the step ends, once one is chosen. */
.dialog__tools { display: flex; align-items: center; flex: none; }
.icon-btn .kit-icon { width: 19px; height: 19px; }
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.step-card .dialog__header { align-items: center; padding: 8px 10px 8px 20px; }
.step-card__where {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--look-footnote, 13.5px);
  color: var(--text-muted);
}
.step-card__names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.step-card__when { flex: none; }
.step-card__when::before { content: '·'; margin-right: 8px; }
.step-card__step {
  display: grid;
  gap: 8px;
  padding: 2px 0 2px 14px;
  border-left: 4px solid var(--branch-color, var(--accent));
}
.step-card__title { margin: 0; font-size: var(--look-title2, 19px); line-height: 1.3; overflow-wrap: anywhere; }
.step-card__title.is-empty { font-weight: 400; font-style: italic; color: var(--text-muted); }
.step-card__summary { margin: 0; font-size: var(--look-callout, 15px); line-height: 1.5; overflow-wrap: anywhere; }
.step-card__detail summary { cursor: pointer; color: var(--accent); font-size: var(--look-subhead, 14px); font-weight: 600; }
.step-card__detail p {
  margin: 8px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: var(--look-callout, 14px);
  line-height: 1.5;
  color: var(--text-muted);
}
.step-card__step .link-btn { justify-self: start; padding-left: 0; }
/* In Cronum Work: when something linked with the pending step is done, the card says so. */
.step-card__hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 8px 12px;
  border-radius: var(--look-r-md, 10px); background: var(--kit-accent-soft); font-size: var(--look-subhead, 14px);
}
.step-card__hint[hidden] { display: none; }
.step-card__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.step-card__way {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--look-subhead, 14.5px);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.step-card__way:hover { background: var(--hover); }
.step-card__way:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-card__way span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-card__way[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.step-card__way.is-discard[aria-pressed="true"] {
  border-color: var(--stuck);
  background: color-mix(in srgb, var(--stuck) 10%, var(--panel));
  color: var(--stuck);
}
.step-card .kit-icon .is-filled { fill: currentColor; }
.step-card__panel { padding-top: 14px; border-top: 1px solid var(--border); }
/* What the dot will say, when the step was done as it was written. */
.step-card__dot { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--look-callout, 14px); line-height: 1.45; }
.step-card__dot .kit-icon { margin-top: 1px; color: var(--fresh); }
.step-card__dot .link-btn { padding: 0; }

code, .code {
  font-family: var(--kit-font-mono);
  font-size: var(--look-footnote, 12.5px);
  word-break: break-all;
  user-select: all;
}

/* --------------------------------- Clean --------------------------------- */

/* The Clean look (data-look="clean", the kit's): Next's own radius, the view's
   head reaching over the wider gutter at every width, the section labels as
   the other apps' and the dialog's buttons wrapping before they overflow a
   phone with the bigger text. */
:root[data-look="clean"] { --radius: var(--look-r-md, 10px); }
:root[data-look="clean"] .main-area > section > .kit-head { margin-inline: calc(-1 * var(--look-gutter, 14px)); }
:root[data-look="clean"] .section > h2 { font-weight: 600; letter-spacing: .02em; }
:root[data-look="clean"] .dialog__actions { flex-wrap: wrap; }
/* A quiet sidebar, the same in every module: 16px entries, the open one in its colour without going bold. */
:root[data-look="clean"] .kit-nav__item { min-height: 40px; padding-block: 8px; font-size: var(--look-callout, 15px); }
:root[data-look="clean"] .kit-nav__item[aria-current="page"] { font-weight: 500; }