/* Zettel kit — the house style every template starts from.
   Black and white, one serif for voice, one geometric sans for everything else,
   hairlines instead of boxes. A template adds its own <style>; it should rarely
   need to override anything here. */

@font-face { font-family: 'Bodoni Moda'; src: url(fonts/bodoni-moda-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url(fonts/bodoni-moda-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url(fonts/bodoni-moda-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url(fonts/jost-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url(fonts/jost-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root, [data-theme="paper"] {
  --bg: #ffffff;
  --ink: #0b0b0b;
  --muted: #6f6f6f;
  --soft: #f3f2ef;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --serif: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  color-scheme: light;
}
[data-theme="noir"] {
  --bg: #0b0b0b;
  --ink: #f4f2ee;
  --muted: #9a9894;
  --soft: #191918;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }

/* ---- page ------------------------------------------------------------ */
.z-page {
  max-width: 520px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px calc(env(safe-area-inset-bottom, 0px) + 96px);
}
.z-eyebrow {
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.z-title {
  font: 400 clamp(40px, 12vw, 58px)/.98 var(--serif);
  letter-spacing: -.015em;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.z-sub { font: italic 400 18px/1.4 var(--serif); color: var(--muted); margin: 0; }
.z-section { margin-top: 40px; }
.z-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  margin: 0;
}
.z-label small { font: 400 12px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--muted); }
.z-muted { color: var(--muted); }
.z-small { font-size: 13px; }
.z-num-big { font: 400 44px/1 var(--serif); font-variant-numeric: lining-nums; }

/* ---- editable paper ------------------------------------------------- */
[contenteditable] { outline: none; -webkit-user-select: text; user-select: text; cursor: text; }
[contenteditable]:focus { box-shadow: inset 0 -1px 0 var(--ink); }
[data-multiline] { white-space: pre-wrap; }
[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.z-note {
  white-space: pre-wrap;
  padding: 16px 0;
  min-height: 3.2em;
  border-bottom: 1px solid var(--line);
}
.z-note:focus { box-shadow: none; border-bottom-color: var(--ink); }

/* ---- lists ---------------------------------------------------------- */
.z-list { display: flex; flex-direction: column; }
.z-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.z-row > .z-grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.z-empty { padding: 18px 0; color: var(--muted); font: italic 400 16px/1.4 var(--serif); border-bottom: 1px solid var(--line); }
.z-list:has(> [data-item]) + .z-empty, .z-list:has(> [data-item]) > .z-empty { display: none; }

/* ---- controls ------------------------------------------------------- */
.z-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font: 500 12px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.z-btn:active { transform: translateY(1px); }
.z-btn--ghost { background: transparent; color: var(--ink); }
.z-btn--ghost:hover { background: var(--ink); color: var(--bg); }
.z-btn--wide { width: 100%; }
.z-btn--text { border: 0; background: none; color: var(--muted); padding: 0 4px; min-height: 40px; }
.z-btn--text:hover { color: var(--ink); }
.z-actions { display: flex; gap: 10px; margin-top: 16px; }
.z-actions > * { flex: 1; }

.z-x {
  flex: none; width: 36px; height: 36px; margin-right: -8px;
  border: 0; background: none; color: var(--muted);
  font: 300 22px/1 var(--sans); cursor: pointer;
}
.z-x:hover { color: var(--ink); }

.z-check {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 22px; height: 22px; margin: 0;
  border: 1px solid var(--ink); border-radius: 0;
  display: grid; place-content: center; cursor: pointer;
}
.z-check::after { content: ''; width: 12px; height: 12px; background: var(--ink); transform: scale(0); transition: transform .12s; }
.z-check:checked::after { transform: scale(1); }
.z-row:has(.z-check:checked) .z-grow { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

.z-field {
  width: 4.2em; padding: 4px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.z-field::-webkit-outer-spin-button, .z-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.z-field:focus { outline: none; border-bottom-color: var(--ink); }
.z-unit { font-size: 12px; color: var(--muted); letter-spacing: .04em; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
[contenteditable]:focus-visible, .z-field:focus-visible { outline: none; }

/* ---- kit chrome: status chip, remix link, preview bar ---------------- */
.z-status {
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line);
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: opacity .3s;
}
.z-status[data-state="saved"] { opacity: .55; }
.z-status[data-state="conflict"] { color: var(--ink); border-color: var(--ink); opacity: 1; }
.z-status button {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.z-remix {
  display: block; margin: 64px auto 0; text-align: center;
  font: 500 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.z-remix:hover { color: var(--ink); }
.z-previewbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--ink); color: var(--bg);
  font: 500 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.z-previewbar a { color: inherit; white-space: nowrap; }