/* Ledgaa base: reset, typography defaults, focus states, motion guard. */

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

html {
    -webkit-text-size-adjust: 100%;
    /* R (docs/specs/OWNER-REVIEW-2026-08-05-PART-4.md): "our brand color is
       not used there, are more like it". accent-color is the one CSS
       property that reaches INTO native chrome: checkbox/radio checkmarks,
       range sliders, and (Chromium/Edge) the selected-day highlight inside
       a native date input's own popup calendar. Forcing light color-scheme
       stops that popup rendering in a mismatched OS dark theme with a blue
       highlight fighting our warm palette; the popup frame itself stays
       native chrome (no CSS can reach it), which is why .brand-date below
       also exists for the pages that use a date input. */
    accent-color: var(--color-accent);
    color-scheme: light;
}

body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/* Author "svg { display: block }" above would otherwise beat the UA
   stylesheet's [hidden] rule, since author CSS always wins over UA CSS
   regardless of specificity. Restore hidden's real behaviour explicitly. */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------- buttons */
/* Shared across marketing, auth and app surfaces, so this lives in base.css
   rather than marketing.css: an auth or app page that never loads
   marketing.css must still get a real .btn-primary, not a bare UA button. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target-min);
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--color-ink);
    color: var(--color-canvas);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--color-accent-strong);
    color: var(--color-ink-on-accent);
    box-shadow: var(--shadow-md);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-ink-on-accent);
    box-shadow: var(--shadow-float);
}

.btn-accent:hover {
    background: var(--color-accent-strong);
    transform: translateY(-1px);
}

.btn-ghost {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
    background: var(--color-surface-alt);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target-min);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-strong);
    padding: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                gap var(--duration-fast) var(--ease-standard);
}

.btn-text:hover {
    color: var(--color-accent-strong);
    border-color: var(--color-accent);
    gap: var(--space-3);
}

h1, h2, h3, h4, p, figure {
    margin: 0;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------- focus states
   N1 (docs/specs/OWNER-REVIEW-2026-08-05-PART-3.md): the browser default
   focus ring, a thick solid rectangle sitting outside the control, is what
   reads as "2000s web form". Replaced product-wide with a soft halo, a
   box-shadow rather than an outline, which automatically follows each
   control's own border-radius (pill buttons get a pill halo, rounded
   inputs get a rounded halo) instead of squaring off a rounded shape.
   Never removed outright: every focusable element still gets a visible,
   on-brand indicator, this only changes its shape and colour.

   Typing controls (input/textarea/select) show the halo on ANY focus, not
   only :focus-visible, because a person who just clicked into a field
   still needs to see where their cursor landed. Everything else (links,
   buttons, checkboxes, radios, custom tabindex controls) shows it only on
   :focus-visible, so a mouse click leaves a clean control rather than a
   ring the click itself already made obvious -- this is the "mouse click
   and keyboard tab differ sensibly" requirement. */
a,
button,
input,
textarea,
select,
summary,
[tabindex] {
    outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="range"]:focus-visible {
    box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 5px var(--color-accent);
    border-radius: var(--radius-sm);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* --------------------------------------------------- checkboxes, radios
   R (docs/specs/OWNER-REVIEW-2026-08-05-PART-4.md): native checkbox/radio
   glyphs render in the OS accent colour on most platforms regardless of
   `accent-color` (Windows/Chrome in particular still shows its own blue
   tick). Rebuilt as a real custom control: the native input stays in the
   DOM, functional, keyboard-operable and screen-reader-labelled exactly as
   before (no JS involved, nothing to progressively enhance), just drawn
   with `appearance: none` and a CSS-only box/tick or dot on top of it. */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--color-border-strong, var(--color-hairline));
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

input[type="checkbox"] {
    border-radius: 6px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

input[type="checkbox"]:checked::after {
    content: '';
    width: 11px;
    height: 7px;
    border-left: 2px solid var(--color-ink-on-accent);
    border-bottom: 2px solid var(--color-ink-on-accent);
    transform: rotate(-45deg) translateY(-1px);
}

input[type="radio"]:checked::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-ink-on-accent);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--color-accent);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----------------------------------------------------- number spinners
   R + S5 (docs/specs/OWNER-REVIEW-2026-08-05-PART-4.md): the up/down
   spinner is the browser's own tiny widget (grey, sometimes tinted by the
   OS theme) and rendered inconsistently between rows on the Products
   table, which is its own bug (S5) on top of the colour leak (R). Removed
   everywhere rather than restyled: there is nothing brand-coloured to
   restyle it into, and removing it fixes both the colour leak and the
   row-to-row inconsistency in one rule. Typing and the up/down arrow keys
   both still work; only the tiny on-hover spin buttons are gone. */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* ------------------------------------------------------------ scrollbars
   R: any scrollable surface (the chat log, a wide table's horizontal
   scroll) previously fell back to the OS scrollbar, blue-tinted on some
   platforms. Firefox's two-value property first, then the WebKit
   pseudo-elements; both are additive, neither breaks scrolling if unknown
   to a given engine. */
* {
    scrollbar-color: var(--color-border-strong, var(--color-hairline)) var(--color-surface-alt);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong, var(--color-hairline));
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-surface-alt);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-ink);
    color: var(--color-canvas);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 1000;
}

.skip-link:focus {
    left: var(--space-3);
    top: var(--space-3);
}

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

/* Enter-viewport animation, disabled entirely without JS and softened
   under reduced motion. Content is visible by default (no JS = no hiding). */
.reveal {
    opacity: 1;
    transform: none;
}

/* Content is NEVER hidden by CSS that depends on JavaScript to undo it.
   An earlier build hid 16 blocks behind .js-motion and the reveal never fired,
   so most of the page was invisible to every visitor. The rise is now purely
   additive: it plays when the observer marks an element visible, and if that
   never happens the content still renders normally, just without the motion. */
.js-motion .reveal {
    transform: translateY(14px);
    transition: transform var(--duration-slow) var(--ease-standard);
}

.js-motion .reveal.is-visible {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .js-motion .reveal {
        opacity: 1;
        transform: none;
    }
}

/* A6 (docs/specs/OWNER-REVIEW-2026-08-04.md): "use custom brand drop down
   menus always ... non brand colors like the blue dont pollute the design
   in any section be it drop down, forms etc." A raw <select> renders its
   OPEN option list using the operating system's own styling (Windows
   Chrome draws it in the system accent blue, exactly what the owner's
   screenshot showed inside the payment form), which CSS alone cannot
   restyle. Two layers, so the control is honest either way:
   1. The native <select> itself always gets this brand reset (custom
      chevron, brand border/focus, no browser chrome) -- this is what
      renders with JavaScript off, or for the instant before JS runs.
   2. assets/js/brand-select.js progressively enhances any
      select[data-brand-select] into a fully custom listbox (below) so the
      OPEN list is brand-styled too, not just the closed control. */
select.field__input,
select.teams-field__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* Once JS has wrapped a select[data-brand-select], the native control is
   removed from view and from the accessibility tree (brand-select.js sets
   aria-hidden and tabindex="-1" on it); the .brand-select widget below is
   the only thing a mouse, keyboard or screen reader ever reaches. */
select.brand-select__native {
    display: none;
}

.brand-select {
    position: relative;
}

.brand-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--tap-target-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong, var(--color-hairline));
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.brand-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-select__chevron {
    flex-shrink: 0;
    color: var(--color-ink-faint);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.brand-select.is-open .brand-select__chevron {
    transform: rotate(180deg);
}

.brand-select__trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.brand-select.is-disabled .brand-select__trigger {
    cursor: not-allowed;
    opacity: 0.6;
}

.brand-select__listbox {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(45, 46, 46, 0.14));
}

.brand-select__option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    cursor: pointer;
}

.brand-select__option.is-active {
    background: var(--color-accent-soft);
}

.brand-select__option.is-selected {
    font-weight: 700;
}

.brand-select__option.is-disabled {
    color: var(--color-ink-faint);
    cursor: not-allowed;
}

/* -------------------------------------------------------------- dates
   R (docs/specs/OWNER-REVIEW-2026-08-05-PART-4.md): the native calendar
   TRIGGER icon inside `input[type=date]`, restyled brand-coloured even
   with JavaScript off (this alone does not reach the OS popup itself,
   which is why brand-date.js's own trigger+panel exist for browsers that
   run it). Chromium-only pseudo-element; unsupported engines just keep
   their own icon, never a broken one. */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(41%) sepia(41%) saturate(1074%) hue-rotate(335deg) brightness(91%) contrast(87%);
    cursor: pointer;
}

.brand-date {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.brand-date input[type="date"] {
    flex: 1;
}

.brand-date__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border-strong, var(--color-hairline));
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent-strong);
    cursor: pointer;
}

.brand-date__trigger:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
}

.brand-date.is-open .brand-date__trigger {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
}

.brand-date__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 280px;
    max-width: calc(100vw - var(--space-6));
    padding: var(--space-4);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(45, 46, 46, 0.14));
}

.brand-date__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.brand-date__label {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-ink);
}

.brand-date__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    color: var(--color-ink);
    cursor: pointer;
}

.brand-date__nav:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.brand-date__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: var(--space-1);
}

.brand-date__weekdays span {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-ink-faint);
}

.brand-date__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.brand-date__cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-ink);
    font-size: var(--text-sm);
    cursor: pointer;
}

.brand-date__cell--blank {
    cursor: default;
}

.brand-date__cell:not(.brand-date__cell--blank):hover {
    background: var(--color-accent-soft);
}

.brand-date__cell.is-today {
    font-weight: 700;
    color: var(--color-accent-strong);
}

.brand-date__cell.is-selected {
    background: var(--color-accent);
    color: var(--color-ink-on-accent);
}

.brand-date__cell:disabled {
    color: var(--color-ink-faint);
    cursor: not-allowed;
    opacity: 0.4;
}