/* ============================================================================================
   /Start — scoped design tokens. LIGHT.

   SCOPED TO .mx-start ON PURPOSE. Everything here is namespaced so the new page can be redesigned
   without shifting a single existing screen while both homes coexist.

   Light-first, because the audience works in white-ground document and spreadsheet environments all
   day and the credit memo they produce is light. A dark tool between two light surfaces is a jarring
   context switch, not a calmer one.

   LOW-FATIGUE LIGHT IS NOT PURE WHITE. The page ground is a soft, faintly teal-tinted off-white;
   cards sit on it in true white so number-dense tables get maximum local contrast while the overall
   field stays soft. That inversion — soft ground, crisp card — is what keeps a long session
   comfortable without dulling the figures.

   Teal is the accent only: the mark, the primary action, active state, focus rings. Text-sized teal
   is darkened to a readable tone; the saturated brand teal is reserved for surfaces large enough to
   carry it.

   No gradients, no decorative shadows, no external fonts, no new dependencies.
   ============================================================================================ */

.mx-start,
.mx-auth {
    /* Ground and surfaces. */
    --mx-bg:        #f2f5f5;   /* soft off-white, faint teal cast — never #fff */
    --mx-surface:   #ffffff;   /* cards: crisp, so financial tables read cleanly */
    --mx-surface-2: #eaf0ef;   /* hover / secondary fill */
    --mx-line:      #dae2e2;

    /* Ink. Cool near-black rather than pure black: high contrast without the glare. */
    --mx-text:      #16242a;   /* ~14:1 on white */
    --mx-text-dim:  #5b6d72;   /* ~5.2:1 on white — passes for small text, unlike a lighter grey */

    /* Brand. Two teals on purpose: one to sit under white text, one to BE text. */
    --mx-teal:      #2a9d8f;   /* saturated — fills and the mark only */
    --mx-teal-ink:  #1c7268;   /* darkened — teal used as text or a focus ring */
    --mx-teal-deep: #17615a;   /* pressed / hover on a teal fill */
    --mx-blue:      #1b9ce0;
    --mx-warn:      #9a6414;   /* amber darkened for contrast on light */

    /* One spacing scale; every gap below is a multiple of it. */
    --mx-1: .25rem;  --mx-2: .5rem;   --mx-3: .75rem;
    --mx-4: 1rem;    --mx-5: 1.5rem;  --mx-6: 2rem;   --mx-7: 3rem;

    --mx-radius: 10px;

    background: var(--mx-bg);
    color: var(--mx-text);
    min-height: 100vh;
    padding: var(--mx-6) 0 var(--mx-7);

    /* FULL BLEED OUT OF THE SHARED LAYOUT. _Layout wraps RenderBody in a .container, which would
       otherwise leave the page ground floating in a gutter of a different shade. Escaping to
       viewport width here avoids restructuring the layout — which every other page shares and none
       of them needs changed. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    font-feature-settings: "tnum" 1;   /* lining figures — money columns must align */
}

/* ============================================================================================
   AUTH PAGES — sign in / register.

   Shares the tokens above rather than restating them, so the first screen anyone sees and the
   first screen they land on after signing in are unmistakably the same product. Presentation
   only: the forms, field names and handlers are untouched.
   ============================================================================================ */
.mx-auth {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--mx-7);
}
.mx-auth .mx-auth-panel { width: 100%; max-width: 25rem; }

/* The lockup carries the identity; the heading underneath stays quiet so the page reads as one
   calm block rather than three competing titles. */
.mx-auth .mx-auth-brand { text-align: center; margin-bottom: var(--mx-6); }
.mx-auth .mx-auth-brand img { width: 100%; max-width: 15rem; height: auto; }

.mx-auth .mx-auth-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: var(--mx-6) var(--mx-5);
}
.mx-auth h1 { font-size: 1.25rem; margin-bottom: var(--mx-1); }
.mx-auth .mx-auth-sub { color: var(--mx-text-dim); font-size: .875rem; margin-bottom: var(--mx-5); }

.mx-auth .form-label { font-size: .8125rem; font-weight: 600; color: var(--mx-text-dim); margin-bottom: var(--mx-1); }

/* Inputs inherit the token border/ground so they match /Start's controls exactly. */
.mx-auth .form-control,
.mx-auth .form-control:focus {
    background: var(--mx-surface);
    color: var(--mx-text);
    border: 1px solid var(--mx-line);
    border-radius: 8px;
    padding: .5rem .75rem;
    box-shadow: none;
}
.mx-auth .form-control:focus { outline: 2px solid var(--mx-teal-ink); outline-offset: 1px; border-color: transparent; }

/* Primary action: the saturated brand teal with dark ink — the same pairing /Start uses for
   "Continue at", which clears contrast where teal-with-white would not. */
.mx-auth .mx-auth-submit {
    width: 100%;
    background: var(--mx-teal); color: #06251f;
    font-weight: 650;
    border: 0; border-radius: 8px;
    padding: .5625rem var(--mx-4);
}
.mx-auth .mx-auth-submit:hover { background: var(--mx-teal-deep); color: #ffffff; }

.mx-auth a { color: var(--mx-teal-ink); }
.mx-auth .form-check-input:checked { background-color: var(--mx-teal); border-color: var(--mx-teal); }
.mx-auth .form-check-label { font-size: .875rem; color: var(--mx-text-dim); }

.mx-auth a:focus-visible, .mx-auth button:focus-visible, .mx-auth input:focus-visible {
    outline: 2px solid var(--mx-teal-ink); outline-offset: 2px; border-radius: 6px;
}

.mx-auth .mx-auth-foot { text-align: center; margin-top: var(--mx-5); font-size: .8125rem; color: var(--mx-text-dim); }

.mx-start h1, .mx-start h2, .mx-start h3 { letter-spacing: -0.02em; font-weight: 650; }
.mx-start .mx-dim { color: var(--mx-text-dim); }

/* Eyebrow label above a block — small, spaced, quiet. */
.mx-start .mx-eyebrow {
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mx-text-dim);
}

.mx-start .mx-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: var(--mx-5);
}

/* The two top-level choices. Big targets — this is the first decision of the day. */
.mx-start .mx-choice {
    display: block;
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: var(--mx-5);
    text-decoration: none;
    color: var(--mx-text);
    transition: border-color .12s ease, background .12s ease;
}
.mx-start .mx-choice:hover,
.mx-start .mx-choice:focus-visible {
    border-color: var(--mx-teal);
    background: var(--mx-surface-2);
}
.mx-start .mx-choice .mx-choice-title { font-size: 1.0625rem; font-weight: 650; }

/* Deal rows: the daily surface. Dense, scannable, one click to resume. */
.mx-start .mx-deal {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--mx-4);
    align-items: center;
    padding: var(--mx-4) var(--mx-5);
    border-bottom: 1px solid var(--mx-line);
}
.mx-start .mx-deal:last-child { border-bottom: 0; }
.mx-start .mx-deal:hover { background: var(--mx-surface-2); }
.mx-start .mx-deal-name { font-weight: 600; }

/* Counts — deliberately quiet; they orient, they are not the point. */
.mx-start .mx-facts { font-size: .8125rem; color: var(--mx-text-dim); }
.mx-start .mx-facts span + span::before { content: "·"; margin: 0 var(--mx-2); opacity: .6; }

/* "Continue at <step>" — the inferred step, named so a wrong guess is visible.
   Saturated teal fill with dark ink rather than white: teal-on-white text would fail contrast,
   whereas this pairing clears it comfortably and keeps the brand colour at full strength. */
.mx-start .mx-resume {
    display: inline-flex; align-items: center; gap: var(--mx-2);
    background: var(--mx-teal); color: #06251f;
    font-weight: 650; font-size: .875rem;
    border: 0; border-radius: 8px;
    padding: var(--mx-2) var(--mx-4);
    text-decoration: none; white-space: nowrap;
}
.mx-start .mx-resume:hover { background: var(--mx-teal-deep); color: #ffffff; }

.mx-start .mx-ghost {
    background: var(--mx-surface); color: var(--mx-text);
    border: 1px solid var(--mx-line); border-radius: 8px;
    padding: var(--mx-2) var(--mx-4); text-decoration: none;
    font-size: .875rem; font-weight: 600;
}
.mx-start .mx-ghost:hover { border-color: var(--mx-teal); color: var(--mx-teal-ink); }

/* Placeholder affordance — visibly not-yet-working, never a dead button that looks live. */
.mx-start .mx-placeholder {
    background: var(--mx-surface);
    border: 1px dashed var(--mx-line);
    border-radius: var(--mx-radius);
    padding: var(--mx-4);
    color: var(--mx-text-dim);
}
.mx-start .mx-tag-soon {
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mx-warn); border: 1px solid currentColor; border-radius: 4px;
    padding: 0 var(--mx-2);
}

.mx-start .mx-input {
    background: var(--mx-surface); color: var(--mx-text);
    border: 1px solid var(--mx-line); border-radius: 8px;
    padding: var(--mx-2) var(--mx-3);
}
.mx-start .mx-input:focus {
    outline: 2px solid var(--mx-teal-ink); outline-offset: 1px; border-color: transparent;
}

/* One visible focus treatment for everything keyboard-reachable. The darkened teal is used here
   because a focus ring must be visible against BOTH the soft ground and the white cards. */
.mx-start a:focus-visible, .mx-start button:focus-visible, .mx-start select:focus-visible {
    outline: 2px solid var(--mx-teal-ink); outline-offset: 2px; border-radius: 6px;
}

.mx-start .mx-empty { text-align: center; padding: var(--mx-7) var(--mx-5); }