/* Architecture of Us — Phase 2 shell.
   Direction B (Letterpress), tokens scoped to `.aou` exactly as the prototype
   scopes them. No shared Fortress variable is redefined, and nothing here can
   reach Wren, Core, Reflections or any embedded brand.

   Newsreader and Manrope are bundled locally under the SIL Open Font License,
   from the official Fontsource distribution of the Google Fonts originals.
   Files, licences and sha256 hashes: shell/fonts/. No font request ever leaves
   this machine, and the fallback stacks still name real faces. */

@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('fonts/newsreader-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/newsreader-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/newsreader-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/manrope-latin-600-normal.woff2') format('woff2');
}

.aou {
  --aou-bg: #fff8f4;
  --aou-card: #ffffff;
  --aou-low: #faf2ec;
  --aou-high: #f8e5d5;
  --aou-line: #d2c4b7;
  --aou-line-soft: rgba(210, 196, 183, 0.55);
  --aou-ink: #1e1b18;
  --aou-muted: #6d5960;
  --aou-gold: #765933;
  --aou-gold-soft: #b8956a;
  --aou-mauve: #d4a0a0;
  --aou-radius: 1rem;
  --aou-radius-lg: 1.5rem;
  --aou-shadow-card: 0 1px 2px rgba(30, 27, 24, 0.04), 0 1px 3px rgba(30, 27, 24, 0.06);
  --aou-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --aou-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --aou-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --aou-caps: 0.18em;
  --aou-measure: 58ch;
  --dock-height: 4.75rem;
}

* { box-sizing: border-box; }
body.aou {
  margin: 0; background: var(--aou-bg); color: var(--aou-ink);
  font: 17px/1.7 var(--aou-sans);
  padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px) + 1rem);
}
:focus-visible { outline: 2px solid var(--aou-gold); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: 0.75rem; top: 0.75rem; z-index: 40; background: var(--aou-card);
  border: 1px solid var(--aou-line); border-radius: 999px; padding: 0.6rem 1rem; color: var(--aou-ink);
}

.mockbar {
  margin: 0; padding: 0.7rem 1.25rem; background: var(--aou-high);
  border-bottom: 1px solid var(--aou-line-soft); font: 400 0.85rem/1.55 var(--aou-sans);
}
.appbar {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center;
  justify-content: space-between; padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--aou-line-soft);
}
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 100%; }
.who label {
  font: 600 0.66rem/1 var(--aou-sans); text-transform: uppercase;
  letter-spacing: var(--aou-caps); color: var(--aou-muted);
}
.who select {
  background: var(--aou-card); color: var(--aou-ink); border: 1px solid var(--aou-line);
  border-radius: 999px; padding: 0.5rem 0.85rem; min-height: 44px;
  font: 400 0.92rem var(--aou-sans); max-width: 100%;
}
.standing {
  font: 600 0.68rem/1 var(--aou-sans); text-transform: uppercase; letter-spacing: var(--aou-caps);
  color: var(--aou-gold); border: 1px solid var(--aou-line); border-radius: 999px;
  padding: 0.5rem 0.85rem; display: inline-flex; align-items: center; min-height: 44px;
}

main { max-width: 40rem; margin: 0 auto; padding: 2.25rem 1.5rem 1rem; }
main:focus { outline: none; }

.eyebrow {
  font: 600 0.68rem/1 var(--aou-sans); text-transform: uppercase;
  letter-spacing: var(--aou-caps); color: var(--aou-gold); margin: 0 0 0.9rem;
}
h1 { font: 300 2.3rem/1.2 var(--aou-serif); margin: 0 0 0.85rem; max-width: 20ch; }
h2 { font: 400 1.3rem/1.3 var(--aou-serif); margin: 0 0 0.5rem; }
p { max-width: var(--aou-measure); }
.lede { color: var(--aou-muted); margin: 0 0 1.5rem; }
.help { color: var(--aou-muted); font-size: 0.88rem; }

.card {
  background: var(--aou-card); border: 1px solid var(--aou-line-soft);
  border-radius: var(--aou-radius-lg); padding: 1.6rem; box-shadow: var(--aou-shadow-card);
  margin: 0 0 1.25rem;
}
.card.quiet { background: var(--aou-low); }
.card.attention { border-color: var(--aou-mauve); background: #fdf6f4; }

label.field-label {
  display: block; margin: 1rem 0 0.4rem;
  font: 600 0.68rem/1 var(--aou-sans); text-transform: uppercase;
  letter-spacing: var(--aou-caps); color: var(--aou-muted);
}
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; background: #fffdfb; color: var(--aou-ink); border: 1px solid var(--aou-line);
  border-radius: 0.75rem; padding: 0.85rem 1rem; min-height: 52px; font: 400 1.02rem var(--aou-sans);
}
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.15rem; }
button {
  font: 500 0.9rem var(--aou-sans); min-height: 46px; padding: 0.6rem 1.15rem;
  border-radius: 999px; cursor: pointer; background: transparent; color: var(--aou-gold);
  border: 1px solid var(--aou-gold-soft); transition: background 180ms var(--aou-ease);
}
button:hover { background: rgba(184, 149, 106, 0.10); }
button.primary { background: var(--aou-gold); color: #fffdfb; border-color: var(--aou-gold); }
button.ghost { color: var(--aou-muted); border-color: var(--aou-line); }
/* A link that sits in an action row is still a touch target. */
a.buttonish {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 0.9rem var(--aou-sans); min-height: 46px; padding: 0.6rem 1.15rem;
  border-radius: 999px; text-decoration: none; color: var(--aou-gold);
  border: 1px solid var(--aou-gold-soft);
}
a.buttonish:hover { background: rgba(184, 149, 106, 0.10); }

.status-line {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
  font: 500 0.82rem var(--aou-sans); color: var(--aou-muted); margin: 0.75rem 0 0;
}
.status-line .mark { color: var(--aou-muted); }
.badge {
  display: inline-block; font: 500 0.76rem var(--aou-sans); color: var(--aou-muted);
  background: var(--aou-high); border-radius: 999px; padding: 0.28rem 0.85rem; margin: 0 0 0.85rem;
}
.badge.mutual { background: transparent; border: 1px solid var(--aou-mauve); color: var(--aou-gold); }

.tokenbox {
  font: 400 0.92rem/1.7 ui-monospace, Consolas, monospace; color: var(--aou-muted);
  background: var(--aou-low); border: 1px dashed var(--aou-line);
  border-radius: 0.75rem; padding: 0.85rem 1rem; overflow-wrap: anywhere; margin: 0.75rem 0 0;
}
.steps { margin: 0.75rem 0 0; padding-left: 1.2rem; color: var(--aou-muted); font-size: 0.92rem; }
.steps li { margin: 0 0 0.4rem; max-width: var(--aou-measure); }

.spinner-line { display: flex; align-items: center; gap: 0.6rem; color: var(--aou-muted); }
.spinner-line .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--aou-gold-soft); }

.dock {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10;
  background: rgba(255, 248, 244, 0.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--aou-line-soft); border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -4px 30px rgba(30, 27, 24, 0.05);
}
.dock ul {
  display: flex; justify-content: space-around; list-style: none; margin: 0;
  padding: 0.45rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
}
.dock li { flex: 1 1 0; display: flex; }
.dock a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; min-height: 56px; text-decoration: none; color: var(--aou-muted);
  font: 500 0.82rem/1.2 var(--aou-serif); text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center; border-radius: 0.75rem;
}
.dock a .dock-icon { font-size: 1.15rem; letter-spacing: 0; color: var(--aou-gold-soft); }
.dock a[aria-current="page"] { color: var(--aou-gold); }
.dock a[aria-current="page"] .dock-icon { color: var(--aou-gold); }

/* Recovery and device specimens. The code must be real selectable text, in a
   face where 0/O and 1/l cannot be confused, and it must reflow on a phone. */
.codeblock {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.3rem;
  font: 500 1.15rem/1.6 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: 0.06em; color: var(--aou-ink);
  background: var(--aou-low); border: 1px dashed var(--aou-line);
  border-radius: 0.75rem; padding: 1rem; margin: 1rem 0; user-select: all;
}
.codegroup { white-space: nowrap; }
.codesep { color: var(--aou-muted); }

.qrbox { margin: 1.25rem 0 0; }
.qrgrid {
  display: grid; grid-template-columns: repeat(12, 1fr); width: 8.5rem; aspect-ratio: 1;
  border: 1px solid var(--aou-line); border-radius: 0.5rem; overflow: hidden; background: #fffdfb;
}
.qrgrid span { background: transparent; }
.qrgrid span.on { background: var(--aou-ink); }

.devicelist { list-style: none; margin: 1rem 0 0; padding: 0; }
.devicelist li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  padding: 0.9rem 0; border-top: 1px solid var(--aou-line-soft);
}
.devname { font-weight: 500; flex: 1 1 12rem; }
.devmeta { color: var(--aou-muted); font-size: 0.85rem; }

.disclose { margin: 1rem 0 0; }
.disclose dt {
  font: 600 0.66rem/1 var(--aou-sans); text-transform: uppercase;
  letter-spacing: var(--aou-caps); color: var(--aou-muted); margin: 0.9rem 0 0.3rem;
}
.disclose dd { margin: 0; max-width: var(--aou-measure); }

/* A warning reads as a warning without relying on colour: it keeps its own
   words, and carries a rule beside it. */
.help.warn {
  color: var(--aou-ink); border-left: 3px solid var(--aou-mauve);
  padding-left: 0.7rem; font-weight: 500;
}

.foot {
  max-width: 40rem; margin: 1rem auto 0; padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--aou-line-soft); color: var(--aou-muted);
  font: 400 0.8rem/1.7 var(--aou-sans);
}
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; color: var(--aou-muted); }

@media (max-width: 700px) {
  body.aou { font-size: 16px; }
  .mockbar, .appbar, .foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  main { padding: 1.5rem 1.1rem 1rem; }
  h1 { font-size: 1.9rem; max-width: none; }
  .card { padding: 1.2rem; border-radius: var(--aou-radius); }
  .actions button { flex: 1 1 100%; }
  .who { width: 100%; }
  .who select { flex: 1 1 9rem; min-width: 0; }
  .dock a { font-size: 0.74rem; letter-spacing: 0.08em; }
}

@media (max-height: 620px) {
  .dock { position: static; border-radius: 0; box-shadow: none; }
  body.aou { padding-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}