/* drycraf's portal pages, on @drycraf/scene (scene/scene.css, vendored from ozx4/web: scene.commit), which carries the
   whole look: Quantico, the tokens, the ground, the compact bar, buttons, fields, chips, tabs, tables, the inspector,
   the drawer and the switcher. This file adds only what the portal's pages need beyond it, from the same tokens. */

@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }
:root { --mono: 'JetBrains Mono', ui-monospace, monospace; }

/* The portal's own pages' text at scene's page size. Not inside OZx's shell (html.dc-shell-on, which scene's shell()
   sets): there the widgets size their own text at --w-sm, and an element rule here would outweigh them. */
h1, h2, h3, p, dl, dd { margin: 0; }
:root:not(.dc-shell-on) :is(h1, h2, h3, p, dl, dd) { font-size: var(--dc-size); }
h1, h2, h3, b { font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
html { scrollbar-color: rgb(160 144 201 / 0.45) transparent; scrollbar-width: thin; }

/* The bar's middle: where you are, under the brand this portal wears. */
.dc-bar-place { color: var(--heather); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-bar sup, .dc-four { color: var(--ember); font-size: 0.62em; vertical-align: 0.7em; line-height: 0; }
/* The portal bar's words at its right end (setup, sign-in). Not OZx's shell bar, whose person and health keep their
   own shape (scene: the avatar's circle, the name hidden on a short bar). */
:root:not(.dc-shell-on) .dc-bar-end > span { color: var(--heather); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A page's one headline: drycraf.com's display size, once. */
.dc-headline { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -0.01em; }

/* Two more buttons beside scene's outlined and primary ones: a quiet one with no outline, and one for removing. */
.dc-btn-ghost { border-color: transparent; color: var(--heather); padding-inline: 0.8rem; }
.dc-btn-ghost:hover { border-color: transparent; color: var(--vellum); background: rgb(255 255 255 / 0.04); }
.dc-btn-danger { border-color: rgb(238 138 94 / 0.55); color: var(--ember); }
.dc-btn-danger:hover { border-color: var(--ember); background: rgb(238 138 94 / 0.08); }
.dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* Text */
.dc-muted { color: var(--heather); }
.dc-strong { font-weight: 700; }
.dc-mono { font-family: var(--mono); font-size: 0.9em; overflow-wrap: anywhere; }
.dc-link { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--rune); text-decoration: none; cursor: pointer; text-align: left; }
.dc-link:hover { text-decoration: underline; }
.dc-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.5rem; }
.dc-kv dt { color: var(--heather); }
.dc-kv dd { overflow-wrap: anywhere; }
.dc-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.dc-stack > * { min-width: 0; }
textarea.dc-input[data-mono], .dc-input.dc-mono { font-family: var(--mono); font-size: 0.9em; }
.dc-input[readonly] { background: rgb(255 255 255 / 0.03); }
.dc-input:-webkit-autofill, .dc-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--vellum); box-shadow: 0 0 0 100px rgb(14 6 24) inset; transition: background-color 9999s; }

/* A file, chosen with scene's button: the browser's own control is there for the keyboard, unseen. */
.dc-file { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; cursor: pointer; }
.dc-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dc-file:focus-within .dc-btn { outline: 2px solid var(--ember); outline-offset: 3px; }
.dc-file-name { color: var(--heather); overflow-wrap: anywhere; }

/* More, on asking: a quiet line with scene's ember plus. */
.dc-disclosure-btn { appearance: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border: 0; background: none; color: var(--heather); font: inherit; cursor: pointer; }
.dc-disclosure-btn::after { content: '+'; color: var(--ember); }
.dc-disclosure-btn[aria-expanded='true']::after { content: '−'; }
.dc-disclosure-btn:hover { color: var(--vellum); }
.dc-disclosure-body { margin-top: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--dc-line); }

/* A state outside the switcher, as it draws one: scene's dot and word. */
.dc-state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--heather); white-space: nowrap; }
.dc-state::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; }
.dc-state[data-state='ready']::before { background: var(--rune); border-color: var(--rune); box-shadow: 0 0 8px rgb(99 214 155 / 0.7); }
.dc-state[data-state='attention'] { color: var(--ember); }
.dc-state[data-state='attention']::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 8px rgb(238 138 94 / 0.8); }

/* The drawer's head, as scene's console demo has it. */

/* A sign-in, as scene's sign-in demo lays it out: the lockup and a line at the left, the card at the right. */
.sign-in { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: 3rem var(--dc-gutter); width: min(72rem, 100%); margin-inline: auto; }
.sign-in-lead { display: grid; gap: 1rem; align-content: center; }
.sign-in-lead .lockup { width: min(18rem, 70vw); height: auto; }
.sign-in-lead p { color: var(--heather); max-width: 32em; }
.sign-in-card { padding: 1.5rem; }
@media (max-width: 60rem) { .sign-in { grid-template-columns: minmax(0, 1fr); align-content: center; } }
/* Signed out, as other SaaS sign-ins are (the owner): one centred card, its heading, fields, an "or" line and a footer. */
.sign-in.auth { grid-template-columns: minmax(0, 25rem); justify-content: center; }
.auth-card { display: grid; gap: 0.9rem; padding: 2rem; }
.auth-mark { width: 9rem; height: auto; }
.auth-title { font-size: 1.6rem; margin: 0; }
.auth-sub { color: var(--heather); margin: 0; }
.auth-body { display: grid; gap: 0.75rem; }
.auth-body .dc-btn { width: 100%; justify-content: center; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; color: var(--heather); font-size: 0.85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid rgb(160 144 201 / 0.3); }
.auth-foot { color: var(--heather); font-size: 0.9rem; margin: 0; text-align: center; }
.auth-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.auth-links { display: flex; gap: 1.25rem; justify-content: center; font-size: 0.9rem; margin: 0; }
.auth-otp { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.6em; text-align: center; padding-inline-start: 0.6em; }
.auth-address { display: flex; align-items: baseline; gap: 0.1rem; font-size: 0.85rem; color: var(--heather); margin: -0.25rem 0 0; }
.auth-slug { background: none; border: 0; border-bottom: 1px dashed rgb(160 144 201 / 0.5); color: inherit; font: inherit; font-family: var(--mono); min-width: 0; flex: 1; padding: 0; }

/* the shell's bar stays solid over the page */
html.dc-shell-on .dc-shell-bar { background: var(--w-panel); }

/* The passkey's step-up: a modal <dialog>, in the top layer over any slide-over. */
.stepup { width: min(30rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--w-border); border-radius: 12px; background: var(--w-panel); color: var(--w-ink); box-shadow: 0 24px 60px rgb(0 0 0 / 0.5); }
.stepup[open] { display: grid; gap: 1rem; }
.stepup::backdrop { background: rgb(8 4 14 / 0.62); }
.stepup h2 { font-size: var(--w-md); }