/* ============================================================================
   Components — every reusable piece the screens compose.
   ----------------------------------------------------------------------------
   Values come from the approved panel composition
   (design/approved-redesign/PomyPanel.dc.html). Consumes tokens.css and
   declares no literal colour or family.
   Order: segmented control -> status strip -> focus -> today -> work
          -> skeleton -> notice -> buttons -> action bar -> settings
          -> gates -> overlays.
   ========================================================================= */

/* ---------------------------------------------------------------- glyphs --- */

/* Every icon in the panel is an SVG inside this span, so this is the one place
   that has to get its box right. Left inline, the SVG sits on a text baseline
   and the span reserves descender space beneath it — which reads as an icon
   nudged a pixel or two above the centre of whatever it sits in. */
.pomy-glyph {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.pomy-glyph > svg { display: block; }
/* Where the size is set on the span rather than on the SVG inside it, the SVG
   is told to fill it, so the two can never disagree. */
.pomy-ambient-chevron > svg,
.pomy-ambient-icon > svg,
.pomy-duration-state > svg,
.pomy-list-control-chevron > svg,
.pomy-metric-icon > svg,
.pomy-nav-chevron > svg { height: 100%; width: 100%; }

/* ---------------------------------------------------- segmented control --- */

.pomy-segmented {
  background: var(--pomy-surface);
  border-radius: var(--pomy-r-input);
  display: flex;
  gap: 2px;
  padding: 3px;
}

.pomy-segment {
  align-items: center;
  border-radius: var(--pomy-r-quiet);
  color: var(--pomy-muted);
  display: flex;
  flex: 1 1 0;
  font-size: 11.5px;
  font-weight: 500;
  gap: 5px;
  height: 28px;
  justify-content: center;
  letter-spacing: -.002em;
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
  transition: background var(--pomy-t-state) var(--pomy-ease), color var(--pomy-t-state) var(--pomy-ease);
  white-space: nowrap;
}
/* Selected carries three signals, so it survives a dark ground, a monochrome
   screen and a shadow that has nothing to fall on: its own surface, the ink
   colour, and the weight. */
.pomy-segment[aria-selected="true"],
.pomy-segment[aria-pressed="true"] {
  background: var(--pomy-thumb);
  box-shadow: var(--pomy-lift-chip);
  color: var(--pomy-ink);
  font-weight: 600;
}
.pomy-segment > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pomy-segment svg, .pomy-segment img { flex: 0 0 auto; height: 12px; object-fit: contain; width: 12px; }

/* The top-bar switch sizes to its labels instead of filling the row. */
.pomy-segmented--compact { gap: 2px; }
.pomy-segmented--compact .pomy-segment { flex: 0 0 auto; padding: 0 13px; }

/* ---------------------------------------------------------- status strip -- */

.pomy-strip {
  align-items: flex-start;
  background: var(--pomy-accent-wash);
  border-bottom: 1px solid var(--pomy-accent-line);
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 10px 14px 11px;
}
.pomy-strip[data-tone="red"] {
  background: var(--pomy-danger-wash);
  border-bottom-color: var(--pomy-danger-line);
}
.pomy-strip-dot {
  background: var(--pomy-accent);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 8px;
  margin-top: 4px;
  width: 8px;
}
.pomy-strip[data-tone="red"] .pomy-strip-dot { background: var(--pomy-danger); }
.pomy-strip-body { flex: 1 1 auto; min-width: 0; }
.pomy-strip-title { color: var(--pomy-ink); font-size: 12px; font-weight: 600; line-height: 1.35; }
.pomy-strip-text { color: var(--pomy-muted); font-size: 11px; line-height: 1.45; margin-top: 3px; }
.pomy-strip-action {
  background: var(--pomy-canvas);
  border: 1px solid var(--pomy-line-strong);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-ink);
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}
.pomy-strip-action:hover { background: var(--pomy-surface); }

/* ---------------------------------------------------------------- focus --- */

.pomy-focus-top { padding: 15px var(--pomy-gutter) 0; }

/* Holds its height whether or not an item is active, so the ring never jumps. */
.pomy-active-item { min-height: 40px; }

/* Title and due date on one line: the two facts read first, side by side. */
.pomy-active-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pomy-active-title {
  color: var(--pomy-ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}
.pomy-active-item[data-empty="true"] .pomy-active-title { color: var(--pomy-faint); }
.pomy-active-head .pomy-due { flex: 0 0 auto; margin-top: 2px; font: var(--pomy-text-meta); }

/* Client, then job — each its own line, client the stronger of the two. */
.pomy-active-context { margin-top: 4px; }
.pomy-active-client { color: var(--pomy-muted); font: var(--pomy-text-control); }
.pomy-active-job { color: var(--pomy-faint); font: var(--pomy-text-meta); margin-top: 1px; }

.pomy-active-meta { color: var(--pomy-muted); font-size: 11.5px; line-height: 1.35; margin-top: 3px; }

/* Time budget — a compact metric strip for the active WorkflowMax task,
   secondary to the timer at every state: this reports the job's budget, not
   the person. A hairline separates it from the client/job identity above. */
.pomy-time-budget { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pomy-line-soft); }

/* Metric — the shared "icon value label" fact, and the row that holds a few
   of them. Used wherever a screen states a number with a name: the Focus
   budget, a WorkflowMax task's estimate, a plan row's allocation.
   Spacing carries the separation between segments, not a border: a border on
   a segment that wraps to the start of its own line is a stray mark nothing
   put there on purpose, and no selector can tell "first in this row" from
   "first in the next one" once the browser decides where to wrap. Gap has no
   such state, at any width. */
.pomy-metric-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; }
.pomy-metric { display: flex; align-items: center; gap: 5px; }
.pomy-metric-icon { color: var(--pomy-faint); height: 12px; width: 12px; }
.pomy-metric-value { color: var(--pomy-ink); font: var(--pomy-text-control); font-weight: 600; white-space: nowrap; }
.pomy-metric-label { color: var(--pomy-muted); font: var(--pomy-text-meta); white-space: nowrap; }
/* Forces a child of a wrapping flex row (a row's .pomy-row-meta) onto its own
   line, so a context line and a metric line never share one. */
.pomy-row-meta-line { flex: 1 0 100%; }
/* Only the overrun is toned, and it stays a text colour rather than an alarm. */
.pomy-metric[data-tone="danger"] .pomy-metric-value,
.pomy-metric[data-tone="danger"] .pomy-metric-label { color: var(--pomy-danger); }

.pomy-phase-picker { margin-top: 13px; }

.pomy-ring-wrap { display: flex; justify-content: center; margin-top: 16px; position: relative; }
.pomy-ring { display: block; max-width: 100%; }
.pomy-ring-track { fill: none; stroke: var(--pomy-ring-track); stroke-width: var(--pomy-ring-stroke); }
.pomy-ring-progress {
  fill: none;
  stroke: var(--pomy-phase-tone);
  stroke-dasharray: var(--pomy-ring-circumference);
  stroke-linecap: round;
  stroke-width: var(--pomy-ring-stroke);
  transition: stroke-dashoffset var(--pomy-t-ring) var(--pomy-ease), stroke var(--pomy-t-state) var(--pomy-ease);
}
/* Numerals first, phase caption under them, round pips last. */
.pomy-ring-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  position: absolute;
}
.pomy-ring-time {
  color: var(--pomy-ink);
  font-family: var(--pomy-font-mono);
  font-size: 39px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
.pomy-ring-cap {
  color: var(--pomy-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  margin-top: 7px;
  text-transform: uppercase;
}
.pomy-ring-cap[data-tone="focus"] { color: var(--pomy-accent-text); }
.pomy-ring-cap[data-tone="break"] { color: var(--pomy-phase-tone); }
.pomy-pips { display: flex; gap: 5px; margin-top: 9px; }
/* One rule: the round in progress carries the current phase's tone, every other
   round stays neutral. Nothing else in the row is ever coloured. */
.pomy-pip {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.25px var(--pomy-line-strong);
  height: 6px;
  transition: background var(--pomy-t-state) var(--pomy-ease);
  width: 6px;
}
.pomy-pip[data-state="active"] { background: var(--pomy-phase-tone); box-shadow: none; }

.pomy-timer-controls {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 15px;
}

.pomy-primary-action {
  align-items: center;
  background: var(--pomy-accent);
  /* The same step every other primary uses. A pill here was the one control in
     the panel with a radius of its own. */
  border-radius: var(--pomy-r-field);
  box-shadow: var(--pomy-lift-accent);
  color: var(--pomy-on-accent);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: var(--pomy-hit-primary);
  justify-content: center;
  letter-spacing: -.005em;
  max-width: 224px;
  transition: transform var(--pomy-t-state) var(--pomy-ease);
  width: 100%;
}
.pomy-primary-action:active { transform: translateY(1px); }
.pomy-primary-action[data-tone="break"] { background: var(--pomy-break); color: var(--pomy-on-break); }
.pomy-primary-action svg { height: 15px; width: 15px; }

.pomy-ghost-row { display: flex; gap: 4px; }
.pomy-ghost-action {
  align-items: center;
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
}
.pomy-ghost-action:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
.pomy-ghost-action svg { height: 14px; width: 14px; }

.pomy-duration {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-ink);
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 500;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
}
.pomy-duration:hover:not(:disabled) { border-color: var(--pomy-line-strong); }
/* A running session states its fixed length instead of offering a control. */
.pomy-duration:disabled { background: transparent; color: var(--pomy-faint); cursor: default; }
.pomy-duration svg { height: 13px; width: 13px; }
.pomy-duration-label { color: var(--pomy-muted); }
.pomy-duration-value { font-weight: 600; }
.pomy-duration-state { color: var(--pomy-decor); height: 11px; width: 11px; }

.pomy-timesheet-cta {
  align-items: center;
  background: var(--pomy-canvas);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
}
.pomy-timesheet-cta:hover { background: var(--pomy-surface); border-color: var(--pomy-line-strong); }
.pomy-timesheet-cta img { height: 13px; object-fit: contain; width: 13px; }

.pomy-ambient {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-field);
  color: var(--pomy-ink);
  display: flex;
  gap: 9px;
  height: 40px;
  margin-top: 14px;
  padding: 0 12px;
  width: 100%;
}
.pomy-ambient:hover { border-color: var(--pomy-line-strong); }
.pomy-ambient-icon { color: var(--pomy-muted); height: 15px; width: 15px; }
.pomy-ambient-label { font-size: 12.5px; font-weight: 500; }
.pomy-ambient-value { color: var(--pomy-muted); font-size: 11.5px; margin-left: auto; }
.pomy-ambient-chevron { color: var(--pomy-decor); height: 12px; width: 12px; }

.pomy-divider { background: var(--pomy-line); height: 1px; margin: 16px 0 0; }

/* ---------------------------------------------------------------- today --- */

/* The header, one line: which day, where it stands, what is in it. No eyebrow
   label — the switch above already says Today — and the summary is a fact, so
   it is quiet and gives way first when the panel narrows. */
.pomy-today-head-block { padding: 14px var(--pomy-gutter) 0; }
.pomy-today-headrow {
  align-items: center;
  display: flex;
  gap: 9px;
}
.pomy-today-date {
  color: var(--pomy-ink);
  flex: 0 0 auto;
  font: var(--pomy-text-control);
  font-weight: 600;
  white-space: nowrap;
}
/* The day's lifecycle, and every row's state in Wrap up: one pill, so a state
   always looks like a state wherever it is read. */
.pomy-today-pill {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-tight);
  color: var(--pomy-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  height: 19px;
  letter-spacing: .03em;
  padding: 0 8px;
  white-space: nowrap;
}
.pomy-today-pill[data-accent="true"] {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line-strong);
  color: var(--pomy-accent-text);
}
/* Words first: the tone only ever agrees with a label that already says it. */
.pomy-today-pill[data-tone="danger"] { border-color: var(--pomy-danger); color: var(--pomy-danger); }
.pomy-today-state {
  color: var(--pomy-muted);
  flex: 1 1 auto;
  font: var(--pomy-text-meta);
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Today's two phases. Full width, so the switch is a destination rather than
   a setting tucked into a corner. */
.pomy-day-segments { padding: 10px 0 0; }
.pomy-day-segments .pomy-segmented { width: 100%; }
.pomy-day-segments .pomy-segment { flex: 1 1 0; justify-content: center; }

/* ----------------------------------------------------------------- plan --- */

.pomy-day-head { padding: 14px var(--pomy-gutter) 16px; }

.pomy-day-target {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: var(--pomy-hit-min);
}
.pomy-day-target-label { color: var(--pomy-muted); font: var(--pomy-text-control); }

/* Pressable, and shaped like it. A target that is set states itself in the
   accent, because it is the figure everything else on the screen is measured
   against; an unset one is neutral and says what pressing it would do. */
button.pomy-day-target-value {
  background: var(--pomy-accent-wash);
  border: 1px solid var(--pomy-accent-line-strong);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-accent-text);
  font: var(--pomy-text-control);
  font-weight: 600;
  height: var(--pomy-hit-min);
  padding: 0 11px;
}
button.pomy-day-target-value[data-set="false"] {
  background: var(--pomy-canvas);
  border-color: var(--pomy-line-strong);
  color: var(--pomy-ink);
}
button.pomy-day-target-value:hover { border-color: var(--pomy-accent-line-strong); }
span.pomy-day-target-value { color: var(--pomy-ink); font: var(--pomy-text-control); }

/* One figure, then the sentence that shows the working. Every state has its own
   words; the tone only ever agrees with them. */
.pomy-day-capacity {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  margin-top: 13px;
  padding: 13px 14px 14px;
}
/* Over target is information, not a fault: the accent the panel already uses to
   say "look at this", never the red it reserves for something wrong. */
.pomy-day-capacity[data-state="over"] {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line);
}
.pomy-day-capacity-value {
  color: var(--pomy-ink);
  font-family: var(--pomy-font-mono);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
/* A day with nothing allocated has no figure to state, so the block states it
   in words — and words belong in the interface face at the interface size. The
   numeral face at 21px is for numerals. */
.pomy-day-capacity-value[data-figure="false"] {
  font: var(--pomy-text-title);
  letter-spacing: -.012em;
}
.pomy-day-capacity-meta { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 5px; }
.pomy-day-capacity-note { color: var(--pomy-faint); font: var(--pomy-text-meta); margin-top: 4px; }

/* A plan row decides; a Today row executes. A plan row carries the two
   decisions this screen is for — time for today, and place in the order — and
   nothing else. The title starts at the gutter: a completed row already says so
   in its own words, struck through, so a dot beside it said it twice. */
.pomy-plan-row {
  align-items: center;
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 10px;
  min-height: var(--pomy-row-h);
  padding: 9px 6px 9px var(--pomy-gutter);
}
.pomy-plan-body { flex: 1 1 auto; min-width: 0; }
.pomy-plan-title { color: var(--pomy-ink); font: var(--pomy-text-row); }
.pomy-plan-meta { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 3px; }
.pomy-plan-row[data-state="done"] .pomy-plan-title { color: var(--pomy-muted); text-decoration: line-through; }

/* The allocation is the one thing this screen is for, so it is the row's only
   visible control — and on a completed or closed row, a plain statement. */
.pomy-plan-alloc {
  border-radius: var(--pomy-r-control);
  color: var(--pomy-accent-text);
  flex: 0 0 auto;
  font-family: var(--pomy-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0 9px;
  white-space: nowrap;
}
button.pomy-plan-alloc {
  background: var(--pomy-accent-wash);
  border: 1px solid var(--pomy-accent-line-strong);
  height: var(--pomy-hit-min);
}

/* The order, moved one place at a time.
   Stacked rather than side by side, because up and down are directions before
   they are buttons: an arrow pointing up belongs above the one pointing down,
   and the pair then reads as a single control for one thing — where this row
   sits — instead of two unrelated actions.
   The stack is exactly one trailing-control tall, so a plan row keeps the same
   height it has always had, and it keeps its width whether or not either end is
   reachable, so rows do not shuffle sideways as the list is reordered. */
.pomy-plan-move {
  border-radius: var(--pomy-r-control);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: var(--pomy-hit-min);
  margin-left: 2px;
  width: 30px;
}
.pomy-plan-move-btn {
  border-radius: var(--pomy-r-control);
  color: var(--pomy-decor);
  display: grid;
  flex: 1 1 0;
  min-height: 0;
  place-items: center;
  width: 100%;
}
.pomy-plan-move-btn svg { height: 13px; stroke-width: 2.4; width: 13px; }
.pomy-plan-move-btn:hover:not(:disabled) { background: var(--pomy-surface); color: var(--pomy-ink); }
/* An end of the list is stated by the control being unavailable, and its
   accessible name says which end. Never hidden: a row that lost a button would
   look like a different kind of row. */
.pomy-plan-move-btn:disabled { color: var(--pomy-line-strong); cursor: default; }
button.pomy-plan-alloc:hover { background: var(--pomy-accent-halo); }
/* Nothing set yet is a prompt, not a figure: dashed, neutral, and in the panel
   type rather than the numeral type it has no numeral for. */
.pomy-plan-alloc[data-allocated="false"] {
  color: var(--pomy-muted);
  font: var(--pomy-text-control);
}
button.pomy-plan-alloc[data-allocated="false"] {
  background: transparent;
  border: 1px dashed var(--pomy-line-strong);
}
button.pomy-plan-alloc[data-allocated="false"]:hover { background: var(--pomy-surface); }
.pomy-plan-alloc[data-static="true"] {
  background: transparent;
  border: 1px solid var(--pomy-line);
  color: var(--pomy-muted);
  display: inline-flex;
  align-items: center;
  height: var(--pomy-hit-min);
}

.pomy-day-actions { padding: 16px var(--pomy-gutter) 4px; }
.pomy-day-actions-note {
  color: var(--pomy-muted);
  font: var(--pomy-text-meta);
  margin-top: 8px;
  text-align: center;
}

/* A switch inside a sheet, for a choice that sits alongside a value rather
   than replacing it. */
/* A group heading inside a sheet, for a control that answers a different
   question from the one above it. */
.pomy-sheet-group-cap { margin-top: 14px; }
.pomy-sheet-switch {
  align-items: center;
  border-top: 1px solid var(--pomy-line-soft);
  margin-top: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 2px 2px;
}
.pomy-sheet-switch-body { min-width: 0; }
.pomy-sheet-switch-label { color: var(--pomy-ink); font: var(--pomy-text-control); }
.pomy-sheet-switch-hint { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 3px; }

/* -------------------------------------------------------------- wrap up --- */

/* The label above a figure. Smaller than the section cap, because it names one
   column rather than one part of the screen. */
.pomy-capsm {
  color: var(--pomy-faint);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Target, focused, timesheet. Three quantities, never merged, and all three in
   the numeral face so the eye can compare them without reading them. */
.pomy-wrap-totals {
  border-bottom: 1px solid var(--pomy-line);
  display: flex;
  gap: 20px;
  padding: 15px var(--pomy-gutter) 14px;
}
.pomy-wrap-total { min-width: 0; }
.pomy-wrap-total-value {
  color: var(--pomy-ink);
  font-family: var(--pomy-font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-top: 4px;
}

/* Reviewing a day is reading, so a row states its figures and opens a sheet to
   change them. Controls on every row would make a list of decisions out of a
   list of work. */
.pomy-wrap-entry {
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  flex-direction: column;
  min-height: var(--pomy-row-h);
  padding: 12px var(--pomy-gutter);
  text-align: left;
  width: 100%;
}
.pomy-wrap-entry:hover:not(:disabled) { background: var(--pomy-surface-soft); }
.pomy-wrap-entry:disabled { cursor: default; opacity: .72; }
/* History from a disconnected provider: a statement, not a control. Full
   contrast, because it is true; no hover, because there is nothing to open. */
.pomy-wrap-entry[data-detached="true"] { cursor: default; }
.pomy-wrap-entry[data-detached="true"]:hover { background: transparent; }
.pomy-wrap-entry-head {
  align-items: flex-start;
  display: flex;
  gap: 9px;
  width: 100%;
}
.pomy-wrap-entry-body { flex: 1 1 auto; min-width: 0; }
.pomy-wrap-entry-title { color: var(--pomy-ink); font: var(--pomy-text-row); }
.pomy-wrap-entry-meta { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 2px; }
/* The sentence a chip cannot hold. Only present when there is one. */
.pomy-wrap-entry-detail { color: var(--pomy-faint); font: var(--pomy-text-meta); margin-top: 6px; }

/* Focused, timesheet, recorded — stated side by side and never merged. Only the
   middle one is editable, so only the middle one carries the ink weight. */
.pomy-wrap-figs {
  align-items: flex-end;
  display: flex;
  gap: 18px;
  margin-top: 9px;
  width: 100%;
}
.pomy-wrap-fig { min-width: 0; }
.pomy-wrap-fig-value {
  color: var(--pomy-muted);
  font-family: var(--pomy-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.pomy-wrap-fig-value--strong { color: var(--pomy-ink); font-weight: 500; }
/* A figure somebody decided is stated in the accent the panel uses for "look at
   this", never in a warning colour. */
.pomy-wrap-fig-value[data-edited="true"] { color: var(--pomy-accent-text); }
.pomy-wrap-figs-chevron {
  align-items: center;
  color: var(--pomy-decor);
  display: flex;
  margin-left: auto;
}
.pomy-wrap-figs-chevron svg { height: 12px; width: 12px; }

/* The send action. Small, accent, and it names what it will write. */
.pomy-btn--send {
  background: var(--pomy-accent);
  box-shadow: var(--pomy-lift-accent);
  color: var(--pomy-on-accent);
  flex: 0 0 auto;
  font-size: 11.5px;
  height: 30px;
  padding: 0 12px;
  white-space: nowrap;
}
.pomy-btn--send:disabled { background: var(--pomy-surface); box-shadow: none; color: var(--pomy-faint); opacity: 1; }

/* Neutral, quiet, and never the way out of anything important on its own. */
.pomy-btn--ghost {
  background: var(--pomy-canvas);
  border: 1px solid var(--pomy-line-strong);
  color: var(--pomy-ink);
  font-size: 12px;
  height: 30px;
  padding: 0 11px;
}
.pomy-btn--ghost:hover:not(:disabled) { background: var(--pomy-surface); }

/* A run in progress, or the outcome of one. One block, in place, that says how
   many it will attempt, then how far it has got, then what happened. */
.pomy-notice-strip {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  margin: 13px var(--pomy-gutter) 0;
  padding: 12px 13px 13px;
}
.pomy-notice-strip[data-tone="accent"] {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line);
}
.pomy-notice-strip-head {
  align-items: center;
  display: flex;
  gap: 9px;
}
.pomy-notice-strip-title {
  color: var(--pomy-ink);
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}
.pomy-notice-strip-action {
  border: 1px solid var(--pomy-line-strong);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-ink);
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  height: 26px;
  padding: 0 9px;
}
.pomy-notice-strip-action:hover { background: var(--pomy-surface); }
.pomy-notice-strip-note { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 7px; }

.pomy-progress-bar {
  background: var(--pomy-ring-track);
  border-radius: var(--pomy-r-chip);
  height: 3px;
  margin-top: 9px;
  overflow: hidden;
}
.pomy-progress-bar span {
  background: var(--pomy-accent);
  border-radius: var(--pomy-r-chip);
  display: block;
  height: 100%;
  transition: width var(--pomy-t-enter) var(--pomy-ease);
}

/* Inside the review sheet: the things that are facts rather than fields. */
.pomy-review-facts {
  border-bottom: 1px solid var(--pomy-line-soft);
  border-top: 1px solid var(--pomy-line-soft);
  margin-bottom: 4px;
  padding: 4px 0;
}
.pomy-review-fact {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 7px 2px;
}
.pomy-review-fact-key { color: var(--pomy-muted); font: var(--pomy-text-control); }
.pomy-review-fact-value { color: var(--pomy-ink); font: var(--pomy-text-control); font-variant-numeric: tabular-nums; }
.pomy-review-note { color: var(--pomy-muted); font: var(--pomy-text-meta); padding: 12px var(--pomy-gutter) 0; }
.pomy-sheet-scroll .pomy-review-note { padding: 12px 2px 0; }

/* ---------------------------------------------------------------- end day -- */

/* Carry-over, then the action that closes the day, in that order: the choice
   belongs to the decision and not to a dialog behind it. */
.pomy-wrap-end {
  border-top: 1px solid var(--pomy-line);
  margin-top: 20px;
  padding: 16px var(--pomy-gutter) 4px;
}
.pomy-wrap-end-note { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 5px; }
.pomy-wrap-end-action { margin-top: 16px; }

.pomy-carry-list { margin-top: 9px; }
/* Carry is a choice per item, so each row carries exactly one switch — and
   nothing is preselected. */
.pomy-carry-row {
  align-items: center;
  border-top: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: var(--pomy-hit-primary);
  padding: 9px 0;
}
.pomy-carry-body { min-width: 0; }
.pomy-carry-title { color: var(--pomy-ink); font-size: 12px; line-height: 1.35; }
.pomy-carry-meta { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 2px; }

/* The day after it is closed. Quiet, factual, and not a finish time. */
.pomy-closed-card {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  margin: 13px var(--pomy-gutter) 0;
  padding: 12px 13px 13px;
}
.pomy-closed-title { color: var(--pomy-ink); font: var(--pomy-text-control); font-weight: 600; }
.pomy-closed-body { color: var(--pomy-muted); font: var(--pomy-text-meta); margin-top: 4px; }
/* Reopening is ordinary and reversible, so it is neutral and last: never above
   a timesheet that still needs review, and never styled as a risk. */
.pomy-closed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

/* --------------------------------------------------- today's list of work -- */

/* The list head, shared by Focus, Plan and Wrap up: what this list is, one line
   about what is in it, and at most one action. */
.pomy-today-head {
  align-items: flex-end;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 14px var(--pomy-gutter) 9px;
}
.pomy-today-head-body { min-width: 0; }
.pomy-today-summary { color: var(--pomy-muted); font-size: 11.5px; margin-top: 3px; }
.pomy-today-browse {
  background: var(--pomy-canvas);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-ink);
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 500;
  height: 28px;
  padding: 0 10px;
}
.pomy-today-browse:hover { background: var(--pomy-surface); border-color: var(--pomy-line-strong); }

/* The empty state sits below the timer, not instead of it. */
.pomy-today-empty {
  animation: pomy-fade .2s both;
  border: 1px dashed var(--pomy-line-strong);
  border-radius: var(--pomy-r-block);
  margin: 2px var(--pomy-gutter) 18px;
  padding: 26px 18px;
  text-align: center;
}
/* No title: the section head above the block has already said the list is
   empty. What is left is one line about where the work comes from, and the
   action that gets some. */
.pomy-today-empty-body {
  color: var(--pomy-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 30ch;
}
.pomy-today-empty .pomy-btn { margin-top: 15px; }

/* Three variants. Each carries a shape as well as a colour. */
.pomy-today-row {
  display: flex;
  /* The system's row height applies at every level and in every source. Real
     content clears it comfortably; this is the floor for a one-word item. */
  min-height: var(--pomy-row-h);
}

.pomy-today-row[data-state="active"] {
  align-items: flex-start;
  background: var(--pomy-accent-wash);
  border-bottom: 1px solid var(--pomy-accent-line);
  border-top: 1px solid var(--pomy-accent-line);
  gap: 11px;
  padding: 12px var(--pomy-gutter);
}
.pomy-today-row[data-state="waiting"] { align-items: center; border-bottom: 1px solid var(--pomy-line-soft); }
.pomy-today-row[data-state="done"] {
  align-items: flex-start;
  border-bottom: 1px solid var(--pomy-line-soft);
  gap: 11px;
  padding: 11px var(--pomy-gutter);
}

.pomy-today-open {
  align-items: flex-start;
  display: flex;
  flex: 1 1 auto;
  gap: 11px;
  min-width: 0;
  padding: 12px 4px 12px var(--pomy-gutter);
  text-align: left;
}
.pomy-today-open:hover { background: var(--pomy-surface); }

.pomy-today-mark {
  border-radius: 50%;
  display: grid;
  flex: 0 0 auto;
  height: 14px;
  margin-top: 2px;
  place-items: center;
  width: 14px;
}
.pomy-today-mark[data-state="active"] { background: var(--pomy-accent); box-shadow: 0 0 0 3px var(--pomy-accent-halo); }
.pomy-today-mark[data-state="active"]::after {
  background: var(--pomy-on-accent);
  border-radius: 50%;
  content: "";
  height: 4px;
  width: 4px;
}
.pomy-today-mark[data-state="waiting"] { border: 1.5px solid var(--pomy-line-strong); }
.pomy-today-mark[data-state="done"] { background: var(--pomy-done-fill); color: var(--pomy-done-mark); }
.pomy-today-mark[data-state="done"] svg { height: 10px; stroke-width: 3.2; width: 10px; }

.pomy-today-body { flex: 1 1 auto; min-width: 0; }
.pomy-today-title { color: var(--pomy-ink); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.pomy-today-row[data-state="active"] .pomy-today-title { font-weight: 600; }
.pomy-today-row[data-state="done"] .pomy-today-title {
  color: var(--pomy-faint);
  text-decoration: line-through;
  text-decoration-color: var(--pomy-line-strong);
}
.pomy-today-meta { color: var(--pomy-muted); font-size: 11.5px; margin-top: 2px; }
.pomy-today-row[data-state="done"] .pomy-today-meta { color: var(--pomy-faint); }

/* A provider due date, wherever a metadata line carries one.
   Words first: the label already reads "Overdue · 5 Sep" or "Due today", and
   the tone only ever agrees with it. A future date takes no tone at all — a
   list where every date is coloured has no colour left to spend. A completed
   row inherits its line's quieter ink rather than shouting a date that no
   longer needs acting on. */
.pomy-due[data-tone="plain"] { color: inherit; }
.pomy-due[data-tone="attention"] { color: var(--pomy-accent-text); }
.pomy-due[data-tone="danger"] { color: var(--pomy-danger); }
.pomy-today-row[data-state="done"] .pomy-due,
.pomy-committed-row .pomy-due { color: inherit; }

.pomy-today-now {
  color: var(--pomy-accent-text);
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-top: 5px;
  text-transform: uppercase;
}

/* 30px ellipsis, so rows keep exactly one visible control. */
.pomy-row-menu {
  border-radius: var(--pomy-r-control);
  color: var(--pomy-decor);
  display: grid;
  flex: 0 0 auto;
  height: 30px;
  margin: 0 8px 0 4px;
  place-items: center;
  width: 30px;
}
.pomy-row-menu:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
.pomy-row-menu svg { height: 15px; stroke-width: 2.2; width: 15px; }
.pomy-today-row[data-state="active"] .pomy-row-menu {
  color: var(--pomy-accent-text);
  height: 28px;
  margin: 0;
  width: 28px;
}
.pomy-today-row[data-state="active"] .pomy-row-menu:hover { background: var(--pomy-accent-halo); }

.pomy-disclosure {
  align-items: center;
  color: var(--pomy-muted);
  display: flex;
  font-size: 11.5px;
  font-weight: 500;
  gap: 7px;
  padding: 12px var(--pomy-gutter);
  width: 100%;
}
.pomy-disclosure:hover { color: var(--pomy-ink); }
.pomy-disclosure-chevron { display: grid; place-items: center; transition: transform 160ms var(--pomy-ease); }
.pomy-disclosure[aria-expanded="true"] .pomy-disclosure-chevron { transform: rotate(90deg); }
.pomy-disclosure svg { height: 11px; width: 11px; }

.pomy-scroll-tail { height: 22px; }

/* ----------------------------------------------------------------- work --- */

.pomy-source-switch {
  border-bottom: 1px solid var(--pomy-line);
  flex: 0 0 auto;
  padding: 9px 12px;
}
.pomy-source-switch .pomy-segmented { border-radius: var(--pomy-r-field); gap: 3px; }
.pomy-source-switch .pomy-segment { font-size: 11px; }

.pomy-context {
  border-bottom: 1px solid var(--pomy-line);
  flex: 0 0 auto;
  padding: 11px var(--pomy-gutter) 12px;
}
.pomy-back {
  align-items: center;
  border-radius: var(--pomy-r-quiet);
  color: var(--pomy-muted);
  display: flex;
  font-size: 11.5px;
  font-weight: 500;
  gap: 5px;
  height: 24px;
  margin: 0 0 7px -6px;
  padding: 0 7px;
}
.pomy-back:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
.pomy-back svg { height: 11px; width: 11px; }

.pomy-context-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pomy-context-title h2 {
  color: var(--pomy-ink);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}
.pomy-context-code {
  color: var(--pomy-muted);
  font-family: var(--pomy-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
.pomy-context-sub { color: var(--pomy-muted); font-size: 11.5px; margin-top: 4px; }
/* Pushed to the end of the title line, and never squeezed by a long client or
   job name: the name wraps, the control keeps its 30px. */
.pomy-context-action { flex: 0 0 auto; margin-left: auto; }
/* Two controls where a screen has two things to do with itself. The pair does
   the pushing, so neither control carries a margin of its own. */
.pomy-context-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 4px; margin-left: auto; }
.pomy-context-actions > .pomy-context-action { margin-left: 0; }

/* The source's current list, stated as a control. The list is what is being
   browsed, so it is changeable in place rather than only from Settings. */
.pomy-list-control {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  display: flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 7px;
  height: 30px;
  margin-top: 7px;
  max-width: 100%;
  padding: 0 9px;
}
.pomy-list-control:hover { border-color: var(--pomy-line-strong); }
.pomy-list-control-name { min-width: 0; }
.pomy-list-control-tag {
  background: var(--pomy-canvas);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-tight);
  color: var(--pomy-faint);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1px 5px;
  text-transform: uppercase;
}
.pomy-list-control-chevron { color: var(--pomy-decor); flex: 0 0 auto; height: 12px; margin-left: auto; width: 12px; }

.pomy-search {
  border-bottom: 1px solid var(--pomy-line);
  flex: 0 0 auto;
  padding: 10px var(--pomy-gutter);
}
.pomy-search-field {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  display: flex;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  transition: border-color var(--pomy-t-state) var(--pomy-ease), box-shadow var(--pomy-t-state) var(--pomy-ease);
}
.pomy-search-field:focus-within {
  border-color: var(--pomy-accent-line-strong);
  box-shadow: 0 0 0 3px var(--pomy-accent-halo);
}
.pomy-search-field svg { color: var(--pomy-decor); flex: 0 0 auto; height: 14px; width: 14px; }
.pomy-search-input {
  background: none;
  border: none;
  color: var(--pomy-ink);
  flex: 1 1 auto;
  font-size: 12.5px;
  min-width: 0;
  outline: none;
  padding: 0;
}
.pomy-search-input::placeholder { color: var(--pomy-faint); }
.pomy-search-input::-webkit-search-cancel-button { display: none; }
/* The result count lives inside the field, so no extra line appears above the list. */
.pomy-search-count { color: var(--pomy-muted); flex: 0 0 auto; font-size: 11px; white-space: nowrap; }

.pomy-rows { display: flex; flex-direction: column; }
.pomy-row-wrap { position: relative; }

.pomy-row {
  align-items: center;
  display: flex;
  gap: 11px;
  min-height: var(--pomy-row-h);
  padding: 10px 14px 10px 15px;
  border-bottom: 1px solid var(--pomy-line-soft);
}
.pomy-row[data-selected="true"]::before {
  background: var(--pomy-accent);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
}

.pomy-check {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--pomy-line-strong);
  border-radius: var(--pomy-r-check);
  display: grid;
  flex: 0 0 auto;
  height: 19px;
  margin: 0;
  place-items: center;
  transition: background var(--pomy-t-state) var(--pomy-ease), border-color var(--pomy-t-state) var(--pomy-ease);
  width: 19px;
}
.pomy-check:checked { background: var(--pomy-accent); border-color: var(--pomy-accent); }
.pomy-check::after {
  border-bottom: 2px solid var(--pomy-on-accent);
  border-left: 2px solid var(--pomy-on-accent);
  content: "";
  height: 4px;
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px);
  width: 8px;
}
.pomy-check:checked::after { opacity: 1; }

.pomy-row-select { align-items: center; display: flex; flex: 1 1 auto; gap: 11px; min-width: 0; }
.pomy-row-body { flex: 1 1 auto; min-width: 0; }
.pomy-row-title { color: var(--pomy-ink); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.pomy-row-meta {
  align-items: center;
  color: var(--pomy-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11.5px;
  gap: 6px;
  margin-top: 2px;
}
.pomy-row-code {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-check);
  color: var(--pomy-muted);
  font-family: var(--pomy-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Its own hit area, so it can never toggle the job. */
.pomy-row-action {
  align-items: center;
  background: transparent;
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  display: flex;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 500;
  gap: 4px;
  height: 30px;
  padding: 0 9px;
}
.pomy-row-action:hover { background: var(--pomy-surface); border-color: var(--pomy-line-strong); color: var(--pomy-ink); }
.pomy-row-action svg { height: 10px; width: 10px; }

.pomy-nav-row {
  align-items: center;
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 11px;
  min-height: var(--pomy-row-h);
  padding: 11px 14px 11px var(--pomy-gutter);
  text-align: left;
  width: 100%;
}
.pomy-nav-row:hover { background: var(--pomy-surface); }
.pomy-nav-chevron { color: var(--pomy-decor); flex: 0 0 auto; height: 13px; stroke-width: 1.5; width: 13px; }

/* A heading over a set of rows that folds away.
   Shorter and quieter than the rows under it, so the hierarchy is read before
   either level is, and separated by a hairline above rather than a box around:
   a group is a break in one list, not a card holding a smaller list. The whole
   heading is the target and clears the ghost-control height on its own. */
.pomy-group-head {
  align-items: center;
  background: var(--pomy-surface-soft);
  border-bottom: 1px solid var(--pomy-line-soft);
  color: var(--pomy-ink);
  display: flex;
  font: var(--pomy-text-control);
  gap: 8px;
  min-height: var(--pomy-hit-min);
  padding: 7px 14px 7px var(--pomy-gutter);
  text-align: left;
  width: 100%;
}
.pomy-group-head:hover { background: var(--pomy-surface); }
/* The name takes the room, so the count and the chevron read as one control at
   the end of the line instead of the count trailing the name like a suffix. */
.pomy-group-name { flex: 1 1 auto; font-weight: 600; min-width: 0; }
/* How many lists are under the heading. The panel already knows this; it never
   stands for anything a provider would have to be asked for. */
.pomy-group-count {
  color: var(--pomy-faint);
  flex: 0 0 auto;
  font: var(--pomy-text-meta);
  font-variant-numeric: tabular-nums;
}
.pomy-group-chevron {
  color: var(--pomy-decor);
  flex: 0 0 auto;
  height: 12px;
  width: 12px;
}
.pomy-group-chevron > svg { height: 100%; width: 100%; }
/* The lists inside a group step in, so the heading reads as their heading. */
.pomy-group-lists .pomy-nav-row { padding-left: 26px; }
.pomy-group-empty {
  border-bottom: 1px solid var(--pomy-line-soft);
  color: var(--pomy-muted);
  font: var(--pomy-text-meta);
  padding: 10px 14px 10px 26px;
}

/* A group is a break in one list, not a card around a smaller list, so what
   separates it from what came before is space — the hairline under the last row
   above is already the line. Two rules stacked would be a border pretending to
   be a box. */
.pomy-ms-browser .pomy-group { margin-top: 7px; }

/* A catalogue of lists is scanned, not read: every row is one line and the same
   height, so the eye runs down the names instead of stepping over a two-line
   row in the middle of a group. The full name is still spoken — the row carries
   it in its accessible name — and still reachable, one press away in the list
   it opens. Scoped to this browser so no other navigation row changes. */
.pomy-ms-browser .pomy-nav-row .pomy-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pomy-committed-row {
  align-items: center;
  background: var(--pomy-surface-soft);
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 11px;
  min-height: var(--pomy-row-h);
  padding: 10px 14px 10px 15px;
}
.pomy-committed-mark {
  background: var(--pomy-done-fill);
  border-radius: var(--pomy-r-check);
  color: var(--pomy-done-mark);
  display: grid;
  flex: 0 0 auto;
  height: 18px;
  place-items: center;
  width: 18px;
}
.pomy-committed-mark svg { height: 12px; stroke-width: 3; width: 12px; }
.pomy-committed-row .pomy-row-title { color: var(--pomy-muted); }
.pomy-committed-row .pomy-row-meta { color: var(--pomy-faint); }
/* A Metric's own colours would otherwise fight the committed row's quieter
   voice — everything on a committed row reads at one, fainter level. */
.pomy-committed-row .pomy-metric-icon,
.pomy-committed-row .pomy-metric-value,
.pomy-committed-row .pomy-metric-label { color: inherit; }
.pomy-committed-flag {
  color: var(--pomy-faint);
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------- skeleton --- */

.pomy-skeletons { padding: 2px 0; }
.pomy-skeleton-row {
  align-items: center;
  animation: pomy-pulse 1.4s ease-in-out infinite;
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 12px;
  padding: 13px var(--pomy-gutter);
}
.pomy-skeleton-box {
  background: var(--pomy-skeleton);
  border-radius: var(--pomy-r-check);
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}
.pomy-skeleton-bar { background: var(--pomy-skeleton); border-radius: var(--pomy-r-chip); display: block; height: 9px; }

/* --------------------------------------------------------------- notice --- */

.pomy-notice {
  align-items: center;
  animation: pomy-fade .22s both;
  display: flex;
  flex-direction: column;
  padding: 34px 22px 30px;
  text-align: center;
}
.pomy-notice-mark {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  display: grid;
  height: 40px;
  margin-bottom: 13px;
  place-items: center;
  width: 40px;
}
.pomy-notice[data-glyph="gold"] .pomy-notice-mark {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line);
}
.pomy-notice[data-glyph="red"] .pomy-notice-mark {
  background: var(--pomy-danger-wash);
  border-color: var(--pomy-danger-line);
}
.pomy-notice-mark img { height: 19px; object-fit: contain; width: 19px; }
/* A connection in flight: the mark breathes so the wait reads as progress
   rather than a stalled screen. Nothing else about the notice changes. */
.pomy-notice[data-busy="true"] .pomy-notice-mark { animation: pomy-pulse 1.4s ease-in-out infinite; }
.pomy-notice-action:disabled { cursor: default; opacity: .65; }
/* The glyph is a dot, so red appears on exactly one element in the panel. */
.pomy-notice-dot { background: var(--pomy-accent); border-radius: 50%; height: 9px; width: 9px; }
.pomy-notice[data-glyph="red"] .pomy-notice-dot { background: var(--pomy-danger); }
.pomy-notice-title { color: var(--pomy-ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.pomy-notice-body {
  color: var(--pomy-muted);
  font-size: 12px;
  line-height: 1.55;
  margin-top: 6px;
  max-width: 270px;
}
.pomy-notice-action {
  align-items: center;
  background: var(--pomy-accent);
  border-radius: var(--pomy-r-field);
  box-shadow: var(--pomy-lift-accent);
  color: var(--pomy-on-accent);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  height: 38px;
  margin-top: 15px;
  padding: 0 15px;
}
.pomy-notice-action img { height: 14px; object-fit: contain; width: 14px; }
.pomy-notice-alt {
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  font-size: 12px;
  font-weight: 500;
  height: 30px;
  margin-top: 9px;
  padding: 0 10px;
  text-decoration: underline;
  text-decoration-color: var(--pomy-line-strong);
  text-underline-offset: 3px;
}
.pomy-notice-alt:hover { color: var(--pomy-ink); }

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

.pomy-btn {
  align-items: center;
  border-radius: var(--pomy-r-field);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  height: 38px;
  justify-content: center;
  padding: 0 15px;
}
.pomy-btn:disabled { cursor: default; opacity: .5; }
/* A disabled primary reads as off, not as a live control behind frosted glass:
   the accent is how the panel says "this is the thing to press", so a faded
   accent is a mixed signal. The reason it cannot be pressed is always stated
   next to it. */
.pomy-btn--primary:disabled {
  background: var(--pomy-surface);
  box-shadow: none;
  color: var(--pomy-faint);
  opacity: 1;
}
.pomy-btn img, .pomy-btn svg { flex: 0 0 auto; height: 14px; width: 14px; }
.pomy-btn--primary { background: var(--pomy-accent); box-shadow: var(--pomy-lift-accent); color: var(--pomy-on-accent); }
.pomy-btn--primary[data-tone="danger"] { background: var(--pomy-danger); box-shadow: none; color: var(--pomy-on-danger); }
.pomy-btn--secondary {
  background: transparent;
  border: 1px solid var(--pomy-line);
  color: var(--pomy-ink);
  font-weight: 500;
}
.pomy-btn--secondary:hover:not(:disabled) { background: var(--pomy-surface); border-color: var(--pomy-line-strong); }
.pomy-btn--block { width: 100%; }

/* ----------------------------------------------------------- action bar --- */

.pomy-action-bar {
  animation: pomy-in .18s var(--pomy-ease) both;
  background: var(--pomy-canvas);
  border-top: 1px solid var(--pomy-line);
  box-shadow: var(--pomy-lift-bar);
  flex: 0 0 auto;
  padding: 10px var(--pomy-gutter) 12px;
}
.pomy-action-bar-head { align-items: center; display: flex; gap: 8px; margin-bottom: 8px; }
.pomy-action-bar-count { color: var(--pomy-muted); font-size: 11.5px; font-weight: 500; }
.pomy-action-bar-clear {
  border-radius: var(--pomy-r-tight);
  color: var(--pomy-faint);
  font-size: 11px;
  font-weight: 500;
  height: 22px;
  margin-left: auto;
  padding: 0 6px;
}
.pomy-action-bar-clear:hover { color: var(--pomy-ink); }
.pomy-action-bar-commit {
  background: var(--pomy-accent);
  border-radius: var(--pomy-r-field);
  box-shadow: var(--pomy-lift-accent);
  color: var(--pomy-on-accent);
  font-size: 13.5px;
  font-weight: 600;
  height: 40px;
  transition: transform var(--pomy-t-state) var(--pomy-ease);
  width: 100%;
}
.pomy-action-bar-commit:active:not(:disabled) { transform: translateY(1px); }
.pomy-action-bar-commit:disabled { cursor: default; opacity: .6; }

/* ------------------------------------------------------------- settings --- */

/* One line, and only the name of the screen. Leaving is the top bar's job,
   which is directly above this and never hidden. */
.pomy-settings-head {
  align-items: center;
  border-bottom: 1px solid var(--pomy-line);
  display: flex;
  flex: 0 0 auto;
  min-height: var(--pomy-hit-primary);
  padding: 6px var(--pomy-gutter) 7px;
}
.pomy-settings-head h2 {
  color: var(--pomy-ink);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  min-width: 0;
}

.pomy-settings-section { border-bottom: 1px solid var(--pomy-line); padding: 14px var(--pomy-gutter) 15px; }
.pomy-settings-section > .pomy-cap { display: block; margin-bottom: 11px; }

.pomy-setting { align-items: center; display: flex; gap: 12px; padding: 7px 0; }
.pomy-setting-body { flex: 1 1 auto; min-width: 0; }
.pomy-setting-title { color: var(--pomy-ink); font-size: 12.5px; font-weight: 500; }
.pomy-setting-hint { color: var(--pomy-muted); font-size: 11px; line-height: 1.45; margin-top: 2px; }
.pomy-setting-value {
  color: var(--pomy-muted);
  flex: 0 0 auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.pomy-toggle {
  align-items: center;
  background: var(--pomy-switch-off);
  border-radius: var(--pomy-r-pill);
  display: flex;
  flex: 0 0 auto;
  height: 20px;
  justify-content: flex-start;
  padding: 2px;
  transition: background 160ms var(--pomy-ease);
  width: 34px;
}
.pomy-toggle[aria-checked="true"] { background: var(--pomy-accent); justify-content: flex-end; }
.pomy-toggle-knob {
  background: var(--pomy-knob);
  border-radius: 50%;
  box-shadow: var(--pomy-lift-knob);
  display: block;
  height: 16px;
  width: 16px;
}

.pomy-stepper {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  display: flex;
  flex: 0 0 auto;
  height: 30px;
  overflow: hidden;
}
.pomy-stepper button {
  align-items: center;
  color: var(--pomy-muted);
  display: grid;
  height: 100%;
  place-items: center;
  width: 26px;
}
.pomy-stepper button:first-child { border-right: 1px solid var(--pomy-line); }
.pomy-stepper button:last-child { border-left: 1px solid var(--pomy-line); }
.pomy-stepper button:hover:not(:disabled) { background: var(--pomy-canvas); color: var(--pomy-ink); }
.pomy-stepper button:disabled { color: var(--pomy-decor); cursor: default; }
/* The stepper clips its children to keep its rounded ends, which would clip an
   outset focus ring with them. The ring draws inside instead. */
.pomy-stepper button:focus-visible { outline-offset: -2px; }
.pomy-stepper button svg { height: 13px; width: 13px; }
.pomy-stepper-value {
  color: var(--pomy-ink);
  font-family: var(--pomy-font-mono);
  font-size: 12px;
  font-weight: 500;
  min-width: 34px;
  text-align: center;
}

/* The current focus colour, as the control that changes it. */
.pomy-accent-trigger {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  display: flex;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 500;
  gap: 7px;
  height: 30px;
  padding: 0 9px;
}
.pomy-accent-trigger:hover { border-color: var(--pomy-line-strong); }
.pomy-accent-trigger-dot {
  border-radius: 50%;
  box-shadow: var(--pomy-swatch-edge);
  flex: 0 0 auto;
  height: 15px;
  width: 15px;
}
.pomy-accent-trigger svg { color: var(--pomy-decor); flex: 0 0 auto; height: 11px; width: 11px; }

/* Picker
   An embedded picker, not a popover: the sheet is already the surface, so the
   field and the slider run the full content width and use the same radius and
   spacing tokens as everything else in it. */
.pomy-picker { display: flex; flex-direction: column; gap: 11px; }

/* Saturation across, brightness down, over the current hue. Two gradients so
   the white and black ramps stay independent of the hue underneath. */
.pomy-picker-field {
  background:
    var(--pomy-picker-shade),
    var(--pomy-picker-tint),
    var(--pomy-picker-hue, var(--pomy-accent));
  border-radius: var(--pomy-r-field);
  cursor: crosshair;
  height: 158px;
  position: relative;
  touch-action: none;
  width: 100%;
}

.pomy-picker-hue {
  background: var(--pomy-picker-spectrum);
  border-radius: var(--pomy-r-pill);
  cursor: pointer;
  height: 13px;
  position: relative;
  touch-action: none;
  width: 100%;
}

/* One handle shape for both controls. It is centred on its position and never
   clipped, because the track reserves room for it rather than the handle
   shrinking at the ends. */
.pomy-picker-field,
.pomy-picker-hue { margin-inline: 9px; width: calc(100% - 18px); }

.pomy-picker-handle {
  border: 2px solid var(--pomy-handle-edge);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--pomy-handle-ring), var(--pomy-lift-chip);
  height: 18px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
}
.pomy-picker-handle--hue { top: 50%; }

.pomy-picker-field:focus-visible,
.pomy-picker-hue:focus-visible { outline: 2px solid var(--pomy-accent); outline-offset: 3px; }

/* Compact circular presets. The ring sits outside the swatch, so selecting one
   never moves the row. */
.pomy-picker-presets { display: flex; flex-wrap: wrap; gap: 10px; padding-inline: 9px; }
.pomy-picker-preset {
  border-radius: 50%;
  box-shadow: var(--pomy-swatch-edge);
  height: 24px;
  transition: box-shadow var(--pomy-t-state) var(--pomy-ease);
  width: 24px;
}
.pomy-picker-preset[aria-pressed="true"] {
  box-shadow: var(--pomy-swatch-edge), 0 0 0 2px var(--pomy-raised), 0 0 0 4px currentColor;
  color: var(--pomy-ink);
}

.pomy-accent-field { margin-top: 13px; }
.pomy-accent-hex {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  font-family: var(--pomy-font-mono);
  font-size: 12.5px;
  height: 34px;
  letter-spacing: .02em;
  padding: 0 10px;
  text-transform: uppercase;
  width: 100%;
}
.pomy-accent-hex:focus {
  border-color: var(--pomy-accent-line-strong);
  box-shadow: 0 0 0 3px var(--pomy-accent-halo);
  outline: none;
}
.pomy-accent-error { color: var(--pomy-danger); font-size: 11px; margin-top: 5px; min-height: 14px; }
.pomy-accent-preview {
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 7px;
  padding: 12px;
}
.pomy-accent-preview-chip {
  align-items: center;
  align-self: flex-start;
  border-radius: var(--pomy-r-pill);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
}
.pomy-accent-preview-chip svg { height: 14px; width: 14px; }
.pomy-accent-preview-row { align-items: center; display: flex; gap: 9px; }
.pomy-accent-preview-dot { border-radius: 50%; flex: 0 0 auto; height: 12px; width: 12px; }
.pomy-accent-preview-text { flex: 1 1 auto; font-size: 11.5px; font-weight: 600; }
.pomy-accent-preview-break {
  border-radius: var(--pomy-r-tight);
  color: var(--pomy-on-break);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 7px;
  text-transform: uppercase;
}

.pomy-swatches { display: flex; flex: 0 0 auto; gap: 6px; }
.pomy-swatch { border-radius: var(--pomy-r-quiet); height: 21px; width: 21px; }
.pomy-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pomy-canvas), 0 0 0 3.5px currentColor; }
.pomy-swatch--custom { border: 1.25px dashed var(--pomy-decor); }

.pomy-setting .pomy-segmented { border-radius: var(--pomy-r-control); flex: 0 0 auto; gap: 2px; padding: 2px; }
.pomy-setting .pomy-segment { border-radius: var(--pomy-r-tight); flex: 0 0 auto; font-size: 11px; height: 24px; padding: 0 9px; }

.pomy-setting-nav {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  display: flex;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 500;
  gap: 6px;
  height: 30px;
  max-width: 150px;
  padding: 0 9px;
}
.pomy-setting-nav:hover { border-color: var(--pomy-line-strong); }
.pomy-setting-nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pomy-setting-nav svg { flex: 0 0 auto; height: 11px; width: 11px; }

.pomy-setting-action {
  background: transparent;
  border: 1px solid var(--pomy-line-strong);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  height: 30px;
  padding: 0 11px;
}
.pomy-setting-action[data-danger="true"] { border-color: var(--pomy-danger-line); color: var(--pomy-danger); }

.pomy-setting-field {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-input);
  color: var(--pomy-ink);
  font-size: 11.5px;
  height: 32px;
  margin: 4px 0 2px;
  padding: 0 10px;
  width: 100%;
}
.pomy-setting-field:focus {
  border-color: var(--pomy-accent-line-strong);
  box-shadow: 0 0 0 3px var(--pomy-accent-halo);
  outline: none;
}
.pomy-setting-field::placeholder { color: var(--pomy-faint); }

.pomy-settings-foot {
  align-items: center;
  color: var(--pomy-faint);
  display: flex;
  font-size: 11px;
  gap: 8px;
  padding: 14px var(--pomy-gutter);
}
.pomy-settings-foot img { height: 14px; object-fit: contain; opacity: .8; width: 14px; }

/* ------------------------------------------------------- gates and setup -- */

.pomy-gate {
  animation: pomy-fade .2s both;
  background: var(--pomy-canvas);
  display: flex;
  flex-direction: column;
  inset: 0;
  padding: 0 22px;
  position: absolute;
  z-index: 16;
}
.pomy-gate-spacer { flex: 0 0 auto; height: 118px; }
.pomy-gate-lockup { align-self: flex-start; height: 24px; width: auto; }
.pomy-gate-title {
  color: var(--pomy-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-top: 22px;
}
.pomy-gate-body {
  color: var(--pomy-muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 10px;
  max-width: 292px;
}
.pomy-gate-wait { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.pomy-gate-wait .pomy-skeleton-bar { animation: pomy-pulse 1.4s ease-in-out infinite; }
.pomy-gate-action {
  align-items: center;
  align-self: flex-start;
  background: var(--pomy-accent);
  border-radius: var(--pomy-r-raised);
  box-shadow: var(--pomy-lift-accent);
  color: var(--pomy-on-accent);
  display: flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 9px;
  height: 44px;
  margin-top: 24px;
  padding: 0 16px;
}
.pomy-gate-action img { height: 15px; width: 15px; }
.pomy-gate-alt {
  align-self: flex-start;
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  font-size: 12px;
  font-weight: 500;
  height: 32px;
  margin: 15px 0 0 -10px;
  padding: 0 10px;
}
.pomy-gate-alt:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
.pomy-gate-foot {
  color: var(--pomy-faint);
  font-size: 11px;
  line-height: 1.5;
  margin-top: auto;
  padding-bottom: 20px;
}

.pomy-setup .pomy-gate-spacer { height: 110px; }
.pomy-setup .pomy-gate-lockup { height: 26px; }
.pomy-setup-title {
  color: var(--pomy-ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-top: 20px;
}
.pomy-setup-body {
  color: var(--pomy-muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 11px;
  max-width: 290px;
}
.pomy-setup-sources { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }

/* The start screen's three entries are one system: Pomy is a tile like the
   others, not a button floating above them. The local one leads, because it is
   the one that works without anything else. */
.pomy-setup-tile {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  display: flex;
  gap: 11px;
  padding: 12px 13px;
  text-align: left;
  transition: border-color var(--pomy-t-state) var(--pomy-ease), background var(--pomy-t-state) var(--pomy-ease);
  width: 100%;
}
.pomy-setup-tile:hover { border-color: var(--pomy-line-strong); }
.pomy-setup-tile[data-primary="true"] {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line);
}
.pomy-setup-tile[data-primary="true"]:hover { border-color: var(--pomy-accent-line-strong); }
.pomy-setup-tile-mark {
  align-items: center;
  background: var(--pomy-canvas);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-control);
  display: grid;
  flex: 0 0 auto;
  height: 34px;
  place-items: center;
  width: 34px;
}
.pomy-setup-tile[data-primary="true"] .pomy-setup-tile-mark { border-color: var(--pomy-accent-line); }
.pomy-setup-tile-mark img { height: 17px; object-fit: contain; width: 17px; }
.pomy-setup-tile-body { flex: 1 1 auto; min-width: 0; }
.pomy-setup-tile-title { color: var(--pomy-ink); display: block; font-size: 13px; font-weight: 600; }
.pomy-setup-tile-meta { color: var(--pomy-muted); display: block; font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.pomy-setup-tile-go {
  align-items: center;
  border: 1px solid var(--pomy-line-strong);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-ink);
  display: flex;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
}
.pomy-setup-tile[data-primary="true"] .pomy-setup-tile-go {
  background: var(--pomy-accent);
  border-color: transparent;
  color: var(--pomy-on-accent);
}
.pomy-setup-source {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-raised);
  display: flex;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  text-align: left;
}
.pomy-setup-source:hover { border-color: var(--pomy-line-strong); }
.pomy-setup-source img { flex: 0 0 auto; height: 17px; object-fit: contain; width: 17px; }
.pomy-setup-source-body { flex: 1 1 auto; min-width: 0; }
.pomy-setup-source-title { color: var(--pomy-ink); display: block; font-size: 12.5px; font-weight: 600; }
.pomy-setup-source-meta { color: var(--pomy-muted); display: block; font-size: 11px; }
.pomy-setup-source svg { color: var(--pomy-decor); flex: 0 0 auto; height: 12px; width: 12px; }

/* ------------------------------------------------------------- overlays --- */

.pomy-scrim {
  animation: pomy-fade .16s both;
  background: var(--pomy-scrim);
  display: flex;
  inset: 0;
  position: fixed;
  z-index: 18;
}
.pomy-scrim--sheet { align-items: flex-end; }
.pomy-scrim--dialog { align-items: center; justify-content: center; padding: 20px; z-index: 22; }

.pomy-sheet {
  animation: pomy-in .2s var(--pomy-ease) both;
  background: var(--pomy-raised);
  border-radius: var(--pomy-r-sheet-top) var(--pomy-r-sheet-top) 0 0;
  border-top: 1px solid var(--pomy-line);
  box-shadow: var(--pomy-lift-sheet);
  display: flex;
  flex-direction: column;
  max-height: 86%;
  padding: 15px var(--pomy-gutter) 18px;
  width: 100%;
}
.pomy-sheet-head { align-items: center; display: flex; gap: 8px; margin-bottom: 13px; }
.pomy-sheet-title { color: var(--pomy-ink); font-size: 13.5px; font-weight: 600; }
.pomy-sheet-close {
  border-radius: var(--pomy-r-quiet);
  color: var(--pomy-muted);
  display: grid;
  flex: 0 0 auto;
  height: 26px;
  margin-left: auto;
  place-items: center;
  width: 26px;
}
.pomy-sheet-close:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
.pomy-sheet-close svg { height: 13px; width: 13px; }
.pomy-sheet-body { color: var(--pomy-muted); font-size: 12px; line-height: 1.55; margin: -4px 0 12px; }
.pomy-sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.pomy-sheet-option {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-field);
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  min-height: 44px;
  padding: 8px 11px;
  text-align: left;
  width: 100%;
}
.pomy-sheet-option[aria-checked="true"] {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line-strong);
}
/* Disabled, never hidden: an action that exists but cannot apply here — moving
   the first item up — is easier to understand than one that silently comes and
   goes as the list is reordered. It states its reason and stops looking like
   something to press. */
.pomy-sheet-option:disabled {
  background: transparent;
  border-color: var(--pomy-line-soft);
  cursor: default;
}
.pomy-sheet-option:disabled .pomy-sheet-option-title,
.pomy-sheet-option:disabled .pomy-sheet-option-meta { color: var(--pomy-faint); }
.pomy-sheet-option:disabled .pomy-choice { visibility: hidden; }
.pomy-sheet-option-body { flex: 1 1 auto; min-width: 0; }
.pomy-sheet-option-title { color: var(--pomy-ink); display: block; font-size: 12.5px; font-weight: 500; }
.pomy-sheet-option[aria-checked="true"] .pomy-sheet-option-title { font-weight: 600; }
.pomy-sheet-option[data-danger="true"] .pomy-sheet-option-title { color: var(--pomy-danger); }
.pomy-sheet-option-meta { color: var(--pomy-muted); display: block; font-size: 11px; line-height: 1.4; margin-top: 2px; }
/* The one single-choice indicator. Every exclusive choice in the panel uses it:
   session length, the Microsoft list chooser, the whole-job task chooser.
   Multi-selection uses the real checkbox instead, never this.

   It reserves its slot whether or not it is selected, so choosing an option
   cannot shift the row's text, and it is optically centred by its grid rather
   than by a nudge. */
.pomy-choice {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--pomy-line-strong);
  display: grid;
  flex: 0 0 auto;
  height: 18px;
  place-items: center;
  transition: background var(--pomy-t-state) var(--pomy-ease), box-shadow var(--pomy-t-state) var(--pomy-ease);
  width: 18px;
}
.pomy-choice svg { display: none; }
.pomy-choice:hover { box-shadow: inset 0 0 0 1.5px var(--pomy-decor); }
[aria-checked="true"] > .pomy-choice,
[aria-selected="true"] > .pomy-choice {
  background: var(--pomy-accent);
  box-shadow: none;
  color: var(--pomy-on-accent);
}
[aria-checked="true"] > .pomy-choice svg,
[aria-selected="true"] > .pomy-choice svg { display: block; height: 11px; stroke-width: 3.2; width: 11px; }
.pomy-sheet-option-chevron { color: var(--pomy-decor); display: grid; flex: 0 0 auto; place-items: center; }
.pomy-sheet-option-chevron svg { height: 11px; width: 11px; }

.pomy-sheet-group { margin-bottom: 13px; }
.pomy-sheet-group > .pomy-cap { display: block; margin-bottom: 7px; }
.pomy-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------- organize --- */

/* Arranging the Microsoft lists into Pomy groups. Every action is a named
   control, so the whole sheet is reachable from the keyboard; nothing here is
   only available to a pointer. */
.pomy-organize-create {
  align-items: center;
  border: 1px dashed var(--pomy-line-strong);
  border-radius: var(--pomy-r-field);
  color: var(--pomy-ink);
  display: flex;
  font: var(--pomy-text-control);
  justify-content: center;
  min-height: var(--pomy-hit-min);
  width: 100%;
}
.pomy-organize-create:hover { background: var(--pomy-surface); border-color: var(--pomy-accent-line-strong); }
.pomy-organize-group { margin-top: 14px; }
.pomy-organize-head {
  align-items: center;
  border-bottom: 1px solid var(--pomy-line);
  display: flex;
  gap: 6px;
  padding-bottom: 6px;
}
.pomy-organize-title { color: var(--pomy-ink); font: var(--pomy-text-control); font-weight: 600; min-width: 0; }
.pomy-organize-count {
  color: var(--pomy-faint);
  flex: 0 0 auto;
  font: var(--pomy-text-meta);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.pomy-organize-row {
  align-items: center;
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 6px;
  min-height: var(--pomy-hit-min);
  padding: 4px 0 4px 12px;
}
.pomy-organize-name { color: var(--pomy-ink); font: var(--pomy-text-meta); min-width: 0; }
.pomy-organize-row .pomy-organize-name { margin-right: auto; }
.pomy-organize-tag {
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-tight);
  color: var(--pomy-faint);
  flex: 0 0 auto;
  font: var(--pomy-text-cap);
  letter-spacing: .04em;
  padding: 1px 4px;
  text-transform: uppercase;
}
.pomy-organize-action {
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  flex: 0 0 auto;
  font: var(--pomy-text-meta);
  height: var(--pomy-hit-min);
  padding: 0 7px;
  white-space: nowrap;
}
.pomy-organize-action:hover { background: var(--pomy-surface); color: var(--pomy-ink); }
.pomy-organize-action[data-danger="true"] { color: var(--pomy-danger); }
.pomy-organize-action[data-danger="true"]:hover { background: var(--pomy-danger-wash); }
.pomy-organize-empty {
  color: var(--pomy-muted);
  font: var(--pomy-text-meta);
  padding: 8px 0 8px 12px;
}

/* Choosing a group's lists, all of them, in one sheet. The real checkbox does
   the work here for the same reason it does on a task row: several answers at
   once is what a checkbox is, and the keyboard already knows how to use one. */
.pomy-pick-cap { display: block; margin: 14px 0 4px; }
.pomy-pick { display: flex; flex-direction: column; }
.pomy-pick-row {
  align-items: center;
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 10px;
  min-height: var(--pomy-hit-min);
  padding: 6px 0;
}
.pomy-pick-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pomy-pick-name { color: var(--pomy-ink); font: var(--pomy-text-control); }
/* Where the list is now — and, once it is ticked, what ticking it will do to
   it. A list leaving another group says so before it leaves, not after. */
.pomy-pick-meta { color: var(--pomy-faint); font: var(--pomy-text-meta); }
.pomy-pick-meta[data-moving="true"] { color: var(--pomy-accent-text); }
.pomy-chip {
  align-items: center;
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-muted);
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 500;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
}
.pomy-chip[aria-pressed="true"] {
  background: var(--pomy-accent-wash);
  border-color: var(--pomy-accent-line-strong);
  color: var(--pomy-ink);
  font-weight: 600;
}
.pomy-chip-dot { border-radius: 50%; flex: 0 0 auto; height: 7px; width: 7px; }
.pomy-chip-dot[data-off="true"] { background: transparent; border: 1.25px dashed var(--pomy-decor); }

.pomy-sheet-stepper { align-items: center; display: flex; gap: 12px; padding: 3px 0 2px; }
.pomy-sheet-stepper-body { flex: 1 1 auto; min-width: 0; }
.pomy-sheet-stepper-label { color: var(--pomy-ink); font-size: 12.5px; font-weight: 500; }
.pomy-sheet-stepper-hint { color: var(--pomy-muted); font-size: 11px; line-height: 1.45; margin-top: 2px; }
.pomy-sheet-stepper .pomy-stepper { border-radius: var(--pomy-r-field); height: 34px; }
.pomy-sheet-stepper .pomy-stepper button { width: 30px; }
.pomy-sheet-stepper .pomy-stepper-value { font-size: 13px; min-width: 40px; }

.pomy-meta-list { border: 1px solid var(--pomy-line); border-radius: var(--pomy-r-raised); margin-bottom: 12px; overflow: hidden; }
.pomy-meta-row {
  align-items: baseline;
  border-bottom: 1px solid var(--pomy-line-soft);
  display: flex;
  gap: 10px;
  padding: 8px 11px;
}
.pomy-meta-row:last-child { border-bottom: none; }
.pomy-meta-key {
  color: var(--pomy-faint);
  flex: 0 0 88px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pomy-meta-value { color: var(--pomy-ink); flex: 1 1 auto; font-size: 12px; min-width: 0; }
.pomy-meta-value--strong { font-weight: 600; }

.pomy-sheet-field-label {
  color: var(--pomy-ink);
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 5px;
}
/* A field that follows a control needs its own air, or the label reads as part
   of the sentence under the control above it. */
.pomy-sheet-stepper + .pomy-sheet-field-label,
.pomy-sheet-option + .pomy-sheet-field-label { margin-top: 14px; }
.pomy-sheet-input {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-field);
  color: var(--pomy-ink);
  font-size: 13px;
  height: 38px;
  padding: 0 11px;
  width: 100%;
}
.pomy-sheet-input:focus {
  border-color: var(--pomy-accent-line-strong);
  box-shadow: 0 0 0 3px var(--pomy-accent-halo);
  outline: none;
}
.pomy-sheet-note {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-field);
  color: var(--pomy-ink);
  font-family: var(--pomy-font);
  font-size: 12px;
  line-height: 1.5;
  min-height: 62px;
  padding: 9px 11px;
  resize: vertical;
  width: 100%;
}
.pomy-sheet-note:focus {
  border-color: var(--pomy-accent-line-strong);
  box-shadow: 0 0 0 3px var(--pomy-accent-halo);
  outline: none;
}

.pomy-sheet-actions { display: flex; gap: 8px; margin-top: 14px; }
.pomy-sheet-actions .pomy-btn--secondary { flex: 0 0 auto; }
.pomy-sheet-actions .pomy-btn--primary { flex: 1 1 auto; }

.pomy-dialog {
  animation: pomy-in .2s var(--pomy-ease) both;
  background: var(--pomy-raised);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-sheet);
  box-shadow: var(--pomy-lift-sheet);
  max-height: 100%;
  overflow-y: auto;
  padding: 17px 17px 15px;
  width: 100%;
}
.pomy-dialog-title { color: var(--pomy-ink); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.pomy-dialog-body { color: var(--pomy-muted); font-size: 12.5px; line-height: 1.55; margin-top: 8px; }
.pomy-dialog-note {
  background: var(--pomy-surface);
  border: 1px solid var(--pomy-line);
  border-radius: var(--pomy-r-field);
  color: var(--pomy-muted);
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 11px;
  padding: 9px 11px;
}
/* The before-and-after block, so a trade is visible rather than described. */
.pomy-dialog-swap { border: 1px solid var(--pomy-line); border-radius: var(--pomy-r-raised); margin-top: 13px; overflow: hidden; }
.pomy-dialog-swap-item { border-bottom: 1px solid var(--pomy-line-soft); padding: 9px 11px; }
.pomy-dialog-swap-item:last-child { border-bottom: none; }
.pomy-dialog-swap-item[data-to="true"] { background: var(--pomy-accent-wash); }
.pomy-dialog-swap-cap {
  color: var(--pomy-faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pomy-dialog-swap-item[data-to="true"] .pomy-dialog-swap-cap { color: var(--pomy-accent-text); }
.pomy-dialog-swap-title { color: var(--pomy-muted); font-size: 12.5px; font-weight: 500; margin-top: 2px; }
.pomy-dialog-swap-item[data-to="true"] .pomy-dialog-swap-title { color: var(--pomy-ink); font-weight: 600; }
.pomy-dialog .pomy-meta-list { margin-top: 13px; }
.pomy-dialog-field { margin-top: 13px; }
.pomy-dialog-field .pomy-sheet-note { min-height: 54px; }

.pomy-dialog-actions { display: flex; gap: 8px; margin-top: 16px; }
.pomy-dialog-actions .pomy-btn { flex: 1 1 0; }

/* In-panel, above the action bar it replaces. */
.pomy-toast {
  align-items: center;
  animation: pomy-in .2s var(--pomy-ease) both;
  background: var(--pomy-toast-bg);
  border-radius: var(--pomy-r-raised);
  bottom: var(--pomy-gutter);
  box-shadow: var(--pomy-lift-sheet);
  color: var(--pomy-toast-fg);
  display: flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 9px;
  left: var(--pomy-gutter);
  padding: 11px 13px;
  position: fixed;
  right: var(--pomy-gutter);
  z-index: 24;
}
.pomy-toast svg { color: var(--pomy-accent); flex: 0 0 auto; height: 14px; stroke-width: 2.6; width: 14px; }