/* Self-Discovery PWA — base styles
   Mobile-first, high-contrast, large touch targets. */

:root {
  --color-bg: #12151a;
  --color-surface: #1c2129;
  --color-surface-raised: #262d38;
  --color-border: #333c49;
  --color-text: #eef1f5;
  --color-text-dim: #9aa5b3;
  --color-accent: #5aa6ff;
  --color-accent-text: #06131f;
  --color-danger: #ff6b6b;
  --color-success: #5ed49b;
  --color-warning: #f0b429;

  --radius: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --touch-min: 44px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, p {
  margin: 0 0 var(--space-2) 0;
}

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

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* ---------- App shell ---------- */

#app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
}

.app-header h1 {
  font-size: 1.1rem;
  font-weight: 600;
}

.app-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header-row h1 {
  /* flex: 1 + min-width: 0 lets this shrink below its content size so the
     ellipsis below actually has room to kick in, regardless of how long a
     Doc Viewer's title is or how narrow the screen is — the back control
     and gear icon (both flex-shrink: 0) always keep their own space. */
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-back-btn {
  flex-shrink: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

#settings-btn {
  flex-shrink: 0;
}

main {
  flex: 1;
  padding: var(--space-4);
  padding-bottom: var(--space-6);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: 500;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 700;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-block {
  width: 100%;
}

.btn-sm {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: 0.9rem;
}

.btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 600;
}

.btn-danger:active {
  background: rgba(255, 107, 107, 0.12);
}

/* Outline style — visually secondary to .btn-primary's solid fill, used for
   actions that shouldn't compete with the primary action in the same row
   (e.g. "Docs" next to "+ New Record"). */
.btn-secondary {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.btn-secondary:active {
  background: rgba(90, 166, 255, 0.12);
}

/* ---------- List view ---------- */

.list-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.record-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.record-list-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.record-card {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.record-card:active {
  background: var(--color-surface-raised);
}

.record-delete-btn {
  flex-shrink: 0;
  width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-dim);
  font-size: 1.1rem;
}

.record-delete-btn:active {
  background: rgba(255, 107, 107, 0.12);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.record-card-title {
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: var(--space-1);
}

.record-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-dim);
  font-size: 0.88rem;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-open {
  background: rgba(90, 166, 255, 0.15);
  color: var(--color-accent);
  border-color: rgba(90, 166, 255, 0.35);
}

.status-in_progress {
  background: rgba(240, 180, 41, 0.15);
  color: var(--color-warning);
  border-color: rgba(240, 180, 41, 0.35);
}

.status-completed {
  background: rgba(94, 212, 155, 0.15);
  color: var(--color-success);
  border-color: rgba(94, 212, 155, 0.35);
}

.empty-state {
  text-align: center;
  color: var(--color-text-dim);
  padding: var(--space-6) var(--space-4);
}

/* ---------- Record view header ---------- */

/* Record View's own header: title (fills remaining space) | status. Back
   navigation lives in the app bar now (see .app-back-btn), not here. */
.record-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.record-title-input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

/* Created/Updated/Saved — relocated to the bottom of Record View, below all
   sections, since it's nothing the user needs before they've started
   filling things in. */
.record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

.status-select {
  flex-shrink: 0;
  min-height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  padding: var(--space-1) var(--space-2);
}

.save-indicator {
  margin-left: auto;
  font-weight: 500;
}

.save-indicator[data-state="saved"] { color: var(--color-success); }
.save-indicator[data-state="saving"] { color: var(--color-warning); }
.save-indicator[data-state="idle"] { color: var(--color-text-dim); }
.save-indicator[data-state="error"] { color: var(--color-danger); }

/* ---------- Export / Import ---------- */

.export-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.export-row .section-hint {
  margin-right: var(--space-1);
}

.import-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.import-card-title {
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.import-status {
  margin-top: var(--space-2);
  font-size: 0.9rem;
}

.import-status[data-state="error"] { color: var(--color-danger); }
.import-status[data-state="success"] { color: var(--color-success); }

/* ---------- Collapsible sections ---------- */

.section-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.section {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.section:last-child {
  border-bottom: none;
}

.section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

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

.section > summary .section-index {
  color: var(--color-text-dim);
  font-weight: 500;
  margin-right: var(--space-2);
}

.section > summary .chevron {
  transition: transform 0.15s ease;
  color: var(--color-text-dim);
  flex-shrink: 0;
}

.section[open] > summary .chevron {
  transform: rotate(90deg);
}

.section > summary .section-controls-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Filled-field indicator: title turns light green once a section has actual
   content, visible whether the section is open or (crucially) collapsed —
   the point is scanning all 10 headers at a glance. Specificity matches
   .section-index / .chevron above so it reliably wins regardless of the
   declaration order. */
.section > summary .section-index.section-filled,
.section > summary .section-title-text.section-filled {
  color: var(--color-success);
}

.section-help-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-dim);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-help-btn:active {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ---------- Help modal ---------- */

.help-dialog {
  /* Grid, not flex: a flex `1fr`-equivalent (flex: 1) child inside a
     container whose height comes only from max-height (no explicit height)
     is exactly the case where Safari/iOS Safari fail to resolve flex-grow
     and collapse the child to its flex-basis of 0 — confirmed on-device
     (.help-dialog-body computed height: 0px there despite real content).
     Chrome tolerates the ambiguity; Safari doesn't. Grid's `1fr` track
     handles this the same way across engines, so the scrollable middle row
     actually gets the remaining space on WebKit too. */
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* title / link status / scrollable body / close button */
  width: calc(100% - var(--space-4) * 2);
  max-width: 420px;
  max-height: min(80vh, 560px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-4);
}

.help-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.help-dialog-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

/* Shown only when a [text](docs:...) link's target can't be found — an
   auto grid row that collapses to 0 height while .hidden (display: none),
   so it never reserves space when there's nothing to say. */
.help-dialog-status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: rgba(255, 107, 107, 0.12);
  color: var(--color-danger);
  font-size: 0.9rem;
}

/* The scrollable middle grid row (1fr above), capped by .help-dialog's
   max-height. min-height: 0 is still required here under grid too — an
   auto-sized grid row won't shrink below its content's intrinsic size
   otherwise, so overflow-y would never actually get a chance to kick in. */
.help-dialog-body {
  overflow-y: auto;
  min-height: 0;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.help-dialog-body p,
.help-dialog-body ul {
  margin: 0 0 var(--space-3);
}

.help-dialog-body p:last-child,
.help-dialog-body ul:last-child {
  margin-bottom: 0;
}

.help-dialog-body ul {
  padding-left: 1.3em;
}

.help-dialog-body li {
  margin-bottom: var(--space-1);
}

.help-dialog-body li:last-child {
  margin-bottom: 0;
}

.help-dialog-body strong {
  color: var(--color-text);
  font-weight: 700;
}

.help-dialog-body a {
  color: var(--color-accent);
}

.section-body {
  padding: 0 var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-hint {
  color: var(--color-text-dim);
  font-size: 0.85rem;
}

textarea, .text-input {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

textarea {
  min-height: 150px; /* ~6 lines */
  max-height: 380px; /* ~15 lines before internal scroll kicks in */
  overflow-y: auto;
  resize: none; /* height is driven by JS auto-grow instead */

  /* Firefox scrollbar contrast (thumb visibly lighter than the dark track) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-dim) var(--color-surface-raised);
}

textarea::-webkit-scrollbar {
  width: 10px;
}

textarea::-webkit-scrollbar-track {
  background: var(--color-surface-raised);
}

textarea::-webkit-scrollbar-thumb {
  background: var(--color-text-dim);
  border-radius: 999px;
  border: 2px solid var(--color-surface-raised);
}

.text-input {
  min-height: var(--touch-min);
}

/* Small textareas (e.g. Root Fear "Other") — ~2 lines by default, still auto-grows up to the shared max-height above */
textarea.text-input {
  min-height: 72px;
}

/* ---------- Chips ---------- */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 700;
}

.root-fear-other-wrap {
  margin-top: var(--space-2);
}

/* ---------- Suggestions / prefill ---------- */

.suggestion-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.suggestion-panel {
  margin-top: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  padding: var(--space-2);
}

.suggestion-list {
  list-style: decimal;
  margin: 0;
  padding-left: 1.6em;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.suggestion-list li {
  padding-left: var(--space-1);
}

.suggestion-list li::marker {
  color: var(--color-text-dim);
}

.suggestion-item {
  text-align: left;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
}

.suggestion-item:active {
  background: var(--color-surface);
}

.suggestion-divider {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ---------- Settings / danger zone ---------- */

.danger-card {
  background: var(--color-surface);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.danger-card-title {
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.danger-confirm {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

footer.app-footer {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.8rem;
  padding: var(--space-4);
}

/* ---------- Service worker update banner ---------- */

.sw-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100% - 2 * var(--space-4));
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ---------- Print / Save as PDF ---------- */

/* Built fresh by js/views.js right before window.print() (see the Print
   button's click handler) — not shown on screen at all, only under
   @media print below. */
.print-only {
  display: none;
}

@media print {
  /* Hide all interactive UI chrome: app header/nav, footer, the editable
     record form (title input, status select, meta, collapsible sections
     with their chevrons), and the export/print buttons themselves. */
  .app-header,
  .app-footer,
  .record-header-row,
  .record-meta,
  .export-row,
  #sections-slot,
  .sw-update-banner {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  body {
    background: #fff;
    color: #000;
  }

  main {
    padding: 0;
  }

  .print-view h1 {
    font-size: 18pt;
    margin: 0 0 4pt;
  }

  .print-view .print-meta {
    color: #444;
    font-size: 10pt;
    margin: 0 0 16pt;
  }

  .print-view h2 {
    font-size: 12pt;
    margin: 14pt 0 4pt;
    padding-bottom: 2pt;
    border-bottom: 1px solid #ccc;
    break-after: avoid;
  }

  .print-view p {
    margin: 0 0 8pt;
    font-size: 11pt;
    line-height: 1.4;
    white-space: pre-wrap;
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }
}

/* ---------- Docs library ---------- */

.docs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.toggle-btn {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: none;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

.toggle-btn:last-child {
  border-right: none;
}

.toggle-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 600;
}

/* Doc Viewer: a normal page-scrolling block (no internal max-height/
   overflow — unlike the (i) help modal, which is deliberately capped and
   internally scrolled). Typography for whatever marked renders here:
   headings, paragraphs, lists, links, images, code, blockquotes. */
.doc-content {
  margin-top: var(--space-2);
  line-height: 1.6;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4,
.doc-content h5,
.doc-content h6 {
  margin: var(--space-5) 0 var(--space-2);
  line-height: 1.3;
}

.doc-content h1:first-child,
.doc-content h2:first-child,
.doc-content h3:first-child {
  margin-top: 0;
}

.doc-content h1 { font-size: 1.5rem; }
.doc-content h2 { font-size: 1.25rem; }
.doc-content h3 { font-size: 1.1rem; }

.doc-content p {
  margin: 0 0 var(--space-3);
}

.doc-content ul,
.doc-content ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.4em;
}

.doc-content li {
  margin-bottom: var(--space-1);
}

.doc-content a {
  color: var(--color-accent);
}

.doc-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: var(--space-2) 0;
}

.doc-content blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-border);
  color: var(--color-text-dim);
}

.doc-content code {
  background: var(--color-surface-raised);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

.doc-content pre {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow-x: auto;
  margin: 0 0 var(--space-3);
}

.doc-content pre code {
  background: none;
  padding: 0;
}

.doc-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

.doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  display: block;
  overflow-x: auto;
}

.doc-content th,
.doc-content td {
  border: 1px solid var(--color-border);
  padding: var(--space-2);
  text-align: left;
}