/* widgets.css — the friends surfaces: the header inbox, and (from P5) the dock.
 *
 * These styles live in their own file on purpose. The 2026-05 build put the
 * bell and dock rules roughly 4,600 lines into my-ranges.css, a file about
 * something else entirely, and they stayed there for months because nobody
 * could find them. One file, one feature.
 *
 * Everything here is prefixed `fr-` and reuses the header's own `.acct-hicon`
 * geometry so the bell sits in the cluster as a peer rather than a bolt-on.
 * Colours come from theme.css where the token exists.
 */

/* ── The hidden-attribute rule ─────────────────────────────────────────────
   Ships in the same file as the panel it protects. A `.fr-panel { display: flex }`
   written later would otherwise beat the `hidden` attribute, which is exactly
   how a panel that would not close, and a widget that flashed at signed-out
   visitors, both shipped. `!important` is the point of this rule, not a smell. */
.fr-panel[hidden],
.fr-dock[hidden],
.fr-dock-panel[hidden],
.fr-modal-root[hidden],
[hidden].fr-row-actions { display: none !important; }

/* Focus mode is "everything but the hand out of the way", so the dock goes too.
   It is a display rule rather than a state in JS: nothing to forget to unset. */
body.focus-mode .fr-dock { display: none !important; }

/* ── Bell ──────────────────────────────────────────────────────────────────
   Inherits .acct-hicon from account.css; this only adds the badge. */

.fr-bell { position: relative; flex-shrink: 0; border: 1px solid var(--border, #363332); border-radius: 50%; background: var(--bg-card, #1a1918); }

.fr-badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-raise, #e05252);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #0a0a0a;
  pointer-events: none;
}

/* ── Panel ─────────────────────────────────────────────────────────────────
   Same anchoring as .acct-panel in account.css (absolute, top 52px, right 12px
   against the header) rather than a second positioning scheme for the same
   header. The two panels are mutually exclusive without any coupling between
   the modules: clicking the bell is an outside click for the account menu, and
   clicking the account button is an outside click for this one, so each
   module's own dismiss handler closes the other. */

.fr-panel {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 60;
  width: min(340px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.fr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}

.fr-panel-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary, #888);
}

.fr-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-accent, #F0B65C);
  cursor: pointer;
}
.fr-link:hover { text-decoration: underline; }
.fr-link:focus-visible { outline: 2px solid var(--color-accent, #F0B65C); outline-offset: 2px; border-radius: 3px; }

/* The panel is the one place in the app allowed its own scrollbar: it is an
   overlay, not a sub-container of a view, so the single-scrollbar invariant
   (html, body { overflow: hidden }; only the active view scrolls) is intact. */
.fr-panel-body {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fr-empty {
  margin: 0;
  padding: 26px 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted, #7a7a7a);
  text-align: center;
}

/* ── Rows ──────────────────────────────────────────────────────────────────*/

.fr-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}
.fr-row:last-child { border-bottom: 0; }

/* Unread carries a rail rather than a background wash, so a long unread list
   does not turn into a solid block of colour. */
.fr-row.unread { box-shadow: inset 2px 0 0 var(--color-accent, #F0B65C); }

.fr-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: hsl(var(--fr-hue, 40) 42% 26%);
  color: hsl(var(--fr-hue, 40) 70% 86%);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}

.fr-row-main { min-width: 0; }

.fr-row-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-primary, #f0f0f0);
  overflow-wrap: anywhere;
}
.fr-row-text strong { font-weight: 650; color: #fff; }

.fr-row-age {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--text-muted, #7a7a7a);
  white-space: nowrap;
  padding-top: 2px;
}

.fr-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Buttons ───────────────────────────────────────────────────────────────*/

.fr-btn {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border, #2a2a2a);
  background: var(--bg-elevated, #222);
  color: var(--text-primary, #f0f0f0);
  cursor: pointer;
  transition: filter 160ms ease, background 160ms ease, transform 160ms ease;
}
.fr-btn:hover:not(:disabled) { background: #2b2b2b; }
.fr-btn:active:not(:disabled) { transform: translateY(1px); }
.fr-btn:focus-visible { outline: 2px solid var(--color-accent, #F0B65C); outline-offset: 2px; }
.fr-btn:disabled { opacity: 0.5; cursor: default; }

.fr-btn-primary {
  background: linear-gradient(180deg, #F7CB7F 0%, #E5A447 100%);
  border-color: #F7CB7F;
  color: #0E0A19;
}
.fr-btn-primary:hover:not(:disabled) { filter: brightness(1.06); background: linear-gradient(180deg, #F9D28A 0%, #E8AB52 100%); }

/* Block is deliberately the quietest control in the row: it is the one action
   here with no undo path in the UI. */
.fr-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted, #7a7a7a);
}
.fr-btn-quiet:hover:not(:disabled) { color: var(--color-raise, #e05252); background: rgba(224, 82, 82, 0.10); }

/* ── Narrow screens ────────────────────────────────────────────────────────*/

@media (max-width: 520px) {
  .fr-panel {
    position: fixed;
    top: auto;
    right: 8px;
    left: 8px;
    width: auto;
  }
  .fr-panel-body { max-height: 56vh; }
}

/* ── Motion ────────────────────────────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  .fr-btn,
  .fr-panel { transition: none !important; animation: none !important; }
  .fr-btn:active:not(:disabled) { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The dock (P5)
   ══════════════════════════════════════════════════════════════════════════*/

.fr-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 55;                 /* under modals and toasts, over the views */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--font-sans);
}

/* ── Collapsed pill ────────────────────────────────────────────────────────*/

.fr-dock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--bg-card, #1a1a1a);
  color: var(--text-primary, #f0f0f0);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-dock-pill:hover { background: var(--bg-elevated, #222); border-color: #3a3a3a; }
.fr-dock-pill:active { transform: translateY(1px); }
.fr-dock-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(240, 182, 92, 0.55); }
.fr-dock-pill.active { border-color: var(--color-accent, #F0B65C); color: var(--color-accent, #F0B65C); }

.fr-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-muted, #7a7a7a);
}
.fr-dot.live { background: var(--color-correct, #00d4a0); box-shadow: 0 0 0 3px rgba(0, 212, 160, 0.16); }

.fr-dock-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 17px;
}

/* ── Expanded panel ────────────────────────────────────────────────────────*/

.fr-dock-panel {
  display: flex;
  flex-direction: column;
  width: min(310px, calc(100vw - 32px));
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.fr-tabs { display: flex; border-bottom: 1px solid var(--border, #2a2a2a); }

.fr-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary, #888);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.fr-tab:hover { color: var(--text-primary, #f0f0f0); }
.fr-tab.active { color: var(--color-accent, #F0B65C); border-bottom-color: var(--color-accent, #F0B65C); }
.fr-tab:focus-visible { outline: 2px solid var(--color-accent, #F0B65C); outline-offset: -2px; }

/* An overlay, not a sub-container of a view — the single-scrollbar invariant
   is about the view stack and is unaffected. */
.fr-dock-body {
  max-height: min(340px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Rows ──────────────────────────────────────────────────────────────────*/

.fr-dock-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}
.fr-dock-row:last-child { border-bottom: 0; }

.fr-dock-row .fr-tile { width: 28px; height: 28px; font-size: 12px; }

/* Online is a ring on the tile rather than a separate dot: one thing to read. */
.fr-tile.online { box-shadow: 0 0 0 2px var(--bg-card, #1a1a1a), 0 0 0 3.5px var(--color-correct, #00d4a0); }

.fr-dock-row .fr-row-text {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-row-sub {
  margin: 1px 0 0;
  font-size: 10.5px;
  color: var(--text-muted, #7a7a7a);
}
.fr-row-sub.on { color: var(--color-correct, #00d4a0); }

/* The action slot holds "Remove" today and "Send range" from P6. Reserving it
   now keeps the row from reflowing when the second action arrives. */
.fr-row-slot { display: flex; align-items: center; gap: 5px; }

.fr-dock-row .fr-btn { font-size: 11px; padding: 4px 9px; }

.fr-sent {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #7a7a7a);
  padding: 4px 9px;
}

/* ── Find ──────────────────────────────────────────────────────────────────*/

.fr-find { padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2a2a); }

.fr-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border, #2a2a2a);
  background: var(--bg-primary, #0a0a0a);
  color: var(--text-primary, #f0f0f0);
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.fr-input::placeholder { color: var(--text-muted, #7a7a7a); }
.fr-input:focus { outline: none; border-color: var(--color-accent, #F0B65C); }

/* ── Discoverability prompt ────────────────────────────────────────────────*/

.fr-prompt { padding: 16px 14px; }

.fr-prompt-title { margin: 0 0 8px; font-size: 13px; color: var(--text-primary, #f0f0f0); }
.fr-prompt-title strong { color: var(--color-accent, #F0B65C); }

.fr-prompt-body {
  margin: 0 0 14px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted, #7a7a7a);
}

.fr-prompt-actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── Narrow screens ────────────────────────────────────────────────────────*/

@media (max-width: 520px) {
  .fr-dock { right: 10px; bottom: 10px; left: 10px; align-items: stretch; }
  .fr-dock-pill { align-self: flex-end; }
  .fr-dock-panel { width: auto; }
  .fr-dock-body { max-height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-dock-pill { transition: none !important; }
  .fr-dock-pill:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Send-a-range modal (rebuilt 2026-09-06)

   Layering matters more than looks here. The Range Library overlay is
   z-index 250 (my-ranges.css) and this dialog is opened *from* a card inside
   it, so at the old z-index 90 it rendered behind the library — the only way
   to reach it was to close the library first. It now sits above every in-app
   overlay; toasts (10000, layout.css) still win, which is what we want: the
   result of a send has to be readable over the dialog.
   ══════════════════════════════════════════════════════════════════════════*/

:root { --fr-modal-z: 400; }

.fr-modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--fr-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(6, 5, 4, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--font-sans);
  animation: frModalFade 150ms ease-out;
}

@keyframes frModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes frModalRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.fr-modal {
  width: min(440px, 100%);
  max-height: min(620px, 88vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #111);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-lg, 12px);
  /* The gold rim is what makes this read as the page's own surface rather than
     a browser dialog that wandered in. */
  box-shadow:
    0 0 0 1px rgba(240, 182, 92, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: frModalRise 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Head ──────────────────────────────────────────────────────────────────*/

.fr-modal-head,
.fr-send-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border, #2a2a2a);
  background: linear-gradient(180deg, rgba(240, 182, 92, 0.07) 0%, rgba(240, 182, 92, 0) 100%);
}

.fr-send-heading { min-width: 0; }

.fr-send-eyebrow {
  margin: 0 0 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent, #F0B65C);
  opacity: 0.85;
}

.fr-send-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text-primary, #f0f0f0);
}

.fr-modal-x {
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted, #7a7a7a);
  cursor: pointer;
  transition: color 140ms ease;
}
.fr-modal-x:hover { color: var(--text-primary, #f0f0f0); }
.fr-modal-x:focus-visible { outline: 2px solid var(--color-accent, #F0B65C); outline-offset: 2px; border-radius: 3px; }

/* ── Subject: the half already chosen, echoed back ─────────────────────────
   Rendered as the object it is — a range wears its own card's tags and
   progress bar, a friend wears their dock tile — so nothing is sent blind and
   the dialog reads as a continuation of the library, not a new place. */

.fr-subject {
  margin: 14px 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(240, 182, 92, 0.22);
  border-radius: var(--radius-md, 8px);
  background:
    linear-gradient(180deg, rgba(240, 182, 92, 0.08) 0%, rgba(240, 182, 92, 0.03) 100%),
    var(--bg-card, #1a1a1a);
}

.fr-subject-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fr-subject-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-primary, #f0f0f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-subject-tags { display: flex; gap: 5px; flex-wrap: wrap; }

.fr-subject-progress { margin-top: 10px; }

.fr-subject-friend { display: flex; align-items: center; gap: 11px; }
.fr-subject-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-subject-sub { font-size: 11px; color: var(--text-muted, #7a7a7a); }

/* ── Pick header (label + optional search) ─────────────────────────────────*/

.fr-send-pickhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 9px;
}

.fr-send-label {
  flex: 1 1 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #7a7a7a);
  white-space: nowrap;
}

.fr-send-search { width: min(170px, 52%); flex: 0 0 auto; }

/* ── The list ──────────────────────────────────────────────────────────────*/

.fr-modal-body { overflow-y: auto; overscroll-behavior: contain; }

.fr-send-list {
  flex: 1 1 auto;
  min-height: 92px;
  padding: 0 10px 4px;
}

.fr-pick {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-md, 8px);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.fr-pick:hover:not(:disabled) { background: var(--bg-elevated, #222); border-color: #3a3a3a; }
.fr-pick:active:not(:disabled) { transform: translateY(1px); }
.fr-pick:focus-visible { outline: 2px solid var(--color-accent, #F0B65C); outline-offset: 1px; }
.fr-pick:disabled { opacity: 0.55; cursor: default; }

/* Chosen, not sent. The tick is the promise that the gold button is the thing
   that actually sends. */
.fr-pick.picked {
  border-color: rgba(240, 182, 92, 0.55);
  background: rgba(240, 182, 92, 0.10);
}

.fr-pick-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.fr-pick-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-pick-sub { font-size: 10.5px; color: var(--text-muted, #7a7a7a); }
.fr-pick-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.fr-pick-count {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--text-muted, #7a7a7a);
  white-space: nowrap;
}

.fr-pick-check {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1.5px solid #3d3d3d;
  border-radius: 999px;
  transition: border-color 140ms ease, background 140ms ease;
}
/* The tick is a masked SVG rather than an icon font: nothing to load, and it
   takes the colour of whatever it sits on. */
.fr-pick.picked .fr-pick-check {
  border-color: var(--color-accent, #F0B65C);
  background: var(--color-accent, #F0B65C);
}
.fr-pick.picked .fr-pick-check::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #0E0A19;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.2 16.4 5 12.2l-1.6 1.6 5.8 5.8L21 8.8 19.4 7.2z'/></svg>") no-repeat 50% / 11px 11px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.2 16.4 5 12.2l-1.6 1.6 5.8 5.8L21 8.8 19.4 7.2z'/></svg>") no-repeat 50% / 11px 11px;
}

/* ── Foot: the note and the one button that sends ──────────────────────────*/

.fr-send-foot {
  border-top: 1px solid var(--border, #2a2a2a);
  background: var(--bg-primary, #0a0a0a);
}

.fr-modal-note {
  margin: 0;
  padding: 12px 18px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted, #7a7a7a);
}

.fr-send-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 18px 14px;
}

.fr-send-cta {
  font-size: 12.5px;
  padding: 9px 18px;
  border-radius: var(--radius-md, 8px);
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-send-cta:disabled { opacity: 0.45; }
/* Sent: the button confirms before the dialog leaves, so a successful send does
   not read as the modal simply vanishing. */
.fr-send-cta.done {
  background: var(--color-correct, #00d4a0);
  border-color: var(--color-correct, #00d4a0);
  color: #06231c;
  opacity: 1;
}
.fr-send-cta.done::before { content: '\2713\00a0'; }

.fr-send-actions .fr-btn { padding: 9px 14px; font-size: 12px; border-radius: var(--radius-md, 8px); }

/* ── Narrow screens ────────────────────────────────────────────────────────*/

@media (max-width: 520px) {
  .fr-modal-root { padding: 12px; align-items: flex-end; }
  .fr-modal { width: 100%; max-height: 92vh; }
  .fr-send-pickhead { flex-wrap: wrap; }
  .fr-send-search { width: 100%; }
  .fr-send-actions { flex-direction: column-reverse; align-items: stretch; }
  .fr-send-cta { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-modal-root, .fr-modal { animation: none !important; }
  .fr-modal, .fr-pick, .fr-pick-check, .fr-modal-x { transition: none !important; }
  .fr-pick:active:not(:disabled) { transform: none; }
}

/* ── The share row's preview, inside the inbox ─────────────────────────────*/

.fr-preview {
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary, #0a0a0a);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted, #7a7a7a);
}
.fr-preview dt { display: inline; font-weight: 600; color: var(--text-secondary, #888); }
.fr-preview dd { display: inline; margin: 0 10px 0 4px; color: var(--text-primary, #f0f0f0); }
.fr-preview-spots {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  word-break: break-word;
  color: var(--text-muted, #7a7a7a);
}

/* ── The send affordance on a My Ranges card ───────────────────────────────
   Lives here rather than in my-ranges.css: it is a friends control that happens
   to sit on a range card, and the whole point of this file is that the feature's
   styles are findable in one place.

   It used to be a bare grey glyph that only coloured on hover, which is how a
   founder demoing the feature could not find the way to send a range on his own
   product. Sending is the point of the Range Library, so the control now carries
   the accent at rest and reads as a button before it is touched. Defined once
   here; the library grid no longer overrides it. */

.range-card-header-actions { display: flex; align-items: center; gap: 6px; }

.range-card-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-accent, #F0B65C);
  background: rgba(240, 182, 92, 0.10);
  border: 1px solid rgba(240, 182, 92, 0.34);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Paper plane as a mask rather than a glyph: no icon font to load, and it
   takes whatever colour the button is in at the time. */
.range-card-send::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l21-9L2 3v7l15 2-15 2v7z'/></svg>") no-repeat 50% / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l21-9L2 3v7l15 2-15 2v7z'/></svg>") no-repeat 50% / contain;
}

.range-card-send:hover {
  background: rgba(240, 182, 92, 0.18);
  border-color: rgba(240, 182, 92, 0.6);
  color: #F7CB7F;
}
.range-card-send:focus-visible { outline: 2px solid var(--color-accent, #F0B65C); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .range-card-send { transition: none !important; } }