/* ==========================================================================
   Stone Age Software — the help desk (/support) and the homepage widget
   ==========================================================================

   THE THEME, AS TOKENS
   --------------------
   One token set, `--sas-*`, defined here and nowhere else. It is read from
   the Living Fluid Glass palette (glass/src/glass.css's @theme: the void
   navy, the ink, the cyan of the homepage) so the desk reads as the same
   building as every other page, and it adds the four priority colours and
   the status colours the desk needs. Semantic names, not colour names: a
   template says `--sas-p1`, never "crimson", so the palette can move without
   a template edit. Typography is the site's: Sora for anything that names a
   thing (a heading, a count), JetBrains Mono for the machine's words (a
   ticket number, a chip, a column head), Inter for everything read as prose.

   This file is unlayered and loads after glass.css, so anything it sets
   beats the glass layers. That is why it no longer paints form fields: the
   portal's inputs are the homepage LeadForm's wells, from site.css's .field
   rules, and setting a background here is what turned them into black slots.
   The cards are the site's flat tiles (no backdrop filter: the nav island is
   the page's one live blur), and nothing here animates anything but
   transform and opacity. Priority is the only thing that gets a saturated
   colour. */

:root {
  /* Surfaces — the void */
  --sas-obsidian:     var(--color-void-900, #080a0f);   /* the canvas */
  --sas-basalt:       var(--color-void-800, #0c1017);   /* bands */
  --sas-slate:        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), rgba(12, 16, 23, 0.78); /* cards: the flat dense tile */
  --sas-slate-2:      rgba(255, 255, 255, 0.04);        /* wells inside a card */
  --sas-slate-3:      rgba(255, 255, 255, 0.07);        /* a well under the hand */
  --sas-edge:         rgba(255, 255, 255, 0.08);        /* hairlines */
  --sas-edge-lit:     rgba(255, 255, 255, 0.12);
  --sas-ring:         inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Text — ink on glass */
  --sas-chalk:        var(--color-ink, #e9eef5);
  --sas-steel:        var(--color-steel, #c4d2dc);
  --sas-ash:          var(--color-ink-muted, #a3b1c2);

  /* The one accent — the homepage's cyan */
  --sas-teal:         var(--color-cyan, #38bdf8);
  --sas-teal-2:       var(--color-cyan-soft, #7dd3fc);
  --sas-teal-deep:    var(--color-cobalt, #2563eb);
  --sas-teal-soft:    rgba(56, 189, 248, 0.14);
  --sas-ring-teal:    inset 0 0 0 1px rgba(56, 189, 248, 0.45);

  /* Priority — the only saturated colours on the desk */
  --sas-p1:           var(--color-crimson-soft, #fb7185);   /* Critical */
  --sas-p2:           var(--color-amber-soft, #fbbf24);     /* High */
  --sas-p3:           var(--sas-teal-2);                    /* Moderate */
  --sas-p4:           var(--sas-steel);                     /* Low */
  --sas-p1-soft:      rgba(251, 113, 133, 0.14);
  --sas-p2-soft:      rgba(251, 191, 36, 0.13);
  --sas-p3-soft:      var(--sas-teal-soft);
  --sas-p4-soft:      rgba(196, 210, 220, 0.1);

  /* Status */
  --sas-ok:           #6fd3a3;
  --sas-ok-soft:      rgba(111, 211, 163, 0.14);
  --sas-wait:         var(--sas-p2);
  --sas-wait-soft:    var(--sas-p2-soft);
  --sas-done:         var(--sas-ash);
  --sas-done-soft:    rgba(163, 177, 194, 0.1);

  /* Shape and type */
  --sas-radius:       22px;   /* a card: the glass radius */
  --sas-radius-sm:    14px;   /* a well inside it: the LeadForm field's */
  --sas-font-head:    var(--font-display, "Sora"), system-ui, sans-serif;
  --sas-font-body:    var(--font-body, "Inter"), system-ui, sans-serif;
  --sas-font-mono:    var(--font-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
  --sas-shadow:       inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -28px rgba(0, 0, 0, 0.75);
  --sas-t:            0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Shared pieces ------------------------------------------------------- */

.sas-card {
  background: var(--sas-slate);
  border: 1px solid var(--sas-edge);
  border-radius: var(--sas-radius);
  box-shadow: var(--sas-shadow);
  padding: 24px;
}
.sas-card + .sas-card { margin-top: 18px; }
.sas-card h2, .sas-card h3 { font-family: var(--sas-font-head); margin: 0 0 6px; }
.sas-card h2 { font-size: 1.25rem; }
.sas-card h3 { font-size: 1.05rem; }
.sas-sub { color: var(--sas-ash); font-size: 0.92rem; margin: 0 0 16px; }
.sas-fine { color: var(--sas-ash); font-size: 0.82rem; margin: 14px 0 0; line-height: 1.5; }

.sas-num {
  font-family: var(--sas-font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--sas-teal-2);
  white-space: nowrap;
}

/* Chips: priority and status. `data-p` / `data-s` carry the value so the
   same markup colours itself. */
.sas-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--sas-font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  background: var(--sas-p4-soft); color: var(--sas-steel);
  border: 1px solid transparent;
}
.sas-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sas-chip[data-p="P1"] { background: var(--sas-p1-soft); color: var(--sas-p1); }
.sas-chip[data-p="P2"] { background: var(--sas-p2-soft); color: var(--sas-p2); }
.sas-chip[data-p="P3"] { background: var(--sas-p3-soft); color: var(--sas-p3); }
.sas-chip[data-p="P4"] { background: var(--sas-p4-soft); color: var(--sas-p4); }
.sas-chip[data-s="new"], .sas-chip[data-s="triage"] { background: var(--sas-teal-soft); color: var(--sas-teal-2); }
.sas-chip[data-s="in_progress"] { background: var(--sas-ok-soft); color: var(--sas-ok); }
.sas-chip[data-s="pending"] { background: var(--sas-wait-soft); color: var(--sas-wait); }
.sas-chip[data-s="resolved"] { background: var(--sas-ok-soft); color: var(--sas-ok); }
.sas-chip[data-s="closed"], .sas-chip[data-s="cancelled"] { background: var(--sas-done-soft); color: var(--sas-done); }
.sas-chip.is-breached { border-color: var(--sas-p1); }

/* A plain list inside a card (the priorities): the chips are its markers,
   so it carries no tick and no indent. */
.sas-card ul.card-list:not(.checklist) { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.sas-card ul.card-list:not(.checklist) li { padding-left: 0; color: var(--sas-steel); font-size: 0.92rem; line-height: 1.6; }
.sas-card ul.card-list:not(.checklist) li .sas-chip { margin-right: 2px; vertical-align: 1px; }

/* ---- The homepage band and widget ---------------------------------------- */

.sas-band {
  padding: 36px 0;
  background: var(--sas-basalt);
  border-top: 1px solid var(--sas-edge-lit);
  border-bottom: 1px solid var(--sas-edge-lit);
}
.sas-widget {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.sas-widget-intro .eyebrow { margin-bottom: 8px; }
.sas-widget-intro h2 { font-family: var(--sas-font-head); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 8px; }
.sas-widget-intro p { color: var(--sas-ash); margin: 0 0 14px; font-size: 0.97rem; max-width: 52ch; }
.sas-widget-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sas-widget-panel { display: grid; gap: 14px; align-content: start; }

.sas-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sas-counts li {
  background: var(--sas-slate-2); border: 1px solid var(--sas-edge); border-radius: var(--sas-radius-sm);
  padding: 10px 12px; display: grid; gap: 2px;
}
.sas-counts strong { font-family: var(--sas-font-head); font-size: 1.4rem; line-height: 1.1; color: var(--sas-chalk); }
.sas-counts span { font-family: var(--sas-font-mono); font-size: 0.68rem; color: var(--sas-ash); text-transform: uppercase; letter-spacing: 0.08em; }
.sas-counts li.is-wait strong { color: var(--sas-wait); }

.sas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sas-list li a, .sas-list li .sas-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: var(--sas-radius-sm);
  background: var(--sas-slate-2); border: 1px solid var(--sas-edge);
  color: var(--sas-chalk); text-decoration: none;
  transition: border-color var(--sas-t), background var(--sas-t);
}
.sas-list li a:hover { border-color: var(--sas-teal); background: var(--sas-slate); }
.sas-list .sas-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.sas-empty { color: var(--sas-ash); font-size: 0.92rem; margin: 0; }

/* The quick form: three fields, one button. The grid's one column is
   minmax(0, 1fr), and so are the field-row's two: a grid column defaults
   to a minimum of its content's intrinsic width, and a <select> full of
   long options is wider than the card, which dragged every field past the
   card's edge until these minimums were set. Same rule for the fields
   themselves: width 100% of the column, never their own. */
.sas-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sas-quick .field { margin: 0; min-width: 0; }
.sas-quick .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sas-quick .field input, .sas-quick .field select, .sas-quick .field textarea {
  width: 100%; min-width: 0; max-width: 100%;
}
.sas-quick textarea { min-height: 72px; }
.sas-quick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sas-quick-foot .btn { padding: 11px 20px; }
.sas-quick-note { font-size: 0.8rem; color: var(--sas-ash); margin: 0; }
.sas-quick-ok {
  display: none; padding: 12px 14px; border-radius: var(--sas-radius-sm);
  background: var(--sas-ok-soft); border: 1px solid rgba(111, 211, 163, 0.35); color: var(--sas-chalk);
  font-size: 0.93rem;
}
.sas-quick-err {
  display: none; padding: 10px 12px; border-radius: var(--sas-radius-sm);
  background: var(--sas-p1-soft); border: 1px solid rgba(251, 113, 133, 0.4); color: var(--sas-chalk);
  font-size: 0.9rem;
}
.sas-widget[data-state="sent"] .sas-quick-ok { display: block; }
.sas-widget[data-state="error"] .sas-quick-err { display: block; }
.sas-widget.is-busy .btn { opacity: 0.6; pointer-events: none; }

/* ---- The portal pages ---------------------------------------------------- */

.sas-portal { padding: 56px 0 80px; }
.sas-portal-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; margin-bottom: 26px;
}
.sas-portal-head h1 { font-family: var(--sas-font-head); font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 4px; }
.sas-portal-head .lead { margin: 0; color: var(--sas-ash); font-size: 1rem; }
.sas-portal-head .eyebrow { margin-bottom: 8px; }
.sas-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; color: var(--sas-ash); }
.sas-who strong { color: var(--sas-chalk); }
.sas-who form { margin: 0; }
.sas-link-btn {
  background: none; border: 0; padding: 0; color: var(--sas-teal-2); font: inherit; font-weight: 600;
  cursor: pointer; border-bottom: 1px solid rgba(125, 211, 252, 0.35);
}
.sas-link-btn:hover { border-bottom-color: var(--sas-teal-2); }

.sas-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sas-grid > *, .sas-widget-panel, .sas-card { min-width: 0; }
.sas-narrow { max-width: 560px; margin: 0 auto; }
.sas-wide { max-width: 760px; margin: 0 auto; }

.sas-form .field { margin-bottom: 16px; min-width: 0; }
.sas-form .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sas-form .field input, .sas-form .field select, .sas-form .field textarea {
  width: 100%; min-width: 0; max-width: 100%;
}
.sas-form .btn { margin-top: 4px; }
.sas-form .field-help { font-size: 0.8rem; color: var(--sas-ash); margin-top: 6px; }
.sas-code-input { font-family: var(--sas-font-mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* The two-question matrix, as radio tiles. The fieldset loses the browser's
   groove border and its legend reads like every other field label. */
.sas-form fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.sas-form fieldset.field legend {
  padding: 0; margin-bottom: 6px; font-size: 0.875rem; font-weight: 500; color: var(--sas-chalk);
}
.sas-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sas-tiles label {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 48px; margin: 0; padding: 12px 14px; cursor: pointer;
  background: var(--sas-slate-2); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: var(--sas-radius-sm);
  font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--sas-steel);
  user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: box-shadow var(--sas-t), background var(--sas-t), color var(--sas-t);
}
/* A radio mark, so a tile reads as a choice and not as a heading. */
.sas-tiles label::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--sas-ash); background: transparent;
  transition: border-color var(--sas-t), box-shadow var(--sas-t);
}
.sas-tiles label:hover { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45); background: var(--sas-slate-3); color: var(--sas-chalk); }
.sas-tiles label:hover::before { border-color: var(--sas-teal-2); }
.sas-tiles label:active { background: var(--sas-teal-soft); }
/* Visually hidden but still the control. Scoped under .sas-form so it beats
   `.sas-form .field input { width: 100% }`, which made every radio as wide as
   the viewport and pushed the page sideways on a phone. */
.sas-form .sas-tiles input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: 0; appearance: none;
}
.sas-tiles label:has(input:checked) { box-shadow: var(--sas-ring-teal); background: var(--sas-teal-soft); color: var(--sas-chalk); }
.sas-tiles label:has(input:checked)::before { border-color: var(--sas-teal-2); box-shadow: inset 0 0 0 3px var(--sas-obsidian); background: var(--sas-teal-2); }
.sas-tiles label:has(input:focus-visible) { box-shadow: var(--sas-ring-teal), var(--shadow-glow-ring, 0 0 0 4px rgba(56, 189, 248, 0.25)); }

/* The tickets table */
.sas-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sas-table th, .sas-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--sas-edge); vertical-align: top; }
.sas-table th { font-family: var(--sas-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sas-ash); font-weight: 600; }
.sas-table tbody tr:last-child td { border-bottom: 0; }
.sas-table td a { color: var(--sas-chalk); text-decoration: none; }
.sas-table td a:hover { color: var(--sas-teal-2); }
.sas-table .is-done td { color: var(--sas-ash); }
.sas-table .is-done td a { color: var(--sas-steel); }
.sas-table-wrap { overflow-x: auto; }
/* The date may wrap onto two lines; the subject beside it should not have
   to wrap onto four, and a nowrap date pushed the table past the card. */
.sas-when { color: var(--sas-ash); font-size: 0.82rem; min-width: 7rem; }
.sas-table td:nth-child(3) { min-width: 12rem; }

/* The ticket page */
.sas-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.sas-ticket-head h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; width: 100%; }
.sas-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 0.9rem; }
.sas-facts dt { color: var(--sas-ash); }
.sas-facts dd { margin: 0; color: var(--sas-chalk); overflow-wrap: anywhere; }
.sas-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 0; color: var(--sas-steel); }

.sas-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sas-msg { padding: 14px 16px; border-radius: var(--sas-radius-sm); background: var(--sas-slate-2); border: 1px solid var(--sas-edge); }
.sas-msg.is-agent { border-left: 3px solid var(--sas-teal); }
.sas-msg.is-you { border-left: 3px solid var(--sas-steel); }
.sas-msg.is-internal { border-left: 3px solid var(--sas-p2); background: rgba(251, 191, 36, 0.06); }
.sas-msg-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; color: var(--sas-ash); margin-bottom: 6px; }
.sas-msg-head strong { color: var(--sas-chalk); font-family: var(--sas-font-head); font-size: 0.86rem; }
.sas-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 0.94rem; }

.sas-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--sas-edge); display: grid; gap: 10px; font-size: 0.86rem; }
.sas-timeline li { position: relative; color: var(--sas-steel); }
.sas-timeline li::before { content: ""; position: absolute; left: -18px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--sas-teal); }
.sas-timeline time { display: block; color: var(--sas-ash); font-size: 0.78rem; }

.sas-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sas-actions form { margin: 0; }

.sas-target { display: grid; gap: 4px; font-size: 0.86rem; }
.sas-target + .sas-target { margin-top: 10px; }
.sas-reply { margin-top: 18px; }
.sas-target span { color: var(--sas-ash); }
.sas-target.is-breached strong { color: var(--sas-p1); }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .sas-widget, .sas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sas-card { padding: 18px; }
  .sas-counts { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sas-counts strong { font-size: 1.15rem; }
  .sas-tiles { grid-template-columns: 1fr; }
  /* The tickets table, restacked: on a phone five columns cannot share a
     card, so each row becomes a small block (number and priority, then the
     subject across the card, then status and when) instead of a table that
     scrolls sideways under the card's edge. */
  .sas-table, .sas-table tbody { display: block; }
  .sas-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sas-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px;
    padding: 14px 0; border-bottom: 1px solid var(--sas-edge);
  }
  .sas-table tbody tr:last-child { border-bottom: 0; }
  .sas-table td { padding: 0; border: 0; min-width: 0; }
  .sas-table td:nth-child(2), .sas-table td:nth-child(4) { justify-self: start; }
  .sas-table td:nth-child(3) { grid-column: 1 / -1; min-width: 0; }
  .sas-table .sas-when { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sas-list li a, .sas-tiles label, .sas-tiles label::before { transition: none; }
}