/*
 * Widget chrome: header, toolbar, body, tab strip, and the connection dots.
 * Widget-internal content styling lives in primitives.css, never here.
 */

.widget {
  position: relative;             /* the accent ring is drawn over the header, see below */
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  min-width: 0;
  background: var(--bg-2);
  border: var(--hairline) solid var(--line);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
  );
}

.widget-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--header-h);
  padding: 0 var(--sp-2);
  background: var(--bg-3);
  border-bottom: var(--hairline) solid var(--line);
  user-select: none;
}

.widget-title {
  color: var(--orange);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The totals beside the title ("12 kills · 1.2M cr") are set in the title's own type:
   the same face, size and weight, so a header reads as one line rather than a heading
   with a label stuck to it. The pill stays so the figure is still told from the name. */
.widget-badge {
  min-width: 1.4em;
  padding: 0 0.4em;
  border-radius: var(--radius-sm);
  background: var(--orange-dim);
  color: var(--bg-0);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* Per-widget size (backlog F1). In edit mode only: the size is set once, and nineteen
   permanent `− A +` controls would be nineteen more things competing with the data. A
   widget drawn at other than the surface size says so in its header at all times, so a
   large Targeted on a tablet is never mistaken for the text slider having moved. */
.widget-scale {
  display: none;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
body.is-editing .widget-scale { display: inline-flex; }
.widget-scale .scale-btn {
  min-width: 1.6em;
  padding: 0 0.3em;
  background: var(--bg-2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.3;
  cursor: pointer;
}
.widget-scale .scale-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.widget-scale .scale-btn:disabled { opacity: 0.35; cursor: default; }
.widget-scale .scale-value {
  min-width: 3.2em;
  color: var(--text-dim);
  font-family: var(--ff-mono);
  font-size: var(--fs-xxs);
  text-align: center;
}
.widget.is-scaled .widget-scale { display: inline-flex; }
.widget.is-scaled .widget-scale .scale-btn { display: none; }
body.is-editing .widget.is-scaled .widget-scale .scale-btn { display: inline-block; }
.widget.is-scaled .scale-value { color: var(--amber); }
@media (pointer: coarse) {
  .widget-scale .scale-btn { min-width: 2.2em; line-height: 1.8; }
}

/* Live ship state for the widget's subject (combat, trade, mining), drawn by the chrome. */
.widget-chips { display: inline-flex; gap: 3px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.widget-chips:empty { display: none; }
.widget-chips .tag { margin-left: 0; }

.widget-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.widget-body {
  min-height: 0;
  min-width: 0;
  overflow: auto;                /* the only scroll container in the app */
  padding: var(--sp-2);
}

.widget.is-empty .widget-body { opacity: 0.45; }

/* Collapsed: header only, body removed from the grid. The owning stack re-sizes its
   row to `auto` when it sees the kt:collapse event. */
.widget.is-collapsed { grid-template-rows: auto; }
.widget.is-collapsed .widget-body { display: none; }

.widget-header .collapse {
  padding: 0 var(--sp-1);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-fast);
}
.widget-header .collapse:hover { color: var(--orange); }
.widget.is-collapsed .widget-header .collapse { transform: rotate(-90deg); }

/* A cell holding nothing. Visible, so a layout with a hole in it looks like a layout
   with a hole in it, and reachable, so edit mode can fill it. */
.cell-empty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: var(--bg-1);
  border: var(--hairline) dashed var(--line-strong);
  color: var(--text-faint);
  text-align: center;
}
.cell-empty-title {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cell-empty-hint { font-size: var(--fs-xs); }
body.is-editing .cell-empty {
  border-color: var(--orange-dim);
  color: var(--orange);
  cursor: pointer;
}
body.is-editing .cell-empty:hover { border-color: var(--orange); box-shadow: var(--glow); }

/* Placeholder body: what a catalog id renders before its increment lands. */
.placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-faint);
  font-family: var(--ff-mono);
  text-align: center;
}
.placeholder-id     { color: var(--text-dim); font-size: var(--fs-md); }
.placeholder-due    { color: var(--orange-dim); font-size: var(--fs-xs); letter-spacing: 0.1em; }
.placeholder-topics { font-size: var(--fs-xxs); }

/* The panel the pointer is in gets the one-pixel accent the HUD uses to say "here".
 *
 * Drawn on a pseudo-element above the widget's own children, not as an inset shadow on
 * the widget: the header paints its own background over the panel's top edge, so an
 * inset ring came out three-sided. A chamfered element also clips whatever it paints
 * outside its shape, which is why this is not an outer glow either. */
.widget::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: var(--hairline) solid transparent;
  transition: border-color var(--t-fast);
}
.widget:focus-within::after,
.widget:hover::after { border-color: var(--orange-dim); }

/* Long enough to read as an event landing rather than as a flicker. The setting
   (`data-pulse` on the root) picks how loud: subtle by default, a dim edge and no glow;
   bold, the bright edge and inner glow; off, nothing. */
.widget.pulse::after { animation: kt-pulse-subtle var(--t-pulse) ease-out; }
:root[data-pulse="bold"] .widget.pulse::after { animation-name: kt-pulse; }
:root[data-pulse="off"] .widget.pulse::after { animation: none; }
@keyframes kt-pulse-subtle {
  from { border-color: var(--orange-dim); }
  to   { border-color: transparent; }
}
@keyframes kt-pulse {
  from { border-color: var(--orange); box-shadow: inset 0 0 0.9rem rgba(255, 113, 0, .45); }
  to   { border-color: transparent; box-shadow: inset 0 0 0.9rem rgba(255, 113, 0, 0); }
}

/* ---- Tab strip (columns in `tabs` mode) ----
 * The phone preset puts the whole catalog in one strip, so the strip scrolls sideways
 * rather than wrapping: wrapping would steal rows from the only widget on screen.
 *
 * Tabs are cut on their trailing edge, which is what makes a row of them read as the
 * angled zone selector in the game rather than as browser tabs.
 */
.tabstrip {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background: var(--bg-1);
  border-bottom: var(--hairline) solid var(--line);
}

.tab {
  flex: 0 0 auto;
  padding: var(--sp-1) calc(var(--sp-3) + var(--tab-slant)) var(--sp-1) var(--sp-3);
  background: var(--bg-2);
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-family: var(--ff-display);
  /* Rajdhani reads a step larger than the UI face at the same size, so the strip stays
     on the small step: four tabs have to fit a 460px column without scrolling. */
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
}

.tab[aria-selected="true"] {
  background: var(--bg-3);
  color: var(--orange);
  box-shadow: inset 0 -2px 0 var(--orange);
}

.tab-title { pointer-events: none; }

.tab-badge {
  margin-left: var(--sp-1);
  padding: 0 0.3em;
  border-radius: var(--radius-sm);
  background: var(--orange-dim);
  color: var(--bg-0);
  font-size: var(--fs-xxs);
}

/* A hidden tab whose topic changed since it was last seen. */
.tab.has-update .tab-title::after {
  content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-left: 0.35em;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: middle;
}

/* ---- Header controls (layout/picker.js) ---- */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-controls::-webkit-scrollbar { display: none; }
.header-controls > * { flex: 0 0 auto; }

.ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.ctl-label {
  color: var(--text-faint);
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ctl-value {
  min-width: 2.6em;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-family: var(--ff-mono);
}

.select, .input {
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.select:focus-visible, .input:focus-visible {
  outline: var(--hairline) solid var(--orange);
  outline-offset: 1px;
}

.range { accent-color: var(--orange); width: 96px; }   /* px: see #dash-header */

.check { accent-color: var(--orange); margin: 0; }
.ctl-check { cursor: pointer; }
.ctl-check .ctl-label { cursor: pointer; }

/* ---- Buttons ---- */
.btn {
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--t-fast);
}
a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn:hover  { background: var(--bg-hover); }
.btn:active { background: var(--orange-dim); }

/* ---- Connection dots ---- */
.dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--text-faint);
  vertical-align: middle;
}
.dot.on   { background: var(--ok); box-shadow: 0 0 0.35rem var(--ok); }
.dot.idle { background: var(--warn); }
.dot.off  { background: var(--bad); }

/* The plugin light explains itself: hover or focus on desktop, a tap on a tablet (which
   toggles .is-open). What it says follows the light (app.js, pluginHelp). The panel is
   fixed to the window, placed under the light as it opens (--help-x, --help-y): the
   header clips its own contents, so a panel positioned inside it was cut off at its
   bottom edge, under the widgets. */
.dot-help-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  cursor: help;
}
.dot-help {
  display: none;
  position: fixed;
  top: var(--help-y, 2.5rem);
  left: var(--help-x, 1rem);
  z-index: 110;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - var(--help-y, 2.5rem) - 1rem);
  overflow-y: auto;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .6);
  padding: var(--sp-3);
  background: var(--bg-3);
  border: var(--hairline) solid var(--line-strong);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
  cursor: auto;
  white-space: normal;
}
.dot-help-anchor:hover .dot-help,
.dot-help-anchor:focus-within .dot-help,
.dot-help-anchor.is-open .dot-help { display: block; }
.dot-help b { color: var(--orange); font-weight: 600; }
.dot-help .help-state { margin: 0 0 var(--sp-2); }
.dot-help ol { margin: 0; padding-left: 1.2rem; }
.dot-help li { margin: 0 0 var(--sp-1); }
.dot-help .help-foot { margin: var(--sp-2) 0 0; color: var(--text-dim); }

.dot-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

/* ---- Dev drawer (dev/panel.js) ---- */
#dev-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(34rem, 100vw);
  max-height: 55dvh;
  background: var(--bg-1);
  border: var(--hairline) solid var(--line-strong);
  box-shadow: var(--shadow);
  font-size: var(--fs-xs);
}

#dev-panel .dev-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;               /* the replay controls need a row of their own on a tablet */
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-3);
  border-bottom: var(--hairline) solid var(--line);
}

/* Fixture replay: one group, so it wraps as a unit rather than shedding its button. */
#dev-panel .dev-replay {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border-left: var(--hairline) solid var(--line-strong);
  border-right: var(--hairline) solid var(--line-strong);
}
#dev-panel .dev-replay .select { max-width: 12rem; }

/* Where the topics come from (S7). Grouped like the replay controls so it wraps whole. */
#dev-panel .dev-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border-left: var(--hairline) solid var(--line-strong);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
#dev-panel .dev-toggle:hover { color: var(--text); }

/* The answer to "which implementation produced these numbers", beside the numbers. */
#dev-panel [data-slot="source"] {
  color: var(--text-faint);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  text-transform: none;
}

#dev-panel .dev-title {
  color: var(--orange);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
}

#dev-panel .spacer { flex: 1 1 auto; }

#dev-panel .dev-body {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--sp-2);
  min-height: 0;
  padding: var(--sp-2);
  overflow: hidden;
}

#dev-panel h4 {
  margin: 0 0 var(--sp-1);
  color: var(--text-dim);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

#dev-panel section { min-height: 0; overflow: auto; }

#dev-panel .dev-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  color: var(--text);
  font-family: var(--ff-mono);
}
#dev-panel .dev-row em { color: var(--text-faint); font-style: normal; }
/* A row whose value is a sentence or a file list rather than a count: the two halves
   need a gap they cannot close, and the value wraps under itself instead of shoving the
   label. */
#dev-panel .dev-row { gap: var(--sp-3); }
#dev-panel .dev-row > span:first-child { flex: 0 0 auto; }
#dev-panel .dev-row > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

#dev-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ff-mono);
}
#dev-panel ol li {
  display: flex;
  gap: var(--sp-2);
  padding: 1px 0;
  border-bottom: var(--hairline) solid var(--bg-3);
}
#dev-panel .seq  { color: var(--text-faint); min-width: 3em; text-align: right; }
#dev-panel .name { color: var(--amber); min-width: 12em; }
#dev-panel .ts   { color: var(--text-dim); }

/* ---- Touch chrome ----
 * A finger is not a mouse pointer: targets grow, hover-only affordances stop pretending
 * to be interactive, and the tab strip gets momentum scrolling so a long strip can be
 * flicked through rather than dragged pixel by pixel.
 */
@media (pointer: coarse) {
  .tab {
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-md);
  }
  .tabstrip {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .tab { scroll-snap-align: start; }

  .btn, .select {
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
  }

  /* The collapse chevron is the one control inside a widget header, so it needs to be
     hittable without catching the title next to it. */
  .widget-header .collapse {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    font-size: var(--fs-md);
  }

  /* Row hover means nothing on a touch screen and just flickers as you scroll. */
  .kt-table tbody tr:hover { background: none; }

  .kt-table td, .kt-table th { padding: var(--sp-2); }
}

/* ---- Edit mode and the widget picker ---- */
body.is-editing .widget {
  cursor: pointer;
  border-color: var(--orange-dim);
}
body.is-editing .widget:hover,
body.is-editing .widget:focus-within {
  border-color: var(--orange);
  box-shadow: var(--glow);
}
/* While editing, the body is a target, not a view: it must not swallow the tap. */
body.is-editing .widget-body { pointer-events: none; }
body.is-editing .widget-header::after {
  content: 'change';
  margin-left: auto;
  color: var(--orange);
  font-size: var(--fs-xxs);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.kt-picker {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, .72);
}

.kt-picker .picker-panel {
  width: min(46rem, 100%);
  max-height: 80dvh;
  overflow: auto;
  padding: var(--sp-3);
  background: var(--bg-2);
  border: var(--hairline) solid var(--line-strong);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}

.kt-picker header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--orange);
  font-family: var(--ff-display, inherit);
  font-size: var(--fs-md);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kt-picker .picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-2);
}

.picker-item {
  min-height: var(--touch-min);
  padding: var(--sp-2);
  background: var(--bg-3);
  border: var(--hairline) solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.picker-item:hover { border-color: var(--orange); background: var(--bg-hover); }

/* The widget catalog: cards filed by category, each a picture, a name and a line. */
.kt-picker .picker-panel.is-catalog {
  display: flex;
  flex-direction: column;
  width: min(68rem, 100%);
  height: min(52rem, 88dvh);
  overflow: hidden;
}
.picker-panel.is-catalog header { flex-wrap: wrap; }
.picker-search { flex: 1 1 12rem; max-width: 22rem; margin-left: auto; font-family: var(--ff-ui); }
.picker-panel.is-catalog .picker-body { flex: 1; min-height: 0; overflow: auto; padding-right: var(--sp-1); }
.picker-panel.is-catalog .kt-note { margin: var(--sp-2) 0 0; }
.picker-group + .picker-group { margin-top: var(--sp-4); }
.picker-group[hidden] { display: none; }
.picker-group-title {
  margin: 0 0 var(--sp-2);
  color: var(--text-dim);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.picker-panel.is-catalog .picker-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.picker-panel.is-catalog .picker-item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--sp-1);
  align-content: start;
}
.picker-panel.is-catalog .picker-item[hidden] { display: none; }
.picker-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  margin-bottom: var(--sp-1);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 113, 0, .05) 6px 7px),
    var(--bg-1);
  border: var(--hairline) solid var(--line);
}
.picker-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.picker-thumb-fallback {
  color: var(--text-faint);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.picker-name {
  color: var(--orange);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .03em;
}
.picker-name .tag { vertical-align: middle; }
.picker-blurb { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.35; }
.picker-panel.is-catalog .picker-item:hover .picker-thumb { border-color: var(--orange-dim); }
.picker-panel.is-catalog .picker-item.is-current .picker-thumb { border-color: var(--orange); }

@media (max-width: 600px) {
  .picker-panel.is-catalog .picker-grid { grid-template-columns: 1fr; }
  .picker-panel.is-catalog .picker-item { grid-template-columns: 7rem 1fr; grid-template-rows: auto 1fr; column-gap: var(--sp-2); }
  .picker-panel.is-catalog .picker-thumb { grid-row: span 2; margin-bottom: 0; }
  .picker-search { max-width: none; order: 3; flex-basis: 100%; }
}

/* ---- Session sheet ---- */
.session-list { display: grid; gap: var(--sp-2); }
.session-item {
  display: grid;
  gap: 0.15rem;
  padding: var(--sp-2);
  min-height: var(--touch-min);
  background: var(--bg-3);
  border: var(--hairline) solid var(--line);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.session-item:hover { border-color: var(--orange); background: var(--bg-hover); }
.session-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.session-item.is-armed { border-color: var(--bad); background: rgba(255, 0, 0, .10); }
.session-label {
  color: var(--orange);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  letter-spacing: .03em;
}
.session-item.is-armed .session-label { color: var(--bad); }
.session-detail { color: var(--text-dim); font-size: var(--fs-xs); }
.picker-item.is-current { border-color: var(--orange); color: var(--orange); }
.picker-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
 * Settings sheet (backlog F7). Sized in px, like the header: the text-size slider lives
 * here, and a panel sized in rem would re-lay itself out on every frame of the drag and
 * move the slider out from under the finger holding it.
 * ------------------------------------------------------------------------ */
.kt-settings .settings-panel {
  --fs-xxs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --touch-min: 36px;
  width: min(760px, 100%);
  /* A fixed height, not a max: sized to its content, the panel was a different height on
     every tab, and centred in the window that moved the tab strip — the thing being
     clicked — every time a tab was chosen. Now only the pane scrolls. */
  height: min(88dvh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  padding: 12px;
}
.kt-settings header { flex-wrap: wrap; flex: 0 0 auto; }
.kt-settings .settings-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;   /* a scrollbar appearing on a long pane must not shift it */
  padding-right: 4px;
}
.kt-settings header .kt-segment { margin-right: auto; margin-left: var(--sp-3); }
.kt-settings section { display: grid; gap: var(--sp-3); }
.kt-settings section[hidden] { display: none; }

.settings-lede { margin: 0; color: var(--text); font-size: var(--fs-md); }
.settings-lede b { color: var(--orange); font-weight: var(--fw-bold); }
.settings-lede .dim, .kt-settings .dim { color: var(--text-dim); }
.settings-help { margin: 0; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.45; }
.settings-head {
  margin: var(--sp-2) 0 0;
  padding-bottom: var(--sp-1);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--orange);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.settings-row .input[type="text"] { flex: 1 1 14em; min-width: 0; }
.settings-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label control" "detail control";
  align-items: center;
  column-gap: var(--sp-3);
  padding: var(--sp-1) 0;
}
.settings-field > .settings-label  { grid-area: label; }
.settings-field > .settings-detail { grid-area: detail; }
.settings-field > .input,
.settings-field > .settings-row    { grid-area: control; justify-content: flex-end; }
.settings-field.settings-check {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "control label" "control detail";
}
.settings-field.settings-check > .check { grid-area: control; }
.settings-label { color: var(--text); font-size: var(--fs-sm); }
.settings-detail { color: var(--text-dim); font-size: var(--fs-xs); }
.settings-unit { min-width: 2em; color: var(--text-dim); font-size: var(--fs-xs); }
/* Fixed width, so every number box lines up whatever its default reads. */
.settings-default { min-width: 9em; text-align: left; font-size: var(--fs-xxs); }
.settings-number .input { width: 9em; text-align: right; font-family: var(--ff-mono); }
.settings-field.is-changed .settings-label { color: var(--amber); }
.settings-field .input.is-invalid { border-color: var(--bad); }
.settings-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.settings-group:disabled { opacity: .45; }
.settings-group:disabled .settings-field { pointer-events: none; }
.settings-message { font-size: var(--fs-xs); }
.settings-message.good { color: var(--ok); }
.settings-message.bad  { color: var(--bad); }
.settings-text {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
}
.settings-layouts td { vertical-align: middle; }
.settings-layouts .input { width: 100%; max-width: 16em; box-sizing: border-box; }
.settings-layouts tr.is-current td:first-child { box-shadow: inset 2px 0 0 var(--orange); }
.settings-actions { text-align: right; white-space: nowrap; }
.settings-actions .btn + .btn { margin-left: var(--sp-1); }
.btn.btn-danger:hover, .btn.is-armed { border-color: var(--bad); color: var(--bad); }

@media (max-width: 560px) {
  .settings-field { grid-template-columns: 1fr; grid-template-areas: "label" "detail" "control"; }
  .settings-field > .input, .settings-field > .settings-row { justify-content: flex-start; }
  .settings-layouts th:nth-child(2), .settings-layouts td:nth-child(2) { display: none; }
}

/* ---- Voice (VOICE_PLAN.md §5, §6) ---- */
/* The caption: what is being said, coloured by how it is meant. Fixed under the header so it
   never moves the layout, and in px like the header, so the text slider leaves it alone. */
.voice-caption {
  position: fixed;
  top: 44px;
  left: 50%;
  z-index: 90;
  max-width: min(640px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--bg-2);
  border: var(--hairline) solid var(--line-strong);
  border-left: 3px solid var(--text-dim);
  color: var(--text);
  font-family: var(--ff-ui);
  font-size: 13px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.voice-caption[hidden] { display: none; }
.voice-caption.is-upbeat { border-left-color: var(--ok); }
.voice-caption.is-alert  { border-left-color: var(--amber); }
.voice-caption.is-urgent { border-left-color: var(--bad); color: var(--text); font-weight: var(--fw-bold); }

.settings-inline { display: inline-flex; align-items: center; gap: var(--sp-1); margin-right: var(--sp-3);
                   color: var(--text); font-size: var(--fs-sm); }
/* Fixed columns, so the emotion tags line up from one category's table to the next. */
.settings-voice-events { table-layout: fixed; width: 100%; }
.settings-voice-events td { vertical-align: middle; }
.settings-voice-events th:nth-child(2), .settings-voice-events td:nth-child(2) { width: 86px; }
.settings-voice-events th:nth-child(3), .settings-voice-events td:nth-child(3) { width: 64px; }
.voice-emotion.is-calm   { color: var(--text-dim); }
.voice-emotion.is-upbeat { color: var(--ok); }
.voice-emotion.is-alert  { color: var(--amber); }
.voice-emotion.is-urgent { color: var(--bad); }

/* ---- The legend and its first-run bar (backlog F5) ---- */
.kt-hint {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-3);
  border-bottom: var(--hairline) solid var(--orange-dim);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.kt-hint-text { flex: 1 1 24rem; min-width: 0; }
.kt-hint-text b { color: var(--text); font-weight: var(--fw-normal); }
.kt-hint .btn { font-size: var(--fs-sm); padding: 0.15rem var(--sp-2); }

/* A past day shown instead of the live session (backlog F16): the same bar, amber. */
.kt-viewing { border-bottom-color: var(--amber); }
.kt-viewing-eyebrow { color: var(--amber); font-size: var(--fs-xxs); letter-spacing: 0.1em; text-transform: uppercase; margin-right: var(--sp-2); }
.kt-viewing-detail { color: var(--text-dim); }
.kt-viewing-note { display: block; color: var(--text-faint); font-size: var(--fs-xxs); }
.settings-days { display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; margin-top: var(--sp-2); }
.settings-day {
  display: grid; grid-template-columns: 11em 1fr auto auto; gap: var(--sp-1) var(--sp-3); align-items: center;
  padding: var(--sp-1) var(--sp-2); border: var(--hairline) solid var(--line); background: var(--bg-2);
}
.settings-day.is-shown { border-color: var(--amber); }
.settings-day-name { color: var(--text); font-family: var(--ff-display); font-weight: var(--fw-bold); }
.settings-day-line { color: var(--text-dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-day-state { color: var(--text-faint); font-size: var(--fs-xxs); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.settings-day .btn { font-size: var(--fs-xs); padding: 0.15rem var(--sp-2); }
@container (max-width: 40rem) { .settings-day { grid-template-columns: 1fr auto; } .settings-day-line { grid-column: 1 / -1; } }

.kt-howto .legend-panel { max-width: 44rem; }
.legend-list { display: grid; gap: var(--sp-2); }
.legend-item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  row-gap: 0.15rem;
  padding: var(--sp-2);
  background: var(--bg-3);
  border: var(--hairline) solid var(--line);
}
.legend-art { grid-row: span 2; display: flex; align-items: center; justify-content: center; min-height: 3rem; }
.legend-title { color: var(--orange); font-family: var(--ff-display); font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: 0.03em; }
.legend-text { color: var(--text); font-size: var(--fs-sm); line-height: 1.4; }
@media (max-width: 600px) {
  .legend-item { grid-template-columns: 1fr; }
  .legend-art { grid-row: auto; justify-content: flex-start; min-height: 0; }
}
/* The drawings: the real chrome's shapes at a glance, not screenshots. */
.legend-tabstrip { display: inline-flex; gap: 2px; }
.legend-tab {
  position: relative; padding: 0.2em 0.6em;
  background: var(--bg-2); border: var(--hairline) solid var(--line);
  color: var(--text-dim); font-family: var(--ff-display); font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase;
}
.legend-tab.is-on { color: var(--orange); border-color: var(--orange-dim); }
.legend-tab i { position: absolute; top: 0.2em; right: 0.2em; width: 0.35em; height: 0.35em; border-radius: 50%; background: var(--orange); }
.legend-cells { display: inline-flex; align-items: stretch; width: 8rem; height: 2.6rem; }
.legend-cells > span { flex: 1; display: grid; place-items: center; background: var(--bg-2); border: var(--hairline) solid var(--line); color: var(--text-faint); font-size: var(--fs-xxs); letter-spacing: 0.06em; text-transform: uppercase; }
.legend-cells > .legend-gutter { flex: 0 0 var(--gutter); background: transparent; border: 0; position: relative; }
.legend-cells > .legend-gutter::before { content: ''; position: absolute; inset: 0 auto 0 50%; width: 2px; background: var(--orange); box-shadow: var(--glow); }
.legend-cells > .legend-held { border-color: var(--orange); color: var(--orange); }
.legend-cells > .legend-target { border-style: dashed; border-color: var(--orange-dim); color: var(--text-dim); }
.legend-cells > .legend-empty { border-style: dashed; }
.legend-btns { display: inline-flex; gap: var(--sp-1); }
.legend-btns .btn { font-size: var(--fs-xs); padding: 0.15rem var(--sp-2); pointer-events: none; }

/* ---- The SRV strip: the buggy's tank while driving --------------------------------------
   Above the widgets in every layout. The level comes from the status topic (srv.level):
   ok, then low at 20 percent (amber, slow flash), critical at 10, severe at 5 and empty at
   1 (red, each flashing faster). */
.srv-strip {
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-3);
  border-bottom: var(--hairline) solid var(--line-strong);
  border-left: 0.3rem solid var(--orange);
  font-family: var(--ff-display);
  --srv-tone: var(--orange);
}
.srv-strip .srv-name { color: var(--amber); font-size: var(--fs-lg); font-weight: var(--fw-bold);
                       text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.srv-strip .srv-gauge { flex: 1 1 12rem; height: 1.2rem; }
.srv-strip .srv-gauge > span { background: var(--srv-tone); transition: width var(--t-slow); }
.srv-strip .srv-pct { color: var(--srv-tone); font-size: var(--fs-xxl); font-weight: var(--fw-bold);
                      min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.srv-strip .srv-detail { color: var(--text-dim); font-size: var(--fs-md); white-space: nowrap; }
.srv-strip.is-away { opacity: 0.75; }
.srv-strip .srv-cargo { display: inline-flex; align-items: center; gap: var(--sp-2);
                        padding-left: var(--sp-4); border-left: var(--hairline) solid var(--line-strong); }
.srv-strip .srv-cargo-label { color: var(--text-faint); font-size: var(--fs-sm); text-transform: uppercase;
                              letter-spacing: 0.08em; }
.srv-strip .srv-cargo-gauge { width: 7rem; height: 0.8rem; }
.srv-strip .srv-cargo-gauge > span { background: var(--info); transition: width var(--t-slow); }
.srv-strip .srv-cargo-text { color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-bold);
                             white-space: nowrap; font-variant-numeric: tabular-nums; }
.srv-strip .srv-cargo.is-full .srv-cargo-gauge > span { background: var(--amber); }
.srv-strip .srv-cargo.is-full .srv-cargo-text { color: var(--amber); }
.srv-strip[data-level="low"] { --srv-tone: var(--amber); border-left-color: var(--amber);
                               animation: srv-flash 1.6s ease-in-out infinite; }
.srv-strip[data-level="critical"],
.srv-strip[data-level="severe"],
.srv-strip[data-level="empty"] { --srv-tone: var(--bad); border-left-color: var(--bad);
                                 background: color-mix(in srgb, var(--bad) 14%, var(--bg-3)); }
.srv-strip[data-level="critical"] { animation: srv-flash 0.9s ease-in-out infinite; }
.srv-strip[data-level="severe"]   { animation: srv-flash 0.6s ease-in-out infinite; }
.srv-strip[data-level="empty"]    { animation: srv-flash 0.35s steps(2, jump-none) infinite; }
@keyframes srv-flash {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50%      { box-shadow: inset 0 0 0 0.2rem var(--srv-tone); }
}
@media (prefers-reduced-motion: reduce) { .srv-strip { animation: none !important; } }

/* ---- Connect: the install steps under the plugin download ---- */
.settings-steps { margin: var(--sp-1) 0 0; padding-left: 1.4em; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.5; }
.settings-steps b { color: var(--text); font-weight: var(--fw-bold); }
.settings-steps code { font-family: var(--ff-mono); color: var(--text); }