/* Mapner Air Blower Advisor — interface styles.
 *
 * The subject is industrial rotary-lobe blowers: the interface carries
 * duty points, motor sizes and sound levels, so figures get a monospaced
 * face with tabular figures and columns that actually line up. IBM Plex
 * was drawn for technical documentation, which is what most of this
 * screen is.
 *
 * Layout: a fixed app bar over a single content column; the admin
 * console puts a rail of sections beside a working area.
 */

:root {
  /* Colour — a cool industrial neutral, biased toward the brand blue
     so greys read as chosen rather than inherited. */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-sunken: #eceff4;
  --border: #d5dce5;
  --border-strong: #b9c4d1;

  --ink: #0f151d;
  --ink-muted: #4d5a6b;
  --ink-faint: #76838f;

  --brand: #14508c;
  --brand-hover: #0f3f70;
  --brand-wash: #e8f0f9;

  --ok: #176b41;
  --ok-wash: #e6f4ec;
  --warn: #8a5a0b;
  --warn-wash: #fcf3e3;
  --danger: #a92d2d;
  --danger-wash: #fbeceb;

  --shadow-sm: 0 1px 2px rgb(15 21 29 / 0.06);
  --shadow-md: 0 4px 16px rgb(15 21 29 / 0.10);
  --shadow-lg: 0 16px 48px rgb(15 21 29 / 0.18);

  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  --radius: 6px;
  --radius-lg: 10px;
  --bar-height: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1118;
    --surface: #141b24;
    --surface-sunken: #1b232e;
    --border: #273240;
    --border-strong: #3a4857;

    --ink: #e8eef5;
    --ink-muted: #a7b4c2;
    --ink-faint: #7a8795;

    --brand: #5aa2e0;
    --brand-hover: #7cb8ea;
    --brand-wash: #142534;

    --ok: #56c07d;
    --ok-wash: #122620;
    --warn: #d9a441;
    --warn-wash: #2a2213;
    --danger: #ef6b63;
    --danger-wash: #2c1719;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0c1118;
  --surface: #141b24;
  --surface-sunken: #1b232e;
  --border: #273240;
  --border-strong: #3a4857;

  --ink: #e8eef5;
  --ink-muted: #a7b4c2;
  --ink-faint: #7a8795;

  --brand: #5aa2e0;
  --brand-hover: #7cb8ea;
  --brand-wash: #142534;

  --ok: #56c07d;
  --ok-wash: #122620;
  --warn: #d9a441;
  --warn-wash: #2a2213;
  --danger: #ef6b63;
  --danger-wash: #2c1719;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Any author rule that sets `display` beats the browser's built-in
   `[hidden] { display: none }`, so every hidden element needs this or it
   stays on screen. Stated once rather than guarded per component. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 0.95rem; }

p { margin: 0; }

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}

input:disabled,
textarea:disabled {
  background: var(--surface-sunken);
  color: var(--ink-faint);
}

textarea {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
}

/* Numeric entry lines up when read down a column. */
input[type="number"],
input[type="date"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

button {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

button:hover:not(:disabled) { background: var(--brand-hover); }

button:disabled {
  background: var(--surface-sunken);
  color: var(--ink-faint);
  border-color: var(--border);
  cursor: not-allowed;
}

button.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

button.secondary:hover:not(:disabled) {
  background: var(--surface-sunken);
}

button.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-strong);
}

button.danger:hover:not(:disabled) {
  background: var(--danger-wash);
  border-color: var(--danger);
}

button.small {
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------
   Messages and status
   --------------------------------------------------------------- */

.error-message,
.success-message,
.notice {
  font-size: 0.875rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.error-message {
  color: var(--danger);
  min-height: 1.2rem;
  margin-top: 0.5rem;
}

.error-message:not(:empty) {
  background: var(--danger-wash);
  border-color: var(--danger);
  padding: 0.5rem 0.7rem;
}

.success-message {
  color: var(--ok);
  background: var(--ok-wash);
  border-color: var(--ok);
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
}

.notice {
  color: var(--ink-muted);
  background: var(--surface-sunken);
  border-color: var(--border);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.notice strong { color: var(--ink); }

.helper-text {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 0.4rem 0 0.75rem;
}

.empty-state {
  color: var(--ink-faint);
  font-size: 0.875rem;
  padding: 1.75rem 0;
  text-align: center;
}


/* Status pills: state readable at a glance, not only as a word. */
.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid;
  white-space: nowrap;
}

.pill-pending  { color: var(--warn); background: var(--warn-wash); border-color: var(--warn); }
.pill-approved { color: var(--ok); background: var(--ok-wash); border-color: var(--ok); }
.pill-rejected { color: var(--danger); background: var(--danger-wash); border-color: var(--danger); }
.pill-neutral  { color: var(--ink-muted); background: var(--surface-sunken); border-color: var(--border-strong); }
.pill-brand    { color: var(--brand); background: var(--brand-wash); border-color: var(--brand); }

/* ---------------------------------------------------------------
   App bar
   --------------------------------------------------------------- */

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  min-height: var(--bar-height);
  padding-block: 0.5rem;
  padding-inline: max(1rem, env(safe-area-inset-left, 0px))
    max(1rem, env(safe-area-inset-right, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.brand-name {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-sub {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-email {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 24ch;
}

/* ---------------------------------------------------------------
   Sign in
   --------------------------------------------------------------- */

.auth-page {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.auth-aside {
  background: var(--brand);
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem)
    max(1.5rem, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.auth-aside h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  color: #fff;
  max-width: 18ch;
}

.auth-aside p {
  color: rgb(255 255 255 / 0.85);
  max-width: 46ch;
}

.auth-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 44ch;
}

/* Absolute marker rather than a grid cell: each point holds a bold
   lead line and a sentence under it, and a two-column grid pushed the
   second element into a row of its own. */
.auth-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.82);
}

.auth-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
}

.auth-main {
  padding: clamp(1.5rem, 4vw, 3rem)
    max(1.5rem, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.auth-card + .auth-card { margin-top: 1rem; }

.auth-card > h2 { margin-bottom: 0.25rem; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem 1rem;
  margin-block: 1rem;
}

.field-grid .full { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { padding-block: 2rem; }
  .auth-points { display: none; }
}

/* ---------------------------------------------------------------
   Chat
   --------------------------------------------------------------- */

.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left, 0px))
    max(1rem, env(safe-area-inset-right, 0px));
  padding-block: 1rem 0;
}

.messages {
  flex: 1;
  min-height: 0;
  scroll-behavior: smooth;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
}

.message {
  max-width: 48rem;
  font-size: 0.9375rem;
}

.message.user {
  align-self: flex-end;
  max-width: 36rem;
  background: var(--brand);
  color: #fff;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-lg) var(--radius-lg) 2px var(--radius-lg);
}

.message.assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  box-shadow: var(--shadow-sm);
}

.message.system-note {
  align-self: center;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}

/* The quote request, offered inside the conversation at the point the
   advisor knows what the customer needs. Centred and washed so it reads
   as an action rather than as something the advisor said. */
.chat-action {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  max-width: 40rem;
  padding: 0.8rem 1rem;
  background: var(--brand-wash);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

.chat-action p {
  flex: 1 1 16rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* The assistant answers in light markdown; these style the subset that
   `renderMarkdown` in app.js produces. */
.message p + p { margin-top: 0.6rem; }
.message strong { font-weight: 600; }
.message ul, .message ol { margin: 0.5rem 0 0; padding-left: 1.15rem; }
.message li { margin-bottom: 0.3rem; }
.message li::marker { color: var(--ink-faint); }

/* Figures inside a reply: rpm, kW, m³/h, dBA. */
.message code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
  background: var(--surface-sunken);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

.message.user code { background: rgb(255 255 255 / 0.18); }

.thinking {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-faint);
  font-size: 0.875rem;
  padding: 0.25rem 0 0.75rem;
}

.thinking::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.composer {
  flex: none;
  display: flex;
  gap: 0.5rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.composer input { flex: 1; min-width: 0; }

.disclaimer {
  flex: none;
  font-size: 0.75rem;
  color: var(--ink-faint);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------
   Admin console
   --------------------------------------------------------------- */

.admin-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.admin-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 13.5rem 1fr;
}

.admin-nav {
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 0.75rem 0.5rem;
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}

.nav-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.75rem 0.6rem 0.3rem;
}

.tab-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink-muted);
  border: none;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  font-weight: 500;
}

.tab-btn:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--ink);
}

.tab-btn.active {
  background: var(--brand-wash);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand);
}

.admin-main {
  min-width: 0;
  overflow-y: auto;
  padding: 1.5rem;
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.tab-panel > section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.toolbar label { margin: 0; }
.toolbar select { width: auto; min-width: 12rem; }

@media (max-width: 560px) {
  .user-email { max-width: 16ch; }
  .brand-sub { display: none; }
}

@media (max-width: 760px) {
  /* The rail becomes a strip above the work area; `auto` keeps it to its
     own height instead of splitting the screen in half. */
  .admin-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin-nav {
    flex-direction: row;
    /* Without this the buttons stretch to the rail's full height. */
    align-items: center;
    flex: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-block: 0.5rem;
  }
  .nav-heading { display: none; }
  .tab-btn { width: auto; white-space: nowrap; }
  .tab-btn.active { box-shadow: inset 0 -2px 0 var(--brand); }
  .admin-main { padding: 1rem; }
}

/* ---------------------------------------------------------------
   Tables
   --------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-sunken);
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-sunken); }

/* Figures align down the column; names and prose do not. */
td.num, th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.mono { font-family: var(--font-mono); font-size: 0.8125rem; }

td.actions {
  white-space: nowrap;
  text-align: right;
}

td.actions button { margin-left: 0.35rem; }

tr.detail-row > td { background: var(--surface-sunken); }
tr.clickable { cursor: pointer; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem 1.25rem;
  padding: 0.35rem 0;
}

.detail-grid .full-width { grid-column: 1 / -1; }

.detail-grid h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}

.transcript {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.transcript .message {
  max-width: 100%;
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------
   Forms laid out as label/field pairs
   --------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.form-grid label { margin-bottom: 0.3rem; }

/* ---------------------------------------------------------------
   Dialogs
   --------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(8 12 17 / 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
}


.modal > h2 { margin-bottom: 0.75rem; }

.modal h3 {
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.modal h3:first-of-type { margin-top: 0.5rem; }

.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* The quote form can outrun the viewport, and a Send button below the
   fold reads as a form you cannot submit. Pin it to the foot of the
   dialog's own scroll area instead. */
#quote-form .modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.85rem 0 0;
  margin-bottom: -0.4rem;
}

/* ---------------------------------------------------------------
   Loyalty summary
   --------------------------------------------------------------- */

.loyalty-summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.125rem;
  font-weight: 600;
}

.loyalty-tier {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.loyalty-points {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 0.9375rem;
}

.progress {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
  margin: 0.6rem 0 0.4rem;
  max-width: 28rem;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: inherit;
}

/* ---------------------------------------------------------------
   Collapsible guidance
   --------------------------------------------------------------- */

details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
}

details summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink);
}

details .guide { margin-top: 0.85rem; max-width: 70ch; }
details .guide h3 {
  margin: 1.1rem 0 0.3rem;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  border: none;
  padding: 0;
}
details .guide h3:first-child { margin-top: 0; }
details .guide p,
details .guide li { font-size: 0.875rem; color: var(--ink-muted); }
details .guide li { margin-bottom: 0.4rem; }
details .guide ul { padding-left: 1.1rem; margin: 0.3rem 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

#catalogue-violations {
  border: 1px solid var(--warn);
  background: var(--warn-wash);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-top: 0.85rem;
}

#catalogue-violation-list {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  margin: 0.4rem 0;
  padding-left: 1.1rem;
}

#tiers-table input {
  max-width: 9rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.8125rem;
}

#playbook-content { min-height: 26rem; }
#catalogue-json { min-height: 14rem; }

/* ---------------------------------------------------------------
   Chat welcome
   --------------------------------------------------------------- */

/* While the welcome panel is up the message list is empty, and an empty
   flex child would still claim half the column — which left the welcome
   stranded in the top half of the screen. */
.messages:empty {
  flex: 0;
}

.welcome {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  overflow-y: auto;
}

.welcome-mark {
  width: 52px;
  height: 52px;
  fill: var(--brand);
  opacity: 0.9;
}

.welcome h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

.welcome > p {
  color: var(--ink-muted);
  max-width: 48ch;
  font-size: 0.9375rem;
}

/* The two ways in. A new machine has to be sized from a duty point; a
   replacement only needs the serial number off the one already there.
   Asking first saves the customer answering questions about the wrong
   one, so these lead and the examples below are demoted. */
.path-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 40rem;
  margin-top: 0.5rem;
}

.starter-primary {
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border-color: var(--border-strong);
  background: var(--brand-wash);
}

.starter-primary .starter-title {
  font-size: 1rem;
  color: var(--brand);
}

.starter-primary .starter-sub {
  font-family: var(--font-ui);
  color: var(--ink-muted);
}

.starters-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.75rem;
}

/* Three openings, so the first question is never a blank page. Sized to
   sit in one row under the two paths above, and to the same width — a
   wider row with an orphan on the end reads as an accident. */
.starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 40rem;
  margin-top: 0.5rem;
}

.starter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius);
  white-space: normal;
  transition: border-color 0.12s ease, background 0.12s ease,
    transform 0.12s ease;
}

.starter:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.starter-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.starter-sub {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  line-height: 1.45;
}

/* Who is speaking, without an avatar taking up a column. */
.message-sender {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

/* Figures are the substance of a reply: rpm, kW, mbar, dBA, m³/h.
   Setting them in the mono face makes a recommendation read as data
   rather than prose, and keeps columns of them aligned. */
.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  /* A value must never be separated from its unit by a line break, and
     the mono space between them is wider than the prose around it. */
  white-space: nowrap;
  word-spacing: -0.15em;
}

.message {
  animation: rise 0.18s ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .starters { grid-template-columns: 1fr; }
  .welcome h1 { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------
   Loading
   --------------------------------------------------------------- */

/* A table that is still fetching should say so, rather than look like
   a table with nothing in it. */
.loading-row td {
  color: var(--ink-faint);
  font-size: 0.875rem;
  padding-block: 1.1rem;
  text-align: center;
}

.loading-row td::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 1.1s ease-in-out infinite;
  vertical-align: middle;
}

/* The save confirmations sat in the flow and pushed the page down as
   they appeared. Float them instead. */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  animation: rise 0.18s ease-out;
  max-width: calc(100vw - 2rem);
}

/* Data-check findings: one per line, each naming a cell in the
   datasheet. Run together they cannot be read. */
.check-findings {
  margin: 0.4rem 0 0;
  padding-left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.check-findings li {
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------
   Links that read as buttons
   --------------------------------------------------------------- */

.button-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease;
}

.button-link:hover { background: var(--surface-sunken); }

.brand-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

/* ---------------------------------------------------------------
   Signed-in pages: a section strip under the app bar
   --------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.sub-nav {
  display: flex;
  gap: 0.25rem;
  padding-inline: max(1rem, env(safe-area-inset-left, 0px))
    max(1rem, env(safe-area-inset-right, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.sub-nav a {
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.sub-nav a:hover { color: var(--ink); }

.sub-nav a.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.page-main {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left, 0px))
    max(1rem, env(safe-area-inset-right, 0px));
  padding-block: 1.75rem max(2rem, env(safe-area-inset-bottom, 0px));
}

.page-main.narrow { max-width: 44rem; }

.page-head { margin-bottom: 1.25rem; }
.page-head .helper-text { margin-top: 0.35rem; max-width: 60ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.card > h2 { margin-bottom: 0.75rem; }

/* The loyalty standing is the headline of the account page. */
.loyalty-card { border-color: var(--border-strong); }

/* Label-above-value pairs, for figures that support a headline. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 1rem 0 0;
}

.stat-row > div { min-width: 0; }

.stat-row dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stat-row dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Forms: grouping and units
   --------------------------------------------------------------- */

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

legend {
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.stack { display: grid; gap: 0.85rem; }

.field-note {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 0.3rem 0 0;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* The unit belongs to the field, not to the label. */
.input-unit {
  display: flex;
  align-items: stretch;
}

.input-unit input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 0;
}

.input-unit span {
  display: flex;
  align-items: center;
  padding-inline: 0.6rem;
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Sign-in: one card, two tabs
   --------------------------------------------------------------- */

.auth-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
}

.auth-tab {
  background: transparent;
  color: var(--ink-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.6rem 0.8rem;
  font-weight: 500;
}

.auth-tab:hover:not(:disabled) {
  background: transparent;
  color: var(--ink);
}

.auth-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.aside-mark {
  width: 26px;
  height: 26px;
  fill: #fff;
  opacity: 0.9;
}

.auth-aside .brand { align-items: center; }
.auth-aside .brand-name { color: #fff; }

.auth-points li strong {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.auth-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.55);
}

/* ---------------------------------------------------------------
   Quote dialog
   --------------------------------------------------------------- */

.quote-summary {
  background: var(--brand-wash);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.quote-summary h3 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.quote-summary .stat-row { margin-top: 0.6rem; }

#quote-sent { text-align: center; padding-block: 1rem; }

.sent-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 0.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ok-wash);
  border: 1px solid var(--ok);
  color: var(--ok);
  font-size: 1.25rem;
  font-weight: 600;
}

#quote-sent .modal-actions { justify-content: center; }