/* Tascue — стиль «Paper Dim»: тёмная бумага, волосяные линии, без цвета.
   Здесь только токены, сброс и общие для нескольких страниц элементы. */

:root,
[data-theme="paper-dim"] {
  --bg: #242220;
  --fg: #E2DED6;
  --fg-strong: #F0ECE4;
  --fg-row: #DAD6CE;
  --fg-doing: #F7F3EB;
  --muted: #A39E96;
  --rule: #302D29;
  --rule-top: #312E2A;
  --rule-soft: #2C2926;
  --rule-col: #2F2C28;
  --rule-head: #635D54;
  --rule-head-done: #423E39;
  --field: #2A2724;
  --field-border: #3B3833;
  --solid: #E6E2D9;
  --solid-fg: #242220;
  --solid-hover: #F2EEE5;
  --ghost-border: #423E38;
  --tick: #7A756E;
  --label: #BCB7AE;
  --fg-prompt: #DFDBD3;
  --hover: rgba(255, 255, 255, 0.028);
  --backdrop: rgba(16, 15, 14, 0.62);
  --selection: rgba(230, 226, 217, 0.16);
  --radius: 3px;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 1px solid var(--rule-head); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.spacer { flex-grow: 1; }

.top {
  display: flex; align-items: center; gap: 16px;
  height: 76px; flex-shrink: 0;
  padding: 0 44px;
  border-bottom: 1px solid var(--rule-top);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 18px;
  border-radius: var(--radius); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
}
.btn-small { height: 38px; }
.btn-solid { background: var(--solid); color: var(--solid-fg); border: 0; }
.btn-solid:hover { background: var(--solid-hover); }
.btn-ghost { background: none; color: var(--fg); border: 1px solid var(--ghost-border); }
.btn-ghost:hover { border-color: var(--rule-head); }
.btn-wide { flex-grow: 1.5; flex-basis: 0; }

.counter, .ghost {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ghost { background: none; border: 0; padding: 9px 12px 9px 0; cursor: pointer; }
.ghost:hover { color: var(--fg-strong); }

.toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 50;
  transform: translate(-50%, 8px);
  padding: 10px 16px;
  background: var(--solid); color: var(--solid-fg); border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.welcome {
  max-width: 460px; margin: 0 auto; padding: 22vh 24px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.welcome-title { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg-strong); }
.welcome-text { margin: 0; color: var(--muted); line-height: 1.6; }
.welcome-form { display: flex; gap: 10px; margin-top: 10px; }
.welcome-form input {
  flex-grow: 1; height: 48px; padding: 0 14px;
  background: var(--field); border: 1px solid var(--field-border); border-radius: var(--radius);
}
.welcome-form--stack { flex-direction: column; }
.welcome-error { margin: 0; font-size: 13px; color: var(--fg-strong); }
.welcome-text a { color: var(--fg-strong); }

.setup { display: flex; flex-direction: column; height: 100dvh; }

.back {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 6px 10px 0;
  font-size: 19px; font-weight: 500; letter-spacing: -0.012em;
  color: var(--fg-strong); text-decoration: none;
}
.back:hover { color: var(--muted); }

.tabs { display: flex; gap: 2px; margin-left: 4px; }
.tabs a {
  padding: 9px 12px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.tabs a:hover { color: var(--fg-row); }
.tabs a[aria-current="page"] { color: var(--fg-strong); background: var(--field); }

.pane-empty {
  margin: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tick);
}
.pane-empty--small { padding: 10px 0; font-size: 10px; letter-spacing: .08em; }

.add-inline {
  padding: 10px 0; background: none; border: 0; text-align: left;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.add-inline:hover { color: var(--fg-strong); }

.unit-title {
  min-width: 0; height: 32px; padding: 0;
  background: none; border: 0;
  font-size: 16px; color: var(--fg-strong);
}
.unit-title:focus { outline: none; }
.unit-title::placeholder { color: var(--tick); }

/* Свои диалоги вместо системных confirm/prompt. */

.ask {
  width: min(420px, calc(100vw - 48px)); padding: 24px 26px 20px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--field-border); border-radius: var(--radius);
}
.ask[open] { display: flex; flex-direction: column; gap: 12px; }
.ask::backdrop { background: var(--backdrop); }

.ask-title { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-strong); }
.ask-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ask-note[hidden] { display: none; }

.ask-quote {
  max-height: 40vh; margin: 0; padding: 2px 0 2px 14px; overflow-y: auto;
  border-left: 1px solid var(--rule-head);
  font-size: 13.5px; line-height: 1.6; color: var(--fg-row);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ask-quote[hidden] { display: none; }

.ask-input {
  height: 40px; padding: 0 12px; margin-top: 2px;
  background: var(--field); border: 1px solid var(--field-border); border-radius: var(--radius);
  font-size: 14px;
}
.ask-input:focus { outline: none; border-color: var(--rule-head); }
.ask-input[hidden] { display: none; }

.ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ask-actions .btn { height: 42px; }
.ask-actions .btn[hidden] { display: none; }

@media (max-width: 900px) {
  .top { padding: 0 20px; gap: 10px; }
}