/* page-specific styles for account; shared components belong in dibs.css */
/* Fix round 1 (17 Oct 2026). The base rules for these eight pages are dibs.css section 20; these refine them. */

/* Links inside running text. --accent on --ink is about 1.4:1 in light, so colour alone does not mark a
   link in a sentence (WCAG 1.4.1); an underline does (PB: Primer prose links are underlined). Standalone
   links (footers, the on-this-page list, tertiary buttons) keep the plain style. */
.ac-sub a, .lg-read p a, .lg-read li a, .lg-read td a, #a-modal .wm-text a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ac-sub a:hover, .lg-read p a:hover, .lg-read li a:hover, .lg-read td a:hover, #a-modal .wm-text a:hover {
  text-decoration-thickness: 2px;
}
/* Legal: the signed-out table fits its column at every width (four wrapping columns at 600 and up, stacked
   rows under 600), so it needs no horizontal scroller. The scroller made this 8,300px page cost 20 to 35s
   to rasterize as a full-page capture (3s without it), which timed out the loop's capture script. */
.lg-table { overflow: visible; }

/* the reader's plan in the Pricing line carries the weight (L434 "You are on the Free plan") */
.ac-sub strong { font-weight: 600; color: var(--ink); }

/* Account: one control column. N516 gives every row's secondary button the same width and sets values in
   a column to their left; L314 keeps toggles and selects on the right edge. 88 is the widest label
   ("Re-upload", "Download"), so values line up whatever the row's action is. */
.ac .ac-ctl { min-width: 88px; justify-content: flex-end; }
.ac .ac-ctl > button:not(.text-btn) { min-width: 88px; }
.ac .ac-val .badge { vertical-align: middle; }
/* Signed-in devices: quiet buttons carry 12px padding, so they pull 12 (not 8) to put "Sign out" and
   "Sign out everywhere" on the same edges as the device names and the Close button (S261 footer). */
#a-modal .am-split > .btn-quiet:first-child { margin-left: calc(-1 * var(--s-3)); }
.ac-dev > .btn-quiet { margin-right: calc(-1 * var(--s-3)); }

/* Guest: the shared course row as on Discover; its empty trailing slot keeps the GPA column in place (sys 9.5) */

/* short centered lines: no one-word last line (the 404 sentence left "after." alone) */
.err-line, .si-ctx, .si-fine, .ac-col > .settings > .empty p { text-wrap: balance; }

/* Fix round 2 (17 Oct 2026) */
/* Support: one text inset for every bordered group on the settings pages (L314 and L270 use one inset).
   Setting rows pad 16 at the sides, so the form group does too: "Message", the help line and the fields
   start on the same x as the labels on Account and Status. The 24 above and below stays (L270 group). */
.sup-group { padding-left: var(--s-4); padding-right: var(--s-4); }
/* Account and Status: the inset rules between rows now live on the shared .setting-row (dibs.css), so every
   settings page draws them the same way. */
/* One footer set on every page, Sign in included: Help, Privacy and terms, Guest preview. The link to the page
   the reader is on stays in place, marked current in ink (app.js renderShell), so the set never changes. */
.app-foot a[aria-current="page"] { color: var(--ink); }

@media (max-width: 599px) {
  /* Account rows with no value line: the control sits on the label's line, centred with it, instead of
     spanning an empty value row (Openings to send, Email alerts when not held, Class chat email, Delete). */
  .ac-row:not(:has(.ac-val)) { grid-template-areas: "label ctl" "desc desc"; }
  /* Sign in: a 358 column on 16px gutters (spec 5, 390) rather than 320 centred */
  .si-col { width: auto; max-width: none; margin: 64px var(--s-4) 0; }
}
@media (max-width: 359px) {
  /* Pricing at 320: equal thirds left "Degree roadmap" 85px and broke it over two lines. Segments size to
     their names with 8px sides and never wrap; the three names fit the 278px track on one line. */
  .pr-seg > button { flex: 1 1 auto; padding: 0 var(--s-2); white-space: nowrap; }
  /* Account at 320: "Only seats I can take" left "Openings to send" about 110px, so the label broke in two.
     The select drops under the label at full width (as row values already stack under labels here); the
     "Every opening" caveat follows the choice it describes. */
  #ac-open { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "ctl" "desc"; row-gap: var(--s-2); }
  #ac-open .ac-ctl { display: flex; justify-self: stretch; }
  #ac-open .ac-ctl :is(select, :where(.csel)) { width: 100%; max-width: none; }
}
.ac-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: 2px; font: var(--t-meta); }

/* SMS seat alerts (/settings/sms) on Rails with the frontend switch on (owner Q15, proto-on-rails W5 S2): the
   kept Rails page inside layouts/frontend_plain. Scoped to body.plain, which no shell page carries, so these
   rules never reach #account. The page's markup is the old view's, unchanged. */
body.plain .acct-page { max-width: var(--w-form); }
body.plain .acct-back { display: inline-flex; margin-bottom: var(--s-4); color: var(--accent); }
body.plain .site-page-header { margin-bottom: var(--s-6); }
body.plain .site-page-header h1 { margin: 0; font: var(--t-title); color: var(--ink); }
body.plain .site-page-lead { margin: var(--s-1) 0 0; font: var(--t-body); color: var(--ink-2); }
body.plain .acct-panel { padding: var(--s-4) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
body.plain .acct-p { font: var(--t-body); color: var(--ink-2); }
body.plain .acct-h2 { margin: var(--s-6) 0 var(--s-2); font: var(--t-h2); color: var(--ink); }
body.plain .acct-error, body.plain .plain-flash.is-alert { color: var(--danger); }
body.plain .plain-flash { max-width: var(--w-form); margin-bottom: var(--s-4); font: var(--t-body); color: var(--ink); }
body.plain .acct-form { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
body.plain .acct-form input:not([type=checkbox]) { width: 100%; }
body.plain .acct-check { display: flex; gap: var(--s-2); align-items: flex-start; font-weight: 400; }
body.plain .acct-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.plain .acct-btn-danger { color: var(--danger); }
body.plain .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* W5 S5 (27 Oct 2026). Support: the contact box under Reply email. The privacy page says the address is kept
   "only when you choose to share it", so the choice is a visible box, unticked by default (Rails form, same
   sentence). The shared .sup-group input rule makes inputs full width; the box stays 16px. */
.sup-group > .sup-check { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
.sup-group > .sup-check input { display: block; width: 16px; margin: 2px 0 0; }

/* W5 S6 (27 Oct 2026). Status on Rails (account.js statusRails, GET /health.json). The same rows as the preview's
   two (.setting-row, .st-val), now three readings from Ops::PublicHealth, each with its scope sentence under the
   label and the time of its one oldest reading under the figure. The verdict line under the title carries the
   overall tone; stop is the danger colour, warn the warning colour, as on the old Rails page. */
.st-page .st-verdict { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); }
.st-page .st-verdict .st-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--positive); flex-shrink: 0; }
.st-page .st-verdict.is-warn .st-dot { background: var(--warning); }
.st-page .st-verdict.is-stop .st-dot, .st-val.is-stop .st-dot { background: var(--danger); }
.st-val.is-stop { color: var(--danger); }
.st-page .st-sec { margin-top: var(--s-6); }
.st-page .st-sec > .set-desc { margin: var(--s-1) 0 var(--s-3); }
.st-page .st-row { align-items: flex-start; gap: var(--s-4); }
.st-page .st-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.st-page .st-read { font: var(--t-meta); color: var(--muted); white-space: nowrap; }
.st-page .st-act { margin-left: var(--s-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.st-page .st-item { font-weight: 400; }
.st-page .is-past .st-item { color: var(--muted); }
.st-page .st-foot { margin-top: var(--s-6); }

/* The two primary Status rows retain the prototype layout. Public health context and
   notices remain accessible; current faults expand their details without a third primary row. */
.st-page .st-details { margin-top: var(--s-6); }
.st-page .st-details > summary { cursor: pointer; font: var(--t-label); color: var(--ink-2); }
.st-page .st-details > .set-desc { margin: var(--s-3) 0; }
.st-page > .settings .st-val { flex-shrink: 0; }