/* The staff area: plain CSS on the hosted pages' palette tokens (public/css/hosted.css names them). Same-origin only; no inline styles anywhere. */
:root {
    --void: #04050c;
    --navy: #0b1024;
    --card: #0d1330;
    --line: #232a48;
    --edge: #5b6488;
    --star: #e8ecf5;
    --dust: #8e9bbb;
    --violet: #8f8cff;
    --gold: #ffd36a;
    --alert: #ffb4b4;
    --ring: #ffd36a;
    color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--void); color: var(--star); font: 400 1rem/1.6 system-ui, sans-serif; }
h1, h2, p { margin: 0; }
a { color: var(--violet); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.shell { min-height: 100dvh; }
.bar { display: flex; gap: .75rem; align-items: baseline; padding: .75rem 1.25rem; background: var(--navy); border-bottom: 1px solid var(--line); }
.mark { color: var(--gold); font-weight: 500; }
.area { color: var(--dust); }
.page { max-width: 60rem; margin: 0 auto; padding: 1.25rem; }

.who { display: flex; gap: .75rem; align-items: baseline; margin-left: auto; color: var(--dust); }
.link-button { padding: 0; border: 0; background: none; color: var(--violet); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.panel { display: grid; gap: 1rem; max-width: 32rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: .75rem; }
.notice { padding: .75rem 1rem; border: 1px solid var(--alert); border-radius: .5rem; color: var(--alert); }
.form { display: grid; gap: .5rem; }
.form input { padding: .6rem .75rem; background: var(--navy); color: var(--star); border: 1px solid var(--edge); border-radius: .5rem; font: inherit; }
.form button { margin-top: .5rem; }
.button { display: inline-block; justify-self: start; padding: .6rem 1.1rem; background: var(--violet); color: var(--void); border: 0; border-radius: .5rem; font: 500 1rem/1.4 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.button-second { background: none; color: var(--violet); border: 1px solid var(--edge); }

/* The account page (plan 4B, Task 14): panels stacked, facts in two columns, one row per lock, change, linked sign-in and app */
.page { display: grid; gap: 1.25rem; align-content: start; }
.panel.wide { max-width: none; }
h3 { margin: .5rem 0 0; font-size: 1rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.facts dt { color: var(--dust); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.code { font-family: ui-monospace, monospace; font-size: .9rem; }
.rows { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.form select, .form textarea { padding: .6rem .75rem; background: var(--navy); color: var(--star); border: 1px solid var(--edge); border-radius: .5rem; font: inherit; }
.form textarea { resize: vertical; }
.action { max-width: 32rem; }
.hint { color: var(--dust); }
.notice-done { border-color: var(--gold); color: var(--star); }

/* A stale change sent back, not made (the staging drill, 2026-10-29): the banner above the page with its link to sign in again, and a refusal shown beside its form */
.fresh-banner { display: grid; gap: .5rem; border-color: var(--gold); color: var(--star); }
.fresh-banner h2 { font-size: 1.0625rem; font-weight: 500; }
.field-error { margin: 0; color: var(--alert); }
.form textarea[aria-invalid="true"] { border-color: var(--alert); }

/* The frame's links, and the clients and notifications pages (plan 4B, Task 15): a new secret stands out and wraps, never scrolls the page sideways */
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.secret { border-color: var(--gold); }
.summary { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reveal { margin: 0; padding: .75rem 1rem; background: var(--navy); border: 1px solid var(--edge); border-radius: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.key { display: block; }

/* The sign-in page (the owner's request, 2026-10-29): the hosted pages' sky, brand glow and fonts (public/css/hosted.css), copied here and scoped to the
   shell's data-page="sign-in" hook so no other staff page changes. Still: no animation. */
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url('../fonts/roboto-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Flex'; src: url('../fonts/roboto-flex-latin-wdth-normal.woff2') format('woff2'); font-weight: 100 1000; font-stretch: 25% 151%; font-style: normal; font-display: swap; }

.shell[data-page="sign-in"] { display: grid; grid-template-rows: auto 1fr; font-family: 'Roboto', system-ui, sans-serif; }
.shell[data-page="sign-in"] .bar { background: rgba(11, 16, 36, .6); border-bottom-color: rgba(35, 42, 72, .6); }
.shell[data-page="sign-in"] .page { width: 100%; max-width: 28rem; align-content: safe center; gap: 1rem; padding: 1.5rem 1rem 2rem; }

.shell[data-page="sign-in"] .sky {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(42rem 26rem at 12% -6%, rgba(143, 140, 255, .16), transparent 70%),
        radial-gradient(36rem 30rem at 100% 108%, rgba(11, 16, 36, .9), transparent 70%),
        var(--void);
}
.shell[data-page="sign-in"] .sky::before, .shell[data-page="sign-in"] .sky::after { content: ""; position: absolute; inset: 0; }
.shell[data-page="sign-in"] .sky::before {
    background-image:
        radial-gradient(1px 1px at 23px 41px, rgba(232, 236, 245, .85) 50%, transparent 51%),
        radial-gradient(1px 1px at 131px 97px, rgba(232, 236, 245, .55) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 187px 23px, rgba(143, 140, 255, .8) 50%, transparent 51%),
        radial-gradient(1px 1px at 71px 173px, rgba(232, 236, 245, .45) 50%, transparent 51%),
        radial-gradient(1px 1px at 211px 209px, rgba(232, 236, 245, .7) 50%, transparent 51%);
    background-size: 233px 233px, 307px 307px, 419px 419px, 263px 263px, 349px 349px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .2) 100%);
}
.shell[data-page="sign-in"] .sky::after {
    background-image:
        radial-gradient(1.5px 1.5px at 311px 127px, rgba(255, 211, 106, .7) 50%, transparent 51%),
        radial-gradient(1px 1px at 97px 263px, rgba(232, 236, 245, .5) 50%, transparent 51%);
    background-size: 563px 563px, 397px 397px;
    opacity: .8;
}

.sign-in-card {
    position: relative; display: grid; gap: 1.25rem; padding: 1.5rem;
    background: linear-gradient(180deg, #111840, var(--card) 9rem); border: 1px solid var(--line); border-radius: 1rem;
    box-shadow: 0 1px 0 rgba(232, 236, 245, .05) inset, 0 1.5rem 3.5rem rgba(0, 0, 0, .45);
}
.sign-in-card > * { min-width: 0; }
.sign-in-card p { text-wrap: pretty; overflow-wrap: anywhere; }

/* The mark, and the lonely light glowing behind its gold center */
.sign-in-brand { position: relative; isolation: isolate; display: flex; align-items: center; gap: .75rem; }
.sign-in-brand::before {
    content: ""; position: absolute; left: 1.25rem; top: 50%; width: 9rem; height: 9rem; translate: -50% -50%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 211, 106, .2), rgba(255, 211, 106, .05) 55%, transparent);
}
.sign-in-brand img { width: 2.5rem; height: 2.5rem; flex: none; }
.sign-in-name { font: 300 1.125rem/1.2 'Roboto Flex', 'Roboto', system-ui, sans-serif; font-stretch: 125%; letter-spacing: .04em; }
.sign-in-label { color: var(--dust); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }

.sign-in-lead { display: grid; gap: .5rem; }
.sign-in-lead h1 { font: 300 1.5rem/1.25 'Roboto Flex', 'Roboto', system-ui, sans-serif; font-stretch: 125%; letter-spacing: .005em; text-wrap: balance; }
.sign-in-lead p { color: var(--dust); }

.sign-in-notice { display: grid; gap: .5rem; }
.sign-in-reference {
    padding: .1rem .4rem; background: var(--navy); border: 1px solid var(--edge); border-radius: .375rem; color: var(--star);
    font: 500 .9375rem/1.4 'Roboto Mono', ui-monospace, monospace; letter-spacing: .06em; user-select: all; white-space: nowrap;
}

.sign-in-button { display: flex; justify-self: stretch; align-items: center; justify-content: center; gap: .75rem; min-height: 3rem; font-family: inherit; }
.sign-in-button:hover { background: #a6a3ff; }
.microsoft-logo { flex: none; padding: 2px; background: #fff; border-radius: 2px; box-sizing: content-box; }

.sign-in-steps { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sign-in-steps h2 { font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.sign-in-steps ol { display: grid; gap: .25rem; margin: 0; padding-left: 1.25rem; color: var(--dust); }
.sign-in-steps li::marker { color: var(--gold); }

.sign-in-footer { color: var(--dust); font-size: .875rem; text-align: center; text-wrap: balance; }

@media (min-width: 40rem) {
    .shell[data-page="sign-in"] .page { padding: 2.5rem 1.25rem 3rem; }
    .sign-in-card { padding: 2rem; }
}