/* Design tokens — values from docs/DESIGN.md. Every color/spacing/motion
   decision in this file should trace back to a token here, not a one-off. */
:root {
  color-scheme: light dark;

  --bg: #f5f1e8;
  --surface-1: #fffdf8;
  --surface-2: #ece5d3;
  --text: #241f18;
  --text-muted: #6b6255;
  --accent: #8a2422;
  --accent-support: #2c4a3e;
  --success: #2f6b4f;
  --danger: #b3261e;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  --radius-paper: 2px;
  --radius-control: 6px;

  --shadow-paper: 0 2px 8px rgba(36, 31, 24, 0.12);

  --motion-ui: 150ms ease-out;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/fraunces-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/fonts/fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/fraunces-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/fonts/inter-600.woff2') format('woff2');
}

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

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  /* Subtle paper-grain: a low-opacity fractal-noise SVG filter tiled over the
     cream background so it never reads as a flat, empty color. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.14  0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Header: zero-network banner + the signature animated wordmark. */

.page {
  padding: var(--space-3) var(--space-4) var(--space-8);
  max-width: 1440px;
  margin-inline: auto;
}

.site-header {
  margin-bottom: var(--space-4);
}

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--surface-1);
  color: var(--text);
  font-size: 0.9rem;
  max-width: 70ch;
}

.banner__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}

/* Shown only when JavaScript is disabled — this is a client-side-only tool,
   so there is no server-rendered fallback; the banner just explains why the
   rest of the page is inert instead of leaving a silent, broken shell. */
.noscript-banner {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--danger);
  border-radius: var(--radius-control);
  background: var(--surface-1);
  color: var(--danger);
  font-weight: 600;
  max-width: 70ch;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.15em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 2rem + 2vw, 3.5rem);
  letter-spacing: -0.01em;
}

.wordmark__key {
  color: var(--text);
}

.wordmark__holder {
  color: var(--accent-support);
}

.wordmark__glyph {
  width: 0.65em;
  height: 0.65em;
  color: var(--accent);
  transform-origin: 60% 60%;
  animation: seal-break 640ms ease-out 1;
}

@keyframes seal-break {
  0% {
    transform: rotate(-35deg) scale(0.8);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

.tagline {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* Layout: the live preview is the hero, so it gets the majority of the
   viewport on desktop. Both panels are tall enough to scroll independently
   once content overflows, rather than stretching the whole page. */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.panel {
  min-width: 0;
}

/* .panel--preview has no focusable descendants of its own once content
   overflows and it becomes independently scrollable, so it needs to be a
   keyboard-reachable scroll container in its own right (WCAG 2.1.1). */
.panel--preview:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 36, 34, 0.18);
  border-radius: var(--radius-paper);
}

.panel--form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    min-height: 70vh;
  }

  .panel--form,
  .panel--preview {
    position: sticky;
    top: var(--space-3);
    max-height: calc(100vh - var(--space-4));
    overflow-y: auto;
  }
}

/* Form section cards */

.checklist-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-section {
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
}

.form-section__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--accent-support);
}

.form-section__desc {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 65ch;
}

/* Individual field controls — every one gets themed hover/focus/active/
   disabled states; nothing here is a naked native widget. */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin-bottom: var(--space-2);
}

.field:last-child {
  margin-bottom: 0;
}

.field__label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.field__control {
  padding: 0.6em 0.75em;
  font: inherit;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-control);
  transition: border-color var(--motion-ui), box-shadow var(--motion-ui), background var(--motion-ui);
}

.field__control::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
}

.field__control:hover {
  border-color: var(--text);
}

.field__control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(138, 36, 34, 0.18);
  background: var(--surface-1);
}

.field__control:active {
  background: var(--surface-1);
}

.field__control:disabled {
  color: var(--text-muted);
  background: var(--surface-2);
  border-color: var(--surface-2);
  cursor: not-allowed;
}

textarea.field__control {
  resize: vertical;
  min-height: 4.5em;
}

.field__help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Buttons: primary (Export), secondary (Add entry), ghost (Remove entry).
   Every variant gets its own hover/focus/active/disabled treatment and a
   visible "press" on click, never a bare native button. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.65em 1.25em;
  font: inherit;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: transform var(--motion-ui), background var(--motion-ui), border-color var(--motion-ui), box-shadow var(--motion-ui), color var(--motion-ui);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 36, 34, 0.28);
}

.btn:active,
.btn.btn--pressed {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.btn--primary {
  color: var(--surface-1);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-paper);
}

.btn--primary:hover:not(:disabled) {
  background: #74201e;
}

.btn--primary.btn--pressed {
  background: var(--success);
  border-color: var(--success);
}

.btn--secondary {
  color: var(--accent-support);
  background: var(--surface-1);
  border-color: var(--accent-support);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-2);
}

.btn--ghost {
  min-height: 36px;
  padding: 0.4em 0.9em;
  color: var(--text-muted);
  background: transparent;
  border-color: var(--surface-2);
  font-weight: 500;
  font-size: 0.85rem;
}

.btn--ghost:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

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

/* A small pill toggle switch for the autosave preference. The real
   checkbox stays in the DOM (and keyboard/focus-operable) but visually
   hidden; the track + thumb are painted from its :checked state. */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  user-select: none;
}

.toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.toggle__track {
  position: relative;
  flex-shrink: 0;
  width: 2.4em;
  height: 1.4em;
  background: var(--surface-2);
  border: 1px solid var(--text-muted);
  border-radius: 999px;
  transition: background var(--motion-ui), border-color var(--motion-ui);
}

.toggle__track::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--surface-1);
  box-shadow: 0 1px 2px rgba(36, 31, 24, 0.25);
  transition: transform var(--motion-ui);
}

.toggle:hover .toggle__track {
  border-color: var(--accent-support);
}

.toggle__input:checked + .toggle__track {
  background: var(--accent-support);
  border-color: var(--accent-support);
}

.toggle__input:checked + .toggle__track::before {
  transform: translateX(1em);
}

.toggle__input:focus-visible + .toggle__track {
  box-shadow: 0 0 0 3px rgba(138, 36, 34, 0.28);
}

.toggle__input:disabled + .toggle__track {
  opacity: 0.55;
  cursor: not-allowed;
}

.toggle__label {
  font-size: 0.9rem;
  color: var(--text);
}

.status-line {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.status-line--success {
  color: var(--success);
  font-weight: 500;
}

.status-line--error {
  color: var(--danger);
  font-weight: 500;
}

/* Repeatable sections: each entry is its own bordered fieldset so 3+ rows
   (accounts, policies, subscriptions...) stay visually distinct instead of
   blurring into one long list. */

.entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.entry {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-2);
  margin: 0;
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-paper);
  background: var(--bg);
}

.entry__legend {
  padding: 0 0.4em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-support);
}

.entry__remove {
  align-self: flex-end;
  margin-top: var(--space-1);
}

/* The preview pane: the hero. Styled as an actual sheet of paper — even
   stacked on mobile it should read as "a page," never a dead gray box. */

.paper {
  min-height: 60vh;
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
}

.doc__masthead {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--text);
}

.doc__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text);
}

.doc__subtitle {
  margin: 0.35em 0 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: 1rem;
}

.doc-section {
  margin-bottom: var(--space-4);
}

.doc-section:last-child {
  margin-bottom: 0;
}

.doc-section__title {
  margin: 0 0 0.2em;
  padding-bottom: 0.3em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--accent-support);
  border-bottom: 1px solid var(--surface-2);
}

.doc-section__desc {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 65ch;
}

.doc-section__empty {
  margin: 0;
  color: var(--text-muted);
  font-style: italic;
}

.doc-entry {
  margin-bottom: var(--space-2);
}

.doc-entry:last-child {
  margin-bottom: 0;
}

.doc-entry__title {
  margin: 0 0 0.3em;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.doc-fields {
  display: grid;
  grid-template-columns: minmax(10em, 32%) 1fr;
  row-gap: 0.4em;
  column-gap: var(--space-2);
  margin: 0;
}

.doc-field {
  display: contents;
}

.doc-field__label {
  font-weight: 500;
  color: var(--text-muted);
}

.doc-field__value {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.doc-field__value.is-empty::after {
  content: '—';
  color: var(--text-muted);
}

/* Phone refinements below 900px: tighter page padding and a slightly
   smaller paper margin so the sheet doesn't feel cramped stacked full-width. */
@media (max-width: 899px) {
  .page {
    padding: var(--space-2) var(--space-2) var(--space-6);
  }

  .paper {
    padding: var(--space-3);
    min-height: 40vh;
  }

  .doc-fields {
    grid-template-columns: 1fr;
  }

  .doc-field__label {
    font-size: 0.85rem;
  }
}

/* Learn section: readable prose below the tool that answers the questions
   people actually search for (digital estate planning, account access after
   death). A single measured column set on the cream page, same paper-and-ink
   type system as everything above. */

.learn {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--surface-2);
}

.learn__inner {
  max-width: 68ch;
}

.learn__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  line-height: 1.15;
  color: var(--text);
}

.learn__lead {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
  color: var(--text);
}

.learn__q {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--accent-support);
}

.learn__a {
  margin: 0;
  color: var(--text);
}

/* Footer: an unobtrusive close to the page — the GitHub source link (this
   tool's honesty rests on being readable) and one quiet portfolio link. */

.site-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-2);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-footer__line {
  margin: 0 0 var(--space-1);
  max-width: 70ch;
}

.site-footer__portfolio {
  margin: 0;
}

.site-footer__link {
  color: var(--accent-support);
  text-decoration-color: var(--surface-2);
  text-underline-offset: 2px;
  border-radius: 2px;
  transition: color var(--motion-ui), text-decoration-color var(--motion-ui);
}

.site-footer__link:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.site-footer__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 36, 34, 0.28);
}

/* Print: let the browser's own Print dialog produce the same document the
   PDF export does, section order and all — no app chrome, no form, no
   banner, just the sheet. */
@media print {
  body {
    background: #fff;
    background-image: none;
  }

  .site-header,
  .panel--form,
  .learn,
  .site-footer {
    display: none;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .layout {
    display: block;
  }

  .paper {
    min-height: 0;
    padding: 0;
    border: none;
    box-shadow: none;
  }

  .doc-section {
    break-inside: avoid;
  }
}