/*
 * The Compass & Code application shell (SPEC 7, 4.10): one stylesheet for every page outside the
 * chart canvas — sign-in, Home, Tenant, Engagement, the "not found" page, the share dialog, the
 * forms on all of them, and the application header SPEC 4.10 puts on every page.
 *
 * The chart surface keeps its own drafting-sheet palette (`shell.css`, SPEC 5.6); this file never
 * touches it. Every rule here is scoped to a class of its own — `.app-*`, or the share dialog's
 * existing `.share-dialog*` — and there is not one bare element selector, because the chart page
 * links this stylesheet too (for the share dialog) and must render exactly as it did before.
 *
 * Tokens come in two layers. SPEC 7's five are the brand's own values and never change with the
 * theme; a rule below that names one directly is a rule that must stay brand-coloured in both
 * themes (the navy header bar, the parchment tile the compass rose sits on, the parchment words on
 * either). Everything that does change is a *role* token — what a surface or a word is for, not
 * what colour it is — and the `prefers-color-scheme: dark` block is their only other definition:
 *
 *   - `--shell-page`, the page's own ground; `--shell-card`, a sheet laid on it.
 *   - `--shell-text` and `--shell-muted`, body and secondary words.
 *   - `--shell-heading`, headings and a link's hover colour.
 *   - `--shell-accent`, links, focus rings and the development marker.
 *   - `--shell-rule`, the hairline colour, never used for text.
 *   - `--shell-field`, an input's own fill; `--shell-solid-edge`, a filled button's border.
 *   - `--shell-on-navy-muted`, secondary words against the header's navy (the header is navy in
 *     both themes, so this one has a single value).
 *
 * SPEC 7: "Gold on parchment is roughly 2.7:1 and fails AA for text. Use gold for rules and
 * ornaments, not for text or essential icons." Gold appears below only as a border or a rule;
 * nothing coloured gold carries a word or conveys anything on its own. Focus rings are the accent
 * (9.3:1 on parchment, 6.8:1 on the dark page), not gold, for the same reason.
 *
 * SPEC 7 also asks that the dark shell "sit with the chart's dark palette", so `--shell-page`'s
 * dark value is a shade of the chart's own dark paper (`shell.css`'s `--colour-paper`, `#12161c`)
 * rather than a neutral grey, and the navy bar still reads as a bar above it. `color-scheme` is
 * switched on `.app-page` rather than `:root` so it cannot reach the chart page, which links this
 * stylesheet for the share dialog and sets its own from `shell.css`.
 */

:root {
  /* SPEC 7's table, verbatim. Fixed in both themes; see the file comment. */
  --shell-parchment: #ede6d5;
  --shell-navy: #1f2a3c;
  --shell-ink: #211e1b;
  --shell-gold: #a9862f;
  --shell-oxblood: #5c2a2a;
  /* Role tokens, light theme. A value given as a `var()` is the brand colour in that role. */
  --shell-page: var(--shell-parchment);
  --shell-card: #f6f1e6;
  --shell-text: var(--shell-ink);
  --shell-muted: #5b5349;
  --shell-heading: var(--shell-navy);
  --shell-accent: var(--shell-oxblood);
  --shell-rule: #d8cfbb;
  --shell-field: #ffffff;
  --shell-solid-edge: var(--shell-navy);
  --shell-on-navy-muted: #c9c0ae;
}

/*
 * The dark shell (SPEC 7: "The website has no dark theme. A dark shell palette has to be designed
 * to sit with the chart's dark palette"). The page ground is the chart's dark paper warmed a
 * little towards navy, the card a step up from it, and the words a parchment-tinted off-white, so
 * the two surfaces read as the same material seen in a darker room rather than as two products.
 * The brand's own five are untouched: navy stays the header and the sign-in panel, parchment stays
 * the words on them and the tile under the rose, gold stays every hairline. Oxblood is far too
 * dark to carry a link here, so the accent role takes a lit terracotta from the same family.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --shell-page: #141a22;
    --shell-card: #202936;
    --shell-text: #e9e3d6;
    --shell-muted: #a8a192;
    --shell-heading: var(--shell-parchment);
    --shell-accent: #d98f7f;
    --shell-rule: #333c49;
    --shell-field: #10151c;
    --shell-solid-edge: #3a4a63;
  }
}

/*
 * The reader's own Light/Dark/System choice (the header's control, `server/theme-preference.ts`),
 * which beats the two blocks above. The server writes the choice into `<html data-theme="...">`
 * before the page is sent, so there is nothing to run and nothing to flash; `data-theme="system"`
 * matches neither block below, leaving `prefers-color-scheme` in charge.
 *
 * Both blocks restate a palette rather than referring to one, because CSS has no way to say "this
 * selector *or* that media query" about one declaration block. `app-theme-tokens.test.ts` holds
 * them to the originals declaration for declaration, so neither copy can drift from the theme it
 * names. `:root[data-theme=...]` outweighs the plain `:root` of both blocks above (a media query
 * adds no specificity of its own), which is what makes an explicit choice win.
 */
:root[data-theme="light"] {
  --shell-page: var(--shell-parchment);
  --shell-card: #f6f1e6;
  --shell-text: var(--shell-ink);
  --shell-muted: #5b5349;
  --shell-heading: var(--shell-navy);
  --shell-accent: var(--shell-oxblood);
  --shell-rule: #d8cfbb;
  --shell-field: #ffffff;
  --shell-solid-edge: var(--shell-navy);
}

:root[data-theme="dark"] {
  --shell-page: #141a22;
  --shell-card: #202936;
  --shell-text: #e9e3d6;
  --shell-muted: #a8a192;
  --shell-heading: var(--shell-parchment);
  --shell-accent: #d98f7f;
  --shell-rule: #333c49;
  --shell-field: #10151c;
  --shell-solid-edge: #3a4a63;
}

.app-page {
  color-scheme: light;
  margin: 0;
  min-height: 100vh;
  background: var(--shell-page);
  color: var(--shell-text);
  font-family: var(--font-shell-body);
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

/*
 * The shell's own colour scheme, so a native control (an input's spinner, a scrollbar, a date
 * picker) is drawn to match. In its own media block, after the rule above rather than beside the
 * dark tokens: a later rule of the same specificity would otherwise win `color-scheme` back.
 */
@media (prefers-color-scheme: dark) {
  .app-page {
    color-scheme: dark;
  }
}

/* The same two declarations under an explicit choice, which outranks the media block above. */
:root[data-theme="light"] .app-page {
  color-scheme: light;
}

:root[data-theme="dark"] .app-page {
  color-scheme: dark;
}

.app-page *,
.app-page *::before,
.app-page *::after {
  box-sizing: border-box;
}

/* Visible on every control, never removed (SPEC 5.16); the accent, since gold fails as a signal. */
.app-page :focus-visible {
  outline: 2px solid var(--shell-accent);
  outline-offset: 2px;
}

/*
 * SPEC 4.10's application header: "Compass & Code mark, the current tenant's name, the signed-in
 * user's name, and Sign out". Wraps rather than scrolls, so it still works at 320px.
 */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 20px;
  background: var(--shell-navy);
  color: var(--shell-parchment);
  border-bottom: 2px solid var(--shell-gold);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.app-header__mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
}

.app-header__wordmark {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.app-header__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.app-header__tenant {
  color: var(--shell-parchment);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.app-header__user {
  color: var(--shell-on-navy-muted);
}

.app-header__sign-out {
  margin: 0;
}

/* The header's own button: parchment on navy, so it reads as a control without a second fill. */
.app-header__sign-out .app-button {
  background: transparent;
  color: var(--shell-parchment);
  border-color: var(--shell-on-navy-muted);
}

/*
 * SPEC 7's Light/Dark/System control, in the header beside the identity block (`app-page.ts`'s
 * `renderThemeChoice`). Three small buttons in one segmented group rather than a `<select>`,
 * because a shell page runs no script: the chosen one is filled parchment and also carries
 * `aria-pressed`, so which theme is in force is never signalled by colour alone (SPEC 5.16).
 */
.app-theme-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.app-theme-choice__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shell-on-navy-muted);
}

.app-theme-choice__options {
  display: flex;
  border: 1px solid var(--shell-on-navy-muted);
  border-radius: 2px;
  overflow: hidden;
}

.app-theme-choice__option {
  margin: 0;
  padding: 3px 9px;
  border: 0;
  border-left: 1px solid var(--shell-on-navy-muted);
  background: transparent;
  color: var(--shell-on-navy-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}

.app-theme-choice__option:first-child {
  border-left: 0;
}

.app-theme-choice__option[aria-pressed="true"] {
  background: var(--shell-parchment);
  color: var(--shell-navy);
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.app-page-title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.2;
  color: var(--shell-heading);
}

.app-page-intro {
  margin: -12px 0 24px;
  max-width: 60ch;
  color: var(--shell-muted);
}

.app-card {
  background: var(--shell-card);
  border: 1px solid var(--shell-rule);
  padding: 20px;
  margin: 0 0 20px;
}

.app-card:last-child {
  margin-bottom: 0;
}

.app-section-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--shell-gold);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--shell-heading);
}

.app-empty {
  margin: 0;
  color: var(--shell-muted);
}

.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-list__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--shell-rule);
}

.app-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.app-list__item:first-child {
  padding-top: 0;
}

.app-link {
  color: var(--shell-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-link:hover {
  color: var(--shell-heading);
}

/* Secondary facts beside a link (a tenant's name, a role): data, so IBM Plex Mono (SPEC 7). */
.app-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--shell-muted);
}

.app-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}

.app-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 220px;
}

.app-field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-muted);
}

.app-input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  font-family: var(--font-shell-body);
  font-size: 16px;
  color: var(--shell-text);
  background: var(--shell-field);
  border: 1px solid var(--shell-rule);
  border-radius: 0;
}

.app-input:focus {
  border-color: var(--shell-accent);
}

.app-button {
  display: inline-block;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  color: var(--shell-parchment);
  background: var(--shell-navy);
  /* The edge, not the fill, is what makes a navy button read as a button on the dark page. */
  border: 1px solid var(--shell-solid-edge);
  border-radius: 0;
  cursor: pointer;
}

/* Oxblood in both themes, but with the accent as its edge: in dark, an oxblood fill alone would
   lose its outline against the page, leaving the hover visible only as a hue shift. */
.app-button:hover {
  background: var(--shell-oxblood);
  border-color: var(--shell-accent);
}

/* For a button whose label is data rather than a command — an email address, a person's name. */
.app-button--text {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.app-button--quiet {
  color: var(--shell-heading);
  background: var(--shell-card);
  border-color: var(--shell-rule);
}

.app-button--quiet:hover {
  color: var(--shell-parchment);
  background: var(--shell-navy);
  border-color: var(--shell-solid-edge);
}

/*
 * The sign-in page (SPEC 7's own design bullet, SPEC 4.2's three methods): a navy panel carrying
 * the hero compass artwork and the mark-and-wordmark lockup, beside a parchment card holding the
 * three sign-in options. One column below 720px, where two would leave the card too narrow to
 * type an address into.
 */
.sign-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin: 0 0 24px;
}

.sign-in__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 32px 28px;
  background: var(--shell-navy);
  border: 1px solid var(--shell-navy);
  border-top: 3px solid var(--shell-gold);
  color: var(--shell-parchment);
}

/*
 * The hero artwork, behind the panel's words rather than beside them. The opacity is low enough
 * that parchment text clears AA even where the artwork is at its lightest: the bound is checked
 * arithmetically against a pure-white worst case in `app-theme-tokens.test.ts`, which reads this
 * very declaration, so raising it here fails that test rather than quietly failing a reader.
 */
.sign-in__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./brand/hero-underlay-compass.webp");
  background-size: cover;
  background-position: center;
  /* The artwork is a dark line drawing on white; inverted, it is light linework that reads on navy
     (uninverted, its white ground would flood the panel and its lines vanish into it). Inverting
     cannot brighten it past white, so the AA bound below still holds. */
  filter: invert(1);
  opacity: 0.22;
}

/* Above the underlay, which is a positioned pseudo-element of the same stacking context. */
.sign-in__hero > * {
  position: relative;
}

/* The rose (`assets/brand/logo.svg`) is drawn in navy, ink, gold and oxblood for a light ground: half of it would vanish against the panel, so it sits on a parchment tile. */
.sign-in__mark-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 84px;
  height: 84px;
  background: var(--shell-parchment);
  border: 1px solid var(--shell-gold);
}

.sign-in__mark {
  display: block;
  width: 60px;
  height: 60px;
}

.sign-in__wordmark {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.15;
}

.sign-in__hero-note {
  margin: 0;
  max-width: 30ch;
  font-size: 15px;
}

.sign-in__card {
  margin: 0;
  align-self: start;
}

.sign-in__title {
  margin-bottom: 18px;
}

/* The emailed link/code, the third option, under a gold hairline (a rule, never text — SPEC 7). */
.sign-in__or {
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--shell-gold);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-muted);
}

/* The development-only seeded-user list, marked as such so it cannot be mistaken for a real option. */
.sign-in__dev {
  border-left: 3px solid var(--shell-accent);
}

.sign-in__tag {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-accent);
}

@media (max-width: 720px) {
  .sign-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .sign-in__hero {
    padding: 24px 20px;
  }
}

/* The provider list on the sign-in page: one full-width choice per row, legible at 320px. */
.app-choices {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-choices .app-button {
  display: block;
  width: 100%;
}

/*
 * The share dialog (SPEC 4.4), which SPEC 7 names as part of the shell even though it opens over
 * the chart. Its open button and fixed backdrop stay in `shell.css`: the button is one of the
 * chart header's own controls and the backdrop is only a scrim.
 */
.share-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 20px;
  background: var(--shell-card);
  border: 1px solid var(--shell-rule);
  border-top: 3px solid var(--shell-gold);
  color: var(--shell-text);
  font-family: var(--font-shell-body);
  font-size: 15px;
}

.share-dialog__heading {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 19px;
  color: var(--shell-heading);
}

.share-dialog__entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-dialog__entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--shell-rule);
}

.share-dialog__entry-email {
  flex: 1 1 180px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-dialog__entry-provenance,
.share-dialog__entry-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--shell-muted);
}

.share-dialog__add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--shell-gold);
}

.share-dialog__add-email,
.share-dialog__add-expiry,
.share-dialog__add-message {
  flex: 1 1 160px;
  min-width: 0;
  padding: 8px 9px;
  font-family: var(--font-shell-body);
  font-size: 15px;
  color: var(--shell-text);
  background: var(--shell-field);
  border: 1px solid var(--shell-rule);
}

@media (max-width: 640px) {
  .app-header {
    padding: 10px 14px;
  }

  .app-main {
    padding: 20px 14px 36px;
  }

  .app-card {
    padding: 16px 14px;
  }
}