/* =====================================================================
   Sonnet support form -- test copy

   The custom properties below were read off the live page's computed
   styles, so changing one here changes it everywhere. All presentation
   lives in this file; the PHP contains no inline styling.
   ===================================================================== */

:root {
    --font-stack:     Arial, "Helvetica Neue", Helvetica, sans-serif;

    --color-text:     #333333;
    --color-heading:  #1d1d1f;
    --color-muted:    #6e6e73;
    --color-border:   #d2d2d7;
    --color-bg:       #ffffff;
    --color-bg-alt:   #f5f5f7;
    --color-accent:   #0a84ff;
    --color-accent-d: #0070e0;
    --color-error:    #d70015;
    --color-success:  #1d8a4e;

    --radius-card:    12px;
    --radius-input:   6px;
    --radius-button:  10px;

    --control-height: 64px;
    --wrap-width:     1000px;

    /* The width the main public surfaces share.
       The form ran to 1120 and the knowledge base to 1200, so moving
       between them shifted the layout 80px. Measured against the sites
       we are judged next to: Apple Support ~1065, NVIDIA ~1165. One
       token now, so the two cannot drift apart again. */
    --content-max:    1200px;
}

/* --- reset ---------------------------------------------------------- */

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

/*
 * The `hidden` attribute must actually hide.
 *
 * Browsers implement it as `[hidden] { display: none }` in the user-agent
 * stylesheet, and ANY author rule that sets `display` beats it -- author
 * styles win over UA styles regardless of specificity. `.actions` sets
 * `display: flex`, so the staged reveal in assets/assistant.js set
 * element.hidden = true on the submit row and the button stayed on screen
 * anyway. Every other panel in this file toggles via `hidden` too and works
 * only because nothing yet sets `display` on it -- one future flex rule and
 * they break the same silent way.
 *
 * !important is right here: `hidden` means "not part of the page for this
 * customer right now", and no layout rule should ever outrank that.
 */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-stack);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); }

.wrap {
    max-width: var(--wrap-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- header --------------------------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    flex-wrap: wrap;
}

.brand img {
    display: block;
    height: 28px;
    width: auto;
}

.site-nav {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.site-nav a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 14px;
}

.site-nav a:hover {
    color: var(--color-heading);
}

/* --- hero ----------------------------------------------------------- */

.hero {
    text-align: center;
    padding: 48px 0 32px;
}

.hero-icon {
    width: 96px;
    height: 96px;
    display: block;
    margin: 0 auto 20px;
}

.hero h1 {
    margin: 0;
    font-size: 38px;
    font-weight: 600;
    color: var(--color-heading);
    letter-spacing: -0.02em;
}

.hero-sub {
    margin: 10px 0 0;
    font-size: 21px;
    color: var(--color-muted);
    font-weight: 400;
}

/* --- card ----------------------------------------------------------- */

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 40px;
    margin-bottom: 48px;
}

.card h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 600;
    color: var(--color-heading);
    letter-spacing: -0.02em;
}

.card-sub {
    margin: 8px 0 0;
    font-size: 17px;
    color: var(--color-muted);
}

.card hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 24px 0 32px;
}

/* --- form grid ------------------------------------------------------ */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

/* The knowledge base button shares a row with a labelled <select>, so
   it is pushed to the bottom of the cell to sit level with the control
   rather than the label. */
.field-kb {
    justify-content: flex-end;
}

label {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: 20px;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 16px 18px;
}

input[type="text"],
input[type="email"],
select {
    height: var(--control-height);
}

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
        linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% + 2px),
        calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

.has-error {
    border-color: var(--color-error);
}

.field-error {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--color-error);
}

.field-hint {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--color-muted);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 22px;
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-primary:hover {
    background: var(--color-accent-d);
}

.btn-secondary {
    height: var(--control-height);
    background: var(--color-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-secondary:hover {
    background: rgba(10, 132, 255, 0.06);
}

/* Disabled state for the KB link: no href is set, so this is purely
   the visual half of the story. */
.btn.is-disabled {
    color: var(--color-muted);
    border-color: var(--color-border);
    background: var(--color-bg-alt);
    cursor: not-allowed;
}

.btn.is-disabled:hover {
    background: var(--color-bg-alt);
}

.actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

.link-muted {
    color: var(--color-muted);
    font-size: 15px;
}

/* --- alerts --------------------------------------------------------- */

.alert {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 16px 18px;
    font-size: 16px;
    margin-bottom: 24px;
}

.alert-success {
    border-color: rgba(29, 138, 78, 0.4);
    background: rgba(29, 138, 78, 0.08);
    color: var(--color-success);
}

.alert-error {
    border-color: rgba(215, 0, 21, 0.4);
    background: rgba(215, 0, 21, 0.06);
    color: var(--color-error);
}

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

/* A caveat that belongs with a table, not a full warning banner. */
.report-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 3px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5;
}

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

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

th,
td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    white-space: nowrap;
}

th {
    background: var(--color-bg-alt);
    color: var(--color-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

tbody tr:last-child td {
    border-bottom: 0;
}

td.wrap-cell {
    white-space: normal;
    min-width: 280px;
}

/*
 * Two free-text columns in one row (the ungrounded-replies table shows
 * the question and the reply side by side) cannot both claim 280px
 * without pushing the short columns off the edge again -- which is the
 * bug .wrap-cell exists to prevent.
 */
td.wrap-cell + td.wrap-cell,
tr:has(td.wrap-cell + td.wrap-cell) td.wrap-cell {
    min-width: 200px;
}

/* Product names wrap, but want far less room than a free-text question. */
td.wrap-cell.is-narrow,
tr:has(td.wrap-cell + td.wrap-cell) td.wrap-cell.is-narrow {
    min-width: 140px;
}

.empty-state {
    text-align: center;
    color: var(--color-muted);
    padding: 48px 20px;
    font-size: 17px;
}

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

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
    color: var(--color-muted);
    font-size: 13px;
}

.site-footer p {
    margin: 0;
}

.disclaimer {
    margin-top: 6px;
    font-style: italic;
}

/* --- narrow screens ------------------------------------------------- */

@media (max-width: 720px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card {
        padding: 24px;
    }

    .card h2,
    .hero h1 {
        font-size: 30px;
    }

    .hero-sub {
        font-size: 18px;
    }

    .field-kb .btn {
        width: 100%;
    }
}

/* --- stage 2: article match panel ------------------------------------
   Offered between the description field and the submit button. It is
   additive by design: nothing here moves, hides or disables "Submit
   Request", because the panel is an offer and not a gate.
   -------------------------------------------------------------------- */

.match-offer {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-alt);
}

.match-offer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.match-offer-copy {
    flex: 1 1 320px;
}

.match-offer-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-heading);
}

.match-offer-sub {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--color-muted);
}

.btn-match {
    background: var(--color-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
    font-size: 16px;
    padding: 12px 18px;
}

.btn-match:hover:not(:disabled) {
    background: rgba(10, 132, 255, 0.06);
}

.btn-match:disabled {
    color: var(--color-muted);
    border-color: var(--color-border);
    background: var(--color-bg-alt);
    cursor: not-allowed;
}

.match-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.match-status {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--color-muted);
}

.match-results {
    display: grid;
    gap: 14px;
}

.match-item {
    padding: 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
}

.match-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.match-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.match-title:hover { text-decoration: underline; }

.match-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.match-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.match-date {
    font-size: 13px;
    color: var(--color-muted);
    white-space: nowrap;
}

.match-snippet {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
}

.match-snippet mark {
    background: #fff2a8;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* Honest empty state. Deliberately not padded out with loosely related
   articles -- being pointed back at a directory is one of the things
   customers most dislike about automated support. */
.match-none {
    padding: 16px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-input);
}

.match-none p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.match-browse {
    display: inline-block;
    margin-top: 10px;
    font-size: 15px;
}

.match-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.match-ask-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-muted);
    margin-right: 4px;
}

.btn-verdict-yes,
.btn-verdict-no {
    font-size: 15px;
    padding: 10px 16px;
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-verdict-yes:hover {
    border-color: var(--color-success);
    color: var(--color-success);
}

.btn-verdict-no:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.match-verdict {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-input);
    font-size: 15px;
    line-height: 1.55;
}

.match-verdict.is-good {
    background: rgba(29, 138, 78, 0.08);
    border: 1px solid var(--color-success);
}

.match-verdict.is-onward {
    background: rgba(10, 132, 255, 0.06);
    border: 1px solid var(--color-accent);
}

@media (max-width: 720px) {
    .match-offer-head { align-items: stretch; }
    .btn-match { width: 100%; }
    .match-ask { align-items: stretch; }
    .btn-verdict-yes,
    .btn-verdict-no { flex: 1 1 auto; }
}

/* --- stage 2: match report ------------------------------------------- */

.nowrap { white-space: nowrap; }

.report-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-top: 4px;
}

.report-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
}

.report-figure {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}

.report-label {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.35;
}

/* The two figures worth looking at first: what worked, and what we
   could not answer at all. */
.report-stat.is-good .report-figure { color: var(--color-success); }
.report-stat.is-gap  .report-figure { color: var(--color-error); }

.report-empty {
    margin: 16px 0 0;
    font-size: 15px;
    color: var(--color-muted);
}

.report-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
}

.report-tag.is-gap {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* --- stage 4: AI assistant --------------------------------------------
   Opens below the article panel once matching has failed. The staged
   reveal of "Submit Request" lives in assets/assistant.js; the styles
   here only describe the two states it moves between.
   -------------------------------------------------------------------- */

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

/* Submit demoted to a quiet control while the assistant has the floor.
   Still a real button with a real focus ring -- de-emphasised, never
   disabled. */
.btn.is-quiet {
    background: var(--color-bg);
    color: var(--color-muted);
    border-color: var(--color-border);
    font-size: 15px;
    padding: 10px 16px;
}

.btn.is-quiet:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.escape-hatch-wrap {
    margin: 20px 0 0;
}

.escape-hatch {
    font-size: 15px;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.escape-hatch:hover { color: var(--color-accent); }

.assistant-panel {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-card);
    background: var(--color-bg);
}

.assistant-head { margin-bottom: 16px; }

.assistant-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-heading);
}

/* The "it may get things wrong" line. Deliberately always visible, not
   a dismissible notice -- Apple ships the same disclaimer permanently. */
.assistant-sub {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-muted);
    max-width: 56ch;
}

.chat-log { display: grid; gap: 16px; }

.chat-turn {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-input);
}

.chat-turn.is-user {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.chat-turn.is-assistant {
    background: rgba(10, 132, 255, 0.05);
    border: 1px solid var(--color-accent);
}

.chat-who {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.chat-turn.is-assistant .chat-who { color: var(--color-accent); }

.chat-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Citation marker. Small on purpose: it should be findable without
   breaking the sentence it sits in. */
.chat-cite {
    display: inline-block;
    min-width: 15px;
    margin-left: 2px;
    padding: 0 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #ffffff;
    background: var(--color-accent);
    border-radius: 3px;
    vertical-align: super;
    cursor: help;
}

.chat-sources {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.chat-sources-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.chat-source {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 4px 8px;
    align-items: baseline;
}

.chat-source-num {
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #ffffff;
    background: var(--color-accent);
    border-radius: 3px;
}

.chat-source-link {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.chat-source-quote {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
}

/* An answer that cited nothing. Marked rather than hidden -- it is a
   defect, and it should not pass for a normal reply. */
/* A correct refusal -- neutral, not the red defect notice below. */
.chat-handover {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 14px;
}

.chat-ungrounded {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-error);
    background: rgba(215, 0, 21, 0.06);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-input);
}

.chat-status {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--color-muted);
    min-height: 1em;
}

.chat-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.chat-ask-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-muted);
}

.chat-composer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.chat-composer textarea {
    flex: 1 1 auto;
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
    font-size: 15px;
}

.chat-composer .btn {
    flex: 0 0 auto;
    height: auto;
    padding: 12px 20px;
    font-size: 15px;
}

.chat-close {
    margin-top: 4px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.55;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
}

.chat-close.is-good {
    background: rgba(29, 138, 78, 0.08);
    border-color: var(--color-success);
}

@media (max-width: 720px) {
    .chat-composer { flex-direction: column; }
    .chat-composer .btn { width: 100%; }
    .chat-ask { align-items: stretch; }
}

/* =====================================================================
   Guided support experience (simulate.php)

   Designed as a product, not a demo. The customer-facing column is the
   page; the explanations are marginalia, set quietly enough that a
   reader's eye lands on the control they are meant to use rather than
   the commentary about it.

   The ordering is deliberate and load-bearing. Reaching a person is
   always possible and never the first thing offered, because a support
   queue is the most expensive way to answer a question we have already
   published. Steps 1-3 are given room, colour and emphasis; step 4 is
   deliberately plain. That is persuasion by making the fast path
   genuinely better, not by hiding the slow one.
   ===================================================================== */

.sim-body { background: var(--color-bg-alt); }

.sim-main {
    padding-bottom: 80px;
    max-width: var(--content-max);
}

/* The masthead lines up with the content under it.
   .wrap is 1000px for the internal dashboards, where header and body are
   both that width and agree. The form's main column is wider, so without
   this the logo sat 100px inside where the first field began. kb.css has
   carried the same override for its own pages since the start; this is
   that rule, for these. */
body.sim-body .site-header .wrap { max-width: var(--content-max); }

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

.sim-hero {
    padding: 56px 0 8px;
    max-width: 620px;
}
.sim-hero h1 {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.sim-hero p {
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
}
.sim-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
}

/* --- progress rail -------------------------------------------------- */

.sim-rail {
    display: flex;
    gap: 0;
    margin: 36px 0 8px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}
.sim-rail li {
    flex: 1 1 0;
    padding: 0 0 14px;
    font-size: 13px;
    color: var(--color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.sim-rail .n {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-border);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
    align-self: center;
}
.sim-rail .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-rail li.is-current { color: var(--color-heading); font-weight: 600; border-bottom-color: var(--color-accent); }
.sim-rail li.is-current .n { background: var(--color-accent); }
.sim-rail li.is-done .n { background: var(--color-success); }
.sim-rail li.is-done { color: var(--color-text); }
@media (max-width: 760px) {
    .sim-rail .t { display: none; }
    .sim-rail li { flex: 0 0 auto; padding-right: 20px; }
}

/* --- steps ---------------------------------------------------------- */

.sim-step {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px 36px;
    margin: 24px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* The AI conversation is the destination, so it gets the emphasis. */
.sim-step.is-hero {
    border-color: #b9dcff;
    box-shadow: 0 2px 14px rgba(10, 132, 255, 0.09);
}

/* Steps not yet reachable recede rather than disappear -- the customer
   can see where this goes without being invited to skip ahead. */
.sim-step.is-upcoming {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}
.sim-step.is-upcoming .sim-step-head h2 { color: var(--color-muted); }

.sim-step.is-done { border-color: #cfe8da; }

.sim-step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.sim-step-head h2 {
    margin: 0;
    font-size: 23px;
    letter-spacing: -0.01em;
}
.sim-lede {
    margin: 0 0 24px 46px;
    color: var(--color-muted);
    font-size: 15px;
    max-width: 52ch;
}

.sim-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
}
.sim-step.is-done .sim-num    { background: var(--color-success); }
.sim-step.is-upcoming .sim-num { background: var(--color-border); }

.sim-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    gap: 40px;
    align-items: start;
}
@media (max-width: 940px) {
    .sim-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.sim-stage { min-width: 0; }

/* Commentary. Quiet on purpose: it explains, it does not compete. */
.sim-note {
    border-left: 2px solid var(--color-border);
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-muted);
}
.sim-note h3 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.sim-note p { margin: 0 0 12px; }
.sim-note p:last-child { margin-bottom: 0; }
.sim-note strong { color: var(--color-text); font-weight: 600; }
.sim-aside {
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
    font-size: 12.5px;
}

/* --- the primary action -------------------------------------------- */

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-accent);
    color: #fff;
    border: 0;
    border-radius: var(--radius-button);
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.btn-hero:hover { background: var(--color-accent-d); }
.btn-hero:disabled { background: var(--color-border); cursor: not-allowed; }

.sim-reassure {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--color-muted);
}

.sim-cue {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--radius-input);
    background: #f0f7ff;
    color: #0a4a8a;
    font-size: 14px;
}
.sim-cue.is-done { background: var(--color-bg-alt); color: var(--color-muted); }
.sim-cue.is-good { background: #eef8f2; color: #14663c; }
.sim-cue.is-skip { background: var(--color-bg-alt); color: var(--color-muted); font-style: italic; }

.sim-turns {
    margin: 12px 0 0;
    text-align: right;
    font-size: 12.5px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.sim-warn {
    background: #fff4f4;
    border: 1px solid #e5a5a5;
    color: #8d2f2a;
    padding: 12px 16px;
    border-radius: var(--radius-card);
    font-size: 14px;
    margin: 12px 0;
}

/* --- completed-step recaps ----------------------------------------- */

.sim-recap { margin: 0; display: grid; gap: 10px; }
.sim-recap > div { display: flex; gap: 16px; align-items: baseline; }
.sim-recap dt {
    flex: 0 0 90px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sim-recap dd { margin: 0; flex: 1; font-size: 15px; min-width: 0; }

.sim-transcript { display: grid; gap: 10px; }
.sim-line {
    border-radius: 12px;
    padding: 14px 18px;
    background: #f4f9ff;
    border: 1px solid #dceaff;
}
.sim-line.is-you { background: var(--color-bg-alt); border-color: var(--color-border); }
.sim-line p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.sim-who {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.sim-line.is-you .sim-who { color: var(--color-muted); }
.sim-turnno { font-weight: 400; color: var(--color-muted); letter-spacing: 0.04em; }
.sim-cited {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid #dceaff;
    font-size: 12px !important;
    color: var(--color-muted);
}
.sim-cited.is-none { color: #a03028; }

/* --- receipt and email --------------------------------------------- */

.sim-receipt {
    background: #f1f9f4;
    border: 1px solid #c4e3d2;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 22px;
}
.sim-receipt p { margin: 0 0 6px; font-size: 15px; }
.sim-receipt p:last-child { margin-bottom: 0; }

.sim-h3 {
    margin: 26px 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.sim-email {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg);
}
.sim-email-head {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 18px;
    display: grid;
    gap: 5px;
    font-size: 13px;
}
.sim-email-head div { display: flex; gap: 12px; min-width: 0; }
.sim-email-head span {
    flex: 0 0 62px;
    color: var(--color-muted);
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding-top: 3px;
}
.sim-email-body {
    margin: 0;
    padding: 18px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 26rem;
    overflow-y: auto;
}

.sim-empty {
    color: var(--color-muted);
    padding: 28px 24px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
}

.sim-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.sim-sort:hover { color: var(--color-accent); }

/* --- reaching a person ---------------------------------------------
   Always available, never the loudest thing on screen. A quiet link
   rather than a button, and it only appears once the assistant has
   actually failed -- at which point it becomes the primary action. */

.sim-escape {
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--color-muted);
}
.sim-escape a { color: var(--color-muted); }
.sim-escape a:hover { color: var(--color-accent); }

/* --- intake gates and choices --------------------------------------- */

.sim-choice { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.sim-inline { display: inline; margin: 0; }

.btn-quiet {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    padding: 15px 24px;
    font-size: 15px;
    color: var(--color-muted);
    cursor: pointer;
}
.btn-quiet:hover { border-color: var(--color-muted); color: var(--color-text); }

/* A gate is a stop, not an error. Warm enough that being turned away
   does not read as a rejection, clear enough that it is not missable. */
.sim-gate {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 22px 26px;
    margin-top: 8px;
}
.sim-gate.is-stop { background: #fff8ec; border-color: #e6cf9f; }
.sim-gate p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.sim-gate p:last-child { margin-bottom: 0; }
.sim-gate-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 18px 0 !important; }

.sim-link { color: var(--color-accent); font-size: 15px; }

.sim-link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

.sim-link-btn:hover,
.sim-link-btn:focus-visible { text-decoration: underline; }

/* The third route is an anchor rather than a button, so it needs the
   same treatment to sit level with the other two. */
.sim-routes .sim-link {
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
}

.sim-routes .sim-link:hover,
.sim-routes .sim-link:focus-visible { text-decoration: underline; }

.sim-restart { margin: 8px 0 0; text-align: right; }

/* The last word before a person sees it. Sits above the send button and
   appears with it -- offered before that, there is nothing to send. */
.sim-addendum { margin-bottom: 18px; max-width: 46rem; }
.sim-addendum label { font-weight: 600; }

/* --- ticket confirmation -------------------------------------------
   What a customer wants after pressing send: a reference they can
   quote, a status, and a date. Everything else is reassurance. */

.sim-ticket {
    margin: 0 0 8px;
    display: grid;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}
.sim-ticket > div {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 13px 20px;
    border-bottom: 1px solid var(--color-border);
}
.sim-ticket > div:last-child { border-bottom: 0; }
.sim-ticket > div:nth-child(odd) { background: var(--color-bg-alt); }
.sim-ticket dt {
    flex: 0 0 140px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sim-ticket dd { margin: 0; flex: 1; font-size: 15px; min-width: 0; }

.sim-ref {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    font-size: 17px;
    letter-spacing: 0.02em;
}

.sim-status {
    display: inline-block;
    background: #e8f5ed;
    color: #1d6b42;
    border: 1px solid #b8ddc7;
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sim-next {
    margin: 0 0 18px;
    padding-left: 22px;
    display: grid;
    gap: 10px;
    max-width: 48rem;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-muted);
}
.sim-next strong { color: var(--color-text); }

.sim-hours {
    margin: 0;
    padding: 12px 16px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-input);
    font-size: 13.5px;
    color: var(--color-muted);
    max-width: 48rem;
}

/* --- demo controls -------------------------------------------------- */

.sim-demo { border-color: #b9dcff; }
.sim-demo-url { margin: 14px 0 0; font-size: 13.5px; color: var(--color-muted); }
.sim-try {
    margin: 18px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    max-width: 48rem;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-muted);
}
.sim-try strong { color: var(--color-text); }

/* The walkthrough is the page to open in front of someone, so it is the
   one nav item that reads as a destination rather than a section. */
.site-nav .nav-demo { color: var(--color-accent); font-weight: 600; }

/* --- what a run cost -------------------------------------------------
   Three rows and a total. The two free stages are shown even though
   they cost nothing -- that they are free is the point being made. */

.sim-cost { border-color: #cfe3d6; }

.sim-meter {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    max-width: 44rem;
}
.sim-meter-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14.5px;
}
.sim-meter-row:last-child { border-bottom: 0; }
.sim-meter-row .k { flex: 1 1 auto; min-width: 0; }
.sim-meter-row .v {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
.sim-meter-row .v.is-free { color: var(--color-success); font-family: inherit; }
.sim-meter-row .n {
    flex: 0 0 13rem;
    text-align: right;
    color: var(--color-muted);
    font-size: 12.5px;
}
.sim-meter-row.is-total {
    background: var(--color-bg-alt);
    border-top: 2px solid var(--color-border);
    font-weight: 600;
}
@media (max-width: 620px) {
    .sim-meter-row { flex-wrap: wrap; gap: 4px 14px; }
    .sim-meter-row .n { flex: 1 1 100%; text-align: left; }
}

/* =====================================================================
   Site skin (support-flow.php)

   Values below were read off the computed styles of the live page at
   sonnettech.com/support/contact/support-form.html, so this flow can sit
   among the real support pages without announcing itself:

     body          #ffffff, Arial 14px/20px, #333333
     card          1px #d2d2d7, 12px radius, 33.28px padding,
                   0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.06)
     h2            37.44px / 600 / -0.7488px tracking
     intro copy    17px #6e6e73
     controls      64px tall, 6px radius, 20px text
     submit        #0a84ff, 10px radius, 18px / 600

   The demo skin keeps its own look; nothing here touches it.
   ===================================================================== */

.skin-sonnet { background: var(--color-bg); }

.skin-sonnet .sim-main { padding-bottom: 64px; }

.skin-sonnet .page-intro { padding: 44px 0 4px; max-width: 640px; }
.skin-sonnet .page-intro h1 {
    font-size: 37.44px;
    font-weight: 600;
    letter-spacing: -0.7488px;
    color: var(--color-heading);
    margin: 0 0 10px;
}

/* Steps become the site's own card. */
.skin-sonnet .sim-step {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 33.28px;
    margin: 24px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.06);
}
.skin-sonnet .sim-step.is-hero,
.skin-sonnet .sim-step.is-done { border-color: var(--color-border); }
.skin-sonnet .sim-step.is-upcoming {
    border-style: solid;
    box-shadow: none;
    opacity: 0.55;
}

.skin-sonnet .sim-step-head { gap: 12px; margin-bottom: 10px; }
.skin-sonnet .sim-step-head h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--color-heading);
}
.skin-sonnet .sim-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
}
.skin-sonnet .sim-lede {
    margin: 0 0 24px 40px;
    font-size: 17px;
    color: var(--color-muted);
    max-width: 46rem;
}

/* The rail loses its chrome: a quiet line of labels rather than a
   product-tour widget, because the real page has no such component. */
.skin-sonnet .sim-rail {
    border-bottom: 1px solid var(--color-border);
    margin: 28px 0 4px;
}
.skin-sonnet .sim-rail li { font-size: 14px; padding-bottom: 12px; }
.skin-sonnet .sim-rail .n { width: 18px; height: 18px; font-size: 10px; }

/* Controls and buttons already match the live page; the demo's own
   oversized hero button does not, so it inherits the real one. */
.skin-sonnet .btn-hero {
    background: var(--color-accent);
    border-radius: var(--radius-button);
    padding: 16px 22px;
    font-size: 18px;
    font-weight: 600;
}
.skin-sonnet .btn-hero:hover { background: var(--color-accent-d); }
.skin-sonnet .btn-quiet {
    padding: 16px 22px;
    font-size: 18px;
    border-radius: var(--radius-button);
}

.skin-sonnet .sim-cue,
.skin-sonnet .sim-reassure { font-size: 15px; }

.skin-sonnet .sim-gate { border-radius: var(--radius-card); padding: 24px 26px; }
.skin-sonnet .sim-gate p { font-size: 16px; }

.skin-sonnet .sim-ticket { border-radius: var(--radius-card); }
.skin-sonnet .sim-ticket dd { font-size: 16px; }
.skin-sonnet .sim-receipt { border-radius: var(--radius-card); }
.skin-sonnet .sim-next { font-size: 16px; }

/* Sales contact, shown rather than linked -- and shown in the live
   Contact Sales tab's own type, so a customer turned away here reads
   exactly what that tab would have told them.

   Every value below was read off the computed styles of that tab on
   2026-09-18, not chosen:

       panel     #f6f8fa ground (the td's bgcolor on the live page)
       body      Lucida Grande 12px/18px, #444444
       .text24   24px / 33.6px / 700 / #000000   -- the tab heading
       .bodyB16  16px / 18px / 700 / #333333     -- "Corporate Address"
       links     #0072bc, no underline

   ONE DELIBERATE DEVIATION: the body copy is set to 14px/21px, not the
   live 12px/18px. On the live page that 12px sits in a 12px document
   and reads as normal; here it sits beside 15-17px copy and reads as an
   afterthought -- the same measurement, the wrong result. 14px is the
   nearest size that holds its own in this context, and 21px keeps the
   live 1.5 ratio rather than inventing a new one. Everything else is
   the measured value.

   If the site is ever retyped, re-measure rather than nudging these by
   eye. The class names on the live page (.text24, .bodyB16) describe
   sizes rather than roles, which is why they are not reused here. */
.sonnet-sales {
    background: #f6f8fa;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 22px 26px 24px;
    margin: 0 0 18px;
    max-width: 34rem;
    font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    color: #444444;
}

.sonnet-sales-title {
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 33.6px;
    font-weight: 700;
    letter-spacing: normal;
    color: #000000;
}

.sonnet-sales-sub {
    margin: 24px 0 0;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: normal;
    color: #333333;
}

/* Beats both `.sim-gate p` and `.skin-sonnet .sim-gate p`, which set
   15px and 16px. Equal specificity to the latter, later in the file. */
.sim-gate .sonnet-sales p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 21px;
    color: #444444;
}
.sim-gate .sonnet-sales p:last-child { margin-bottom: 0; }
.sonnet-sales strong { color: #333333; }
.sonnet-sales a { color: #0072bc; text-decoration: none; }
.sonnet-sales a:hover { text-decoration: underline; }
.sonnet-sales-address { margin-top: 12px !important; }

/* --- "I am not sure which product I have" ---------------------------
   The shortlist is a row of submit buttons rather than a radio list and
   a Continue: one decision, one click. Each one has to read as a
   product name first and a control second, so they are left-aligned and
   set in body type, not centred and shouting. */
.sim-candidates {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    max-width: 38rem;
}

.sim-candidate {
    text-align: left;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
}
.sim-candidate:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-alt);
}

/* Results sit directly under the search button, which otherwise leaves
   them touching it. */
.sim-matches-head { margin-top: 24px; }

/* The System Information route. Numbered because the order genuinely
   matters -- it is a sequence someone follows at their Mac, not a list
   of options. */
.sim-steps {
    margin: 0 0 12px;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    font-size: 15px;
    line-height: 1.6;
}
.sim-steps kbd {
    font: inherit;
    font-size: 13px;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #fff;
}

.skin-sonnet .sim-candidate { border-radius: var(--radius-button); font-size: 16px; }
.skin-sonnet .sim-steps { font-size: 16px; }

/* The v3 product step's three ways out. A list, because they are
   alternatives to each other rather than a sequence.

   They used to stack, each one underlined, which read as three loose
   links somebody had forgotten to style rather than as a considered set
   of alternatives. A wrapping row with a hairline between them says the
   same thing in a quarter of the vertical space, and the underline is
   kept for hover so the row stays quiet next to Continue -- which is
   the action almost everybody wants. Flex-wrap, so a long label still
   moves to its own line whole rather than breaking mid-phrase. */
.sim-routes {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

/* The hairline between items, never before the first and never left
   dangling at the end of a wrapped row's last item. */
.sim-routes > li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: .9em;
    margin-right: 14px;
    vertical-align: -.1em;
    background: var(--color-border, #d2d2d7);
}

.sim-routes > li {
    display: flex;
    align-items: center;
}

.sim-routes form { margin: 0; }

/* --- "Do you own it, or are you buying it?" -------------------------
   A radio pair rather than a dropdown: two options, both need to be
   readable at a glance, and the answer picks which inbox the ticket
   lands in. Hiding one of them behind a click would be the wrong
   economy. */
.sim-audience {
    display: grid;
    gap: 8px;
    /* Room above, because this sits directly under the chat panel and
       read as part of it without one; and below, because the "anything
       to add" label follows immediately. */
    margin: 26px 0 24px;
}
.sim-audience .field-hint { margin-top: 2px; }

.sim-audience-q {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
}

.sim-audience label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    font-size: 15px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.sim-audience label:hover { border-color: var(--color-accent); }
.sim-audience input { margin: 0; }
.sim-audience input:checked + span { font-weight: 600; }

.skin-sonnet .sim-audience label { border-radius: var(--radius-button); font-size: 16px; }
.skin-sonnet .sim-audience-q { font-size: 16px; }

/* ---------------------------------------------------------------------
   Type-ahead dropdowns (assets/typeahead.js)

   The real <select> is still in the form and still posts its value. It
   is hidden with position/clip rather than display:none so that browser
   validation messages, if any are ever added, still have somewhere to
   point -- a display:none control cannot be reported on.
   --------------------------------------------------------------------- */
.ta-wrap { position: relative; }

.ta-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
}

.ta-list {
    position: absolute;
    z-index: 30;
    left: 0; right: 0; top: 100%;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 17rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.ta-item {
    padding: 8px 14px;
    cursor: pointer;
    line-height: 1.35;
}

.ta-item:hover,
.ta-item.is-active { background: #eef4ff; }

/* The catch-all strip under a scrolling suggestion list.
 *
 * typeahead.js creates this element for every field, so its base styling
 * belongs here rather than in one version's skin. It was in skin-v12.css
 * alone for a few hours, which left every other version rendering the
 * strip as a bulleted list in the page flow -- the JavaScript shared, the
 * appearance not. Skins may recolour it; they should not have to invent it.
 */
.ta-foot {
    position: absolute;
    z-index: 31;
    left: 0; right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.ta-foot .ta-item { border-top: 1px solid #ececf0; }

.ta-none {
    padding: 8px 14px;
    color: #6e6e73;
    font-style: italic;
}

/* Keep the horizontal scrollbar visible on wide tables.
 *
 * .table-scroll has always had overflow-x: auto, so the container was
 * never the problem -- macOS just hides scrollbars until something
 * scrolls, which means a table wider than the window looks complete.
 * A column off the right edge is then found by accident, or not at all.
 *
 * Forcing the bar to show costs a few pixels of height and removes the
 * guesswork. Only on this container, so it does not change scrollbars
 * anywhere else on the site. */
.table-scroll {
    scrollbar-width: thin;                 /* Firefox */
    padding-bottom: 2px;
}

.table-scroll::-webkit-scrollbar {         /* Chrome, Safari, Edge */
    height: 10px;
    -webkit-appearance: none;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 5px;
}

.table-scroll::-webkit-scrollbar-track {
    background: var(--color-bg-alt);
}

/* Ticket descriptions collapse in the submissions table. */
.ticket-body > summary {
    cursor: pointer;
    color: var(--color-text);
}

.ticket-body > summary::after {
    content: ' show full ticket';
    color: var(--color-accent);
    text-decoration: underline;
    white-space: nowrap;
}

.ticket-body[open] > summary::after { content: ' hide'; }

.ticket-body > div {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------
   Top-menu drop-down (includes/intake.php :: site_products_menu).

   Only Products has one, because only Products has one on
   sonnettech.com. Read from the live header on 15 October 2026.
   --------------------------------------------------------------------- */

.nav-has-menu {
    position: relative;
    display: inline-block;
}

.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 260px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);

    /* Hidden by visibility rather than display:none so it can animate and
       so a keyboard tab into it still finds focusable links. */
    visibility: hidden;
    opacity: 0;

    /* Only opacity is transitioned. visibility is a discrete property --
       putting it in the transition list delays the flip to the END of the
       duration, which reads as a menu that does not open. */
    transition: opacity .12s ease;
}

/* Opens on hover AND on focus anywhere inside. :focus-within is what makes
   it work for somebody tabbing through -- without it the menu is mouse
   only, and the links inside are reachable but invisible. */
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
    visibility: visible;
    opacity: 1;
}

/* A gap between the link and the panel would close the menu as the
   pointer crosses it. This bridges it without moving anything. */
.nav-has-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.nav-menu a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
}

/* The rule between the two marketing links and the eight support
   categories, added 28 October.
 *
   It is a real element rather than a border on the next link, because
   what it separates is a change of KIND -- the two above lead off the
   support site to marketing pages, the eight below are support
   libraries. A border-top on the first category would say the same
   thing visually but would move if the order ever changed; this
   cannot drift away from what it divides.
 *
   role="separator" carries the same meaning to a screen reader, which
   a border never does. */
.nav-menu-rule {
    display: block;
    height: 1px;
    margin: 6px 0;
    background: var(--color-border, #d2d2d7);
}

/* The header's own link colour is white on the purple bar; inside the
   white panel it has to be the text colour or it is invisible. */
body.v12 .site-header .nav-menu a {
    color: var(--color-text, #333);
}
body.v12 .site-header .nav-menu a:hover,
body.v12 .site-header .nav-menu a:focus {
    background: var(--color-bg-alt, #f6f4f9);
    color: var(--color-accent, #6b539c);
}

/* v13 shares these with v12 rather than copying the whole stylesheet:
   style.css is used by kb.php, internal.php and every other page, so
   it is not versioned. Only the handful of rules keyed to the body
   class are duplicated. v12 keeps its own copy above, untouched. */
body.v13 .site-header .nav-menu a {
    color: var(--color-text, #333);
}
body.v13 .site-header .nav-menu a:hover,
body.v13 .site-header .nav-menu a:focus {
    background: var(--color-bg-alt, #f6f4f9);
    color: var(--color-accent, #6b539c);
}

/* Narrow screens: the header already wraps to two rows, and a floating
   panel there covers the rest of the menu. Show the links inline
   instead of hiding them. */
@media (max-width: 860px) {
    .nav-has-menu { position: static; }
    .nav-menu { display: none; }
}

/* ---------------------------------------------------------------------
   Site footer (includes/intake.php :: site_footer).

   One row, centred, wrapping on narrow screens. It used to exist only on
   the form, so a customer who followed a citation into the knowledge base
   lost the copyright line and the language switch.
   --------------------------------------------------------------------- */

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--color-muted, #6e6e73);
    text-align: center;
}

.footer-sep { color: var(--color-border, #d2d2d7); }

/* The flag sits on the text baseline rather than hanging below it. */
.footer-lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.footer-lang img {
    display: block;
    width: 16px;
    height: 11px;
}

@media (max-width: 560px) {
    /* The separators are decoration; on two lines they land in odd places
       and read as punctuation errors. */
    .footer-sep { display: none; }
    .footer-inner { gap: 4px 14px; }
}

/* ---------------------------------------------------------------------
   The Salesforce demo switch.

   Deliberately NOT in the product's visual language. It is a presenter's
   control that happens to sit on a customer page, so it reads as an
   instrument bolted to the side: monospace, dashed border, muted until
   the outage is armed. Nobody should mistake it for part of the form.

   It only ever renders for a session that has been through
   demo-salesforce.php, which is behind the internal password -- see the
   comment at its markup in simulate-v12.php.
   --------------------------------------------------------------------- */
.demo-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.75rem 0 0;
    padding: .7rem .95rem;
    border: 1px dashed #c7c9d4;
    border-radius: 8px;
    background: #fbfbfd;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    color: #6b7280;
}

.demo-switch-state { letter-spacing: .01em; }

.demo-switch form { margin: 0; }

.demo-switch button {
    font: inherit;
    font-weight: 600;
    padding: .4rem .8rem;
    border: 1px solid #c7c9d4;
    border-radius: 6px;
    background: #fff;
    color: #40455a;
    cursor: pointer;
}

.demo-switch button:hover { border-color: #9aa0b4; color: #1f2430; }

/* Armed: the outage is on, and that must be obvious at a glance so it
   cannot be left switched on by accident after the demo. */
.demo-switch.is-down {
    border-style: solid;
    border-color: #f0a878;
    background: #fff7ed;
    color: #9a3412;
}

.demo-switch.is-down .demo-switch-state { font-weight: 700; }

.demo-switch.is-down button { border-color: #e4a176; color: #9a3412; }

/* ---------------------------------------------------------------------
   A form that is on its way to the server.

   Set by assets/submitting.js. The cursor and the dimmed button are the
   whole point: the last step waits on Google, Salesforce and SMTP, and
   without a visible change people read the unmoved button as a click
   that did not register and press it again.

   pointer-events is deliberately NOT none -- a disabled button already
   refuses clicks, and removing pointer events would also kill the
   wait cursor, which is the clearest signal of the three.
   --------------------------------------------------------------------- */
form.is-sending {
    cursor: progress;
}

form.is-sending button[type="submit"][disabled],
form.is-sending input[type="submit"][disabled] {
    opacity: .62;
    cursor: progress;
}