/* Any author `display` rule outranks the browser's own [hidden], which
   would leave a hidden element on screen as a dead button. */
[hidden] {
  display: none !important;
}

/* The agency's brand style sheet: --primary is its wordmark blue, one
   fixed button fill in both themes; --lime the one accent, a background
   and never text; --geico-green only for status colours. --primary-text,
   --surface and --muted-text lighten on a dark background. */
:root {
  --primary: #1B4696;
  --primary-text: var(--primary);
  /* Text and marks drawn over --primary, which is one fixed blue in both themes. */
  --on-primary: #fff;
  /* Amber, fixed in both themes: something is keeping alerts from this desk. */
  --amber: #ffb300;
  --on-amber: #10240f;
  --deep-navy: #14306B;
  --lime: #A8CE3A;
  --background: #FBFDFC;
  --secondary-background: #E4ECF7;
  --surface: #fff;
  --text: #3C4650;
  --muted-text: #4a4a4a;
  --hairline: #E3E9E6;
  --input-border: #C7D5E8;
  --button-hover: #E8F4EF;
  --pressed: #143675;
  --sign-out-red: #B0301F;
  --geico-green: #4B8F39;
  --status-neutral-bg: #eef1f6;
  --status-good-bg: #e3f1de;
  --status-good-text: #2f6a24;
  --status-warn-bg: #fbefd6;
  --status-warn-text: #8a5a10;
  --status-bad-bg: #f9e0e4;
  --status-bad-text: #8f001a;
  --status-orange-bg: #fde4d0;
  --status-orange-text: #9a4400;
  --status-yellow-bg: #fbf3c2;
  --status-yellow-text: #6b5a00;
  /* A Compliance line NICHOLS has muted: calmer than amber. */
  --status-muted-dot: #D9B300;
  --status-info-bg: #e2ebfa;
  --status-info-text: #1B4696;
  /* Behind the office logo, whose wordmark is the brand's dark blue. */
  --logo-backing: transparent;
}

/* Dark mode: a choice from the toggle (theme_toggle.js, data-theme on
   <html>) wins; with none saved, the system's preference decides. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-text: #86AEEA;
    --background: #12181F;
    --secondary-background: #1B2430;
    --surface: #1E2733;
    --text: #DCE3EA;
    --muted-text: #9AA7B5;
    --hairline: #2B3645;
    --input-border: #3A475A;
    --button-hover: #24303F;
    --pressed: #6E93D6;
    --sign-out-red: #E8837A;
    --geico-green: #7BC65E;
    --status-neutral-bg: #232E3D;
    --status-good-bg: #24391F;
    --status-good-text: #9BDB89;
    --status-warn-bg: #3A2E12;
    --status-warn-text: #E8C27D;
    --status-bad-bg: #3A1A20;
    --status-bad-text: #E89AA6;
    --status-orange-bg: #3D2616;
    --status-orange-text: #F0A46A;
    --status-yellow-bg: #363112;
    --status-yellow-text: #E5D36B;
    --status-muted-dot: #E5CF4F;
    --status-info-bg: #1F2D47;
    --status-info-text: #9DBDF2;
    --logo-backing: #F4F7FB;
  }
}

:root[data-theme="dark"] {
  --primary-text: #86AEEA;
  --background: #12181F;
  --secondary-background: #1B2430;
  --surface: #1E2733;
  --text: #DCE3EA;
  --muted-text: #9AA7B5;
  --hairline: #2B3645;
  --input-border: #3A475A;
  --button-hover: #24303F;
  --pressed: #6E93D6;
  --sign-out-red: #E8837A;
  --geico-green: #7BC65E;
  --status-neutral-bg: #232E3D;
  --status-good-bg: #24391F;
  --status-good-text: #9BDB89;
  --status-warn-bg: #3A2E12;
  --status-warn-text: #E8C27D;
  --status-bad-bg: #3A1A20;
  --status-bad-text: #E89AA6;
  --status-orange-bg: #3D2616;
  --status-orange-text: #F0A46A;
  --status-yellow-bg: #363112;
  --status-yellow-text: #E5D36B;
  --status-muted-dot: #E5CF4F;
  --status-info-bg: #1F2D47;
  --status-info-text: #9DBDF2;
  --logo-backing: #F4F7FB;
}

* {
  box-sizing: border-box;
}

/* A plain link reads the same visited or not; no weight, so any link
   with a colour of its own keeps it. */
:where(a:link, a:visited) {
  color: var(--primary-text);
}

/* The scrollbar's room kept on every page, scrolling or not: Windows
   draws one that takes width, so without this the centred logo and
   title move sideways between a long page and a short one. Not the
   lobby TV, which never scrolls and fills the screen. */
html {
  scrollbar-gutter: stable;
}

html:has(> body.display-body) {
  scrollbar-gutter: auto;
}

body {
  margin: 0;
  font-family: 'Karla', -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--background);
  color: var(--text);
}

/* Transparent PNG on the off-white band -- no color plate behind it. */
.brand-header {
  background: var(--background);
  padding: 0.75rem 1.5rem;
  text-align: center;
}

.brand-header img {
  display: block;
  height: 140px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: var(--logo-backing);
}

/* The one lime band per screen, per the style sheet. */
header {
  background: var(--lime);
  color: var(--deep-navy);
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

/* Ends on --toggle-clear, so the last row scrolls clear of the corner buttons. */
main {
  padding: 1.5rem 1.5rem var(--toggle-clear);
  max-width: 900px;
  margin: 0 auto;
}

.card {
  background: var(--secondary-background);
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Headings and a box's lone lines read centred; a list of rows under
   them keeps its left edge, where the eye runs down it. */
.card > h2,
.card > h3,
details.card > summary,
.attendance-group > summary,
.dash-glossary > summary,
.dash-person,
.dash-h4,
.dash-def,
.dash-note,
.dash-empty,
.dash-metric-empty,
.relay-job-status,
.relay-job-round,
.relay-empty,
.review-more,
.selfservice-goal-note,
.authenticator-card {
  text-align: center;
}

.checkin-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkin-form label {
  display: block;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* A fixed height, not padding: a select, a date box and a text box
   otherwise each pick their own and show it side by side. */
.checkin-form input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.checkin-form select,
.checkin-form textarea,
.selfservice-staff-box input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.selfservice-staff-box select {
  display: block;
  width: 100%;
  height: 3.5rem;
  /* Chrome centers a date box's fields on line-height, not height. */
  line-height: 3.5rem;
  padding: 0 1rem;
  font-size: 1.25rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 4px;
}

#submit-button {
  display: block;
  width: 100%;
}

.language-picker,
.department-picker,
.policy-type-picker,
.has-policy-picker,
.kind-picker,
.yes-no-picker {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Pills, not buttons that submit -- lime marks the chosen one, and
   lime never carries text (the brand style sheet's own rule). */
.language-btn,
.department-btn,
.policy-type-btn,
.has-policy-btn,
.kind-btn,
.yes-no-btn,
.where-btn {
  flex: 1;
  min-width: 120px;
  padding: 1rem;
  font-size: 1.1rem;
  background: var(--surface);
  color: var(--primary-text);
  border: 1px solid var(--input-border);
  border-radius: 999px;
}

.language-btn.selected,
.department-btn.selected,
.policy-type-btn.selected,
.has-policy-btn.selected,
.kind-btn.selected,
.yes-no-btn.selected,
.where-btn.selected {
  background: var(--lime);
  color: var(--deep-navy);
  border-color: var(--lime);
}

.checkin-form button {
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.25rem;
}

button {
  font-size: 1rem;
  padding: 0.6rem 1.1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:active {
  background: var(--pressed);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--primary-text);
}

/* An <a> that reads as a button: the shape rules above are on the
   button element, so a link styled .btn-* would otherwise sit flat. */
.link-button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

#location-retry {
  margin-top: 0.75rem;
}

/* /transfer's Notes: no label, the placeholder is the whole prompt. */
.notes-box {
  margin-top: 1.25rem;
}

.btn-danger {
  background: var(--surface);
  color: #B3261E;
  border: 1px solid #B3261E;
}

.btn-warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
  border: 1px solid var(--status-warn-text);
}

.btn-good {
  background: var(--status-good-bg);
  color: var(--status-good-text);
  border: 1px solid var(--status-good-text);
}

.now-serving {
  text-align: center;
  padding: 2rem;
}

.now-serving .label {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--primary-text);
  font-weight: 700;
}

.now-serving .ticket {
  font-size: 4rem;
  font-weight: 800;
  margin: 0.25rem 0;
}

.now-serving .name {
  font-size: 2rem;
}

/* Quieter than the customer's own name -- it tells them who is
   coming, it isn't the thing they're watching the screen for. */
.now-serving .called-by {
  font-size: 1.25rem;
  color: #5b6472;
  margin-top: 0.35rem;
}

.now-serving.empty .ticket {
  font-size: 2rem;
  color: var(--muted-text);
}

/* One of the viewer's own walk-ins on /queue; several stack, newest first. */
.my-visit .ticket {
  font-size: 2.5rem;
}

.my-visit + .my-visit {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

.my-visit .now-serving-actions {
  flex-wrap: wrap;
}

.now-serving-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ticket-detail {
  font-size: 0.85rem;
  color: #666;
}

.waiting-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.waiting-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
}

.waiting-list li:last-child {
  border-bottom: none;
}

.position {
  font-weight: 700;
  color: var(--primary-text);
  width: 2ch;
}

.ticket-number {
  font-variant-numeric: tabular-nums;
  color: #666;
  width: 4ch;
}

.name {
  flex: 1;
}

/* Sits at the far right of the same bar as .ticket-number/.name. */
.department {
  color: #666;
}

.reason-tag {
  font-size: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--primary-text);
  color: var(--primary-text);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

/* /display, the lobby TV read from across the room: one screen, never
   scrolled, every size following the screen's own (vmin), so a
   portrait TV and a landscape one both fill. */
.display-body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: calc(1.6vmin + 0.4rem);
}

.display-body .brand-header {
  padding: 0.5em 1em;
}

.display-body .brand-header img {
  height: 9vmin;
}

.display-body header {
  font-size: 1.35em;
  padding: 0.6em 1em;
}

/* Wrapped onto two lines on a narrow screen, each line centred. */
.display-body .bilingual-header {
  justify-content: space-around;
  gap: 0.25em 2em;
}

.display-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.display-main .card {
  margin: 0;
  padding: 1em;
}

.display-heading {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 1em;
  margin: 0 0 0.5em;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  color: var(--primary-text);
}

/* Several desks can serve at once: one entry fills the row, more share it. */
.display-serving-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr));
  gap: 0.75em;
}

.display-serving-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5em 0.75em;
  background: var(--surface);
  border-left: 0.35em solid var(--primary-text);
  border-radius: 4px;
}

.display-serving-entry .ticket {
  font-size: 4em;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary-text);
  font-variant-numeric: tabular-nums;
}

.display-serving-list[data-count="1"] .ticket {
  font-size: 8em;
}

.display-serving-entry .name {
  flex: none;
  font-size: 2em;
  font-weight: 700;
}

.display-serving-list[data-count="1"] .name {
  font-size: 2.6em;
}

/* Quieter than the customer's own name -- it says who is coming. */
.display-serving-entry .called-by {
  font-size: 1.2em;
  color: var(--muted-text);
}

.display-empty {
  text-align: center;
  color: var(--muted-text);
  font-size: 1.5em;
  padding: 0.5em 0;
}

#serving-empty {
  font-size: 4em;
}

/* An empty section says so in its middle. */
.display-main .display-empty {
  margin: auto 0;
}

.display-serving {
  display: flex;
  flex-direction: column;
}

.display-waiting {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.display-waiting .waiting-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.display-body .waiting-list li {
  font-size: 1.9em;
  padding: 0.35em 0;
}

.display-body .waiting-list .ticket-number {
  width: 4ch;
  font-weight: 700;
  color: var(--primary-text);
}

.display-body .waiting-list .department {
  color: var(--muted-text);
}

.display-more {
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--muted-text);
  padding-top: 0.35em;
  border-top: 1px solid var(--hairline);
}

/* A landscape screen: the two sections side by side. */
@media (min-aspect-ratio: 1/1) {
  .display-main {
    flex-direction: row;
  }

  .display-serving {
    flex: 1.2 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .display-waiting {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Tabs under the page title, since the installed app has no address
   bar. Above the cards, so it's there for a back-office desk too. */
.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: var(--secondary-background);
}

/* A desk's own tabs on one side, what a manager opens on the other,
   so the two aren't read as one list. */
.page-nav-desk,
.page-nav-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-nav-link {
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-text);
  text-decoration: none;
}

/* A tab lights up in the title band's green as the pointer crosses it. */
a.page-nav-link:hover {
  background: var(--lime);
  color: var(--deep-navy);
}

.page-nav-link.current {
  background: var(--primary);
  color: #fff;
}

/* A link without a clear keyboard ring is indistinguishable from the
   selected tab when the portal is used without a mouse. */
.page-nav-link:focus-visible,
.sign-out button:focus-visible {
  outline: 3px solid var(--deep-navy);
  outline-offset: 3px;
}

/* Record's two pages and Self Service's Relay, under their tab. */
.page-nav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.page-nav-more {
  background: none;
  border: 0;
  margin-left: -0.75rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--primary-text);
  cursor: pointer;
}

/* A tab that only names its menu: a button, so it is reachable by
   keyboard without being a link to nowhere. */
.page-nav-choice {
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
}

.page-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
  background: var(--secondary-background);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.page-nav-menu:hover .page-nav-dropdown,
.page-nav-menu:focus-within .page-nav-dropdown,
.page-nav-menu.open .page-nav-dropdown {
  display: flex;
}

/* On a page under the menu, its tab and arrow show where you are. */
.page-nav-menu:has(.page-nav-dropdown .current) {
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--primary-text);
}

/* A heading over a group of pages in a menu, not a link itself. */
.page-nav-group {
  padding: 0.35rem 1rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted-text);
}

.page-nav-group + .page-nav-link {
  padding-left: 1.5rem;
}

.sign-out {
  text-align: center;
  padding: 0.35rem 0;
}

/* Same box as a tab, pushed to the far end so it doesn't read as one. */
.page-nav .sign-out {
  margin-left: auto;
  padding: 0;
}

@media (max-width: 560px) {
  /* Keep each group intact and let a compact screen scroll the tabs
     horizontally instead of wrapping the sign-out control into them. */
  .page-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: 0.75rem;
  }

  .page-nav-desk,
  .page-nav-end {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .page-nav-link,
  .page-nav .sign-out {
    flex: 0 0 auto;
  }

  /* A scrolling strip would clip a menu hanging under its tab, and a
     phone has no hover, so what is under one is a tab of its own here. */
  .page-nav-menu,
  .page-nav-dropdown {
    display: contents;
  }

  .page-nav-more,
  .page-nav-choice,
  .page-nav-group {
    display: none;
  }

  .page-nav-menu:has(.page-nav-dropdown .current) {
    box-shadow: none;
  }

  .page-nav-group + .page-nav-link {
    padding-left: 1rem;
  }
}

.sign-out button {
  background: none;
  border: 0;
  padding: 0.35rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: inherit;
  color: var(--sign-out-red);
  cursor: pointer;
}

.login-form {
  max-width: 420px;
  margin: 0 auto;
}

.location-button {
  display: block;
  margin: 0.5rem auto 0;
}

#submit-button:disabled {
  cursor: not-allowed;
}

/* One box that reads as six slots -- separate boxes would lose the
   phone's one-tap code fill and paste. */
.checkin-form input.code-input {
  text-align: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.75rem;
  letter-spacing: 0.6em;
  padding-left: 1.6em;
}

.checkin-form input.code-input::placeholder {
  color: #ccc;
}

.login-error {
  color: #B3261E;
  font-weight: 600;
  text-align: center;
}

.login-note {
  color: var(--muted-text);
  text-align: center;
  margin: 1rem 0 0;
}

.login-note + .login-note {
  margin-top: 0.25rem;
}

.setup-key {
  display: block;
  margin: 0.75rem 0;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  user-select: all;
}

/* Plain text, not a button: the second way in, kept quiet. */
.admin-sign-in {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted-text);
}

.setup-qr {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.setup-instructions {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.setup-instructions h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.setup-instructions summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--primary-text);
}

.setup-instructions details p {
  margin: 0.25rem 0 0.75rem;
  color: var(--muted-text);
}

/* Wider than the shared 900px: a ticket's detail line needs the room. */
.admin-body main {
  max-width: 1300px;
}

/* Both self-service pages read as a centered form on a tablet or a
   phone, not a left-aligned document. */
.checkin-body main {
  text-align: center;
}

/* Form controls don't reliably inherit text-align, so they're set
   directly -- this is also what centers their placeholders. Chrome and
   Edge center a select's chosen value on text-align-last instead. */
.checkin-body .checkin-form input,
.checkin-body .checkin-form select {
  text-align: center;
  text-align-last: center;
}

/* Two fields on one line, neither of which needs the full width.
   Wraps back to stacked on a narrow phone. */
.field-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.field-row .field {
  flex: 1;
  min-width: 10rem;
}

.checkin-body #submit-button {
  background: var(--primary);
}

.checkin-body #submit-button.incomplete {
  background: #888;
  color: #ddd;
}

input.invalid,
select.invalid {
  border-color: #C0392B !important;
  border-width: 2px !important;
}

.department-picker.invalid,
.policy-type-picker.invalid,
#policy-number-question.invalid {
  border: 2px solid #C0392B;
  border-radius: 4px;
  padding: 0.5rem;
}

.form-warning {
  margin-top: 0.75rem;
  color: #8A5A00;
  font-size: 0.9rem;
}

/* The customer's pick of a rep: two pills on the form, and the whole
   list in a sheet over the page, so a long floor never stretches the form. */
.rep-choice {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.checkin-form .rep-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 1.15rem;
  text-align: left;
  background: var(--surface);
  color: var(--primary-text);
  border: 1px solid var(--input-border);
  border-radius: 12px;
}

.checkin-form .rep-pill {
  flex: 1;
  min-width: 12rem;
  min-height: 4rem;
  justify-content: center;
  border-radius: 999px;
}

.rep-initial {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--secondary-background);
  color: var(--primary-text);
  font-weight: 700;
}

.rep-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-form .rep-btn.selected {
  background: var(--lime);
  color: var(--deep-navy);
  border-color: var(--lime);
}

.rep-btn.selected .rep-initial {
  background: var(--deep-navy);
  color: var(--lime);
}

.rep-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.5);
}

.rep-sheet[hidden] {
  display: none;
}

.rep-sheet-panel {
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: 100%;
  overflow: hidden;
  background: var(--secondary-background);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.rep-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--primary-text);
  font-size: 1.35rem;
  font-weight: 700;
}

.checkin-form .rep-sheet-close {
  flex: none;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--input-border);
  font-size: 1.75rem;
  line-height: 1;
}

.rep-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.6rem;
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rep-hint {
  margin-top: 0.75rem;
  color: var(--muted-text);
  font-size: 0.95rem;
}

/* A shared tablet on a stand: no grey flash or double-tap zoom on a
   tap, and clear of the home bar. */
.kiosk {
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

.kiosk button {
  touch-action: manipulation;
}

@media (min-width: 700px) {
  .kiosk main {
    max-width: 760px;
    padding: 2rem;
  }

  .kiosk header {
    font-size: 1.6rem;
    padding: 1.25rem 2rem;
  }

  .kiosk .card {
    padding: 1.75rem 2rem;
    border-radius: 12px;
  }

  .kiosk .checkin-form label {
    font-size: 1.2rem;
  }

  .kiosk .language-btn,
  .kiosk .department-btn,
  .kiosk .policy-type-btn,
  .kiosk .has-policy-btn {
    min-height: 4rem;
    font-size: 1.3rem;
  }
}

/* The first question sits at the card's own padding, not a label's gap. */
.kiosk #policy-type-question > label,
.kiosk #policy-number-question > label {
  margin-top: 0;
}

.kiosk .brand-header img {
  height: 100px;
}

/* An iPad on its side: the logo gives up more height so the form
   starts on screen. */
@media (orientation: landscape) and (max-height: 900px) {
  .kiosk .brand-header img {
    height: 72px;
  }
}

#subject-other-field label {
  margin-top: 1.25rem;
}

#subject-other-field input {
  width: 100%;
}

.bilingual-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}


/* Desk alert banners, full-width above the queue: the connection one
   means every alert on this page is off, so it mustn't look like furniture. */
.alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  /* Every banner is as tall as one with a button, so the page doesn't jump. */
  min-height: 61px;
}

.alert-banner button,
#desk-alerts-callout button {
  padding: 0.4rem 0.9rem;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
}

/* Amber: something here needs fixing before the page works as it should. */
.alert-banner.alerts-off {
  color: var(--on-amber);
  background: var(--amber);
}

/* Green: what the last save did. */
.alert-banner.alerts-on {
  color: #10240f;
  background: var(--lime);
}

/* Red: the page has lost the stream, so every alert on it is off. */
.alert-banner.connection-lost {
  color: #fff;
  background: #b00020;
}

.alert-banner.waiting {
  color: #10240f;
  background: #ffd54f;
}

/* Confirms the call this desk just accepted, and carries the name and
   number the accepted row took with it when it left the list above. */
.alert-banner.call-waiting {
  color: #fff;
  background: var(--primary);
}

.call-banner-detail {
  font-weight: 400;
  opacity: 0.9;
}

.call-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* A phone has no room beside the words, so the bar's buttons go under them and wrap. */
@media (max-width: 560px) {
  .alert-banner.call-waiting {
    flex-direction: column;
    align-items: stretch;
  }

  .call-banner-actions {
    flex-wrap: wrap;
    flex-shrink: 1;
  }
}

/* Sits where the Record Sale button was, so the confirmation lands
   under the eye that just clicked it. */
.sale-recorded {
  white-space: nowrap;
}

/* /sales: orange while the relay still has the rows to type in, green
   once it has. */
.alert-banner.sending {
  color: #fff;
  background: #e8842a;
}

.alert-banner.sent {
  color: #10240f;
  background: var(--lime);
}

/* Left border in the same blue, so the card reads as belonging with
   the call banner above it rather than as another queue. */
.call-queue {
  border-left: 6px solid var(--primary-text);
}

/* Callers owed a ring back, red: the one list here that only goes down
   when somebody acts on it. */
.call-missed {
  border-left: 6px solid #B3261E;
}

.call-missed .card-heading {
  color: #B3261E;
}

.card-heading {
  margin-bottom: 0.75rem;
}

/* Both call lists' rows are two lines, so they sit top-aligned. */
.call-queue .waiting-list li,
.call-missed .waiting-list li {
  align-items: flex-start;
}

/* /transfer's own "who took the call" answer -- the one thing the
   asker is still on that page to read. */
.transfer-status {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-text);
  margin-bottom: 0.35rem;
}

/* /sales's Information box and each policy; saved, one summary line. */
.box {
  border: 1px solid var(--primary-text);
  border-radius: 4px;
  padding: 0 1rem 1rem;
  margin-top: 1.5rem;
}

/* An auto margin centres a legend and keeps it shrink-to-fit, so its
   notch in the border moves with it. */
.box legend {
  margin-inline: auto;
  font-weight: 600;
  color: var(--primary-text);
  padding: 0 0.5rem;
}

.box label {
  margin-top: 1rem;
}

.box.collapsed .box-fields {
  display: none;
}

.box-summary {
  padding: 1rem 0 0.25rem;
  font-size: 1.1rem;
}

.checkin-form textarea {
  height: auto;
  line-height: 1.4;
  padding: 0.75rem 1rem;
  resize: vertical;
}

/* No background of its own: a dark-mode browser leaves inherited
   colors alone and fights a fixed light one. */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.price-table th,
.price-table td {
  padding: 0.5rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

.price-table th:first-child {
  text-align: left;
  font-weight: 600;
}

.price-table thead th {
  font-weight: 400;
  opacity: 0.75;
}

.price-note {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  opacity: 0.8;
}

.price-table tr.bundle {
  font-weight: 700;
  font-size: 1.25rem;
}

/* /hr: a quarter's Saturdays and a year's PTO read as plain tables. */
.hr-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.hr-table th,
.hr-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

.hr-table thead th {
  font-weight: 400;
  opacity: 0.75;
}

/* The quarter reads as columns on a laptop: the day never wraps, the
   counts sit together, and a wide quarter scrolls sideways inside its card. */
.hr-table-wrap {
  overflow-x: auto;
}

.hr-table td.hr-day {
  white-space: nowrap;
}

.hr-table td.hr-count {
  white-space: nowrap;
  text-align: center;
}

.hr-table td.hr-short {
  color: var(--status-bad-text);
  font-weight: 600;
}

.hr-quarter th,
.hr-quarter td {
  min-width: 7rem;
}

.hr-quarter tr.hr-cover td.hr-day {
  color: var(--status-warn-text);
  font-weight: 600;
}

.hr-table form {
  display: inline;
}

/* All Saturdays: a row per day that opens to its people as one chip each. */
.hr-quarter td.hr-open-cell {
  min-width: 0;
  text-align: right;
}

.hr-open {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--primary-text);
  background: var(--surface);
  color: var(--primary-text);
  cursor: pointer;
}

.hr-open[aria-expanded="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.hr-quarter tr:has(+ tr.hr-people:not([hidden])) td {
  border-bottom: 0;
}

.hr-quarter tr.hr-people td {
  background: var(--secondary-background);
  padding: 0.75rem;
}

.hr-bands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem 1.25rem;
}

.hr-band h4 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted-text);
}

.hr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hr-chips li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.hr-chip,
.hr-for {
  white-space: nowrap;
}

.hr-chip {
  border: 1px solid var(--input-border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.9rem;
}

.hr-chip-cover {
  border-color: currentColor;
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
  font-weight: 600;
}

/* A $ that can't be typed over, drawn in front of the box's text. */
.money {
  position: relative;
}

.money::before {
  content: "$";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: #666;
  pointer-events: none;
}

.money input {
  padding-left: 2rem;
}


/* /sales's rows exactly as they'll be posted -- one per line, never
   reflowed, since the commas are the columns. */
.preview-lines {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--surface);
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.95rem;
}

/* Same treatment the check-in form's own pickers get when submitted
   with nothing chosen. */
.language-picker.invalid {
  border: 2px solid #C0392B;
  border-radius: 4px;
  padding: 0.5rem;
}


/* Who the U-code resolved to, always shown: what this desk is alerted
   about follows from it. */
.signed-in {
  text-align: center;
  padding: 0.4rem 1.25rem;
  font-size: 0.85rem;
  color: var(--muted-text);
  background: var(--secondary-background);
}


/* /relay: one centred panel, the waiting count in its own box. */
.relay-body main {
  max-width: 620px;
}

.relay-status {
  text-align: center;
}

/* Red while no relay is collecting, since nothing reaches Slack then;
   green once one is. */
.relay-banner {
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  color: #fff;
  background: #b00020;
  /* Its "sending" state is the header's own lime, which would
     otherwise blend into the lime header with no visible edge. */
  border-top: 1px solid var(--deep-navy);
}

/* Amber while the relay is open but its Slack isn't signed in yet. */
/* The Start button sits on a line of its own under the sentence: a
   full-width break before it, since a fit-content button would otherwise
   fit beside the text. */
.relay-banner {
  flex-wrap: wrap;
}
.relay-banner::after {
  content: "";
  flex-basis: 100%;
  order: 1;
}
#relay-start {
  order: 2;
  max-width: fit-content;
  margin: 0 auto;
}

.relay-banner.starting {
  color: #10240f;
  background: #ffb300;
}

.relay-banner.sending {
  color: #10240f;
  background: var(--lime);
}

.relay-banner::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

.relay-stat {
  display: block;
  width: fit-content;
  margin: 1.1rem auto 0;
  padding: 1.1rem 2.75rem;
  background: var(--surface);
  border: 2px solid var(--primary-text);
  border-radius: 4px;
}

.relay-count {
  display: block;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-text);
}

.relay-label {
  display: block;
  margin-top: 0.4rem;
  font-weight: 600;
}

.relay-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted-text);
}

.relay-setup summary {
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  color: var(--primary-text);
}

.relay-steps {
  margin: 1rem 0 0;
  padding-left: 1.4rem;
  line-height: 1.6;
}

.relay-steps li + li {
  margin-top: 0.6rem;
}

.step-aside {
  display: block;
  font-size: 0.9rem;
  color: var(--muted-text);
}

/* Its own line under the step, not wedged into the sentence. */
.relay-steps .link-button {
  display: block;
  width: fit-content;
  margin: 0.6rem 0 0.35rem;
}

.relay-path {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--surface);
  word-break: break-all;
}

.relay-footnote {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted-text);
}

/* /access: a row per person, and the buttons that clear what they have.
   Wraps rather than squeezing, since a manager reads this on a phone. */
.access-note {
  color: #666;
  margin: 0 0 1rem;
  text-align: center;
}

.access-heading {
  text-align: center;
}

/* /sales's own section box, holding a department's rows. */
.access-box {
  padding-bottom: 0.25rem;
}

.access-list li {
  flex-wrap: wrap;
  /* As tall as a row with a button, so a list steps evenly down the
     page whether or not each person has one. */
  min-height: 3.5rem;
}

.access-state {
  color: #666;
  font-size: 0.9rem;
}

.access-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.access-actions button {
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}

/* Corporate Relay's own page (relay/status_page.html): /relay's theme, as a
   running list of messages rather than one count. */
.relay-own-page main {
  max-width: 720px;
}

.relay-section-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--primary-text);
}

.relay-messages,
.relay-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.relay-message,
.relay-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(21, 73, 149, 0.12);
}

.relay-message:first-child,
.relay-note:first-child {
  border-top: 0;
}

.relay-when {
  flex-shrink: 0;
  width: 4.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

.relay-message-body {
  flex: 1;
  min-width: 0;
}

.relay-where {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-text);
}

.relay-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relay-check {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--geico-green);
}

.relay-dropped {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: #b00020;
}

.relay-spinner {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border: 3px solid rgba(21, 73, 149, 0.2);
  border-top-color: var(--primary-text);
  border-radius: 50%;
  animation: relay-spin 0.8s linear infinite;
}

@keyframes relay-spin {
  to { transform: rotate(360deg); }
}

.relay-day-title {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.relay-day:first-child .relay-day-title {
  margin-top: 0;
}

.relay-empty {
  margin: 0;
  opacity: 0.7;
}

.relay-job-status {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.relay-job-round {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.relay-job-round.over-half {
  color: var(--alert-amber, #b26a00);
  opacity: 1;
}

.relay-caption {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.relay-stop {
  margin: 0;
  text-align: center;
}

.relay-console summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-text);
}

.relay-console pre {
  max-height: 20rem;
  overflow: auto;
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

/* /selfservice: each of its three sections opens on its own, the way
   /relay's own instructions card does -- all three are long lists. */
.selfservice-section > summary {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-text);
}

/* The triangle is drawn in the browser's own colour unless told: the
   same blue as the tab text, which the heading beside it already is. */
.selfservice-section > summary::marker,
.selfservice-section > summary::-webkit-details-marker {
  color: var(--primary-text);
}

/* Fields on this page name themselves, so the form's gap does the spacing. */
.selfservice-section .checkin-form {
  gap: 1rem;
}

.selfservice-section .box {
  padding-bottom: 1.5rem;
}

/* Room under the box's own heading before the first field. */
.selfservice-section .box > .checkin-form {
  margin-top: 1rem;
}

.selfservice-section .box + .box {
  margin-top: 2rem;
}

#notice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.notice-dismiss {
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}

/* Where somebody is headed, on their row: the queue's tag shape,
   filled green so it reads as a highlight beside the grey state. */
.move-tag {
  font-size: 0.8rem;
  background: var(--geico-green);
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  margin-left: 0.5rem;
}

/* A PTO day's status on /hr. */
.pto-status {
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.pto-status-requested {
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
}

.pto-status-approved {
  background: var(--status-good-bg);
  color: var(--status-good-text);
}

.pto-status-accepted {
  background: var(--status-info-bg);
  color: var(--status-info-text);
}

/* A Saturday taken in a swap reads as that, not as the rotation that first set it. */
.pto-status-swapped {
  background: var(--status-info-bg);
  color: var(--status-info-text);
}

.pto-status-declined {
  background: var(--status-bad-bg);
  color: var(--status-bad-text);
}

.pto-status-withdrawn {
  background: var(--status-neutral-bg);
  color: var(--muted-text);
}

/* Self Service's form boxes read centred; a form control doesn't
   inherit text-align, so it is set directly. */
.selfservice-staff-box,
.selfservice-staff-box input,
.selfservice-staff-box select {
  text-align: center;
}

/* What a closed select shows is centred by this, not text-align. */
.selfservice-staff-box select {
  text-align-last: center;
}

.selfservice-tick {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.selfservice-tick input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
}

.selfservice-tick-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.selfservice-tick-row input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* Dimmed rather than recoloured, so it reads as off under a browser's
   dark rendering too -- a fixed light grey there is the one white box. */
.selfservice-tick-row input[type="text"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selfservice-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Edit fills the form above the roster, so it lights up as it scrolls
   into view rather than looking like it did nothing. */
.selfservice-staff-box.just-opened {
  animation: selfservice-lit 1.6s ease-out;
}

@keyframes selfservice-lit {
  from { box-shadow: 0 0 0 4px var(--geico-green); }
  to { box-shadow: 0 0 0 0 transparent; }
}

/* Which office a dealership is going to, asked on the click. Centred
   in the viewport rather than under the button, since it is a modal. */
.selfservice-dialog {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1.5rem;
  max-width: 22rem;
}

.selfservice-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.selfservice-dialog p {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

/* A rep's row is a form of its own, so the boxes sit on the line
   rather than at the full height a form field takes. */
.selfservice-rep {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
}

.selfservice-rep input {
  flex: 1;
  min-width: 9rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 4px;
}

.selfservice-rep button {
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}


/* ---- Dashboard ---- */

/* Wide enough for four boxes a row with a dollar figure in each. */
.dashboard-body main {
  max-width: 1040px;
}

/* The Dashboard's own tabs: underlined, so they don't read as the pill
   chips for the range under them. */
.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin: -0.5rem 0 1rem;
  border-bottom: 1px solid var(--input-border);
}

.dash-tab {
  padding: 0.55rem 0.2rem;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-text);
  text-decoration: none;
}

a.dash-tab:hover {
  border-bottom-color: var(--input-border);
}

.dash-tab.current {
  border-bottom-color: var(--primary-text);
  color: var(--text);
}

.dash-ranges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.dash-range {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--primary-text);
  color: var(--primary-text);
  background: var(--surface);
  text-decoration: none;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}

.dash-range.current {
  background: var(--primary);
  color: #fff;
}

.dash-custom summary::-webkit-details-marker {
  display: none;
}

.dash-custom {
  position: relative;
}

/* Floated rather than laid out, so opening it doesn't widen the chip
   and shove "Choose Dates" off centre. */
.dash-custom-form {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid #d5dde9;
  box-shadow: 0 4px 12px rgba(21, 73, 149, 0.14);
}

.dash-custom-form input {
  height: 2.4rem;
  padding: 0 0.6rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
}

.dash-as-of,
.dash-note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted-text);
}

.dash-as-of {
  text-align: center;
}

/* The range and when the numbers landed are two facts, so they read as
   two lines rather than one run-on. */
.dash-range-name,
.dash-updated {
  display: block;
}

.dash-range-name {
  font-weight: 600;
  color: var(--text);
}

/* A note about the page rather than another card of numbers, so it
   carries no card of its own. */
.dash-glossary {
  margin-bottom: 1rem;
}

.dash-source {
  margin-top: -0.4rem;
}

.dash-person {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}

.dash-person small {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted-text);
}

/* A row of boxes shares its width evenly, however long one box's figure
   is. The page splits a long row into even ones (seven are four and
   three), so a row never ends on a lone narrow box. */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.dash-tiles[data-tiles="1"] { grid-template-columns: minmax(0, 1fr); }
.dash-tiles[data-tiles="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-tiles[data-tiles="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dash-tiles + .dash-h4 {
  margin-top: 1.2rem;
}

/* The boxes an opened metric leads to: a size down, so its own box
   stays the one the page is about. */
.dash-alongside .dash-tile-value {
  font-size: 1.6rem;
}

.dash-alongside .dash-tile.self .dash-tile-value {
  font-size: 2.2rem;
}

@media (max-width: 560px) {
  .dash-tiles,
  .dash-tiles[data-tiles="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-tiles[data-tiles="3"] .dash-tile:last-child {
    grid-column: span 2;
  }

  /* Two to a row, so a premium in the millions still fits its box. */
  .dash-tiles .dash-tile-value,
  .dash-alongside .dash-tile.self .dash-tile-value {
    font-size: 1.7rem;
  }

  .dash-alongside .dash-tile-value {
    font-size: 1.4rem;
  }
}

.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.7rem 0.75rem;
  background: var(--surface);
  border: 2px solid var(--primary-text);
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

/* Every box but the page's own opens further, and says so under the pointer. */
a.dash-tile:hover {
  box-shadow: 0 3px 12px rgba(21, 73, 149, 0.2);
}

a.dash-tile:focus-visible {
  outline: 3px solid var(--deep-navy);
  outline-offset: 2px;
}

/* The page's own box: its shading all but vanishes in dark mode, so the
   border thickens too. */
.dash-tile.self {
  background: var(--secondary-background);
  box-shadow: inset 0 0 0 1px var(--primary-text);
}

.dash-tile-label {
  font-weight: 600;
  font-size: 0.85rem;
}

/* A figure its source only dates by month: the same number whichever
   range is picked. */
.dash-monthly {
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.65;
  white-space: nowrap;
}

.dash-tile-value {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-text);
  font-variant-numeric: tabular-nums;
}

.dash-tile-empty,
.dash-metric-empty,
.dash-empty {
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
}

.dash-tile-office,
.dash-metric-office {
  font-size: 0.8rem;
  color: var(--muted-text);
}

/* Green, amber, red: at or about the mark, a little under, under. */
.dash-sig {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
  background: #9aa0a6;
}

.dash-sig.good, .dash-goal-fill.good, .dash-bar-fill.good { background: var(--geico-green); }
.dash-sig.warn, .dash-goal-fill.warn, .dash-bar-fill.warn { background: #B7791F; }
.dash-sig.bad, .dash-goal-fill.bad, .dash-bar-fill.bad { background: #B00020; }
small.good { color: #4B8F39; }
small.warn { color: #B7791F; }
small.bad { color: #B00020; }

.dash-goal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.dash-goal {
  display: block;
  position: relative;
  width: 100%;
  height: 0.6rem;
  border-radius: 4px;
  background: var(--secondary-background);
  overflow: hidden;
}

.dash-goal-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--primary);
}

.dash-goal-text {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dash-group h2,
.dash-card-head h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

/* The heading centred, whatever sits beside it. */
.dash-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.dash-card-head h2 {
  margin: 0;
}

.dash-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid #d5dde9;
  color: var(--text);
  text-decoration: none;
}

.dash-metric:first-of-type {
  border-top: 0;
}

.dash-metric-label {
  flex: 1 1 10rem;
  font-weight: 600;
}

.dash-metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-text);
  font-variant-numeric: tabular-nums;
}

.dash-metric-value small,
.dash-metric-office small,
.dash-bar-value small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-text);
}

.dash-def {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
}

.dash-h4 {
  margin: 1rem 0 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

.dash-trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 96px;
  padding-top: 4px;
  border-bottom: 1px solid #d5dde9;
}

.dash-trend-slot {
  flex: 1;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  position: relative;
  cursor: default;
}

.dash-trend-slot:hover .dash-trend-bar,
.dash-trend-slot:focus-visible .dash-trend-bar {
  filter: brightness(0.85);
}

/* Shown the moment the column is under the pointer, so a day answers
   straight away rather than after the browser's own delay. */
.dash-trend-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  background: #2b2b2b;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  z-index: 2;
  pointer-events: none;
}

.dash-trend-slot:hover .dash-trend-tip,
.dash-trend-slot:focus-visible .dash-trend-tip {
  display: block;
}

/* The first and last columns would otherwise hang off the card. */
.dash-trend-slot:first-child .dash-trend-tip { left: 0; transform: none; }
.dash-trend-slot:last-child .dash-trend-tip { left: auto; right: 0; transform: none; }

.dash-trend {
  overflow: visible;
}

.dash-trend-bar {
  width: 100%;
  display: block;
  min-height: 2px;
  background: var(--primary);
  border-radius: 3px 3px 0 0;
}

/* A source per colour: lines of the figure to each day, or a sum's
   parts stacked. The slots under the lines carry each day's readout;
   the lines themselves catch the pointer through a wide unseen twin. */
.dash-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1rem;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.85rem;
}
.dash-legend b { font-weight: 600; }
.dash-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: -1px;
}
.dash-swatch.own {
  height: 0;
  border-top: 2px dashed currentColor;
  vertical-align: 3px;
}
.dash-chart { position: relative; }
.dash-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.dash-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.dash-line.own {
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0.7;
}
.dash-hit {
  fill: none;
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 14;
  pointer-events: visibleStroke;
}
.dash-series:has(.dash-hit:hover) .dash-line { opacity: 0.25; }
.dash-series .dash-line:has(+ .dash-hit:hover) { opacity: 1; stroke-width: 4; }
.dash-line-label {
  display: none;
  position: absolute;
  right: 0;
  transform: translateY(-120%);
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  padding: 0 0.3rem;
  pointer-events: none;
}
.dash-overlay .dash-trend-slot:hover,
.dash-overlay .dash-trend-slot:focus-visible {
  box-shadow: inset 1px 0 0 currentColor;
}
.dash-trend-slot.stacked {
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 1px;
}
.dash-trend-slot.stacked .dash-trend-bar {
  min-height: 0;
  border-radius: 0;
}
.dash-trend-tip.multi {
  white-space: normal;
  text-align: left;
  min-width: 10rem;
}
.dash-trend-tip.multi b,
.dash-trend-tip.multi span { display: block; }
.dash-trend-tip.multi span b { display: inline; }

.dash-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted-text);
  margin-top: 0.25rem;
}

.dash-bars {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
  font-size: 0.9rem;
}

.dash-bar-row.me {
  font-weight: 700;
}

.dash-bar-row.me .dash-bar-name::after {
  content: " (you)";
  font-weight: 400;
  color: var(--muted-text);
}

.dash-bar-name {
  color: var(--text);
  text-decoration: none;
}

a.dash-bar-name {
  color: var(--primary-text);
}

.dash-bar {
  position: relative;
  display: block;
  height: 0.8rem;
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
}

.dash-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background: var(--primary);
}

/* The overlay, always the smaller, is drawn in the success green so it
   reads as the good outcome rather than a second series. */
.dash-bar-overlay {
  background: var(--geico-green);
}

/* A bullet's bands sit faint behind the rep's own figure -- red under
   the floor, amber up to the goal -- and the figure is a thinner green
   bar over them, so where it ends reads against both. */
.dash-bar-band {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0.3;
}

.dash-bar-band.bad { background: #B00020; }
.dash-bar-band.warn { background: #B7791F; }

.dash-bar-progress {
  top: 25%;
  height: 50%;
  background: var(--geico-green);
}

/* A fixed value column, so every row's bar is the same width and the
   bands line up down the list. */
.dash-bar-row.bullet {
  grid-template-columns: minmax(6rem, 10rem) 1fr 8.5rem;
}

.dash-bar-value {
  font-variant-numeric: tabular-nums;
  min-width: 3.2rem;
  text-align: right;
}

/* The scorecard: result and rating per metric, the overall beneath. */
.dash-toggle {
  display: inline-flex;
  border: 1px solid var(--primary-text);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.8rem;
}

.dash-toggle a,
.dash-toggle .on {
  padding: 0.25rem 0.7rem;
  color: var(--primary-text);
  text-decoration: none;
}

.dash-toggle .on {
  background: var(--primary);
  color: #fff;
}

.dash-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.8rem;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.dash-score-h {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

.dash-score-m {
  font-weight: 600;
}

.dash-right {
  text-align: right;
}

.dash-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.dash-stars i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--secondary-background);
}

.dash-stars i.on {
  background: var(--primary);
}

.dash-overall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid #d5dde9;
}

.dash-big {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-text);
}

.dash-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.dash-pill.good { background: var(--status-good-bg); color: var(--status-good-text); }
.dash-pill.warn { background: var(--status-warn-bg); color: var(--status-warn-text); }
.dash-pill.bad { background: var(--status-bad-bg); color: var(--status-bad-text); }

.dash-glossary summary,
.dash-group summary,
.dealer-day summary {
  cursor: pointer;
  font-weight: 600;
}

.dash-wide {
  overflow-x: auto;
}

.dash-gloss {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}

.dash-gloss th,
.dash-gloss td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #d5dde9;
  vertical-align: top;
}

.dash-gloss th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}

/* Goals on /selfservice: the unit belongs with the field's name, so a
   manager isn't guessing whether a box wants a count or a percentage. */
.selfservice-goal-unit {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.8rem;
  margin-left: 0.3rem;
}

.selfservice-goal-note {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted-text);
}

.selfservice-goal-more > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.2rem 0;
}

.selfservice-goal-group {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

/* One dot per relay job on /relay: green running, amber running but not
   yet able to send, grey off on that computer. */
.relay-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--alert-red, #b3261e);
  vertical-align: middle;
}
.relay-dot.on { background: var(--alert-green, #1e7b34); }
.relay-dot.waiting { background: var(--alert-amber, #b26a00); }
/* The status page and Compliance: a line for information only, neither good nor bad. */
.relay-dot.note { background: #8a94a3; }
.relay-dot.muted { background: var(--status-muted-dot); }
/* A card per topic, tapped into for its lines, as the Dashboard's boxes are. */
.checks-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
}
.checks-card {
  display: block;
  margin: 0;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.checks-card:hover,
.checks-card:focus-visible {
  outline: 2px solid var(--primary-text);
}
.checks-card .relay-section-title {
  margin-bottom: 0.4rem;
}
.checks-counts {
  margin-left: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.75;
}
.checks-sentence {
  margin: 0;
}
.checks-line .relay-dot {
  flex: none;
  align-self: flex-start;
  margin-top: 0.35rem;
}
.checks-line {
  align-items: flex-start;
}
/* A line's words and names wrap inside the box at any width. */
.checks-line-body {
  flex: 1;
  min-width: 0;
}
.checks-line .relay-text {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Names listed under the sentence by group, never run into it. */
.checks-group {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}
.checks-group-label {
  font-weight: 700;
}
.checks-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}
/* Each name its own chip, so a list reads as separate people. */
.checks-names li {
  max-width: 100%;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--text);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* Compliance: a muted line keeps its words, on yellow, with who muted it and why. */
.checks-line.is-muted {
  margin: 0 -0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--status-yellow-bg);
}
.checks-muted,
.checks-muted-count {
  margin: 0.35rem 0 0;
  color: var(--status-yellow-text);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.checks-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.checks-buttons .checks-action {
  margin: 0;
}
.checks-mute-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex-basis: 100%;
}
.checks-mute-label {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: 700;
}
.checks-mute-note {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Goals: the month and its button read as one choice, centred, rather
   than a field with something beside it. */
.selfservice-goal-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* A holiday each, with an x to take it off. */
.selfservice-holidays {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.selfservice-holiday {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--primary-text);
  color: var(--primary-text);
  border-radius: 999px;
  padding: 0.15rem 0.5rem 0.15rem 0.7rem;
}
.selfservice-holiday-drop {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
}
.selfservice-holiday-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* theme_toggle.js's band, fixed so it rides above every page's scroll:
   Feedback and Help in the bottom left corner, text size and the theme
   in the bottom right. Only the buttons take a click, never the gap. */
#page-controls {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.25rem;
  pointer-events: none;
}

.page-controls-start,
.page-controls-end {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  pointer-events: auto;
}

.page-controls-end {
  margin-left: auto;
}

/* Room at the foot of every page for the band: its 2.75rem over 1rem of
   inset, and a gap. */
:root {
  --toggle-clear: 4.25rem;
}

/* A phone has no room beside the rows, so they close the page instead. */
@media (max-width: 560px) {
  :root {
    --toggle-clear: 1.5rem;
  }

  #page-controls {
    position: static;
    padding: 1rem;
  }
}

#theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--primary-text);
  background: var(--secondary-background);
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* A language after a name (language_tags.py): its colour as the border
   and a tint behind ordinary text, so it reads in both themes and the
   name of the language is always there. */
.language-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border: 1px solid var(--language-colour, var(--muted-text));
  border-left-width: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--language-colour, transparent) 16%, transparent);
  color: var(--primary-text);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* Text size, to the toggle's left: A± opens A+ and A− stacked above it.
   The steps follow the button in the page, so Tab reaches them next. */
#text-size {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
}
#text-size-steps {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#text-size button {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--primary-text);
  background: var(--secondary-background);
  color: var(--primary-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
#text-size button:disabled {
  opacity: 0.4;
}

/* The desk alerts' bell (_desk_alerts.html), first in the right corner,
   crossed out while alerts are off. */
#desk-alerts {
  position: relative;
}
#desk-alerts-bell {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--primary-text);
  background: var(--secondary-background);
  color: var(--primary-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
#desk-alerts-bell svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The cross over a gap in the button's own colour, so it reads across the bell. */
#desk-alerts-bell .bell-cross-gap {
  stroke: var(--secondary-background);
  stroke-width: 5;
}
#desk-alerts-bell[aria-pressed="true"] .bell-cross,
#desk-alerts-bell[aria-pressed="true"] .bell-cross-gap {
  display: none;
}

/* Asking a desk to allow alerts: amber, pointing down at the bell, and
   as hard to miss as a banner across the page. */
#desk-alerts-callout {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: 22rem;
  max-width: calc(100vw - 9rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
#desk-alerts-callout p {
  margin: 0;
}
#desk-alerts-callout::after {
  content: "";
  position: absolute;
  top: 100%;
  right: calc(1.375rem - 0.6rem);
  border: 0.6rem solid transparent;
  border-top-color: var(--amber);
}

/* While the callout shows, the page ends clear of it too. */
@media (min-width: 561px) {
  :root:has(#desk-alerts:not([hidden]) #desk-alerts-callout:not([hidden])) {
    --toggle-clear: 13.5rem;
  }
}

/* A phone's band closes the page, so the callout stands above the bell in it. */
@media (max-width: 560px) {
  #desk-alerts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #desk-alerts-callout {
    position: relative;
    bottom: auto;
    margin-bottom: 0.75rem;
  }
}

/* /everquote: the search on one line, then a box per lead -- the same
   bordered box /sales and /transfer put a part of a form in -- a line
   each until opened. */
.lead-search {
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 0.5rem;
}
.lead-search button {
  margin-top: 0;
}
.lead-count {
  color: var(--muted-text);
}
.lead {
  background: var(--surface);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.lead[open] {
  padding-bottom: 1rem;
}
/* The browser's own marker sits on a line of its own once the row below
   it is a grid, so the row carries its own, beside the name. */
.lead summary {
  cursor: pointer;
  color: var(--primary-text);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  list-style: none;
}
.lead summary::-webkit-details-marker {
  display: none;
}
.lead summary::before {
  content: "\25B8";
  width: 0.8rem;
  flex: none;
  text-align: center;
}
.lead[open] summary::before {
  content: "\25BE";
}
.lead summary:hover .lead-name {
  text-decoration: underline;
}
/* One row per lead, on columns of its own, so the phone under a long
   name starts where the phone above it does. */
.lead-line {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.2rem 1rem;
  align-items: baseline;
}
.lead-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.lead-tags:empty {
  display: none;
}
/* The tags keep their own line at every width, so the four values
   spread evenly and line up from one lead to the next. */
@media (min-width: 760px) {
  .lead-line {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.lead-name {
  font-weight: 700;
  font-size: 1.1rem;
}
.lead-when {
  color: var(--muted-text);
}
/* An opened lead: its parts side by side, each in a box of its own as a
   policy sits in /sales, so it reads as contact, insurance, driver and
   car rather than as one long list. */
.lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
  align-items: start;
}
@media (min-width: 760px) {
  .lead-row {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
  /* A lead with one driver, or one car: centred rather than stretched
     across a width meant for two. */
  .lead-row.one {
    grid-template-columns: minmax(0, 32rem);
    justify-content: center;
  }
}
.lead-section {
  border: 1px solid var(--secondary-background);
  border-radius: 8px;
  background: var(--background);
  padding: 0.6rem 0.9rem;
}
.lead-transfer {
  background: var(--geico-green);
  color: var(--surface);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.85rem;
}
.lead-section h3 {
  color: var(--primary-text);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}
/* A field is its own cell, the label over the value and each as wide as
   it needs: as many to a line as fit, and a line with fewer centred
   rather than left hanging. */
.lead-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.lead-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lead-fields dt {
  color: var(--muted-text);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lead-fields dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The Call List: a box per customer like /everquote's leads, under a
   heading per standing, with the rep's own call picked out. */
.calls-summary {
  color: var(--muted-text);
}
.calls-problem {
  background: var(--status-bad-bg);
  color: var(--status-bad-text);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}
/* static/live.js healing a page's connection: said quietly, and gone once it has. */
.live-reconnecting {
  color: var(--muted-text);
  font-style: italic;
}
.call-group {
  margin-top: 1.25rem;
}
.call-group-title {
  color: var(--primary-text);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  cursor: default;
}
details.call-group > .call-group-title {
  cursor: pointer;
}
.call-row {
  text-align: left;
  background: var(--surface);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.call-row.yours {
  border-width: 2px;
  background: var(--secondary-background);
}
.call-line {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0.2rem 1rem;
  align-items: baseline;
}
.call-left {
  justify-self: end;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  color: var(--status-warn-text);
  font-weight: 600;
}
/* Days left of GEICO's 72 hours: red on the last day, then orange,
   yellow and green. */
.call-row.left-0 { border-left: 6px solid var(--status-bad-text); }
.call-row.left-1 { border-left: 6px solid var(--status-orange-text); }
.call-row.left-2 { border-left: 6px solid var(--status-yellow-text); }
.call-row.left-3 { border-left: 6px solid var(--status-good-text); }
.call-row.left-0 .call-left { background: var(--status-bad-bg); color: var(--status-bad-text); }
.call-row.left-1 .call-left { background: var(--status-orange-bg); color: var(--status-orange-text); }
.call-row.left-2 .call-left { background: var(--status-yellow-bg); color: var(--status-yellow-text); }
.call-row.left-3 .call-left { background: var(--status-good-bg); color: var(--status-good-text); }
.call-about {
  color: var(--muted-text);
  margin-top: 0.3rem;
}
.call-line .call-about {
  margin-top: 0;
}
.call-note {
  margin-top: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  display: inline-block;
  background: var(--status-neutral-bg);
}
.call-note.done {
  background: var(--status-good-bg);
  color: var(--status-good-text);
}
.call-note.awaiting, .call-note.to_call {
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
}
.call-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}
.call-let-go {
  background: none;
  color: var(--primary-text);
  text-decoration: underline;
  font-weight: 400;
}
@media (max-width: 600px) {
  .call-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* /service: every section collapsed to its heading and count until tapped. */
.service-section > summary {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--input-border);
}
.service-section .section-count {
  color: var(--muted-text);
  font-weight: 400;
}
.service-section > .calls-summary {
  margin-top: 0.75rem;
}

/* /review: every section shut to the line that carries its figure. */
.review-section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.2rem 0;
}
/* The audit form inside its section, centred like Self Service's. */
.review-section > .card {
  text-align: center;
}
.review-section .review-figure {
  color: var(--muted-text);
  font-weight: 400;
  font-size: 0.95rem;
}
.review-section .review-figure::before {
  content: " -- ";
}
.review-section .dash-metric:first-of-type {
  border-top: 1px solid #d5dde9;
  margin-top: 0.6rem;
}
.review-more {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
}
.review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 0.6rem;
}
.review-table th,
.review-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid #d5dde9;
  white-space: nowrap;
}

/* ---- Dealership (/dealer) ---- */

/* Reads as the form's own labels, over a row of pills rather than one box. */
.checkin-form .dealer-label {
  display: block;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
}

.dealer-visit h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

/* The day's marked visits, each with its own Unmark at the far end. */
.dealer-visits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dealer-visits li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--input-border);
}

.dealer-visits li:first-child {
  border-top: none;
}

.dealer-visit-what {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dealer-visit-who {
  display: block;
  font-size: 0.85rem;
  color: var(--muted-text);
}

/* The day's stops: one visited reads as done rather than dropping off. */
.dealer-stops li.done .dealer-visit-what {
  opacity: 0.6;
}

.dealer-stops li:not(.done) .dealer-stop-done {
  display: none;
}

.dealer-stop-done {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--status-good-text);
}

.dealer-route {
  margin: 0.75rem 0 0;
}

/* Tall enough to place a stop on a phone held upright. */
#dealer-map {
  height: 320px;
  margin-top: 1rem;
  border-radius: 8px;
  z-index: 0;
}

/* Self Service Attendance: the name search and the department groups. */
.attendance-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
}
.attendance-find input[type="search"] {
  flex: 1 1 14rem;
  height: 3rem;
  padding: 0 1rem;
  font-size: 1.1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 4px;
}
.attendance-group > summary {
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-text);
}
.selfservice-section .attendance-group {
  padding: 0.75rem 1rem;
}
.selfservice-section .attendance-group + .attendance-group {
  margin-top: 0.75rem;
}

/* /uiq and /rdp: a card per step of a run (run-*), drawn by uiq.js and
   rdp.js in the shape of the Call List's rows; uiq-* is the UIQ page's own.
   A step's card reads centred and the lists in it keep their left edge. */
:is(#uiq, #rdp) > .card {
  text-align: center;
}
.run-lines ul,
.uiq-categories,
.name-grid,
.run-tick,
.rdp-return {
  text-align: left;
}
.run-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.run-head h2 {
  margin: 0;
}
.run-relay-line {
  color: var(--muted-text);
  margin: 0.4rem 0 0;
}
.run-notice {
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  background: var(--status-neutral-bg);
}
.run-notice.warning { background: var(--status-warn-bg); color: var(--status-warn-text); }
.run-notice.error { background: var(--status-bad-bg); color: var(--status-bad-text); }
/* The relay that never answered: amber, fixable here and now. */
.install-banner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
}
/* What the in-portal download is doing; empty until it starts. */
.download-status:empty { display: none; }
.run-dates {
  max-width: 20rem;
  margin-inline: auto;
}
.run-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.run-count {
  color: var(--muted-text);
}
.run-lines > summary {
  cursor: pointer;
  color: var(--primary-text);
  font-weight: 600;
}
.run-lines {
  margin-bottom: 0.8rem;
}
.run-lines ul,
.uiq-categories {
  margin: 0.4rem 0 0.8rem;
  padding-left: 1.25rem;
}
.uiq-owners > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary-text);
}
/* A list of people to tick, in even columns so a name is found by
   scanning down; one column at phone width. */
.name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.4rem 1.25rem;
  margin: 0.5rem 0;
}
.name-grid > label > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.uiq-owner,
.run-tick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.uiq-owner input,
.run-tick input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}
.uiq-box {
  border: 1px solid var(--primary-text);
  border-radius: 4px;
  padding: 0.5rem 1rem 0.75rem;
  margin-top: 0.75rem;
}
.uiq-box > summary {
  cursor: pointer;
}
.uiq-category {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text);
}
.run-tick {
  padding: 0.2rem 0;
}
.uiq-job .call-line {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr);
}
.uiq-job-status {
  justify-self: end;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--status-neutral-bg);
  font-weight: 600;
}
.uiq-job.saved .uiq-job-status { background: var(--status-good-bg); color: var(--status-good-text); }
.uiq-job.handed .uiq-job-status { background: var(--status-warn-bg); color: var(--status-warn-text); }
.uiq-job.mismatch .uiq-job-status,
.uiq-job.failed .uiq-job-status,
.uiq-job.verify .uiq-job-status { background: var(--status-bad-bg); color: var(--status-bad-text); }
.run-saved {
  color: var(--muted-text);
}
/* /rdp: a return per row; one already in the record is greyed, not ticked. */
.rdp-return {
  padding: 0.3rem 0;
}
.rdp-return .call-line {
  flex: 1;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr);
}
.rdp-return.recorded {
  color: var(--muted-text);
}
.rdp-return-about {
  justify-self: end;
  color: var(--muted-text);
}

/* Self Service's Authenticator: a line of state, and the link while it is owed. */
.authenticator-card p {
  margin: 0.35rem 0 0.75rem;
}
.authenticator-card p:last-child {
  margin-bottom: 0;
}
/* Enabled in green, Disabled in red, from the status tokens each theme sets. */
.authenticator-state {
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
}
.authenticator-state.on { background: var(--status-good-bg); color: var(--status-good-text); }
.authenticator-state.off { background: var(--status-bad-bg); color: var(--status-bad-text); }
a.authenticator-link {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

/* The Guide, opened by Help: the viewer's pages as the tab strip groups
   them, centred. */
.page-key {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  padding: 1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.page-key::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* Three columns, so the title sits in the middle and the close button at the end. */
.page-key-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.page-key-head h2 {
  grid-column: 2;
  margin: 0;
  font-size: 1.15rem;
  text-align: center;
  color: var(--primary-text);
}

.page-key-close {
  grid-column: 3;
  justify-self: end;
  background: none;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.page-key-list {
  margin: 0.75rem 0 0;
  text-align: center;
}

.page-key-list dt {
  margin-top: 0.6rem;
  font-weight: 700;
}

.page-key-list dt a {
  color: var(--primary-text);
}

.page-key-list dd {
  margin: 0.1rem 0 0;
  color: var(--muted-text);
  font-size: 0.9rem;
}

/* The Dashboard's link to its targets, for whoever sets them. */
.dash-edit-targets {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--primary-text);
  font-weight: 600;
}

.page-key-list .page-key-here {
  color: var(--text);
}

/* Feedback and Help, the band's left corner; Feedback's pop-up is in the Guide's shape. */
#feedback-open,
#page-key-open {
  height: 2.75rem;
  margin: 0;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--primary-text);
  background: var(--secondary-background);
  color: var(--primary-text);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.feedback form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feedback label {
  margin-top: 0.4rem;
  font-weight: 700;
}

.feedback input,
.feedback textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--background);
  color: var(--text);
  font: inherit;
}

.feedback-warning {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
  font-size: 0.9rem;
}

.feedback-said {
  margin: 0.4rem 0 0;
  color: var(--status-good-text);
}

.feedback-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Every page's trail back: earlier steps bold in the text colour, a light
   separator, and this page plain and quieter. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text);
}
.crumbs a,
.crumbs a:visited {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.crumbs a:hover,
.crumbs a:focus-visible {
  text-decoration: underline;
}
.crumbs > span:not(.crumbs-sep):not(.crumbs-here) {
  font-weight: 700;
}
.crumbs-sep {
  padding: 0 0.45rem;
  color: var(--muted-text);
}
.crumbs-here {
  font-weight: 400;
  color: var(--muted-text);
}

/* A person's sign-in on the Staff Roster, for whoever may reset it. */
.sign-in-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.sign-in-chip {
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--text);
  font-size: 0.8rem;
}
.sign-in-chip.warn {
  border-color: var(--status-warn-text);
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
}
.access-actions form {
  margin: 0;
}

/* gea-nichols.com's office picker (packaging/build_home_page.py). */
.office-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 28rem;
  margin: 1.5rem auto 0;
}

.office-button {
  display: block;
  padding: 1.25rem;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

.office-button:active {
  background: var(--pressed);
}

/* Greyed as the sign-in's unfinished Sign In button is. */
.office-button.unavailable,
.office-button.unavailable:active {
  background: #888;
  color: #ddd;
  cursor: not-allowed;
}

.office-button small {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
}