/* ============================================================
   account.css — sign in, sign up and the account pages

   Built as an app, on the site's own footing: the same canvas,
   lines and ink as every other page (the ll- tokens), the nav's
   own dark for the one dark surface, and the site's navy as the
   only accent.

   The layout is the product: a side menu and a working page when
   signed in; a form beside a live preview of an alert email when
   signed out. Panels are flat with hairlines, type is compact,
   controls are 38px. The decoration is the record itself.
   No icons. No stripes down the side of a card.

   Loaded only by the account pages, after legilist.css, and every
   rule sits under .acct-body or an .acct- class.
   ============================================================ */

.acct-body {
  --bg:          var(--ll-canvas, #fbfbfa);
  --panel:       var(--ll-surface, #ffffff);
  --line:        var(--ll-line, #e4e7ec);
  --line-2:      var(--ll-line-strong, #cfd5dd);
  --ink:         var(--ll-ink, #0f1b2a);
  --ink-2:       var(--ll-ink-2, #2e3f52);
  --ink-3:       var(--ll-ink-3, #5d6b7a);
  --ink-4:       var(--ll-ink-4, #8794a2);
  --accent:      #1c335f;
  --accent-deep: #152849;
  --accent-soft: rgba(28, 51, 95, 0.07);
  --accent-ring: rgba(28, 51, 95, 0.18);
  --dark:        #121d2b;
  --dark-2:      #1b2c49;
  --ok:          #1d6b4c;
  --ok-soft:     #e6f3ec;
  --warn:        #7a5210;
  --warn-soft:   #fdf4e0;
  --warn-line:   #efdcae;
  --bad:         #9b3327;
  --bad-soft:    #fbeae7;
  --r:           10px;
  --font:        var(--ll-font, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", sans-serif);
  --mono:        var(--ll-mono, ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.acct-main {
  width: var(--ll-wrap, min(1180px, 100% - 48px));
  margin: 0 auto;
  padding: 36px 0 80px;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.acct-main a { color: var(--accent); text-underline-offset: 2px; }
.acct-main a:hover { color: var(--accent-deep); }
.acct-main :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.acct-h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.acct-h2 { margin: 0; font-size: 0.9375rem; line-height: 1.3; font-weight: 650; color: var(--ink); }
.acct-about { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-3); }
.acct-lede { margin: 8px 0 0; color: var(--ink-3); font-size: 0.9375rem; }

/* ---- buttons ---------------------------------------------------------- */

.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.acct-main a.acct-btn-primary,
.acct-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(15, 27, 42, 0.12); }
.acct-main a.acct-btn-primary:hover,
.acct-btn-primary:hover { background: var(--accent-deep); color: #fff; }

.acct-main a.acct-btn-secondary,
.acct-btn-secondary { background: var(--panel); border-color: var(--line-2); color: var(--ink); box-shadow: 0 1px 0 rgba(15, 27, 42, 0.03); }
.acct-main a.acct-btn-secondary:hover,
.acct-btn-secondary:hover { border-color: var(--ink-4); background: #f7f8fa; color: var(--ink); }

.acct-btn-danger { background: var(--panel); border-color: #e3beb7; color: var(--bad); }
.acct-btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.acct-btn-small { height: 32px; padding: 0 11px; font-size: 0.8125rem; }
.acct-btn-wide { width: 100%; height: 40px; }
.acct-btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* ---- forms ------------------------------------------------------------ */

.acct-form { display: grid; gap: 16px; margin-top: 24px; }
.acct-form-tight { gap: 12px; margin-top: 14px; max-width: 380px; }
.acct-form-tight .acct-btn { justify-self: start; }

.acct-field { display: grid; gap: 6px; }
.acct-field label,
.acct-label-row label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.acct-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.acct-small-link { font-size: 0.8125rem; }

.acct-field input[type="email"],
.acct-field input[type="password"],
.acct-field input[type="text"],
.acct-field select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(15, 27, 42, 0.03);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.acct-field input:hover,
.acct-field select:hover { border-color: var(--ink-4); }
.acct-field input:focus,
.acct-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.acct-field input[aria-invalid="true"] { border-color: var(--bad); }

.acct-pw { position: relative; }
.acct-pw input { padding-right: 60px !important; }
.acct-pw-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.acct-pw-toggle:hover { background: var(--accent-soft); color: var(--accent); }

.acct-hint { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.acct-err { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--bad); }
.acct-fine { margin: -2px 0 0; font-size: 0.78rem; color: var(--ink-3); }
.acct-alt { margin: 24px 0 0; font-size: 0.875rem; color: var(--ink-3); }

.acct-checks { display: grid; gap: 9px; }
.acct-check { display: flex; gap: 9px; align-items: flex-start; font-size: 0.875rem; color: var(--ink-2); cursor: pointer; }
.acct-check input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }

/* the trap field people never see */
.acct-hp { position: absolute; left: -6000px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { min-height: 65px; }

/* ---- notices ---------------------------------------------------------- */

.acct-notice {
  margin: 16px 0 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}
.acct-notice-ok   { background: var(--ok-soft);   border-color: #cfe6da; color: var(--ok); }
.acct-notice-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.acct-notice-bad  { background: var(--bad-soft);  border-color: #f1d2cc; color: var(--bad); }
.acct-main .acct-notice a { color: inherit; }

.acct-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--warn-line);
  border-radius: var(--r);
  background: var(--warn-soft);
  color: #54390a;
  font-size: 0.875rem;
}
.acct-banner form { margin: 0; }

.acct-stage {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--ink-3);
  font-size: 0.875rem;
}
.acct-stage span { display: block; margin-bottom: 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }

/* small labels on records and states */
.acct-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f6f7f9;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.acct-tag-ok   { background: var(--ok-soft);   border-color: #cfe6da; color: var(--ok); }
.acct-tag-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.acct-tag time { margin-left: 4px; font-weight: 500; }

/* ---- sign in / sign up: the form, and an alert email beside it --------- */

.acct-auth { padding-top: 40px; }

.acct-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 27, 42, 0.04), 0 24px 48px -32px rgba(15, 27, 42, 0.22);
}

.acct-split-form { display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.acct-split-inner { width: 100%; max-width: 360px; }
.acct-split-inner .acct-h1 { font-size: 1.625rem; }

.acct-show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px 44px;
  background: linear-gradient(155deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #dfe6ee;
}
.acct-show-eyebrow { margin: 0 0 10px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #93a5b9; }
.acct-show-title { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.acct-show-lede { margin: 12px 0 0; max-width: 46ch; font-size: 0.9375rem; color: #b9c5d3; }
.acct-show-lede .ll-num { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* the email, drawn as a mail app would show it */
.acct-mail {
  margin: 28px 0 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.acct-mail-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #f6f7f9;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.acct-mail-from b { margin-right: 6px; color: var(--ink); font-weight: 700; }
.acct-mail-when { font-weight: 600; }
.acct-mail-subject { margin: 0; padding: 14px 16px 10px; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.acct-mail-list { list-style: none; margin: 0; padding: 0; }
.acct-mail-list li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}
.acct-mail-list .acct-tag { justify-self: start; }
.acct-mail-text { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-mail-text strong { color: var(--ink); font-weight: 650; }
.acct-mail-foot { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-3); }

.acct-show-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
}
.acct-show-points li {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.78rem;
  color: #c7d2de;
}

/* one small panel: confirm, reset */
.acct-solo {
  max-width: 400px;
  margin: 32px auto 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(15, 27, 42, 0.04), 0 24px 48px -32px rgba(15, 27, 42, 0.22);
}
.acct-solo > .acct-btn { margin-top: 22px; }
.acct-solo > form > .acct-btn { margin-top: 22px; }
.acct-solo .acct-form > .acct-btn { margin-top: 0; }

/* ---- signed in: a side menu and the page ------------------------------- */

.acct-app {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.acct-side { position: sticky; top: 24px; }

.acct-id { display: flex; gap: 10px; align-items: center; padding: 0 8px 14px; border-bottom: 1px solid var(--line); }
.acct-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}
.acct-id-text { display: grid; min-width: 0; }
.acct-id-email { font-size: 0.8125rem; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-id-state { font-size: 0.75rem; color: var(--ink-3); }
.acct-id-state-warn { color: var(--warn); }

.acct-menu { display: grid; gap: 2px; margin-top: 12px; }
.acct-main .acct-menu a,
.acct-menu-btn {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
}
.acct-main .acct-menu a:hover,
.acct-menu-btn:hover { background: var(--accent-soft); color: var(--ink); }
.acct-main .acct-menu a.cur { background: var(--accent-soft); color: var(--accent); font-weight: 650; }

.acct-side-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-menu-btn { width: 100%; border: 0; background: transparent; font-family: inherit; color: var(--ink-3); cursor: pointer; text-align: left; }

.acct-content { min-width: 0; }

.acct-pagehead {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

/* figures, in one ruled strip */
.acct-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.acct-kpis > div { padding: 14px 18px 15px; border-left: 1px solid var(--line); }
.acct-kpis > div:first-child { border-left: 0; }
.acct-kpis dt { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); }
.acct-kpis dd { margin: 3px 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.acct-kpis small { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--ink-3); }

/* panels: flat, ruled, with a head */
.acct-panel { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.acct-panel-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 12px 8px 18px;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.acct-panel-sub { margin: 2px 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.acct-panel-sub .ll-num { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acct-panel-body { padding: 18px; }

.acct-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* the three seats, empty until the ZIP lookup fills them */
.acct-seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.acct-seat { display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.acct-seat-photo { width: 44px; height: 44px; border-radius: 50%; background: #eef0f3; }
.acct-seat-role { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); }

.acct-blank { margin: 0; color: var(--ink-3); font-size: 0.875rem; }
.acct-blank strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 650; }
.acct-panel-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }

.acct-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.acct-main .acct-links a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.acct-main .acct-links a:hover { border-color: var(--ink-4); background: #f7f8fa; }

/* records, as rows */
.acct-rows { list-style: none; margin: 0; padding: 0; }
.acct-row {
  display: grid;
  grid-template-columns: 138px 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.acct-row:first-child { border-top: 0; }
.acct-row time { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; }
.acct-row .acct-tag { justify-self: start; }
.acct-row-text { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-row-text strong { color: var(--ink); font-weight: 650; }

/* ---- settings: label, value, action ------------------------------------ */

.acct-set {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 18px;
  border-top: 1px solid var(--line);
}
.acct-set:first-child { border-top: 0; }
.acct-set-label p { margin: 3px 0 0; font-size: 0.8125rem; color: var(--ink-3); }

.acct-set-line { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 32px; }
.acct-set-value { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.acct-set-value .ll-num { font-variant-numeric: tabular-nums; }
.acct-set-note { font-weight: 400; color: var(--ink-3); font-size: 0.8125rem; }
.acct-set form { margin: 0; }

/* Change: opens the form in place, no script */
.acct-open > summary { list-style: none; cursor: pointer; }
.acct-open > summary::-webkit-details-marker { display: none; }
.acct-open > summary .acct-when-open { display: none; }
.acct-open[open] > summary .acct-when-open { display: inline; }
.acct-open[open] > summary .acct-when-closed { display: none; }
.acct-open[open] > .acct-form { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); max-width: none; }
.acct-open[open] > .acct-form .acct-field { max-width: 380px; }

.acct-inline { display: grid; grid-template-columns: minmax(0, 220px) 130px max-content; justify-content: start; gap: 10px; align-items: end; margin-top: 12px; }
.acct-inline .acct-btn { justify-self: start; }
.acct-inline .acct-err { grid-column: 1 / -1; }

.acct-panel-danger { border-color: #ecd0ca; }
.acct-panel-danger .acct-h2 { color: var(--bad); }

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 980px) {
  .acct-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .acct-show { padding: 36px 32px; }
  .acct-app { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .acct-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
  .acct-id { padding: 0; border-bottom: 0; }
  .acct-side-foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
  .acct-menu-btn { width: auto; }
  .acct-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    overflow-x: auto;
  }
  .acct-main .acct-menu a { white-space: nowrap; }
}

@media (max-width: 720px) {
  .acct-main { width: min(1180px, 100% - 28px); padding: 20px 0 56px; }
  .acct-auth { padding-top: 20px; }
  .acct-split-form { padding: 32px 22px; }
  .acct-show { padding: 30px 22px; }
  .acct-mail-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .acct-solo { padding: 24px; margin-top: 12px; }
  .acct-pagehead { flex-direction: column; align-items: flex-start; }
  .acct-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-kpis > div:nth-child(3) { border-left: 0; }
  .acct-kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .acct-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .acct-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .acct-row time { order: 2; justify-self: end; }
  .acct-row .acct-tag { order: 1; }
  .acct-row-text { order: 3; grid-column: 1 / -1; white-space: normal; }
  .acct-set { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .acct-inline { grid-template-columns: minmax(0, 1fr) 120px; }
  .acct-inline .acct-btn { grid-column: 1 / -1; justify-self: start; }
  .acct-banner { flex-direction: column; align-items: flex-start; }
}

/* ---- your members ------------------------------------------------------ */

.acct-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acct-member {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.acct-member-vacant { border-style: dashed; }
.acct-member-photo { flex: none; width: 56px; height: 68px; border-radius: 8px; object-fit: cover; object-position: top center; background: #eef0f3; }
.acct-member .acct-seat-photo { flex: none; width: 56px; height: 68px; border-radius: 8px; }
.acct-member-text { display: grid; gap: 1px; min-width: 0; }
.acct-member-name { font-size: 0.9375rem; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.acct-member-role { font-size: 0.8125rem; color: var(--ink-2); }
.acct-member-party { font-size: 0.75rem; color: var(--ink-3); }

.acct-lookup { display: grid; grid-template-columns: 160px max-content; gap: 10px; align-items: end; }
.acct-lookup-street { grid-template-columns: minmax(0, 340px) max-content; }
.acct-split-note { margin: 0 0 16px; font-size: 0.9rem; color: var(--ink-2); max-width: 68ch; }
.acct-split-note strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 650; }
.acct-h3 { margin: 24px 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.acct-picks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); }
.acct-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 16px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  border-top: 1px solid var(--line);
}
.acct-pick:first-child { border-top: 0; }
.acct-pick .acct-member { border: 0; padding: 4px; background: transparent; }
.acct-pick .acct-member-photo,
.acct-pick .acct-member .acct-seat-photo { width: 40px; height: 48px; }
.acct-pick-share { font-size: 0.8125rem; color: var(--ink-3); }
.acct-pick-share .ll-num { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acct-pick form { margin: 0; }

.acct-quiet-form { margin: 14px 0 0; text-align: right; }
.acct-linklike { border: 0; padding: 0; background: none; color: var(--ink-3); font: inherit; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.acct-linklike:hover { color: var(--bad); }

@media (max-width: 980px) {
  .acct-members { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .acct-lookup, .acct-lookup-street { grid-template-columns: minmax(0, 1fr); }
  .acct-lookup .acct-btn { justify-self: start; }
  .acct-pick { grid-template-columns: minmax(0, 1fr) max-content; }
  .acct-pick-share { grid-column: 1; grid-row: 2; padding-left: 4px; }
  .acct-pick form { grid-row: 1 / span 2; grid-column: 2; }
}

.acct-members-stack { grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* ---- following: updates and the list of follows ------------------------ */

.acct-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.acct-row-update { grid-template-columns: 138px 150px minmax(0, 1fr) minmax(0, 170px); }
.acct-main .acct-row-text a { color: inherit; text-decoration: none; }
.acct-main .acct-row-text a:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.acct-main .acct-row-text a.acct-row-src { margin-left: 6px; color: var(--ink-3); font-size: 0.75rem; text-decoration: underline; text-underline-offset: 2px; }
.acct-row-why { justify-self: end; max-width: 100%; font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.acct-follows { list-style: none; margin: 0; padding: 0; }
.acct-follow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 18px;
  border-top: 1px solid var(--line);
}
.acct-follow:first-child { border-top: 0; }
.acct-follow-photo { width: 36px; height: 44px; border-radius: 6px; object-fit: cover; object-position: top center; background: #eef0f3; }
.acct-follow-what { display: grid; gap: 1px; min-width: 0; grid-column: 2; }
.acct-main a.acct-follow-title,
.acct-follow-title { font-size: 0.9rem; font-weight: 650; color: var(--ink); text-decoration: none; }
.acct-main a.acct-follow-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.acct-follow-sub { font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A line of figures from LegiList Analytics under a followed member or committee. Text, not a chart. */
.acct-figs { display: flex; flex-wrap: wrap; gap: 1px 14px; margin-top: 3px; font-size: 0.78rem; color: var(--ink-3); }
.acct-figs b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acct-figs-when { color: var(--ink-4); }
.acct-main .acct-figs a { text-decoration: none; white-space: nowrap; }
.acct-main .acct-figs a:hover { text-decoration: underline; }
.acct-member .acct-figs { gap: 1px 10px; margin-top: 5px; }
/* in the Following list the line has the row's full width, under the name */
.acct-follow-figs > .acct-figs { grid-column: 2 / -1; grid-row: 2; margin-top: -9px; }
.acct-follow-figs > .acct-follow-alerts[open] { grid-row: 3; }
.acct-panel-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; }

/* Getting started: three numbered steps at the top of Following, gone once the first two are done. */
.acct-steps { list-style: none; margin: 0; padding: 0; }
.acct-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 12px 12px 18px; border-top: 1px solid var(--line); }
.acct-step:first-child { border-top: 0; }
.acct-step-n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acct-step.is-done .acct-step-n { background: var(--ok-soft); border-color: #cfe6da; color: var(--ok); }
.acct-step-what { display: grid; gap: 1px; min-width: 0; }
.acct-step-what strong { font-size: 0.9rem; font-weight: 650; color: var(--ink); }
.acct-step-what span { font-size: 0.8125rem; color: var(--ink-3); }
.acct-step.is-done .acct-step-what strong { color: var(--ink-3); font-weight: 600; }
.acct-step-links { display: flex; gap: 12px; font-size: 0.8125rem; }
@media (max-width: 720px) {
  .acct-step { grid-template-columns: auto minmax(0, 1fr); }
  .acct-step > :last-child { grid-column: 2; justify-self: start; }
}

/* Updates: what was recorded since the last visit. A count beside the heading, and a word on each new row. */
.acct-count-new { background: var(--accent); border-color: var(--accent); color: #fff; }
.acct-count-new[hidden] { display: none; }
.acct-new { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.55; vertical-align: 1px; }

/* Alerts: a kind of thing not followed yet is folded away; its head is the summary. */
.acct-fold > summary.acct-panel-head { border-bottom: 0; }
.acct-fold[open] > summary.acct-panel-head { border-bottom: 1px solid var(--line); }
.acct-panel-fold .acct-h2 { color: var(--ink-2); }
@media (max-width: 720px) {
  /* on a phone the buttons sit under the panel's title instead of squeezing it */
  .acct-panel-head-wrap { flex-wrap: wrap; padding-bottom: 12px; }
  .acct-panel-head-wrap > div:first-child { flex: 1 1 100%; }
  .acct-panel-head-wrap .acct-panel-tools { flex: 1 1 100%; justify-content: flex-start; }
  .acct-follow-figs > .acct-follow-meta { grid-row: 3; }
  .acct-follow-figs > .acct-follow-alerts,
  .acct-follow-figs > .acct-follow-alerts[open] { grid-row: 4; }
}
.acct-follow-meta { display: flex; gap: 8px; align-items: center; }
.acct-follow-since { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }
.acct-follow-stop { margin: 0; }
.acct-follow-alerts[open] { grid-column: 1 / -1; grid-row: 2; }
.acct-follow-alerts[open] > summary { display: flex; justify-content: flex-end; }

.acct-item-form { display: grid; gap: 8px; margin: 10px 0 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #f8f9fb; }
.acct-item-form .acct-hint { margin-bottom: 4px; }
.acct-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: center; font-size: 0.875rem; color: var(--ink-2); }
.acct-item-row select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
}
.acct-item-form .acct-btn { justify-self: start; margin-top: 6px; }

/* ---- alert choices ----------------------------------------------------- */

.acct-cadences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct-cadences > div { display: grid; gap: 3px; align-content: start; padding: 14px 18px; border-left: 1px solid var(--line); }
.acct-cadences > div:first-child { border-left: 0; }
.acct-cadences strong { font-size: 0.875rem; font-weight: 650; }
.acct-cadences span { font-size: 0.8125rem; color: var(--ink-3); }

.acct-switch-row {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.acct-switch-row:first-child { border-top: 0; }
.acct-switch-row > span { display: grid; gap: 2px; }
.acct-switch-row strong { font-size: 0.9rem; font-weight: 650; }
.acct-switch-row span span { font-size: 0.8125rem; color: var(--ink-3); }

/* a checkbox drawn as a switch */
.acct-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--line-2);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.acct-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 27, 42, 0.25);
  transition: transform 0.15s ease;
}
.acct-switch:checked { background: var(--accent); }
.acct-switch:checked::after { transform: translateX(16px); }

.acct-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 20px;
  align-items: center;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.acct-choice legend { display: contents; }
.acct-choice legend strong { display: block; font-size: 0.875rem; font-weight: 650; color: var(--ink); grid-column: 1; }
.acct-choice legend span { display: block; font-size: 0.8125rem; color: var(--ink-3); grid-column: 1; margin-top: -18px; }
.acct-choice .acct-seg { grid-column: 2; grid-row: 1 / span 2; }

/* Off / Daily / As it happens: radio buttons drawn as one segmented control */
.acct-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 9px; background: #f3f4f6; }
.acct-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acct-seg label {
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.acct-seg label:hover { color: var(--ink); }
.acct-seg input:checked + label { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 27, 42, 0.14); }
.acct-seg input[value="off"]:checked + label { color: var(--ink-3); }
.acct-seg input[value="asap"]:checked + label { background: var(--accent); color: #fff; }
.acct-seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

.acct-savebar {
  position: sticky;
  bottom: 12px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px -14px rgba(15, 27, 42, 0.28);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .acct-row-update { grid-template-columns: minmax(0, 1fr) auto; }
  .acct-row-why { order: 4; grid-column: 1 / -1; justify-self: start; }
  .acct-follow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .acct-follow-meta { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; }
  .acct-follow-alerts { grid-column: 2; grid-row: 3; }
  .acct-follow-alerts[open] { grid-column: 1 / -1; grid-row: 3; }
  .acct-follow-stop { grid-column: 3; grid-row: 1; }
  .acct-item-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .acct-cadences { grid-template-columns: minmax(0, 1fr); }
  .acct-cadences > div { border-left: 0; border-top: 1px solid var(--line); }
  .acct-cadences > div:first-child { border-top: 0; }
  .acct-choice { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .acct-choice legend span { margin-top: 0; }
  .acct-choice .acct-seg { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* updates read better on two lines than cut off */
.acct-row-update { grid-template-columns: 126px 136px minmax(0, 1fr) minmax(0, 132px); align-items: start; }
.acct-row-update time, .acct-row-update .acct-row-why { padding-top: 3px; }
.acct-row-update .acct-row-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 720px) {
  .acct-row-update { grid-template-columns: minmax(0, 1fr) auto; }
}

/* how a followed member voted, on a roll call line */
.acct-row-vote { color: var(--ink); font-weight: 650; }