/*
  Every colour, spacing and type style the page uses, defined once.

  The constitution requires styles to be defined once and reused, with no per-page
  variations. The tokens come from mockups/inquiry-flow.html. The mockup loaded web
  fonts from Google; the app uses the system fonts named as fallbacks there instead,
  so a visit makes no request to a third party (FR-050).
*/

/* Light palette. The dark theme below redefines only these tokens. */
:root {
  --paper:      #f4f6f6;
  --surface:    #ffffff;
  --surface-2:  #eef2f2;
  --ink:        #1a2327;
  --ink-soft:   #3d4d53;
  --muted:      #5d6b70;
  --line:       #dde3e3;
  --line-firm:  #c6d0d0;
  --accent:     #1f6a6f;
  --accent-ink: #12464a;
  --accent-bg:  #e4efef;
  --on-accent:  #ffffff;
  --warn:       #8a4b1f;
  --warn-bg:    #f6ebe1;
  --shadow:     0 1px 2px rgba(26, 35, 39, .06), 0 8px 24px -16px rgba(26, 35, 39, .28);

  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius:       10px;
  --radius-large: 14px;
  --gap:          8px;
  --pad:          14px;
  --gutter:       16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14191b;
    --surface:    #1c2325;
    --surface-2:  #232b2e;
    --ink:        #e8edee;
    --ink-soft:   #c4cfd1;
    --muted:      #94a3a6;
    --line:       #2c3538;
    --line-firm:  #3c4749;
    --accent:     #5fb3b8;
    --accent-ink: #8fd0d3;
    --accent-bg:  #1e2d2f;
    --on-accent:  #0f1618;
    --warn:       #d99a6c;
    --warn-bg:    #2b2220;
    --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }

/* Must come before any rule that sets `display`. The browser hides an element with
   the `hidden` attribute through its own default styling, but any author rule that
   sets `display` beats that default, so without this a hidden flex container would
   stay on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 0 64px;
}

/* ------------------------------------------------------------- seed entry --- */
.home {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block: 56px 28px;
}

.greeting {
  font-family: var(--serif);
  font-size: clamp(30px, 7.5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.greeting em {
  font-style: italic;
  color: var(--accent);
}

.sub {
  color: var(--muted);
  max-width: 46ch;
  margin: -10px 0 0;
}

.composer {
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  padding: var(--pad) var(--pad) 10px;
}
.composer:focus-within { border-color: var(--accent); }

.composer textarea {
  width: 100%;
  border: 0;
  resize: vertical;
  min-height: 82px;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  padding: 0;
}
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: var(--muted); opacity: .8; }

.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.count.over { color: var(--warn); font-weight: 500; }

/* ---------------------------------------------------------------- buttons --- */
button {
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
}
button:disabled { cursor: progress; opacity: .7; }

.btn {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 9px;
  padding: 8px 16px;
  font-weight: 500;
}
.btn:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn-quiet {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-firm);
  border-radius: 9px;
  padding: 7px 13px;
}
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.actions {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}

:where(button, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- inquiry --- */
.inquiry-top { padding-block: 26px 0; }

/* The trail from the seed to here (FR-017). Mono, because it reads as a coordinate,
   not prose. Each entry is shortened to one line; the full text is still read out by
   screen readers, because CSS truncation hides nothing from them (FR-018). */
.trail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  margin-bottom: 22px;
}
.trail-sep { color: var(--line-firm); padding-inline: 1px; }
.crumb {
  background: none;
  border: 0;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumb:hover:not(:disabled) { background: var(--surface-2); color: var(--accent); }
.crumb[aria-current="location"] {
  color: var(--ink);
  font-weight: 500;
  background: var(--accent-bg);
}
.crumb-label { color: var(--accent); }

/* The seed or question currently being viewed, shown in full (FR-018). */
.focus-block {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px;
  margin-bottom: 26px;
}
.focus-kind {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.focus-text {
  font-family: var(--serif);
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.36;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Focus moves here after a new set arrives, for keyboard and screen-reader users;
   it needs no visible ring because it is not something to click. */
.focus-text:focus { outline: none; }

/* ---------------------------------------------------------------- results --- */
.list-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

ol.questions {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Each question is a button: the whole row is the target, keyboard included (FR-013). */
.q {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px var(--pad);
  color: var(--ink);
  transition: border-color .13s ease, transform .13s ease;
}
.q:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateX(2px);
}
.q-num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  padding-top: 3px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.q-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.q-open {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  padding-top: 4px;
  opacity: 0;
  transition: opacity .13s ease;
}
.q:hover .q-open, .q:focus-visible .q-open { opacity: 1; }
/* A question already opened: its questions are kept and show again with no request. */
.q.seen .q-open { opacity: 1; }

/* On a phone, deep labels such as 2.3.1.4.2 would squeeze the question into a narrow
   column. The label and hint share the top line and the question takes the full width
   below. Phones have no hover, so the hint is always shown (FR-044). */
@media (max-width: 480px) {
  .q { flex-wrap: wrap; row-gap: 4px; }
  .q-open { order: 1; opacity: 1; padding-top: 3px; }
  .q-text { order: 2; flex-basis: 100%; }
}

.suggestion-note {
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin: 0 0 20px;
}

/* ----------------------------------------------------- loading and messages --- */
.loading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: 18px;
}
.loading-text {
  font-size: 14px;
  color: var(--ink-soft);
}
.loading-cancel { margin-left: auto; }
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.05s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes pulse {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: .7; }
  .q:hover:not(:disabled) { transform: none; }
}

.msg {
  border-radius: var(--radius);
  padding: 13px var(--pad);
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ confirmation --- */
dialog {
  border: 1px solid var(--line-firm);
  border-radius: var(--radius-large);
  background: var(--surface);
  color: var(--ink);
  padding: 20px;
  max-width: 420px;
  width: calc(100% - 2 * var(--gutter));
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(10, 16, 18, .45); }
dialog h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
}
dialog p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
dialog .actions { justify-content: flex-end; }

/* Visible to screen readers only. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}