/* ===========================================================================
 * auth.css — signup, login, verification and password-reset pages.
 *
 * Layers on home.css: these pages carry .hp so they inherit the same tokens,
 * fonts and theming (including the light/dark toggle). Only the centred card
 * layout is new.
 * ======================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.auth-main {
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vh, 64px) var(--hp-gutter);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--hp-line);
  border-radius: 20px;
  background: var(--hp-card);
  box-shadow: var(--hp-shadow-lg);
}

.auth-card h1 {
  margin: 14px 0 0;
  font-family: var(--hp-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.auth-card > p.auth-sub {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hp-muted);
}

/* ---------- Fields ------------------------------------------------------ */
.auth-form { margin-top: 26px; display: grid; gap: 16px; }

.auth-field { display: grid; gap: 7px; }
.auth-field label {
  font-family: var(--hp-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-muted);
}
.auth-field input,
.auth-field select {
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--hp-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--hp-bg) 55%, transparent);
  color: var(--hp-ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.auth-field input:focus,
.auth-field select:focus {
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-primary-wash);
}
.auth-field input[aria-invalid="true"],
.auth-field select[aria-invalid="true"] { border-color: #d9534f; }

/* The native select arrow is drawn by the OS and ignores the field's palette,
   so it is suppressed and replaced with one that matches. */
.auth-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

/* Password field with a show/hide toggle. Revealing a password on request is
   better for correctness than forcing blind typing, and it's opt-in.

   THE BUTTON BELONGS TO THE INPUT, NOT TO THE FIELD.
   It used to be `position: absolute; right: 6px; bottom: 6px` against the
   .auth-password wrapper — which works only while the input is the last thing
   in that wrapper. It is not on the signup form, where a two-line hint follows
   it ("At least 10 characters. Length beats symbols…"), so "bottom" meant the
   bottom of the HINT and the button sat on top of the last line of it.

   Fixed by placing it in the same GRID CELL as the input instead. .auth-field
   is already a single-column grid (label / input / button / hint as four rows),
   so putting the input and the button both in row 2 overlays one on the other
   exactly as intended, and the hint keeps a row of its own however many lines
   it runs to. Nothing is measured, so no length of hint can move the button
   again — and a field with no hint at all, which is every other password field
   in the product, lays out identically to before.

   EVERY CHILD IS PLACED EXPLICITLY, including the column. An item with a
   definite row but an automatic column is placed at the first column in that
   row where it does NOT overlap — so a button given only `grid-row: 2` would
   be pushed into a second, implicit column beside the input rather than over
   it. Overlap is only allowed where both axes are explicit. */
.auth-password > label { grid-row: 1; grid-column: 1; }
.auth-password > input { grid-row: 2; grid-column: 1; }
.auth-password > .auth-reveal { grid-row: 2; grid-column: 1; }
.auth-password > .auth-hint { grid-row: 3; grid-column: 1; }
.auth-password input { padding-right: 62px; }
.auth-reveal {
  /* Tucked into the right-hand end of the input and centred against it. The
     6px matches the old offset, and centring reproduces the old 6px gap at the
     bottom exactly: a 34px button in a 46px input row. */
  justify-self: end;
  align-self: center;
  margin-right: 6px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hp-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.auth-reveal:hover { color: var(--hp-primary); background: var(--hp-primary-wash); }

.auth-hint { font-size: 12px; line-height: 1.5; color: var(--hp-muted); }

/* ---------- A group of opt-ins under one heading -------------------------
   Its own wrapper rather than an .auth-field, because that rule set is built
   around ONE labelled control: it styles its <label> as a tracked-out mono
   field label (which would catch every checkbox row's label too) and sizes
   every <input> inside it to a 46px text box (which would catch the checkboxes
   themselves). The rows within are .acct-check, the account page's existing
   checkbox row, reused unchanged — only the shell around them is new.

   Used on the signup form. See the note in signup.html for why the boxes ship
   unticked. */
.auth-optins { display: grid; gap: 11px; }
/* A <p>, not a <label>: it names the group rather than any one control, and a
   <label> with nothing to point at is a label the browser cannot use. Type
   matched to .auth-field's own label so it reads as a peer of the fields above
   it rather than as a paragraph that wandered in. */
.auth-optins-title {
  margin: 0;
  font-family: var(--hp-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-muted);
}
/* The aside inside a checkbox row — "You'll choose who to watch in your account
   settings." Set apart from the promise it qualifies without becoming a second
   sentence competing with it. */
.auth-optins .acct-check i {
  font-style: normal;
  color: var(--hp-muted);
}
.auth-optins .auth-hint { margin: 1px 0 0; }

.auth-form .hp-btn { width: 100%; height: 48px; margin-top: 4px; }

/* ---------- Messages ---------------------------------------------------- */
.auth-msg {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
}
.auth-msg-error {
  border-color: color-mix(in srgb, #d9534f 42%, transparent);
  background: color-mix(in srgb, #d9534f 10%, transparent);
  color: var(--hp-ink);
}
.auth-msg-ok {
  border-color: color-mix(in srgb, var(--hp-signal) 42%, transparent);
  background: var(--hp-signal-wash);
  color: var(--hp-ink);
}
.auth-msg-info { background: color-mix(in srgb, var(--hp-bg) 55%, transparent); color: var(--hp-ink-soft); }

/* ---------- Footer links ------------------------------------------------ */
.auth-alt {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hp-line-soft);
  font-size: 13.5px;
  color: var(--hp-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
.auth-alt a { color: var(--hp-primary); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* ---------- The "check your email" panel --------------------------------
   Replaces `form.hidden = true` plus a sentence, which left someone who
   mistyped their address with nothing on the page to click, at the point in
   the funnel where a new user is most likely to give up. See the note on the
   markup in signup.html. */
.auth-sent { text-align: center; }
.auth-sent[hidden] { display: none; }
.auth-sent-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: var(--hp-primary-wash);
  color: var(--hp-primary);
}
.auth-sent h2 {
  margin: 0 0 8px;
  font-family: var(--hp-display);
  font-size: 22px;
  font-weight: 600;
}
/* The address is the whole reason this panel exists — a typo is only fixable
   if it is visible. Mono so a transposed character stands out. */
.auth-sent #sentAddress {
  font-family: var(--hp-mono);
  font-size: 0.95em;
  color: var(--hp-ink);
  word-break: break-all;
}
.auth-sent .auth-sub { margin-bottom: 10px; }
.auth-sent .auth-hint { margin: 0 auto; max-width: 44ch; }
.auth-sent-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.auth-sent .auth-alt { justify-content: center; }
/* A button that has to read as a link: it changes what is on screen rather
   than navigating, so <button> is correct, but it is the quiet option beside
   "Resend" and should not look like a second call to action. */
.auth-linkish {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--hp-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-linkish:hover { color: var(--hp-ink); }

/* ---------- Live validation ---------------------------------------------
   `novalidate` came off every auth form, which turns the browser's own
   constraint checking back on. `:user-invalid` rather than `:invalid` is the
   important part: `:invalid` matches an empty required field the instant the
   page loads, so every form would open painted red before the user had typed
   anything. `:user-invalid` waits until the field has been interacted with or
   the form submitted. */
.auth-form input:user-invalid,
.auth-form select:user-invalid {
  border-color: color-mix(in srgb, #d9534f 60%, var(--hp-line));
}
.auth-form input:user-invalid:focus,
.auth-form select:user-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, #d9534f 18%, transparent);
}

/* Trust line under the card — the same promise the home page makes. */
.auth-trust {
  max-width: 440px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--hp-muted);
}

/* ---------- Verification page states ------------------------------------ */
.auth-status { display: grid; gap: 14px; justify-items: center; text-align: center; }
.auth-status .hp-spinner { margin: 6px auto; }
.auth-status-icon { color: var(--hp-signal); }
.auth-status-icon.is-error { color: #d9534f; }

/* ---------- Signed-in state in the app topbar --------------------------- */
/* The map app's profile button, once it reflects a real session.
   --on-accent, not #fff: the dark theme's accent is a bright amber, and white
   initials on it are barely legible. Same token the filled buttons use. */
.profile-btn.is-authed {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.account-menu {
  /* Positioned in JS (fixed, anchored under whichever button opened it) so one
     menu serves both the map topbar and the marketing nav, which sit at
     different heights. These are the fallbacks if that never runs. */
  position: absolute;
  top: calc(var(--topbar-h) - 6px);
  right: 12px;
  z-index: 1300;
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.account-menu-email {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  word-break: break-all;
}
.account-menu-plan {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.account-menu a, .account-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--pill-bg); }

/* ===========================================================================
 * Account settings (/account)
 *
 * A card grid rather than one long form. Each card is an independently-saved
 * panel (see public/js/account.js), and giving each its own surface and its own
 * message slot is what makes that legible — a "Saved" under the password card
 * clearly refers to the password.
 *
 * Everything reuses the .auth-field / .auth-form primitives above; only the
 * page frame and the card chrome are new.
 * ======================================================================== */

.acct-main {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 6vw, 64px) 0 80px;
}

.acct-title {
  margin: 10px 0 0;
  font-family: var(--hp-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.acct-sub {
  margin: 8px 0 0;
  font-family: var(--hp-mono);
  font-size: 12.5px;
  color: var(--hp-muted);
  word-break: break-all;
}

/* [hidden] must win over this display:flex. styles.css carries a global
   `[hidden] { display: none !important }`, but auth.css should not depend on
   another file's rule to hide its own element. */
.acct-loading[hidden] { display: none; }
.acct-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  color: var(--hp-muted);
  font-size: 14px;
}

/* Two columns where there's room. The cards are independent, so they tolerate
   being reordered by the flow at narrow widths without anything reading wrong. */
/* Three columns, cards packed to roughly equal height.
 *
 * WAS a grid, which is what produced the big empty gaps: a grid row is as tall
 * as its tallest cell, so a two-line "Sessions" card sitting beside a six-field
 * form left several inches of nothing underneath it.
 *
 * CSS multi-column instead. The browser balances the columns by height, which
 * is exactly the ask — cards flow into whichever column is currently shortest,
 * so the three end up level without any card being stretched. It is also the
 * only way to get masonry packing with no JavaScript and no fixed row heights.
 *
 * The trade-off is reading order: content flows DOWN each column and then
 * across, not left-to-right. For a set of independent, separately-saved panels
 * that is fine — there is no sequence to follow — and it is why billing is
 * pulled out above the columns rather than left to land wherever it fits. */
.acct-grid {
  margin-top: 28px;
  column-count: 3;
  column-gap: 16px;
}
@media (max-width: 1100px) { .acct-grid { column-count: 2; } }
@media (max-width: 720px)  { .acct-grid { column-count: 1; } }

/* Forced column starts, three-up only.
 *
 * Left to itself the balancer fills greedily and overshoots: it produced
 * 361 / 901 / 744px columns — one holding a single short card while the next
 * held two tall ones. These two breaks pin the grouping instead, and the card
 * order in account.html is chosen so the result is both level and sensible:
 *
 *   1  Trade & service area          (what the map defaults to)
 *   2  Your details, Password        (who you are)
 *   3  Email, Sessions, Delete       (account and security)
 *
 * Scoped to the 3-column range on purpose. At two columns and one, a forced
 * break is either wrong or a no-op, and the natural balance is fine there. */
@media (min-width: 1101px) {
  .acct-grid > .acct-card[data-col-start] {
    break-before: column;
    -webkit-column-break-before: column;
  }
}

.acct-card {
  padding: 20px 22px 22px;
  margin: 0 0 16px;          /* column-gap handles the horizontal side */
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  background: var(--hp-card);
  box-shadow: var(--hp-shadow);
  /* Without this a card can be split across a column boundary — its heading in
     one column and its buttons in the next. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Billing spans all three columns: it is the reason most people open this page,
   and its actions read better on one line than stacked in a narrow column.
   Spanning also resets the column balancer beneath it, so the three columns
   below start level. */
#billingCard {
  column-span: all;
  margin-bottom: 16px;
}

/* The delete panel. Not red until you interact with it — a permanently red card
   in the corner of a settings page is alarm fatigue — but clearly its own
   thing, so nobody meets it while looking for their invoices. */
.acct-card-danger { border-color: color-mix(in srgb, #d9534f 34%, var(--hp-line)); }
.acct-card-danger .acct-card-head h2 { color: #c9302c; }
[data-theme="dark"] .acct-card-danger .acct-card-head h2 { color: #ef8b87; }

.hp-btn-danger {
  border: 1px solid color-mix(in srgb, #d9534f 55%, transparent);
  background: transparent;
  color: #c9302c;
}
.hp-btn-danger:hover { background: #c9302c; border-color: #c9302c; color: #fff; }
[data-theme="dark"] .hp-btn-danger { color: #ef8b87; }
[data-theme="dark"] .hp-btn-danger:hover { background: #b5322e; border-color: #b5322e; color: #fff; }

/* ---------------------------------------------------------------------------
   The delete confirmation dialog
   ---------------------------------------------------------------------------
   A native <dialog>, so focus trapping, Escape-to-close and inertness of the
   page behind it come from the platform instead of from script. */
.acct-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  background: var(--hp-card);
  color: var(--hp-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
.acct-dialog::backdrop { background: rgba(8, 10, 14, 0.55); }
.acct-dialog-inner { padding: 22px 24px 20px; }
.acct-dialog-inner h2 {
  margin: 0 0 8px;
  font-family: var(--hp-display);
  font-size: 20px;
  font-weight: 600;
}
.acct-dialog-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hp-ink-soft);
}
.acct-dialog-body[hidden] { display: none; }
.acct-dialog .auth-field { margin-bottom: 12px; }
.acct-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.acct-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.acct-card-head h2 {
  margin: 0;
  font-family: var(--hp-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.acct-card-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hp-ink-soft);
}
.acct-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--hp-muted);
}

/* Status pill. Mono + tracked, the same "instrument label" voice as
   .hp-eyebrow, so it reads as a readout rather than a badge. */
.acct-pill {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hp-line);
  background: var(--hp-bg-deep);
  font-family: var(--hp-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-muted);
  white-space: nowrap;
}
.acct-pill.is-good {
  color: var(--hp-signal);
  border-color: color-mix(in srgb, var(--hp-signal) 40%, transparent);
  background: var(--hp-signal-wash);
}
.acct-pill.is-warn {
  color: var(--hp-primary);
  border-color: color-mix(in srgb, var(--hp-primary) 40%, transparent);
  background: var(--hp-primary-wash);
}

.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
/* .auth-form stretches its buttons to full width, which is right for a single
   submit on a narrow auth card and wrong for a row of panel actions. */
.acct-actions .hp-btn { width: auto; height: 38px; margin-top: 0; }

.acct-form { margin-top: 16px; }
.acct-form .hp-btn { width: auto; height: 38px; justify-self: start; }

/* Paired fields, collapsing to one column when there isn't room for two. */
.acct-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* A grid item's automatic minimum size is its CONTENT size, and a text input's
   intrinsic width (about 20 characters) is wider than a 1fr track in a
   two-column card — so without this the field refuses to shrink and spills out
   past the card's edge. The inputs also need an explicit width: they do not
   stretch to their track on their own. */
.acct-row > * { min-width: 0; }
/* :not([type="checkbox"]) matters — a checkbox stretched to 100% pushes its own
   label out of the card. Only the text-entry controls need to fill the track. */
.acct-row input:not([type="checkbox"]),
.acct-row select,
.acct-form input:not([type="checkbox"]),
.acct-form select { width: 100%; min-width: 0; }

.acct-form select {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  background: var(--hp-card);
  color: var(--hp-ink);
  font: inherit;
  font-size: 14px;
}
.acct-form select:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-primary-wash);
}

.acct-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hp-ink-soft);
}
.acct-check input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--hp-primary);
}

/* ===========================================================================
 * Competitor watch picker (Alerts card)
 * ========================================================================
 * A <fieldset>, so `disabled` on the element greys the search box and every
 * checkbox in one attribute rather than in a loop — and so the browser's own
 * semantics for "you cannot use this yet" apply, including keyboard focus
 * skipping the whole group.
 *
 * Greyed rather than hidden, on purpose. Someone who has read that they can
 * watch competitors should not have to work out whether the control is missing
 * or they are looking in the wrong place; a dimmed control with a sentence
 * underneath saying WHY is the honest version. See the note in account.html. */
.acct-watch {
  margin: 2px 0 0;
  padding: 12px 12px 10px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--hp-bg) 45%, transparent);
  /* A fieldset's default min-width is min-content, which makes it refuse to
     shrink inside the narrow card column and pushes the whole grid wide. */
  min-width: 0;
}
.acct-watch > legend {
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hp-muted);
}
/* The group dims as a whole. `opacity` rather than per-element colours: there
   are five kinds of content in here, and dimming them one at a time is five
   chances to miss one. */
.acct-watch[disabled] { opacity: 0.55; }
.acct-watch[disabled] .acct-watch-search,
.acct-watch[disabled] .acct-watch-list { display: none; }

/* Why the list is empty, unavailable, or ready. The one part of the fieldset
   that stays legible when the rest is switched off — because it is the part
   that explains the switching off. */
.acct-watch-status {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hp-muted);
}

.acct-watch-search {
  width: 100%;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: var(--hp-card);
  color: var(--hp-ink);
  font: inherit;
  font-size: 12.5px;
}
.acct-watch-search:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-primary-wash);
}

/* Fixed height with its own scroll. A busy metro names hundreds of
   contractors, and a list that grew to fit them would push Save off the bottom
   of a column that is already the tallest on the page. */
.acct-watch-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--hp-line-soft);
  border-radius: 8px;
  background: var(--hp-card);
}
.acct-watch-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--hp-ink-soft);
  cursor: pointer;
}
.acct-watch-item:hover { background: var(--hp-primary-wash); }
.acct-watch-item input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: var(--hp-primary);
}
/* The name takes the slack so the count stays pinned right, and a long company
   name truncates rather than wrapping the count onto a line of its own. */
.acct-watch-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* How many permits that contractor has pulled in the area — the reason the
   list is in the order it is in. Monospaced so the column reads as figures. */
.acct-watch-n {
  flex: 0 0 auto;
  font-family: var(--hp-mono);
  font-size: 11px;
  color: var(--hp-muted);
}
.acct-watch-empty {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--hp-muted);
}
.acct-watch-count {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--hp-muted);
}
/* Over the cap. Flagged while the list is still on screen rather than only on
   save, so the correction happens where the mistake was made. */
.acct-watch-count.is-over { color: #d9534f; font-weight: 600; }

@media (max-width: 620px) {
  .acct-card { padding: 16px 16px 18px; }
}

/* Account menu identity block: name on top, address under it. The address is
   an identifier, not a greeting — but it still has to be there, because on a
   shared machine "which account is this" is the question the menu answers. */
.account-menu-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
}
.account-menu-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-id .account-menu-email {
  padding: 0;
  border: 0;
  font-size: 11.5px;
  color: var(--muted);
  word-break: break-all;
}