/* Automir stock list.
 *
 * Hand-written, no build step. The look comes from the company's brand
 * package: tokens.css is copied verbatim from brand_assets/ and every colour,
 * radius and shadow below resolves to one of its tokens. When the brand
 * changes, replace tokens.css and the app follows -- nothing in this file
 * names a hex value.
 *
 * The users are busy traders looking up a number. The table is the product,
 * and its density is deliberate: the brand's 16px body minimum applies to
 * prose and controls, not to a data table that has to fit on a laptop.
 */

@import url("tokens.aeb5428343a9.css");

/* ---------- the brand meets the app ----------
 *
 * The app's own names, resolved to brand tokens. This is the only block a
 * new brand package should need to touch, and usually not even this one. */
:root {
  /* ---- warmth: where we deviate from the kit ----
   * The kit's neutrals are cool blue-greys, made for a website that has
   * photographs to warm it. A page of numbers on that palette reads as
   * clinical, so the ground, the greys and the hairlines here are warm and
   * the blues stay the kit's. These six values are the temperature of the
   * whole app: change them and everything shifts together. Ratios measured:
   * text 13.5:1 and soft text 5.2:1 on the paper, field borders 3.7:1. */
  --paper: #faf8f5;              /* page ground                              */
  --paper-deep: #f2eee8;         /* zebra rows, quiet fills, footer          */
  --ink-warm: #2b2a27;           /* body text                                */
  --ink-warm-soft: #6c6963;      /* labels, captions, units                  */
  --line-warm: #e6e1da;          /* hairlines, card edges                    */
  --line-warm-strong: #8b8479;   /* form-field borders                       */

  --brand: var(--automir-blue);              /* icons, focus, accents         */
  /* Filled buttons take the kit's slate rather than its bright blue: the
   * same family, a step quieter, still 9.8:1 with a white label. */
  --brand-solid: var(--automir-navy-500);
  --brand-solid-hover: var(--automir-navy-700);
  --brand-dark: var(--automir-blue-deep);    /* links, sorted headers         */
  --brand-darker: var(--automir-navy-500);   /* text on a blue tint           */
  --brand-tint: var(--automir-blue-tint);    /* selected rows, chips          */
  --brand-wash: var(--automir-blue-wash);    /* hover bands, callouts         */
  --navy: var(--automir-navy);               /* headings                      */
  --navy-raised: var(--automir-navy-700);

  --neutral: var(--line-warm-strong);
  --neutral-soft: var(--line-warm);
  /* Between the two: a table rule that reads as a rule without becoming a
   * bar. Derived, so it moves with the lines. */
  --rule-strong: color-mix(in srgb, var(--line-warm) 50%, var(--line-warm-strong));
  /* Zebra stripes barely there, as they were. */
  --stripe: color-mix(in srgb, var(--paper-deep) 45%, var(--automir-surface));

  --bg: var(--paper);
  --surface: var(--automir-surface);
  --text: var(--ink-warm);
  --text-soft: var(--ink-warm-soft);

  --warn: var(--automir-warning);
  --warn-bg: var(--automir-warning-bg);
  --warn-line: var(--automir-warning-line);
  --error: var(--automir-danger);
  --error-bg: var(--automir-danger-bg);
  --error-line: var(--automir-danger-line);
  --ok: var(--automir-success);
  --ok-bg: var(--automir-success-bg);
  --ok-line: var(--automir-success-line);

  /* The kit's 9px and 14px corners are for a website. On a page of tables
   * they read as soft; the original 6px sits quieter next to a grid, and it
   * is what the people using this every day asked to keep. Buttons take the
   * same corner, so every control on the page is one shape; only the small
   * badges stay pills. */
  --radius: 6px;                              /* inputs, small controls        */
  --radius-card: 6px;                         /* cards, panels, the table      */
  --radius-pill: var(--automir-radius-pill); /* buttons, badges               */
  --shadow: var(--automir-shadow-sm);
  --shadow-raised: var(--automir-shadow-md);
  --ring: color-mix(in srgb, var(--automir-blue) 18%, transparent);

  --font: var(--automir-font);
  --mono: var(--automir-font-mono);
  --ease: var(--automir-ease);
  --duration: var(--automir-duration);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 15px, as the app always was, not the kit's 16px: the text around a
   * dense table should not outweigh it. Form fields stay at 16px below,
   * because under that iOS Safari zooms the page when a field is focused. */
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

/* Wide enough for the stock table without horizontal scrolling on a laptop,
 * narrow enough that the text pages stay readable. */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* ---------- masthead ---------- */

/* Light, by the company's choice: the brand guide puts navy on the app bar,
 * but the people signing in here look at this bar all day. The coloured
 * lockup sits on white; navy is left to the headings. */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--neutral-soft);
}
.masthead-inner {
  display: flex; align-items: center; gap: 28px; padding-block: 10px;
}
/* The logo lockup is raster and reads down to about 40px tall; below that
 * the wordmark blurs, so the bar does not go smaller than this. */
.wordmark { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.wordmark img { height: 40px; width: auto; display: block; }

/* One row: links on the left, who-you-are on the right. The links may wrap
 * onto a second line before the bar gives up and becomes a menu; ten links
 * for an internal user is a lot of row. */
.masthead-nav {
  display: flex; align-items: center; flex: 1 1 auto; gap: 8px 24px;
  min-width: 0;
}
.nav-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px;
  list-style: none; margin: 0; padding: 0; font-size: 14px;
}
.nav-links a {
  display: inline-block; padding: 6px 0; color: var(--brand-dark);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--ease);
}
.nav-links a:hover { border-bottom-color: var(--neutral); }
/* Where you are. An underline in the brand blue, and the label in ink so it
 * reads as a heading for the page rather than as one more link. */
.nav-links a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
/* Menus. The button looks like its neighbours; the list drops beneath it as
 * a small card. The current page lights its menu the way it lights a link. */
.nav-menu { position: relative; }
.nav-menu > button {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; color: var(--brand-dark);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--ease);
}
.nav-menu > button::after {
  content: ""; display: inline-block; margin-left: 6px; margin-bottom: 2px;
  width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform var(--duration) var(--ease);
}
.nav-menu.open > button::after { transform: rotate(-135deg); margin-bottom: -2px; }
.nav-menu > button:hover { border-bottom-color: var(--neutral); }
.nav-menu > button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.nav-menu > ul {
  display: none; position: absolute; left: -12px; top: calc(100% + 6px); z-index: 20;
  min-width: 230px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--neutral-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-raised);
}
.nav-menu.open > ul { display: block; }
.nav-menu > ul a {
  display: block; padding: 8px 12px; border-bottom: 0; border-radius: 4px;
  white-space: nowrap;
}
.nav-menu > ul a:hover { background: var(--bg); border-bottom: 0; }
.nav-menu > ul a.on { background: var(--brand-tint); color: var(--text); border-bottom: 0; }
.nav-user { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
/* Who you are, and whose prices you are looking at. The company matters
 * because prices attach to it, not to the person -- and a company can have
 * several people signed in. */
.who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.who-name { color: var(--text); font-weight: 600; font-size: 13px; }
.who-org { color: var(--text-soft); font-size: 12px; }
.inline { display: inline; margin: 0; }
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand-dark); font: inherit; font-size: 14px; text-decoration: underline;
}

/* The hamburger: three bars that become a cross. Hidden until the bar is
 * too narrow for the links. */
.nav-burger {
  display: none; flex: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--neutral-soft); border-radius: var(--radius);
  cursor: pointer; flex-direction: column; justify-content: center; gap: 5px;
}
.nav-burger span {
  display: block; height: 2px; background: var(--text); border-radius: 1px;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 1100 rather than a phone width: an internal user has ten links, and
 * between 960 and 1100 they wrap into two rows that split the back-office
 * group. A tablet gets the menu instead. */
@media (max-width: 1100px) {
  .masthead-inner { flex-wrap: wrap; gap: 12px 16px; }
  .nav-burger { display: flex; }
  /* Closed: gone. Open: a panel under the logo row, full width, one link per
   * line at a finger's height, the identity and sign-out at the bottom. */
  .masthead-nav { display: none; }
  .masthead.nav-open .masthead-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    flex-basis: 100%; padding: 4px 0 8px; border-top: 1px solid var(--neutral-soft);
  }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; }
  .nav-links a {
    display: block; padding: 11px 4px; border-bottom: 1px solid var(--neutral-soft);
  }
  .nav-links a:hover { border-bottom-color: var(--neutral-soft); background: var(--bg); }
  .nav-links a.on { border-bottom-color: var(--neutral-soft); box-shadow: inset 3px 0 var(--brand); padding-left: 10px; }
  /* In the panel a menu is a headed section, always open: nesting menus in a
   * menu is one tap too many with a thumb. */
  .nav-menu > button { display: block; width: 100%; text-align: left; padding: 12px 4px 4px;
    font-size: var(--automir-text-xs); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-soft); border: 0; cursor: default; }
  .nav-menu > button::after { display: none; }
  .nav-menu > button.on { color: var(--text-soft); font-weight: 700; }
  .nav-menu > ul, .nav-menu.open > ul {
    display: block; position: static; min-width: 0; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-menu > ul a { padding: 11px 4px; border-bottom: 1px solid var(--neutral-soft); border-radius: 0; white-space: normal; }
  .nav-menu > ul a.on { background: none; box-shadow: inset 3px 0 var(--brand); padding-left: 10px; }
  .nav-user {
    margin: 12px 0 0; justify-content: space-between; align-items: center;
  }
  .who { text-align: left; }
  .link { padding: 10px 4px; }
}

main.wrap { padding-block: 28px 48px; }

/* ---------- demo banner ---------- */

/* The stronger sibling of the dev-data banner: not a caveat, a fault. */
.dev-banner-error { background: var(--error-bg); border-color: var(--error-line); color: var(--error); }
.dev-banner-error code { font-family: var(--automir-font-mono, monospace); }

/* Deliberately loud. Mistaking a seeded price for a quote is the failure this
 * is here to prevent. */
.dev-banner {
  background: repeating-linear-gradient(
    135deg,
    var(--warn-bg), var(--warn-bg) 14px,
    color-mix(in srgb, var(--warn-bg) 88%, var(--warn-line)) 14px,
    color-mix(in srgb, var(--warn-bg) 88%, var(--warn-line)) 28px
  );
  border-bottom: 2px solid var(--warn-line);
  color: var(--warn);
  font-size: 13px;
  padding-block: 9px;
}
.dev-banner strong { letter-spacing: .04em; text-transform: uppercase; }
.dev-banner strong.plain-case { letter-spacing: normal; text-transform: none; }
/* In dev all of it is one line: cut short when narrow, whole on hover. */
.dev-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- headings ---------- */

h1 {
  font-size: calc(var(--automir-text-xl) * 1.1);
  font-weight: var(--automir-weight-bold);
  line-height: var(--automir-leading-tight);
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 4px;
}
.lede { margin: 0; color: var(--text-soft); }
.note { color: var(--text-soft); font-size: 13px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}

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

/* Same corner as the fields they sit beside. The sizes stay the app's own:
 * these live in toolbars, not in a marketing hero. */
.btn {
  display: inline-block; padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--neutral-soft); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px;
  font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.btn:hover { border-color: var(--neutral); background: var(--paper-deep); color: var(--text); }
.btn-primary {
  background: var(--brand-solid); border-color: transparent; color: var(--surface);
}
.btn-primary:hover {
  background: var(--brand-solid-hover); border-color: transparent; color: var(--surface);
}
/* Place order: the one green button, beside the plainer Send enquiry --
 * customers are nudged towards ordering, never kept from asking. */
.btn-order { background: var(--ok); border-color: transparent; color: var(--surface); }
.btn-order:hover {
  background: color-mix(in srgb, var(--ok) 85%, black); border-color: transparent;
  color: var(--surface);
}
.btn-quiet { background: transparent; border-color: transparent;
  color: var(--brand-dark); }
.btn-quiet.on { background: var(--brand-tint); border-color: transparent;
  color: var(--brand-darker); }

/* ---------- filters ---------- */

.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 18px;
}
.filters input[type="search"] { min-width: 280px; flex: 1 1 280px; }

/* 16px is the floor for a form field: below it iOS Safari zooms the page
 * when the field is focused. The border is the strong hairline on purpose --
 * it is the only thing telling a low-vision user where the field is. */
input[type="search"], input[type="email"], input[type="password"],
input[type="text"], select {
  padding: 8px 12px; border: 1px solid var(--neutral); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--automir-text-base);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
/* Never removed. Keyboard users find their place with this. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px;
}

/* ---------- table ---------- */

.table-scroll {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--neutral-soft); border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td {
  padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--neutral-soft);
  vertical-align: middle; line-height: 1.35; white-space: nowrap;
}
/* Only the description may wrap, and only when it has to. */
table.data td.wrap { white-space: normal; min-width: 14em; }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  padding-block: 7px;
  background: var(--surface); border-bottom: 2px solid var(--rule-strong);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft); font-weight: 700;
  /* A label like "price per package" would otherwise set the width of a
   * column holding six characters, so headers wrap and the cells do not.
   * min-content stops a single long word being squeezed, and the trailing
   * letter-space it forgets to count is absorbed by the extra padding. */
  white-space: normal; text-wrap: balance; vertical-align: bottom;
  min-width: min-content; padding-inline-end: 13px;
}
/* Numeric columns hold short values under long labels -- "price per package"
 * over "43.20". Capping the header width makes them wrap rather than setting
 * the width of the column. min-content above keeps a single word intact. */
table.data thead th.num { max-width: 7em; }
table.data thead th a { color: inherit; text-decoration: none; }
table.data thead th a:hover { color: var(--brand-dark); }
table.data thead th a.sorted { color: var(--brand-dark); }
/* Dense rows are hard to track across ten columns; a barely-there stripe
 * keeps the eye on the line without turning the table into a grid. */
table.data tbody tr:nth-child(even) { background: var(--stripe); }
table.data tbody tr:hover { background: var(--brand-wash); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot th {
  padding: 10px 12px; border-top: 2px solid var(--rule-strong);
  font-size: 13px; background: var(--bg);
}

/* Numerals line up in columns; that is most of what makes a price table
 * scannable. */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.sub { color: var(--text-soft); font-size: 12px; }
.unit { color: var(--text-soft); font-size: 12px; }
/* Inputs sitting in a table row must not set the row height. The 16px floor
 * above is for fields a phone user types into; these are desktop grid cells. */
table.data input[type="text"] { padding: 3px 7px; font-size: 13px; border-radius: 5px; }
table.data input[type="text"]:focus { box-shadow: 0 0 0 2px var(--ring); }
.on-request { color: var(--warn); font-size: 13px; }
th.check, td.check { text-align: center; }
table.editable .qty { width: 8em; text-align: right;
  font-variant-numeric: tabular-nums; }
table.editable tr.is-stocked { background: color-mix(in srgb, var(--ok-bg) 55%, var(--surface)); }
table.editable tr.is-custom { background: var(--brand-wash); }
/* Hidden from the company: greyed and struck through; its box stays clear. */
table.editable tr.is-hidden td:not(:last-child) { color: var(--text-soft); text-decoration: line-through; }
table.data tr.stale td { color: var(--text-soft); }
/* The row a link from Supply opens at. */
table.data tr:target td, table.data tr.is-chosen td { background: var(--brand-tint); }
table.editable .note-input { width: 12em; }
table.editable .expected { width: 9em; text-align: left; margin-top: 4px; display: block; }
table.editable input::placeholder { color: var(--text-soft); opacity: .6; font-style: italic; }

.badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.badge-in { background: var(--ok-bg); color: var(--ok); }
.badge-soon { background: var(--warn-bg); color: var(--warn); }
table.data th.status, table.data td.status { white-space: nowrap; }
.badge-yours { background: var(--brand-tint); color: var(--brand-darker); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.warn-link { color: var(--warn); }

/* Section labels take the brand's eyebrow: small caps, tracked, in the
 * deep blue. */
.sub-head {
  font-size: var(--automir-text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-dark); margin: 26px 0 8px;
}
.sample {
  background: var(--bg); border: 1px solid var(--neutral-soft);
  border-radius: var(--radius); padding: 12px; overflow-x: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
}
ul.plain { list-style: none; padding: 0; margin: 0; font-size: 14px; }
ul.plain li { padding: 4px 0; border-bottom: 1px solid var(--neutral-soft); }
.check-label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
input[type="file"] { font: inherit; font-size: 14px; }
textarea {
  padding: 8px 12px; border: 1px solid var(--neutral); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--automir-text-base);
  width: 100%; resize: vertical;
}

/* ---------- enquiry ---------- */

.enquiry-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--neutral-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
}
.enquiry-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.enquiry-message { flex: 1 1 260px; padding-block: 6px; }
table.data .qty-small { width: 5.5em; }

/* ---------- pagination ---------- */

.pagination {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  margin-top: 18px; font-size: 14px;
}
.pagination a { color: var(--brand-dark); }
.pagination .disabled { color: var(--neutral); }
.page-of { color: var(--text-soft); }

/* ---------- cards, forms, messages ---------- */

/* Borders before shadows: a card is a white box with a hairline and a
 * barely-there shadow, which is how the website does it. */
.card {
  background: var(--surface); border: 1px solid var(--neutral-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 28px;
}
.card-narrow { max-width: 380px; margin: 40px auto; }
/* A page of prose rather than a table: readable measure, headings that group
 * rather than shout. */
.card-prose { max-width: 42em; }
.card-prose h2 {
  font-size: var(--automir-text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-dark); margin: 22px 0 4px;
}
.card-prose h2:first-child { margin-top: 0; }
.card-prose p, .card-prose address { margin: 0; font-style: normal; }
.stack { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.stack label { font-size: .92rem; font-weight: 600; color: var(--navy); margin-top: 8px; }
.stack button { margin-top: 18px; }
.btn-block { display: block; width: 100%; text-align: center; }
.note-tight { margin: 6px 0 0; }

/* A labelled rule between the two ways of signing in. */
.or {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 4px; color: var(--text-soft); font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em;
}
.or::before, .or::after {
  content: ""; flex: 1; height: 1px; background: var(--neutral-soft);
}

.dev-logins { display: flex; flex-direction: column; gap: 4px; }
.dev-logins .btn { text-align: left; }

table.format-table { font-size: 13px; }
table.format-table td:first-child { color: var(--text-soft); }

.upload-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px;
}
.upload-row label {
  display: block; font-size: .92rem; font-weight: 600; color: var(--navy);
  margin-bottom: 4px;
}
input[type="date"] {
  padding: 8px 12px; border: 1px solid var(--neutral);
  border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--automir-text-base);
}

.actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.empty {
  background: var(--surface); border: 1px dashed var(--neutral);
  border-radius: var(--radius-card); padding: 40px; text-align: center;
  color: var(--text-soft);
}

/* Status messages carry a coloured edge rather than a coloured box, as the
 * website's form messages do. */
.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.msg {
  padding: 10px 14px; margin-bottom: 8px; font-size: 14px;
  border-left: 3px solid var(--neutral);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg);
}
.msg-success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.msg-error { background: var(--error-bg); border-color: var(--error-line); color: var(--error); }
.msg-info { background: var(--brand-wash); border-color: var(--brand); }
.msg-warning { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* ---------- footer ---------- */

/* Two links, the legal minimum, on the same warm ground as the page. */
.foot {
  background: var(--paper-deep); color: var(--text-soft);
  border-top: 1px solid var(--neutral-soft);
  font-size: 13px; padding-block: 20px 28px; line-height: 1.6;
}
.foot a { color: inherit; }
.foot a:hover { color: var(--brand-dark); }

/* ---------- touch ---------- */

/* Fingers need 44px; mice do not. Enforced only where there is a finger, so
 * the desktop stays as dense as it is. */
@media (pointer: coarse) {
  .btn, .nav-links a, .nav-menu > button, .link, .foot a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

@media (max-width: 640px) {
  .page-head { align-items: stretch; }
  .filters input[type="search"] { min-width: 0; }
  table.data th, table.data td { padding: 5px 8px; }
  .wordmark img { height: 36px; }
}

/* The email, shown before it is sent. Plain text, so shown as plain text. */
.email-preview { border: 1px solid var(--neutral-soft); border-radius: 6px; background: var(--bg); margin-top: 10px; }
.email-preview .email-head { padding: 10px 14px; border-bottom: 1px solid var(--neutral-soft); display: grid; gap: 2px; font-size: 0.92rem; }
.email-preview .email-head .sub { display: inline-block; min-width: 88px; }
.email-preview pre { margin: 0; padding: 14px; font: inherit; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* The global mail switch, when off. Same shape as the dev banner, in red. */
.mail-off-banner {
  background: repeating-linear-gradient(
    135deg,
    var(--error-bg), var(--error-bg) 14px,
    color-mix(in srgb, var(--error-bg) 88%, var(--automir-danger-line)) 14px,
    color-mix(in srgb, var(--error-bg) 88%, var(--automir-danger-line)) 28px
  );
  border-bottom: 2px solid var(--automir-danger-line);
  color: var(--automir-danger);
  padding: 8px 0;
  font-size: 0.92rem;
}
.mail-off-banner strong { letter-spacing: .04em; text-transform: uppercase; }
.mail-off-banner code { font-size: 0.9em; }

/* A superuser looking through a customer's eyes. Loud on purpose. */
.viewing-as-banner {
  background: var(--automir-navy); color: #fff; padding: 8px 0; font-size: 0.92rem;
}
.viewing-as-banner .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewing-as-banner form { margin-left: auto; }
.viewing-as-banner .btn-quiet { color: #fff; border-color: rgba(255,255,255,.5); }

/* ---------- price lists: toolbar, folder tabs, the table they sit on ---------- */

/* What applies to the whole page -- validity, search -- sits above the tabs,
 * so the tabs touch the table they switch. */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px;
}
.toolbar .filters { margin: 0; flex: 1 1 320px; justify-content: flex-end; }
/* The search with its clear always showing: one place to look, whatever the
 * browser would have drawn on its own. */
.search-box { position: relative; flex: 1 1 280px; display: flex; }
.search-box input[type="search"] { width: 100%; min-width: 0; padding-right: 38px; }
.search-box input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft); background: var(--paper-deep); text-decoration: none;
  font-size: 18px; line-height: 1;
}
.search-clear:hover { background: var(--error-bg); color: var(--error); }
.lists { min-width: 0; }
.toolbar .tab-note { flex: 1 1 280px; }

/* Brand pills. Every pill has the same box in every state -- the border is
 * always there, only its colour changes -- so choosing one never moves its
 * neighbours, and a second row of brands stays put. The chosen pill is
 * filled in the brand tint; the others sit quietly on the paper's deeper
 * tone. Pills float a little above the table rather than touching it, so a
 * pill in an upper row is no less "on" than one directly above the table. */
.tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 2px; margin-bottom: 10px;
}
.tabs a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 13px; border: 1px solid var(--neutral-soft);
  border-radius: var(--radius-pill);
  background: var(--paper-deep); color: var(--text-soft);
  font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.tabs a:hover { background: var(--brand-wash); color: var(--text); border-color: var(--neutral); }
.tabs a .tab-count { font-size: 11px; font-weight: 500; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tabs a.on {
  background: var(--brand-tint); color: var(--navy); border-color: var(--brand);
}
.tabs a.on .tab-count { color: var(--brand-darker); }
.tabs a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tabbed .empty { margin: 0; padding: 28px; }
/* A mailing's text in one language at a time; .stack would show it anyway. */
.language-text[hidden] { display: none; }

@media (max-width: 640px) {
  .tabs { gap: 5px; }
  .tabs a { padding: 5px 10px; font-size: 13px; }
  .toolbar .filters { justify-content: stretch; }
}

/* Selecting for a request. Desktop first: the lists on the left, the request
 * building up on the right, in a panel that stays put while the table
 * scrolls. The page takes a wider container for it; thousands of rows are a
 * desk job. Below the split the panel simply follows the table. */
.wrap-wide { max-width: 1800px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.request-panel {
  position: sticky; top: 16px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--neutral-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 32px);
}
.request-panel.has-selection { border-color: var(--brand); }
.select-count { margin: 0; font-weight: 600; }
.panel-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.panel-list:empty { display: none; }
.panel-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--neutral-soft); font-size: 13px; line-height: 1.35;
}
.panel-item:first-child { border-top: 0; }
.panel-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.panel-brand { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-soft); text-transform: uppercase; }
.panel-desc { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; }
.panel-remove {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--neutral-soft); background: var(--surface); color: var(--text-soft);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.panel-remove:hover { background: var(--error-bg); color: var(--error); border-color: var(--error-line); }
table.data td.check input, table.data th.check input { width: 16px; height: 16px; accent-color: var(--brand); }
table.data tbody tr:has(input.pick:checked) { background: var(--brand-tint); }
.btn-small { padding: 3px 9px; font-size: 13px; }
table.data tr.is-manual td { background: color-mix(in srgb, var(--warn-bg) 45%, var(--surface)); }
table.data thead th.group { text-align: center; border-bottom: 1px solid var(--neutral-soft); }
table.data td.group-start, table.data thead tr:last-child th.num:is(:nth-child(1), :nth-child(4), :nth-child(8)) { border-left: 1px solid var(--neutral-soft); }
table.data .line-note { width: 16em; padding: 3px 7px; font-size: 13px; border-radius: 5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .request-panel { position: static; max-height: none; }
  .panel-list { max-height: 240px; }
}

/* The sign-in page: the card first, the context beside it on a desk and
 * below it on a phone. */
.welcome { max-width: 900px; margin: 28px auto 20px; }
.welcome h1 { margin-bottom: 4px; }
.signin-layout {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 40px; align-items: start; max-width: 900px; margin: 0 auto 40px;
}
.signin-card { margin: 0; }
.signin-title { margin-top: 0; }
.signin-about section + section { margin-top: 22px; }
.signin-about .sub-head { margin-top: 0; }
.signin-about p { margin: 6px 0 0; color: var(--text-soft); line-height: 1.55; }
@media (max-width: 760px) {
  .signin-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .welcome { margin-top: 12px; }
}

/* The general mailing page: the message beside its reference, the preview
 * as the mail program would show it. */
.compose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.compose-help .sub-head:first-child { margin-top: 0; }
table.data.compact td { padding: 4px 8px; font-size: 13px; }
/* The descriptions wrap, so a long one cannot push the column off the page. */
.compose-help table.data.compact td.sub { white-space: normal; }
.compose-layout textarea { width: 100%; min-height: 18em; font-family: inherit; line-height: 1.5; }
.audience-options { margin: 4px 0 8px 26px; }
.audience-table { max-height: 22rem; overflow-y: auto; }
.preview-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.preview-head select { flex: 1 1 260px; min-width: 0; max-width: 100%; }
.mail-head { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.mail-head dt { color: var(--text-soft); }
.mail-head dd { margin: 0; overflow-wrap: anywhere; }
.mail-preview { width: 100%; height: 520px; border: 1px solid var(--neutral-soft); border-radius: var(--radius-card); background: #fff; }
.recipient-list { margin-top: 14px; }
@media (max-width: 900px) { .compose-layout { grid-template-columns: minmax(0, 1fr); } }

/* Emails: the index of every email on the left, the one chosen on the right. */
.email-library { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.email-index ul { margin: 0 0 14px; }
.email-index li a { display: block; padding: 4px 8px; border-radius: var(--radius-card); color: var(--text); text-decoration: none; }
.email-index li a:hover { background: var(--brand-wash); }
.email-index li a.on { background: var(--brand-tint); color: var(--navy); font-weight: 600; }
.email-title { margin: 0 0 2px; font-size: 20px; }
.email-shown .tabs { margin: 10px 0 0; }
.email-shown .card { margin-top: 12px; }
@media (max-width: 900px) { .email-library { grid-template-columns: minmax(0, 1fr); } }

/* Add customers: the permissions box, the entry grid, the upload below. */
.sub-head.sub-head-first { margin-top: 0; }
.permission-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; margin: 4px 0 8px; }
.entry-card { margin-top: 16px; }
.entry-grid { width: 100%; border-collapse: collapse; }
.entry-grid th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); padding: 0 6px 6px; }
.entry-grid td { padding: 3px 6px; }
.entry-grid input { width: 100%; }
.upload-card { margin-top: 16px; }
.upload-card summary { cursor: pointer; }
.permission-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; margin: 0; }
.company-check p { margin: 0 0 4px; }
@media (max-width: 700px) {
  .entry-grid thead { display: none; }
  .entry-grid tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--neutral-soft); padding: 6px 0; }
  .entry-grid td:first-child, .entry-grid td:last-child { grid-column: 1 / -1; }
}

/* Inbound -> Enquiries: each enquiry's emails, one line each; what went
   wrong in the warning colour, so a missing email is found by eye. */
.inbound-mails { min-width: 22em; font-size: 13px; }
.inbound-mails div + div { margin-top: 4px; }
.inbound-mails .warn-text { color: var(--warn); }

/* Manage spot offers: the chosen offer's state and what can be done to it. */
/* Manage spot offers: the chosen offer's details open below the overview,
 * set apart by a tint and a blue edge, so the two never read as one table. */
.detail-panel {
  margin-top: 28px; padding: 20px 22px 22px; background: var(--brand-wash);
  border: 1px solid var(--neutral-soft); border-top: 4px solid var(--brand);
  border-radius: var(--radius-card); scroll-margin-top: 12px;
}
.detail-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.detail-head h2 { margin: 0 0 4px; font-size: 22px; }
.detail-head p { margin: 0; }
.detail-head .actions { display: flex; gap: 8px; align-items: center; margin: 0; }

/* Usage, a line per customer and day: the summary opens onto the steps. */
.usage-days details summary { cursor: pointer; }
.usage-days .usage-steps { margin: 6px 0 0; font-size: 13px; }
.usage-days .usage-steps li + li { margin-top: 2px; }
/* A list of names with a few short numbers: as wide as it needs, so the
 * numbers stay next to their name; its filter field as wide as the table. */
.narrow-list { width: fit-content; max-width: 100%; }
.narrow-list table.data { width: auto; }
/* Headings that sort say so: dotted, with a faint arrow both ways until
 * one is the sort, which then shows its own arrow. */
table.data.sortable thead th a { text-decoration: underline dotted; text-underline-offset: 3px; }
table.data.sortable thead th a:not(.sorted)::after { content: " \2195"; opacity: .75; font-size: 1.15em; }
/* Room enough that no heading wraps: the cap on numeric headings above is
 * for tables wide with columns, not this one. */
.narrow-list table.data th { white-space: nowrap; }
.narrow-list table.data th.num { max-width: none; min-width: 9em; }
.narrow-list table.data th:first-child { min-width: 22em; }
@media (max-width: 640px) {
  .narrow-list table.data th.num, .narrow-list table.data th:first-child { min-width: 0; }
}