/* Reset, tipografía base, superficies del navegador, foco, utilidades. */

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

html {
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--cloth);
  background-image: var(--cloth-layers);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a, button, label, summary, [role='button'] { touch-action: manipulation; }
img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
[hidden] { display: none !important; }

::selection { background: var(--butter); color: var(--on-accent); }
input, textarea { caret-color: var(--mood-3); }
html { scrollbar-color: color-mix(in srgb, var(--cloth-deep) 70%, var(--paper-edge)) transparent; scrollbar-width: thin; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Títulos que reciben el foco al navegar (para lectores de pantalla): sin anillo. */
h1[tabindex='-1']:focus, h1[tabindex='-1']:focus-visible, main:focus-visible { outline: none; }

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 1000;
  background: var(--paper); color: var(--ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-label);
  box-shadow: var(--shadow-note);
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(76px); }

/* Tipos */
.t-display { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.1; }
.t-text { font-family: var(--font-text); }
.t-question { font-family: var(--font-text); font-style: italic; font-size: var(--fs-lg); line-height: 1.3; color: var(--ink); }
.t-hand { font-family: var(--font-hand); font-size: var(--fs-hand); line-height: 1; color: var(--ink-soft); }
.t-meta { font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.t-soft { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

/* Campo de escritura sobre renglones */
.lined {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--line);
  background-image: linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line), transparent var(--line));
  background-size: 100% var(--line);
  background-position: 0 0.28rem;
  background-attachment: local;
}

textarea.write, input.write {
  display: block;
  width: 100%;
  border: 0;
  background-color: transparent;
  padding: 0;
  margin: 0;
  resize: none;
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--line);
  color: var(--ink);
  min-height: calc(var(--line) * 2);
  overflow: hidden;
}
textarea.write { background-image: linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line), transparent var(--line)); background-size: 100% var(--line); background-attachment: local; }
input.write { min-height: var(--line); height: var(--line); border-bottom: 1px solid var(--rule); }
.write::placeholder { color: var(--placeholder); font-style: italic; opacity: 1; }
.write:focus-visible { outline: none; }
.write:focus { background-color: color-mix(in srgb, var(--butter) 9%, transparent); }

/* Inputs de interfaz (ajustes, formularios) */
.field { display: grid; gap: var(--s-1); }
.field > span, .field > label { font-size: var(--fs-sm); color: var(--ink-soft); }
.input, .select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--paper-edge);
  border-bottom: 2px solid var(--rule-strong);
  border-radius: var(--radius-label);
  background: var(--field);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
}
.input:focus-visible, .select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid='true'] { border-color: var(--error-ink); border-bottom-color: var(--error-ink); }
input[type='time'].input, input[type='date'].input { font-variant-numeric: tabular-nums; }

input[type='checkbox'], input[type='radio'] { accent-color: var(--thread-done); width: 20px; height: 20px; margin: 0; }


@media (forced-colors: active) {
  .stitch-box, .mood-patch { forced-color-adjust: auto; border: 1px solid CanvasText; }
}