/* theos-login.css — the sign-in screen: artwork left, progressive card right.
   =========================================================================
   Loads AFTER theos-entry.css, which owns the tokens, wallpaper, header,
   footer and control language. This file owns only what is specific to the
   sign-in surface.

   USER 2026-09-16 on the behaviour this must produce:
     "when login, the card on right open with workspace name only.. when
      entered, if correct, it auto expands to full size with oauth buttons if
      enabled.. thats neater"

   ── THE PROGRESSIVE CARD
   MEASURED in the reference (Chromium, 1440x900):
       empty workspace .............. 145px
       'product'  (one provider) .... 215px
       'studio'   (password + two) .. 385px
   The card animates between those heights via the Web Animations API in
   core.js (it measures, swaps content, then tweens height), so the CSS must
   NOT set a fixed height — it only styles what is revealed. The existing
   login already computes exactly which methods a workspace enables, from
   /auth/sso-available; this is that same answer given a better shape.

   ── EVERY MEASUREMENT HERE IS FROM THE BROWSER, NOT THE SOURCE TEXT
   The reference's artwork.css layers four override blocks on top of
   theme.css, so literal declarations mislead. Values below were read with
   getComputedStyle against the live reference.
   ========================================================================= */


/* ── the two-column shell ─────────────────────────────────────────────── */
.theos-entry .entry {
    position: relative;
    z-index: 2;
    /* Take the space between header and footer; `align-items:center` then
       centres the artwork and card in it, as the reference does. */
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(315px, 29vw, 410px);
    align-items: center;
    gap: clamp(30px, 5.8vw, 110px);
    width: min(1480px, calc(100% - clamp(48px, 8vw, 160px)));
    margin: auto;
    padding: 18px 0 24px;
}

.theos-entry .art-panel {
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.theos-entry .art-stage {
    position: relative;
    width: 100%;
    height: clamp(320px, 59svh, 650px);
}
/* A soft pool under the sculpture so it sits in the scene rather than on it. */
.theos-entry .art-stage::before {
    content: '';
    position: absolute;
    inset: 7% 4% 2%;
    border-radius: 50%;
    background: radial-gradient(ellipse, #ab79c709, transparent 68%);
    pointer-events: none;
}
.theos-entry #generative-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

/* The aura and shadow the sculpture casts onto the wallpaper. Both are driven
   by CSS custom properties that glass-materials.js rewrites per scene, so the
   backdrop colour follows whichever form is on screen. */
.theos-entry .wallpaper {
    --sculpt-hue: 292;
    --sculpt-bounce-hue: 305;
    --sculpt-light-x: 26%;
    --sculpt-light-y: 32%;
    --sculpt-shadow-x: 45%;
    --sculpt-shadow-y: 71%;
    --sculpt-spread: 42%;
    --sculpt-height: 60%;
}
.theos-entry .glass-aura {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        radial-gradient(ellipse var(--sculpt-spread) var(--sculpt-height)
            at var(--sculpt-light-x) var(--sculpt-light-y),
            hsl(var(--sculpt-hue) 47% 56% / .52), transparent 76%),
        radial-gradient(ellipse 65% 38% at 65% 88%,
            hsl(var(--sculpt-bounce-hue) 40% 37% / .27), transparent 78%);
    opacity: .09;
    transition: opacity .45s ease, transform 1.2s ease;
}
.theos-entry .sculpture-shadow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse var(--sculpt-spread) 30%
        at var(--sculpt-shadow-x) var(--sculpt-shadow-y), #08050fc9, transparent 76%);
    opacity: 0;
    transition: opacity .45s ease;
}
/* artwork.js writes the phase onto <body>; the backdrop breathes with the
   build/hold/release cycle rather than running its own animation loop. */
.theos-entry[data-art-phase="assembling"] .glass-aura { opacity: .12; }
.theos-entry[data-art-phase="holding"]    .glass-aura { opacity: .17; }
.theos-entry[data-art-phase="dissolving"] .glass-aura { opacity: .07; }
.theos-entry[data-art-phase="empty"]      .glass-aura { opacity: .025; }
/* While a sign-in is in flight the artwork steps back so the card leads. */
.theos-entry.entering .art-stage { opacity: .45; transition: opacity .4s; }


/* ── the card ─────────────────────────────────────────────────────────────
   `.signin` is the reference's class and the one core.js animates; the shared
   `.entry-card` look comes from theos-entry.css. */
.theos-entry .signin {
    width: 100%;
    align-self: center;
}
/* Height is animated in JS — never declare one here, or the reveal snaps. */
.theos-entry .signin[data-view="login"] { }


/* ── workspace entry: the one field that is always visible ──────────────── */
.theos-entry .workspace-entry {
    position: relative;
    margin-bottom: 24px;
}
/* MEASURED: the glyph reaches 35px into the field but the base rule's 16px
   padding won — `.theos-entry input:not([type=checkbox]):not([type=radio])`
   is (0,3,1), beating a plain (0,2,1) descendant rule. Matching the :not()
   chain restores the intended 47px indent without resorting to !important. */
.theos-entry .workspace-entry > input:not([type="checkbox"]):not([type="radio"]) {
    background: #b59dbe0a;
    border: 1px solid #f3d7ff2b;
    border-radius: var(--theos-radius-field);
    padding: 16px 72px 16px 47px;   /* room for the glyph left, controls right */
    height: 58px;
}
.theos-entry .workspace-glyph {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--theos-subtle);
    stroke-width: 1.5;
    pointer-events: none;
}
/* The tick only appears once the workspace actually resolved — it is the
   reply from /auth/sso-available, not a decoration. */
.theos-entry #workspace-ready {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%) scale(.6);
    font-size: 15px;
    line-height: 1;
    color: #bfe3cd;
    opacity: 0;
    transition: opacity .22s var(--theos-ease), transform .22s var(--theos-ease);
    pointer-events: none;
}
.theos-entry .signin.is-ready #workspace-ready {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.theos-entry #workspace-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 11px;
}
.theos-entry #workspace-button .icon { width: 18px; height: 18px; }

/* The status line under the field: resolving / not found / offline. Replaces
   the old `.workspace-status` div and keeps its three states. */
.theos-entry #workspace-feedback {
    margin: 10px 2px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--theos-muted);
}
.theos-entry #workspace-feedback.is-invalid { color: var(--theos-error); }


/* ── providers: only the ones this workspace enables ──────────────────── */
.theos-entry .providers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}
/* One enabled provider spans the row rather than leaving a hole. The count is
   written by the discovery step, so the layout follows the server's answer. */
.theos-entry .providers[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.theos-entry .provider-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 1px 6px;
    background: #dfc8eb07;
    border: 1px solid #e6d4ef24;
    border-radius: 14px;
    color: #eddfef;
    font-size: 13px;
    font-weight: 500;
    transition: background .18s, border-color .18s, transform .18s var(--theos-ease);
}
.theos-entry .provider-button:hover {
    background: #e7d3f212;
    border-color: #e6d4ef3d;
}
.theos-entry .provider-button:active { transform: scale(.985); }


/* ── the credential well: email + password as one object ───────────────── */
.theos-entry .credential-well {
    background: #b59dbe0a;
    border: 1px solid #e4c9ec29;
    border-radius: var(--theos-radius-well);
    overflow: hidden;
}
/* Fields share one container, divided by a hairline rather than each carrying
   its own box — this is what removes the "many boxes" look the user disliked. */
.theos-entry .credential-well .field + .field { border-top: 1px solid #d9bee61b; }
.theos-entry .credential-well input:not([type="checkbox"]):not([type="radio"]) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 17px;
    height: 58px;
}
.theos-entry .credential-well input:hover { border-color: transparent; }
.theos-entry .credential-well input:focus {
    box-shadow: none;
    background: #d6bfd60a;
}
.theos-entry .password-field { position: relative; }
.theos-entry .password-field input:not([type="checkbox"]) { padding-right: 96px; }
.theos-entry #password-toggle {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.theos-entry #password-toggle .icon { width: 18px; height: 18px; }

/* The submit control: an arrow inside the field, not a full-width "Enter"
   button. This is the reference's `.unlock-button`. */
.theos-entry .unlock-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(130deg, #f7e5f2, #d6c0e4);
    color: #37263f;
    transition: transform .18s var(--theos-ease), box-shadow .2s, filter .2s;
    box-shadow: 0 4px 14px #12091c2e;
}
.theos-entry .unlock-button:hover {
    filter: brightness(1.04);
    box-shadow: 0 6px 18px #12091c3d;
}
.theos-entry .unlock-button:active { transform: translateY(-50%) scale(.94); }
.theos-entry .unlock-button .icon { width: 18px; height: 18px; stroke-width: 1.9; }

.theos-entry #caps-warning { margin: 10px 2px 0; }

.theos-entry .account-links {
    display: flex;
    justify-content: center;
    margin-top: 13px;
}


/* ── secondary views (recovery / notice / MFA / busy) ──────────────────── */
.theos-entry .signin:not([data-view="login"]) { padding: 30px; }
.theos-entry .form-heading { margin-bottom: 20px; }
.theos-entry .form-heading h2 {
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.16;
}
.theos-entry .form-heading p {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--theos-muted);
}
.theos-entry .back-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    margin-bottom: 8px;
    padding: 0;
    background: none;
    font-size: 12px;
    color: var(--theos-muted);
}
.theos-entry .back-button:hover { color: var(--theos-text); }
.theos-entry .view .field { margin-bottom: 14px; }
.theos-entry .view .field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    color: var(--theos-muted);
}
.theos-entry .code-input {
    font-size: 23px;
    letter-spacing: .34em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.theos-entry .busy-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 265px;
    text-align: center;
}
.theos-entry .busy-view h2 { font-size: 22px; letter-spacing: -.4px; }
.theos-entry .busy-view p { font-size: 13px; color: var(--theos-muted); }
.theos-entry .entry-orbit {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #e8ddf133;
    border-top-color: var(--theos-accent);
    animation: theos-orbit .9s linear infinite;
}
@keyframes theos-orbit { to { transform: rotate(360deg); } }


/* ── super admin: the same card, a different posture ──────────────────── */
.theos-entry .super-admin {
    position: relative;
    z-index: 2;
    width: min(352px, calc(100% - 54px));
    margin: auto;
    padding: 40px 0 52px;
}
.theos-entry .admin-mode-label {
    display: inline-flex;
    background: #ead5ef;
    color: #482449;
    border: 1px solid #f3e6f5;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
.theos-entry .super-admin h2 {
    font-size: 40px;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin: 20px 0 28px;
}
.theos-entry #admin-form { display: grid; gap: 13px; }
.theos-entry #admin-form input:not([type="checkbox"]) {
    font-size: 16px;
    background: #d6bfd609;
    border-color: #d6bfd626;
    border-radius: var(--theos-radius);
    height: 54px;
}
.theos-entry .admin-password-field { position: relative; }
.theos-entry .admin-password-field input { padding-right: 54px; }
.theos-entry #admin-password-toggle { position: absolute; right: 5px; top: 5px; }
.theos-entry #admin-submit { margin-top: 7px; min-height: 52px; }
.theos-entry .admin-message {
    font-size: 13px;
    line-height: 1.5;
    color: #ebc4da;
    padding: 0 2px;
}
.theos-entry .admin-back {
    display: block;
    min-height: 44px;
    margin: 16px auto 0;
    font-size: 13px;
}
/* Admin mode is a DIFFERENT PLACE, so the scene quietens: no sculpture, no
   aura, no halos, and the artwork loop suspends because #entry is hidden. */
.theos-entry.admin-mode .wallpaper {
    background: linear-gradient(135deg, #2b2432, #24202b);
}
.theos-entry.admin-mode .glass-aura,
.theos-entry.admin-mode .sculpture-shadow,
.theos-entry.admin-mode .halo,
.theos-entry.admin-mode .horizon { display: none !important; }
.theos-entry.admin-mode .entry,
.theos-entry.admin-mode #motion-button { display: none !important; }
.theos-entry.admin-mode .system-footer { justify-content: center; }


/* ── responsive ───────────────────────────────────────────────────────────
   At 780px, or on a detected phone, the sculpture goes and the card becomes
   the page. Both selectors are needed: the width query for a narrow window,
   `.phone-layout` for a real handset whose viewport lies. */
@media (min-width: 781px) and (max-height: 620px) {
    .theos-entry .entry { padding-block: 8px; gap: clamp(30px, 5vw, 70px); }
    .theos-entry .art-stage { height: clamp(230px, 51svh, 310px); }
    .theos-entry .signin { padding-block: 22px 18px; }
}

@media (max-width: 780px) {
    .theos-entry .wallpaper { background: linear-gradient(135deg, #2b2432, #24202b); }
    .theos-entry .glass-aura,
    .theos-entry .sculpture-shadow,
    .theos-entry .art-stage { display: none !important; }
    .theos-entry .entry {
        display: flex;
        flex-direction: column;
        /* MEASURED 390x844: the reference centres the card in the space between
           header and footer (y=355). Without this the column packs to the top
           (y=98) and the phone layout looks unbalanced. */
        justify-content: center;
        gap: 0;
        width: min(410px, calc(100% - 54px));
        padding: 24px 0 30px;
    }
    .theos-entry .art-panel { display: none; }
    /* The card stops being a card and becomes the sheet. */
    .theos-entry .signin,
    .theos-entry .signin:not([data-view="login"]) {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .theos-entry #motion-button { visibility: hidden; pointer-events: none; }
    .theos-entry .workspace-entry > input,
    .theos-entry .credential-well input { font-size: 16px; }
    .theos-entry .providers { margin-bottom: 24px; }
}

.theos-entry.phone-layout .glass-aura,
.theos-entry.phone-layout .sculpture-shadow,
.theos-entry.phone-layout .art-stage { display: none !important; }
.theos-entry.phone-layout .art-panel { display: none; }
.theos-entry.phone-layout .wallpaper {
    background: linear-gradient(135deg, #2b2432, #24202b);
}
.theos-entry.phone-layout .entry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    width: min(410px, calc(100% - 54px));
    padding: 24px 0 30px;
}
.theos-entry.phone-layout .signin,
.theos-entry.phone-layout .signin:not([data-view="login"]) {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.theos-entry.phone-layout #motion-button { visibility: hidden; pointer-events: none; }
.theos-entry.phone-layout .workspace-entry > input,
.theos-entry.phone-layout .credential-well input { font-size: 16px; }

@media (max-width: 350px) {
    .theos-entry .entry { width: calc(100% - 44px); }
}

@media (prefers-reduced-motion: reduce) {
    .theos-entry #generative-art,
    .theos-entry #generative-art *,
    .theos-entry .glass-aura,
    .theos-entry .sculpture-shadow { transition: none !important; }
    .theos-entry .entry-orbit { animation-duration: 2s; }
}