/* One look for the app, the slides and the landing page. No inline styles anywhere: the content
   policy forbids them, and a stylesheet is easier to keep consistent anyway.

   Direction: deep spruce green on warm paper neutrals, a small amount of brass for the brand mark,
   soft layered surfaces, one radius family (6 / 10 / 14 / 20 / pill). */

:root {
  --bg: #f5f4ef;
  --bg-2: #eeede6;
  --surface: #ffffff;
  --surface-2: #f3f2ec;
  --surface-3: #e9e8e0;
  --text: #13201b;
  --text-2: #34443d;
  --muted: #5c6a64;
  --line: #e1dfd6;
  --line-strong: #cbc9bd;
  --accent: #0e5a46;
  --accent-hover: #0a4838;
  --accent-text: #ffffff;
  --accent-soft: #e0eee8;
  --accent-ink: #0b4b3a;
  --brass: #9a6a1c;
  --brass-soft: #f5e9d2;
  --danger: #b42318;
  --danger-hover: #951b12;
  --danger-soft: #fcebe8;
  --warn: #835400;
  --warn-soft: #faefd6;
  --ok: #146c43;
  --ok-soft: #e1f3e8;
  --focus: #12806a;
  --inverse: #14201b;
  --inverse-text: #f2f5f3;
  --scrim: rgb(14 22 19 / 48%);
  --shadow-sm: 0 1px 2px rgb(24 38 31 / 6%);
  --shadow: 0 1px 2px rgb(24 38 31 / 5%), 0 4px 14px -4px rgb(24 38 31 / 10%);
  --shadow-lg: 0 2px 6px rgb(24 38 31 / 6%), 0 24px 48px -12px rgb(24 38 31 / 22%);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --font: 'Segoe UI Variable Text', 'Segoe UI Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-display: 'Segoe UI Variable Display', 'Segoe UI Variable', 'Inter Display', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a110f;
    --bg-2: #0d1613;
    --surface: #111b18;
    --surface-2: #16221e;
    --surface-3: #1c2a25;
    --text: #e8f0ec;
    --text-2: #c4d1cb;
    --muted: #94a69e;
    --line: #20302a;
    --line-strong: #2f433b;
    --accent: #4fc9a0;
    --accent-hover: #70d8b5;
    --accent-text: #04140e;
    --accent-soft: #123129;
    --accent-ink: #7fdcbc;
    --brass: #e2b664;
    --brass-soft: #2e2512;
    --danger: #ff9a8f;
    --danger-hover: #ffb3aa;
    --danger-soft: #361a18;
    --warn: #f0c35e;
    --warn-soft: #30270f;
    --ok: #7bd8a0;
    --ok-soft: #12301f;
    --focus: #70d8b5;
    --inverse: #e8f0ec;
    --inverse-text: #0d1613;
    --scrim: rgb(0 0 0 / 62%);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 6px 18px -6px rgb(0 0 0 / 45%);
    --shadow-lg: 0 2px 8px rgb(0 0 0 / 40%), 0 28px 56px -12px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #0a110f;
  --bg-2: #0d1613;
  --surface: #111b18;
  --surface-2: #16221e;
  --surface-3: #1c2a25;
  --text: #e8f0ec;
  --text-2: #c4d1cb;
  --muted: #94a69e;
  --line: #20302a;
  --line-strong: #2f433b;
  --accent: #4fc9a0;
  --accent-hover: #70d8b5;
  --accent-text: #04140e;
  --accent-soft: #123129;
  --accent-ink: #7fdcbc;
  --brass: #e2b664;
  --brass-soft: #2e2512;
  --danger: #ff9a8f;
  --danger-hover: #ffb3aa;
  --danger-soft: #361a18;
  --warn: #f0c35e;
  --warn-soft: #30270f;
  --ok: #7bd8a0;
  --ok-soft: #12301f;
  --focus: #70d8b5;
  --inverse: #e8f0ec;
  --inverse-text: #0d1613;
  --scrim: rgb(0 0 0 / 62%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 6px 18px -6px rgb(0 0 0 / 45%);
  --shadow-lg: 0 2px 8px rgb(0 0 0 / 40%), 0 28px 56px -12px rgb(0 0 0 / 60%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 1.75rem; letter-spacing: -.022em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .9em; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
code, .mono { font-family: var(--mono); font-size: .92em; }
small, .muted { color: var(--muted); }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* --- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .94rem; line-height: 1; white-space: nowrap;
  padding: .7rem 1.1rem; min-height: 40px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 1px 2px rgb(0 0 0 / 14%);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { flex: none; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
:root[data-theme='dark'] .btn.danger:not(.secondary) { color: #2a0a07; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .btn.danger:not(.secondary) { color: #2a0a07; } }
.btn.danger.secondary { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); box-shadow: none; }
.btn.danger.secondary:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.small { min-height: 32px; padding: .45rem .75rem; font-size: .86rem; border-radius: 8px; }
.btn.icon { padding: .45rem; min-width: 36px; min-height: 36px; }
.btn.block { width: 100%; }
.btn.lg { min-height: 46px; padding: .8rem 1.3rem; font-size: 1rem; }

/* --- forms */

label { display: block; font-weight: 600; font-size: .86rem; margin: 0 0 .35rem; color: var(--text-2); }
.field { margin: 0 0 1rem; }
.hint { color: var(--muted); font-size: .84rem; margin: .4rem 0 0; line-height: 1.45; }

input[type='text'], input[type='password'], input[type='url'], input[type='email'], input[type='search'], input[type='number'], textarea, select {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: .62rem .8rem; min-height: 42px;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 3%);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 82%, transparent); }
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent);
}
input[type='range'] { width: 100%; accent-color: var(--accent); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); width: 18px; height: 18px; vertical-align: -3px; margin: 0 .5rem 0 0; }
.check { display: flex; align-items: flex-start; gap: .1rem; font-weight: 550; color: var(--text); cursor: pointer; }
.check input { margin-top: .15rem; flex: none; }
.row { display: flex; gap: .6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: .9rem; }
.spacer { flex: 1; }

/* --- surfaces */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 650; line-height: 1.2; padding: .25rem .6rem; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }

/* Notices carry their icon in a pseudo-element so code can set their text freely. */
.notice {
  position: relative; border-radius: var(--radius-sm); padding: .8rem 1rem .8rem 2.65rem; margin-bottom: 1rem;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text); line-height: 1.5;
}
.notice::before {
  content: ''; position: absolute; left: .95rem; top: .95rem; width: 18px; height: 18px; background: var(--muted);
  -webkit-mask: var(--notice-icon) center / contain no-repeat; mask: var(--notice-icon) center / contain no-repeat;
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
}
.notice.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.notice.info::before { background: var(--accent); }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.notice.warn::before { background: var(--warn); --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.3'/%3E%3C/svg%3E"); }
.notice.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.notice.danger::before { background: var(--danger); --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.3'/%3E%3C/svg%3E"); }
.notice.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.notice.ok::before { background: var(--ok); --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16.5 9.5'/%3E%3C/svg%3E"); }
.notice > :last-child { margin-bottom: 0; }
.stack > .notice { margin-bottom: 0; }

.code-box { font-family: var(--mono); font-size: 1.2rem; font-weight: 600; letter-spacing: .1em; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: .8rem 1rem; text-align: center; user-select: all; word-break: break-all; color: var(--text); }
.code-box.small { font-size: .76rem; font-weight: 400; letter-spacing: 0; text-align: left; max-height: 8rem; overflow: auto; border-style: solid; line-height: 1.5; color: var(--text-2); }

.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- icon tiles and letter avatars (app and landing page) */
.tile { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.tile.small { width: 34px; height: 34px; border-radius: 10px; }
.tile.ok { background: var(--ok-soft); color: var(--ok); }
.tile.warn { background: var(--warn-soft); color: var(--warn); }
.tile.danger { background: var(--danger-soft); color: var(--danger); }
.avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
  background: var(--av-bg); color: var(--av-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av-fg) 14%, transparent);
}
.av-0 { --av-bg: #dcefe6; --av-fg: #0d5b44; }
.av-1 { --av-bg: #dde8f7; --av-fg: #1f4f8f; }
.av-2 { --av-bg: #f5e6cf; --av-fg: #82520f; }
.av-3 { --av-bg: #f3dfe3; --av-fg: #8e2f45; }
.av-4 { --av-bg: #e7e1f5; --av-fg: #55399a; }
.av-5 { --av-bg: #d9eef0; --av-fg: #0f5f68; }
.av-6 { --av-bg: #ece7d8; --av-fg: #5a5130; }
.av-7 { --av-bg: #f6e1d6; --av-fg: #8c3d17; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .av-0 { --av-bg: #133529; --av-fg: #7fdcbc; }
  :root:not([data-theme='light']) .av-1 { --av-bg: #172a43; --av-fg: #9cc0f2; }
  :root:not([data-theme='light']) .av-2 { --av-bg: #33280f; --av-fg: #f0c672; }
  :root:not([data-theme='light']) .av-3 { --av-bg: #3a1c24; --av-fg: #f2a3b4; }
  :root:not([data-theme='light']) .av-4 { --av-bg: #271f3e; --av-fg: #c2b0f2; }
  :root:not([data-theme='light']) .av-5 { --av-bg: #11313a; --av-fg: #8cd6e0; }
  :root:not([data-theme='light']) .av-6 { --av-bg: #2c2a1c; --av-fg: #d8cb9a; }
  :root:not([data-theme='light']) .av-7 { --av-bg: #3a2016; --av-fg: #f3b08b; }
}
:root[data-theme='dark'] .av-0 { --av-bg: #133529; --av-fg: #7fdcbc; }
:root[data-theme='dark'] .av-1 { --av-bg: #172a43; --av-fg: #9cc0f2; }
:root[data-theme='dark'] .av-2 { --av-bg: #33280f; --av-fg: #f0c672; }
:root[data-theme='dark'] .av-3 { --av-bg: #3a1c24; --av-fg: #f2a3b4; }
:root[data-theme='dark'] .av-4 { --av-bg: #271f3e; --av-fg: #c2b0f2; }
:root[data-theme='dark'] .av-5 { --av-bg: #11313a; --av-fg: #8cd6e0; }
:root[data-theme='dark'] .av-6 { --av-bg: #2c2a1c; --av-fg: #d8cb9a; }
:root[data-theme='dark'] .av-7 { --av-bg: #3a2016; --av-fg: #f3b08b; }


/* --- the brand mark and the vault dial (drawn by shared/art.js; fixed brand colours in both themes) */

.mark { display: block; flex: none; }
.mark .mk-bg { fill: #0e4a3a; }
.mark .mk-ring { fill: none; stroke: #6fd3ae; stroke-width: 1.6; opacity: .55; }
.mark .mk-tick { stroke: #e2b664; stroke-width: 1.8; stroke-linecap: round; }
.mark .mk-hub { fill: #e9f5ef; }
.mark .mk-key { fill: #0e4a3a; }

.dial { display: block; width: 100%; height: auto; overflow: visible; }
.dial .d-halo { fill: #4fc9a0; opacity: .08; }
.dial .d-halo2 { fill: none; stroke: #4fc9a0; stroke-opacity: .16; stroke-width: 1; }
.dial .d-rim { fill: #0f3a2e; stroke: rgb(255 255 255 / 14%); stroke-width: 1.5; }
.dial .d-ticks line { stroke: #6fd3ae; stroke-opacity: .45; stroke-width: 1.6; stroke-linecap: round; }
.dial .d-ticks line.major { stroke: #e2b664; stroke-opacity: .95; stroke-width: 2.2; }
.dial .d-face { fill: #0b2c23; stroke: rgb(255 255 255 / 8%); stroke-width: 1; }
.dial .d-ring { fill: none; stroke: #6fd3ae; stroke-opacity: .35; stroke-width: 1.2; stroke-dasharray: 2 5; }
.dial .d-spoke { stroke: #cfe9dd; stroke-width: 7; stroke-linecap: round; opacity: .9; }
.dial .d-knob { fill: #e2b664; }
.dial .d-hub { fill: #e9f5ef; stroke: #e2b664; stroke-width: 3; }
.dial .d-key { fill: #0b2c23; }
.dial .d-index { fill: #e2b664; }
.dial .d-spin { transform-box: view-box; transform-origin: 50% 50%; animation: dial-turn 90s linear infinite; }
.dial .d-wheel { transform-box: view-box; transform-origin: 50% 50%; animation: dial-settle 1.4s var(--ease) both; }
@keyframes dial-turn { to { transform: rotate(360deg); } }
@keyframes dial-settle { from { transform: rotate(-70deg); } to { transform: rotate(0deg); } }

/* --- motion: everything above is decoration and can go */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}