/* Skeleton and components, shared by all three design variants.
   Nothing here hard-codes a colour, a typeface or a corner radius: every
   variant supplies its own tokens in its own stylesheet, selected by
   `data-variant` on <html>. See paper.css / poster.css / sage.css.

   The bare `:root` block below is the paper variant's light palette, kept only
   as the fallback for a document that somehow has no `data-variant` — normally
   `index.html` ships the attribute and paper.css sets these again. */
:root {
  color-scheme: light dark;

  --bg: #f4f1ea;
  --panel: #f4f1ea;
  --surface: #fffdf8;
  --line: #e2dccf;
  --line-soft: #ede7da;
  --ink: #1d1a15;
  --ink-soft: #3d372d;
  --muted: #6a6356;
  --placeholder: #8a8272;

  --accent: #2b4ba0;
  --accent-hover: #1c3578;
  --accent-soft: #e3e8f5;
  --accent-ink: #1c3578;
  --on-accent: #ffffff;
  /* The accent as text on the page's grounds. The same colour where the
     accent reads well as text; a variant whose accent is a fill colour
     (poster's orange) points it at a darker one (UX-10). */
  --accent-text: var(--accent);
  --accent-text-hover: var(--accent-hover);

  --chip: #ede7da;
  --chip-ink: #4a4336;
  --dash: #b9b09d;

  --row-edit: #f2f4fb;
  --seg-on: #fffdf8;
  --seg-shadow: 0 1px 3px rgba(29, 26, 21, 0.12);
  --menu-shadow: 0 12px 32px rgba(29, 26, 21, 0.12);

  --danger: #a3321f;
  --ok: #2f7a4f;
  --pending: #9a9282;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-btn: none;
  --shadow-card: none;

  --font-display: Literata, "Noto Sans Armenian", Georgia, serif;
  --font-body: Onest, "Noto Sans Armenian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1-size: clamp(30px, 4vw, 44px);
  --h1-weight: 600;
  --h1-spacing: -0.01em;
  --label-spacing: 0.06em;
  --label-transform: uppercase;

  --art-bg: #2b4ba0;
  --art-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #141318;
    --panel: #141318;
    --surface: #1d1c22;
    --line: #2f2d36;
    --line-soft: #28262e;
    --ink: #eeeae1;
    --ink-soft: #cfc9bd;
    --muted: #a39d91;
    --placeholder: #7c7688;

    --accent: #93a9f2;
    --accent-hover: #b6c5f8;
    --accent-soft: #262d47;
    --accent-ink: #b6c5f8;
    --on-accent: #11162a;

    --chip: #28262e;
    --chip-ink: #d8d2c5;
    --dash: #57525e;

    --row-edit: #212640;
    --seg-on: #3a3843;
    --seg-shadow: none;
    --menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

    --danger: #f0907a;
    --ok: #5fbe86;
    --pending: #7c7688;
  }
}

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

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

  --bg: #141318;
  --panel: #141318;
  --surface: #1d1c22;
  --line: #2f2d36;
  --line-soft: #28262e;
  --ink: #eeeae1;
  --ink-soft: #cfc9bd;
  --muted: #a39d91;
  --placeholder: #7c7688;

  --accent: #93a9f2;
  --accent-hover: #b6c5f8;
  --accent-soft: #262d47;
  --accent-ink: #b6c5f8;
  --on-accent: #11162a;

  --chip: #28262e;
  --chip-ink: #d8d2c5;
  --dash: #57525e;

  --row-edit: #212640;
  --seg-on: #3a3843;
  --seg-shadow: none;
  --menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

  --danger: #f0907a;
  --ok: #5fbe86;
  --pending: #7c7688;
}

* {
  box-sizing: border-box;
}

/* The scrollbar's room is always kept: a page growing past the window —
   a message folding open — must not narrow everything on it at once
   (UX-5). */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* Clear of a phone's notch and rounded corners when the installed app
     draws edge to edge (`viewport-fit=cover`); zero everywhere else. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  font: 15px/1.5 var(--font-body);
  color: var(--ink);
  background: var(--bg);
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
}

input,
textarea,
select,
button {
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}

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

h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-spacing);
  line-height: 1.1;
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}

.ico {
  display: block;
  flex-shrink: 0;
}

/* --- folding and swapping, by CSS (UX-5) -------------------------------------

   `.fold` holds something shown only sometimes — a line, a button, a form —
   always in the page. Shut, its one grid row is 0fr and it has no height;
   `.open`, the row is 1fr, its content's own height, and the change is a
   transition: whatever is below moves down and up with it. Its content is
   one child, which clips while the row is short. Shut, it is also `inert`
   in the markup. */
.fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    margin 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 180ms ease;
}

.fold.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.fold > * {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: 4px;
}

/* `.swap` holds two states of one place, one shown: both are laid out, so
   the place is as big as the bigger, and changing which shows moves
   nothing. The hidden one has `.off`. */
.swap {
  display: inline-grid;
}

.swap > * {
  grid-area: 1 / 1;
}

.swap > .off {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .fold {
    transition: none;
  }
}