/* requests.xseonline.com — plain, legible, no framework, no build step.
 *
 * Palette sampled from the XSE GROUP master logo
 * ("XSE Logo Files\XSE GROUP_tag 4C no SHAD.png"), not guessed:
 *   orange #F58220 · red #ED2024 · dark grey #58585A · light grey #B2B3B6
 *
 * The bright brand orange is decoration only — it is 2.59:1 on white, which
 * fails WCAG for text or controls. Anything interactive uses the deeper
 * --brand (#B4470A, 5.46:1 on white), which reads as the same colour family.
 */

:root {
  --ink: #2b2b2d;          /* 14.1:1 on white */
  --muted: #6e6f72;        /*  5.0:1 on white */
  --line: #d9dadc;
  --bg: #f4f4f5;
  --card: #ffffff;

  /* The most vivid orange that still clears 4.5:1 with white text — anything
   * brighter fails, anything darker reads brown rather than XSE orange. */
  --brand: #c2540c;        /* interactive: buttons, links   4.60:1 on white */
  --brand-dark: #994109;
  --brand-tint: #fdf1e8;

  --accent: #f58220;       /* logo orange — decoration only */
  --accent-red: #ed2024;   /* logo red — decoration only */

  /* Supply level status. Validated as a trio: adjacent-pair CVD separation,
   * chroma, lightness band and contrast all pass. Hue is never the only
   * channel — the bar's own length encodes the same value, and every bar
   * carries its percentage and a sentence of plain-English reason. */
  --ok: #1a7f37;
  --warn: #e0a800;
  --bad: #b32318;

  --ok-bg: #e9f5ec;
  --warn-bg: #fdf4e0;
  --bad-bg: #fdecea;
  --info-bg: #f2f4f6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* --- header: the logo on white, over the tagline bar's red-to-orange --- */
.topbar {
  background: #fff;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--accent-red), var(--accent)) 1;
  padding: 14px 0 12px;
  margin-bottom: 26px;
}
.topbar .wrap {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 46px; width: auto; }
.tagline {
  color: var(--muted); font-size: 14px;
  border-left: 1px solid var(--line); padding-left: 16px;
}
@media (max-width: 520px) {
  .tagline { border-left: 0; padding-left: 0; }
  .brand img { height: 38px; }
}

h1 { font-size: 25px; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 26px 0 10px; }
h3 { font-size: 16px; margin: 20px 0 8px; }
.lede { color: var(--muted); margin: 0 0 22px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 18px;
}

/* --- forms --- */
label { display: block; font-weight: 600; margin-bottom: 5px; }
.hint { font-weight: 400; color: var(--muted); font-size: 13.5px; margin: 3px 0 0; }

input[type=text], input[type=tel], input[type=email], input[type=number], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #c7c8cb;
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus, input[type=checkbox]:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--brand);
}
textarea { min-height: 130px; resize: vertical; }

.field { margin-bottom: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > .field { flex: 1 1 220px; }

fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }

.choice {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 13px; margin-bottom: 8px; background: #fff; cursor: pointer;
}
.choice:hover { border-color: var(--brand); background: var(--brand-tint); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.choice input { margin-top: 3px; flex: none; accent-color: var(--brand); }
.choice .what { font-weight: 600; }
.choice .why { color: var(--muted); font-size: 13.5px; }

button, .btn {
  display: inline-block;
  background: var(--brand); color: #fff;
  border: 0; border-radius: 6px;
  padding: 11px 20px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { background: var(--brand-dark); }
.btn-secondary { background: #fff; color: var(--brand); border: 1px solid #c7c8cb; }
.btn-secondary:hover { background: var(--brand-tint); }
.actions { margin-top: 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* honeypot: off-screen, not display:none, so bots that check visibility still fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- banners --- */
.banner { border-radius: 6px; padding: 12px 15px; margin-bottom: 14px; border-left: 4px solid; }
.banner p:last-child { margin-bottom: 0; }
.banner p:first-child { margin-top: 0; }
.banner-bad  { background: var(--bad-bg);  border-color: var(--bad); }
.banner-warn { background: var(--warn-bg); border-color: #a97800; }
.banner-info { background: var(--brand-tint); border-color: var(--accent); }
.banner-ok   { background: var(--ok-bg);   border-color: var(--ok); }

.errors { margin: 0; padding-left: 20px; }

/* --- equipment panel --- */
.equip dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
.equip dt { color: var(--muted); }
.equip dd { margin: 0; font-weight: 600; }

/* --- ship-to: a shipping label, with the form folded away behind it --- */
.shiplabel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: #fcfcfd;
  padding: 14px 16px;
  margin: 10px 0 4px;
  max-width: 24rem;
  line-height: 1.4;
}
.shiplabel span { display: block; }
.shiplabel .ship-co { font-weight: 600; }

details.shipedit { margin-top: 6px; }

/* The clickable text is an inner <span> so that `display` is never overridden
   on the <summary> itself. Chrome tolerates that override fine (measured),
   but it is a long-standing cross-browser footgun — Safari has mishandled it
   — and styling the span costs nothing. */
details.shipedit > summary {
  cursor: pointer;
  padding: 4px 2px;
  list-style: none;
}
details.shipedit > summary::-webkit-details-marker { display: none; }
details.shipedit > summary > span {
  color: var(--brand);
  font-size: 14px;
}
details.shipedit > summary > span::before {
  content: "\25B8\00a0";      /* small right triangle */
  display: inline-block;
  transition: transform .12s ease;
}
details.shipedit[open] > summary > span::before { transform: rotate(90deg); }
details.shipedit > summary:hover > span {
  color: var(--brand-dark); text-decoration: underline;
}
details.shipedit > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
details.shipedit[open] > summary { margin-bottom: 12px; }

/* --- supply item table --- */
h3.itemgroup {
  margin: 22px 0 4px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}
/* Not-yet items wear a quiet padlock instead of a disabled checkbox --
   "locked for now", not "broken". */
svg.lock { fill: #b7b8bb; display: block; }

table.items { width: 100%; border-collapse: collapse; }
table.items th, table.items td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.items th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table.items tr.off { background: #fafafb; color: var(--muted); }
table.items td.pick { width: 34px; }
table.items td.pick input { accent-color: var(--brand); width: 17px; height: 17px; }
table.items td.runsout { width: 132px; }
.whenout { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
td.runsout .pct { display: block; }

/* An item that isn't due yet is disabled server-side; make that unmistakable
   rather than leaving something that looks selectable. */
input:disabled {
  background: #f1f1f2; color: #9a9b9e; border-color: #e0e1e3;
  cursor: not-allowed;
}
input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
.itemname { font-weight: 600; }
.itemsub { color: var(--muted); font-size: 13px; }
.reason { color: var(--muted); font-size: 13px; }

/* Level meters. The FILL LENGTH carries the value; colour only reinforces it,
 * and the percentage is printed alongside. Nothing here depends on hue alone.
 * The 1px inset keeps the light amber fill defined against a white card. */
.bar {
  background: #eceded; border-radius: 4px; height: 10px; width: 140px;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09);
}
.bar > span { display: block; height: 100%; border-radius: 4px; }
.bar-ok   > span { background: var(--ok); }
.bar-warn > span { background: var(--warn); }
.bar-bad  > span { background: var(--bad); }
.bar-none { background: repeating-linear-gradient(45deg,#eceded,#eceded 4px,#dedfe1 4px,#dedfe1 8px); }
.pct { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--muted); white-space: nowrap; }

/* Four columns do not fit a phone -- at 375px the item name collapses to one
   word per line and the qty box falls off the edge. Below 640px each row
   becomes its own card instead, with the checkbox pulled out to the left. */
@media (max-width: 640px) {
  table.items thead { position: absolute; left: -9999px; }
  table.items, table.items tbody, table.items tr, table.items td {
    display: block; width: 100%;
  }
  table.items tr {
    position: relative;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 12px 12px 12px 44px; margin-bottom: 10px;
  }
  table.items tr.off { background: #fafafb; }
  table.items td { border: 0; padding: 2px 0; }
  table.items td.pick {
    position: absolute; left: 13px; top: 13px; width: auto; padding: 0;
  }
  table.items td.runsout {
    width: auto; margin-top: 6px;
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  }
  table.items td.runsout::before {
    content: "Est. runs out"; color: var(--muted); font-size: 13.5px;
  }
  td.runsout .pct { display: inline; }
  .bar { width: 100%; max-width: 220px; }
}

/* --- self-help interstitials --- */
.selfhelp-photo {
  display: block; max-width: 340px; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 4px;
}

/* --- misc --- */
.foot {
  color: var(--muted); font-size: 13.5px; padding-bottom: 40px;
  margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px;
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.matchlist { list-style: none; padding: 0; margin: 0; }
.matchlist li { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: #fff; }
.matchlist button {
  width: 100%; text-align: left; background: #fff; color: var(--ink);
  font-weight: 400; padding: 13px 15px; border-radius: 6px;
}
.matchlist button:hover { background: var(--brand-tint); }
.matchlist strong { display: block; }
.ref { font-size: 30px; font-weight: 700; color: var(--brand); }
code { background: #eef0f1; padding: 1px 5px; border-radius: 4px; font-size: 13.5px; }

/* --- customer portal shell (Phase 58, 2026-09-03) ---------------------
 * base.html wraps any page in this grid when the visitor carries a valid
 * portal cookie. Left rail on desktop; under 900px the rail becomes a
 * wrapped row of pills above the content. The main column is wider than
 * the request forms' 860px because the fleet tables need the room. */
.wrap.portal {
  max-width: 1560px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.wrap.portal-head { max-width: 1560px; }
.pmain { min-width: 0; }
.pnav {
  position: sticky; top: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 0 10px; font-size: 14.5px;
}
/* Section titles are labels, links are links (RD 2026-09-03: the two were
 * too alike). Titles: small caps, dark grey, a rule above, never a hover.
 * Links: brand colour, indented (no marker - RD 2026-09-03), underline on hover. */
.pnav .grp {
  margin-top: 8px; padding: 10px 16px 3px; border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #58585a;
}
.pnav a {
  display: block; position: relative; padding: 5px 14px 5px 27px;
  color: var(--brand); text-decoration: none; border-left: 3px solid transparent;
}
.pnav a.top { font-weight: 600; margin-top: 4px; }
.pnav a:hover { background: var(--brand-tint); color: var(--brand-dark); text-decoration: underline; }
.pnav a.on {
  border-left-color: var(--accent); background: var(--brand-tint);
  font-weight: 700; color: var(--brand-dark);
}
@media (max-width: 900px) {
  .wrap.portal { display: block; }
  .pnav {
    position: static; display: flex; flex-wrap: wrap; gap: 3px;
    padding: 8px; margin-bottom: 16px;
  }
  .pnav .grp { display: none; }
  .pnav a { padding: 5px 11px; border-left: 0; border-radius: 999px; font-size: 13.5px; }
    .pnav a.on { background: var(--brand); color: #fff; }
}

/* summary tiles */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0 0 20px;
}
.tile {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; text-decoration: none; color: var(--ink);
}
.tile:hover { border-color: var(--accent); color: var(--ink); }
.tile .n { font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .n .of { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.tile .l { color: var(--muted); font-size: 13px; margin-top: 3px; }
.tile.ok .n { color: var(--ok); }
.tile.bad .n { color: var(--bad); }
.tile.soon .n { color: #c9cacc; }
.tile.soon .l span { color: #b7b8bb; }
.soon-card { font-size: 13.5px; color: var(--muted); border-left: 4px solid #d9dadc; }


/* --- device catalog (Phase 65, 2026-09-03) ---------------------------- */
.cbar { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-end; margin-bottom: 12px; }
.cf { display: flex; flex-direction: column; gap: 5px; }
.cf > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cseg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.cseg button { border: 0; background: transparent; color: var(--ink); padding: 5px 13px; font: inherit; font-size: 13.5px; cursor: pointer; border-radius: 0; }
.cseg button:hover { background: var(--brand-tint); }
.cseg button.on { background: var(--brand); color: #fff; font-weight: 600; }
.cf input { width: 130px; padding: 6px 10px; }
.cview { margin-left: auto; }
.ccount { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ccard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.ccard.fit { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-bg); }
.cfit { position: absolute; top: 10px; left: 10px; background: var(--ok-bg); color: var(--ok); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.cpic { height: 150px; display: flex; align-items: flex-end; justify-content: center; background: #f7f8fa; padding: 10px; }
.cpic img { max-height: 130px; max-width: 85%; object-fit: contain; }
.cbody { padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cname { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.2; }
.cchips { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11.5px; }
.cchip { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.cchip.c { border-color: transparent; background: #e8eef7; color: #1a3d6d; font-weight: 600; }
.crates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.crates div span { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.crates b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cvol { font-size: 12.5px; color: var(--muted); }
.cvol b { color: var(--ink); }
.cfp { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font-size: 12px; align-self: flex-start; }
.cfp button { border: 0; background: transparent; color: var(--muted); padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; border-radius: 0; }
.cfp button.on { background: #e8eef7; color: #1a3d6d; font-weight: 700; }
.cprice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f7f8fa; border-radius: 6px; padding: 8px 10px; }
.cprice div span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cprice .n { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cprice .n small { font-size: 11px; font-weight: 400; color: var(--muted); }
.cprice code { background: transparent; padding: 0; font-size: 11px; color: #1a3d6d; font-weight: 600; }
.cacts { display: flex; gap: 8px; padding: 8px 14px 14px; }
.cbtn { flex: 1; text-align: center; padding: 8px 6px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--brand); color: var(--brand); cursor: pointer; background: transparent; font-family: inherit; }
.cbtn.p { background: var(--brand); color: #fff; }
.cbtn:hover { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.cempty { padding: 30px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 8px; }
.ctable { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 700px; }
.ctable th { background: #1a3d6d; color: #fff; padding: 7px 8px; text-align: center; white-space: nowrap; }
.ctable th:first-child { text-align: left; }
.ctable td { padding: 6px 8px; text-align: center; border-top: 1px solid #e3e8ef; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ctable td:first-child { text-align: left; font-weight: 600; }
.ctable tr.sku td { background: #e8eef7; color: #1a3d6d; font-weight: 600; font-size: 12px; }
.ctable tr.grp td { background: #1a3d6d; color: #fff; text-align: left; font-size: 12.5px; }
.cdlg { border: 1px solid var(--line); border-radius: 10px; padding: 0; max-width: 520px; width: 92%; background: var(--card); color: var(--ink); }
.cdlg::backdrop { background: rgba(0, 0, 0, .45); }
.cdlg-in { padding: 18px 22px; }
.cdlg-in h2 { margin: 0 0 6px; font-size: 19px; }
.cdlg-in ol { padding-left: 20px; line-height: 1.7; margin: 0; }
.cdlg-in code { background: #e8eef7; color: #1a3d6d; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
@media (max-width: 900px) { .cview { margin-left: 0; } }
@media (prefers-reduced-motion: no-preference) { .ccard { transition: transform .12s ease; } .ccard:hover { transform: translateY(-2px); } }