/* theos-entry.css — one visual system for every pre-app screen.
   =========================================================================
   USER 2026-09-16, supplying C:\Users\Liam\Downloads\TheOS-Login-Source:
     "exact design replicate the current login screen of our platform.. we
      environment screen, login screen and superadmin.. to the pixel perfect
      as per source" · "remember our screen has many function.. the purpose is
      to make design replication and theme and font, and colour.. dont kill
      current" · "current login has too much text.. all that can be removed to
      this new clean look" · "do it all pages" · "uber modern svelte".

   ── WHAT THIS IS
   The reference's `css/theme.css` tokens and control language, lifted intact
   and made shareable. Three surfaces consume it:
     1. templates/auth/login.html      — workspace sign-in + super admin
     2. templates/auth/_mfa_base.html  — forgot/reset/change password, MFA
        enrol, MFA verify, recovery codes (6 pages inherit that one base)
     3. plato-desktop/setup.html       — the Electron environment screen
   Before this, those three were violet, slate-navy and teal respectively —
   three looks in one product.

   ── WHY A SHARED FILE AND NOT THREE COPIES
   The environment screen runs in Electron over file://, where Flask's
   url_for() does not exist, so it cannot link a /static/ URL. It gets a
   generated copy (see tools/sync_entry_css.py) rather than a hand-kept
   duplicate — one source of truth, copied mechanically.

   ── WHAT IS TAKEN FROM THE REFERENCE
   Colour, type, spacing, radius, motion, control shapes. Verbatim values.

   ── WHAT IS NOT
   Behaviour. Every endpoint, gesture, storage key and constant on the
   existing screens survives untouched; this file styles them and nothing
   more. The reference's demo/preview fallbacks are NOT ported.
   ========================================================================= */


/* ── fonts ────────────────────────────────────────────────────────────────
   Already bundled for MYLO (static/fonts/bricolage) and byte-identical to the
   reference's copy, so nothing new ships. SIL Open Font License, see OFL.txt.
   The `--theos-font-root` indirection lets the Electron copy repoint the URL
   without touching any rule. */
:root { --theos-font-root: '/static/fonts/bricolage'; }

@font-face {
    font-family: Bricolage;
    src: url('/static/fonts/bricolage/BricolageGrotesque-400.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Bricolage;
    src: url('/static/fonts/bricolage/BricolageGrotesque-500.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}


/* ── tokens — the reference's :root, verbatim ─────────────────────────────
   Named `--theos-*` rather than the reference's bare `--bg` / `--text`: these
   sheets load inside an app whose own surfaces define those very names, and a
   bare `--text` on :root would leak into every page that shares the document.
   The values are unchanged. */
:root {
    color-scheme: dark;
    --theos-bg:            #28262f;
    --theos-surface:       #34313b;
    --theos-raised:        #403b47;
    --theos-input:         #29262f;
    --theos-text:          #f5f0ed;
    --theos-muted:         #c0b8c6;
    --theos-subtle:        #a49ba9;
    --theos-line:          rgba(228, 216, 238, .14);
    --theos-accent:        #e8ddf1;
    --theos-ink:           #302737;
    --theos-focus:         #dfc4ff;
    --theos-error:         #ffd1c9;
    --theos-title:         Bricolage, system-ui, sans-serif;
    --theos-body:          -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --theos-ease:          cubic-bezier(.2, .75, .2, 1);

    /* Not in the reference's token block, but repeated literally throughout
       its rules. Named here so the three surfaces cannot drift apart. */
    --theos-radius:        12px;
    /* MEASURED (computed style, 1440x900), not read from the source text:
       artwork.css overrides theme.css, so these resolve differently than the
       literal declarations suggest. card 25 · workspace field 17 · well 18. */
    --theos-radius-card:   25px;
    --theos-radius-field:  17px;
    --theos-radius-well:   18px;
    --theos-hairline:      #85778f;   /* input:hover border */
    --theos-edge-focus:    #c9afd9;   /* input:focus border */
}


/* ── reset + base ─────────────────────────────────────────────────────────
   Scoped to `.theos-entry` on <body>, never bare element selectors: these
   screens are served by the same Flask app as the product, and a global
   `input { }` rule here would restyle admin pages that merely share a tab. */
/* The BODY ground is #251f2c — artwork.css's final `body{background:#251f2c}`
   wins over theme.css's --bg (#28262f), which survives as the input/field
   ground only. Measured, not transcribed. */
.theos-entry {
    margin: 0;
    /* MEASURED vs the reference at 1440x900: without a full-height flex column
       the entry area shrink-wrapped its content and everything sat 85px too
       high, with the footer 169px above where it belongs. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #251f2c;
    color: var(--theos-text);
    font-family: var(--theos-body);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
.theos-entry *,
.theos-entry *::before,
.theos-entry *::after { box-sizing: border-box; }

.theos-entry h1,
.theos-entry h2,
.theos-entry p { margin: 0; }
.theos-entry h1,
.theos-entry h2 {
    font-family: var(--theos-title);
    font-weight: 400;
}

.theos-entry button,
.theos-entry input { font: inherit; }
.theos-entry button {
    border: 0;
    cursor: pointer;
    color: inherit;
    touch-action: manipulation;
}
.theos-entry button:disabled { cursor: wait; opacity: .6; }
.theos-entry a { color: inherit; }
.theos-entry button,
.theos-entry a,
.theos-entry input,
.theos-entry summary { -webkit-tap-highlight-color: transparent; }

.theos-entry button:focus-visible,
.theos-entry a:focus-visible,
.theos-entry summary:focus-visible,
.theos-entry input:focus-visible {
    outline: 2px solid var(--theos-focus);
    outline-offset: 4px;
}

.theos-entry [hidden] { display: none !important; }


/* ── inputs ───────────────────────────────────────────────────────────── */
.theos-entry input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    min-width: 0;
    color: var(--theos-text);
    background: var(--theos-input);
    border: 1px solid var(--theos-line);
    border-radius: var(--theos-radius);
    padding: 15px 16px;
    line-height: 22px;
    transition: border-color .18s, box-shadow .18s;
}
.theos-entry input:hover { border-color: var(--theos-hairline); }
.theos-entry input:focus {
    outline: none;
    border-color: var(--theos-edge-focus);
    box-shadow: 0 0 0 3px #c9afd915;
}
.theos-entry input::placeholder { color: #a59baa; opacity: 1; }
.theos-entry input[aria-invalid="true"] { border-color: #e8a496; }
/* Chrome paints its own yellow autofill ground, which reads as a bug on a
   dark card. The inset shadow is the only way to override it. */
.theos-entry input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--theos-input) inset;
    -webkit-text-fill-color: var(--theos-text);
}


/* ── icons + icon buttons ─────────────────────────────────────────────── */
.theos-entry .icon {
    height: 20px;
    width: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theos-entry .icon-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: transparent;
    color: var(--theos-muted);
}
.theos-entry .icon-button:hover {
    background: #e0cce212;
    color: var(--theos-text);
}


/* ── typography helpers ───────────────────────────────────────────────── */
.theos-entry .eyebrow {
    font-size: 10px;
    letter-spacing: .19em;
    font-weight: 500;
    color: var(--theos-muted);
}
.theos-entry .text-button {
    padding: 5px 0;
    background: none;
    font-size: 12px;
    color: var(--theos-muted);
}
.theos-entry .text-button:hover { color: var(--theos-text); }
.theos-entry button strong { font-weight: 500; }

/* Visually hidden, still read aloud. The six strings the user cut from the
   login ("Workspace", "Email", "Password" …) become these — the label is
   gone from the screen, NOT from the accessibility tree. */
.theos-entry .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ── buttons ──────────────────────────────────────────────────────────── */
.theos-entry .primary,
.theos-entry .secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    border-radius: var(--theos-radius);
    padding: 14px 19px;
    font-size: 14px;
    font-weight: 500;
    transition: transform .2s var(--theos-ease), background .2s, box-shadow .2s;
}
.theos-entry .primary {
    background: linear-gradient(115deg, #f0e7f5, #d8c5e6);
    color: var(--theos-ink);
    box-shadow: inset 0 1px #ffffffb3, 0 5px 20px #180c2420;
}
.theos-entry .primary:hover {
    background: linear-gradient(115deg, #fff6ff, #e8d5f4);
    box-shadow: inset 0 1px #fff, 0 5px 24px #dcc1ff20;
}
.theos-entry .primary:active,
.theos-entry .secondary:active { transform: scale(.985); }
.theos-entry .secondary {
    background: var(--theos-raised);
    border: 1px solid var(--theos-line);
    color: var(--theos-text);
}
.theos-entry .secondary:hover { background: #4a4254; }


/* ── messages ─────────────────────────────────────────────────────────── */
.theos-entry .form-error {
    color: var(--theos-error);
    font-size: 13px;
    line-height: 1.5;
    padding: 0 0 14px;
}
.theos-entry .field-note {
    display: block;
    font-size: 12px;
    color: var(--theos-muted);
    margin: 8px 0;
    line-height: 1.5;
}


/* ── the wallpaper ────────────────────────────────────────────────────────
   Two drifting halos over a horizon wash. `.glass-aura` is driven by the
   sculpture on the login screen and simply stays at rest elsewhere. */
.theos-entry .wallpaper {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 23% 43%, #77518918, transparent 60%),
        linear-gradient(115deg, #2c2332, #211c2a 65%, #1c1924);
    pointer-events: none;
}
.theos-entry .halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    will-change: transform;
}
.theos-entry .halo-one {
    width: 46vw;
    height: 46vw;
    min-width: 320px;
    min-height: 320px;
    left: -8vw;
    top: -12vh;
    background: radial-gradient(circle, #6b4a82 0%, #6b4a8200 70%);
    animation: theos-halo-drift-a 34s var(--theos-ease) infinite alternate;
}
.theos-entry .halo-two {
    width: 38vw;
    height: 38vw;
    min-width: 260px;
    min-height: 260px;
    right: -6vw;
    bottom: -14vh;
    background: radial-gradient(circle, #8a4f83 0%, #8a4f8300 70%);
    animation: theos-halo-drift-b 41s var(--theos-ease) infinite alternate;
}
.theos-entry .horizon {
    position: absolute;
    inset: auto 0 0 0;
    height: 42vh;
    background: linear-gradient(180deg, #1c1a2300 0%, #1c1a2366 70%, #1a1820 100%);
}
.theos-entry .glass-aura {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s var(--theos-ease);
    background: radial-gradient(
        42% 38% at calc(var(--aura-x, 34) * 1%) calc(var(--aura-y, 50) * 1%),
        #c79ad91f 0%, #c79ad900 72%);
}
@keyframes theos-halo-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4vw, 5vh, 0) scale(1.08); }
}
@keyframes theos-halo-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-5vw, -4vh, 0) scale(1); }
}


/* ── header + footer, shared by all three surfaces ────────────────────── */
.theos-entry .system-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    /* clamp() — the reference computes 67.68px at 1440w, 26px on a phone.
       A flat 34px put the wordmark half a gutter too far left. */
    padding: 20px clamp(26px, 4.7vw, 96px) 18px;
}
.theos-entry .system-brand {
    padding: 0;
    margin: 0;
    align-self: center;
    line-height: 1;
    font-size: inherit;   /* it is an <h1>; the wordmark sets its own size */
}
.theos-entry .wordmark {
    /* MEASURED: the reference's wordmark is inline-FLEX and measures exactly
       34px. A plain inline box adds the font's leading on top of line-height,
       which made ours 41px and pushed the brand off the reference's baseline. */
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--theos-title);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -1.5px;
    line-height: 1;   /* measured: inherited 1.2 made the box 41px, not 34 */
    text-decoration: none;
    color: var(--theos-text);
}
/* USER 2026-09-16: "add the theos logo before the theos text".
   MEASURED: without an explicit size the PNG rendered at its natural width and
   blew the header out to 425px tall, pushing the whole page down. Sized to the
   wordmark's own em so the mark tracks the type at every breakpoint and the
   header box stays exactly 34px. */
.theos-entry .wordmark-logo {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    object-fit: contain;
}
.theos-entry .system-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: right;
    white-space: nowrap;
    line-height: 1.4;
    flex-shrink: 0;
}
.theos-entry #date-label { display: block; font-size: 13px; line-height: 1.4; color: #d4bddf; }
.theos-entry .header-separator {
    display: block;
    width: 1px;
    height: 11px;
    background: #d0b4dd40;
}
.theos-entry #clock {
    display: block;
    font-family: var(--theos-body);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    color: #dbc6e5;
}
.theos-entry #date-short { display: none; }
@supports (background-clip: text) {
    .theos-entry #date-label,
    .theos-entry #clock {
        background: linear-gradient(115deg, #e3d5ef, #d5a3ce 55%, #bca9d7);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.theos-entry .system-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: auto;   /* pinned to the bottom of the full-height column */
    /* MEASURED 19px 40px: the footer keeps a FLAT gutter in the reference —
       only the header clamps with the viewport. */
    padding: 19px 40px;
    padding-bottom: calc(19px + env(safe-area-inset-bottom, 0px));
}
.theos-entry .footer-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    background: none;
    font-size: 12px;
    color: var(--theos-muted);
}
.theos-entry .footer-button:hover { color: var(--theos-text); }
.theos-entry .card-foot {
    display: flex;
    align-items: center;
    gap: 14px;   /* the status, Help and the credit are separate items */
}
/* The live connection status is its own chip, not part of the credit line. */
.theos-entry .workspace-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--theos-muted);
}
.theos-entry .workspace-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9fd8b4;
    box-shadow: 0 0 0 3px #9fd8b41f;
}
/* ambient.js adds .offline when the browser reports no connection. */
.theos-entry .workspace-status.offline i {
    background: #e8a496;
    box-shadow: 0 0 0 3px #e8a4961f;
}
.theos-entry .card-foot .footer-credit-separator { margin-inline: -8px; }
.theos-entry .footer-credit-separator { color: #87768f; font-size: 12px; }
.theos-entry .footer-credit {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    user-select: none;
    min-height: 44px;
    padding-inline: 10px;
}


/* ── the entry card — the shape every surface signs in through ───────────
   The reference's `.signin`. Its HEIGHT is animated by core.js on the login
   screen (the progressive reveal the user asked for: workspace only, then it
   grows as the workspace's methods are discovered). Elsewhere it is static. */
.theos-entry .entry-card {
    position: relative;
    z-index: 2;
    width: min(410px, 100%);
    background: linear-gradient(130deg, #b396c70a, #b396c704);
    border: 1px solid #dac2de1c;
    border-radius: var(--theos-radius-card);
    padding: clamp(25px, 2.5vw, 36px) clamp(22px, 2.2vw, 32px) 25px;
    box-shadow: inset 0 1px #f3daff05, 0 18px 55px #0c091514;
}
.theos-entry .entry-card > * + * { margin-top: 14px; }


/* ── motion + density ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .theos-entry .halo { animation: none; }
    .theos-entry *,
    .theos-entry *::before,
    .theos-entry *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (max-height: 740px) and (min-width: 781px) {
    /* Short laptop screens: the reference tightens the footer to 10px. */
    .theos-entry .system-footer { padding-block: 10px; }
}
@media (max-width: 780px) {
    .theos-entry .system-header { gap: 12px; min-height: 74px; padding: 22px 27px; }
    .theos-entry .wordmark { font-size: 27px; }
    .theos-entry .system-date { gap: 7px; }
    .theos-entry #date-label,
    .theos-entry #clock { font-size: 12px; }
    .theos-entry #date-full { display: none; }
    .theos-entry #date-short { display: inline; }
    .theos-entry .system-footer {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 18px;
        /* MEASURED 15px 27px 22px on a phone. */
        padding: 15px 27px 22px;
        padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
    }
    .theos-entry .card-foot { width: 100%; justify-content: center; }
    /* 16px keeps iOS from zooming the viewport on focus. */
    .theos-entry input:not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
}
@media (max-width: 350px) {
    .theos-entry .system-header { padding-inline: 20px; gap: 8px; }
    .theos-entry .wordmark { font-size: 25px; }
    .theos-entry #date-label,
    .theos-entry #clock { font-size: 11px; }
}

/* ── no text caret outside the fields you actually type in ────────────────
   USER 2026-09-16: "remove the idle tower cursor prompt except in place where
   we enter text on all these 3 pages."

   ── THE CAUSE (measured, same as plein-no-caret.css found on the canvas)
   These surfaces compute `cursor: auto`, and over an element that CONTAINS
   TEXT `auto` resolves to the text I-beam. So the wordmark, the date, the
   clock, the card's padding and the whole header offered to select text and
   showed a caret, with nothing there to type. Measured on the live login:
   16 such elements, including `h1.system-brand`, `time#clock`,
   `span#date-label` and `main.entry`.

   ── THE RULE
   Chrome is not a text field: no caret, no selection. The exceptions — real
   `input`, `textarea`, `select` and `[contenteditable]` — are re-enabled
   immediately below, so this can never silently disable a live field.

   Scoped to `.theos-entry`, so it reaches the login, the six security pages
   and nothing else in the app. NOT a blanket `* { user-select: none }`: an
   error message or a recovery code must stay selectable, and those are
   re-enabled too. */
.theos-entry,
.theos-entry .system-header,
.theos-entry .system-header *,
.theos-entry .system-footer,
.theos-entry .system-footer *,
.theos-entry .wallpaper,
.theos-entry .wallpaper *,
.theos-entry .art-panel,
.theos-entry .art-panel *,
.theos-entry .entry,
.theos-entry .signin,
.theos-entry .entry-card,
.theos-entry .auth-shell,
.theos-entry .auth-card,
.theos-entry .super-admin,
.theos-entry .view,
.theos-entry label,
.theos-entry button,
.theos-entry button *,
.theos-entry h1,
.theos-entry h2,
.theos-entry .eyebrow,
.theos-entry .field-note,
.theos-entry .admin-mode-label,
.theos-entry .workspace-status,
.theos-entry .workspace-status * {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

/* Links and buttons say "click", not "type". */
.theos-entry a,
.theos-entry button:not(:disabled),
.theos-entry summary,
.theos-entry .provider-button,
.theos-entry .workspace-option {
    cursor: pointer;
}

/* ── the exceptions: where typing really happens ─────────────────────────
   Listed last and by element, so a field can never inherit the rule above.
   The caret is restored explicitly — `user-select: none` on an ancestor does
   not disable a child input, but the cursor does inherit. */
.theos-entry input,
.theos-entry textarea,
.theos-entry select,
.theos-entry [contenteditable="true"],
.theos-entry [contenteditable="true"] * {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    caret-color: var(--theos-accent);
}
/* Non-typed inputs are pressed or dragged. */
.theos-entry select,
.theos-entry input[type="checkbox"],
.theos-entry input[type="radio"],
.theos-entry input[type="range"],
.theos-entry input[type="submit"],
.theos-entry input[type="button"] {
    cursor: pointer;
    caret-color: transparent;
}

/* Text the user may legitimately want to copy: an error to quote to support,
   a recovery code to store, the decoded server address. Selectable, but with
   no caret — nothing here is editable. */
.theos-entry .form-error,
.theos-entry .admin-message,
.theos-entry .flash,
.theos-entry .manual-key,
.theos-entry .recovery-list,
.theos-entry .recovery-list * {
    user-select: text;
    -webkit-user-select: text;
    cursor: auto;
}