/* ============================================================
   RIPROKA - BASE
   ------------------------------------------------------------
   Requires rk-tokens.css, which must be linked FIRST.

   Scope of this file: reset, document defaults, typography, and
   the pre-Blazor boot screen. Component styles do NOT live here -
   each control in Riproka.UI.Controls carries its own scoped CSS
   and references tokens.

   No raw colours. No raw sizes. Tokens only.
   ============================================================ */

/* 1. RESET --------------------------------------------------- */

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

button,
a,
select,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

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

/*
    REDUCED MOTION, WITH ONE DELIBERATE EXCEPTION.

    Everything stops - except an element marked data-rk-motion="keep", which SLOWS to
    --rk-dur-reduced instead. That exception exists for progress indicators only: a spinner is
    the single signal that work is happening, and freezing it tells the user the opposite of
    the truth. The blanket !important rule below would otherwise beat every component's own
    reduced-motion rule, so the exemption has to live here beside it.
*/
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *:not([data-rk-motion="keep"]),
    *:not([data-rk-motion="keep"])::before,
    *:not([data-rk-motion="keep"])::after {
        animation-duration: var(--rk-dur-none) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--rk-dur-none) !important;
    }

    [data-rk-motion="keep"] {
        animation-duration: var(--rk-dur-reduced) !important;
    }
}

/* 2. DOCUMENT ------------------------------------------------ */

html,
body {
    margin: 0;
    padding: 0;
    background: var(--rk-paper);
    color: var(--rk-ink);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-base);
    font-weight: var(--rk-fw-body);
}

body {
    min-height: 100dvh;
    /* Respect notches and home indicators without the app knowing about them. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* 3. TYPOGRAPHY ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    margin: 0 0 var(--rk-sp-10);
    text-transform: uppercase;
}

h1 { font-size: var(--rk-fs-7xl); letter-spacing: var(--rk-track-7xl); }
h2 { font-size: var(--rk-fs-5xl); letter-spacing: var(--rk-track-5xl); }
h3 { font-size: var(--rk-fs-4xl); letter-spacing: var(--rk-track-4xl); }
h4 { font-size: var(--rk-fs-3xl); letter-spacing: var(--rk-track-3xl); }
h5 { font-size: var(--rk-fs-2xl); letter-spacing: var(--rk-track-2xl); }
h6 { font-size: var(--rk-fs-xl);  letter-spacing: var(--rk-track-xl); }

p {
    margin: 0 0 var(--rk-sp-12);
    line-height: var(--rk-lh-prose);
}

a {
    color: var(--rk-accent-deep);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--rk-accent-ink);
}

small {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

code,
kbd,
pre,
samp,
.rk-num {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

/*
   Numbers that must line up in a column - money, quantities,
   document numbers, times. Tabular figures are the whole point:
   a dispatcher scanning a column should not see digits dance.
*/
.rk-num {
    font-size: var(--rk-fs-lg);
}

hr {
    border: 0;
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    margin: var(--rk-sp-14) 0;
}

/* 4. FOCUS ---------------------------------------------------
   One visible focus ring, everywhere, keyboard-only. Never
   remove it: this app is operated by people who live on the
   keyboard all day.
   ------------------------------------------------------------ */

:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 2px;
}

/* 5. THE APP COLUMN ------------------------------------------ */

.rk-col {
    width: 100%;
    max-width: var(--rk-col);
    margin-inline: auto;
    padding-inline: var(--rk-gutter);
}

/* 6. BOOT SCREEN ---------------------------------------------
   Shown by index.html before the WASM runtime has started, so it
   cannot depend on anything Blazor provides.
   ------------------------------------------------------------ */

.rk-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rk-sp-16);
    background: var(--rk-paper);
}

.rk-boot__mark {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-5xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-hero);
    color: var(--rk-ink);
}

.rk-boot__bar {
    width: 160px;
    height: var(--rk-sp-4);
    background: var(--rk-line);
    overflow: hidden;
}

.rk-boot__bar span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--rk-accent);
    animation: rk-boot-slide 1.1s ease-in-out infinite;
}

@keyframes rk-boot-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/*
   THE UPDATING LINE. The self-healing boot in index.html (the portal's
   and the admin console's - one script, two copies) adds it under the
   bar when the app could not start because a publish was still landing,
   and reloads the page itself a few seconds later. Calm on purpose:
   the splash keeps moving and nothing is red, because nothing is wrong
   that waiting will not fix. The red bar is kept for the case it cannot
   fix.
*/
.rk-boot__note {
    max-width: var(--rk-measure);
    padding-inline: var(--rk-gutter);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-base);
    color: var(--rk-ink-soft);
    text-align: center;
}

/* 7. BLAZOR ERROR UI ----------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rk-z-chrome);
    padding: var(--rk-sp-12) var(--rk-sp-16);
    background: var(--rk-danger);
    color: var(--rk-white);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    box-shadow: var(--rk-shadow-float);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: var(--rk-white);
    cursor: pointer;
    margin-left: var(--rk-sp-12);
}

#blazor-error-ui .dismiss {
    float: right;
}

/* 8. SCROLLBARS ----------------------------------------------
   The source app only ever HIDES scrollbars, which is right for
   a phone and wrong for a dispatcher dragging a 400-row board.
   Styled, always visible where there is overflow, tokenised.
   ------------------------------------------------------------ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--rk-line-hard) transparent;
}

*::-webkit-scrollbar {
    width: var(--rk-scrollbar);
    height: var(--rk-scrollbar);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--rk-line-hard);
    border: var(--rk-sp-2) solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--rk-steel);
    background-clip: content-box;
}

/*
   The one place hiding is still right: a horizontally scrolling
   chip row or pivot, where the bar would sit on top of content.
*/
.rk-scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
}

.rk-scroll-x::-webkit-scrollbar {
    display: none;
}

/* 9. PRINT ---------------------------------------------------
   The colour half of printing is token overrides and lives in
   rk-tokens.css, which is the only file allowed a raw hex. What
   is left here is what to HIDE - every component already reads
   the tokens, so nothing else needs a print rule.
   ------------------------------------------------------------ */

@media print {
    .rk-no-print,
    #blazor-error-ui {
        display: none !important;
    }

    body {
        background: var(--rk-paper);
    }
}