/* Ketu Karmic Kafe — admin case studies.
   One structural idea carries the design: every case is read through some
   combination of three lenses, and which ones were used is the thing the
   admin scans for. The lens marks are the only saturated colour in the app;
   everything else stays quiet so they read at a glance. */

:root {
  --paper: #eff1ee;
  --surface: #ffffff;
  --ink: #23282b;
  --muted: #68726d;
  --rule: #d4dad3;
  --rule-strong: #b3bcb2;

  --psych: #3f6d8f;
  --astro: #8a5a3b;
  --numer: #4f6b3e;

  --flag: #a33b3b;
  --flag-wash: #f7eaea;
  --ok: #3e6b4f;

  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --measure: 68ch;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--psych);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

h1 {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.25rem;
}

/* --- Shell ------------------------------------------------------------- */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule-strong);
}

.masthead__inner,
.page {
  margin: 0 auto;
  max-width: 62rem;
  padding: 0 1.5rem;
}

.masthead__inner {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 0.9rem;
  padding-top: 0.9rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}

.wordmark span {
  color: var(--muted);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  margin-left: 0.6rem;
}

.masthead nav {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}

.masthead nav a {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.masthead nav a:hover,
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
}

.page {
  padding-bottom: 4rem;
  padding-top: 2.25rem;
}

.page__head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.page__head p {
  color: var(--muted);
  margin: 0.35rem 0 0;
  max-width: var(--measure);
}

/* --- Notices ----------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--rule-strong);
  background: var(--surface);
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
}

.notice--success {
  border-left-color: var(--ok);
}

.notice--error {
  border-left-color: var(--flag);
  background: var(--flag-wash);
}

.notice--warning {
  border-left-color: var(--flag);
}

/* An ambient tip, not a problem -- "ask once" on the Prashna intake screen,
   the repeat-question note on the reading page. Distinct from --warning on
   purpose: nothing here needs attention, it is just worth knowing before
   asking. Gold under .cosmos (below); a quiet neutral border elsewhere. */
.notice--calm {
  border-left-color: var(--rule-strong);
}

.notice p {
  margin: 0;
  max-width: var(--measure);
}

.notice code {
  background: var(--paper);
  padding: 0.05em 0.3em;
}

/* --- Lens marks -------------------------------------------------------- */

.lenses {
  display: inline-flex;
  gap: 3px;
}

.lens {
  border: 1px solid var(--rule-strong);
  color: transparent;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  height: 1.35rem;
  width: 1.35rem;
}

.lens--on {
  border-color: transparent;
  color: var(--surface);
}

.lens--psych.lens--on {
  background: var(--psych);
}

.lens--astro.lens--on {
  background: var(--astro);
}

.lens--numer.lens--on {
  background: var(--numer);
}

.lens-key {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

.lens-key div {
  align-items: center;
  display: flex;
  gap: 0.4rem;
}

/* --- Case table -------------------------------------------------------- */

.cases {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-collapse: collapse;
  width: 100%;
}

.cases th,
.cases td {
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
}

.cases thead th {
  border-bottom: 1px solid var(--rule-strong);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.cases tbody tr:last-child td {
  border-bottom: 0;
}

.cases__question {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.35;
  max-width: 34rem;
}

.cases__question a {
  color: var(--ink);
  text-decoration: none;
}

.cases__question a:hover {
  text-decoration: underline;
}

.cases__meta {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.cases__empty {
  font-style: italic;
  color: var(--muted);
}

.status {
  font-size: 0.85rem;
  white-space: nowrap;
}

.status--needs_review {
  color: var(--flag);
}

.status--clean {
  color: var(--ok);
}

.status--approved {
  color: var(--ok);
  font-weight: 600;
}

.problems {
  color: var(--flag);
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
  padding-left: 1rem;
}

.row-actions {
  display: flex;
  gap: 0.75rem;
  white-space: nowrap;
}

/* --- Forms ------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.5rem;
}

.field {
  margin-bottom: 1.35rem;
  max-width: var(--measure);
}

.field:last-of-type {
  margin-bottom: 0;
}

.field > label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.field__hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}

input[type="text"],
input[type="password"],
input[type="file"],
textarea {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  width: 100%;
}

textarea {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--psych);
  outline-offset: 2px;
}

.field--lens > label {
  border-left: 3px solid var(--rule-strong);
  padding-left: 0.5rem;
}

.field--psych > label {
  border-left-color: var(--psych);
}

.field--astro > label {
  border-left-color: var(--astro);
}

.field--numer > label {
  border-left-color: var(--numer);
}

.actions {
  align-items: center;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.button {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
}

.button:hover {
  background: #14181a;
}

.button--quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.prashna-example {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--link, #2a5db0);
  text-decoration: underline;
  cursor: pointer;
}

.prashna-example:hover {
  opacity: 0.8;
}

.button--quiet:hover {
  background: var(--paper);
}

.button--danger {
  background: transparent;
  border-color: transparent;
  color: var(--flag);
  padding-left: 0;
  padding-right: 0;
}

.button--danger:hover {
  background: transparent;
  text-decoration: underline;
}

.link-back {
  color: var(--muted);
  display: inline-block;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* --- Login ------------------------------------------------------------- */

.login {
  margin: 0 auto;
  max-width: 24rem;
  padding: 5rem 1.5rem;
}

.login h1 {
  margin-bottom: 0.4rem;
}

.login p.login__sub {
  color: var(--muted);
  margin: 0 0 1.75rem;
}

.login .actions {
  border-top: 0;
  margin-top: 1.25rem;
  padding-top: 0;
}

/* --- Embedding readout ------------------------------------------------- */

.readout {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
}

.readout dl {
  display: grid;
  gap: 0.2rem 1.5rem;
  grid-template-columns: max-content 1fr;
  margin: 0.5rem 0 0;
}

.readout dt {
  color: var(--ink);
}

.readout dd {
  margin: 0;
}

/* --- Rulebook ---------------------------------------------------------- */

.rules {
  margin-top: 2rem;
}

.rules h2 {
  align-items: baseline;
  display: flex;
  font-family: var(--font-sans);
  font-size: 1rem;
  gap: 0.5rem;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.rules__count {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.rules__blurb {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.3rem 0 1rem;
}

.rule {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  margin-bottom: 0.9rem;
  padding: 1.1rem 1.25rem;
}

.rule--draft {
  border-left-color: var(--psych);
}

.rule--approved {
  border-left-color: var(--ok);
}

.rule--edited {
  border-left-color: var(--numer);
}

.rule--rejected {
  border-left-color: var(--rule-strong);
  opacity: 0.6;
}

.rule__text {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 0;
  max-width: var(--measure);
}

.rule__rationale {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.55rem 0 0;
  max-width: var(--measure);
}

.rule__sources {
  font-size: 0.85rem;
  margin-top: 0.7rem;
}

.rule__sources--none {
  color: var(--flag);
}

.rule__foot {
  align-items: center;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
}

.rule__meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.rule-add {
  margin-top: 2.5rem;
}

.rule-add summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.readout--top {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 42rem) {
  .cases,
  .cases thead,
  .cases tbody,
  .cases tr,
  .cases td {
    display: block;
    width: 100%;
  }

  .cases thead {
    display: none;
  }

  .cases tr {
    border-bottom: 1px solid var(--rule-strong);
    padding: 0.5rem 0;
  }

  .cases td {
    border-bottom: 0;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
  }

  .cases__question {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Kids assessment
   Same paper palette as the rest of the admin. The report is the one screen
   here meant to be read rather than worked through, so it takes a measure and
   a serif face; the forms and tables stay in the admin idiom.
   --------------------------------------------------------------------------- */

.pill {
  display: inline-block;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill--approved,
.pill--edited { border-color: var(--ok); color: var(--ok); }
.pill--needs_review,
.pill--draft { border-color: var(--flag); color: var(--flag); }
.pill--rejected { color: var(--muted); }

/* Prashna's leaning, shown once above the cards -- the same vocabulary the
   reading itself uses (Favourable/Mixed/Challenging), never a bare yes/no. */
.pill--leaning-favourable { border-color: var(--ok); color: var(--ok); }
.pill--leaning-mixed { border-color: var(--astro); color: var(--astro); }
.pill--leaning-challenging { border-color: var(--flag); color: var(--flag); }
.pill--boxes { border-color: var(--ok); color: var(--ok); }

.kids-flag {
  color: var(--flag);
  font-size: 0.85rem;
}

/* --- Prashna structured reading (boxes, not one text block) ------------ */

.prashna-box,
.prashna-verdict {
  max-width: var(--measure);
}

/* Section boxes are the shared .selfmap-cards flip-card grid (templates/
   _flip_cards.html) -- see its own rules above, not reimplemented here. */

.prashna-verdict__badge {
  display: inline-block;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-weight: 600;
  font-size: 1rem;
}

/* Colour is never the only signal -- the label text is always inside the
   badge too. */
.prashna-verdict__badge--supportive { border-color: var(--ok); color: var(--ok); }
.prashna-verdict__badge--mixed { border-color: var(--astro); color: var(--astro); }
.prashna-verdict__badge--obstructed { border-color: var(--flag); color: var(--flag); }
.prashna-verdict__badge--inconclusive { border-color: var(--rule-strong); color: var(--muted); }

.prashna-verdict__summary {
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

.tag-chip {
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 0.35rem;
  text-align: center;
}

.tag-chip--t { border-color: var(--psych); color: var(--psych); }
.tag-chip--c { border-color: var(--astro); color: var(--astro); }
.tag-chip--e { border-color: var(--rule-strong); color: var(--muted); }
/* P ("provisional / internal testing") gets a visibly different, dashed
   "test" style rather than a solid chip -- it is never meant to look like a
   confirmed classification. */
.tag-chip--p {
  border-color: var(--flag);
  border-style: dashed;
  color: var(--flag);
}

.tag-chip--inline {
  display: inline-block;
  margin: 0 0.2rem;
}

.prashna-legend {
  margin: 0 0 1.5rem;
}

.prashna-working summary {
  cursor: pointer;
  font-weight: 600;
}

.prashna-working summary:focus-visible {
  outline: 2px solid var(--rule-strong);
  outline-offset: 2px;
}

/* Print: every box stacks in one column, and a collapsed <details> (Not
   assessed, Show the working) prints its contents open regardless of
   whether it was expanded on screen -- a printed reading with "Not
   assessed" hidden inside a closed disclosure is the one failure mode
   this exists to prevent. */
@media print {
  .selfmap-cards { grid-template-columns: 1fr; }
  .prashna-working:not([open]) > :not(summary) {
    display: block !important;
  }
}

/* Consent ------------------------------------------------------------------ */

.consent {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}

.consent h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.consent__list {
  margin: 0.75rem 0 1rem 1.1rem;
  max-width: var(--measure);
}

.consent__list li { margin-bottom: 0.5rem; }

/* The tick and its label share a row, and the label stays clickable across
   its whole width rather than only on the words. */
.consent__check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.consent__check input { margin-top: 0.25rem; }

.kids-coords {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--rule-strong);
}

.kids-coords summary {
  cursor: pointer;
  font-weight: 500;
}

/* Questionnaire ------------------------------------------------------------ */

.kids-quiz__item {
  margin: 0 0 1.25rem;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.kids-quiz__item:first-of-type { border-top: 0; }

.kids-quiz__item--missing {
  border-left: 3px solid var(--flag);
  padding-left: 0.75rem;
  background: var(--flag-wash);
}

.kids-quiz__item legend {
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  max-width: var(--measure);
}

.kids-quiz__num { color: var(--muted); }

.kids-quiz__scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.6rem;
}

.kids-quiz__scale label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Report ------------------------------------------------------------------- */

.kids-report {
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.kids-report h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.kids-report__sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

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

.kids-report__ranked li {
  margin-bottom: 0.9rem;
}

/* A plain proportional bar. It carries the same number the sentence does, so
   it is decoration for the ranking rather than the only place the value
   appears -- nothing is lost if it does not render. */
.kids-report__bar {
  height: 4px;
  width: var(--fill, 0%);
  min-width: 2px;
  background: var(--psych);
  margin-bottom: 0.3rem;
}

.kids-report__line { font-size: 0.95rem; }

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

.kids-report__themes li {
  margin-bottom: 1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--astro);
}

.kids-report__source {
  font-size: 0.82rem;
  color: var(--muted);
}

.kids-report__label {
  font-weight: 600;
  font-size: 0.95rem;
}

.kids-report__themes p { margin: 0.2rem 0 0; }

.kids-report__list { margin: 0 0 0 1.1rem; }
.kids-report__list li { margin-bottom: 0.5rem; }
.kids-report__list--quiet { color: var(--muted); font-size: 0.92rem; }

.kids-report--stop .kids-report__list { color: var(--flag); }

/* The three signals, kept visually separate as well as structurally. A reader
   who skims must still see that these are three claims from two sources and
   not one finding. */
.kids-combined {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
}

.kids-combined h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

.kids-combined dl { margin: 0; }

.kids-combined dt {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}

.kids-combined dt:first-child { margin-top: 0; }

.kids-combined dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
}

.kids-combined__caption {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .kids-quiz__scale { gap: 0.4rem 0.9rem; }
  .kids-combined { padding: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   Kids assessment, public flow
   A parent and a child use these screens, not the admin, so the targets are
   bigger and there is one question on screen at a time.
   --------------------------------------------------------------------------- */

/* Where you are in the four steps. An ordered list so it still reads in
   order with no styling, and aria-current marks the step for a screen
   reader rather than relying on the colour alone. */
.kids-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}

.kids-steps li { white-space: nowrap; }
/* At the top of the page content, under the shared site header. */
.page > .kids-steps { margin-bottom: 1.5rem; }
.kids-steps__done { color: var(--ok); }
.kids-steps__now { color: var(--ink); font-weight: 600; }

/* Progress ----------------------------------------------------------------- */

.kids-progress { margin: 0 0 1.75rem; }

.kids-progress__text {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.kids-progress__track {
  height: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.kids-progress__fill {
  height: 100%;
  width: var(--done, 0%);
  background: var(--psych);
  transition: width 0.25s ease;
}

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

.kids-intro {
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--psych);
  background: var(--surface);
  max-width: var(--measure);
}

.kids-intro p { margin: 0 0 0.5rem; }
.kids-intro p:last-child { margin-bottom: 0; }

/* One question per screen -------------------------------------------------- */

.kids-ask { max-width: var(--measure); }

.kids-ask__question {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 1.5rem;
}

.kids-ask__options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

/* The whole row is the target, not the radio. A child on a phone should be
   able to hit any part of the option; 3.25rem clears the 44px minimum with
   room spare. */
.kids-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: var(--surface);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kids-option:hover { border-color: var(--psych); }

/* :has lets the whole row show the selection. Browsers without it still show
   the radio itself checked, so nothing is lost -- the row simply does not
   tint. */
.kids-option:has(input:checked) {
  border-color: var(--psych);
  box-shadow: inset 0 0 0 1px var(--psych);
}

.kids-option:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kids-option input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--psych);
}

.kids-ask__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.button--big {
  font-size: 1.05rem;
  padding: 0.8rem 2.25rem;
  min-height: 3rem;
}

.kids-back {
  color: var(--muted);
  font-size: 0.95rem;
}

/* The date read-back.
   A date shown as 10/05/1987 means two different things depending on who is
   reading it, and one of them draws the wrong chart. This says it in words
   right under the field, while the cursor is still in the box. */
.date-echo {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  min-height: 1.3em;
}

.date-echo--set {
  color: var(--ink);
}

.date-echo__label {
  color: var(--muted);
}

.date-echo--set strong {
  font-weight: 600;
}

/* The wait on the last question.
   The generation behind it takes as long as it takes; what this does is stop
   the page reading as hung while it happens, and stop a second press landing
   on a worker already busy with the first. */
.kids-ask__note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
  max-width: 34rem;
}

/* The live region that announces the wait. Off-screen rather than styled
   quiet: the button already carries the message, and display:none or
   visibility:hidden would stop a screen reader announcing it at all. */
.slow-submit__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The label is replaced by a spinner plus the message, so the button gets
   wider. That is fine -- it is saying something different now -- but it has
   to stop looking pressable while it does. */
.is-submitting .button--big {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: progress;
  opacity: 0.85;
}

/* The hover state inverts this button. Left alone it would keep inviting the
   press that this whole block exists to prevent. */
.is-submitting .button--big:hover {
  background: var(--ink);
}

/* The answers stay readable but stop being changeable: the ones that were
   submitted are the ones being read. */
.is-submitting .kids-ask__options {
  opacity: 0.55;
  pointer-events: none;
}

.is-submitting .kids-back {
  pointer-events: none;
  opacity: 0.5;
}

.slow-submit__spinner {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: slow-submit-spin 0.7s linear infinite;
}

@keyframes slow-submit-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kids-option { transition: none; }
  /* Still a ring, so the button reads as busy; it just does not turn. */
  .slow-submit__spinner {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.6;
  }
}

@media (max-width: 640px) {
  .kids-ask__actions { flex-direction: row-reverse; justify-content: space-between; }
  .button--big { flex: 1 1 auto; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Self Map
   Shares the kids flow's shell, progress bar and option rows. What is added
   here is the reading itself: three lenses shown apart, then what they add
   up to.
   --------------------------------------------------------------------------- */

.selfmap-subhead {
  margin: 2rem 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

.selfmap-asked {
  color: var(--muted);
  max-width: var(--measure);
}

.selfmap-asked em {
  color: var(--ink);
  font-style: italic;
}

.selfmap-correct { margin-top: 2rem; }

/* The three lenses. Each keeps its own accent down the left edge -- the same
   three colours the case list uses for psychology, astrology and numerology,
   so a lens means the same thing everywhere in the app. */
.selfmap-signals {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}

.selfmap-signal {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
}

.selfmap-signal--psychology { border-left-color: var(--psych); }
.selfmap-signal--astrology { border-left-color: var(--astro); }
.selfmap-signal--numerology { border-left-color: var(--numer); }

.selfmap-signal h2 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.selfmap-signal p { margin: 0; font-size: 1rem; }

/* What they add up to, given the weight of the answer it is. */
.selfmap-combined {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  max-width: var(--measure);
}

.selfmap-combined h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.selfmap-combined__text {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.selfmap-next {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.98rem;
}

/* The SKILLS.md reading: Section 52's architecture.
   Read as one argument rather than as labelled boxes, because that is what it
   is -- each section follows from the one above it, and the three lenses are
   folded into 'symbolic' and then tested in 'correlation' instead of being
   set side by side. The accent colours mark which layer of the manual's
   hierarchy a section belongs to. */
.selfmap-sections {
  display: grid;
  gap: 1.75rem;
  margin: 1.75rem 0 2.5rem;
  max-width: var(--measure);
}

.selfmap-section {
  padding-left: 1.1rem;
  border-left: 3px solid var(--rule);
}

.selfmap-section h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
}

.selfmap-section p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Level 1 and 2 of the manual's hierarchy: the person, then the psychology. */
.selfmap-section--understanding { border-left-color: var(--rule-strong); }
.selfmap-section--psychological { border-left-color: var(--psych); }
.selfmap-section--autopilot { border-left-color: var(--psych); }

/* Levels 3 and 4: the symbolic lenses, and where they were checked. */
.selfmap-section--symbolic { border-left-color: var(--astro); }
.selfmap-section--correlation { border-left-color: var(--numer); }

/* Levels 6 and 7: reflection, then action. The last two carry the weight, so
   they are given the surface the combined panel has in the other pathway. */
.selfmap-section--potential { border-left-color: var(--rule-strong); }
.selfmap-section--principle { border-left-color: var(--rule-strong); }

.selfmap-section--practical,
.selfmap-section--reflection {
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-left-width: 3px;
}

.selfmap-section--reflection p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

.selfmap-h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .selfmap-combined { padding: 1.1rem; }
}

/* The short reading: four flip cards. 2x2 on desktop, one column on a
   phone. Front shows an icon, a title and a plain-language headline; a tap
   (or Enter/Space -- each card is a real <button>) turns it over to 2-3
   sentences. Both faces sit in the same CSS Grid cell rather than being
   absolutely positioned, which is what lets the card's height follow
   whichever face is actually taller instead of a fixed height that would
   either clip the back text or leave the front mostly empty. */
.selfmap-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0;
  max-width: var(--measure);
}

@media (max-width: 640px) {
  .selfmap-cards { grid-template-columns: 1fr; }
}

.selfmap-card {
  all: unset;
  cursor: pointer;
  display: block;
  min-height: 11rem;
  perspective: 1200px;
  border-radius: 10px;
}

.selfmap-card:focus-visible {
  outline: 2px solid var(--psych);
  outline-offset: 3px;
}

.selfmap-card__inner {
  display: grid;
  grid-template-areas: "face";
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.selfmap-card.is-flipped .selfmap-card__inner { transform: rotateY(180deg); }

.selfmap-card__face {
  grid-area: face;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--surface);
  backface-visibility: hidden;
  /* Real content, real wrapping -- the back's 2-3 sentences never overflow
     a narrow card because nothing here is a fixed box a longer line could
     spill out of. */
  overflow-wrap: break-word;
}

.selfmap-card__face--back { transform: rotateY(180deg); }

.selfmap-card__icon { font-size: 1.4rem; line-height: 1; }

.selfmap-card__title {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.selfmap-card__headline {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.35;
}

.selfmap-card__hint {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--muted);
}

.selfmap-card__text {
  font-size: 1rem;
  line-height: 1.55;
}

.selfmap-card__hedge {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Prashna only: a small front badge ("3 factors") and a bulleted back
   (chart fact, then its plain meaning) in place of Self Map's one
   paragraph. Both are opt-in on the data the macro is given, so a card
   that supplies neither (every Self Map card) renders exactly as before. */
.selfmap-card__count {
  align-self: flex-start;
  background: var(--paper);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.1rem 0.55rem;
}

.selfmap-card__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selfmap-card__bullets li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.selfmap-card__fact {
  font-weight: 600;
}

.selfmap-card__meaning {
  color: var(--muted);
}

.selfmap-card__meaning::before {
  content: "— ";
}

.selfmap-card--astrology .selfmap-card__face { border-left: 3px solid var(--astro); }
.selfmap-card--numerology .selfmap-card__face { border-left: 3px solid var(--numer); }
.selfmap-card--psychology .selfmap-card__face { border-left: 3px solid var(--psych); }

/* prefers-reduced-motion swaps the two faces instantly, with no rotation at
   all, rather than skipping the transition duration on an otherwise-3D
   flip -- the CSS below is what "no rotateY" actually means, not just "no
   animation of it". */
@media (prefers-reduced-motion: reduce) {
  .selfmap-card__inner,
  .selfmap-card.is-flipped .selfmap-card__inner { transition: none; transform: none; }
  .selfmap-card__face--back { transform: none; }
  .selfmap-card:not(.is-flipped) .selfmap-card__face--back,
  .selfmap-card.is-flipped .selfmap-card__face--front { display: none; }
}

/* No-JS and print: flip-cards.js is what ever adds .is-flipped, so without
   it (JS disabled, or a printed page) every card would stay permanently
   on its front face with the back's content never shown at all -- the 3D
   faces share one grid cell specifically so the hidden one can't push
   layout around, which also means it is really gone, not just rotated
   away. Both rules below force the grid back to a normal stacked flow
   (front paragraph, then back paragraph) instead, so nothing is lost. */
.no-js .selfmap-card__inner,
.no-js .selfmap-card.is-flipped .selfmap-card__inner {
  display: block;
  height: auto;
  transform: none;
  transition: none;
}

.no-js .selfmap-card__face,
.no-js .selfmap-card__face--back {
  position: static;
  transform: none;
  margin-bottom: 0.75rem;
}

.no-js .selfmap-card__hint { display: none; }

@media print {
  .selfmap-card__inner,
  .selfmap-card.is-flipped .selfmap-card__inner {
    display: block !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
  }
  .selfmap-card__face,
  .selfmap-card__face--back {
    position: static !important;
    transform: none !important;
    margin-bottom: 0.75rem;
  }
  .selfmap-card__hint { display: none; }
}

/* Below the cards, always visible -- these are the point of the reading. */
.selfmap-below-cards {
  display: grid;
  gap: 1.5rem;
  margin: 0 0 2rem;
  max-width: var(--measure);
}

.selfmap-actions h2,
.selfmap-reflect h2 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.selfmap-actions ul { margin: 0; padding-left: 1.2rem; }
.selfmap-actions li { margin-bottom: 0.4rem; }

.selfmap-reflect {
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--rule-strong);
}

.selfmap-reflect p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

/* The full reading and "what went into this", collapsed behind one summary
   line. Closed by default -- the short reading above is the answer; this is
   for someone who wants to see the reasoning trail it came from. */
.selfmap-full {
  margin: 0 0 2.5rem;
  max-width: var(--measure);
}

.selfmap-full summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--muted);
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.selfmap-full .selfmap-sections { margin-top: 1.75rem; }

/* ---------------------------------------------------------------------------
   Birth-place picker
   Three selects that narrow down State -> District -> Taluk. Side by side
   where there is room, stacked on a phone.
   --------------------------------------------------------------------------- */

.place-picker {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
}

.place-picker legend {
  padding: 0 0.4rem;
  font-weight: 600;
}

.place-picker__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1rem;
}

.place-picker__row .field { margin-bottom: 0.5rem; }

.place-picker select { width: 100%; }

/* Reads as unavailable rather than broken while it waits for the level
   above to be chosen. */
.place-picker select:disabled {
  color: var(--muted);
  background: var(--paper);
  cursor: not-allowed;
}

.place-picker__status {
  margin: 0.5rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .place-picker__row { grid-template-columns: 1fr; }
}