/*
 * Parent direction "Ülevaade" (DESIGN.md "Vanemavaade"): calm and dense, rows and
 * rules instead of cards, numbers right-aligned in tabular figures, a state is
 * always an icon and a word. Loaded on top of base.css; components read token
 * names only. No motion of its own.
 */

/* theme: vanem */
[data-theme="vanem"] {
  --color-paper: oklch(98% 0.004 255);  --color-paper-2: oklch(95% 0.007 255);
  --color-ink: oklch(23% 0.02 262);     --color-ink-2: oklch(46% 0.02 262);
  --color-rule: oklch(87% 0.01 255);
  --color-accent: oklch(50% 0.08 205);  --color-accent-ink: oklch(98% 0.004 255);
  --color-accent-text: oklch(50% 0.08 205);
  --color-accent-2: oklch(95% 0.007 255); --color-accent-2-ink: oklch(23% 0.02 262);
  --color-focus: oklch(50% 0.08 205);
  --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --radius-card: 8px; --radius-control: 8px; --border-card: 1px;
  --color-danger: oklch(48% 0.19 27); --color-ok: oklch(42% 0.11 150); --color-wait: oklch(45% 0.1 75);
  --color-danger-ink: oklch(98% 0.004 255);
  --dot-k1: oklch(72% 0.17 350); --dot-k2: oklch(90% 0.2 125); --dot-k3: oklch(74% 0.17 55);
  --pa-max: 68rem;
  color-scheme: light;
}
/* The dark twin of the same direction (the hex twins are in reviewer/mail). */
@media (prefers-color-scheme: dark) {
  [data-theme="vanem"] {
    --color-paper: oklch(17% 0.012 255);  --color-paper-2: oklch(22% 0.015 255);
    --color-ink: oklch(93% 0.008 255);    --color-ink-2: oklch(74% 0.014 255);
    --color-rule: oklch(34% 0.014 255);
    --color-accent: oklch(78% 0.09 205);  --color-accent-ink: oklch(17% 0.012 255);
    --color-accent-text: oklch(78% 0.09 205);
    --color-accent-2: oklch(22% 0.015 255); --color-accent-2-ink: oklch(93% 0.008 255);
    --color-focus: oklch(78% 0.09 205);
    --color-danger: oklch(74% 0.16 27); --color-ok: oklch(78% 0.13 150); --color-wait: oklch(80% 0.11 75);
    --color-danger-ink: oklch(17% 0.012 255);
    color-scheme: dark;
  }
}

[data-theme="vanem"] body { font-size: var(--text-sm); }

.pa-wrap { width: 100%; max-width: var(--pa-max); margin-inline: auto; padding-inline: var(--space-md); }
.pa-main { display: flex; flex-direction: column; gap: var(--space-md); padding-block: var(--space-lg) var(--space-3xl); min-width: 0; }
.pa-main > * { min-width: 0; }

.pa-skip { position: absolute; left: -999px; top: 0; padding: var(--space-xs) var(--space-md); background: var(--color-paper); color: var(--color-ink); }
.pa-skip:focus-visible { left: var(--space-md); z-index: 2; }

.pa-top { border-bottom: 1px solid var(--color-rule); }
.pa-top__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); min-height: 56px; }
.pa-brand { font-weight: 600; margin-right: auto; }
.pa-nav { display: flex; gap: var(--space-xs); }
.pa-nav a, .pa-link {
  display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-sm);
  color: var(--color-ink); text-decoration: none; border: 0; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; font-weight: 600;
}
.pa-nav a:hover, .pa-link:hover { text-decoration: underline; }
.pa-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.pa-logout { margin: 0; }

.pa-h1 { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pa-h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pa-h3 { font-size: var(--text-md); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pa-h4 { font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-xs); }
.pa-nick { font-weight: 400; color: var(--color-ink-2); }

.pa-section { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); min-width: 0; }
.pa-section > * { min-width: 0; }
.pa-quiet { display: flex; gap: var(--space-xs); align-items: center; color: var(--color-ink-2); }
.pa-more { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--touch-min); font-weight: 600; }

.pa-notice {
  display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-ok); border-left-width: 4px; border-radius: var(--radius-control); font-weight: 600;
}
.pa-notice .icon { color: var(--color-ok); margin-top: 2px; }
.pa-notice[data-kind="err"] { border-color: var(--color-danger); }
.pa-notice[data-kind="err"] .icon { color: var(--color-danger); }

/* What needs the parent: the first thing on the summary. */
.pa-attention { display: flex; flex-direction: column; }
.pa-attention li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center;
  min-height: var(--touch-min); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-rule);
}
.pa-attention li:last-child { border-bottom: 0; }
.pa-attention .icon { color: var(--color-danger); }

/* One block per child; side by side when there is room, a rule between them, no cards. */
.pa-kids { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.pa-kid { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.pa-kid:last-child { border-bottom: 0; }
.pa-kid__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.pa-kid__head .pa-state { margin-left: auto; }
@media (min-width: 60rem) {
  .pa-kids { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .pa-kid { padding: 0 var(--space-md); border-bottom: 0; border-left: 1px solid var(--color-rule); }
  .pa-kid:first-child { padding-left: 0; border-left: 0; }
  .pa-kid:last-child { padding-right: 0; }
}

.pa-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--color-ink-2); }
.pa-dot--k1 { background: var(--dot-k1); }
.pa-dot--k2 { background: var(--dot-k2); }
.pa-dot--k3 { background: var(--dot-k3); }

.pa-state { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; color: var(--color-ink-2); }
.pa-state .icon { width: 1.1em; height: 1.1em; }
.pa-state[data-state="open"] { color: var(--color-ok); }
.pa-state[data-state="paused"] { color: var(--color-wait); }
.pa-tag { display: inline-block; padding: 0 var(--space-2xs); border: 1px solid var(--color-ink-2); border-radius: 4px; font-size: var(--text-xs); color: var(--color-ink-2); }

/* Label left, value right; numbers in tabular figures. Long text gets the full width under its label. */
.pa-rows { display: flex; flex-direction: column; margin: 0; }
.pa-rows > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline;
  padding-block: 6px; border-bottom: 1px solid var(--color-rule);
}
.pa-rows > div:last-child { border-bottom: 0; }
.pa-rows dt { color: var(--color-ink-2); min-width: 0; }
.pa-rows dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pa-rows > .pa-rows__text { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.pa-rows > .pa-rows__text dd { text-align: left; }
.pa-shared { display: flex; flex-direction: column; }
.pa-shared a { display: inline-flex; align-items: center; min-height: var(--touch-min); overflow-wrap: anywhere; }

.pa-rewards, .pa-controls { display: flex; flex-direction: column; }
.pa-rewards > li, .pa-controls > li { display: flex; flex-direction: column; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); min-width: 0; }
.pa-rewards > li:last-child, .pa-controls > li:last-child { border-bottom: 0; }
.pa-reward__title { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; }

.pa-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pa-actions form, .pa-controls form { margin: 0; min-width: 0; }
.pa-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
/* The sign-in page: the same quiet column, in the middle of the screen. */
.pa-door { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); min-height: 100dvh; max-width: 24rem; padding-block: var(--space-xl); }
.pa-door .pa-form { max-width: none; }
.pa-door .pa-form .btn { align-self: stretch; justify-content: center; text-align: center; }
.pa-form { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 26rem; }
.pa-form label, .pa-inline label { font-weight: 600; }
.pa-form .btn { margin-top: var(--space-sm); align-self: flex-start; }
.pa-check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--touch-min); }
.pa-check input { width: 22px; height: 22px; accent-color: var(--color-accent); }
.pa-input {
  min-height: var(--touch-min); width: 100%; max-width: 100%; padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper); color: var(--color-ink);
  border: 1px solid var(--color-ink-2); border-radius: var(--radius-control);
}
.pa-inline .pa-input { width: 7rem; }
.pa-inline .pa-input--wide { width: min(100%, 20rem); }

/* Buttons in the parent view are quieter than a child's: the text may wrap, nothing lifts on hover. */
[data-theme="vanem"] .btn { min-height: var(--touch-min); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); white-space: normal; text-align: left; }
[data-theme="vanem"] .btn:hover { transform: none; text-decoration: underline; }
[data-theme="vanem"] .btn--ghost { border-width: 1px; }

/* Destructive: red, and only on the deletion path. */
.pa-danger { border-top-color: var(--color-danger); }
.pa-btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.pa-btn-danger--solid { background: var(--color-danger); color: var(--color-danger-ink); border-color: var(--color-danger); }

.pa-secret {
  padding: var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-card);
  font-size: var(--text-lg); overflow-wrap: anywhere; user-select: all;
}

.pa-samples { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.pa-samples > li { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.pa-samples img, .pa-samples video, .pa-shared-body img { max-height: 24rem; width: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.pa-samples audio { width: 100%; }
@media (min-width: 48rem) { .pa-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pa-quote {
  padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-rule);
  background: var(--color-paper-2); overflow-wrap: anywhere; max-width: 70ch;
}