/* NSAM · The Application Cloud — brand layer, 2026-09-20.
   Loaded after console.css. Layout/behaviour hooks remain compatible with the
   deployed OpenBSD console. Reference: brand/NSAM_BRAND.md in the source project. */
:root {
  color-scheme: dark;
  --ink: #f3f7fa;
  --ink-2: #d9e6ee;
  --blue: #51c7ff;
  --blue-2: #8bdcff;
  --cyan: #00cee5;
  --paper: #030a0f;
  --white: #f3f7fa;
  --surface: #09161f;
  --surface-raised: #0c1c27;
  --line: #1e3543;
  --line-strong: #355465;
  --muted: #a1b4c2;
  --navy: #040f17;
  --navy-2: #091b29;
  --green: #62dfb0;
  --red: #ff9ab0;
  --red-dark: #ffb9c7;
  --red-soft: #291820;
  --shadow: 0 28px 90px #0006;
  --shadow-soft: 0 16px 45px #0003;
  --radius: 16px;
}
html { color-scheme: dark; }
body { background: var(--paper); color: var(--ink); }
::selection { background: #08708a; color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.skip-link { color: #00131d; background: var(--cyan); }
.console-header { background: rgb(3 10 15 / 95%); border-color: var(--line); }
.header-shell { min-height: 88px; }
.brand { gap: 12px; }
.brand-symbol { display: block; width: 49px; height: 49px; flex: 0 0 auto; }
.brand-lockup { display: grid; gap: 4px; }
.brand-name { font-size: 28px; font-weight: 350; line-height: 1; letter-spacing: .26em; }
.brand-tagline { color: #c0cdd6; font-size: 11px; font-weight: 400; letter-spacing: .025em; }
.brand-product { padding-left: 18px; margin-left: 8px; color: var(--cyan); border-color: #305361; font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .025em; text-transform: none; }
.console-nav a, .console-nav button, .public-nav > a:first-child { color: #becdd7; font-size: 11px; font-weight: 650; letter-spacing: .05em; }
.console-nav a:hover, .console-nav button:hover, .console-nav a[aria-current="page"] { color: #80e6f3; background: #10232d; }
.account-chip-copy small { color: var(--muted); font-size: 11px; }
.account-chip-copy strong { font-size: 12px; }
.account-chip > span:first-child { background: #0a3d60; color: #b5ecff; border: 1px solid #28799c; }
.public-nav { gap: 22px; }
.button { color: #fff; background: linear-gradient(110deg, #0851da, #0868c7); border-color: #388eff; box-shadow: 0 8px 28px #0052c82e; font-size: 13px; font-weight: 650; min-height: 50px; }
.button:hover { background: linear-gradient(110deg, #1464eb, #1276d4); box-shadow: 0 9px 32px #006fff40; }
.button-small { min-height: 42px; font-size: 12px; }
.button-ghost, .button-secondary { color: #a4e7ff; background: #0b202d; border-color: #315c70; box-shadow: none; }
.button-ghost:hover, .button-secondary:hover { color: #fff; background: #153346; box-shadow: none; }
.button-danger { color: #fff; background: #a42649; border-color: #df5276; box-shadow: none; }
.button-danger:hover { background: #bd3056; box-shadow: 0 8px 25px #a426492b; }
.message { color: var(--ink); background: #10212d; border-color: #355465; }
.message-icon { background: var(--cyan); box-shadow: 0 0 0 5px #193b48; }
.message-success .message-icon { box-shadow: 0 0 0 5px #173a31; }
.message-error .message-icon { box-shadow: 0 0 0 5px #472534; }
.eyebrow, .auth-overline, .card-overline { color: var(--cyan); font-size: 10px; font-weight: 650; letter-spacing: .17em; }

/* The canvas echoes the printed black / cyan / electric-blue visual identity.
   Rings and fine light paths are CSS, not oversized print artwork downloads. */
.auth-page { background: var(--paper); }
.auth-shell { min-height: calc(100vh - 88px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-story {
  min-height: 710px;
  padding: 78px clamp(32px, 5.8vw, 105px);
  border-right: 1px solid #162b36;
  background: radial-gradient(ellipse at 12% 100%, #062b48 0, transparent 54%), linear-gradient(140deg, #040b10, #03121c);
}
.auth-story::after {
  width: 530px; height: 530px; right: -295px; bottom: -280px;
  border: 1px solid #087bb0;
  box-shadow: 0 0 20px #0069e124, inset 0 0 22px #0069e112, 0 0 0 34px #03233b, 0 0 0 35px #094668, 0 0 0 70px #031b2c, 0 0 0 71px #083a58;
}
.auth-grid {
  inset: auto -30% 4% -20%; height: 220px;
  opacity: .8; background: none; mask-image: linear-gradient(90deg, transparent, #000 30%, #000 75%, transparent);
  transform: rotate(-12deg); pointer-events: none;
}
.auth-grid::before, .auth-grid::after {
  content: ""; position: absolute; inset: 20px 0;
  border-top: 1px solid #03bdeaa6; border-radius: 50%;
  box-shadow: 0 -5px 0 #007acc3b, 0 -13px 0 #037ac44a, 0 -21px 0 #005dac36, 0 -29px 0 #004e8f29;
}
.auth-grid::after { inset: 70px -20% 10px; transform: rotate(9deg); border-color: #006fff99; box-shadow: 0 -7px 0 #018af15c, 0 -15px 0 #0165ad50, 0 -23px 0 #02518530; }
.auth-story .eyebrow { color: var(--cyan); margin-bottom: 26px; }
.auth-story-copy h1 { max-width: 690px; font-size: clamp(39px, 3.85vw, 64px); font-weight: 650; letter-spacing: -.035em; line-height: 1.13; text-wrap: balance; }
.auth-story-copy h1 span { color: var(--cyan); }
.auth-story-copy > p:last-child { max-width: 480px; margin-top: 27px; color: #b3c4d0; font-size: 16px; line-height: 1.8; }
.auth-proof { margin-top: 39px; max-width: 490px; padding-top: 23px; gap: 12px; color: #aebfcb; border-color: #23404e; font-size: 12px; font-weight: 400; }
.auth-proof span { color: var(--cyan); }
.auth-panel { padding: 64px 42px; background: radial-gradient(ellipse at 85% 30%, #0a26333b, transparent 65%), #030a0f; }
.auth-card { max-width: 480px; padding: 38px; background: linear-gradient(155deg, #0c1c26, #08131b); border-color: #294150; box-shadow: var(--shadow), 0 0 60px #008ed005; border-radius: 16px; }
.auth-card-head { margin-bottom: 29px; }
.auth-card-head h2 { font-size: clamp(29px, 2.5vw, 38px); font-weight: 650; line-height: 1.15; letter-spacing: -.03em; }
.auth-card-head > p:last-child { font-size: 13px; line-height: 1.75; }
.auth-switch { color: var(--muted); font-size: 12px; }
.auth-switch a, .form-note a { color: var(--blue); font-weight: 600; }

/* Form readability, focus, validation and state colours are all explicit. */
.form-field label { color: #d6e3ec; font-size: 12px; font-weight: 600; }
.form-field label > span { color: var(--cyan); }
.form-field input, .form-field textarea, .form-field select, .code-field input {
  color: #f4f8fb; background: #040d14; border-color: #34505f;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #8098a8; opacity: 1; }
.form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: #50788d; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus, .code-field input:focus { color: #fff; background: #07151e; border-color: var(--cyan); box-shadow: 0 0 0 3px #00cee526; }
.form-field input[readonly] { color: #aebfcb; background: #14232d; border-color: #2b404d; }
.form-field input:autofill { box-shadow: 0 0 0 60px #0c2735 inset; -webkit-text-fill-color: #f3f7fa; caret-color: #fff; }
.password-toggle { color: #90ddfb; background: #102c3c; font-size: 10px; font-weight: 600; }
.password-toggle:hover { background: #194153; }
.field-help, .form-note, .code-meta { color: var(--muted); font-size: 11px; }
.field-help a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.field-error { color: var(--red); font-size: 12px; font-weight: 500; }
.has-error input, .has-error textarea, .has-error select { background: #21131c; border-color: #c56980; }
.form-alert { color: #ffb4c5; background: #301922; border-color: #7a3e50; font-size: 12px; }
.form-between { color: var(--muted); font-size: 11px; gap: 12px; flex-wrap: wrap; }
.form-between a { color: var(--blue); font-weight: 600; }
.secure-label i { box-shadow: 0 0 0 3px #143329; }
.check-field { color: #b8c8d3; font-size: 12px; line-height: 1.7; }
.check-field input { accent-color: #147cdc; }
.password-policy { color: #a7bbc8; background: #061018; border-color: #243b48; font-size: 11px; }
.password-policy > strong { color: #c5d5df; font-size: 11px; font-weight: 600; }
.password-policy li > span { background: #6c8493; }
.password-policy li.valid { color: #85e8c0; }
.password-policy li.valid > span { box-shadow: 0 0 0 3px #16382d; }
.password-categories span { color: #a7bfce; background: #101f2a; border-color: #304857; }
.password-categories span.valid { color: #92ebc8; background: #123329; border-color: #327259; }
.code-field input { color: #fff; font-size: 34px; background: #040d14; }
.code-field input::placeholder { color: #6a8799; }
.code-meta strong { color: #80dcf0; }
.link-button { color: var(--blue); font-size: 12px; }
.link-button:disabled { color: #8096a5; }
.state-icon { color: #7bdffa; background: #0a354a; box-shadow: 0 0 0 10px #0b2532; }
.state-success .state-icon { color: #9ff4d0; background: #185038; box-shadow: 0 0 0 10px #102b23; }
.state-error .state-icon { color: #ffbdcd; background: #73243c; box-shadow: 0 0 0 10px #301722; }

/* Account and empty application dashboard: real states, no invented metrics. */
.app-page { background: radial-gradient(ellipse at 80% 0, #06253755, transparent 40%), #030a0f; }
.page-heading h1 { font-size: clamp(35px, 4vw, 56px); font-weight: 650; line-height: 1.13; letter-spacing: -.04em; }
.system-status { color: #99ebc9; background: #102d24; border-color: #295840; font-size: 11px; font-weight: 500; white-space: nowrap; }
.dashboard-empty { background: radial-gradient(ellipse at 15% 80%, #06335166, transparent 55%), #08141d; border-color: #264452; }
.empty-visual { background: radial-gradient(ellipse, #006ada12, transparent 65%); }
.empty-orbit { border-color: #0079ad80; box-shadow: 0 0 26px #005db511; }
.orbit-two { border-style: solid; border-color: #008baa80; }
.empty-cube { width: 120px; height: 120px; border: 0; border-radius: 0; background: url('../img/nsam-brand-mark.svg') center / contain no-repeat; box-shadow: none; transform: none; }
.empty-cube::before, .empty-cube i { display: none; }
.empty-copy h2 { font-size: clamp(28px, 3.1vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.section-head h2 { font-weight: 600; line-height: 1.15; }
.foundation-grid { gap: 18px; }
.foundation-grid article { min-height: 180px; padding: 28px; background: linear-gradient(145deg, #0b1a24, #071018); border-color: #213b49; border-radius: 12px; }
.dashboard-foundations .section-head { grid-template-columns: 1fr; }
.foundation-grid h3 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 26px); line-height: 1.25; font-weight: 600; }
.foundation-grid p { font-size: 13px; line-height: 1.8; }
.account-tabs, .account-card { background: #09151e; border-color: #243c49; }
.account-tabs a { grid-template-columns: 1fr; color: #b7c8d5; font-size: 12px; font-weight: 550; }
.account-tabs a:hover, .account-tabs a[aria-current="page"] { color: #85e7f3; background: #112c39; }
.account-tabs .danger-link { color: #ff9ab0; border-top-color: var(--line); }
.account-tabs .danger-link:hover, .account-tabs .danger-link[aria-current="page"] { color: #ffb4c5; background: #301922; }
.card-heading h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 600; line-height: 1.2; }
.card-intro { font-size: 14px; overflow-wrap: anywhere; }
.form-actions { flex-wrap: wrap; gap: 12px; }
.verified-badge { color: #99ebc9; background: #102d24; border-color: #295840; font-size: 10px; font-weight: 500; }
.optional-badge { color: #b7cad7; background: #152935; border-color: #324f60; font-size: 10px; font-weight: 500; }
.danger-badge { color: #ffb4c5; background: #301922; border-color: #7a3e50; font-size: 10px; }
.info-callout { color: #abc5d5; background: #0b2635; border-color: #234c63; }
.info-callout > span { color: #b5ecff; background: #115277; }
.info-callout p { font-size: 12px; }
.info-callout strong { color: #daedf8; font-size: 12px; }
.organisation-help, .subsection-heading p { font-size: 12px; }
.security-summary article { background: #0c1c27; border-color: #294451; }
.security-icon { color: #90ddfb; background: #12354a; }
.security-summary small, .session-list small { font-size: 11px; }
.security-summary article > span:last-child, .session-list em { font-size: 10px; }
.danger-explanation { color: #e9c0cb; background: #28171f; border-color: #6b3748; }
.danger-explanation h3, .confirmation-hint { color: #ffb1c2; }
.danger-explanation ul { font-size: 13px; line-height: 1.8; }
.danger-consent { color: #e9c0cb; }
.confirmation-hint, .back-link { font-size: 12px; }
.error-page { background: radial-gradient(ellipse at 50% 45%, #062f4655, transparent 60%), #030a0f; }
.error-state > span:first-child { color: #21516b; }
.console-footer { color: #99b0c0; background: #02080d; border-top: 1px solid #1a303d; font-size: 11px; }
.console-footer a:hover { color: var(--cyan); }

@media (min-width: 1600px) {
  .auth-story { padding-left: max(72px, calc((100vw - 1400px) / 2)); }
  .auth-panel { padding-right: max(64px, calc((100vw - 1460px) / 2)); }
}
@media (max-width: 1080px) {
  .auth-story { padding: 58px 35px; }
  .auth-story-copy h1 { font-size: 43px; }
  .auth-panel { padding: 48px 25px; }
  .auth-card { padding: 30px; }
}
@media (max-width: 860px) {
  .console-header { backdrop-filter: none; }
  .header-shell { min-height: 78px; gap: 18px; }
  .brand-symbol { width: 43px; height: 43px; }
  .brand-name { font-size: 25px; }
  .brand-tagline { font-size: 10px; }
  .nav-toggle { background: #0a1a25; border-color: #2c4758; }
  .console-nav { background: #040e16; transform: none; min-height: 100dvh; }
  .console-nav a, .console-nav button { font-size: 18px; }
  .auth-shell { min-height: auto; }
  .auth-story { min-height: 325px; padding: 48px 35px; border-right: 0; border-bottom: 1px solid #1e3543; }
  .auth-story-copy h1 { max-width: 600px; font-size: 42px; }
  .auth-story-copy > p:last-child { max-width: 550px; font-size: 15px; margin-top: 20px; }
  .auth-proof { margin-top: 27px; max-width: 100%; font-size: 11px; }
  .auth-grid { bottom: -10%; opacity: .4; }
  .auth-panel { padding: 42px 25px 65px; }
  .auth-card { max-width: 520px; }
  .console-footer { font-size: 11px; }
}
@media (max-width: 560px) {
  .header-shell { min-height: 74px; gap: 10px; }
  .brand { gap: 8px; }
  .brand-symbol { width: 38px; height: 38px; }
  .brand-name { font-size: 23px; }
  .brand-tagline { font-size: 9px; letter-spacing: 0; }
  .public-nav { gap: 0; }
  .button-small { padding: 0 12px; font-size: 11px; }
  .auth-story { min-height: 255px; padding: 34px 23px 39px; }
  .auth-story .eyebrow { font-size: 9px; margin-bottom: 18px; }
  .auth-story-copy h1 { font-size: 33px; }
  .auth-story-copy > p:last-child { font-size: 14px; margin-top: 18px; line-height: 1.7; }
  .auth-story::after { width: 390px; height: 390px; right: -270px; bottom: -300px; }
  .auth-panel { padding: 27px 15px 42px; }
  .auth-card { padding: 28px 21px; }
  .auth-card-head h2 { font-size: 29px; }
  .app-shell { padding-top: 36px; }
  .page-heading h1 { font-size: 35px; }
  .empty-copy h2 { font-size: 30px; }
  .card-heading h2 { font-size: 28px; }
  .section-head h2 { font-size: 29px; }
}
@media (forced-colors: active) {
  .button, .form-field input, .code-field input { border: 1px solid ButtonText; }
  .brand-symbol { forced-color-adjust: none; }
}