/* Workflowy-Local — "Quiet instrument"
   Machined-tool aesthetic: warm-tinted OKLCH neutrals, one instrument-orange
   accent, engraved-nameplate caps (Archivo expanded) over Schibsted Grotesk. */

:root {
  /* light: paper over warm aluminum */
  --bg: oklch(0.972 0.004 80);
  --raised: oklch(0.945 0.006 78);
  --inset: oklch(0.925 0.007 78);
  --ink: oklch(0.27 0.013 60);
  --muted: oklch(0.51 0.016 62);
  --faint: oklch(0.68 0.014 65);
  --line: oklch(0.885 0.008 75);
  --hairline: oklch(0.845 0.01 72);
  --accent: oklch(0.53 0.145 45);
  --accent-ink: oklch(0.985 0.005 80);
  --accent-wash: oklch(0.53 0.145 45 / 0.1);
  --ring: oklch(0.53 0.145 45 / 0.45);

  --font-ui: "Schibsted Grotesk", -apple-system, "Helvetica Neue", sans-serif;
  --font-plate: "Archivo", "Avenir Next Condensed", -apple-system, sans-serif;
  --font-key: ui-monospace, "SF Mono", Menlo, monospace;

  --text-label: 0.72rem;   /* engraved chrome labels */
  --text-meta: 0.8125rem;  /* notes, secondary */
  --text-body: 1rem;
  --text-title: 1.75rem;

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px;
  --space-lg: 16px; --space-xl: 24px; --space-2xl: 48px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark: anodized housing, slightly warm */
    --bg: oklch(0.205 0.008 60);
    --raised: oklch(0.245 0.01 60);
    --inset: oklch(0.175 0.008 60);
    --ink: oklch(0.925 0.005 78);
    --muted: oklch(0.67 0.014 65);
    --faint: oklch(0.49 0.014 62);
    --line: oklch(0.3 0.011 60);
    --hairline: oklch(0.34 0.012 60);
    --accent: oklch(0.74 0.148 55);
    --accent-ink: oklch(0.2 0.02 55);
    --accent-wash: oklch(0.74 0.148 55 / 0.11);
    --ring: oklch(0.74 0.148 55 / 0.5);
  }
}

* { box-sizing: border-box; }
button { -webkit-appearance: none; appearance: none; font-family: var(--font-ui); }
input[type="search"] { -webkit-appearance: none; appearance: none; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
}
::selection { background: var(--accent-wash); }

/* ---------- top bar: the nameplate ---------- */
#topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  padding-top: calc(var(--space-md) + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
#home { text-decoration: none; flex: none; }
#wordmark {
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 125;
  font-weight: 640;
  font-size: var(--text-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s var(--ease-out);
}
#home:hover #wordmark { color: var(--accent); }

#breadcrumbs {
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 112;
  font-weight: 560;
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
#breadcrumbs a { color: var(--faint); text-decoration: none; }
#breadcrumbs a:hover { color: var(--accent); }
#breadcrumbs .sep { margin: 0 var(--space-sm); color: var(--faint); opacity: 0.55; }

#search-wrap { flex: 1 1 140px; min-width: 100px; display: flex; align-items: center; gap: var(--space-sm); }
#search {
  flex: 1; min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  background: var(--inset);
  outline: none;
  transition: border-color 0.15s var(--ease-out);
}
#search::placeholder { color: var(--faint); }
#search:focus { border-color: var(--accent); }
#match-count {
  flex: none;
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 112;
  font-weight: 560;
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

#toggle-completed {
  flex: none;
  font-size: 0.875rem; line-height: 1;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
#toggle-completed:hover { color: var(--muted); }
#toggle-completed.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* sync status: dot + engraved LIVE/OFF */
#sync-dot {
  flex: none;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--faint);
}
#sync-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--faint);
}
#sync-dot::after { content: "OFF"; }
#sync-dot.live { color: var(--accent); }
#sync-dot.live::before { background: var(--accent); }
#sync-dot.live::after { content: "LIVE"; }

/* ---------- page ---------- */
main {
  max-width: 74ch;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-xl) 140px;
}
#zoom-title {
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 118;
  font-weight: 620;
  font-size: var(--text-title);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: var(--space-sm) 0 var(--space-xs);
  outline: none;
}
#zoom-title:empty::before { content: "Untitled"; color: var(--faint); }
#zoom-note {
  color: var(--muted);
  font-size: var(--text-meta);
  margin: 0 0 var(--space-lg);
  outline: none;
  white-space: pre-wrap;
  max-width: 65ch;
}
#zoom-note:empty::before { content: "Add a note…"; color: var(--faint); }
#zoom-note[hidden] { display: none; }

/* ---------- outline ---------- */
#outline { margin-top: var(--space-sm); }
.item { position: relative; }
.children {
  margin-left: 13px;
  border-left: 1px solid var(--line); /* tree guide, not an accent stripe */
  padding-left: 14px;
}
.row { display: flex; align-items: flex-start; gap: 2px; padding: 3px 0; }

.disclosure {
  flex: none; width: 20px; height: 26px;
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--faint);
  visibility: hidden;
  position: relative;
}
.disclosure::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-58%, -62%) rotate(45deg);
  transition: transform 0.16s var(--ease-out);
}
.item.has-children > .row > .disclosure { visibility: visible; }
.item.collapsed > .row > .disclosure::before { transform: translate(-68%, -50%) rotate(-45deg); }
.item.collapsed > .children { display: none; }
.disclosure:hover { color: var(--accent); }

.bullet {
  flex: none; width: 24px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; border-radius: 50%;
  position: relative;
}
.bullet span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); display: block;
  transition: background 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
/* collapsed parents wear a halo ring — stowed contents */
.item.collapsed > .row > .bullet span { box-shadow: 0 0 0 3.5px var(--accent-wash); }
.bullet:hover span { background: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-wash); }

.content { flex: 1; min-width: 0; }
.text {
  outline: none; min-height: 26px;
  padding: 1px 2px;
  word-wrap: break-word; white-space: pre-wrap;
}
.text:empty::before { content: "\200b"; }
.item.done > .row > .content > .text {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
  text-decoration-thickness: 1px;
}
.note {
  outline: none;
  color: var(--muted);
  font-size: var(--text-meta);
  line-height: 1.5;
  padding: 0 2px 4px;
  white-space: pre-wrap;
}
.tag { color: var(--accent); cursor: pointer; }
.tag:hover { text-decoration: underline; text-underline-offset: 2px; }

/* newly created item settles in */
.item.enter > .row { animation: settle 0.18s var(--ease-out); }
@keyframes settle {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ---------- empty state teaches ---------- */
#empty-hint { padding: var(--space-xl) var(--space-xs); color: var(--muted); cursor: text; }
.hint-lead {
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 118;
  font-weight: 600;
  font-size: var(--text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 var(--space-md);
}
.hint-row { margin: var(--space-xs) 0; font-size: var(--text-meta); }
kbd {
  font-family: var(--font-key);
  font-size: 0.6875rem;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 1px;
}

/* ---------- add button: a machined key, not a floating pebble ---------- */
#add-item {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  border-radius: 12px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.18);
  transition: transform 0.12s var(--ease-out);
}
#add-item:active { transform: scale(0.94); }
@media (min-width: 700px) { #add-item { display: none; } }

/* ---------- mobile toolbar ---------- */
#mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: none;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--raised);
  border-top: 1px solid var(--hairline);
  z-index: 20;
}
#mobile-bar button {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--ink);
  padding: 9px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
#mobile-bar button:active { background: var(--accent-wash); }

/* ---------- focus & motion accessibility ---------- */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.text:focus-visible, .note:focus-visible, #zoom-title:focus-visible, #zoom-note:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 480px) {
  main { padding: var(--space-lg) var(--space-lg) 140px; }
  #topbar { gap: var(--space-sm); padding-left: var(--space-md); padding-right: var(--space-md); }
  #breadcrumbs { display: none; } /* zoom context lives in the title on phones */
  #zoom-title { font-size: 1.5rem; }
}

/* ---------- login gate ---------- */
#login-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: var(--space-xl);
}
#login-overlay[hidden] { display: none; }
#login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: var(--space-md); }
#login-title {
  font-family: var(--font-plate);
  font-variation-settings: "wdth" 125;
  font-weight: 640;
  font-size: var(--text-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
#login-sub { color: var(--faint); font-size: var(--text-meta); margin: 0 0 var(--space-sm); }
#login-password {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
#login-password:focus { border-color: var(--accent); }
#login-submit {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}
#login-submit:active { transform: scale(0.98); }
#login-error { color: var(--accent); font-size: var(--text-meta); min-height: 1.2em; margin: 0; }