.p-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; max-width: 420px; box-shadow: 0 6px 20px rgba(120,90,20,.05); }
.p-field { display: block; margin-bottom: 18px; }
.p-field span { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.p-field input { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); font: inherit; font-size: .92rem; color: var(--ink); }
.p-field input:focus { outline: none; border-color: var(--brand); }
.p-field small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: .78rem; }
.p-save { margin-top: 4px; }
.p-note { margin-top: 12px; font-size: .85rem; }
.p-note.ok { color: var(--ok); }
.p-note.err { color: var(--die); }

.p-form { max-width: 480px; }
.p-styles { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 6px;
  margin: 0 0 18px; }
.p-styles legend { font-size: .82rem; font-weight: 700; color: var(--ink-soft); padding: 0 6px; }
.p-styles-hint { margin: 2px 0 10px; color: var(--ink-soft); font-size: .78rem; }
.p-style { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 10px;
  cursor: pointer; }
.p-style:hover { background: var(--marble, #f6f4ef); }
.p-style input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--brand); }
.p-style-body { display: block; }
.p-style-body b { display: block; font-size: .9rem; color: var(--ink); }
.p-style-body small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }

/* Shown when unsubscribed_at is set: the account is signed in and working, but every
   briefing is off. Without this the page gave no hint anything was wrong, and the
   unsubscribe page's promise ("sign in any time to turn the briefing back on") pointed
   at a control that did not exist. */
.p-unsub-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #e0c98a;
  border-left: 4px solid #d9a520;
  border-radius: 6px;
  background: #fdf7e6;
  font-size: 14px;
  line-height: 1.5;
}
.p-unsub-note span { color: #5b6470; }

/* Per-briefing table (2026-09-07): each briefing is a row with its own frequency + audio
   options, instead of a flat list of checkboxes. */
.p-form-wide { max-width: 620px; }
.p-briefings { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 10px; margin: 0 0 18px; }
.p-briefings legend { font-size: .82rem; font-weight: 700; color: var(--ink-soft); padding: 0 6px; }
.p-brief-rows { display: flex; flex-direction: column; gap: 10px; }

.p-brief { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--marble, #f9f7f2); }
.p-brief.is-on { background: #fff; border-color: var(--brand); }
.p-brief.is-locked { opacity: .72; }
.p-brief-head { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.p-brief-head input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--brand); }
.p-brief-body b { display: block; font-size: .92rem; color: var(--ink); }
.p-brief-body small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }
.p-lock { font-style: normal; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #8a6d1a; background: #fbf0cf; border: 1px solid #e6d190; border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

/* Options row, revealed under a received briefing. Each option is a compact column
   (label / control / hint) and they sit side by side, wrapping only when too narrow. */
.p-brief-opts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 10px 0 2px; padding-left: 26px; align-items: flex-start; }
.p-brief:not(.is-on) .p-brief-opts { opacity: .5; }
.p-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* Frequency takes a FIXED basis and Audio absorbs whatever is left. Two reasons: the audio
   note is long enough to look cramped in a 24ch column while the card has empty space beside it,
   and pinning Frequency stops the whole row shifting when its hint grows on Daily -> Weekly
   (24ch -> 34ch), which read as the layout jumping. min-width:0 lets the audio column
   actually shrink below its content on a narrow card instead of forcing an overflow. */
/* ⚠ px, not ch: `ch` here resolves against the COLUMN's 16px font, not the .72rem hint
   inside it, so a "34ch" basis came out 293px and wrapped the row. 200px fits the segmented
   control with room for its hint. */
.p-opt:not(.p-opt-audio) { flex: 0 0 200px; }
.p-opt:not(.p-opt-audio) .p-opt-hint { max-width: 100%; }
.p-opt-audio { flex: 1 1 240px; min-width: 0; }
.p-opt-audio .p-opt-hint { max-width: none; }
.p-opt-lbl { font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.p-opt-hint { color: var(--ink-soft); font-size: .72rem; line-height: 1.35; max-width: 24ch; }
/* The Weekly caveat. It says a wrap-up can arrive too late to register to testify, which is
   a consequence of the choice just made and not a neutral description of it — so it reads
   as a caution rather than as more grey helper text. Wider than a plain hint: cramming it
   into 24ch makes a five-line column out of the one option that must actually be read. */
.p-opt-hint.p-opt-warn { color: #8a5a00; max-width: 34ch; }
.p-audio-ctl { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .82rem; color: var(--ink); }
.p-audio-ctl input { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--brand); }
.p-opt-audio.is-disabled .p-audio-ctl { cursor: default; color: var(--ink-soft); }
.p-opt-audio.is-disabled .p-opt-lbl { color: var(--ink-soft); }

/* Frequency segmented control — content-width, so it doesn't stretch to the column and
   leave dead space to the right of "Weekly". */
.p-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.p-seg-btn { font: inherit; font-size: .78rem; padding: 4px 12px; border: 0; background: #fff; color: var(--ink-soft); cursor: pointer; }
.p-seg-btn + .p-seg-btn { border-left: 1px solid var(--line); }
.p-seg-btn.on { background: var(--brand); color: #fff; }
.p-seg-btn:disabled { cursor: default; opacity: .6; }
.p-seg-btn.on:disabled { opacity: 1; }

.p-noemail { display: flex; gap: 10px; align-items: flex-start; margin: 12px 2px 2px; padding: 9px 8px; border-top: 1px solid var(--line); cursor: pointer; }
.p-noemail input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--brand); }
.p-noemail b { display: block; font-size: .88rem; color: var(--ink); }
.p-noemail small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .76rem; line-height: 1.4; }

.p-upgrade { margin: 10px 2px 0; padding: 9px 12px; border: 1px solid #e6d190; border-left: 4px solid #d9a520;
  border-radius: 6px; background: #fdf7e6; font-size: .82rem; color: #5b4a12; }
.p-upgrade a { color: var(--brand); font-weight: 700; white-space: nowrap; }

.p-floor-note { display: flex; flex-direction: column; gap: 3px; margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--marble, #f9f7f2); }
.p-floor-note b { font-size: .9rem; color: var(--ink); }
.p-floor-note span { color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.p-floor-note a { color: var(--brand); font-weight: 600; }

/* ---- change the sign-in address -----------------------------------------
   Collapsed behind a "Change" button: it is a rare action sitting next to the
   briefing controls people actually come here for, and an always-open form
   full of email fields reads as something needing attention. */
.p-emailchange-open {
  border: 0; background: none; padding: 0 0 0 4px; cursor: pointer;
  color: var(--brand, #1f5f8b); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.p-emailchange-open:hover { color: var(--brand-dark, #164667); }
.p-emailchange[hidden] { display: none; }
.p-emailchange {
  margin: 10px 0 0; padding: 14px 16px;
  background: var(--marble, #f6f4ef); border: 1px solid var(--line, #e7e2d6);
  border-radius: 10px; max-width: 520px;
}
.p-emailchange-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.p-emailchange-cancel {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-soft, #55606f); font: inherit; text-decoration: underline;
}
.p-emailchange-note { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; }
.p-emailchange-note.is-ok { color: var(--ok, #276749); font-weight: 600; }
.p-emailchange-note.is-err { color: var(--die, #b42318); font-weight: 600; }

/* Committee Deadlines Report opt-out. Sits OUTSIDE the briefings fieldset on purpose: it is
   a plan entitlement that arrives twice a session, not a briefing, so it must not read as
   something the "No briefing emails of any kind" toggle covers. Styled like .p-floor-note
   (the other out-of-band row) rather than like a briefing row. */
.p-report {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--line, #e3e6ea); border-radius: 8px; background: #fbfcfd;
}
.p-report input { margin-top: 3px; flex: 0 0 auto; }
.p-report small { display: block; margin-top: 3px; color: #5b6470; line-height: 1.45; }

/* Link to the audio briefing player, for subscribers who get the MP3 versions. */
.p-listen { margin: 4px 0 12px; }
/* .a-btn's base colors are for the dark header (white text on translucent white), which made
   this one invisible on the white page except for its emoji. */
.p-listen .a-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--navy, #14304f); border-color: var(--navy, #14304f); color: #fff;
  font-size: .9rem; padding: 8px 16px; }
.p-listen .a-btn:hover { background: var(--brand-dark, #164667); }

/* Audio Briefing, rendered as a fourth row inside "Your briefings" -- so it inherits
   .p-brief / .p-opt from the other three and only needs its two own controls styled.
   It was a standalone card below the fieldset at first, which read as a different kind of
   thing and let the "no briefing emails" toggle leave it on. */
.p-pod-voice {
  width: 100%; max-width: 190px; padding: 6px 8px; font: inherit; font-size: .88rem;
  border: 1px solid var(--line, #e3e6ea); border-radius: 6px; background: #fff;
}
.p-opt.is-disabled .p-pod-voice { opacity: .55; }
/* Sits where .p-audio-ctl sits in the other rows, so the three columns line up. */
.p-pod-left { display: block; font-size: .92rem; padding: 3px 0; }
.p-pod-left b { font-size: 1.05rem; }
/* The counterpart to .p-lock, and deliberately a DIFFERENT HUE rather than a lighter
   version of it: amber marks something the reader cannot have, blue marks something they
   do. Same size and shape, so the two read as one badge language. */
.p-perk { font-style: normal; font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--brand-dark); background: #e8f1f8; border: 1px solid #b9d4e6;
  border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
/* Sits where the premium badge does, so the column has one fixed place for "about your
   allowance" whichever plan is reading it. */
.p-pod-up { font-size: .72rem; font-weight: 600; margin-left: 8px; white-space: nowrap;
  color: var(--brand); text-decoration: none; border-bottom: 1px solid #b9d4e6; }
.p-pod-up:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }

/* ---- Plan & billing card (profile.js renderPlan) -------------------------------------- */
.p-plan[hidden] { display: none; }
.p-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 4px 0 18px; padding: 14px 16px; background: #fff;
  border: 1px solid var(--line, #e7e2d6); border-radius: 12px; }
.p-plan-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.p-plan-text small { color: var(--ink-soft, #55606f); font-size: .86rem; line-height: 1.5; }
.p-plan-warn { color: var(--die, #b42318); font-weight: 600; }
.p-plan-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.p-plan-card .a-btn { background: var(--navy, #14304f); border-color: var(--navy, #14304f); color: #fff; }
.p-plan-card .a-btn:hover { background: #1d4370; }
.p-plan-note { color: var(--ink-soft, #55606f); font-size: .8rem; }
@media (max-width: 520px) { .p-plan-act { align-items: stretch; width: 100%; } }
.p-plan-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.p-plan-switch-btn { font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--brand, #1f5f8b);
  background: #fff; color: var(--brand-dark, #164667); }
.p-plan-switch-btn:hover:not(:disabled) { background: var(--marble, #f6f4ef); }
.p-plan-switch-btn:disabled { opacity: .5; cursor: default; }
.p-plan-switch em { font-style: normal; color: var(--ink-soft, #55606f); font-size: .8rem; }
/* Shown when a downgrade left saved choices the plan no longer includes (profile.js). */
.p-trimmed { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #fdf7e6;
  border: 1px solid #e0c98a; border-left: 4px solid #d9a520; font-size: .88rem; color: #3d4753; }

/* ---- Top of the page: header + plan card in the briefing form's width, mascot at right -- */
.p-top { display: flex; align-items: center; gap: 24px; }
.p-top-main { flex: 0 1 620px; min-width: 0; }   /* = .p-form-wide, so the plan card lines up */
.p-mascot { flex: 0 0 auto; width: 260px; height: auto; margin-left: auto; margin-right: 8%;
  filter: drop-shadow(0 6px 14px rgba(20,48,79,.18)); }
@media (max-width: 900px) { .p-mascot { width: 200px; margin-right: 0; } }
@media (max-width: 720px) {
  .p-top { position: relative; display: block; }
  .p-top .t-header { padding-right: 118px; }
  .p-mascot { position: absolute; top: 4px; right: 0; width: 112px; }
}