/* The Actions tool — /actions.
   Rebuilt from "7 Actions - wiki pattern" (owner, 2026-08-22).

   Loaded via yield :page_stylesheets, not on every page.

   What this replaced: four bands, a sticky detail panel beside them, a setup sentence,
   a personal-to-do composer and a "This week" strip. The page is now a topic rail beside
   one list whose detail expands inside each row — so about 120 classes' worth of rules
   for markup that no longer exists went with them, rather than being left to rot.

   Radii from the kit, tabulated before writing: xl (16px) for the featured card, md
   (12px) for an open row, sm (10px) for rail items, pill for the state dot.

   DONE IS LIGHTER TEXT, NEVER A STRIKETHROUGH. The comp strikes completed rows through;
   an explicit instruction says not to, and done_state_test.rb pins it. A swap's original
   item keeps its line, where it means "stop buying this" rather than "you did this". */

.zw-act-page {
  width: 100%;
  max-width: 80rem; /* the site header's measure — one width on every surface */
  margin: 0 auto;
  padding: 28px 1rem 72px;
  color: var(--zw-ink-warm);
}

/* --- Masthead --------------------------------------------------------------- */

.zw-act-masthead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* A page label, not a masthead. 20px sans rather than a 32-40px serif: the serif is
   reserved for the three places 3.0 allows it, and at this size a heading reads as a
   label anyway. The h1 stays for screen-reader heading navigation and for search --
   a lit nav item answers "where am I in this site", not "what is this page". */
.zw-act-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--zw-ink-warm);
  margin: 0;
}


.zw-act-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- The topic rail --------------------------------------------------------- */

.zw-act-rail {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 1px;
}

.zw-act-rail__label {
  margin: 0 0 8px 11px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zw-quiet);
}

.zw-act-rail__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--zw-radius-sm);
  color: var(--zw-ink-warm-3);
  transition:
    background 200ms var(--zw-ease-out),
    color 200ms var(--zw-ease-out);
}

.zw-act-rail__item:hover { background: var(--zw-panel); }

.zw-act-rail__item--on {
  background: var(--zw-panel);
  color: var(--zw-ink-warm);
}

.zw-act-rail__item--out { color: var(--zw-blue-700); }

.zw-act-rail__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--zw-radius-pill);
  background: var(--zw-tool-actions);
}

.zw-act-rail__dot--wiki { background: var(--zw-tool-wiki); }

.zw-act-rail__name { flex: 1; min-width: 0; }

.zw-act-rail__count {
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--zw-muted);
}

.zw-act-rail__rule {
  height: 1px;
  margin: 16px 11px;
  background: var(--zw-border-warm);
}

.zw-act-rail__progress { margin: 0 11px; }

.zw-act-rail__progress-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.zw-act-rail__progress-count {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--zw-green-800);
}

.zw-act-rail__progress-label { font-size: 13px; color: var(--zw-muted); }

/* --- The list --------------------------------------------------------------- */

.zw-act-list { min-width: 0; }

.zw-act-listhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px 2px;
}

.zw-act-listhead__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zw-ink-warm);
  white-space: nowrap;
}

.zw-act-listhead__rule { flex: 1; height: 1px; background: var(--zw-border-warm); }

.zw-act-listhead__count { font-size: 13px; color: var(--zw-muted); white-space: nowrap; }

.zw-act-rows { display: grid; gap: 1px; }

/* Past the cap, rows are rendered and hidden — the toggle is a class change, not a
   request. */
.zw-act-rows .zw-act-row--hidden { display: none; }
.zw-act-rows[data-expanded="true"] .zw-act-row--hidden { display: block; }

/* Text, not a pill (owner, 2026-08-25). It reveals more of the list you are already
   reading rather than doing anything to a row, so an outlined pill sat it among the
   controls as a fifth button. Blue because it acts, and underlined on hover so losing
   the outline does not cost it the affordance. */
.zw-act-showall {
  justify-self: start;
  margin-top: 12px;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--zw-blue-700);
  transition: color 200ms var(--zw-ease-out);
}

.zw-act-showall:hover { color: var(--zw-blue-800); text-decoration: underline; }

/* --- A row ------------------------------------------------------------------ */

/* Closed, a row is a line on the page: no card, no border. Open, it becomes a card, so
   the thing being read is visibly lifted out of the list around it. */
.zw-act-row {
  margin: 0 -16px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--zw-radius-xl);
  transition:
    background 200ms var(--zw-ease-out),
    box-shadow 320ms var(--zw-ease-out);
}

.zw-act-row:hover { background: var(--zw-surface-warm); }

.zw-act-row[open] {
  margin: 8px -16px;
  padding: 15px 16px;
  background: var(--zw-surface);
  border-color: var(--zw-border-warm-soft);
  box-shadow: var(--zw-shadow-float);
}

.zw-act-row__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.zw-act-row__summary::-webkit-details-marker { display: none; }

/* The dot IS the state: a ring in the kind's colour, a check in the same colour when
   done. One mark, two states.

   Its box is the TITLE'S LINE BOX -- 24px, the line-height of a 16px .zw-act-row__title --
   and it is aligned to the top of the row rather than by baseline, so centring the dot
   inside it centres it on the title's line. It used to be an 18px box nudged down 3px by
   hand: the grid aligns on baselines, a flex box with no text in it takes its baseline
   from its bottom edge, and the result sat 5.5px below the middle of the title. */
.zw-act-row__mark {
  width: 18px;
  height: 24px;
  align-self: start;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zw-tool-actions);
}

.zw-act-row__mark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--zw-radius-pill);
  background: currentcolor;
}

.zw-act-row__mark svg { stroke-width: 3; }
.zw-act-row__mark:has(svg)::before { display: none; }

.zw-act-row__mark--habit { color: var(--zw-green-600); }
.zw-act-row__mark--petition { color: var(--zw-advocacy, var(--zw-tool-calendar)); }
.zw-act-row__mark--swap { color: var(--zw-tool-map); }

.zw-act-row__text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.zw-act-row__title {
  flex: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zw-ink-warm);
}

.zw-act-row__dek {
  min-width: 0;
  font-size: 15px;
  color: var(--zw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zw-act-row__meta {
  flex: none;
  font-size: 13px;
  color: var(--zw-muted);
  white-space: nowrap;
}

/* Done is lighter, and that is ALL it is. No line through it. */
.zw-act-row--done .zw-act-row__title { color: var(--zw-quiet); }

.zw-act-row__detail { padding-left: 30px; }

/* --- The featured card ------------------------------------------------------ */

.zw-act-featured {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-soft);
  border-radius: var(--zw-radius-2xl);
  box-shadow: var(--zw-shadow-float);
}

.zw-act-featured__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.zw-act-featured__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--zw-radius-pill);
  background: var(--zw-tool-actions);
}

.zw-act-featured__dot--habit { background: var(--zw-green-600); }
.zw-act-featured__dot--petition { background: var(--zw-advocacy, var(--zw-tool-calendar)); }

.zw-act-featured__eyebrow {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zw-green-800);
}

.zw-act-featured__meta {
  margin-left: auto;
  font-size: 13px;
  color: var(--zw-muted);
  white-space: nowrap;
}

.zw-act-featured__title {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--zw-ink-warm);
  max-width: 460px;
  text-wrap: balance;
}

.zw-act-featured__dek {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--zw-ink-warm-2);
  max-width: 520px;
  text-wrap: pretty;
}

/* --- Detail contents -------------------------------------------------------- */

.zw-act-detail__body,
.zw-act-detail__why,
.zw-act-detail__prompt {
  margin: 13px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--zw-ink-warm-2);
  text-wrap: pretty;
}

.zw-act-detail__why { color: var(--zw-muted); font-size: 14px; }

.zw-act-detail__count { margin: 8px 0 0; font-size: 14px; color: var(--zw-muted); }

.zw-act-detail__swap { margin: 13px 0 0; display: grid; gap: 2px; }

/* The line here means "stop buying this", not "you did this" — a different claim from
   the done state above, and done_state_test.rb asserts both so they cannot be unified. */
.zw-act-detail__from {
  font-size: 15px;
  color: var(--zw-muted);
  text-decoration: line-through;
}

.zw-act-detail__to { font-size: 15px; font-weight: 600; color: var(--zw-ink-warm); }

.zw-act-detail__habit {
  margin-top: 14px;
  padding: 13px 15px;
  background: var(--zw-green-50);
  border-radius: var(--zw-radius-lg);
}

.zw-act-detail__habit-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.zw-act-detail__habit-state {
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-green-800);
}

.zw-act-detail__habit-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--zw-ink-warm-3);
  white-space: nowrap;
}


.zw-act-detail__foot {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--zw-border-warm-inner);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Its own row under the actions, aligned right.
   NOT `margin-left: auto` on the button, which is what this used to be and never worked:
   button_to wraps its button in a form, so the FORM is the flex item and a margin on the
   button inside it pushes nothing. Same trap as the primary button's width. */
/* --- Empty ------------------------------------------------------------------ */

.zw-act-empty { padding: 28px 2px; }

.zw-act-empty__title { font-size: 15px; font-weight: 600; color: var(--zw-ink-warm); }

.zw-act-empty__dek {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--zw-muted);
}

.zw-act-empty__link { font-weight: 600; }

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 860px) {
  .zw-act-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Unpinned: a sticky rail above the list is a block that will not scroll. */
  .zw-act-rail {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .zw-act-rail__rule,
  .zw-act-rail__label { display: none; }
}

@media (max-width: 560px) {
  /* The dek is the first thing to go: a title that truncates to nothing is worse than
     one line of context less. */
  .zw-act-row__text { display: grid; gap: 2px; }
  .zw-act-row__dek { white-space: normal; }
  .zw-act-row__summary { grid-template-columns: auto minmax(0, 1fr); }
  .zw-act-row__meta { grid-column: 2; }
}

/* --- Rich-text prose, ported unchanged ------------------------------------- */

/* An action's description is TipTap output, and Tailwind's preflight zeroes every
   heading, list and paragraph in it. These rules are what put them back; without them
   the content arrives structurally flat and looks like a bug in the editor.
   action_detail_prose_test.rb pins them. */

.zw-act-item__dek,
.zw-act-item__fit,
.zw-act-item__scores {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--zw-muted);
}

/* The children are spans inside an anchor now, so the ones that were <p> need their own
   block behaviour back. */
.zw-act-swap__dek,
.zw-act-swap__meta { display: block; }

.zw-act-swap__dek { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--zw-muted); }

.zw-act-petition__dek { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--zw-muted); }

.zw-act-detail__dek,
.zw-act-detail__why,
.zw-act-detail__prompt,
.zw-act-detail__count { margin: 0; font-size: 14px; line-height: 1.55; color: var(--zw-muted); }

/* --- an action's rich description -------------------------------------------
   The panel used to show `body.to_plain_text` in a single `.zw-act-detail__dek`
   paragraph, so nothing an admin did in the editor — bold, a list, a wikilink —
   reached the reader. It now renders the document, which means this block can
   receive anything the editor emits. `action.body` is not sanitized (only the
   wiki page runs renderer output through `sanitize`), so every one of those
   blocks arrives verbatim and needs a rule here.

   Preflight has already zeroed margins and list styles and set
   `a { color: inherit; text-decoration: inherit }

`, so "unstyled" here is not
   the browser default — it is paragraphs running together and links that look
   like prose.

   The paragraph deliberately matches `.zw-act-detail__dek` above: nearly every
   description is one paragraph, and anchoring to the rule it replaces is what
   keeps this change invisible for that case instead of restyling every action
   on the page. */
.zw-act-detail__prose {
  font-size: 14px;
  line-height: 1.55;
  color: var(--zw-muted);
}

.zw-act-detail__prose > :first-child { margin-top: 0; }

.zw-act-detail__prose > :last-child { margin-bottom: 0; }

.zw-act-detail__prose p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }

.zw-act-detail__prose strong { font-weight: 600; color: var(--zw-ink); }

.zw-act-detail__prose em { font-style: italic; }

.zw-act-detail__prose s { text-decoration: line-through; }

.zw-act-detail__prose u { text-decoration: underline; }

.zw-act-detail__prose ul,
.zw-act-detail__prose ol {
  margin: 0 0 10px;
  padding-left: 20px;
  list-style-position: outside;
}

.zw-act-detail__prose ul { list-style-type: disc; }

.zw-act-detail__prose ol { list-style-type: decimal; }

.zw-act-detail__prose li { margin: 0 0 4px; }

.zw-act-detail__prose li > p { margin: 0; }

/* Smaller than `.zw-act-detail__title` (22px), so a heading inside the
   description cannot compete with the action's own name. */
.zw-act-detail__prose h1,
.zw-act-detail__prose h2,
.zw-act-detail__prose h3,
.zw-act-detail__prose h4,
.zw-act-detail__prose h5,
.zw-act-detail__prose h6 {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zw-ink);
}

.zw-act-detail__prose a {
  color: var(--zw-blue-700);
  text-decoration: none;
  border-bottom: 1px solid var(--zw-blue-300);
}

.zw-act-detail__prose a:hover { border-bottom-color: var(--zw-blue-700); }

/* The panel is a narrow sidebar and an uploaded image carries its natural
   pixel width, so without the cap one image blows the column out. */
.zw-act-detail__prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: var(--zw-radius-sm);
}

.zw-act-detail__prose blockquote {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 2px solid var(--zw-border-warm-grid);
  color: var(--zw-faint);
}

.zw-act-detail__prose code {
  padding: 1px 4px;
  font-size: 13px;
  background: var(--zw-border-warm-grid);
  border-radius: var(--zw-radius-xs);
}

.zw-act-detail__prose pre {
  margin: 10px 0;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--zw-border-warm-grid);
  border-radius: var(--zw-radius-sm);
}

.zw-act-detail__prose pre code { padding: 0; background: none; }

.zw-act-detail__prose hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--zw-border-warm-grid);
}

.zw-act-habit__dek { font-size: 14px; line-height: 1.5; color: var(--zw-muted); }

/* --- Ported unchanged from the banded version ------------------------------- */






/* --- ghost button ---------------------------------------------------------- */

.zw-act-ghost__form { margin: 0; }

/* The kit's row of secondary actions: filled warm pills with NO border, not outlined
   rectangles. Bordered rects read as a form; these read as a row of quiet offers. */
.zw-act-ghost {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-ink-2, var(--zw-muted));
  background: var(--zw-panel);
  border: none;
  border-radius: var(--zw-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--zw-ease-out), color var(--dur-2) var(--zw-ease-out);
}

.zw-act-ghost:hover { background: var(--zw-border-warm-grid); color: var(--zw-ink); }

/* Both ghosts in the foot -- "Learn more" and the dismiss -- carry no fill, so the two
   buttons beside them keep the row's emphasis. Text, not a pill (owner, 2026-08-25):
   .zw-act-ghost fills a pill because most of its wearers are offers, and a refusal
   dressed as an offer is the loudest thing in the card. */
.zw-act-detail__foot .zw-act-ghost {
  padding: 6px 4px;
  background: none;
  border-radius: 0;
  color: var(--zw-faint);
}

.zw-act-detail__foot .zw-act-ghost:hover {
  background: none;
  color: var(--zw-ink);
  text-decoration: underline;
}

/* The auto margin is on the FORM because button_to wraps its button in one, making the
   form the flex item. On the button it pushes nothing -- which is what the old
   .zw-act-detail__skip did, and why this control was never actually right-aligned. */
.zw-act-ghost__form--skip { margin-left: auto; }

/* display: contents so the button itself becomes the flex item and the form around it
   (button_to always wraps one) stops being a full-width box in the row.
   This rule is the one that applies -- an earlier attempt added an overriding pair
   further UP the file, which lost to this one on source order and did nothing. */
.zw-act-detail__primary-form { margin: 0; display: contents; }

/* Worn by a button when signed in and by the sign-in link when not, so it centres its own
   text — an <a> does not inherit a button's centring.

   inline-flex, not flex + width 100%: a primary button spanning the whole card reads as a
   form submit, and the comp has it inline beside the picker and the skip. */
.zw-act-detail__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-surface);
  background: var(--zw-blue-700);
  border: none;
  border-radius: var(--zw-radius-sm);
  cursor: pointer;
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-act-detail__primary:hover { background: var(--zw-blue-800); }

/* --- the plan chip and This week --------------------------------------------
   A plan is a warm fact, not a nag: the chip is sand — ladder step 4, the one surviving
   warm accent — because it is neither a measurement (green) nor an invitation (blue).
   It is worn by rows, by the week card, and by the picker's own summary once set. */

.zw-act-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--zw-sand-ink);
  background: var(--zw-sand-tint);
  border-radius: var(--zw-radius-pill);
  white-space: nowrap;
}

/* --- the When? picker --------------------------------------------------------
   A <details> popover: the summary is the control, the card floats above the panel's
   foot. Colour law: the CHOOSING is blue (selected option, selected day), today is a
   green fact, and the resulting plan is the sand chip above. */

.zw-act-when { position: relative; }

.zw-act-when__summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-ink-2, var(--zw-muted));
  background: var(--zw-panel);
  border-radius: var(--zw-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  transition: background var(--dur-2) var(--zw-ease-out), color var(--dur-2) var(--zw-ease-out);
}

.zw-act-when__summary::-webkit-details-marker { display: none; }

/* Unplanned, the summary is a calendar icon and nothing else (owner, 2026-08-25), so it
   is square rather than a stub of a pill. The sr-only name inside it is out of flow and
   adds no width. */
.zw-act-when__summary--icon {
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  gap: 0;
  border-radius: var(--zw-radius-md);
}

.zw-act-when__summary:hover { background: var(--zw-border-warm-grid); color: var(--zw-ink); }

/* Once a day is named, the summary IS the chip — one control that both shows the plan
   and reopens the picker to move it. */
.zw-act-when__summary--set { color: var(--zw-sand-ink); background: var(--zw-sand-tint); }

.zw-act-when__summary--set:hover { background: var(--zw-sand-tint); color: var(--zw-sand-ink); filter: brightness(0.97); }

/* Opens DOWNWARD from the summary. The panel sits high on the page under a sticky
   header, so a card floated upward runs beneath that header where nothing can click
   it; below the foot there is always page to scroll. */
.zw-act-when__card {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 300px;
  padding: 12px 12px 10px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-xl);
  box-shadow: var(--zw-shadow-float);
}

/* On a phone the popover has no room to float, so it becomes the sheet: pinned to the
   bottom of the viewport, full width, scrolling inside itself if it must. */
@media (max-width: 639px) {
  .zw-act-when__card {
    position: fixed;
    inset: auto 10px 10px;
    bottom: 10px;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: var(--zw-shadow-lift);
  }
}

.zw-act-when__form { margin: 0; display: grid; }

.zw-act-when__options { display: grid; gap: 2px; }

.zw-act-when__option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 10px;
  background: none;
  border: none;
  border-radius: var(--zw-radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-act-when__option:hover { background: var(--zw-surface-warm); }

.zw-act-when__option--on,
.zw-act-when__option--on:hover { background: var(--zw-blue-50); }

.zw-act-when__label { font-size: 14px; font-weight: 500; color: var(--zw-ink); }

.zw-act-when__hint { font-size: 13px; color: var(--zw-faint); }

.zw-act-when__tick { display: flex; margin-left: auto; color: var(--zw-blue-700); }

.zw-act-when__option .zw-act-when__hint:last-child { margin-left: auto; }

/* Tailwind's preflight makes every svg a block, which breaks the line inside an inline
   span and drops each icon onto a row of its own above its label. Each rhythm keeps its
   own muted stroke besides, like the map's pins: identity, not decoration. */
.zw-act-when__glyph { display: flex; flex: none; }

.zw-act-when__glyph--today { color: var(--zw-tool-calendar); }

.zw-act-when__glyph--evening { color: var(--zw-pin-slate); }

.zw-act-when__glyph--trash_night { color: var(--zw-moss); }

.zw-act-when__glyph--weekend { color: var(--zw-clay); }

.zw-act-when__hr { height: 1px; margin: 10px 4px; background: var(--zw-border-warm-inner); }

.zw-act-when__month { padding: 0 6px 6px; font-size: 13px; font-weight: 600; color: var(--zw-ink-2); }

.zw-act-when__dows {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--zw-whisper);
  text-align: center;
}

.zw-act-when__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 2px 4px 0;
}

.zw-act-when__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0;
  font-size: 13px;
  color: var(--zw-ink-2);
  background: none;
  border: none;
  border-radius: var(--zw-radius-pill);
  cursor: pointer;
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-act-when__day:hover { background: var(--zw-surface-warm); }

.zw-act-when__day--past { color: var(--zw-whisper); cursor: default; }

.zw-act-when__day--next { color: var(--zw-faint); }

.zw-act-when__day--today { background: var(--zw-green-50); color: var(--zw-green-800); font-weight: 600; }

.zw-act-when__day--on,
.zw-act-when__day--on:hover { background: var(--zw-blue-700); color: var(--zw-surface); font-weight: 600; }

.zw-act-when__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 6px 0;
  border-top: 1px solid var(--zw-border-warm-inner);
}

.zw-act-when__note { font-size: 12px; color: var(--zw-quiet); }

.zw-act-when__clear-form { margin: 0 0 0 auto; }

.zw-act-when__clear {
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-faint);
  background: none;
  border: none;
  border-radius: var(--zw-radius-pill);
  cursor: pointer;
}

.zw-act-when__clear:hover { color: var(--zw-ink); background: var(--zw-border-warm-grid); }