/* Oswald - self-hosted variable font (latin), primary app font per UX Spec slide 3. */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('fonts/oswald.woff2') format('woff2');
}

:root {
    /* Fixed 3:2 design canvas. All forms are authored against these dimensions and
       scaled uniformly to fit the window; --app-scale is set by js/app-frame.js. */
    --design-w: 1920px;
    --design-h: 1280px;
    --app-scale: 1;

    --app-font: 'Oswald', 'Segoe UI', Helvetica, Arial, sans-serif;

    /* ── Brand palette (UX Spec slides 32 "Logo and Branding" + 33 "Colors") ──────
       Main UI colors are ONLY orange, grays, blue, black and white. RED is reserved
       exclusively for diagram dimensions/notes of cuts being made (see Pages/*.razor,
       which keep the literal #ff0000 --cut-red); it is never used in app chrome. */

    /* Orange — logo "PRO" + section-separator accent lines ("use these exact colors"). */
    --brand-orange:        #ff9900;
    --brand-orange-hover:  #e08800;

    /* Darker orange for solid orange buttons (e.g. "Next"): the brand #ff9900 is too
       light behind white text (~2.1:1), so buttons use a darker shade for legible
       contrast (~3.7:1) while still clearly reading as orange. */
    --brand-orange-btn:       #cc6a00;
    --brand-orange-btn-hover: #b85c00;

    /* Blue — activity buttons (slide 33) and diagram supporting info/notes. */
    --activity-blue:       #2f5496;   /* accent5 @ 75% lum — activity/primary buttons */
    --activity-blue-hover: #26456d;
    --diagram-blue:        #0070c0;   /* diagram supporting information & notes */

    /* Grays (multiple). Logo wordmark: RIFLE (dark) + BUILDER (mid). */
    --logo-gray-dark: #404040;   /* logo "RIFLE"  (tx1 @ 75% lumMod / 25% off) */
    --logo-gray-mid:  #808080;   /* logo "BUILDER" (tx1 @ 50% / 50%) */
    --nav-gray:       #a6a6a6;   /* "Back" + disabled navigation (slide 33) */
    --gray-900:       #1b1b1b;   /* near-black chrome / body ink */
    --gray-800:       #2a2a2a;
    --gray-700:       #3a3a3a;
    --gray-500:       #808080;
    --gray-400:       #9a9a9a;
    --gray-300:       #d8d8d8;
    --gray-200:       #e0e0e0;
    --gray-100:       #f0f0f0;

    --ink:   #1b1b1b;   /* primary text */
    --paper: #ffffff;   /* surfaces */

    /* Cut dimensions/notes ONLY — never in chrome. */
    --cut-red: #ff0000;

    --frame-bg: #f5f5f5;
    --letterbox-bg: #0e0e0e;
}

html, body {
    font-family: var(--app-font);
    margin: 0;
    height: 100%;
    background-color: var(--letterbox-bg);
    overflow: hidden;
}

/* Full-window stage that holds the centered, scaled design canvas. The leftover
   space around the 3:2 frame (when the window isn't 3:2) is neutral letterbox. */
.app-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--letterbox-bg);
}

/* The design canvas: fixed 1920x1280, centered, then scaled as one unit so fonts
   and layout scale exactly and proportionally. */
.app-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--design-w);
    height: var(--design-h);
    transform: translate(-50%, -50%) scale(var(--app-scale));
    transform-origin: center center;
    overflow: hidden;
    background: var(--frame-bg);
}

h1 {
    font-size: 1.6rem;
    margin: 0 0 1rem;
}

a {
    color: var(--activity-blue);
    text-decoration: none;
}

.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }

.nav { display: flex; }
.flex-column { flex-direction: column; }
.nav-link { text-decoration: none; padding-left: 1rem; }

.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.table th, .table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.loading {
    padding: 2rem;
    color: #666;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }