/*
 * A mockup, not a design. Enough for the browsing experience to be legible
 * while the routes and the page structure are being worked out — the header and
 * footer are deliberately drawn as dashed boxes so that nobody, including us,
 * mistakes this for a decision. Replace wholesale when there is a real one.
 *
 * Native CSS, no build step (ADR-0003). Propshaft includes every file under
 * app/assets/stylesheets, so this is the whole stylesheet.
 */

:root {
  color-scheme: light dark;

  --paper: #fdfdfc;
  --chrome: #f0eee9;
  --ink: #1c1c1a;
  --muted: #6a6862;
  --edge: #c9c6bf;
  --link: #1a5c94;
}

/* Three states, not two. No attribute means auto — the system decides, which is
 * also what a browser that never runs the switcher's JavaScript gets.
 *
 * The dark palette is written twice on purpose. CSS has no way to name a block
 * of declarations and hang it off two unrelated selectors, and the one-line
 * alternative — light-dark() — is newer than the browser baseline that
 * allow_browser :modern admits. Two copies that must agree is the cheaper of
 * the two mistakes here; if they drift, the symptom is visible immediately. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #191918;
    --chrome: #232321;
    --ink: #e8e6e1;
    --muted: #96938d;
    --edge: #56554f;
    --link: #7db3e0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #191918;
  --chrome: #232321;
  --ink: #e8e6e1;
  --muted: #96938d;
  --edge: #56554f;
  --link: #7db3e0;
}

:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

header,
main,
footer {
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem 1rem;
}

/* The two bands the mockup exists to make obvious. */
header,
footer {
  background: var(--chrome);
  border: 1px dashed var(--edge);
  border-radius: 4px;
}

header a {
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

a {
  color: var(--link);
}

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

h1 {
  font-size: 1.6rem;
  margin-block: 1.5rem 0.5rem;
}

h2 {
  font-size: 1.1rem;
  margin-block: 2rem 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--edge);
}

h3 {
  font-size: 1rem;
  margin-block: 1.25rem 0.25rem;
}

ul {
  margin-block: 0.25rem;
}

/* The trail, as a row with a separator drawn in rather than typed. */
.breadcrumb {
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem 1rem 0;
  font-size: 0.9rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
  color: var(--muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--muted);
}

/* The footer's two controls. They sit side by side while they fit and drop onto
 * separate lines when they do not, which is what keeps a growing language list
 * from squeezing anything. */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* A disclosure, not a row: one word wide when shut, whatever the language
 * count, which is what makes it portable into the header later. */
.languages {
  position: relative;
  font-size: 0.9rem;
}

.languages summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 4px;
  cursor: pointer;

  /* Both lines, and both needed: the standard property, and the one Safari
   * still draws its own triangle from. */
  list-style: none;
}

.languages summary::-webkit-details-marker {
  display: none;
}

.languages summary::after {
  content: "\25BE";
  color: var(--muted);
}

.languages[open] summary::after {
  content: "\25B4";
}

.languages summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Absolute, so opening it never moves the page. That is the property that lets
 * this sit in a header rather than only at the bottom of one. */
.languages ul {
  position: absolute;
  z-index: 1;
  min-width: 100%;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 4px;
}

.languages li a {
  display: block;
  padding: 0.2rem 0.75rem;
  color: var(--link);
  white-space: nowrap;
  text-decoration: none;
}

.languages li a:hover {
  background: var(--chrome);
}

.languages li [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* A segmented control: three buttons drawn as one thing. Icon-only, so its
 * width is the same in every language however long the words beside it get. */
.segmented {
  display: flex;
}

.segmented button {
  min-width: 2.2rem;
  padding: 0.15rem 0.4rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  cursor: pointer;
}

.segmented button + button {
  border-left: 0;
}

.segmented button:first-child {
  border-radius: 4px 0 0 4px;
}

.segmented button:last-child {
  border-radius: 0 4px 4px 0;
}

.segmented button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.segmented button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.rendered-by {
  margin: 0.5rem 0 0;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--muted);
}