/* The Actions tool — /actions.
   Ported from the 3.0 kit's Tools.dc.html, whose Actions screen begins at line 106.

   Loaded via yield :page_stylesheets, not on every page — a ranked action list has
   nothing to say to any other surface.

   Everything here resolves through --zw-* tokens. Green appears in exactly two places,
   both of them measurement: the impact/effort dots and the done checkmark. Every CTA is
   the action blue. That split is 3.0's colour law and green_is_never_a_button_test.rb
   enforces the button half of it. */

/* Matches the site header rather than the kit's 1440px tool measure, for the reason
   calendar_tool.css records: a tool surface wider than the menu above it reads as a
   broken page rather than a wide one. Mirrored as values so the two can be compared. */
.zw-act-page {
  width: 100%;
  max-width: 80rem; /* Tailwind max-w-7xl, the site header's measure */
  margin: 0 auto;
  padding: 28px 1rem 56px; /* px-4 */
}

@media (min-width: 640px) {
  .zw-act-page { padding-inline: 1.5rem; } /* sm:px-6 */
}

@media (min-width: 1024px) {
  .zw-act-page { padding-block: 44px 72px; padding-inline: 2rem; } /* lg:px-8 */
}

/* --- masthead -------------------------------------------------------------- */

.zw-act-title {
  font-family: var(--zw-font-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--zw-ink);
  margin: 0 0 6px;
}

.zw-act-dek {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--zw-muted);
  max-width: 620px;
}

/* --- toolbar: tabs + search ------------------------------------------------ */

.zw-act-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.zw-act-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 220px;
  max-width: 320px;
  height: 38px;
  padding: 0 13px;
  gap: 9px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-soft);
  border-radius: var(--zw-radius-pill);
  box-shadow: var(--zw-shadow-sm);
}

.zw-act-search__icon { display: flex; color: var(--zw-faint); }

.zw-act-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--zw-ink);
}

.zw-act-search__input:focus { outline: none; }

.zw-act-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  padding: 0;
  color: var(--zw-muted);
  font-size: 13px;
  line-height: 1;
  border-radius: var(--zw-radius-pill);
}

.zw-act-search__clear:hover { background: var(--zw-paper-3); color: var(--zw-ink); }

/* --- shell ----------------------------------------------------------------- */

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

@media (min-width: 1024px) {
  .zw-act-shell { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
}

/* A grid child defaults to min-width:auto, so one long unbroken word — a pasted URL in an
   action's summary — can push the column wider than its track and shove the sidebar off. */
.zw-act-main { min-width: 0; }

/* --- band headers ---------------------------------------------------------- */

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

/* The kit separates bands with a 34px gap below the LIST, not above the header, so a
   band's label sits tight to its own items rather than floating between two groups. */
.zw-act-list { margin-bottom: 34px; }

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

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

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

/* --- single actions -------------------------------------------------------- */

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

/* A Single Action is a ROW, not a card, until you open it.
   Kit values (Tools.dc.html:2246-2250, computed per item):
     closed  background transparent · border transparent · no shadow · padding 11px 18px
     open    background #faf8f4     · border #ece9e3     · lift shadow · padding 16px 18px · margin 6px 0
     hover   background #faf8f4
   Shipping these as permanently white bordered cards was the "doesn't look like the mock
   up" defect: four boxed cards where the kit has a flush chromeless list that lifts only
   the item under discussion.

   `#faf8f4` resolves to --zw-surface-warm (#fbfaf7), whose declared role is exactly "row
   hover, quiet fills" — one point per channel apart and imperceptible, which is preferable
   to a second near-identical token. The open shadow uses --zw-shadow-float (10px 28px)
   against the kit's 8px 26px, for the same reason. */
.zw-act-item {
  padding: 11px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--zw-radius-md);
  transition: background var(--dur-3) var(--zw-ease-out),
              box-shadow var(--dur-3) var(--zw-ease-out),
              border-color var(--dur-3) var(--zw-ease-out);
}

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

/* :has() rather than a class toggled in JS — the <details> already holds the open state,
   and duplicating it into a class gives two sources of truth that can disagree. */
.zw-act-item:has(details[open]) {
  margin: 6px 0;
  padding: 16px 18px;
  background: var(--zw-surface-warm);
  border-color: var(--zw-border-warm);
  box-shadow: var(--zw-shadow-float);
}

.zw-act-item__row { display: flex; align-items: flex-start; gap: 13px; }

.zw-act-check__form { margin: 0; flex: none; }

/* Green, and correctly so: a completed action is a measurement, not an invitation. */
.zw-act-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: transparent;
  background: transparent;
  /* The kit's #d5d0c7, not one of the structural hairlines. An unchecked box outlined in
     --zw-border-warm (#ece9e3, 1.21:1 on white) is nearly invisible — reported as "way
     lower contrast than in the spec", and correctly. */
  border: 1.5px solid var(--zw-border-warm-strong);
  /* 5px, from the kit. A tick box is square; rounding it to a circle turns a checkbox
     into a radio button, which says "pick one of these" rather than "tick what you did". */
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--dur-2) var(--zw-ease-out), border-color var(--dur-2) var(--zw-ease-out);
}

.zw-act-check:hover { border-color: var(--zw-ladder-1); }

.zw-act-check--on {
  background: var(--zw-ladder-1);
  border-color: var(--zw-ladder-1);
  color: var(--zw-ladder-1-ink);
}

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

.zw-act-item__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

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

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

/* Done is lighter text, NOT a strikethrough.
   The kit strikes it through (`strike: isDone ? "line-through" : "none"`), and the owner
   overruled that: a struck line reads as cancelled or withdrawn, where a finished action is
   something you did. --zw-quiet is the kit's own done-text colour (#9a978f) — the recession
   carries the meaning on its own.
   The swap card's "from" keeps its strikethrough: there it means "stop buying this", which
   is a different statement from "you have done this". */
.zw-act-item__title--done { color: var(--zw-quiet); text-decoration: none; }

/* A personal row SWAPS for its editor rather than sitting above it, which is what the kit
   does (an edited row is filtered out of the list and the composer takes its place). Left
   stacked, the title appeared twice — once as the summary and once as the input's own
   placeholder. The shared list's rows keep their summary, because there the title is the
   heading for a description rather than a field you are editing. */
.zw-act-item--personal details[open] > .zw-act-item__summary { display: none; }

/* An unnamed to-do reads as a blank waiting to be filled, not as a thing called "New
   action": lighter weight and a recessive colour, as the kit has it (titleWeight 400,
   titleFg #b9b5ac). */
.zw-act-item__title--untitled { font-weight: 400; color: var(--zw-whisper); }

.zw-act-flag {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--zw-ladder-1);
  background: var(--zw-green-50);
  border-radius: var(--zw-radius-pill);
  white-space: nowrap;
}

.zw-act-flag__star { display: flex; }

.zw-act-item__detail { display: grid; gap: 8px; margin-top: 10px; }

.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);
}

.zw-act-item__fit { color: var(--zw-pin-slate); font-weight: 500; }

.zw-act-item__scores { display: flex; flex-wrap: wrap; gap: 18px; }

.zw-act-score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--zw-faint);
}

/* --- rating dots ----------------------------------------------------------- */

.zw-act-dots { display: inline-flex; gap: 3px; }

.zw-act-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--zw-border-warm);
}

.zw-act-dot--on { background: var(--zw-ladder-1); }

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

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

/* button_to wraps the button in a form, so the auto-margin has to live on the wrapper —
   on the button it would only push within a form that is already only as wide as it is. */
.zw-act-ghost__form--skip { margin-left: auto; }

/* 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); }

.zw-act-item__actions { display: flex; align-items: center; gap: 8px; }

/* "Not for me" sits at the far right of the row and is quieter than the offers beside it:
   the kit gives it margin-left:auto and no fill (Tools.dc.html:171). Turning something down
   should not compete with the two buttons inviting you to do it. */
.zw-act-ghost--skip {
  margin-left: auto;
  padding: 6px 10px;
  background: none;
}

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

/* --- the one CTA style: blue, because it acts ------------------------------ */

.zw-act-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-surface);
  background: var(--zw-blue-700);
  border: none;
  border-radius: var(--zw-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-act-cta:hover { background: var(--zw-blue-800); color: var(--zw-surface); }

.zw-act-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-blue-700);
}

.zw-act-more:hover { color: var(--zw-blue-800); }

/* --- swaps ----------------------------------------------------------------- */

.zw-act-swap {
  padding: 16px 18px;
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-md);
  background: var(--zw-surface);
  box-shadow: var(--zw-shadow-sm);
  transition: box-shadow var(--dur-2) var(--zw-ease-out), border-color var(--dur-2) var(--zw-ease-out);
}

.zw-act-swap:hover { box-shadow: var(--zw-shadow-md); border-color: var(--zw-border-warm); }

.zw-act-swap__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

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

.zw-act-swap__title:hover { color: var(--zw-blue-700); }

/* The pair is the heading when we have one, so it carries the heading's weight rather
   than sitting under a title that repeated it. */
.zw-act-swap__pair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.zw-act-swap__from { color: var(--zw-faint); text-decoration: line-through; }
.zw-act-swap__arrow { color: var(--zw-quiet); }
.zw-act-swap__to { color: var(--zw-ink); font-weight: 600; }
.zw-act-swap__to:hover { color: var(--zw-blue-700); }

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

.zw-act-swap__meta {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--zw-faint);
}

/* --- petitions ------------------------------------------------------------- */

.zw-act-petition {
  padding: 18px 20px;
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-md);
  background: var(--zw-surface);
  box-shadow: var(--zw-shadow-sm);
}

.zw-act-petition__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.zw-act-petition__title { font-size: 15px; font-weight: 600; color: var(--zw-ink); }
.zw-act-petition__title:hover { color: var(--zw-blue-700); }

.zw-act-petition__scope {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--zw-faint);
}

.zw-act-petition__bar { margin-bottom: 8px; }

.zw-act-petition__count { margin: 0; font-size: 13px; color: var(--zw-muted); }
.zw-act-petition__count strong { color: var(--zw-ink); }

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

/* --- browse: kind chips + grid --------------------------------------------- */

.zw-act-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.zw-act-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-muted);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: 999px;
  transition: background var(--dur-2) var(--zw-ease-out), border-color var(--dur-2) var(--zw-ease-out);
}

.zw-act-kind:hover { border-color: var(--zw-border-warm); }

.zw-act-kind--on { color: var(--zw-ink); border-color: var(--zw-border-warm); background: var(--zw-paper-3); }

.zw-act-kind__dot { width: 7px; height: 7px; border-radius: 999px; }

/* The tool family, reused as kind tones. Not the ACTION BLUE: a chip is a filter, and
   the map made the same call for the same reason — see map_pin_colours_test.rb. */
.zw-act-kind__dot--task { background: var(--zw-tool-actions); }
.zw-act-kind__dot--swap { background: var(--zw-pin-ochre); }
.zw-act-kind__dot--petition { background: var(--zw-pin-slate); }

.zw-act-kinds__count { margin-left: auto; font-size: 13px; color: var(--zw-faint); }

.zw-act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 12px;
}

.zw-act-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  gap: 7px;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-md);
  background: var(--zw-surface);
  box-shadow: var(--zw-shadow-sm);
  transition: box-shadow var(--dur-2) var(--zw-ease-out), border-color var(--dur-2) var(--zw-ease-out);
}

.zw-act-tile:hover { box-shadow: var(--zw-shadow-md); border-color: var(--zw-border-warm); }

/* Browse shows dismissed items so they can be found again. It should be obvious which
   ones those are, or the grid contradicts the bands without explaining why. */
.zw-act-tile--dismissed { background: var(--zw-paper-3); }

.zw-act-tile__kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }


.zw-act-tile__meta { font-size: 12px; color: var(--zw-muted); }
.zw-act-tile__state {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--zw-ladder-1);
  white-space: nowrap;
}

.zw-act-tile__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--zw-ink); }
.zw-act-tile__dek { font-size: 14px; line-height: 1.45; color: var(--zw-muted); }
.zw-act-tile__fit { font-size: 12px; color: var(--zw-pin-slate); }

/* --- sidebar --------------------------------------------------------------- */

.zw-act-side { display: grid; gap: 16px; }

.zw-act-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

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

.zw-act-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--zw-border-warm-inner);
}

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

.zw-act-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-blue-700);
  /* The kit sets nowrap on both of these. Without it "Profile →" breaks after the word
     and drops the arrow onto its own line in the 320px column. */
  white-space: nowrap;
}
.zw-act-card__link:hover { color: var(--zw-blue-800); }



.zw-act-setup { display: grid; gap: 11px; }

.zw-act-setup__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

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

/* Real form controls dressed as the kit's inline dashed-underline values. Boxed fields
   would turn a one-glance summary into a settings form, which is not what the sidebar is
   for — but these still have to WRITE, which is the whole reason the panel exists. */
.zw-act-setup__value {
  appearance: none;
  -webkit-appearance: none;
  max-width: 60%;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--zw-ink);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--zw-whisper);
  border-radius: 0;
  cursor: pointer;
}

.zw-act-setup__value:hover { border-bottom-color: var(--zw-ink); }

.zw-act-setup__value:focus {
  outline: none;
  border-bottom-style: solid;
  border-bottom-color: var(--zw-blue-700);
}

.zw-act-side__events { margin-top: 12px; display: grid; gap: 2px; }

.zw-act-event {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 9px;
  transition: background var(--dur-2) var(--zw-ease-out);
}

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

.zw-act-event__head { display: flex; align-items: center; gap: 8px; }

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

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

/* Indented to clear the dot, so the date lines up under the title rather than under the
   marker. */
.zw-act-event__when { padding-left: 15px; font-size: 13px; color: var(--zw-muted); }


/* --- Yours: the reader's own to-dos ---------------------------------------- */

/* Add-row and composer SWAP rather than stack, as the kit has it. The summary is hidden
   while the details is open so only one of the two is ever on screen. */
.zw-act-add__form { margin: 0; }

/* A button that creates the row, not a disclosure that reveals a form. */
.zw-act-add__row {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--zw-radius-md);
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-act-add__row::-webkit-details-marker { display: none; }
.zw-act-add__row:hover { background: var(--zw-surface-warm); }

/* A dashed tick box, so the row reads as a blank waiting to be filled. Kit line 222. */
.zw-act-add__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  font-size: 14px;
  line-height: 1;
  color: var(--zw-faint);
  border: 1.5px dashed var(--zw-border-warm-strong);
  border-radius: 5px;
}

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

/* The editor is the row's own content: the row itself is already the lifted card once open,
   so a second card floating inside it would be a card in a card. */
.zw-act-composer,
.zw-act-composer--edit {
  margin: 10px 0 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

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

/* Lines the inputs up with the rows above. Solid, not dashed: it stands in for a real tick
   box rather than for an empty one. */
.zw-act-composer__mark {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--zw-border-warm-strong);
  border-radius: 5px;
}

.zw-act-composer__fields { display: grid; gap: 7px; min-width: 0; }

/* Borderless and transparent — the kit gives these no underline at all. An input that looks
   like a field turns a quick note into filling in a form. */
.zw-act-composer__title,
.zw-act-composer__note {
  min-width: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
}

.zw-act-composer__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zw-ink);
}

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

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

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

/* The kit has no save button — it commits on Enter. We keep one because a form that only
   submits on a keystroke is unusable on a phone, but it stays quiet. */
.zw-act-composer__save {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-blue-700);
  background: none;
  border: none;
  border-radius: var(--zw-radius-pill);
  cursor: pointer;
  transition: background var(--dur-2) var(--zw-ease-out);
}

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

.zw-act-composer__form { margin: 0; }
.zw-act-composer__delete-form { margin: 0; }

/* An icon button, not a "Delete" label: it sits beside a save action and should not read as
   the equal-weight second option. Kit line 212. */
.zw-act-composer__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--zw-whisper);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-2) var(--zw-ease-out), color var(--dur-2) var(--zw-ease-out);
}

.zw-act-composer__delete:hover { background: var(--zw-advocacy-track); color: var(--zw-advocacy); }

/* The note, shown on a collapsed row. */
.zw-act-item__note { display: block; margin-top: 2px; font-size: 14px; color: var(--zw-muted); }

/* --- Habits ---------------------------------------------------------------- */

/* Boxed, unlike a Single Action row: a 21-day run with a progress track is something you
   commit to rather than a line you tick. Kit values, Tools.dc.html:278. */
.zw-act-habit {
  padding: 18px 20px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-md);
  box-shadow: var(--zw-shadow-hairline);
  transition: box-shadow var(--dur-3) var(--zw-ease-out), border-color var(--dur-3) var(--zw-ease-out);
}

.zw-act-habit:hover { box-shadow: var(--zw-shadow-dock); }

.zw-act-habit__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.zw-act-habit__lead { display: grid; gap: 4px; min-width: 0; }

.zw-act-habit__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--zw-ink); }
.zw-act-habit__dek { font-size: 14px; line-height: 1.5; color: var(--zw-muted); }

/* Blue, not the kit's green. Starting a habit is an action, and 3.0's own law says green
   measures — the track below this is where the green belongs. */
.zw-act-habit__join {
  flex: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-surface);
  background: var(--zw-blue-700);
  border: 1px solid var(--zw-blue-700);
  border-radius: var(--zw-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-act-habit__join:hover { background: var(--zw-blue-800); color: var(--zw-surface); }

/* Enrolled is a state, not an invitation, so it stops looking like a button to press. */
.zw-act-habit__join--on {
  color: var(--zw-ladder-1);
  background: var(--zw-green-50);
  border-color: var(--zw-green-50);
}

.zw-act-habit__join--on:hover { background: var(--zw-green-50); color: var(--zw-ladder-1); }

.zw-act-habit__track { margin-top: 14px; }

.zw-act-habit__foot { margin-top: 10px; }

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

.zw-act-habit__whylink {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-blue-700);
  cursor: pointer;
  list-style: none;
}

.zw-act-habit__whylink::-webkit-details-marker { display: none; }
.zw-act-habit__whylink:hover { color: var(--zw-blue-800); }

.zw-act-habit__whybody {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--zw-surface-warm);
  border-radius: var(--zw-radius-sm);
}

.zw-act-habit__whybody p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--zw-muted); }
.zw-act-habit__whybody p:last-child { margin-bottom: 0; }