/* SHARED·ACTIONS (403) — THE CHEVRON ACTIONS MENU. Save · Reminder · Share. (D-453 · D-556)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 THIS COMPONENT WAS LIVING IN ANOTHER CARD'S STYLESHEET, AND LOCKING 109 IS WHAT EXPOSED IT.
 *
 * D-453 locked the chevron menu APP-WIDE in July — it is how every item on every surface reveals
 * Save / Reminder / Share. But it was first BUILT on the home audio card, so it was written into
 * `cards/home/deep-read.css` with a `dpr-` prefix, and there it stayed.
 *
 * Then (D-549e) the menu MOVED OFF that card into the full-screen player — and the rules did not
 * move with it. The result: card 109's stylesheet was the sole owner of a component 109 DOES NOT
 * RENDER, and /listen was reaching across into another card's CSS to borrow it. I even wrote a
 * comment in deep-read.css explaining that the rules were "kept because the player reuses them",
 * which is a confession dressed up as documentation: I noticed the smell and annotated it instead
 * of fixing it.
 *
 * Nothing was visibly broken. It rendered perfectly. It would have gone on rendering perfectly right
 * up until somebody deleted card 109 — or its CSS — and the actions menu vanished from a surface
 * that has nothing to do with it. THE ONLY REASON THIS SURFACED AT ALL is that promoting 109 to
 * `locked` turned on the card-mirror check, which asks a question no human was asking: DOES THIS
 * CARD'S STYLESHEET ONLY STYLE THIS CARD?
 *
 * ⚠️ A SHARED COMPONENT WITH A CARD'S PREFIX IS A SHARED COMPONENT NOBODY KNOWS IS SHARED.
 * The prefix is not decoration — it is the claim of ownership. `dpr-menu` says "this belongs to the
 * deep-read card", and every future editor would have believed it.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * THE SPEC (D-453, locked 2026-07-07 — it replaced the ⋯ three-dots, which tested badly:
 * "I didn't know what the 3 dots would do till I clicked"):
 *   · REST = a right-caret ">" · OPEN = rotated 90° to "⌄". The affordance says which way it goes.
 *   · The menu is a DROPDOWN anchored directly beneath the chevron (transform-origin: top right) —
 *     NOT a bottom sheet. The tap-location and the reveal must match, or the surface jumps away
 *     from the thumb that summoned it.
 */

.act-wrap { position: relative; flex: none; }

.act-chev {
  position: relative;               /* anchors the ::before hit extension */
  width: var(--dim-32); height: var(--dim-32);
  border: 0; background: 0;
  border-radius: var(--radius-round);
  color: var(--text-tertiary);      /* rest = tertiary; open = accent (AFFORDANCE-SPEC §2) */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* the VISUAL stays 32px; the HIT area is the D-463 44px floor — a transparent halo, no layout */
.act-chev::before { content: ""; position: absolute; inset: calc((var(--dim-32) - var(--tap-target)) / 2); }
.act-chev svg {
  width: var(--size-16); height: var(--size-16); display: block;
  transition: transform var(--duration-200) var(--ease-in-out);
}
.act-chev[aria-expanded="true"] { color: var(--accent); }
.act-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
/* D-450 — reduce-motion: the state still changes, instantly; nothing tweens */
@media (prefers-reduced-motion: reduce) {
  .act-chev svg, .act-menu { transition: none; }
}
.act-chev:active { opacity: 0.72; }
.act-chev:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.act-menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: 5;
  min-width: 12.5rem;                    /* token-exception: the menu's own measure */
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-8))) scale(0.98);
  transform-origin: top right;           /* it grows FROM the chevron she just tapped */
  pointer-events: none;
  transition: opacity var(--duration-200) var(--ease-in-out), transform var(--duration-200) var(--ease-in-out);
}
.act-menu.act-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.act-row {
  display: flex; align-items: center; gap: var(--space-12);
  width: 100%;
  min-height: var(--dim-44);             /* a thumb */
  padding: var(--space-12) var(--space-16);
  background: 0; border: 0;
  border-top: 1px solid var(--border-hairline);   /* token-exception: a hairline */
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--size-15);
  color: var(--text-primary);
}
.act-row:first-of-type { border-top: 0; }
.act-row svg { width: var(--size-20); height: var(--size-20); flex: none; color: var(--text-secondary); }
.act-row:active { background: var(--surface-card-hover); }
.act-row:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }

/* ── TAPPED-STATE GLYPHS (D-624.1) — Pin and Remind are TOGGLES, and the glyph says so.
 * The row carries BOTH glyphs (outline + the SAME Phosphor path filled, icons.js) inside one
 * fixed-size .act-ico; .act-on swaps outline→fill and TURNS the wrapper 45° — the pin's point
 * swings down to "stuck in", the bell tips its bottom to the lower-left, ringing. The turn is a
 * transition on the wrapper so reduce-motion can drop the ROTATION and keep the FILL (D-450):
 * the state must still read without motion. */
.act-ico { position: relative; flex: none; width: var(--size-20); height: var(--size-20); transition: transform var(--duration-200) var(--ease-in-out); }
.act-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.act-ico svg:nth-child(2) { opacity: 0; }                              /* the filled twin waits */
.act-row.act-on .act-ico svg:first-child:not(:only-child) { opacity: 0; }
.act-row.act-on .act-ico svg:nth-child(2) { opacity: 1; }
.act-row[data-act="pin"] .act-ico { transform: rotate(-45deg); }             /* rest: pin points straight down (upright) */
.act-row.act-on[data-act="pin"] .act-ico { transform: rotate(0deg); }        /* on: point swings to its natural lower-left — "stuck in" */
.act-row.act-on[data-act="reminder"] .act-ico { transform: rotate(45deg); }  /* bell bottom to lower-left */
/* the ON row LIGHTS — the wash one step up, same family as the extent cue (D-615.1) */
.act-row.act-on { background: var(--teal-100); }
@media (prefers-reduced-motion: reduce) {
  .act-ico { transition: none; }
  .act-row[data-act="pin"] .act-ico,
  .act-row.act-on .act-ico { transform: none; }   /* D-450: fill stays, the turn goes */
}

/* ON A DARK SURFACE the chevron inherits the surface, not the card. The player is ink (D-551). */
.act-on-dark .act-chev { color: var(--text-on-dark); }

/* 🔴 PINNED IS A STATE, AND STATE IS COLOUR. (D-404 · D-558)
 * The row does not open anything and does not confirm anything — it BECOMES the confirmation:
 * "Pin" → "Pinned · Sleep". One tap, no screen (D-443). Tapping it again is the undo. */
.act-row.act-on { color: var(--accent); }
.act-row.act-on svg { color: var(--accent); }

/* ── THE ANCHORED PICKERS (D-624.2 · D-625) — pin's collection picker and remind's date/time
 * picker share ONE popover chassis (.act-pick): a compact card anchored exactly where the menu
 * was — at the pin/bell she just tapped — growing from the top right like the menu does. NEVER
 * a bottom sheet: the tap-location and the reveal must match (D-453), and the old renderWhen
 * reach-down sheet is gone with its scrim. */
.act-pick {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: 6;                            /* above a still-fading menu */
  width: 17.5rem;                        /* token-exception: the popover's own measure */
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-12);
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-8))) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--duration-200) var(--ease-in-out), transform var(--duration-200) var(--ease-in-out);
}
.act-pick.act-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .act-pick { transition: none; } }

.act-pick-h { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-size: var(--size-16); font-weight: var(--weight-600); color: var(--text-primary); padding: var(--space-4) var(--space-4) var(--space-8); }
.act-pick-h .act-ico { color: var(--accent); }
.act-turn { transform: rotate(45deg); }                       /* the header bell sits turned (D-625) */
.act-pick-def .act-turn { transform: rotate(0deg); }          /* the default's pin sits at its natural lower-left — the pinned look (D-624) */
.act-pick-h .act-turn, .act-pick-def .act-turn { width: var(--size-16); height: var(--size-16); }
@media (prefers-reduced-motion: reduce) { .act-turn, .act-pick-def .act-turn { transform: none; } }

/* the PRE-CHECKED DEFAULT — the item's area, its pin filled+turned, the check saying "this is
 * where one tap files it". Just the area name; the word "area" is never shown (D-624). */
.act-pick-def { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); border: 0; border-radius: var(--radius-6); background: var(--teal-100); color: var(--nav-active); text-align: left; font-family: var(--font-body); font-size: var(--size-15); font-weight: var(--weight-600); cursor: pointer; }
.act-pick-def .act-ico { color: var(--accent); }
.act-pick-def > svg { width: var(--size-16); height: var(--size-16); margin-left: auto; color: var(--accent); flex: none; }
.act-pick-def:active { background: var(--teal-200); }
.act-pick-def:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.act-pick-lab { font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--text-tertiary); padding: var(--space-12) var(--space-4) var(--space-4); }

/* HER COLLECTIONS — one-tap targets; the FULL list scrolls in place (~4 rows visible, D-624:
 * no "More…" detour), the foot row never scrolls away. */
.act-pick-list { max-height: calc(4 * var(--dim-44)); overflow-y: auto; overscroll-behavior: contain; }
.act-pick-row { display: flex; align-items: center; width: 100%; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); border: 0; background: none; border-radius: var(--radius-6); text-align: left; font-family: var(--font-body); font-size: var(--size-15); color: var(--text-primary); cursor: pointer; }
.act-pick-row:active { background: var(--surface-card-hover); }
.act-pick-row:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }

/* NEW COLLECTION at the foot — always visible below the scroll (D-456 machinery: tap → inline
 * pre-filled name → create; a name is suggested, never demanded). */
.act-pick-foot { border-top: 1px solid var(--border-hairline); margin-top: var(--space-4); padding-top: var(--space-4); } /* token-exception: a hairline */
.act-pick-new { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); border: 0; background: none; border-radius: var(--radius-6); text-align: left; font-family: var(--font-body); font-size: var(--size-15); font-weight: var(--weight-600); color: var(--nav-active); cursor: pointer; }
.act-pick-new svg { width: var(--size-16); height: var(--size-16); flex: none; color: var(--accent); }
.act-pick-new:active { background: var(--surface-card-hover); }
.act-pick-new:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.act-pick-name { display: flex; gap: var(--space-8); padding: var(--space-4); }
.act-pick-name[hidden] { display: none; }
.act-pick-input { flex: 1; min-width: 0; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); border: 1px solid var(--border-hairline); border-radius: var(--radius-6); background: var(--surface-ground); font-family: var(--font-body); font-size: var(--size-15); color: var(--text-primary); } /* token-exception: a hairline */
.act-pick-input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.act-pick-create { min-height: var(--dim-44); padding: var(--space-8) var(--space-16); border: 0; border-radius: var(--radius-6); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-label); font-size: var(--size-14); font-weight: var(--weight-600); cursor: pointer; }
.act-pick-create:active { opacity: 0.85; }
.act-pick-create:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── THE REMINDER PICKER (D-625) — the same chassis; chips PRE-FILL, the fields decide.
 * Native date/time controls (D-450), no recurrence (D-452), scheduling owed to
 * @capacitor/local-notifications on device (see NOTES.md). */
.act-remind-t { font-family: var(--font-body); font-size: var(--size-14); color: var(--text-secondary); margin: 0; padding: 0 var(--space-4) var(--space-8); }
.act-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: 0 var(--space-4) var(--space-8); }
.act-chip { min-height: var(--dim-32); padding: var(--space-4) var(--space-12); border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--surface-card); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--nav-active); cursor: pointer; } /* token-exception: outlined chip */
.act-chip.act-sel { background: var(--accent); color: var(--text-on-accent); }
.act-chip:active { opacity: 0.85; }
.act-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.act-fields { display: flex; gap: var(--space-8); padding: 0 var(--space-4) var(--space-8); }
.act-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--text-tertiary); }
.act-date, .act-time { width: 100%; min-height: var(--dim-44); padding: var(--space-8) var(--space-12); border: 1px solid var(--border-hairline); border-radius: var(--radius-6); background: var(--surface-ground); font-family: var(--font-body); font-size: var(--size-15); color: var(--text-primary); } /* token-exception: a hairline */
.act-date:focus-visible, .act-time:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.act-set { display: block; width: 100%; min-height: var(--dim-44); margin-top: var(--space-4); border: 0; border-radius: var(--radius-6); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-label); font-size: var(--size-15); font-weight: var(--weight-600); cursor: pointer; }
.act-set:active { opacity: 0.85; }
.act-set:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.act-cal { display: block; width: 100%; min-height: var(--dim-44); border: 0; background: none; font-family: var(--font-label); font-size: var(--size-14); font-weight: var(--weight-600); color: var(--text-secondary); cursor: pointer; }
.act-cal:active { opacity: 0.72; }
.act-cal:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }