@font-face {
  font-family: 'Alagard';
  src: url('/admin/assets/fonts/alagard.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
}

:root {
  --lp-amber: var(--organ-horos, #ffb02e);
  --lp-paper: #efe8dc;
  --lp-paper-dim: #b9ae9e;
  --lp-night: #100e0c;
  --lp-panel: #191512;
  --lp-panel-hi: #211c18;
  --lp-rule: #3a3029;
  --lp-rule-soft: #29221d;
  --lp-lane: 64px;
  /* The band belongs to I.A.O., so it wears the astro organ's accent and never HOROS amber.
     The literal fallback is deliberate: this shell does not load brand/tokens.css, which is how
     var(--organ-horos) once resolved to near-black on this very surface. */
  --lp-iao: var(--organ-astro, #8257ff);
  /* The identity colour above is for MARKS and outlines. Band TEXT uses this lift of the same hue:
     #8257ff on near-black is 4.4:1, which made the caption and every refusal the least legible
     words in the app. */
  --lp-iao-ink: #9d84ff;
  --lp-refuse: #ffb3a7;
  --lp-tone-supported: #8257ff;
  --lp-tone-pressured: #c9542f;
  --lp-tone-mixed: #8a7a5e;
  /* QUIET WAS BYTE-IDENTICAL TO --lp-rule, so a scanned, calm stretch was drawn in the colour of
     the ruling between rows: an absence. It is lifted off that colour and drawn as a hatch rather
     than a fill, so measured-and-quiet reads differently from nobody-looked. */
  --lp-tone-quiet: #7a6f62;
  /* Zero until a band actually mounts, so a Lifepath with no timing is laid out exactly as before. */
  --lp-band: 0px;
}

html { background: var(--lp-night); }
body {
  min-width: 320px;
  overflow: hidden;
  background: var(--lp-night);
  color: var(--lp-paper);
}

button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.lp-shell {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background:
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.012) 50%, transparent 100%),
    var(--lp-night);
}

.lp-topbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--lp-rule);
  background: rgba(16, 14, 12, .96);
  position: relative;
  z-index: 6;
}

.lp-identity { display: flex; align-items: baseline; gap: 13px; min-width: 0; }
.lp-horos {
  color: var(--lp-amber);
  font: 600 10px/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.lp-title {
  margin: 0;
  font: 400 clamp(25px, 3vw, 34px)/.9 'Alagard', var(--display);
  letter-spacing: .015em;
  color: var(--lp-paper);
}
.lp-account-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lp-account {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--lp-paper-dim);
  border: 0;
  background: transparent;
  font: 600 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.lp-account:hover, .lp-account:focus-visible { color: var(--lp-paper); }
.lp-install, .lp-update button {
  border: 1px solid var(--lp-rule); border-radius: 0; background: transparent; color: var(--lp-amber);
  min-height: 30px; padding: 0 10px; font: 600 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.lp-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lp-rule);
  color: var(--lp-amber);
  font-size: 9px;
}

.lp-view-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lp-rule);
}
.lp-view-switch button, .lp-preset, .lp-icon-btn, .lp-today, .lp-editor button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lp-paper-dim);
  font: 600 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.lp-view-switch button { min-width: 92px; padding: 9px 12px; }
.lp-view-switch button + button { border-left: 1px solid var(--lp-rule); }
.lp-view-switch button[aria-pressed="true"] { background: var(--lp-paper); color: var(--lp-night); }

.lp-controls {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--lp-rule-soft);
  background: var(--lp-panel);
  position: relative;
  z-index: 5;
}
/* The outline answers to no camera. Dimming the camera row keeps it from offering moves that
   change nothing the reader can see. */
.lp-controls.is-dormant .lp-presets,
.lp-controls.is-dormant .lp-camera,
.lp-controls.is-dormant .lp-zoom { opacity: .38; }
.lp-controls.is-dormant button, .lp-controls.is-dormant input { cursor: not-allowed; }
.lp-presets { display: flex; align-items: stretch; border: 1px solid var(--lp-rule); }
.lp-preset { min-height: 34px; padding: 0 13px; }
.lp-preset + .lp-preset { border-left: 1px solid var(--lp-rule); }
.lp-preset:hover, .lp-preset:focus-visible, .lp-preset.is-active { color: var(--lp-amber); background: rgba(255,176,46,.06); }
.lp-preset.is-active { box-shadow: inset 0 -2px var(--lp-amber); }
.lp-camera { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.lp-icon-btn, .lp-today { min-width: 34px; min-height: 34px; border: 1px solid var(--lp-rule); padding: 0 10px; }
.lp-icon-btn { font-size: 17px; letter-spacing: 0; }
.lp-icon-btn:hover, .lp-icon-btn:focus-visible, .lp-today:hover, .lp-today:focus-visible { color: var(--lp-amber); border-color: var(--lp-amber); }
.lp-range-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lp-paper);
  font: 400 clamp(14px, 1.6vw, 18px)/1 var(--serif);
}
.lp-zoom { justify-self: end; display: grid; grid-template-columns: auto minmax(110px, 16vw) auto; align-items: center; gap: 9px; }
.lp-zoom-label, .lp-zoom-readout {
  color: var(--lp-paper-dim);
  font: 600 8px/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lp-zoom-readout { min-width: 52px; color: var(--lp-amber); }
.lp-zoom input { width: 100%; accent-color: var(--lp-amber); }

.lp-stage { min-height: 0; position: relative; overflow: hidden; }
.lp-timeline-panel, .lp-outline-panel { height: 100%; }
.lp-timeline-panel[hidden], .lp-outline-panel[hidden] { display: none; }

.lp-viewport {
  height: 100%;
  min-height: 260px;
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: grab;
  outline: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 32%),
    var(--lp-night);
}
.lp-viewport.is-dragging { cursor: grabbing; }
.lp-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--lp-amber); }
.lp-axis, .lp-grid, .lp-items { position: absolute; inset: 0; }
.lp-axis { height: 74px; border-bottom: 1px solid var(--lp-rule); pointer-events: none; }
.lp-grid { top: calc(74px + var(--lp-band)); pointer-events: none; }
.lp-items { top: calc(74px + var(--lp-band)); bottom: 42px; }

/* ---- The I.A.O. timing band -------------------------------------------------
   A section that belongs to I.A.O. alone, on the same axis as the entries below it, so a period
   can be compared with its transits by looking straight down. Its height is published as
   --lp-band and every offset beneath it is derived from that, never from a second constant. */
/* THE BAND IS AS TALL AS WHAT IT HAS TO SAY, and it used to be 34 pixels whatever that was.
   The caption fitted on one line while it read "I.A.O." and a single word. It now names whose
   chart this is and, above the day grain, the transit itself, and at 320 that is two lines: the
   cap grew upward out of a fixed box and painted over the marks it was describing. Measured, not
   reasoned about. The track keeps its own height, the caption sits under it in normal flow, and
   the whole box publishes --lp-band so everything below moves with it. */
.lp-band {
  position: absolute; left: 0; right: 0; top: 74px;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--lp-rule);
  background: linear-gradient(180deg, rgba(130,87,255,.07), rgba(130,87,255,.02));
}
.lp-band[hidden] { display: none; }
/* THE TRACK IS AS TALL AS ITS ROWS, and JS writes that height because JS is what packs them. The
   22px here is the floor a band with one row keeps, so a lifepath whose sky is empty lays out
   exactly as it did before rows existed. */
.lp-band-track { position: relative; flex: 0 0 auto; height: 22px; }
/* A hairline between cells, so two neighbouring days that happen to share a tone still read as
   two days rather than as one longer stretch. It is an INSET SHADOW, not a margin: margin-right is
   inert on an absolutely positioned box with left + width, so for as long as the comment above has
   existed the hairline it describes has never rendered. Not fully opaque, so at the 3px worst case
   a mark keeps two full columns and a darkened third.
   container-type is what lets a segment decide for itself whether its name fits. A JS width
   threshold would make the presence of a DOM node a function of geometry, and so force a rebuild
   on exactly the frames of a drag. */
.lp-band-seg {
  /* --lp-seg-h is published by the model through renderBand, so the row height lives in one
     place. The literal here is the fallback for a band that has not drawn yet. */
  position: absolute; height: var(--lp-seg-h, 12px); padding: 0; border: 0; border-radius: 1px;
  container-type: inline-size;
  background: color-mix(in srgb, var(--tone, var(--lp-tone-quiet)) calc(var(--weight, 30) * 1%), transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tone, var(--lp-tone-quiet)) 70%, transparent), inset -1px 0 0 rgba(16, 14, 12, .8);
  cursor: pointer;
}
.lp-band-seg:hover, .lp-band-seg:focus-visible { outline: 1px solid var(--lp-iao); outline-offset: -1px; }
.lp-band-seg[data-bucket="supported"] { --tone: var(--lp-tone-supported); }
.lp-band-seg[data-bucket="pressured"] { --tone: var(--lp-tone-pressured); }
.lp-band-seg[data-bucket="mixed"] { --tone: var(--lp-tone-mixed); }
/* Quiet ignores --weight, because quiet has no magnitude to ink, and carries a 1px baseline where
   every other bucket carries a solid 2px. */
.lp-band-seg[data-bucket="quiet"] {
  --tone: var(--lp-tone-quiet);
  background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--lp-tone-quiet) 55%, transparent) 3px 5px);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--lp-tone-quiet) 70%, transparent), inset -1px 0 0 rgba(16, 14, 12, .8);
}
/* THE PICK HAS TO BE LEGIBLE AT TWO PIXELS WIDE, so it is not a border and not an outline: a
   full-weight fill between two paper hairlines, which reads at any width the band can draw. */
.lp-band-seg[aria-pressed="true"] {
  background-color: var(--tone, var(--lp-tone-quiet));
  box-shadow: inset 0 2px 0 var(--lp-paper), inset 0 -2px 0 var(--lp-paper), inset -1px 0 0 rgba(16, 14, 12, .8);
}
/* WHERE THE TRANSIT IS STRONGEST. --peak is the fraction of the CLIPPED box, so a transit running
   half off the left edge still marks the right day, and the attribute is absent entirely when the
   peak is off screen: a mark at a clamped edge would be a claim about a day nobody is showing. */
.lp-band-seg::after {
  /* ON the mark, not above it. A 4px overhang was invisible while every mark shared one strip;
     with rows it is a diamond painted into the row above, and the pinned row is the row above. */
  content: ''; position: absolute; top: 0; left: calc(var(--peak, 0) * 100%);
  width: 5px; height: 5px; margin-left: -3px;
  background: var(--lp-paper); transform: rotate(45deg);
  display: none;
}
/* And only where it can MEAN something. At the year altitude seventy-two transits share twenty
   pixels each: a diamond there is not a peak, it is a row of diamonds. Same mechanism as the name,
   so the segment decides for itself and no frame of a drag is spent re-deciding it. */
@container (min-width: 40px) { .lp-band-seg[data-peak]::after { display: block; } }
/* The name is always in the DOM; the segment's own width decides whether it shows. 64px is the
   longest body I.A.O. names (seven characters, ~37px here) plus padding and an ellipsis. */
.lp-seg-name {
  display: none; position: absolute; inset: 0; padding: 0 5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;
  font: 600 8px/1 var(--mono, ui-monospace, monospace); line-height: var(--lp-seg-h, 12px); letter-spacing: .06em; text-transform: uppercase;
  color: var(--lp-paper); text-shadow: 0 1px 2px rgba(16, 14, 12, .9); pointer-events: none;
}
@container (min-width: 64px) { .lp-seg-name { display: block; } }
/* THE PINNED ROW · void of course, kept out of the packing and given the top of the strip.
   It is a place a reader can look, so it is ruled even when it holds nothing, and its silence
   carries two different meanings that the copy inside it has to tell apart: nothing in this
   stretch, or a grain that cannot carry the answer at all. Inert, because the periods in it are
   the buttons and this is the line they sit on. */
.lp-band-vocrow {
  position: absolute; left: 0; right: 0; pointer-events: none;
  border-bottom: 1px dashed var(--lp-rule-soft);
}
.lp-band-vocrow span {
  position: absolute; left: 8px; top: 0; white-space: nowrap;
  color: var(--lp-paper-dim);
  font: 600 7px/1 var(--mono, ui-monospace, monospace); line-height: var(--lp-seg-h, 12px); letter-spacing: .14em; text-transform: uppercase;
}
/* A void-of-course period is not a quiet transit and must not read as one: it is the Moon's own
   business, so it carries the astro accent rather than the earth-coloured quiet hatch, and it
   ignores --weight for the same reason quiet does. */
.lp-band-seg[data-voc] {
  --tone: var(--lp-iao);
  background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--lp-iao-ink) 42%, transparent) 3px 5px);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--lp-iao-ink) 70%, transparent), inset -1px 0 0 rgba(16, 14, 12, .8);
}
/* WHAT THREE ROWS COULD NOT HOLD, counted where it is hidden. Pointer-only on purpose, exactly as
   the resize handles below are: the reachable path to every transit under this chip is the
   stepper, which walks the whole filtered set and pans the camera onto anything off screen. */
.lp-band-more {
  position: absolute; height: var(--lp-seg-h, 12px); padding: 0 3px; border: 0; border-radius: 1px;
  background: color-mix(in srgb, var(--lp-iao) 34%, transparent);
  color: var(--lp-paper);
  font: 600 8px/1 var(--mono, ui-monospace, monospace); line-height: var(--lp-seg-h, 12px); letter-spacing: .04em;
  text-align: center; cursor: pointer;
}
.lp-band-more:hover { background: color-mix(in srgb, var(--lp-iao) 55%, transparent); }
/* margin:0 is load bearing. This is a <p>, and its default 1em bottom margin lifted the opaque
   label up into the segment row, where it painted over the first two days of every view. */
.lp-band-cap {
  position: relative; z-index: 2; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  padding: 2px 10px 3px 12px;
  background: var(--lp-night);
  color: var(--lp-iao-ink);
  font: 600 8px/1.35 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase;
  /* The caption strip stays inert so a drag over it still travels the camera; its CONTROLS get
     their pointer events back one by one. */
  pointer-events: none;
  /* A transit name is one long unbroken run of words. Without this it pushed the page eight
     pixels wider than the phone it was on. */
  overflow-wrap: anywhere;
}
/* A refusal has to be as loud as an answer. An empty band reads as "nothing is happening",
   which is a claim the app is in no position to make. And it has to be READABLE: the refusal
   states used to be drawn in the mark colour, which put the app's most important sentences at the
   worst contrast in it. */
.lp-band-note { color: var(--lp-paper-dim); letter-spacing: .1em; }
.lp-band-note[data-kind="unavailable"] { color: var(--lp-refuse); }
.lp-band-note[data-kind="stale"] { color: var(--lp-amber); }
/* THE PICKER LIVES ON THE BAND, which Dan chose over a control somewhere else. It reuses the label
   picker's radiogroup so it inherits real radio keyboard semantics and the 45 degree swatch, and it
   restores its own pointer events over the caption strip that stays inert for the camera. */
/* The who-line lays ITSELF out, so the chips sit beside the organ's name instead of wrapping under
   it and pushing the note between the two. */
[data-band-who] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
.lp-band-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; pointer-events: auto; }
/*
 * WCAG 2.5.8 · THE TARGET IS THE LABEL, and 7px type on a 15px chip failed both halves of being a
 * control: too small to hit and too small to read. Measured live at 390, 768 and 1440, where every
 * chip came back 82.81 x 15. The base picker this one overrides was already a 32px target; the
 * band's override was the regression, not the pattern.
 *
 * The LABEL carries the 24px floor so the painted pill can stay the light thing a strip wants, and
 * the type goes to 9px because this control names WHOSE life the band is describing, which is the
 * most consequential word on the surface.
 */
.lp-band-chips.lp-label-picker label { display: inline-flex; align-items: center; min-height: 24px; }
.lp-band-chips.lp-label-picker span { min-height: 20px; gap: 5px; padding: 0 7px; font-size: 9px; letter-spacing: .08em; }
.lp-band-chips.lp-label-picker span::before { width: 6px; height: 6px; }
.lp-band-chips.lp-label-picker input:checked + span { background: color-mix(in srgb, var(--swatch) 20%, transparent); }
/* 050 · The official room is the one the band falls back to, so it is marked rather than merely
   ordered first: a strip of identical chips says nothing about which one you get by default. An
   underline and not a second colour, because the swatch already carries the room's identity. */
.lp-band-chips.lp-label-picker label[data-official] span { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
/* While a choice is being written, the whole strip stops taking clicks. A half-dimmed chip that
   still responds is how two writes get started against one unsettled value. */
/*
 * A SCAN DOES NOT DISABLE THIS, SO A SCAN MUST NOT PAINT IT AS DISABLED.
 *
 * The picker stays live for the whole of a scan on purpose: a real chart takes between two and
 * seventeen seconds, and a reader changing their mind inside that is a reader exercising the
 * control. Dimming the whole group to .55 told them the opposite for up to seventeen seconds while
 * every click still worked, which is a control lying about itself.
 *
 * Busy now says WORKING rather than INERT: the cursor, and a dashed ring on the chip that has been
 * chosen but is not drawn yet. The ring is an outline, so it costs no layout on a strip that
 * re-renders on every drag frame. Dimming is left to the one state that really is inert, a write in
 * flight, and it is per chip because that is exactly where `disabled` is set.
 */
.lp-band-chips.lp-label-picker[aria-busy="true"] { cursor: progress; }
.lp-band-chips.lp-label-picker[aria-busy="true"] input:checked + span { outline: 1px dashed color-mix(in srgb, var(--swatch) 60%, transparent); outline-offset: 1px; }
.lp-band-chips.lp-label-picker input:disabled + span { opacity: .55; cursor: progress; }
/* FILTERING BY PLANET. The band had no text input of any kind, so this borrows the compact mono
   field the asset manager and the leads list already use (asset-manager.css:60) rather than the
   16px serif of the editor drawer, which is sized for a form and not for a strip. It restores its
   own pointer events over an inert caption, like every other control here, and it carries the same
   24px target floor the chips beside it are held to. */
.lp-band-find {
  pointer-events: auto; box-sizing: border-box;
  width: 96px; min-height: 24px; padding: 0 7px;
  border: 1px solid var(--lp-rule); border-radius: 1px;
  background: var(--lp-night); color: var(--lp-paper);
  font: 600 9px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase;
}
.lp-band-find[hidden] { display: none; }
.lp-band-find::placeholder { color: var(--lp-paper-dim); letter-spacing: .12em; }
.lp-band-find:focus { outline: none; border-color: var(--lp-iao); }
.lp-band-find:focus-visible { outline: 1px solid var(--lp-iao); outline-offset: 1px; }
.lp-band-toggle {
  margin-left: auto; pointer-events: auto;
  border: 0; padding: 0 4px; min-width: 22px; background: none;
  color: var(--lp-iao-ink); font: 600 11px/1 var(--mono, ui-monospace, monospace); cursor: pointer;
}
.lp-band-toggle[hidden] { display: none; }
.lp-band-toggle:hover, .lp-band-toggle:focus-visible { color: var(--lp-paper); outline-offset: 2px; }

/* THE READING, thin at rest and opened when engaged. It lives INSIDE the band, because .lp-band
   clips anything that tries to escape its box, and it grows the height the band publishes. The
   rows are toggled, never transitioned: a height measured mid-transition publishes a wrong offset
   to everything below. */
.lp-band-panel {
  position: relative; z-index: 2;
  display: grid; gap: 4px;
  padding: 0 12px 7px;
  background: var(--lp-night);
  font: 600 8px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase;
}
.lp-band-panel[hidden] { display: none; }
.lp-band-step { display: flex; align-items: center; gap: 8px; }
.lp-band-step button {
  border: 1px solid var(--lp-rule); background: none; color: var(--lp-iao-ink);
  min-width: 24px; min-height: 20px; padding: 0; font: 600 11px/1 var(--mono, ui-monospace, monospace); cursor: pointer;
}
.lp-band-step button:hover, .lp-band-step button:focus-visible { border-color: var(--lp-iao); color: var(--lp-paper); }
.lp-band-count { color: var(--lp-paper-dim); letter-spacing: .14em; white-space: nowrap; }
.lp-band-title { color: var(--lp-paper); letter-spacing: .08em; overflow-wrap: anywhere; }
.lp-band-read { margin: 0; color: var(--lp-paper-dim); overflow-wrap: anywhere; }
/* All four bucket words clear 5.6:1 from ONE rule, instead of four hand-picked inks that drift. */
.lp-band-tone { color: color-mix(in srgb, var(--tone, var(--lp-tone-quiet)) 72%, var(--lp-paper)); letter-spacing: .16em; }
.lp-band-tone[data-bucket="supported"] { --tone: var(--lp-tone-supported); }
.lp-band-tone[data-bucket="pressured"] { --tone: var(--lp-tone-pressured); }
.lp-band-tone[data-bucket="mixed"] { --tone: var(--lp-tone-mixed); }
.lp-band-tone[data-bucket="quiet"] { --tone: var(--lp-tone-quiet); }
.lp-band-words { display: block; color: var(--lp-paper-dim); letter-spacing: .06em; }
/* THE FOUR TONES, NAMED. Nothing anywhere has ever told the reader what the colours mean. */
.lp-band-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--lp-paper-dim); letter-spacing: .12em; }
.lp-band-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lp-band-legend li::before {
  content: ''; width: 8px; height: 8px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--tone, var(--lp-tone-quiet)) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--lp-tone-quiet)) 90%, transparent);
}
.lp-band-legend li[data-bucket="supported"] { --tone: var(--lp-tone-supported); }
.lp-band-legend li[data-bucket="pressured"] { --tone: var(--lp-tone-pressured); }
.lp-band-legend li[data-bucket="mixed"] { --tone: var(--lp-tone-mixed); }
.lp-band-legend li[data-bucket="quiet"] { --tone: var(--lp-tone-quiet); }
.lp-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lp-rule-soft); }
.lp-tick.is-major { background: var(--lp-rule); }
.lp-tick-label {
  position: absolute;
  top: 24px;
  transform: translateX(8px);
  white-space: nowrap;
  color: var(--lp-paper-dim);
  font: 600 8px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lp-tick-year {
  top: 41px;
  color: var(--lp-paper);
  font: 400 19px/1 'Alagard', var(--display);
  letter-spacing: 0;
  text-transform: none;
}
.lp-now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lp-amber); z-index: 2; pointer-events: none; }
.lp-now::before { content: ''; position: absolute; top: 70px; left: -3px; width: 7px; height: 7px; background: var(--lp-amber); transform: rotate(45deg); }
/* The grid carries the today line only. Its cap belongs to the axis, or the marker reads as
   two markers with a stray diamond adrift in the canvas. */
.lp-now-line::before { content: none; }
.lp-now-label {
  position: absolute;
  top: 8px;
  left: 7px;
  color: var(--lp-amber);
  font: 600 8px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lp-lane-rule { position: absolute; left: 0; right: 0; height: 1px; background: rgba(58,48,41,.45); }

.lp-entry-wrap {
  position: absolute;
  height: 48px;
}
.lp-entry-wrap.is-moving { z-index: 5; }
.lp-entry {
  --entry-color: var(--lp-amber);
  position: relative;
  width: 100%;
  top: 0;
  min-width: 12px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--entry-color) 52%, var(--lp-rule));
  border-left: 3px solid var(--entry-color);
  border-radius: 0;
  background: color-mix(in srgb, var(--entry-color) 7%, var(--lp-panel));
  color: var(--lp-paper);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 100ms ease, border-color 100ms ease;
}
.lp-entry:hover, .lp-entry:focus-visible, .lp-entry.is-selected {
  outline: none;
  background: color-mix(in srgb, var(--entry-color) 14%, var(--lp-panel));
  border-color: var(--entry-color);
}
.lp-entry-inner { height: 100%; display: grid; align-content: center; gap: 4px; padding: 6px 10px; }
.lp-entry-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px/1 var(--serif); }
.lp-entry-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lp-paper-dim); font: 600 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lp-entry.lp-span-mode { height: 32px; }
.lp-entry.lp-span-mode .lp-entry-inner { display: block; padding: 8px 9px; }
.lp-entry.lp-span-mode .lp-entry-title { font: 600 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lp-entry.lp-span-mode .lp-entry-date { display: none; }
.lp-entry.lp-point {
  width: 14px !important;
  min-width: 14px;
  overflow: visible;
  border: 0;
  background: transparent;
}
/* Handles overhang the entry to stay grabbable, so they must never meet in the middle: the
   entry keeps a clickable core and is only rendered with handles when it is wide enough. */
.lp-resize { position: absolute; top: 0; bottom: 0; width: 18px; border: 0; background: transparent; cursor: ew-resize; z-index: 2; }
.lp-resize::after { content: ''; position: absolute; top: 9px; bottom: 9px; width: 1px; background: var(--entry-color); opacity: .62; }
.lp-resize-start { left: -9px; } .lp-resize-end { right: -9px; }
.lp-resize-start::after { left: 9px; } .lp-resize-end::after { right: 9px; }
.lp-entry.lp-point::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--entry-color);
  background: var(--lp-night);
  transform: rotate(45deg);
}
.lp-entry.lp-point:hover::before, .lp-entry.lp-point:focus-visible::before, .lp-entry.lp-point.is-selected::before { background: var(--entry-color); }
.lp-entry.lp-point .lp-entry-inner { display: none; }

.lp-cluster {
  position: absolute;
  top: 36%;
  width: 28px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lp-paper);
  cursor: zoom-in;
}
.lp-cluster::before { content: ''; position: absolute; left: 13px; top: 19px; width: 1px; height: 34px; background: var(--lp-amber); }
.lp-cluster::after { content: ''; position: absolute; left: 8px; top: 17px; width: 11px; height: 11px; border: 1px solid var(--lp-amber); background: var(--lp-night); transform: rotate(45deg); }
.lp-cluster span { position: absolute; left: 24px; top: 14px; color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.lp-cluster:hover span, .lp-cluster:focus-visible span { color: var(--lp-amber); }
/* A bin of one is a named thing, not a tally: give its title room to be read. The transform is
   restated so the widened box grows to the right and the pin stays on its own date. */
.lp-cluster.is-single { width: var(--single-width, 150px); transform: translate(-14px, -50%); }
.lp-cluster.is-single span { right: 6px; color: var(--lp-paper); font: 400 13px/1.15 var(--serif); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }

/* No band offset here on purpose. This box is a child of .lp-items, which already carries it, so
   the 74px is centring inside the item area and not a second measurement of the chrome. */
.lp-empty {
  position: absolute;
  inset: 74px 0 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}
.lp-empty-title { font: 400 clamp(28px, 6vw, 58px)/1 'Alagard', var(--display); }
.lp-empty-copy { color: var(--lp-paper-dim); font: italic 17px/1.35 var(--serif); }

/* Rows can outnumber the height the canvas has. The stack is reachable by drag and by the
   arrow keys; this says so, and says how many are still out of sight. */
.lp-lane-more {
  position: absolute;
  left: 50%;
  bottom: 54px;
  z-index: 4;
  transform: translateX(-50%);
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--lp-rule);
  border-radius: 0;
  background: rgba(25,21,18,.96);
  color: var(--lp-paper-dim);
  font: 600 8px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lp-lane-more:hover, .lp-lane-more:focus-visible { border-color: var(--lp-amber); color: var(--lp-amber); outline: none; }
.lp-lane-more[hidden] { display: none; }

.lp-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-top: 1px solid var(--lp-rule-soft);
  background: rgba(16,14,12,.94);
  color: var(--lp-paper-dim);
  font: 600 8px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 4;
}
.lp-statusbar strong { color: var(--lp-paper); font-weight: 600; }
.lp-sync-state { border: 0; background: transparent; color: var(--lp-amber); padding: 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.lp-sync-state[data-state="offline"] { color: #d9a66f; }
.lp-sync-state[data-state="conflicted"] { color: #ff7b64; }

.lp-update { position: fixed; z-index: 30; left: 50%; top: 74px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 16px; border: 1px solid var(--lp-amber); background: var(--lp-panel); color: var(--lp-paper); font: 600 9px/1 var(--mono); letter-spacing: .08em; }
.lp-update[hidden] { display: none; }
.lp-add { position: fixed; z-index: 8; right: 20px; bottom: 58px; min-width: 122px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid var(--lp-amber); border-radius: 0; background: var(--lp-paper); color: var(--lp-night); cursor: pointer; }
.lp-add-plus { font: 300 23px/1 var(--mono); }
.lp-add-copy { font: 700 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lp-add:hover, .lp-add:focus-visible { background: var(--lp-amber); outline: 2px solid var(--lp-night); }
.lp-undo { position: fixed; z-index: 25; left: 20px; bottom: 58px; display: flex; align-items: center; gap: 18px; padding: 12px 14px; border: 1px solid var(--lp-rule); background: var(--lp-panel-hi); color: var(--lp-paper); font: 600 9px/1 var(--mono); letter-spacing: .08em; }
.lp-undo[hidden] { display: none; }
.lp-undo button { border: 0; background: none; color: var(--lp-amber); font: inherit; text-transform: uppercase; cursor: pointer; }

.lp-outline-panel { overflow: auto; padding: clamp(20px, 4vw, 56px); background: var(--lp-night); }
.lp-outline-inner { max-width: 900px; margin: 0 auto; }
.lp-outline-intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--lp-rule); }
.lp-outline-intro h2 { margin: 0; font: 400 clamp(34px, 6vw, 62px)/.95 'Alagard', var(--display); }
.lp-outline-intro p { max-width: 42ch; margin: 0; color: var(--lp-paper-dim); font: italic 16px/1.4 var(--serif); }
.lp-outline-list { list-style: none; margin: 0; padding: 0; }
.lp-outline-item { display: grid; grid-template-columns: minmax(128px, 190px) 1fr auto; gap: 22px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--lp-rule-soft); }
.lp-outline-date { color: var(--lp-amber); font: 600 8px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lp-outline-button { padding: 0; border: 0; background: none; color: var(--lp-paper); text-align: left; cursor: pointer; font: 400 19px/1.15 var(--serif); }
.lp-outline-button:hover, .lp-outline-button:focus-visible { color: var(--lp-amber); outline: none; }
.lp-outline-label { font: 600 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lp-outline-empty { padding: 80px 0; color: var(--lp-paper-dim); font: italic 19px/1.4 var(--serif); }

.lp-editor-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(8,7,6,.55);
  display: flex;
  justify-content: flex-end;
}
.lp-editor-scrim[hidden] { display: none; }
.lp-editor {
  width: min(440px, 100%);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--lp-rule);
  background: var(--lp-panel);
}
.lp-editor-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 28px 28px 26px; border-bottom: 1px solid var(--lp-rule); }
.lp-editor-kicker { margin: 0 0 9px; color: var(--lp-amber); font: 600 8px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.lp-editor h2 { margin: 0; font: 400 32px/1 'Alagard', var(--display); }
.lp-editor-close { min-width: 34px; min-height: 34px; border: 1px solid var(--lp-rule) !important; font-size: 16px !important; letter-spacing: 0 !important; }
.lp-editor-form { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lp-editor-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 18px; padding: 24px 28px; }
.lp-title-field input { min-height: 48px; font-size: 18px; }
.lp-date-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
.lp-date-fieldset legend { margin-bottom: 8px; color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.lp-date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-date-pair > [hidden] { display: none; }
.lp-range-toggle { justify-self: start; min-height: 28px; padding: 0 !important; color: var(--lp-amber) !important; font-size: 8px !important; letter-spacing: .1em !important; }
/* A date and its optional hour sit on one line: the time control appears beside the date it
   belongs to rather than in a field of its own. */
.lp-when { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lp-when input[type="date"] { flex: 1 1 auto; min-width: 0; }
.lp-when input[type="time"] { flex: 0 0 auto; width: auto; min-width: 92px; }
.lp-when input[hidden] { display: none; }
.lp-when-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.lp-field { display: grid; gap: 8px; }
.lp-field label, .lp-field-label, .lp-colour span { color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.lp-field label span { letter-spacing: .06em; text-transform: none; }
.lp-field input, .lp-field textarea, .lp-field select, .lp-invite-form input {
  width: 100%;
  border: 1px solid var(--lp-rule);
  border-radius: 0;
  background: var(--lp-night);
  color: var(--lp-paper);
  padding: 11px 12px;
  font: 400 16px/1.25 var(--serif);
}
.lp-field input[type="date"] { font-family: var(--mono); font-size: 12px; color-scheme: dark; }
.lp-field textarea { min-height: 128px; resize: vertical; }
.lp-field select { appearance: none; font-family: var(--serif); }
.lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus { outline: 1px solid var(--lp-amber); border-color: var(--lp-amber); }
.lp-label-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-label-picker label { position: relative; }
.lp-label-picker input { position: absolute; opacity: 0; pointer-events: none; }
.lp-label-picker span { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid var(--lp-rule); color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.lp-label-picker span::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--swatch); background: color-mix(in srgb, var(--swatch) 30%, transparent); transform: rotate(45deg); }
.lp-label-picker input:checked + span { border-color: var(--swatch); color: var(--lp-paper); }
.lp-label-picker input:focus-visible + span { outline: 2px solid var(--lp-amber); }
.lp-new-label-toggle { justify-self: start; border: 0; background: none; color: var(--lp-amber); padding: 3px 0; font: 600 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lp-new-label { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.lp-new-label[hidden] { display: none; }
.lp-colour { display: grid; gap: 8px; }
.lp-colour input { width: 44px; height: 44px; border: 1px solid var(--lp-rule); padding: 2px; background: var(--lp-night); }
.lp-entry-details { border-top: 1px solid var(--lp-rule); border-bottom: 1px solid var(--lp-rule); }
.lp-entry-details summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; color: var(--lp-paper); list-style: none; font: 600 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lp-entry-details summary::-webkit-details-marker { display: none; }
.lp-entry-details summary::after { content: '+'; color: var(--lp-amber); font-size: 16px; font-weight: 400; }
.lp-entry-details[open] summary::after { content: '−'; }
.lp-entry-details summary small { margin-left: auto; color: var(--lp-paper-dim); font: 600 7px/1 var(--mono); letter-spacing: .08em; }
.lp-entry-details-body { display: grid; gap: 18px; padding: 2px 0 20px; }
.lp-editor-note { margin: 0; color: var(--lp-paper-dim); font: italic 14px/1.4 var(--serif); }
.lp-editor-status { margin: 0; padding: 10px 12px; border-left: 1px solid var(--lp-amber); background: var(--lp-night); color: var(--lp-paper); font: 600 8px/1.4 var(--mono); letter-spacing: .08em; }
.lp-editor-status[hidden] { display: none; }
.lp-editor-status[data-kind="error"] { border-color: #ff7b64; color: #ffb3a7; }
.lp-editor-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; padding: 14px 28px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--lp-rule); background: var(--lp-panel-hi); }
.lp-editor-actions button { min-height: 38px; padding: 0 16px; border: 1px solid var(--lp-rule); }
.lp-editor-actions button:disabled { opacity: .55; cursor: wait; }
.lp-editor-actions .lp-save { background: var(--lp-paper); border-color: var(--lp-paper); color: var(--lp-night); }
.lp-editor-actions button:hover, .lp-editor-actions button:focus-visible { border-color: var(--lp-amber); color: var(--lp-amber); outline: none; }
.lp-editor-actions .lp-save:hover, .lp-editor-actions .lp-save:focus-visible { background: var(--lp-amber); color: var(--lp-night); }
.lp-editor-actions .lp-delete { color: #ff7b64; }

.lp-account-scrim { position: fixed; inset: 0; z-index: 21; display: flex; justify-content: flex-end; background: rgba(8,7,6,.55); }
.lp-account-scrim[hidden] { display: none; }
.lp-account-sheet { width: min(460px, 100%); height: 100%; overflow: auto; padding: 28px; border-left: 1px solid var(--lp-rule); background: var(--lp-panel); }
.lp-account-sheet > .lp-editor-head { padding: 0 0 26px; }
.lp-account-sheet h2 { margin: 0; font: 400 32px/1 'Alagard', var(--display); }
.lp-account-body { display: grid; gap: 30px; padding-top: 24px; }
.lp-path-list { display: grid; border-top: 1px solid var(--lp-rule); }
.lp-path-list button { display: grid; gap: 6px; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--lp-rule); background: none; color: var(--lp-paper); text-align: left; cursor: pointer; }
.lp-path-list button[aria-current="true"] { color: var(--lp-amber); }
.lp-path-list strong { font: 400 18px/1 var(--serif); }
.lp-path-list span, .lp-sheet-copy { color: var(--lp-paper-dim); font: 600 8px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lp-account-body h3 { margin: 0 0 12px; color: var(--lp-paper); font: 400 22px/1 var(--serif); }
.lp-member-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lp-rule); }
.lp-member-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lp-rule-soft); font: 400 15px/1.2 var(--serif); }
.lp-member-list small { display: block; margin-top: 4px; color: var(--lp-paper-dim); font: 600 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lp-member-list button, .lp-account-foot button, .lp-invite-form button { min-height: 34px; padding: 0 12px; border: 1px solid var(--lp-rule); background: none; color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lp-invite-form { display: grid; gap: 9px; margin-top: 22px; }
.lp-invite-form > label { color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lp-invite-form > div { display: grid; grid-template-columns: 1fr auto; }
.lp-invite-form input { min-width: 0; }
.lp-invite-form p { min-height: 16px; margin: 0; color: var(--lp-amber); font: 600 8px/1.4 var(--mono); }
/* The zone is stated in words first, then offered as a one-tap adoption, then as a full picker.
   An hour that reads wrong is indistinguishable from an entry that was saved wrong. */
[data-times] { display: block; margin-bottom: 24px; }
.lp-zone-row { display: grid; gap: 10px; margin-top: 12px; }
.lp-zone-adopt { min-height: 36px; padding: 0 12px; border: 1px solid var(--lp-rule); background: none; color: var(--lp-paper); font: 600 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.lp-zone-adopt:hover, .lp-zone-adopt:focus-visible { border-color: var(--lp-amber); color: var(--lp-amber); outline: none; }
.lp-zone-current { color: var(--lp-paper-dim); font: 600 8px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lp-zone-pick { display: grid; gap: 8px; }
.lp-zone-pick span { color: var(--lp-paper-dim); font: 600 8px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.lp-zone-pick select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--lp-rule); border-radius: 0; background: var(--lp-night); color: var(--lp-paper); }
.lp-zone-pick select:focus-visible { border-color: var(--lp-amber); outline: none; }
.lp-zone-status { min-height: 16px; margin: 10px 0 0; color: var(--lp-amber); font: 600 8px/1.4 var(--mono); letter-spacing: .08em; }
.lp-zone-status[hidden] { display: none; }
.lp-zone-status[data-kind="error"] { color: #ffb3a7; }
/* The roster, in the sheet, because with nothing shared there IS no band to put it on. */
.lp-whose-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--lp-paper-dim); font: 600 8px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lp-whose-list li { display: flex; align-items: center; gap: 8px; }
.lp-whose-list li[aria-current="true"] { color: var(--lp-paper); }
.lp-whose-list i { width: 8px; height: 8px; border: 1px solid var(--swatch); background: color-mix(in srgb, var(--swatch) 30%, transparent); transform: rotate(45deg); }
.lp-whose-list small { color: var(--lp-iao-ink); letter-spacing: .12em; }
/* Two marks can land on one row: "the default" and "drawn now" are different claims and a room can
   carry both. They need to read as two words rather than as one run-on. */
.lp-whose-list small + small::before { content: '·'; margin: 0 4px; opacity: .6; }
.lp-account-foot { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--lp-rule); }
.lp-conflicts { position: fixed; z-index: 24; right: 20px; bottom: 116px; width: min(420px, calc(100vw - 40px)); display: grid; gap: 8px; }
.lp-conflicts[hidden] { display: none; }
.lp-conflicts article { padding: 14px; border: 1px solid #8e4e42; background: var(--lp-panel-hi); }
.lp-conflicts p { display: grid; gap: 4px; margin: 0 0 12px; font: 400 15px/1.2 var(--serif); }
.lp-conflicts p span { color: var(--lp-paper-dim); font: 600 8px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lp-conflicts article > div { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-conflicts button { min-height: 32px; border: 1px solid var(--lp-rule); background: none; color: var(--lp-paper); font: 600 8px/1 var(--mono); text-transform: uppercase; }

@media (max-width: 900px) {
  .lp-topbar { grid-template-columns: 1fr auto; gap: 12px; }
  .lp-view-switch { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .lp-view-switch button { width: 50%; }
  .lp-controls { grid-template-columns: 1fr auto; gap: 10px; }
  .lp-presets { overflow-x: auto; }
  .lp-preset { flex: 0 0 auto; }
  .lp-zoom { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; grid-template-columns: auto 1fr auto; }
  .lp-camera { justify-content: flex-end; }
  .lp-account-name { display: none; }
}

@media (max-width: 600px) {
  .lp-shell { grid-template-rows: auto auto minmax(0, 1fr); }
  .lp-topbar { min-height: 58px; padding: 11px 14px; }
  .lp-title { font-size: 27px; }
  .lp-horos { display: none; }
  .lp-controls { padding: 8px 14px; }
  .lp-presets { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .lp-preset { min-width: 0; padding: 0 4px; }
  /* The readout is the only exact statement of the window and it carries the polite live
     region, so the camera takes the full row and keeps it rather than dropping it. */
  .lp-range-label { flex: 1 1 auto; font-size: 14px; }
  .lp-camera { grid-column: 1 / -1; grid-row: 2; justify-content: start; gap: 8px; }
  .lp-today { padding: 0 8px; }
  .lp-zoom { grid-column: 1 / -1; grid-row: 3; width: 100%; min-width: 0; grid-template-columns: minmax(48px, 1fr) auto; gap: 7px; }
  .lp-zoom-label { display: none; }
  .lp-zoom input { min-width: 0; }
  .lp-axis { height: 62px; }
  .lp-band { top: 62px; }
  .lp-grid, .lp-items { top: calc(62px + var(--lp-band)); }
  .lp-band-cap { padding: 2px 8px; font-size: 7px; letter-spacing: .12em; }
  /* At 320 a fixed 96px field and a wrapped chart name fight for the same line. The field takes
     what is left of the row it lands on instead, and never falls under its own minimum. */
  .lp-band-find { flex: 1 1 84px; width: auto; min-width: 72px; }
  .lp-now::before { top: 58px; }
  .lp-tick-label { top: 18px; }
  .lp-tick-year { top: 35px; font-size: 17px; }
  .lp-statusbar { height: 38px; padding: 0 14px; }
  .lp-statusbar { font-size: 7px; letter-spacing: .08em; }
  .lp-statusbar > span { white-space: nowrap; }
  .lp-fixture-note { max-width: 54%; overflow: hidden; text-overflow: ellipsis; text-align: right; }
  .lp-status-help { display: none; }
  .lp-outline-panel { padding: 28px 18px; }
  .lp-outline-intro { grid-template-columns: 1fr; align-items: start; }
  .lp-outline-item { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .lp-outline-date { grid-column: 1 / -1; }
  .lp-editor-scrim { align-items: flex-end; background: rgba(8,7,6,.62); }
  .lp-editor { width: 100%; height: min(78dvh, 680px); border-left: 0; border-top: 1px solid var(--lp-rule); }
  .lp-editor > .lp-editor-head { padding: 20px 18px 18px; }
  .lp-editor-scroll { padding: 20px 18px; }
  .lp-editor-actions { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); }
  .lp-account-scrim { align-items: flex-end; }
  .lp-account-sheet { width: 100%; height: min(82dvh, 720px); border-left: 0; border-top: 1px solid var(--lp-rule); padding: 22px 18px max(22px, env(safe-area-inset-bottom)); }
  /* The chip is centred on a wide canvas; on a phone the add button owns that corner, so it
     moves to the free left edge instead of sitting underneath it. */
  .lp-lane-more { left: 14px; right: auto; bottom: 50px; max-width: calc(100% - 152px); transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lp-add { right: 14px; bottom: 50px; min-width: 116px; }
  .lp-undo { left: 14px; right: 144px; bottom: 50px; justify-content: space-between; }
  .lp-update { top: 62px; max-width: calc(100vw - 28px); }
  .lp-date-pair { grid-template-columns: 1fr; }
  .lp-preset { font-size: 7px; letter-spacing: .04em; }
  .lp-entry-details summary small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-entry { transition: none; }
}