/* ==========================================================================
   UI/UX Pro Max — Global base
   Load AFTER tokens.css and AFTER any third-party framework CSS, so the
   non-negotiables in §A win. This file is the only place !important is used.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-default);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semi); color: var(--text-strong); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semi); color: var(--text-strong); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semi); color: var(--text-strong); }

.prose, .body-copy { font-family: var(--font-body); }
.mono, code, kbd, samp, pre,
[data-numeric], .amount, .plate, .code, .timestamp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   §A  NON-NEGOTIABLES
   ========================================================================== */

/* A1. Links never carry an underline, in any state. */
a,
a:link,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

a {
    color: var(--text-link);
    font-weight: var(--fw-medium);
    transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--text-link-hover); }

/* A2. Everything clickable gets the hand pointer. */
a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="color"],
input[type="range"],
label[for],
select,
summary,
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="menuitemcheckbox"],
[role="menuitemradio"],
[role="option"],
[role="switch"],
[role="checkbox"],
[role="radio"],
[role="treeitem"],
[onclick],
[data-clickable],
[data-action],
[data-href],
[data-toggle],
[data-modal],
[tabindex]:not([tabindex="-1"]),
.clickable,
.btn,
.tab,
.nav-item,
.menu-item,
.card--interactive,
.row--clickable,
.sortable,
.dropzone,
.pagination__item,
.icon-btn {
    cursor: pointer;
}

/* A3. Disabled never looks clickable. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
fieldset:disabled,
[aria-disabled="true"],
.disabled,
.is-disabled {
    cursor: not-allowed !important;
    opacity: 0.55;
    pointer-events: auto;      /* keep the cursor readable */
    user-select: none;
}
button:disabled:hover,
[aria-disabled="true"]:hover,
.disabled:hover,
.is-disabled:hover {
    background-color: inherit;
    color: inherit;
    box-shadow: none;
    transform: none;
}

/* Elements that only look busy, not broken. */
[aria-busy="true"], .is-loading { cursor: progress; }

/* A4. Focus visibility is never sacrificed for the underline removal.
       Mouse users see nothing; keyboard users see everything. */
:focus { outline: none; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
    position: relative;
    z-index: 1;
}

.shell :focus-visible,
[data-surface="dark"] :focus-visible {
    box-shadow: var(--focus-ring-dark);
}

/* Links stay identifiable without underlines: colour + weight + hover ground. */
.prose a,
.body-copy a {
    box-shadow: inset 0 -1px 0 0 var(--a-200);   /* a rule, not a text-decoration */
    padding-bottom: 1px;
}
.prose a:hover,
.body-copy a:hover {
    box-shadow: inset 0 -1px 0 0 var(--accent);
    background: var(--accent-soft);
}

/* Skip link — first tab stop on every page. */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--accent-on);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semi);
    transition: top var(--dur-micro) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }


/* ==========================================================================
   §B  Accessibility utilities
   ========================================================================== */

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

[hidden] { display: none !important; }

/* Motion preference is respected globally. Do not reintroduce motion above this. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --border-subtle:  var(--n-400);
        --border-default: var(--n-500);
        --text-muted:     var(--n-600);
    }
}


/* ==========================================================================
   §C  Ambient detail
   ========================================================================== */

::selection { background: var(--accent-soft); color: var(--text-strong); }

:where(*) { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--n-300);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--n-400); background-clip: content-box; }

/* Numeric and currency columns align or they are useless. */
.cell--numeric, .cell--amount, td[data-numeric], th[data-numeric] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

/* Print: drop the shell, keep the data. */
@media print {
    .shell, .topbar, .no-print, .toast-region { display: none !important; }
    body { background: #fff; color: #000; font-size: 10pt; }
    a { color: #000; }
    thead { display: table-header-group; }
    tr, img, .card { break-inside: avoid; }
}

/* -------------------------------------------------- the feedback page */
.fb { min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
      justify-content: center; padding: 2rem 1rem; background: var(--dk-bg-deep, #030c1c); }
.fb__card { width: min(620px, 100%); background: var(--dk-panel, #0a1428);
            border: 1px solid var(--dk-line, #17233f); border-radius: 16px;
            padding: 2.2rem 2rem; color: var(--dk-text, #dbe4f3); }
.fb__logo { display: block; margin: 0 auto 1.4rem; }
.fb__card h1 { margin: 0 0 .7rem; font-size: 1.5rem; color: var(--dk-text-strong, #fff); text-align: center; }
.fb__lead { margin: 0 0 1rem; line-height: 1.7; color: var(--dk-text-mute, #9aa7bf); }
.fb__err { background: rgba(178, 58, 72, .16); border: 1px solid rgba(178, 58, 72, .5);
           border-radius: 10px; padding: .7rem 1rem; }
.fb__q { margin: 0 0 1.05rem; }
.fb__q label { display: block; font-weight: 600; margin-bottom: .4rem; color: var(--dk-text-strong, #fff); }
.fb__req { font-weight: 400; color: var(--brand-cyan); font-size: .85rem; }
.fb__opt { font-weight: 400; color: var(--dk-text-faint, #6b7690); font-size: .85rem; }
.fb__q textarea, .fb__q input[type="text"] { width: 100%; background: var(--dk-bg, #070f22);
    border: 1px solid var(--dk-line, #17233f); border-radius: 10px; color: inherit;
    font: inherit; padding: .7rem .85rem; }
.fb__q textarea:focus-visible, .fb__q input:focus-visible, .fb__perm input:focus-visible, .fb__send:focus-visible {
    outline: 2px solid var(--brand-cyan); outline-offset: 1px; }
.fb__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .fb__row { grid-template-columns: 1fr; } }
.fb__perm { display: flex; gap: .6rem; align-items: flex-start; margin: .3rem 0 1.2rem;
            font-size: .93rem; line-height: 1.55; cursor: pointer; }
.fb__perm input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand-cyan); cursor: pointer; flex: none; }
.fb__send { width: 100%; background: var(--brand-cyan); color: #04121f; border: 0;
            border-radius: 10px; font: inherit; font-weight: 700; padding: .85rem 1rem; cursor: pointer; }
.fb__send:hover { filter: brightness(1.07); }
.fb__foot { margin: .9rem 0 0; text-align: center; font-size: .82rem; color: var(--dk-text-faint, #6b7690); }
.fb__hp { position: absolute; left: -9999px; }

/* ============================================================ the quotation page */
.qd { min-height: 100vh; min-height: 100svh; background: var(--dk-bg-deep, #030c1c);
      padding: 2.2rem 1rem 3rem; display: flex; justify-content: center; }
.qd__sheet { width: min(880px, 100%); background: #0a1626; border: 1px solid var(--dk-line, #17233f);
             border-radius: 18px; overflow: hidden; color: var(--dk-text, #dbe4f3); }
.qd__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            background: #071125; padding: 1.3rem 2rem; border-bottom: 3px solid var(--brand-cyan, #00A7C4); }
.qd__headmeta { text-align: right; }
.qd__kicker { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.qd__num { font-weight: 700; color: #fff; }
.qd__body { padding: 2rem; }
.qd__body h1 { margin: .2rem 0 .5rem; font-size: 1.6rem; color: #fff; }
.qd__body h2 { margin: 2rem 0 .7rem; font-size: 1.12rem; color: #fff; }
.qd__for { margin: 0 0 1rem; opacity: .9; }
.qd__lead { margin: 0 0 .6rem; line-height: 1.75; color: var(--dk-text-mute, #9aa7bf); }
.qd__note { font-size: .88rem; opacity: .75; margin: .2rem 0 .8rem; }
.qd__banner { border-radius: 12px; padding: .85rem 1.1rem; margin: 0 0 1.2rem; line-height: 1.6; }
.qd__banner--ok { background: rgba(24, 160, 110, .14); border: 1px solid rgba(24, 160, 110, .5); }
.qd__banner--err { background: rgba(178, 58, 72, .16); border: 1px solid rgba(178, 58, 72, .5); }
.qd__banner--muted { background: rgba(255, 255, 255, .05); border: 1px solid var(--dk-line, #17233f); }
.qd__items { border: 1px solid var(--dk-line, #17233f); border-radius: 12px; overflow: hidden; }
.qd__item { display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--dk-line, #17233f); }
.qd__item:last-child { border-bottom: 0; }
.qd__item-main h3 { margin: 0 0 .3rem; font-size: 1rem; color: #fff; }
.qd__item-main p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--dk-text-mute, #9aa7bf); }
.qd__item-amt { text-align: right; white-space: nowrap; }
.qd__item-amt strong { color: #fff; font-size: 1.02rem; }
.qd__qty { display: block; font-size: .8rem; opacity: .7; margin-bottom: .15rem; }
.qd__totals { margin: 1rem 0 0; display: grid; gap: .4rem; justify-content: end; }
.qd__totals div { display: flex; gap: 2.2rem; justify-content: space-between; min-width: 16rem; }
.qd__totals dt { opacity: .8; } .qd__totals dd { margin: 0; font-weight: 600; }
.qd__grand { border-top: 1px solid var(--dk-line, #17233f); padding-top: .5rem; font-size: 1.15rem; }
.qd__grand dd { color: var(--brand-cyan, #00A7C4); }
.qd__sched { list-style: none; counter-reset: qd; margin: 0; padding: 0; display: grid; gap: .9rem; }
.qd__sched li { counter-increment: qd; position: relative; padding-left: 2.6rem; }
.qd__sched li::before { content: counter(qd); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem;
    border: 2px solid var(--brand-cyan, #00A7C4); border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: .85rem; color: var(--brand-cyan, #00A7C4); }
.qd__sched-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.qd__sched-head span { font-size: .84rem; opacity: .75; }
.qd__sched p { margin: .25rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--dk-text-mute, #9aa7bf); }
.qd__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.qd__docs li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem;
    border: 1px solid var(--dk-line, #17233f); border-radius: 10px; }
.qd__docs a { color: var(--brand-cyan, #00A7C4); }
.qd__docs span { opacity: .7; font-size: .85rem; white-space: nowrap; }
.qd__decide { display: grid; grid-template-columns: 3fr 2fr; gap: 1.4rem; margin-top: 2.2rem; }
@media (max-width: 760px) { .qd__decide { grid-template-columns: 1fr; } }
.qd__accept, .qd__amendbox { border: 1px solid var(--dk-line, #17233f); border-radius: 14px; padding: 1.3rem; }
.qd__accept { border-color: rgba(0, 167, 196, .55); }
.qd__accept h2, .qd__amendbox h2 { margin-top: 0; }
.qd__accept p, .qd__amendbox p { font-size: .92rem; line-height: 1.65; color: var(--dk-text-mute, #9aa7bf); }
.qd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .qd__grid { grid-template-columns: 1fr; } }
.qd__fld label { display: block; font-weight: 600; margin-bottom: .35rem; color: #fff; font-size: .92rem; }
.qd__fld label span { font-weight: 400; opacity: .6; font-size: .82rem; }
.qd__fld input, .qd__amendbox textarea { width: 100%; background: var(--dk-bg, #070f22);
    border: 1px solid var(--dk-line, #17233f); border-radius: 10px; color: inherit; font: inherit;
    font-size: max(16px, 1rem); padding: .65rem .8rem; }
.qd__fld input:focus-visible, .qd__amendbox textarea:focus-visible, .qd__agree input:focus-visible,
.qd__btn:focus-visible { outline: 2px solid var(--brand-cyan, #00A7C4); outline-offset: 1px; }
.qd__agree { display: flex; gap: .6rem; align-items: flex-start; margin: .9rem 0 1rem;
    font-size: .92rem; line-height: 1.6; cursor: pointer; }
.qd__agree input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand-cyan, #00A7C4);
    cursor: pointer; flex: none; }
.qd__btn { width: 100%; background: var(--brand-cyan, #00A7C4); color: #04121f; border: 0; border-radius: 10px;
    font: inherit; font-weight: 700; padding: .8rem 1rem; cursor: pointer; }
.qd__btn:hover { filter: brightness(1.07); }
.qd__btn--ghost { background: none; border: 1px solid var(--dk-line, #2a3a5c); color: inherit; margin-top: .8rem; }
.qd__btn--ghost:hover { border-color: var(--brand-cyan, #00A7C4); filter: none; }
.qd__amendbox textarea { margin-bottom: 0; }
.qd__foot { margin: 2.2rem 0 0; font-size: .82rem; opacity: .7; }
.qd__foot a { color: var(--brand-cyan, #00A7C4); }

/* ------------------------------------------------------------ consent banner
   Sits at the foot of the viewport rather than over the content, because a
   question about cookies is not more important than the page somebody came to
   read. Accepting and declining are the same size and weight: consent obtained
   by making refusal tedious is not consent. */
.consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--bg-surface, #fff);
    border-top: 1px solid var(--border-subtle, #dfe3e8);
    box-shadow: 0 -6px 24px rgba(3, 12, 28, .10);
}
.consent__inner {
    max-width: 1120px; margin: 0 auto; padding: 18px 20px;
    display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.consent__text { flex: 1 1 380px; min-width: 0; }
/* Colours are stated rather than inherited. The banner is fixed to the
   viewport, so it can be sitting over a dark section whose text colour would
   otherwise be carried in and leave the wording nearly invisible on white. */
.consent__title { font-size: 1rem; margin: 0 0 4px; font-weight: 600;
                  color: var(--text-strong, #191d25); }
.consent__body { margin: 0; font-size: .875rem; line-height: 1.5;
                 color: var(--text-default, #3c4453); }
.consent__body a { color: var(--accent, #0b7fab); text-decoration: none; font-weight: 600; }
.consent__body a:hover, .consent__body a:focus { text-decoration: none; }
.consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
/* Both buttons are the same size and weight. Only the fill differs, so the
   preferred answer is visible without the other being made awkward to find. */
.consent__btn {
    cursor: pointer; white-space: nowrap;
    padding: 10px 18px; border-radius: 8px; font-size: .875rem; font-weight: 600;
    border: 1px solid var(--border-strong, #b9c0cc);
    background: var(--bg-surface, #fff); color: var(--text-strong, #191d25);
    transition: background-color 140ms ease, border-color 140ms ease;
}
.consent__btn:hover { background: var(--bg-hover, #f2f5f9); }
.consent__btn.btn-a--primary {
    background: var(--accent, #0b7fab); border-color: var(--accent, #0b7fab);
    color: var(--accent-on, #fff);
}
.consent__btn.btn-a--primary:hover { filter: brightness(1.06); }

@media (max-width: 620px) {
    .consent__inner { padding: 14px 16px; gap: 12px; }
    .consent__actions { width: 100%; }
    .consent__btn { flex: 1 1 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }