/* ============================================================
   CLARK — design system v3 "Papel & Tinta"
   Síntese de três referências (2026-08-11):
   · incredibles.dev — papel morno, grotesk de tracking apertado,
     kickers em monospace uppercase, acento-sinal mínimo.
   · zalak-patel.com — bento de cards quase pretos (raio 20) sobre
     papel pontilhado, números gigantes, micro-rótulos.
   · qclay.design — pílulas completas, ar, display geométrico.
   Uma regra: papel claro para LER, tinta escura para NAVEGAR,
   um só azul-cobalto para AGIR. Ver DESIGN.md antes de mexer.
   ============================================================ */

/* ---------- SN Pro (variável, auto-hospedada · OFL) ----------
   A fonte oficial do Clark em TODA a interface — a mesma do Supernotes,
   desenhada para Markdown. Um arquivo por estilo cobre 200–900. */
@font-face {
  font-family: "SN Pro";
  src: url("fontes/SNPro-VariableRegular.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SN Pro";
  src: url("fontes/SNPro-VariableItalic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;   /* controles nativos (dialog, select, date) seguem o tema */
  /* base — creme de papel (sleep-well × Supernotes), nunca branco puro */
  --canvas: #f6efdd;                           /* creme manteiga */
  --surface: #fcf7ea;                          /* marfim de leitura: sólido */
  --surface-2: #eee5cd;                        /* poço recuado dentro de cartões */
  --border: rgba(46, 40, 24, 0.11);
  --border-strong: rgba(46, 40, 24, 0.2);
  --ink: #21201b;                              /* sépia-tinta, nunca preto puro */
  --ink-2: #5b564a;                            /* secundário AA sobre creme e marfim */
  --ink-3: #92896f;                            /* decorativo/desabilitado, nunca informativo */

  /* chrome — a tinta vira superfície (barra lateral, cards bento escuros) */
  --chrome: #23211a;
  --chrome-2: #2d2a21;
  --chrome-ink: #f2ecdb;
  --chrome-muted: rgba(242, 236, 219, 0.6);
  --chrome-border: rgba(242, 236, 219, 0.12);

  /* ação e energia — azul-caneta sobre papel: tinta, não neon */
  --btn-ink: #21201b;
  --btn-ink-hover: #35332b;
  --sky: #2f4396;                              /* azul-caneta (nome histórico) */
  --sky-2: #7688c8;
  --sky-ink: #2a3d8c;                          /* azul-caneta como TEXTO (AA em creme) */
  --sky-soft: rgba(47, 67, 150, 0.09);
  --anel-neutro: rgba(47, 67, 150, 0.35);    /* anel da nota clicada sem cor: clique é ação */
  --coral: #c05f3c;                            /* barro queimado: gravação, alerta */
  --coral-2: #e0a98c;
  --mark: #f2e3b6;                             /* grifo dourado-creme */
  --danger: #a63a2c;
  --danger-soft: #f6e6dd;
  --success: #4a6b4f;
  --success-soft: #e0e8d9;

  /* matérias — pastéis recalibrados para o papel morno (nomes históricos) */
  --m-rosa-bg: #f3dbc8;   --m-rosa-dot: #c96f45;  --m-rosa-ink: #7f3d1a;   /* terracota */
  --m-azul-bg: #dde2ef;   --m-azul-dot: #5568ab;  --m-azul-ink: #33427e;   /* caneta */
  --m-verde-bg: #dde4d3;  --m-verde-dot: #6d8a5b; --m-verde-ink: #3d5233;  /* sálvia */
  --m-ambar-bg: #f0e3c0;  --m-ambar-dot: #b9922e; --m-ambar-ink: #6b5311;  /* mostarda */
  --m-lilas-bg: #e3dcec;  --m-lilas-dot: #8d7cb8; --m-lilas-ink: #4e3f7d;  /* alfazema */

  /* vidro — receita única, restrita a superfícies flutuantes */
  --glass-bg: linear-gradient(135deg, rgba(252, 247, 234, 0.82), rgba(252, 247, 234, 0.58));
  --glass-bg-strong: linear-gradient(135deg, rgba(252, 247, 234, 0.92), rgba(252, 247, 234, 0.74));
  --glass-border: rgba(252, 247, 234, 0.64);
  --glass-blur: blur(18px) saturate(1.4);

  /* tipografia — display de tracking apertado + UI legível + mono de rótulo */
  --font-ui: "SN Pro", system-ui, "Segoe UI", sans-serif;
  --font-display: "SN Pro", system-ui, sans-serif;
  --font-mono: "SN Pro", system-ui, sans-serif;   /* rótulo-máquina: uppercase + espaçamento */
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-16: 1rem; --fs-19: 1.1875rem; --fs-23: 1.4375rem; --fs-28: 1.75rem;
  --fs-34: 2.125rem; --fs-44: 2.75rem; --fs-56: 3.5rem; --fs-72: 4.5rem;
  --track-display: -0.02em;                   /* aperto de display (incredibles) */
  --track-mono: 0.08em;                        /* respiro de kicker mono */

  /* forma — bento 20 + pílulas completas */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(23, 21, 15, 0.05), 0 8px 22px -14px rgba(23, 21, 15, 0.1);
  --shadow-float: 0 24px 48px -16px rgba(23, 21, 15, 0.26);
  --inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* movimento — desaceleração suave, sem ressalto */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms; --t-med: 200ms; --t-slow: 250ms; --t-spring: 480ms;

  /* textura — grade de pontos do papel (zalak/incredibles) */
  --dot-grid: radial-gradient(rgba(46, 40, 24, 0.07) 1px, transparent 1.05px);
  --dot-gap: 22px;

  /* z semântico */
  --z-dropdown: 100; --z-sticky: 200; --z-backdrop: 300; --z-sheet: 310; --z-toast: 400;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* o <mark> do navegador é amarelo-fluorescente com texto preto — fora da paleta
   nos dois temas e ilegível no escuro; a casa tem seu próprio marca-texto */
mark { background: var(--mark); color: inherit; border-radius: 2px; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
img, svg { display: block; }
::selection { background: var(--sky); color: #fff; }
kbd { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.02em; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }

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

/* ---------- Camada ambiente: papel pontilhado ----------
   v3: o fundo é papel com grade de pontos (zalak/incredibles) — matéria
   impressa, não aurora. Os .orb continuam no DOM por compatibilidade,
   mas apenas dois sopros de cor MUITO tênues ancoram os cantos. */
.ambient {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background: var(--canvas);
  background-image: var(--dot-grid);
  background-size: var(--dot-gap) var(--dot-gap);
}
.ambient .orb { position: absolute; border-radius: 50%; }
.ambient .orb-a {
  width: 70vmin; height: 70vmin; left: -24vmin; top: -26vmin;
  background: radial-gradient(closest-side, rgba(47, 67, 150, 0.07), rgba(47, 67, 150, 0) 70%);
}
.ambient .orb-b {
  width: 58vmin; height: 58vmin; right: -22vmin; bottom: -20vmin;
  background: radial-gradient(closest-side, rgba(255, 90, 45, 0.06), rgba(255, 90, 45, 0) 70%);
}
.ambient .orb-c { display: none; }
.ambient::after {
  content: ""; position: absolute; inset: 0; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilitário de vidro (uso restrito — ver DESIGN.md) ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
}

/* ---------- Shell ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app-main {
  flex: 1; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 20px 20px calc(88px + env(safe-area-inset-bottom));
}

.view-head { margin: 8px 0 20px; }
.view-head .kicker {
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--track-mono); color: var(--ink-2);
}
.view-head h1 {
  font-family: var(--font-display);
  font-size: var(--fs-28); font-weight: 600;
  letter-spacing: var(--track-display); line-height: 1.02; text-wrap: balance;
}
.view-head .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.streak-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
  font-size: var(--fs-13); font-weight: 700; color: var(--ink);
  white-space: nowrap; flex: none;
}
.streak-pill .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--sky-2));
}

/* ---------- Views ---------- */
.view { display: none; }
.view.is-active { display: block; animation: view-in 300ms var(--spring-soft); }   /* v314: o mesmo ritmo das cenas (300 ms) */
@keyframes view-in {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: none; }
}

/* ---------- Cartão (leitura = sólido, sempre) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
}
.stack > * + * { margin-top: 14px; }
.card-title { font-size: var(--fs-14); font-weight: 700; letter-spacing: -0.005em; }
.card-sub { font-size: var(--fs-13); color: var(--ink-2); margin-top: 2px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-link {
  font-size: var(--fs-13); font-weight: 700; color: var(--sky-ink);
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 4px; margin: -12px -4px;
  /* no celular a ação não pode quebrar em duas linhas nem soltar o + */
  flex: none; white-space: nowrap;
}
.card-link:hover { color: var(--ink); }

/* ---------- Botões: pílulas completas (qclay) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.005em;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring),
              box-shadow var(--t-fast) var(--ease-out);
  width: 100%;
}
.btn:active { transform: scale(0.965); transition-duration: var(--t-fast); }
.btn-primary { background: var(--btn-ink); color: var(--canvas); box-shadow: var(--shadow-float); }
.btn-primary:hover { background: var(--btn-ink-hover); transform: translateY(-1px); }
.btn-primary:disabled {
  background: rgba(24, 29, 31, 0.07); color: var(--ink-3);
  box-shadow: none; cursor: default; transform: none;
}
.btn-secondary {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-strong); color: var(--ink);
  box-shadow: var(--inset-glass);
}
.btn-secondary:hover { background: var(--glass-bg-strong); }
.btn-ghost { background: transparent; color: var(--ink-2); font-weight: 600; box-shadow: none; }
.btn-ghost:hover { color: var(--ink); background: rgba(24, 29, 31, 0.05); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ---------- Chips (pílulas Reasonal) ---------- */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-14); font-weight: 600; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip[aria-pressed="true"] { border-color: currentColor; animation: chip-pop var(--t-spring) var(--spring); }
@keyframes chip-pop { 0% { transform: scale(0.94); } 100% { transform: scale(1); } }
.chip.m-rosa[aria-pressed="true"]  { background: var(--m-rosa-bg);  color: var(--m-rosa-ink); }
.chip.m-ambar[aria-pressed="true"] { background: var(--m-ambar-bg); color: var(--m-ambar-ink); }
.chip.m-verde[aria-pressed="true"] { background: var(--m-verde-bg); color: var(--m-verde-ink); }
.chip.m-azul[aria-pressed="true"]  { background: var(--m-azul-bg);  color: var(--m-azul-ink); }
.chip.m-lilas[aria-pressed="true"] { background: var(--m-lilas-bg); color: var(--m-lilas-ink); }
.m-rosa .dot { background: var(--m-rosa-dot); } .m-ambar .dot { background: var(--m-ambar-dot); }
.m-verde .dot { background: var(--m-verde-dot); } .m-azul .dot { background: var(--m-azul-dot); }
.m-lilas .dot { background: var(--m-lilas-dot); }

.chip--dur { min-width: 68px; justify-content: center; font-variant-numeric: tabular-nums; }
.chip--dur[aria-pressed="true"] { background: var(--btn-ink); border-color: var(--btn-ink); color: var(--canvas); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700;
}
.tag .dot { width: 7px; height: 7px; border-radius: 50%; }
.tag.m-rosa  { background: var(--m-rosa-bg);  color: var(--m-rosa-ink); }
.tag.m-ambar { background: var(--m-ambar-bg); color: var(--m-ambar-ink); }
.tag.m-verde { background: var(--m-verde-bg); color: var(--m-verde-ink); }
.tag.m-azul  { background: var(--m-azul-bg);  color: var(--m-azul-ink); }
.tag.m-lilas { background: var(--m-lilas-bg); color: var(--m-lilas-ink); }

/* ---------- Hoje ---------- */

.note-item {
  /* Tokens locais: uma nota sem cor não herda a tinta da nota-mãe. */
  --note-bg: var(--surface);
  --note-border: var(--border);
  display: block; width: 100%; text-align: left;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.note-item:first-of-type { border-top: 0; padding-top: 2px; }
.note-item .t { font-size: var(--fs-14); font-weight: 700; letter-spacing: -0.005em; }
.note-item .snip { display: none; }
.note-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 5px; font-size: var(--fs-12); color: var(--ink-2); }
.note-item:hover .t { color: var(--sky-ink); }

/* ---------- Foco (overlay assinatura: vidro sobre orbes) ---------- */
.focus-overlay {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(237, 231, 223, 0.42);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.focus-overlay.is-open { display: flex; }
.focus-panel {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  width: min(420px, 100%);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float), var(--inset-glass);
  padding: 36px 28px 28px;
  text-align: center;
  animation: panel-in 560ms var(--spring-soft);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.focus-kicker { font-size: var(--fs-14); color: var(--ink-2); font-weight: 600; }
.focus-ring { position: relative; width: 250px; height: 250px; }
.focus-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.focus-ring .track { fill: none; stroke: rgba(24, 29, 31, 0.08); stroke-width: 6.5; }
.focus-ring .bar {
  fill: none; stroke: url(#ring-grad); stroke-width: 6.5; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.focus-ring .time {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.focus-ring .time strong {
  font-family: var(--font-display);
  font-size: 3.6rem; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.focus-ring .time span { font-size: var(--fs-13); color: var(--ink-2); font-weight: 600; }
.focus-actions { width: 100%; max-width: 320px; display: grid; gap: 10px; }

/* ---------- Recall ---------- */
h1.recall-prompt {
  font-family: var(--font-display);
  font-size: var(--fs-34); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
  margin-top: 6px;
}
.recall-guide { margin-top: 12px; font-size: var(--fs-14); color: var(--ink-2); max-width: 46ch; }

.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: rgba(24, 29, 31, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px;
  margin: 24px 0 20px;
}
.seg button {
  min-height: 42px; border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 700; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), background var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 2px 8px rgba(24, 29, 31, 0.12);
}

.rec-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 0 8px; }
.mic-btn {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(145deg, var(--sky) 12%, var(--sky-2) 95%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float), inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
              inset 0 -8px 16px rgba(30, 49, 214, 0.3);
  transition: transform var(--t-spring) var(--spring), background var(--t-med) var(--ease-out);
}
.mic-btn:hover { transform: scale(1.05); }
.mic-btn:active { transform: scale(0.94); transition-duration: var(--t-fast); }
.mic-btn.is-rec { background: linear-gradient(145deg, #23292c, #3a4247); }
.mic-btn.is-rec::before {
  content: ""; position: absolute; inset: -11px; border-radius: 50%;
  border: 2px solid var(--coral);
  animation: mic-pulse 1.6s var(--ease-out) infinite;
}
@keyframes mic-pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.22); opacity: 0; }
}
.rec-hint { font-size: var(--fs-13); color: var(--ink-2); font-weight: 600; }
.rec-timer {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: var(--fs-23);
}

.waveform { display: flex; align-items: center; gap: 3px; height: 40px; }
.waveform i {
  width: 4px; height: 34px; border-radius: 2px;
  background: linear-gradient(var(--sky), var(--sky-2));
  transform: scaleY(0.18); transform-origin: center;
}
.is-rec-live .waveform i {
  background: linear-gradient(var(--coral), var(--coral-2));
  animation: wave 900ms var(--ease-out) infinite alternate;
}
.waveform i:nth-child(2n) { animation-delay: 120ms; }
.waveform i:nth-child(3n) { animation-delay: 240ms; }
.waveform i:nth-child(5n) { animation-delay: 320ms; }
@keyframes wave { from { transform: scaleY(0.18); } to { transform: scaleY(1); } }

.write-area {
  width: 100%; min-height: 200px; resize: vertical;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 18px;
  font-size: var(--fs-16); line-height: 1.6; color: var(--ink);
}
.write-area::placeholder { color: var(--ink-2); }
.write-area:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }

/* processamento */
.proc { display: flex; flex-direction: column; gap: 14px; padding: 10px 0; }
.proc-step { display: flex; align-items: center; gap: 12px; font-size: var(--fs-14); color: var(--ink-2); font-weight: 500; }
.proc-step.is-on { color: var(--ink); font-weight: 700; }
.proc-step.is-done { color: var(--ink-2); }
.proc-step .ico { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; }
.proc-step .spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--sky);
  animation: spin 700ms linear infinite; display: none;
}
.proc-step.is-on .spin { display: block; }
.proc-step .check { display: none; color: var(--success); }
.proc-step.is-done .check { display: block; }
.proc-step.is-done .spin { display: none; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Resultado ---------- */
.cascade > * {
  opacity: 0; transform: translateY(14px) scale(0.99);
  animation: rise 620ms var(--spring-soft) forwards;
}
.cascade > *:nth-child(1) { animation-delay: 60ms; }
.cascade > *:nth-child(2) { animation-delay: 210ms; }
.cascade > *:nth-child(3) { animation-delay: 360ms; }
.cascade > *:nth-child(4) { animation-delay: 510ms; }
.cascade > *:nth-child(5) { animation-delay: 660ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

.nota-body { margin-top: 12px; font-size: var(--fs-16); line-height: 1.6; }
.nota-body p + p, .nota-body ul, .nota-body ul + p { margin-top: 10px; }
.nota-body ul { margin-bottom: 0; padding-left: 20px; }
.nota-body li + li { margin-top: 6px; }
.nota-body mark {
  background: var(--mark); color: inherit;
  border-radius: 2px; padding: 0;
  box-shadow: 0 0 0 2.5px var(--mark);
}

.gaps-card { background: var(--m-ambar-bg); border-color: rgba(110, 80, 16, 0.14); }
.gaps-card .card-title { color: var(--m-ambar-ink); }
.gap-item { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-14); line-height: 1.5; }
.gap-item + .gap-item { margin-top: 10px; }
.gap-item .ico { flex: none; color: var(--m-ambar-dot); margin-top: 2px; }

.mini-cards { display: grid; gap: 10px; }
.mini-card {
  background: var(--surface-2); color: var(--ink); /* também vira <button>: sem cor explícita vale o buttontext preto do UA */
  border-radius: var(--r-md); padding: 13px 15px;
  font-size: var(--fs-14); font-weight: 600; letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 10px;
}
.mini-card .n {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-12); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(24, 29, 31, 0.08);
}

/* ---------- Revisão ---------- */
.rev-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rev-progress .bar {
  flex: 1; height: 7px; border-radius: var(--r-pill);
  background: rgba(24, 29, 31, 0.08); overflow: hidden;
}
.rev-progress .bar i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--sky), var(--sky-2));
  border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-out);
}
.rev-progress span { font-size: var(--fs-13); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.flip-scene { perspective: 1200px; }
.flip-card {
  position: relative; width: 100%; min-height: 300px;
  transform-style: preserve-3d;
  transition: transform 480ms var(--ease-expo);
}
.flip-card.is-flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 26px; display: flex; flex-direction: column;
}
.flip-face.back { transform: rotateY(180deg); }
.flip-face .label {
  font-size: var(--fs-11); font-weight: 700; color: var(--ink-2);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.flip-face .q {
  flex: 1; display: flex; align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-23); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance;
}
.flip-face .a { flex: 1; display: flex; align-items: center; font-size: var(--fs-16); line-height: 1.6; }
.flip-face .src { font-size: var(--fs-12); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }

/* Os quatro veredictos (estilo Supernotes, gramática Clark): cores fortes,
   brilho interno de vidro, inclinações de figurinha e molas ao apertar.
   AA garantido: branco onde passa, tinta onde não passa (âmbar e céu). */
.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.grade {
  --incl: 0deg; --brilho: rgba(24, 29, 31, 0.2);
  min-height: 84px; border-radius: 16px; border: 0;
  font-size: var(--fs-14); font-weight: 750; letter-spacing: 0.005em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transform: rotate(var(--incl));
  box-shadow: 0 12px 24px -10px var(--brilho), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.grade .g-ico { margin-bottom: 3px; }
.grade small { font-size: var(--fs-11); font-weight: 600; color: inherit; }
.grade:hover { transform: rotate(0deg) translateY(-3px) scale(1.03); box-shadow: 0 18px 30px -10px var(--brilho), inset 0 1.5px 0 rgba(255, 255, 255, 0.45); }
.grade:active { transform: scale(0.94); transition-duration: var(--t-fast); }
.grade:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.grade--errei   { --incl: -1.6deg; background: linear-gradient(150deg, #a85560, #96434f); color: #fff; --brilho: rgba(150, 67, 79, 0.35); }
.grade--dificil { --incl: 1.1deg;  background: linear-gradient(150deg, #e3bc6a, #d3a94e); color: var(--ink); --brilho: rgba(211, 169, 78, 0.38); }
.grade--bom     { --incl: -0.9deg; background: linear-gradient(150deg, #5b8266, #486e53); color: #fff; --brilho: rgba(72, 110, 83, 0.36); }
.grade--facil   { --incl: 1.6deg;  background: linear-gradient(150deg, #3d4f9e, #2c3c85); color: #fff; --brilho: rgba(47, 67, 150, 0.4); }
/* entrada em cascata toda vez que a resposta aparece */
.grade-row:not([hidden]) .grade { animation: grade-pop 460ms var(--spring-soft) both; }
.grade-row:not([hidden]) .grade:nth-child(2) { animation-delay: 50ms; }
.grade-row:not([hidden]) .grade:nth-child(3) { animation-delay: 100ms; }
.grade-row:not([hidden]) .grade:nth-child(4) { animation-delay: 150ms; }
@keyframes grade-pop {
  from { opacity: 0; transform: rotate(var(--incl)) translateY(10px) scale(0.94); }
  to { opacity: 1; transform: rotate(var(--incl)); }
}
@media (prefers-reduced-motion: reduce) {
  .grade { --incl: 0deg; }
  .grade-row:not([hidden]) .grade { animation: none; }
}

.rev-empty { text-align: center; padding: 48px 20px; }
.rev-empty .big {
  font-family: var(--font-display);
  font-size: var(--fs-34); font-weight: 600;
  letter-spacing: -0.025em; color: var(--ink);
}
.rev-empty p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-14); }

/* ---------- Biblioteca ---------- */
.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 0 18px; min-height: 48px;
  margin-bottom: 16px;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.search:focus-within { box-shadow: 0 0 0 2px var(--sky); border-color: transparent; }
.search input {
  flex: 1; min-width: 0; min-height: 44px;
  border: none; background: none; font-size: var(--fs-14);
}
.search input:focus { outline: none; }
.search svg { color: var(--ink-2); flex: none; }

.folders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.folder {
  text-align: left; border-radius: var(--r-lg); padding: 18px;
  border: 1px solid transparent;
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.folder:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.folder:active { transform: scale(0.97); transition-duration: var(--t-fast); }
.folder .dot { width: 11px; height: 11px; border-radius: 50%; margin-bottom: 14px; }
.folder b {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-16); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.2;
}
.folder span:not(.dot) { display: block; margin-top: 5px; font-size: var(--fs-12); font-weight: 600; }
.folder.m-rosa  { background: var(--m-rosa-bg);  color: var(--m-rosa-ink); }
.folder.m-ambar { background: var(--m-ambar-bg); color: var(--m-ambar-ink); }
.folder.m-verde { background: var(--m-verde-bg); color: var(--m-verde-ink); }
.folder.m-azul  { background: var(--m-azul-bg);  color: var(--m-azul-ink); }
.folder.m-lilas { background: var(--m-lilas-bg); color: var(--m-lilas-ink); }

.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13); font-weight: 700; color: var(--ink-2);
  min-height: 44px; margin-bottom: 4px;
}
.back-btn:hover { color: var(--ink); }
#v-biblioteca.is-sub > .view-head { display: none; }

/* ---------- Estatísticas ---------- */
.stat-hero {
  text-align: center; padding: 30px 20px 26px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
}
.stat-hero .num {
  font-family: var(--font-display);
  font-size: 4.4rem; font-weight: 700;
  line-height: 1; letter-spacing: -0.035em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-hero .num sup { font-size: 0.4em; font-weight: 600; color: var(--sky-ink); }
.stat-hero .lbl { margin-top: 8px; font-size: var(--fs-14); color: var(--ink-2); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.stat-cell { padding: 18px; }
.stat-cell .v {
  font-family: var(--font-display);
  font-size: var(--fs-28); font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.stat-cell .k { margin-top: 3px; font-size: var(--fs-12); color: var(--ink-2); font-weight: 600; }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 18px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar-col .b {
  width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px;
  background: rgba(24, 29, 31, 0.07); position: relative; overflow: hidden;
}
.bar-col .b i {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--sky-2), var(--sky));
  border-radius: inherit;
}
.bar-col .d { font-size: var(--fs-11); font-weight: 700; color: var(--ink-2); }
.legend { display: flex; gap: 16px; margin-top: 14px; font-size: var(--fs-12); color: var(--ink-2); font-weight: 600; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Tab bar / rail: chrome de tinta (bento zalak) ----------
   A navegação mora na tinta; o conteúdo, no papel. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  /* vidro fosco à la Apple (v212): a barra é o chrome da casa, mas
     translúcido — o conteúdo atravessa com blur e saturação, como a
     UITabBar. O rail do desktop sobrescreve com o sólido mais abaixo */
  background: color-mix(in srgb, var(--chrome) 64%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border-top: 1px solid var(--chrome-border);
  box-shadow: 0 -10px 30px -18px rgba(23, 21, 15, 0.5);
  display: flex; justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
/* sem backdrop-filter (webview antiga), o vidro vira sólido: nada de
   conteúdo borrado vazando por trás sem desfoque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: var(--chrome); }
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 64px; min-height: 48px; padding: 4px 8px;
  border-radius: var(--r-md);
  font-size: var(--fs-11); font-weight: 600; color: var(--chrome-muted);
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.tab[aria-current="page"] { color: var(--chrome-ink); }
.tab:hover { color: var(--chrome-ink); }
.tab .badge {
  position: absolute; top: 0; right: 8px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--sky); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Toast (vidro escuro flutuante) ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  z-index: var(--z-toast);
  background: rgba(25, 23, 19, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: #fff;
  font-size: var(--fs-13); font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-float);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-spring) var(--spring);
  display: flex; align-items: center; gap: 8px;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--sky-2); }
.toast { font-family: var(--font-ui); }

/* ---------- Skeleton ---------- */
.skel { border-radius: var(--r-sm); background: var(--surface-2); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: shimmer 1.4s var(--ease-out) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Elementos exclusivos do rail ---------- */
.rail-brand, .rail-section, .rail-foot { display: none; }

kbd {
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400;
  line-height: 1; padding: 3px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.72); color: var(--ink-2);
  border: 1px solid var(--border); box-shadow: 0 1px 0 var(--border-strong);
}
.kbd-hint {
  display: none; margin-top: 16px; text-align: center;
  font-size: var(--fs-12); color: var(--ink-2); font-weight: 600;
}
.kbd-hint kbd { margin: 0 2px; }
.kbd-hint .sep { margin: 0 8px; color: var(--border-strong); }

/* ============================================================
   DESKTOP ≥900px — rail de vidro, conteúdo em coluna única
   ============================================================ */
@media (min-width: 900px) {
  .app { flex-direction: row; }

  .tabbar {
    order: -1;
    position: sticky; top: 0; bottom: auto; align-self: flex-start;
    flex-direction: column; justify-content: flex-start; gap: 2px;
    height: calc(100dvh - 24px); width: 248px; flex: none;
    margin: 12px 0 12px 12px;
    border: 1px solid var(--chrome-border); border-radius: var(--r-lg);
    background: var(--chrome);
    box-shadow: 0 18px 40px -22px rgba(23, 21, 15, 0.45);
    padding: 24px 14px 18px;
    overflow: hidden;
  }
  /* nada encolhe por conta própria: encavalar é proibido */
  .tabbar > * { flex: none; }
  /* a única região elástica é a lista de fontes, que rola sozinha */
  .rail-section.rail-fontes {
    flex: 1 1 auto; min-height: 72px;
    display: flex; flex-direction: column;
  }
  .rail-fontes .rail-label-row { flex: none; }
  #rail-materias {
    flex: 1; min-height: 0; overflow-y: auto;
    padding-bottom: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(244, 241, 234, 0.18) transparent;
  }
  #rail-materias::-webkit-scrollbar { width: 5px; }
  #rail-materias::-webkit-scrollbar-thumb { background: rgba(244, 241, 234, 0.18); border-radius: 3px; }
  #rail-materias::-webkit-scrollbar-track { background: transparent; }
  .rail-brand {
    display: block;
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--fs-28); letter-spacing: var(--track-display);
    padding: 2px 10px 4px; color: var(--chrome-ink);
  }
  .rail-brand::after {
    content: "estude de verdade";
    display: block; margin-top: 4px;
    font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400;
    letter-spacing: var(--track-mono); text-transform: uppercase;
    color: var(--chrome-muted);
  }
  .rail-brand { margin-bottom: 18px; }
  .tab {
    flex-direction: row; gap: 11px; justify-content: flex-start;
    width: 100%; min-width: 0; font-size: var(--fs-14); font-weight: 500;
    padding: 10px 12px; border-radius: var(--r-md);
    color: var(--chrome-muted);
  }
  .tab:hover { background: rgba(244, 241, 234, 0.07); color: var(--chrome-ink); }
  .tab[aria-current="page"] { background: rgba(244, 241, 234, 0.1); color: var(--chrome-ink); font-weight: 600; }
  .tab .badge { position: static; margin-left: auto; }

  .rail-section { display: block; margin-top: 18px; }
  .rail-label {
    font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400;
    letter-spacing: var(--track-mono); text-transform: uppercase;
    color: var(--chrome-muted); padding: 0 10px 8px;
  }
  .rail-materia {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 36px; padding: 7px 10px;
    border-radius: var(--r-md);
    font-size: var(--fs-13); font-weight: 500; color: var(--chrome-muted);
    text-align: left;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .rail-materia:hover { background: rgba(244, 241, 234, 0.07); color: var(--chrome-ink); }
  .rail-materia .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .rail-materia .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-materia .n { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--chrome-muted); font-variant-numeric: tabular-nums; }

  .rail-foot { display: block; margin-top: auto; padding-top: 12px; }
  .rail-new {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 46px; padding: 0 16px;
    border-radius: var(--r-pill);
    background: var(--sky); color: #fff;
    font-size: var(--fs-13); font-weight: 600;
    box-shadow: 0 10px 22px -10px rgba(47, 67, 150, 0.55);
    transition: background var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
  }
  .rail-new:hover { background: #263467; transform: translateY(-1px); }
  .rail-new:active { transform: scale(0.97); transition-duration: var(--t-fast); }
  .rail-new kbd {
    margin-left: auto; background: rgba(255, 255, 255, 0.2);
    border-color: transparent; color: #fff; box-shadow: none;
  }

  .app-main { max-width: 1080px; padding: 40px 48px 80px; }
  .view-head { margin: 0 0 24px; }
  .view-head h1 { font-size: var(--fs-34); }

  .card-sessao { padding: 28px; }
  .card-sessao .btn { margin-top: 22px; }
  #recentes .note-item:nth-child(-n + 5) { display: block; }

  /* Foco: takeover completo */
  .focus-ring { width: 300px; height: 300px; }
  .focus-ring .time strong { font-size: 4.4rem; }
  .focus-actions { max-width: 340px; }
  .focus-panel { padding: 44px 40px 32px; }

  /* Recall centrado e calmo */
  #v-recall, #v-proc { max-width: 620px; margin-inline: auto; }
  h1.recall-prompt { font-size: var(--fs-44); }
  .write-area { min-height: 260px; }

  /* Revisão */
  #v-revisao { max-width: 640px; margin-inline: auto; }
  .flip-card { min-height: 340px; }
  .flip-face { padding: 30px; }
  .flip-face .q { font-size: var(--fs-28); }
  .grade { min-height: 96px; }
  .grade kbd { margin-bottom: 3px; }
  .kbd-hint { display: block; }

  /* Biblioteca em grade de cartões.
     As fontes têm aba própria desde a v2.37 — esconder a grade aqui
     deixaria a aba em branco no desktop. */
  .search { max-width: 420px; margin-bottom: 22px; }
  .lib-notas-wrap { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; }
  .lib-notas-wrap .card-head { margin-bottom: 16px; }
  /* masonry de colunas REAIS (divs flex): multicol fragmentava e o
     Safari não pintava fragmentos — nota invisível. Ver montarGrade. */
  .note-grid:has(.mas-col) { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
  /* quem não é coluna (a compor, avisos) ocupa a LINHA inteira —
     senão vira irmã flex e espreme as colunas em tiras */
  .note-grid:has(.mas-col) > :not(.mas-col) { flex: 1 1 100%; }
  .mas-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  .note-grid .note-item { margin-bottom: 0; }
  /* v315: em 1 coluna não há .mas-col (e o gap dela) — os cards são irmãos
     soltos e encostavam. O mesmo respiro das colunas, em qualquer largura. */
  .note-grid:not(:has(.mas-col)) > .note-item { margin-bottom: 14px; }
  .note-grid .note-item {
    border-top: 0; padding: 20px;
    background: var(--note-bg); border: 1px solid var(--note-border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-card);
    transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
  }
  .note-grid .note-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
  .note-grid .note-item:active { transform: scale(0.98); transition-duration: var(--t-fast); }
  .note-grid .note-item .t {
    display: block; font-family: var(--font-display);
    font-size: var(--fs-19); font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.22;
  }
  .note-grid .note-item .snip {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: 8px;
    font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); font-weight: 400;
  }
  .note-grid .note-item .meta { margin-top: 14px; }

  /* Nota aberta */
  .nota-leitura { padding: 30px; }
  .nota-leitura .nota-body { max-width: 64ch; }
  .nota-rail { display: grid; gap: 14px; margin-top: 14px; }

  /* Números */
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-hero { padding: 40px 20px 34px; }
  .stat-hero .num { font-size: 5.6rem; }
  .bars { height: 168px; gap: 12px; }
  .bar-col .b { max-width: 46px; }
}

/* ============================================================
   ≥1100px — o conteúdo ganha colunas
   ============================================================ */
@media (min-width: 1100px) {
  .result-grid {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px; align-items: start;
  }
  .result-grid > * + * { margin-top: 0; }
  .result-grid > .card-nota { grid-column: 1; grid-row: 1 / span 4; }
  .result-grid > .gaps-card { grid-column: 2; grid-row: 1; }
  .result-grid > .card-cartoes { grid-column: 2; grid-row: 2; }
  .result-grid > .card-grafo-novo { grid-column: 2; grid-row: 3; }
  .result-grid > .btn-row { grid-column: 2; grid-row: 4; }
  .card-nota { padding: 30px; }
  .card-nota .nota-body { max-width: 62ch; }

  .nota-grid {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 16px; align-items: start;
  }
  .nota-rail { margin-top: 0; }

  .stats-grid {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 14px; align-items: start; margin-top: 14px;
  }
  .stats-grid > .card { margin-top: 0 !important; }
}

@media (min-width: 1440px) {
  .app-main { max-width: 1180px; padding-inline: 64px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
  .cascade > * { animation-duration: 1ms; animation-delay: 0ms; }
  .flip-card { transition: none; }
  .mic-btn.is-rec::before { animation: none; opacity: 0.5; }
  .is-rec-live .waveform i { animation: wave 2s steps(2) infinite alternate; }
  .skel::after { animation: none; }
  .focus-ring .bar { transition: none; }
  .focus-panel { animation: none; }
  .chip[aria-pressed="true"] { animation: none; }
  .ambient .orb { animation: none; }
  .btn, .grade, .escolha, .revisao-sussurro, .folder, .rail-new, .note-grid .note-item, .mic-btn, .toast {
    transition-property: background, color, box-shadow, opacity;
  }
}

/* ============================================================
   v2.1 — Fontes, entidades, grafo e Markdown
   ============================================================ */

/* chip "+ Fonte" */
.chip-add {
  border-style: dashed; border-color: var(--border-strong);
  color: var(--ink-2); gap: 6px;
}
.chip-add:hover { color: var(--ink); border-color: var(--ink-2); }

/* dica de Markdown sob a área de escrita */
.md-hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 10px; font-size: var(--fs-12); color: var(--ink-2);
}
.md-hint mark { background: var(--mark); border-radius: 2px; padding: 0 2px; }
.md-hint code { font-size: var(--fs-11); }
.md-flag {
  margin-left: auto; font-weight: 700; font-size: var(--fs-11);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}

/* título de bloco vindo do Markdown */
.nota-body .md-h { font-weight: 700; font-size: var(--fs-14); letter-spacing: -0.005em; margin-top: 14px; }
.nota-body code {
  font-family: var(--font-mono);
  font-size: 0.85em; background: var(--surface-2);
  padding: 1px 5px; border-radius: 5px;
}

/* chips de entidade (conceito/autor/ideia) */
.ent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 13px; border-radius: var(--r-pill);
  background: var(--sky-soft); color: var(--sky-ink);
  font-size: var(--fs-13); font-weight: 700;
  transition: transform var(--t-spring) var(--spring), background var(--t-fast) var(--ease-out);
}
.ent-chip:hover { background: rgba(47, 67, 150, 0.16); }
.ent-chip:active { transform: scale(0.95); transition-duration: var(--t-fast); }
.ent-chip--autor { background: rgba(24, 29, 31, 0.08); color: var(--ink); }
.ent-chip--autor:hover { background: rgba(24, 29, 31, 0.13); }
.ent-chip--ideia { background: rgba(255, 90, 45, 0.13); color: var(--m-rosa-ink); }
.ent-chip--ideia:hover { background: rgba(255, 90, 45, 0.2); }
i.novo {
  font-style: normal; font-size: var(--fs-11); font-weight: 700;
  background: var(--sky-ink); color: #fff;
  padding: 1.5px 7px; border-radius: var(--r-pill);
}

/* segmentado da biblioteca e do grafo */
.seg-lib {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 16px; padding-bottom: 2px;
}
.seg-lib::-webkit-scrollbar { display: none; }
.seg-lib button {
  flex: none; min-height: 40px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-13); font-weight: 700; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seg-lib button:hover { color: var(--ink); }
.seg-lib button[aria-pressed="true"] { background: var(--btn-ink); border-color: var(--btn-ink); color: var(--canvas); }

/* grade de entidades */
.ent-intro { font-size: var(--fs-13); color: var(--ink-2); margin: 0 0 14px; max-width: 52ch; }
.ent-grid { display: block; }  /* a estante interna (.note-grid) governa o layout */
.ent-card {
  text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 16px;
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.ent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.ent-card:active { transform: scale(0.98); transition-duration: var(--t-fast); }
.ent-nome { display: block; font-size: var(--fs-14); font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; }
.ent-def {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: var(--fs-12); line-height: 1.5; color: var(--ink-2);
}
.ent-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.ent-meta .dot { width: 7px; height: 7px; border-radius: 50%; }

/* tile "nova fonte" */
.tile-add {
  border: 1.5px dashed var(--border-strong); background: rgba(255, 255, 255, 0.45);
  color: var(--ink-2);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.tile-add svg { margin-bottom: 8px; }
.tile-add b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-16); }
.tile-add span { font-size: var(--fs-12); font-weight: 600; }
.tile-add:hover { border-color: var(--ink-2); color: var(--ink); box-shadow: none; }

/* rail: cabeçalho da seção de fontes */
.rail-label-row { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.rail-add {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rail-add:hover { background: rgba(244, 241, 234, 0.12); color: var(--chrome-ink); }

/* ---------- Dialog: nova fonte ---------- */
dialog#dlg-fonte {
  border: 0; padding: 0; background: transparent;
  width: min(440px, calc(100vw - 28px));
  margin: auto;
}
dialog#dlg-fonte::backdrop {
  background: rgba(24, 29, 31, 0.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dlg-panel {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float), var(--inset-glass);
  padding: 24px;
  animation: panel-in 520ms var(--spring-soft);
}
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-head h2 {
  font-family: var(--font-display); font-size: var(--fs-23);
  font-weight: 600; letter-spacing: -0.02em;
}
.dlg-close {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.dlg-close:hover { background: rgba(24, 29, 31, 0.07); color: var(--ink); }
.dlg-sub { font-size: var(--fs-13); color: var(--ink-2); margin: 4px 0 18px; }
.dlg-label { display: block; font-size: var(--fs-13); font-weight: 700; margin-bottom: 6px; }
.dlg-label .opt { font-weight: 500; color: var(--ink-3); font-size: var(--fs-12); }
.dlg-panel .search { background: rgba(255, 255, 255, 0.85); }
.chip--mini { min-height: 40px; padding: 0 14px; font-size: var(--fs-13); }
.chip--mini[aria-pressed="true"] { background: var(--btn-ink); border-color: var(--btn-ink); color: var(--canvas); }
.cor-row { display: flex; gap: 12px; }
.cor-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c); border: 2.5px solid transparent;
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.cor-dot:hover { transform: scale(1.1); }
.cor-dot[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8) inset;
}

/* ---------- Grafo ---------- */
.graph-wrap { position: relative; }
#graph-svg { width: 100%; height: auto; display: block; }
.g-edge {
  stroke: rgba(24, 29, 31, 0.13); stroke-width: 1.2;
  transition: opacity var(--t-med) var(--ease-out), stroke var(--t-med) var(--ease-out);
}
.g-edge.is-on { stroke: var(--sky); stroke-width: 2; }
.g-edge.is-off { opacity: 0.1; }
.g-node { cursor: pointer; transition: opacity var(--t-med) var(--ease-out); outline: none; }
.g-node .g-dot { transition: transform var(--t-med) var(--ease-out); }
.g-node:hover .g-dot { transform: scale(1.18); }
.g-halo { fill: none; stroke: var(--sky); stroke-width: 2.5; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.g-node.is-sel .g-halo, .g-node:focus-visible .g-halo { opacity: 0.95; }
.g-node.is-dim { opacity: 0.13; }
.g-node.is-meio { opacity: 0.45; }
.g-lbl {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  fill: var(--ink); text-anchor: middle; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast) var(--ease-out);
  paint-order: stroke; stroke: rgba(237, 231, 223, 0.92); stroke-width: 3px;
}
.g-lbl-on, .g-node.is-sel .g-lbl, .g-node.is-nb .g-lbl { opacity: 1; }
.graph-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-size: var(--fs-12); font-weight: 600; color: var(--ink-2);
}
.graph-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lg-fonte { background: var(--surface-2); border: 2px solid var(--ink-3); }
.lg-nota { background: #fff; border: 2px solid var(--ink-3); }
.lg-conceito { background: var(--sky); }
.lg-autor { background: var(--ink); }
.lg-ideia { background: var(--coral); }

.graph-info {
  margin-top: 14px;
  display: flex; align-items: center; gap: 14px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), var(--inset-glass);
  padding: 14px 16px;
  animation: rise 420ms var(--spring-soft);
}
.gi-txt { flex: 1; min-width: 0; }
.gi-tipo { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.gi-nome { font-size: var(--fs-16); font-weight: 700; letter-spacing: -0.01em; margin-top: 1px; }
.gi-desc { font-size: var(--fs-13); color: var(--ink-2); margin-top: 2px; }
.gi-open {
  flex: none; min-height: 42px; padding: 0 18px;
  border-radius: var(--r-md); background: var(--btn-ink); color: var(--canvas);
  font-size: var(--fs-13); font-weight: 700;
  transition: background var(--t-fast) var(--ease-out);
}
.gi-open:hover { background: var(--btn-ink-hover); }

/* desktop */
@media (min-width: 900px) {
  #v-grafo { max-width: 880px; margin-inline: auto; }

}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dlg-panel, .graph-info { animation: none; }
  .ent-chip, .ent-card, .cor-dot { transition-property: background, color, box-shadow, opacity; }
  .g-node:hover .g-dot { transform: none; }
}

/* ============================================================
   v2.2 — Blocos de estudo, Ajustes e estudo a partir da fonte
   ============================================================ */

.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.gear-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.gear-btn:hover { color: var(--ink); transform: rotate(24deg); }
.gear-btn:active { transform: scale(0.92); transition-duration: var(--t-fast); }

/* iniciar estudo dentro da fonte */
.starter .bloco-row { margin-bottom: 2px; }
.starter-row { display: flex; gap: 10px; margin-top: 16px; }
.starter-row .btn { flex: 1; }
.starter-row .btn svg { flex: none; }

/* lista de blocos nos Ajustes */
.bloco-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--border);
}
.bloco-item:first-child { border-top: 0; padding-top: 2px; }
.bloco-nome { flex: 1; font-size: var(--fs-14); font-weight: 700; letter-spacing: -0.005em; }
.bloco-min {
  font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--r-pill);
  padding: 4px 11px; font-variant-numeric: tabular-nums;
}
.bloco-del {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.bloco-del:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); }
.bloco-del:disabled { opacity: 0.35; cursor: default; }

/* linhas de ajuste + switch */
.ajuste-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--border);
}
.ajuste-row:first-of-type { border-top: 0; }
.ajuste-row b { display: block; font-size: var(--fs-14); font-weight: 700; letter-spacing: -0.005em; }
.ajuste-row span { display: block; font-size: var(--fs-13); color: var(--ink-2); margin-top: 1px; }
.ajuste-valor {
  flex: none; font-size: var(--fs-13); font-weight: 700; color: var(--ink);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 6px 14px;
}
.switch {
  flex: none; width: 50px; height: 30px; border-radius: var(--r-pill);
  background: rgba(24, 29, 31, 0.16); position: relative;
  transition: background var(--t-med) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(24, 29, 31, 0.25);
  transition: transform var(--t-spring) var(--spring);
}
.switch[aria-checked="true"] { background: linear-gradient(135deg, var(--sky), var(--sky-2)); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* escolha entre poucas opções: pílulas que cabem numa olhada */
.aj-opcoes { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.aj-opcoes button {
  font-size: var(--fs-13); font-weight: 700; letter-spacing: -0.005em;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 8px 15px; min-height: 38px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.aj-opcoes button:hover { color: var(--ink); border-color: var(--border); }
.aj-opcoes button[aria-checked="true"] {
  background: var(--ink); color: var(--canvas); border-color: var(--ink);
}

.ajustes-rodape {
  text-align: center; font-size: var(--fs-12); font-weight: 600;
  color: var(--ink-2); padding: 10px 0 4px;
}

/* item Ajustes no rodapé do rail */
.rail-foot .tab-ajustes { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .gear-btn:hover { transform: none; }
  .switch::after { transition: none; }
}

/* ============================================================
   v2.3 — Login interno, editor Markdown vivo e status da IA
   ============================================================ */

/* ---------- Editor Markdown vivo ---------- */
.editor {
  position: relative; cursor: text;
  white-space: pre-wrap; word-break: break-word;
}
.editor:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }
.editor.is-empty::before {
  content: attr(data-placeholder);
  position: absolute; inset: 18px; pointer-events: none;
  color: var(--ink-2); opacity: 0.7;
}
.editor .md-line { min-height: 1.6em; }
.editor .tok {
  font-style: normal; color: var(--ink-3);
  font-weight: 400; font-size: inherit;
}
.editor .md-h1, .editor .md-h2, .editor .md-h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em; line-height: 1.25;
  margin-top: 0;
}
.editor .md-h1 { font-size: 1.5em; font-weight: 600; }
.editor .md-h2 { font-size: 1.3em; font-weight: 600; }
.editor .md-h3 { font-size: 1.12em; font-weight: 600; }
/* O reset .cm-line abaixo não pode zerar só o padding e manter o recuo
   negativo: isso cortava o marcador e as primeiras letras nas três telas. */
.editor .md-li, .editor .cm-line.md-li { padding-left: 1.1em; text-indent: -1.1em; }
.editor .md-q {
  background: var(--surface-2); border-radius: 8px;
  padding: 2px 8px; color: var(--ink-2); font-style: italic;
}
.editor strong { font-weight: 700; }
.editor mark {
  background: var(--mark); color: inherit;
  border-radius: 2px; box-shadow: 0 0 0 2px var(--mark);
}
.editor code {
  font-family: inherit;
  font-size: inherit; background: var(--surface-2);
  border-radius: 5px; padding: 0;
}

/* ---------- Status da IA nos Ajustes ---------- */
.ajuste-valor.ok { background: var(--success-soft); color: var(--success); }
#ia-dica code {
  font-family: var(--font-mono);
  font-size: 0.85em; background: var(--surface-2);
  border-radius: 5px; padding: 1px 5px;
}

/* ---------- Login v3.8 — "o estúdio" ----------
   Uma cena, não um formulário: à esquerda o mascote e a frase em
   escala editorial; à direita, o painel quieto. A headline É o
   design (contraste ~10:1 com o corpo do formulário); o mascote
   é tinta viva — os olhos seguem o cursor e se fecham na senha. */
.login-wrap {
  min-height: 100dvh; display: grid; place-items: center;
  padding: clamp(20px, 4vw, 48px);
}
.login-cena {
  width: 100%; max-width: 1060px;
  display: grid; gap: 40px;
}
.login-hero { max-width: 620px; }
.login-lockup {
  display: flex; align-items: flex-end; gap: 14px;
  animation: rise 600ms var(--spring-soft) both;
}
.mascote { width: 64px; height: auto; overflow: visible; }
.masc-corpo { fill: var(--ink); }
.masc-olhos path { fill: var(--canvas); }
.masc-olhos {
  transform-box: fill-box; transform-origin: center;
  /* rastreio do cursor: amortecimento curto, sem borracha */
  transition: transform 120ms var(--ease-out);
}
.mascote.esta-de-olhos-fechados .masc-olhos {
  transform: translateY(2px) scaleY(0.1);
  /* fechar/abrir os olhos merece a mola inteira */
  transition: transform 340ms var(--spring-soft);
}
.login-marca {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--fs-13); letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-2); padding-bottom: 6px;
}
.login-titulo {
  margin-top: 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.7rem, 7.2vw, 5.3rem);
  letter-spacing: var(--track-display); word-spacing: 0.09em;
  line-height: 0.96; text-wrap: balance;
  animation: rise 600ms var(--spring-soft) 90ms both;
}
.login-titulo em {
  font-style: italic; font-weight: 640;
  color: var(--sky-ink); letter-spacing: -0.01em;
}
.login-panel {
  width: min(420px, 100%);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float), var(--inset-glass);
  padding: 30px 26px 24px;
  animation: rise 600ms var(--spring-soft) 200ms both;
}
.login-panel .search { background: rgba(255, 255, 255, 0.85); }

/* a cena vira duas colunas quando há palco para isso */
@media (min-width: 920px) {
  .login-cena {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px);
    align-items: center; column-gap: clamp(48px, 7vw, 96px);
  }
  .mascote { width: clamp(64px, 7vw, 84px); }
  /* o painel desce um nada: a assimetria tira o ar de template */
  .login-panel { margin-top: 34px; }
}
/* trocar entre entrar e criar conta: uma linha, sem peso de botão */
.login-troca {
  margin-top: 16px; text-align: center;
  font-size: var(--fs-13); color: var(--ink-2);
}
.login-troca button {
  margin-left: 5px; font-size: inherit; font-weight: 700;
  color: var(--sky-ink); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.login-troca button:hover { color: var(--ink); }
.login-erro {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--danger-soft); color: var(--danger);
  font-size: var(--fs-13); font-weight: 600; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .login-panel { animation: none; }
}

/* ============================================================
   v2.4 — Home minimalista: três portas (Estudar · Escrever · Gravar)
   Tríptico no desktop, lâminas no mobile. Cada porta tem material
   próprio: ardósia, papel, céu — nada de grade de cartões idênticos.
   ============================================================ */
.escolhas { display: grid; gap: 14px; margin-top: 8px; }

.escolha {
  position: relative; display: flex; align-items: center; gap: 18px;
  text-align: left; border-radius: var(--r-lg); padding: 20px 22px;
  min-height: 116px; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.escolha:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.escolha:active { transform: scale(0.98); transition-duration: var(--t-fast); }

.escolha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.escolha-rotulo {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-28); letter-spacing: -0.03em; line-height: 1;
}
.escolha-sub { font-size: var(--fs-13); font-weight: 600; }
.escolha-orn { flex: none; display: flex; align-items: center; justify-content: center; }
.escolha-seta {
  flex: none; opacity: 0.45;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.escolha:hover .escolha-seta { opacity: 1; transform: translateX(4px); }

/* Estudar — tinta (o mesmo chrome do rail) */
.escolha--estudar { background: var(--chrome); color: var(--chrome-ink); border: 1px solid var(--chrome-border); }
.escolha--estudar .escolha-sub { color: rgba(255, 255, 255, 0.72); }

/* Escrever — papel com cursor pulsando */
.escolha--escrever { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.escolha--escrever .escolha-sub { color: var(--ink-2); }
.escolha-linha { display: inline-block; width: 30px; height: 2px; border-radius: 2px; background: var(--border-strong); }
.escolha-caret {
  display: inline-block; width: 2.5px; height: 30px; margin-left: 5px;
  border-radius: 2px; background: var(--ink);
  animation: caret-piscar 1.1s steps(2, start) infinite;
}
@keyframes caret-piscar { to { visibility: hidden; } }

/* Gravar — o único bloco cobalto da home: é o acento agindo */
.escolha--gravar {
  background: linear-gradient(150deg, #3d4f9e, #2c3c85);
  color: #fff;
  box-shadow: var(--shadow-card), 0 16px 34px -14px rgba(47, 67, 150, 0.5);
}
.escolha--gravar .escolha-sub { color: rgba(255, 255, 255, 0.78); }
.escolha--gravar:focus-visible { outline-color: #fff; }
.escolha-wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.escolha-wave i {
  width: 5px; height: 36px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleY(0.3); transform-origin: center;
  animation: onda-lenta 2.8s var(--ease-out) infinite alternate;
}
.escolha-wave i:nth-child(2) { animation-delay: 280ms; }
.escolha-wave i:nth-child(3) { animation-delay: 560ms; }
.escolha-wave i:nth-child(4) { animation-delay: 840ms; }
.escolha-wave i:nth-child(5) { animation-delay: 1120ms; }
@keyframes onda-lenta { from { transform: scaleY(0.22); } to { transform: scaleY(0.9); } }

/* entrada: cascata com mola, uma porta por vez */
#v-hoje.is-active .escolha { animation: rise 620ms var(--spring-soft) both; }
#v-hoje.is-active .escolha:nth-child(1) { animation-delay: 60ms; }
#v-hoje.is-active .escolha:nth-child(2) { animation-delay: 170ms; }
#v-hoje.is-active .escolha:nth-child(3) { animation-delay: 280ms; }
#v-hoje.is-active .revisao-sussurro { animation: rise 620ms var(--spring-soft) 430ms both; }

/* o sussurro da revisão — presente, jamais gritando */
.revisao-sussurro {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: fit-content; margin: 24px auto 0; padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
  font-size: var(--fs-13); font-weight: 600; color: var(--ink-2);
  transition: transform var(--t-spring) var(--spring), color var(--t-fast) var(--ease-out);
}
.revisao-sussurro b { color: var(--sky-ink); font-weight: 700; }
.revisao-sussurro:hover { color: var(--ink); transform: translateY(-2px); }
.revisao-sussurro svg { opacity: 0.55; margin-left: 2px; }
.sussurro-sep { color: var(--border-strong); }
/* no celular o sussurro fica numa linha só: some o trecho das fontes */
@media (max-width: 899px) {
  .sussurro-sep, .revisao-sussurro #due-sub { display: none; }
}

/* Desktop: tríptico de painéis altos */
@media (min-width: 900px) {
  #v-hoje .view-head h1 { font-size: var(--fs-56); letter-spacing: -0.04em; }
  .escolhas { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
  .escolha {
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    min-height: clamp(320px, 46vh, 430px); padding: 26px;
  }
  .escolha-orn { align-self: flex-end; }
  .escolha-txt { margin-top: auto; flex: none; gap: 8px; }
  .escolha-rotulo { font-size: var(--fs-44); }
  .escolha-sub { font-size: var(--fs-14); }
  .escolha-seta { position: absolute; right: 24px; bottom: 28px; opacity: 0; }
  .revisao-sussurro { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .escolha-caret { animation: none; }
  .escolha-wave i { animation: none; transform: scaleY(0.6); }
  #v-hoje.is-active .escolha,
  #v-hoje.is-active .revisao-sussurro { animation: none; }
}

/* ============================================================
   v2.5 — Fontes opcionais em tudo.
   O vínculo é um gesto, não um formulário: um ícone de corrente,
   uma paleta de busca, e três superfícies que respiram sem fonte.
   ============================================================ */

/* ---------- Vínculo (o gesto de conectar a uma fonte) ---------- */
.vinculo {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-pill);
  border: 1.5px dashed var(--border-strong);
  color: var(--ink-2); background: transparent;
  padding: 9px 15px; min-height: 40px;
  font-size: var(--fs-13); font-weight: 600;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring);
}
.vinculo:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.vinculo:active { transform: scale(0.97); }
.vinculo.is-on {
  border-style: solid; border-color: var(--border);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.vinculo .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.vinculo-opc {
  font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-2);
}
.vinculo.is-on .vinculo-opc { display: none; }

/* variante ícone: um círculo discreto no canto — vira pill quando vinculada */
.vinculo--icone { width: 42px; padding: 0; justify-content: center; }
.vinculo--icone.is-on { width: auto; padding: 0 14px 0 12px; }
.head-acao { position: absolute; top: 4px; right: 0; }
#v-recall { position: relative; }

/* ---------- Paleta de fontes (busca com sugestões) ---------- */
dialog#dlg-fontes {
  border: 0; padding: 0; background: transparent;
  width: min(560px, calc(100vw - 24px));
  margin: 11vh auto auto;
}
dialog#dlg-fontes::backdrop {
  background: rgba(24, 29, 31, 0.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.paleta {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float), var(--inset-glass);
  overflow: hidden;
  animation: paleta-pousar 460ms var(--spring-soft) both;
}
@keyframes paleta-pousar {
  from { opacity: 0; transform: translateY(-14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.paleta-busca {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  color: var(--ink-2);
}
.paleta-busca input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 600 var(--fs-16)/1.4 var(--font-ui); color: var(--ink);
  caret-color: var(--sky-ink);
}
.paleta-busca input::placeholder { color: var(--ink-2); }
.paleta-kbd, .paleta-dica kbd {
  font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2);
  padding: 4px 7px; border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 7px; background: var(--surface);
}
.paleta-lista { max-height: min(320px, 44vh); overflow: auto; padding: 8px; }
.paleta-item {
  display: flex; width: 100%; align-items: center; gap: 12px;
  text-align: left; padding: 12px 12px; border-radius: 12px;
  font-size: var(--fs-14); font-weight: 600; color: var(--ink);
}
.paleta-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot--oco { background: transparent !important; border: 2px solid var(--border-strong); }
.paleta-item .p-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item .p-autor {
  margin-left: auto; flex: none; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-12); font-weight: 550; color: var(--ink-2);
}
.paleta-item.is-ativa { background: var(--surface-2); }
.paleta-item.is-ativa .p-nome { color: var(--ink); }
.paleta-item.is-atual .p-autor::after { content: " · atual"; color: var(--sky-ink); font-weight: 700; }
.paleta-vazia { padding: 22px 16px 18px; color: var(--ink-2); font-size: var(--fs-13); }
.paleta-vazia b { color: var(--ink); }
.paleta-pe {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--border);
}
.paleta-dica { font-size: var(--fs-12); font-weight: 550; color: var(--ink-2); }
.paleta-nova {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13); font-weight: 700; color: var(--sky-ink);
  padding: 8px 10px; border-radius: 10px; min-height: 40px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.paleta-nova:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 899px) {
  dialog#dlg-fontes { margin-top: 7vh; }
  .paleta-dica { display: none; }
}

/* dlg-bloco e dlg-cartao herdam a base do dlg-fonte (antes viviam da borda default do navegador) */
dialog#dlg-bloco, dialog#dlg-cartao { border: 0; padding: 0; background: transparent; width: min(440px, calc(100vw - 28px)); margin: auto; }
dialog#dlg-bloco::backdrop, dialog#dlg-cartao::backdrop { background: rgba(24, 29, 31, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- A folha (tela de escrita) ---------- */
.esc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.esc-acoes { display: flex; align-items: center; gap: 10px; }
.btn-slim { min-height: 42px; padding: 10px 20px; }
.folha {
  max-width: 720px; margin: 10px auto 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 34px 30px 40px;
}
.esc-titulo {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--font-display);
  font-size: var(--fs-28); font-weight: 700; letter-spacing: var(--track-display);
  line-height: 1.12;
  color: var(--ink); caret-color: var(--sky-ink);
  padding: 0 0 6px;
}
.esc-titulo::placeholder { color: color-mix(in srgb, var(--ink) 24%, transparent); }
.esc-corpo {
  min-height: 46vh;
  font-size: var(--fs-16); line-height: 1.75;
  padding: 10px 0 90px;
  caret-color: var(--sky-ink);
}
.esc-corpo:focus { outline: none; }
.esc-pe { text-align: center; font-size: var(--fs-12); font-weight: 550; color: var(--ink-2); margin-top: 6px; }
.esc-pe kbd { font: 650 var(--fs-11)/1 var(--font-ui); padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 6px; }
@media (min-width: 900px) {
  .folha { margin-top: 26px; }
  .esc-titulo { font-size: var(--fs-34); }
}

/* ---------- Recall em modo gravador (a porta Gravar) ---------- */
.so-gravador { display: none; }
#v-recall.modo-gravador .back-btn.so-gravador { display: inline-flex; }
#v-recall.modo-gravador .head-acao.so-gravador { display: inline-flex; position: absolute; }
#v-recall.modo-gravador .seg { display: none !important; }
#v-recall.modo-gravador #mode-falar .card {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
#v-recall.modo-gravador .rec-stage { padding: 48px 0 26px; gap: 22px; }
#v-recall.modo-gravador .mic-btn { width: 116px; height: 116px; }
#v-recall.modo-gravador .mic-btn svg { width: 38px; height: 38px; }
#v-recall.modo-gravador .mic-btn:not(.is-rec)::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  animation: respira 3.4s var(--ease-out) infinite;
}
@keyframes respira {
  0% { transform: scale(1); opacity: 0.85; }
  60% { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(1.1); opacity: 0; }
}
#v-recall.modo-gravador .rec-hint { font-size: var(--fs-14); }
#v-recall.modo-gravador #skip-recall { display: none; }
#v-recall.modo-gravador .rec-stage:not(.is-rec-live) .waveform { visibility: hidden; }
#v-recall.modo-gravador #finish-voice { display: block; max-width: 420px; margin-inline: auto; }

/* ---------- Nota solta (ensaio) ---------- */
.tag--livre {
  border: 1.5px dashed var(--border-strong);
  color: var(--ink-2); background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .paleta { animation: none; }
  #v-recall.modo-gravador .mic-btn:not(.is-rec)::after { animation: none; opacity: 0.4; }
}

/* ============================================================
   v2.7 — Fonte por dentro (cards + três ícones) e Ajustes com seções
   ============================================================ */

/* cabeçalho da fonte: nome à esquerda, três gestos à direita */
.fonte-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.fonte-titulo {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.02em; font-size: var(--fs-23);
}
@media (min-width: 900px) { .fonte-titulo { font-size: var(--fs-28); } }
.fonte-acoes { display: flex; gap: 8px; flex: none; padding-top: 4px; }
/* cinco gestos não cabem em 375px: no celular eles envolvem */
@media (max-width: 640px) {
  .fonte-head { flex-wrap: wrap; }
  .fonte-acoes { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
}
.acao-icone {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring);
}
.acao-icone:hover { color: var(--ink); transform: translateY(-2px); }
.acao-icone:active { transform: scale(0.92); }
/* o primeiro gesto (Focar) é o principal: sólido, como o botão preto da home */
.acao-icone:first-child { background: var(--btn-ink); border-color: transparent; color: var(--canvas); }
.acao-icone:first-child:hover { color: var(--canvas); }

/* cartões da fonte: perguntas em grade, tocáveis para editar */
.fonte-cards { display: grid; gap: 8px; }
.fonte-cards .mini-card {
  margin: 0; text-align: left; width: 100%;
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.fonte-cards .mini-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.fonte-cards .mini-card:active { transform: scale(0.99); }
.fonte-cards .mini-card:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.fonte-cards-vazio { margin: 0; }
@media (min-width: 900px) {
  .fonte-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ajustes: navegação lateral por seções ---------- */
.ajustes-layout { display: flex; flex-direction: column; gap: 16px; }
.ajustes-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.ajustes-nav button {
  flex: none; padding: 10px 16px; min-height: 42px;
  border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 700; color: var(--ink-2);
  border: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ajustes-nav button:hover { color: var(--ink); }
.ajustes-nav button[aria-current="true"] { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-card); }
.ajustes-conteudo { min-width: 0; }
.aj-painel { animation: rise 420ms var(--spring-soft) both; }

@media (min-width: 900px) {
  .ajustes-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
  .ajustes-nav { flex-direction: column; gap: 2px; overflow: visible; position: sticky; top: 24px; }
  .ajustes-nav button { text-align: left; border-radius: 12px; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .aj-painel { animation: none; }
}

/* ============================================================
   v2.8 — Preparar sessão: a pergunta é a tela
   Sem card, sem formulário: kicker, pergunta gigante, blocos
   quietos e um só botão. O vínculo é o ícone no canto, como
   na folha e no gravador.
   ============================================================ */
.prep { max-width: 680px; margin: 14px auto 0; }
.prep > .kicker { margin-bottom: 2px; }
.prep-assunto {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--font-display);
  font-size: var(--fs-28); font-weight: 600; letter-spacing: -0.028em;
  color: var(--ink); caret-color: var(--sky-ink);
  padding: 10px 0 6px;
}
.prep-assunto::placeholder { color: color-mix(in srgb, var(--ink) 24%, transparent); }
.prep .bloco-row { margin-top: 22px; }
.prep-cta { margin-top: 28px; }
@media (min-width: 900px) {
  .prep { margin-top: 40px; }
  .prep-assunto { font-size: var(--fs-34); }
}
/* entrada em cascata: pergunta primeiro, o resto respira atrás */
#v-preparar.is-active .prep > * { animation: rise 520ms var(--spring-soft) both; }
#v-preparar.is-active .prep > *:nth-child(3) { animation-delay: 70ms; }
#v-preparar.is-active .prep > *:nth-child(4) { animation-delay: 140ms; }
#v-preparar.is-active .prep > *:nth-child(5) { animation-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  #v-preparar.is-active .prep > * { animation: none; }
}

/* ============================================================
   v2.9 — Supertags, mapa local da fonte e conexões sugeridas
   ============================================================ */

/* hashtag inline (Tana-like): pill azul viva no editor E na leitura */
.md-tag {
  display: inline-block; padding: 0 7px 1px; border-radius: 8px;
  font-size: 0.86em; font-weight: 700;
  color: var(--sky-ink);
  background: color-mix(in srgb, var(--sky) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 34%, transparent);
}
.editor .md-tag { display: inline; padding: 0; font-size: inherit; font-weight: inherit; border-radius: 3px; box-shadow: none; }

/* cluster de ações no topo da nota (sparkle + lápis) */
.head-acoes { position: absolute; top: 4px; right: 0; display: flex; gap: 8px; }
/* o primeiro cartão da direita precisa passar LONGE dos ícones do topo */
#lib-nota .nota-grid { margin-top: 26px; }
#lib-ent #ent-def-card { margin-top: 26px; }
#nota-ia.is-busy svg { animation: girar 1.1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* mapa local da fonte */
.grafo-local svg { display: block; width: 100%; height: auto; }
.gl-edge { stroke: var(--border-strong); stroke-width: 1; }
.gl-edge--forte { stroke: var(--border-strong); stroke-width: 1.6; }
.gl-node { cursor: pointer; }
.gl-node circle { transition: transform var(--t-spring) var(--spring); transform-origin: center; transform-box: fill-box; }
.gl-node:hover circle, .gl-node:focus-visible circle { transform: scale(1.25); }
.gl-node:focus-visible { outline: none; }
.gl-node:focus-visible text { fill: var(--sky-ink); }
.gl-node text {
  text-anchor: middle; font: 600 10.5px var(--font-ui);
  fill: var(--ink-2); pointer-events: none;
}
.gl-node--fonte { cursor: default; }
.gl-node--fonte text { font-weight: 750; fill: var(--ink); font-size: 11.5px; }
.gl-node--nota circle { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.6; }
.gl-node--conceito circle { fill: var(--sky); }
.gl-node--autor circle { fill: var(--coral); }
.gl-node--ideia circle { fill: var(--m-lilas-dot); }

/* conexões sugeridas pela IA */
.sug-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.sug-item:first-child { border-top: 0; padding-top: 2px; }
.sug-motivo { flex: 1; min-width: 160px; font-size: var(--fs-13); color: var(--ink-2); }
.sug-aceitar { flex: none; }

@media (prefers-reduced-motion: reduce) {
  #nota-ia.is-busy svg { animation: none; }
  .gl-node circle { transition: none; }
}

/* ============================================================
   v2.10 — Fonte em três seções + selo de origem (IA × mão)
   ============================================================ */
.seg-fonte { grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; }

/* origem da informação: sparkle = IA, mãozinha = você */
.origem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 7px; flex: none;
}
.origem--ia {
  color: var(--sky-ink);
  background: color-mix(in srgb, var(--sky) 17%, transparent);
}
.origem--mao {
  color: var(--ink-2);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
#nota-meta, #ent-origem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-item .meta .origem { margin-right: -2px; }

/* ============================================================
   v2.12 — Escrita fantástica: modo foco, typewriter e atalhos
   (iA Writer / Typora / Mark Text, adaptados ao editor vivo)
   ============================================================ */
/* modo foco: só a linha do caret em tinta plena (opt-in, botão na folha) */
#v-escrever.folha-foco .esc-corpo .md-line { color: var(--ink-2); transition: color 240ms var(--ease-out); }
#v-escrever.folha-foco .esc-corpo .md-line.is-atual { color: var(--ink); }
.esc-pe b, .esc-pe i { font-size: var(--fs-12); }
.esc-pe mark { padding: 0 3px; }
@media (prefers-reduced-motion: reduce) {
  #v-escrever.folha-foco .esc-corpo .md-line { transition: none; }
}

/* ============================================================
   v2.13 — Curadoria de lacunas: pilha kanban + o poço
   Ao levantar um card, o poço ACORDA: o alvo aparece quando a
   intenção existe, não antes. Guardar é um gesto físico.
   ============================================================ */
.sussurros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.sussurros .revisao-sussurro { margin: 0; }

/* --- a pilha de lacunas (kanban) --- */
.gap-pilha { display: grid; gap: 10px; }
.gap-card {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: grab;
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.gap-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.gap-card:active { cursor: grabbing; }
.gap-card.is-arrastando { opacity: 0.42; transform: scale(0.98) rotate(-1.2deg); }
.gap-card .ico { flex: none; color: var(--m-ambar-ink); margin-top: 1px; }
.gap-card .gap-txt { flex: 1; min-width: 0; font-size: var(--fs-14); line-height: 1.5; }
.gap-card .gap-txt strong { display: block; margin-bottom: 2px; }
.gap-guardar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--surface-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring);
}
.gap-guardar:hover { background: var(--sky); color: #fff; transform: scale(1.08); }
@keyframes gap-caindo {
  to { opacity: 0; transform: translateY(26px) scale(0.82); }
}
.gap-card.is-caindo { animation: gap-caindo 420ms var(--ease-out) forwards; pointer-events: none; }
.gaps-vazio { margin: 2px 0 0; }

/* --- o poço --- */
.poco {
  display: flex; align-items: center; gap: 16px; width: 100%;
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg);
  border: 2px dashed var(--border-strong); background: transparent;
  text-align: left; color: var(--ink-2);
  transition: border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out),
              transform var(--t-spring) var(--spring), box-shadow var(--t-med) var(--ease-out);
}
.poco-anel {
  position: relative; flex: none;
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.9), rgba(199, 231, 247, 0.5));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 18px rgba(47, 67, 150, 0.14),
              0 6px 14px -8px rgba(30, 49, 214, 0.38);
  color: var(--sky-ink);
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-med) var(--ease-out);
}
.poco-n {
  position: absolute; top: -4px; right: -4px;
  min-width: 23px; height: 23px; padding: 0 6px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-ink); color: var(--canvas);
  font-size: var(--fs-12); font-weight: 750;
  animation: rise 420ms var(--spring-soft) both;
}
.poco-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.poco-txt b { font-size: var(--fs-14); color: var(--ink); }
.poco-txt span { font-size: var(--fs-12); }
/* acorda quando um card é levantado */
.gaps-card.arrastando .poco {
  border-color: var(--sky); background: color-mix(in srgb, var(--sky) 9%, transparent);
  transform: translateY(-2px);
}
.gaps-card.arrastando .poco-anel { transform: scale(1.06); }
.poco.is-alvo {
  border-color: var(--sky-ink); border-style: solid;
  background: color-mix(in srgb, var(--sky) 16%, transparent);
  box-shadow: 0 14px 30px -14px rgba(47, 67, 150, 0.45);
  transform: translateY(-3px) scale(1.01);
}
.poco.is-alvo .poco-anel { transform: scale(1.14); box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 0 0 8px rgba(47, 67, 150, 0.12); }
.poco.tem-itens { border-style: solid; border-color: var(--border); cursor: pointer; }
.poco.tem-itens:hover { border-color: var(--ink); }
@keyframes poco-onda {
  0% { box-shadow: 0 0 0 0 rgba(47, 67, 150, 0.28); }
  100% { box-shadow: 0 0 0 22px rgba(47, 67, 150, 0); }
}
.poco-anel.is-recebendo { animation: poco-onda 620ms var(--ease-out); }

/* --- tela A investigar --- */
.inv-lista { display: grid; gap: 12px; }
@media (min-width: 1100px) { .inv-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inv-card { padding: 16px 18px; }
.inv-card .inv-titulo { font-size: var(--fs-16); font-weight: 750; letter-spacing: -0.01em; }
.inv-card .inv-detalhe { font-size: var(--fs-14); color: var(--ink-2); line-height: 1.55; margin-top: 4px; }
.inv-card .inv-origem { font-size: var(--fs-12); color: var(--ink-2); margin-top: 10px; }
.inv-acoes { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.inv-acoes .btn { width: auto; min-height: 42px; padding: 0 16px; font-size: var(--fs-13); }
.inv-vazio { text-align: left; }

/* --- exclusão: sóbria, nunca decorativa --- */
.acao-perigo:hover { color: var(--danger); background: var(--danger-soft); }
.btn-perigo { color: var(--danger); }
.btn-perigo:hover { background: var(--danger-soft); }
.btn-perigo-solido { background: var(--danger); color: #fff; width: auto; padding: 0 20px; min-height: 46px; }
.btn-perigo-solido:hover { filter: brightness(1.08); }
dialog#dlg-ent, dialog#dlg-confirmar { border: 0; padding: 0; background: transparent; width: min(440px, calc(100vw - 28px)); margin: auto; }
dialog#dlg-ent::backdrop, dialog#dlg-confirmar::backdrop { background: rgba(24, 29, 31, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dlg-panel--curto { padding: 24px; }
.cf-titulo { font-family: var(--font-display); font-size: var(--fs-23); font-weight: 600; letter-spacing: -0.02em; }
.cf-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.cf-acoes .btn { width: auto; min-height: 46px; padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .gap-card, .poco, .poco-anel { transition: none; }
  .gap-card.is-caindo { animation: none; opacity: 0; }
  .poco-anel.is-recebendo { animation: none; }
}

/* ============================================================
   v2.14 — Anotar: um ícone, um popup (padrão Supernotes)
   O cartão flutua sobre a tela desfocada; nada de bloco fixo.
   ============================================================ */
dialog#dlg-anota { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 24px)); margin: auto; }
dialog#dlg-anota::backdrop { background: rgba(24, 29, 31, 0.34); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pop-nota {
  position: relative;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid var(--glass-border); border-radius: 22px;
  box-shadow: var(--shadow-float), var(--inset-glass);
  padding: 22px 24px 18px;
  animation: pop-nascer 300ms var(--spring-soft) both;
}
@keyframes pop-nascer {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.pop-fechar {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pop-fechar:hover { background: rgba(24, 29, 31, 0.07); color: var(--ink); }
.pop-titulo {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--font-display);
  font-size: var(--fs-23); font-weight: 600; letter-spacing: -0.022em;
  color: var(--ink); caret-color: var(--sky-ink); padding-right: 34px;
}
.pop-titulo::placeholder { color: color-mix(in srgb, var(--ink) 26%, transparent); }
.pop-migalha { font-size: var(--fs-12); font-weight: 600; color: var(--sky-ink); margin: 3px 0 12px; }
.pop-corpo {
  min-height: 132px; max-height: 42vh; overflow: auto;
  font-size: var(--fs-15, var(--fs-14)); line-height: 1.65; caret-color: var(--sky-ink);
}
.pop-corpo:focus { outline: none; }
.pop-corpo.is-empty::before { inset: 0; }
.pop-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pop-dica { font-size: var(--fs-12); font-weight: 550; color: var(--ink-2); }
.pop-dica kbd { font: 650 var(--fs-11)/1 var(--font-ui); padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 6px; }
.pop-pe .btn { flex: none; width: auto; padding: 0 22px; }
.pop-pe .btn:disabled { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .pop-nota { animation: none; } }

/* ============================================================
   v2.15 — Editar no lugar (padrão Supernotes)
   O lápis aparece no hover; o card vira editor sem sair da lista.
   ============================================================ */
.note-item { position: relative; cursor: pointer; }
/* O foco de setinha veste a COR DO CARD (medido no Supernotes 3.2.4
   via CDP: no :focus-visible a borda-base de 1px apaga e acende um anel
   de 2px na tinta do card a 33%, transição box-shadow 0.2s — a mesma
   roupa do .is-alvo, definida lá embaixo junto dele). */
.note-item:focus-visible { outline: none; border-color: transparent; }
.note-lapis {
  position: absolute; top: 6px; right: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px -3px rgba(24, 29, 31, 0.22);
  opacity: 0; transform: scale(0.88);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring),
              background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.note-item:hover .note-lapis,
.note-item:focus-within .note-lapis { opacity: 1; transform: none; }
.note-lapis:hover { background: var(--ink); color: var(--canvas); border-color: transparent; box-shadow: 0 6px 14px -4px rgba(24, 29, 31, 0.4); transform: scale(1.06); }
.note-lapis:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--sky); outline-offset: 2px; }
.note-lapis:active { transform: scale(0.94); }
/* só em aparelhos SEM hover (toque) o lápis fica fixo — no desktop ele
   aparece ao passar o cursor, como no Supernotes */
@media (hover: none) { .note-lapis { opacity: 1; transform: none; } }

/* o card em edição */
.note-item.is-editando {
  cursor: default; padding: 14px;
  background: var(--note-bg); border: 1px solid var(--sky);
  border-radius: 16px; box-shadow: var(--shadow-float);
  /* O CM mede texto no instante em que nasce. Transformar o ancestral nesse
     momento deixa o hit-test do Safari preso à escala antiga. Escrita entra
     já na geometria final; a borda/sombra ainda dão a mudança de estado. */
  animation: none;
}
.note-grid .note-item.is-editando { transform: none; }
/* A lei do Supernotes (medida no app em out/2026): CRIAR = EDITAR = LER.
   Lá o composer veste exatamente a tipografia do card (22/700 no título,
   15/400 no corpo, nas três superfícies). Aqui o editor compartilhado
   veste a LEITURA da casa: título de card (display 19/700) e corpo 16. */
.ni-titulo {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--font-display);
  font-size: var(--fs-19); font-weight: 700; letter-spacing: -0.015em; line-height: 1.22;
  color: var(--ink); caret-color: var(--sky-ink); padding: 0 0 4px;
}
.ni-corpo {
  min-height: 96px; max-height: 40vh; overflow: auto;
  font-size: var(--fs-16); line-height: 1.5; caret-color: var(--sky-ink);
}
.ni-corpo:focus { outline: none; }
.ni-corpo.is-empty::before { inset: 0; }
/* o rodapé QUEBRA LINHA em card estreito (coluna do masonry, filho no popup):
   sem o wrap, contador+botões estouravam a borda — o "vazamento" do v227 */
.ni-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; row-gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ni-pe .ni-conta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ni-pe .ni-acao { flex-shrink: 0; }
.ni-acao {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
  padding: 7px 10px; border-radius: 9px; min-height: 38px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ni-acao:hover { background: var(--surface-2); color: var(--ink); }
.ni-acao kbd { font: 650 var(--fs-11)/1 var(--font-ui); padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 5px; }
.ni-ok { color: var(--sky-ink); }
.ni-ok:hover { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .note-item.is-editando { animation: none; } }

/* ============================================================
   v2.16 — O card como popup, comentários e o Quadro
   ============================================================ */

/* ---------- popup do card (quick look) ---------- */
/* v240 (lição Supernotes): o cartão ANCORA NO TOPO — não flutua no centro.
   Com ele aberto a página congela (html.trava-rolagem) e todo scroll rola
   o CONTEÚDO do cartão: corpo longo, filhas, painéis. */
dialog#dlg-card { border: 0; padding: 0; background: transparent; width: min(720px, calc(100vw - 24px)); margin: 28px auto auto; }

/* ---------- filhas abertas no popup (padrão Supernotes) ---------- */
.pc-filhas { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line, rgba(35, 33, 26, 0.14)); }
.pcf-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pcf-conta {
  font-family: var(--font-mono); font-size: var(--fs-11, 11.5px);
  text-transform: uppercase; letter-spacing: var(--track-mono, 0.08em); color: var(--ink-2);
}
.pcf-compor { margin-bottom: 12px; }
.pcf-compor input {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 0;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink); font: inherit; font-size: 13.5px;
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pcf-compor input::placeholder { color: var(--ink-3); }
.pcf-compor input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--sky-soft); }
.pcf-grade .note-item { box-shadow: var(--shadow-card); }
/* corpo da nota-mãe no header do noteboard */
.fonte-corpo { max-width: 640px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.fonte-corpo p { margin: 0 0 6px; }

/* o convite forte para a tela cheia (o "Abrir no Noteboard" deles) */
.pc-noteboard {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--sky-soft); color: var(--sky-ink); cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pc-noteboard:hover { background: var(--sky); color: var(--chrome-ink, #f2ecdc); transform: translateY(-1px); }

.pc-volta {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; line-height: 1; padding-bottom: 2px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink);
  cursor: pointer; transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pc-volta:hover { background: var(--sky-soft); transform: translateX(-2px); }
/* ‹ › do popup (v209): caminham pelo fluxo visível sem fechar o cartão,
   como as setas do overlay do Supernotes */
.pc-nav { font-size: 17px; font-weight: 700; line-height: 1; padding-bottom: 2px; }
.pc-nav-grupo { display: flex; gap: 2px; }
.pc-icone:disabled { opacity: 0.28; cursor: default; }
.pc-icone:disabled:hover { background: none; color: var(--ink-2); }
dialog#dlg-card::backdrop { background: rgba(24, 29, 31, 0.34); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pop-card {
  position: relative;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid var(--glass-border); border-radius: 22px;
  box-shadow: var(--shadow-float), var(--inset-glass);
  padding: 22px 24px 16px;
  /* ancorado no topo, o cartão pode ser ALTO: as filhas rolam dentro dele */
  max-height: calc(100dvh - 88px); overflow: auto; overscroll-behavior: contain;
  animation: pop-nascer 300ms var(--spring-soft) both;
}
/* v234: só o essencial à vista — um CLUSTER discreto (‹ › ✎, e o + em
   edição) no canto do cartão; o resto mora no menu do +. O cluster tem
   TAMANHO FIXO, então o recuo do título é fixo também — sem medição. */
.pc-acoes { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 2px; }
.pc-icone {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pc-icone:hover { background: rgba(24, 29, 31, 0.07); color: var(--ink); }
.pc-icone.is-busy svg { animation: girar 1.1s linear infinite; }
.pc-perigo:hover { background: var(--danger-soft); color: var(--danger); }
.pc-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-23); font-weight: 600; letter-spacing: -0.022em;
  color: var(--ink); padding-right: 0;
}
/* o cluster (‹ › ✎) é contornado por FLOAT: só as primeiras linhas do
   título desviam; as demais recuperam a largura inteira (padding recuava
   o bloco todo — título comprido perdia um terço da tela no celular) */
.pc-titulo::before { content: ''; float: right; width: 116px; height: 32px; }
.pc-migalha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); margin: 6px 0 14px; }
.pc-corpo { font-size: var(--fs-16); line-height: 1.6; }
.pc-titulo-edit {
  width: 100%; border: 0; background: none; outline: none;
  /* MESMA cara do título de leitura: a edição é in place, sem salto */
  font-family: var(--font-display);
  font-size: var(--fs-23); font-weight: 600; letter-spacing: -0.022em;
  color: var(--ink); caret-color: var(--sky-ink);
  padding: 0 148px 6px 0;
}
/* nota sem título nasce com o convite esmaecido (mesmo tom do escrever) */
.pc-titulo-edit::placeholder { color: color-mix(in srgb, var(--ink) 24%, transparent); }
.pc-conta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pc-editor { min-height: 160px; max-height: 46vh; overflow: auto; font-size: var(--fs-14); line-height: 1.65; caret-color: var(--sky-ink); }
.pc-editor:focus { outline: none; }
.pc-editor.is-empty::before { inset: 0; }
.pc-edicao-pe { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* rodapé de ícones: entidades · cartões · conexões · comentários */
.pc-pe { display: flex; gap: 6px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.pc-aba {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill); min-height: 38px;
  font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pc-aba:hover { background: var(--surface-2); color: var(--ink); }
.pc-aba[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-card); }
.pc-painel { margin-top: 12px; animation: rise 320ms var(--spring-soft) both; }
.pc-painel-t { font-size: var(--fs-12); font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }

/* comentários */
.com-lista { display: grid; gap: 8px; margin-bottom: 12px; }
.com-item { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.com-txt { margin: 0; font-size: var(--fs-14); line-height: 1.55; }
.com-quando { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: var(--fs-11); color: var(--ink-2); }
.com-del { width: 22px; height: 22px; border-radius: 50%; color: var(--ink-2); font-size: 15px; line-height: 1; }
.com-del:hover { background: var(--danger-soft); color: var(--danger); }
.com-novo { display: flex; gap: 8px; }
.com-novo input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); font: 600 var(--fs-14) var(--font-ui); color: var(--ink);
}
.com-novo input:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }
.com-novo .btn { flex: none; width: auto; padding: 0 18px; }

/* ---------- Quadro (arrastar notas no espaço) ---------- */
.quadro {
  position: relative; height: min(66vh, 620px); border-radius: var(--r-lg);
  background-color: var(--surface-2);
  background-image: radial-gradient(circle at 1px 1px, rgba(24, 29, 31, 0.10) 1px, transparent 0);
  background-size: 22px 22px;
  overflow: hidden; touch-action: none; cursor: grab;
  overscroll-behavior: contain;
}
.quadro.is-navegando { cursor: grabbing; }
.quadro.is-selecionando, .quadro.is-ligando { cursor: crosshair; }
.quadro-mundo { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.q-conexoes { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.q-aresta, .q-aresta-hit, .q-ligacao-rascunho { fill: none; vector-effect: non-scaling-stroke; }
.q-aresta {
  stroke: color-mix(in srgb, var(--ink-2) 54%, var(--surface)); stroke-width: 1.7;
  pointer-events: none; transition: stroke var(--t-fast) var(--ease-out), stroke-width var(--t-fast) var(--ease-out);
}
.q-aresta + .q-aresta-hit { stroke: rgba(24, 29, 31, 0.001); stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.q-aresta.is-selecionada { stroke: var(--sky-ink); stroke-width: 2.8; }
.q-conexoes marker path { fill: color-mix(in srgb, var(--ink-2) 70%, var(--surface)); }
.q-ligacao-rascunho {
  stroke: var(--sky-ink); stroke-width: 2.4; stroke-dasharray: 7 5; opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out); pointer-events: none;
}
.q-ligacao-rascunho.is-visivel { opacity: 1; }
.q-nota {
  position: absolute; width: 210px; cursor: grab; padding: 12px 13px;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-card);
  cursor: grab; user-select: none;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.q-nota:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); }
.q-nota:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.q-nota.is-selecionada { border-color: var(--sky); box-shadow: var(--shadow-card), 0 0 0 2px var(--sky-soft); }
.q-nota.is-selecionada:hover { transform: none; box-shadow: var(--shadow-float), 0 0 0 2px var(--sky-soft); }
.q-nota.is-alvo-ligacao { border-color: var(--sky); box-shadow: var(--shadow-float), 0 0 0 4px var(--sky-soft); transform: scale(1.02); }
.q-nota.is-movendo { cursor: grabbing; box-shadow: 0 18px 34px -12px rgba(24, 29, 31, 0.42); transform: scale(1.03) rotate(-0.8deg); transition: none; }
.q-nota .q-t { font-size: var(--fs-13); font-weight: 750; line-height: 1.35; }
.q-nota .q-s { font-size: var(--fs-12); color: var(--ink-2); line-height: 1.45; }
.q-nota .q-pe { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--fs-11); color: var(--ink-2); }
.q-nota.m-rosa  { border-top: 3px solid var(--m-rosa-dot); }
.q-nota.m-azul  { border-top: 3px solid var(--m-azul-dot); }
.q-nota.m-verde { border-top: 3px solid var(--m-verde-dot); }
.q-nota.m-ambar { border-top: 3px solid var(--m-ambar-dot); }
.q-nota.m-lilas { border-top: 3px solid var(--m-lilas-dot); }
.q-conectar {
  position: absolute; z-index: 3; right: -14px; top: 50%; transform: translateY(-50%) scale(0.78);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: var(--surface); background: var(--sky-ink); border: 3px solid var(--surface);
  box-shadow: 0 6px 16px -7px rgba(13, 106, 151, 0.7); opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring), background var(--t-fast) var(--ease-out);
}
.q-conectar::before { content: ''; position: absolute; inset: -9px; }
.q-nota.is-selecionada .q-conectar, .q-nota:focus-within .q-conectar { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.q-conectar:hover { background: var(--btn-ink); }
.q-marquee {
  position: absolute; z-index: 4; border: 1px solid var(--sky-ink); border-radius: 8px;
  background: color-mix(in srgb, var(--sky-soft) 66%, transparent); pointer-events: none;
}
.q-estado {
  position: absolute; left: 12px; bottom: 12px; z-index: 5; max-width: min(62%, 440px); margin: 0;
  padding: 7px 11px; border-radius: var(--r-pill); color: var(--ink-2); background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-card), var(--inset-glass);
  font-size: var(--fs-11); font-weight: 650; line-height: 1.35; pointer-events: none;
}
.seg-fonte { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .seg-fonte { grid-template-columns: repeat(2, 1fr); } }
@media (hover: none) { .q-nota.is-selecionada .q-conectar { width: 34px; height: 34px; right: -17px; } }
@media (max-width: 640px) {
  /* A barra de navegação ocupa a base no toque. A dica fica logo acima dela,
     sem encobrir o primeiro cartão nem disputar espaço com os controles. */
  .q-estado { bottom: 66px; max-width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .pop-card, .pc-painel { animation: none; } .q-nota, .q-conectar, .q-ligacao-rascunho { transition: none; } }

/* ============================================================
   v2.17 — Modos em menu, colunas e a barra de Fixados
   ============================================================ */

/* ---------- barra de controle da fonte ---------- */
.barra-modo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 16px; }
.barra-dir { flex-wrap: wrap; }
.menu-wrap { position: relative; }
.modo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-height: 42px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-14); font-weight: 700; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.modo-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.modo-btn--quieto { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); font-weight: 600; font-size: var(--fs-13); }
.modo-btn--quieto:hover { background: var(--surface); border-color: var(--border); color: var(--ink); }
.modo-ico { color: var(--sky-ink); }
.modo-chevron { opacity: 0.5; }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-dropdown);
  min-width: 208px; padding: 6px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: var(--shadow-float), var(--inset-glass);
  animation: rise 260ms var(--spring-soft) both;
}
.menu-pop--dir { left: auto; right: 0; }
.menu-pop button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; min-height: 40px;
  font-size: var(--fs-13); font-weight: 600; color: var(--ink); text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.menu-pop button:hover { background: var(--surface-2); }
.menu-pop button span { flex: 1; }
.menu-pop svg { color: var(--ink-2); }
.menu-check { width: 14px; height: 14px; flex: none; }
.menu-pop [aria-checked="true"] { color: var(--sky-ink); }
.menu-pop [aria-checked="true"] svg { color: var(--sky-ink); }
.menu-pop [aria-checked="true"] .menu-check {
  background: currentColor;
  -webkit-mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}
.col-ico { flex: none; width: 20px; font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.06em; color: var(--ink-2); }

/* colunas escolhidas pelo usuário (a partir de 900px) */
/* abaixo de 900px as colunas se desfazem: a lista volta a ser una,
   na ordem original (fatias sequenciais achatam certo) */
@media (max-width: 899.9px) {
  .mas-col { display: contents; }
}

/* ---------- Fixados ---------- */
.fx-toggle {
  position: fixed; top: 18px; right: 18px; z-index: var(--z-sticky);
  width: 44px; height: 44px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-card), var(--inset-glass);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.fx-toggle:hover { color: var(--ink); transform: translateY(-2px); }
.fx-n {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-ink); color: var(--canvas); font-size: var(--fs-11); font-weight: 750;
}
.fixados {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  width: 320px; max-width: 88vw; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border-left: 1px solid var(--glass-border);
  box-shadow: -18px 0 40px -24px rgba(24, 29, 31, 0.5);
  animation: fx-entrar 380ms var(--spring-soft) both;
  overflow: hidden;
}
@keyframes fx-entrar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.fixados.is-alvo { border-left-color: var(--sky); box-shadow: inset 3px 0 0 var(--sky), -18px 0 40px -24px rgba(47, 67, 150, 0.45); }
.fx-topo { display: flex; align-items: center; justify-content: space-between; }
.fx-titulo { font-family: var(--font-display); font-size: var(--fs-19); font-weight: 600; letter-spacing: -0.02em; }
.fx-lista { flex: 1; overflow: auto; display: grid; gap: 10px; align-content: start; }
.fx-item { position: relative; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.fx-abrir { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 34px 12px 13px; }
.fx-t { font-size: var(--fs-13); font-weight: 750; line-height: 1.35; }
.fx-s { font-size: var(--fs-12); color: var(--ink-2); line-height: 1.45; }
.fx-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.fx-tirar {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.fx-tirar:hover { background: var(--danger-soft); color: var(--danger); }
.fx-vazio, .fx-dica { font-size: var(--fs-12); color: var(--ink-2); line-height: 1.5; margin: 0; }
.fx-dica kbd { font: 650 var(--fs-11)/1 var(--font-ui); padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 5px; }
body.arrastando-nota .fixados { border-left-color: var(--sky); }

@media (min-width: 900px) {
  .fx-toggle { display: flex; }
  body.com-fixados .app-main { padding-right: 336px; }
  body.com-fixados .fx-toggle { display: none; }   /* o painel aberto já é o botão */
}
@media (max-width: 899px) {
  .fixados { width: 100%; max-width: 100%; }
  .barra-modo { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .fixados, .menu-pop { animation: none; } }

/* ============================================================
   v2.18 — Busca global e busca dentro dos Fixados
   ============================================================ */
dialog#dlg-busca { border: 0; padding: 0; background: transparent; width: min(620px, calc(100vw - 24px)); margin: 9vh auto auto; }
dialog#dlg-busca::backdrop { background: rgba(24, 29, 31, 0.34); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.busca-filtros { display: flex; gap: 5px; padding: 10px 14px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.busca-filtros button {
  flex: none; padding: 6px 12px; min-height: 34px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.busca-filtros button:hover { color: var(--ink); background: var(--surface-2); }
.busca-filtros button[aria-pressed="true"] { background: var(--btn-ink); color: var(--canvas); }
.busca-lista { max-height: min(52vh, 460px); }
.busca-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 12px;
  transition: background var(--t-fast) var(--ease-out);
}
.busca-item.is-ativa, .busca-item:hover { background: var(--surface-2); }
.bi-topo { display: flex; align-items: center; gap: 8px; }
.bi-tipo {
  font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2);
}
.bi-tipo--nota { background: var(--sky-soft); color: var(--sky-ink); }
.bi-tipo--cartao { background: var(--success-soft); color: var(--success); }
.bi-tipo--comentario { background: var(--mark); color: #7a5a12; }
.busca-item.is-ativa .bi-tipo, .busca-item:hover .bi-tipo { background: var(--surface); }
.bi-ctx { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-11); font-weight: 600; color: var(--ink-2); }
.bi-titulo { font-size: var(--fs-14); font-weight: 700; line-height: 1.35; }
.bi-trecho { font-size: var(--fs-12); color: var(--ink-2); line-height: 1.5; }
.busca-item mark { background: var(--mark); box-shadow: 0 0 0 2px var(--mark); border-radius: 2px; }

/* busca dentro do painel de fixados */
.fx-busca { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); }
.fx-busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 600 var(--fs-13) var(--font-ui); color: var(--ink); }
.fx-busca input::placeholder { color: var(--ink-2); }
.fx-limpar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.fx-limpar:hover { background: var(--surface-2); color: var(--ink); }
.fx-item--achado { border-style: dashed; cursor: grab; }
.fx-item--achado:active { cursor: grabbing; }
.fx-fixar:hover { background: var(--sky-soft); color: var(--sky-ink); }
.fx-fixar:disabled { opacity: 0.35; }
.fx-item mark { background: var(--mark); box-shadow: 0 0 0 2px var(--mark); border-radius: 2px; }

/* ============================================================
   v2.19 — Menu de contexto e notas redimensionáveis no Quadro
   ============================================================ */
.menu-ctx {
  position: fixed; z-index: var(--z-toast); min-width: 224px; padding: 6px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: var(--shadow-float), var(--inset-glass);
  animation: ctx-nascer 180ms var(--ease-out) both;
}
@keyframes ctx-nascer { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.menu-ctx button[role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 10px; min-height: 38px;
  font-size: var(--fs-13); font-weight: 600; color: var(--ink); text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.menu-ctx button[role="menuitem"] span { flex: 1; }
.menu-ctx button[role="menuitem"] svg { color: var(--ink-2); }
.menu-ctx button[role="menuitem"]:hover { background: var(--surface-2); }
.menu-ctx kbd { font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2); padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 5px; }
.ctx-perigo { color: var(--danger) !important; }
.ctx-perigo svg { color: var(--danger) !important; }
.ctx-perigo:hover { background: var(--danger-soft) !important; }
.ctx-sep { height: 1px; margin: 5px 8px; background: var(--border); }
.ctx-tam { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.ctx-tam span { flex: 1; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.ctx-tam button {
  width: 30px; height: 30px; border-radius: 9px;
  font-size: var(--fs-12); font-weight: 800; color: var(--ink-2);
  background: var(--surface-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ctx-tam button:hover { background: var(--btn-ink); color: var(--canvas); }

/* alça de redimensionar */
.q-resize {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px;
  cursor: ew-resize; opacity: 0; border-radius: 0 0 12px 0;
  background: linear-gradient(135deg, transparent 46%, var(--border-strong) 46%, var(--border-strong) 54%, transparent 54%,
                              transparent 66%, var(--border-strong) 66%, var(--border-strong) 74%, transparent 74%);
  transition: opacity var(--t-fast) var(--ease-out);
}
.q-nota:hover .q-resize, .q-nota:focus-within .q-resize { opacity: 1; }
.q-nota.is-expandida { min-height: 240px; }
.q-nota.is-expandida .q-t { flex-shrink: 0; }
.q-leitura { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; user-select: text; cursor: text; padding: 4px 8px 4px 2px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.q-leitura > :first-child { margin-top: 0; }
.q-leitura img { max-width: 100%; height: auto; }
.q-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.q-acoes button { border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); padding: 8px 4px; font: inherit; font-size: 11px; cursor: pointer; }
.q-acoes button:hover { background: var(--surface); color: var(--ink); }
.q-nota .q-pe { flex-shrink: 0; padding-right: 16px; }
.q-nota.is-expandida .q-resize { cursor: nwse-resize; }
.q-nota.is-movendo, .q-nota:hover { transform: none; }
.q-nota.is-redim { box-shadow: 0 0 0 2px var(--sky), var(--shadow-float); transition: none; }
@media (hover: none) { .q-resize { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-ctx { animation: none; } }


/* ---------- controles do canvas infinito ---------- */
.quadro-ctrl {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
}
.quadro-ctrl button {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: 750; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.quadro-ctrl button:hover { background: var(--surface); color: var(--ink); }
#q-zoom { min-width: 52px; font-variant-numeric: tabular-nums; }
#q-menos, #q-mais { font-size: var(--fs-16); font-weight: 700; }
.q-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }

/* ============================================================
   v2.21 — Modo imersivo: o canvas toma a tela
   ============================================================ */
.q-sair {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 36px; height: 36px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-card);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.q-sair:hover { color: var(--ink); transform: scale(1.06); }

body.imersivo { overflow: hidden; }
body.imersivo .tabbar,
body.imersivo .fx-toggle,
body.imersivo .fixados { display: none; }
body.imersivo .app-main { padding: 0; }
body.imersivo .quadro-card {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--surface-2); box-shadow: none;
  animation: imersivo-entrar 380ms var(--spring-soft) both;
}
@keyframes imersivo-entrar { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
body.imersivo .quadro-card > .card-head { display: none; }
body.imersivo .quadro { height: 100vh; height: 100dvh; border-radius: 0; }
body.imersivo .q-sair { display: flex; }
body.imersivo .quadro-ctrl { bottom: 20px; right: 20px; }
@media (prefers-reduced-motion: reduce) { body.imersivo .quadro-card { animation: none; } }

/* ============================================================
   v2.23 — Feed: notas expandidas por inteiro
   ============================================================ */
.barra-dir { display: flex; align-items: center; gap: 8px; }
.expandir-btn { gap: 7px; }
.expandir-btn[aria-pressed="true"] { background: var(--surface); border-color: var(--border); color: var(--ink); box-shadow: var(--shadow-card); }

/* a nota inteira dentro do card */
.note-full { font-size: var(--fs-14); line-height: 1.7; margin-top: 8px; }
.note-full p { margin: 0 0 10px; }
.note-full p:last-child { margin-bottom: 0; }
.note-full ul { margin: 0 0 10px; padding-left: 18px; }
.note-full li { margin-bottom: 5px; }
.note-full .md-h { font-weight: 750; margin: 12px 0 6px; }

/* no feed, a nota respira: card sólido mesmo na lista simples */
.note-item.is-expandida { padding: 18px; border-top: 0; }
#lib-notas .note-item.is-expandida,
#folder-notas .note-item.is-expandida,
#ent-notas .note-item.is-expandida,
#foco-colheita-lista .note-item.is-expandida {
  background: var(--note-bg); border: 1px solid var(--note-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.note-item.is-expandida .t { font-size: var(--fs-16); }
.note-item.is-expandida .meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* expandido pede medida de leitura: em coluna única o texto não estica */
body.notas-expandidas #lib-notas,
body.notas-expandidas #folder-notas,
body.notas-expandidas #foco-colheita-lista { align-items: start; }
@media (min-width: 900px) {
  body.notas-expandidas .note-grid .note-item.is-expandida .t { font-size: var(--fs-19); }
}

/* ============================================================
   v2.24 — Compor: a barra e o "digite qualquer tecla"
   ============================================================ */
.nota-rapida {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; margin-bottom: 12px;
  border-radius: 14px; border: 1.5px dashed var(--border-strong);
  background: transparent; text-align: left;
  font-size: var(--fs-14); font-weight: 600; color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.nota-rapida span { flex: 1; }
.nota-rapida:hover { border-color: var(--sky); background: color-mix(in srgb, var(--sky) 7%, transparent); color: var(--ink); }
.nota-rapida:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.nr-dica {
  flex: none; font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2);
  padding: 3px 7px; border: 1px solid var(--border-strong); border-radius: 6px;
}
@media (max-width: 640px) { .nr-dica { display: none; } }

/* o card em composição */
.note-item.is-compondo { border-color: var(--sky); }
.ni-espaco { flex: 1; }
.ni-ctx { font-size: var(--fs-12); font-weight: 600; color: var(--sky-ink); }
.note-item.is-compondo .ni-pe { gap: 8px; }

/* ============================================================
   v2.25 — Ordenar notas
   ============================================================ */
.ordenar-btn { gap: 7px; }
.ord-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-12); font-weight: 750; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-2);
}
.ord-dir {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--surface-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.ord-dir:hover { background: var(--btn-ink); color: var(--canvas); }
.ord-dir.is-asc { transform: rotate(180deg); }

/* ============================================================
   v2.26 — Notas em vários lugares (>>) e categorias suas
   ============================================================ */
dialog#dlg-lugares, dialog#dlg-cat { border: 0; padding: 0; background: transparent; margin: auto; }
dialog#dlg-ia-cards { border: 0; padding: 0; background: transparent; width: min(680px, calc(100vw - 24px)); margin: auto; }
dialog#dlg-mencao { border: 0; padding: 0; background: transparent; width: min(520px, calc(100vw - 24px)); margin: 12vh auto auto; }
dialog#dlg-img { border: 0; padding: 0; background: transparent; width: min(480px, calc(100vw - 28px)); margin: auto; }
dialog#dlg-icone { border: 0; padding: 0; background: transparent; width: min(420px, calc(100vw - 28px)); margin: auto; }
dialog#dlg-ia-cards::backdrop, dialog#dlg-mencao::backdrop, dialog#dlg-img::backdrop, dialog#dlg-icone::backdrop {
  background: rgba(24, 29, 31, 0.34); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
dialog#dlg-lugares { width: min(520px, calc(100vw - 24px)); margin: 12vh auto auto; }
dialog#dlg-cat { width: min(440px, calc(100vw - 28px)); }
dialog#dlg-lugares::backdrop, dialog#dlg-cat::backdrop { background: rgba(24, 29, 31, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* fileira de lugares no popup */
.pc-lugares { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.lugar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700;
}
.lugar-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.lugar-chip.m-rosa  { background: var(--m-rosa-bg);  color: var(--m-rosa-ink); }
.lugar-chip.m-azul  { background: var(--m-azul-bg);  color: var(--m-azul-ink); }
.lugar-chip.m-verde { background: var(--m-verde-bg); color: var(--m-verde-ink); }
.lugar-chip.m-ambar { background: var(--m-ambar-bg); color: var(--m-ambar-ink); }
.lugar-chip.m-lilas { background: var(--m-lilas-bg); color: var(--m-lilas-ink); }
.lugar-chip .dot { background: currentColor; }
.lugar-x { margin-left: 1px; font-size: 14px; line-height: 1; opacity: 0.55; }
.lugar-x:hover { opacity: 1; }
.lugar-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1.5px dashed var(--border-strong); color: var(--ink-2);
  font-size: var(--fs-12); font-weight: 700;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lugar-add:hover { border-color: var(--sky); color: var(--sky-ink); }

/* etiqueta de lugar extra no card da lista */
.tag--lugar { opacity: 0.9; }
.tag--lugar::before { content: "+"; font-weight: 800; margin-right: 2px; }

/* categoria na grade de fontes e na tela dela */
.folder--cat { border: 1.5px dashed currentColor; background: transparent; }
#lib-folder.e-categoria .fonte-acoes,
#lib-folder.e-categoria .menu-wrap:first-child { display: none; }

/* ============================================================
   v2.27 — A IA propõe, você escolhe
   ============================================================ */
.sel-item { position: relative; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring); }
.sel-item[aria-pressed="false"] { opacity: 0.42; }
.sel-item[aria-pressed="false"] .sel-marca { opacity: 0; }
.sel-marca {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--surface);
  transition: opacity var(--t-fast) var(--ease-out);
}
.sel-marca::after {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  -webkit-mask: no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  mask: no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}
button.mini-card.sel-item { text-align: left; width: 100%; cursor: pointer; }
button.mini-card.sel-item:hover { box-shadow: var(--shadow-card); }
.sug-novo .novo { background: var(--success-soft); color: var(--success); }

/* barra de curadoria do resultado */
.curadoria {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--inset-glass);
}
.cur-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cur-txt b { font-size: var(--fs-14); }
.cur-txt span { font-size: var(--fs-12); color: var(--ink-2); }
.curadoria .btn { flex: none; width: auto; padding: 0 20px; }
@media (max-width: 640px) { .curadoria { flex-direction: column; align-items: stretch; } .curadoria .btn { width: 100%; } }

/* ============================================================
   v2.29 — Compor no Quadro (duplo clique no vazio)
   ============================================================ */
.q-nota.q-compondo {
  cursor: default; border-color: var(--sky); box-shadow: 0 0 0 2px var(--sky-soft), var(--shadow-float);
  z-index: 30; gap: 6px;
}
.q-titulo {
  width: 100%; border: 0; background: none; outline: none;
  font-size: var(--fs-13); font-weight: 750; color: var(--ink);
  caret-color: var(--sky-ink); padding: 0;
}
.q-titulo::placeholder { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.q-corpo {
  min-height: 76px; max-height: 220px; overflow: auto;
  font-size: var(--fs-12); line-height: 1.5; caret-color: var(--sky-ink);
}
.q-corpo:focus { outline: none; }
.q-corpo.is-empty::before { inset: 0; }
.q-pe-compor { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.q-pe-compor .ni-acao { padding: 5px 7px; min-height: 32px; font-size: var(--fs-11); }
.quadro-vazio-dica { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; }

/* ============================================================
   v2.31 — Linhagem (>> em nota) e menções (@)
   ============================================================ */

/* separador de grupo dentro das paletas */
.paleta-grupo {
  padding: 12px 16px 5px;
  font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3, var(--ink-2)); opacity: 0.75;
}
.paleta-lista .paleta-grupo:first-child { padding-top: 8px; }

/* @ no lugar da lupa, na paleta de menções */
.paleta-arroba {
  flex: none; width: 18px; text-align: center;
  font-size: var(--fs-16); font-weight: 800; color: var(--ink-2);
}
.paleta-criar { padding: 10px 16px 12px; border-top: 1px solid var(--border); }
.paleta-criar-t {
  display: block; margin-bottom: 7px;
  font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); opacity: 0.8;
}
.paleta-criar-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.paleta-criar-bts button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-13); font-weight: 700;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.paleta-criar-bts button:hover { background: var(--sky-soft); color: var(--sky-ink); }
.paleta-criar-bts b { font-weight: 800; color: var(--ink); }
.paleta-criar-bts button:hover b { color: var(--sky-ink); }

/* ponto que diz o tipo da entidade */
.ent-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.ent-ponto--autor { background: var(--ink); }
.ent-ponto--ideia { background: var(--m-rosa-dot); }

/* a menção dentro do texto */
.md-mencao {
  display: inline; padding: 1px 5px 2px; border-radius: 6px;
  background: rgba(24, 29, 31, 0.06); color: var(--ink);
  font-weight: 700; text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
button.md-mencao { cursor: pointer; }
button.md-mencao:hover { background: var(--sky-soft); color: var(--sky-ink); }
.editor .md-mencao { padding: 0; font-size: inherit; }

/* linhagem: mãe acima, filhas abaixo */
.pc-linhagem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 14px; }
.lin-rotulo {
  font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2); opacity: 0.8; margin-right: 1px;
}
.lin-rotulo + .lin-rotulo, .lin-chip + .lin-rotulo { margin-left: 8px; }
.lin-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 6px 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink);
  font-size: var(--fs-12); font-weight: 700;
}
.lin-ir { color: inherit; font: inherit; text-align: left; }
.lin-ir:hover { color: var(--sky-ink); text-decoration: underline; }
.lin-x { font-size: 14px; line-height: 1; opacity: 0.5; padding: 0 3px; }
.lin-x:hover { opacity: 1; }

/* linhagem no painel de conexões */
.lin-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.lin-papel {
  font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2); opacity: 0.8;
}
.nota-ref {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 11px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink);
  font-size: var(--fs-13); font-weight: 700; text-align: left;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nota-ref:hover { background: var(--sky-soft); color: var(--sky-ink); }

/* linhagem no rodapé do card da lista */
.tag--linhagem {
  background: var(--surface-2); color: var(--ink-2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

/* mãe que é entidade, não nota: o chip diz isso sem legenda */
.lin-chip--ent { background: var(--sky-soft); color: var(--sky-ink); }
.nota-ref--ent { background: var(--sky-soft); color: var(--sky-ink); }
.nota-ref--ent:hover { background: rgba(47, 67, 150, 0.16); }

/* ============================================================
   v2.33 — O painel fixado não pode espremer o conteúdo
   ============================================================ */
/* As grades de duas colunas nascem de uma media query de VIEWPORT, mas o
   painel fixado come ~336px da área útil. Entre 1100 e 1500px com ele
   aberto, a segunda coluna virava uma tira de ~220px onde cada linha
   cabia uma palavra. Aqui elas voltam a ser uma coluna só. */
@media (min-width: 1100px) and (max-width: 1500px) {
  body.com-fixados .result-grid,
  body.com-fixados .nota-grid,
  body.com-fixados .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.com-fixados .result-grid > *,
  body.com-fixados .nota-grid > *,
  body.com-fixados .stats-grid > * {
    grid-column: 1;
    grid-row: auto;
  }
  body.com-fixados .result-grid > * + *,
  body.com-fixados .nota-grid > * + *,
  body.com-fixados .stats-grid > * + * { margin-top: 14px; }
}

/* ============================================================
   v2.33 — Alvos de toque no dedo, não no mouse
   ============================================================ */
/* No desktop estes controles são de precisão de cursor e ficam como
   foram desenhados. No toque, 28–32px é abaixo do que um polegar acerta
   — e no popup o "excluir" fica colado no "fechar". */
@media (hover: none) {
  .note-lapis { width: 40px; height: 40px; }
  .pc-icone { width: 44px; height: 44px; }
  .pc-aba { min-height: 44px; }
  .lugar-add, .lin-chip { min-height: 36px; }
  .lugar-x, .lin-x { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }
  .quadro-ctrl button { min-width: 40px; min-height: 40px; }
  .com-del { min-width: 32px; min-height: 32px; }
}

/* ============================================================
   v2.34 — Menu + do editor: link, tag, imagem e ícone
   ============================================================ */
.ed-mais {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring);
}
.ed-mais:hover { background: var(--ink); color: var(--canvas); transform: scale(1.06); }
.ed-mais:active { transform: scale(0.94); }
.esc-acoes { display: flex; justify-content: flex-end; margin-top: 10px; }
.pc-edicao-pe .ed-mais, .ni-pe .ed-mais, .q-pe-compor .ed-mais { margin-right: 2px; }

.menu-ed { min-width: 268px; }
.ctx-nota {
  padding: 6px 12px 8px; margin: 0;
  font-size: var(--fs-12); font-weight: 550; color: var(--ink-2); line-height: 1.45;
}

/* link em linha para outra nota */
.md-link {
  display: inline; padding: 1px 6px 2px; border-radius: 6px;
  background: var(--sky-soft); color: var(--sky-ink);
  font-weight: 700; text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.md-link:hover { background: rgba(47, 67, 150, 0.18); }
.md-link-vivo { color: var(--sky-ink); font-weight: 700; }
.editor .md-link-vivo .tok { font-weight: 500; }

/* imagem dentro da nota */
.md-img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 4px 0; }
.md-figura { margin: 14px 0; }
p .md-img { display: inline-block; vertical-align: middle; max-height: 220px; width: auto; }

/* ícone do cartão */
.nota-icone { margin-right: 7px; font-style: normal; }

/* diálogo de imagem */
.img-solta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; padding: 18px; border-radius: 14px;
  border: 1.5px dashed var(--border-strong); color: var(--ink-2);
  font-size: var(--fs-13); font-weight: 600; text-align: center;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.img-solta:hover, .img-solta:focus-visible { border-color: var(--sky); color: var(--sky-ink); }
.img-solta.is-alvo { border-color: var(--sky); background: var(--sky-soft); color: var(--sky-ink); }
.img-previa { display: block; max-width: 100%; max-height: 200px; border-radius: 12px; margin-top: 12px; object-fit: contain; }

/* paleta de ícones */
.library-icon { display: inline-block; flex: none; vertical-align: -0.16em; }
.nota-icone.library-icon { width: 1em; height: 1em; min-width: 16px; min-height: 16px; }
.ficha-icon { width: 22px; height: 22px; }
.ficha-selo .ficha-icon { width: 30px; height: 30px; }
.ft-biblioteca { width: auto; margin-top: 12px; min-height: 44px; }
.editor-title-icon { position: absolute; top: 18px; left: 16px; width: 19px; height: 19px; pointer-events: none; }
.note-item.is-editando:has(> .editor-title-icon) > .ni-titulo { padding-left: 28px; }
#folder-corpo .nb-mae > .editor-title-icon { top: 26px; left: 24px; }
.q-compondo .editor-title-icon { top: 14px; left: 14px; }
.q-compondo:has(.editor-title-icon) .q-titulo { padding-left: 26px; }
#dlg-icone { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; }
#dlg-icone .paleta--icones { background: var(--surface); border: 0; box-shadow: none; backdrop-filter: none; }
#dlg-icone .paleta-busca input { min-width: 0; }
.ic-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; font-size: var(--fs-12); color: var(--ink-2); }
.ic-filtros select { flex: 1; min-width: 0; max-width: 230px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
#ic-conta { margin-left: auto; font-variant-numeric: tabular-nums; }
.paleta--icones .icone-grade {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px; padding: 8px 16px; max-height: min(360px, 44dvh); overflow-y: auto;
  scrollbar-gutter: stable; align-content: start;
}
.icone-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; height: 48px; border-radius: 8px; color: var(--ink); background: transparent;
  border: 1px solid transparent; transition: background var(--t-fast) var(--ease-out);
}
.icone-btn:hover { background: var(--surface-2); }
.icone-btn[aria-selected="true"] { border-color: var(--sky-ink); background: var(--sky-soft); color: var(--sky-ink); }
.icone-btn:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: -2px; }
.picker-icon { width: 22px; height: 22px; }
#ic-grade .paleta-vazia, #ic-grade [data-ic-retry] { grid-column: 1 / -1; }
.ic-mais { display: block; width: calc(100% - 32px); min-height: 44px; margin: 8px 16px; border-radius: 8px; color: var(--sky-ink); font-size: var(--fs-13); }
.ic-mais:hover { background: var(--surface-2); }
.ic-nome { min-height: 30px; padding: 6px 16px; color: var(--ink-2); font-size: var(--fs-13); }
#dlg-icone .paleta-pe { flex-wrap: wrap; gap: 6px 12px; }
#dlg-icone .paleta-pe button { min-height: 44px; }
@media (max-width: 599px) {
  .paleta--icones .icone-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ic-filtros { gap: 8px; }
  #ic-conta { width: 100%; margin-left: 0; }
  #folder-corpo .nb-mae > .editor-title-icon { top: 22px; left: 16px; }
}
@media (max-width: 359px) {
  .paleta--icones .icone-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ============================================================
   v2.35 — Cartão e página: dois objetos, dois símbolos
   ============================================================ */
.objeto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; flex: none;
}
.objeto--cartao { background: rgba(24, 29, 31, 0.07); color: var(--ink-2); }
.objeto--pagina { background: var(--sky-soft); color: var(--sky-ink); }

/* a barra de criar: cartão à esquerda, página à direita */
.criar-linha { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.criar-linha .nota-rapida { flex: 1; margin-bottom: 0; }
.nova-pagina {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 15px; min-height: 52px; border-radius: 14px;
  border: 1.5px dashed var(--border-strong);
  background: transparent; color: var(--ink-2);
  font-size: var(--fs-13); font-weight: 700; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.nova-pagina:hover { border-color: var(--sky); color: var(--sky-ink); background: var(--sky-soft); }
@media (max-width: 620px) {
  .criar-linha { flex-wrap: wrap; }
  .nova-pagina { flex: 1; justify-content: center; }
}

/* no celular a barra de criar empilha: senão "Comece a digitar…" quebra
   em quatro linhas para caber ao lado do botão de página */
@media (max-width: 620px) {
  .criar-linha { flex-direction: column; }
  .nova-pagina { width: 100%; justify-content: center; min-height: 46px; }
}
/* cabeçalho de lista: título em cima, controles embaixo, sem espremer */
@media (max-width: 620px) {
  .lib-notas-wrap > .card-head,
  .fonte-cards-bloco > .card-head { flex-wrap: wrap; row-gap: 8px; }
  .lib-notas-wrap > .card-head > .lib-titulo,
  .fonte-cards-bloco > .card-head > .card-title { flex: 1 0 100%; }
  .lib-notas-wrap > .card-head > .barra-dir { flex: 1 0 100%; justify-content: flex-start; }
}

/* ============================================================
   v2.36 — Linhagem: uma relação, dois sentidos
   ============================================================ */
.lin-chip--lugar { background: var(--surface-2); }
.lin-chip--lugar.m-rosa  { background: var(--m-rosa-bg);  color: var(--m-rosa-ink); }
.lin-chip--lugar.m-azul  { background: var(--m-azul-bg);  color: var(--m-azul-ink); }
.lin-chip--lugar.m-verde { background: var(--m-verde-bg); color: var(--m-verde-ink); }
.lin-chip--lugar.m-ambar { background: var(--m-ambar-bg); color: var(--m-ambar-ink); }
.lin-chip--lugar.m-lilas { background: var(--m-lilas-bg); color: var(--m-lilas-ink); }
.lin-chip--ent { background: var(--sky-soft); color: var(--sky-ink); }
.pc-linhagem { margin: 2px 0 14px; }

/* as duas direções nunca dividem a mesma linha: "+ mãe" grudado em
   "↓ filha" deixa ambíguo a qual grupo o botão pertence */
.lin-quebra { flex: 1 0 100%; height: 0; }

/* grade sem resultado ocupa a largura toda, em vez de sumir */
.grade-vazia { grid-column: 1 / -1; margin: 0; }

/* o tracking negativo do display encolhe também os ESPAÇOS — devolve
   o respiro entre palavras sem afrouxar as letras */
.view-head h1, .escolha-rotulo, .login-titulo, .flip-face .q,
h1.recall-prompt, .rev-empty .big, .stat-hero .v { word-spacing: 0.09em; }

/* SN Pro é a única família: display firme em 700 (o Supernotes usa
   Bold nos títulos), rótulo uppercase em 600 */
.view-head h1, .escolha-rotulo, .login-titulo, .flip-face .q,
.rev-empty .big, h1.recall-prompt,
.focus-ring .time strong, .rail-brand, .note-grid .note-item .t, .stat-hero .v { font-weight: 700; }
.view-head .kicker, .rail-label, .rail-brand::after { font-weight: 600; }

/* ============================================================
   v3.2 — Tema escuro fosco
   O mesmo papel, apagada a luz: sépia escura, sem preto puro, sem
   brilho. Tokens trocam; a gramática fica. Ativado por
   <html data-tema="escuro">, decidido antes do CSS (sem flash).
   ============================================================ */
:root[data-tema="escuro"] {
  color-scheme: dark;   /* sem isto, o <dialog> nativo herda CanvasText PRETO no escuro */
  --canvas: #211f1a;
  --surface: #2a271f;
  --surface-2: #1b1915;
  --border: rgba(236, 229, 211, 0.1);
  --border-strong: rgba(236, 229, 211, 0.2);
  --ink: #eae3d1;
  --ink-2: #b5ad99;
  --ink-3: #7c7563;

  --chrome: #1a1813;
  --chrome-2: #242118;
  --chrome-ink: #eee7d5;
  --chrome-muted: rgba(238, 231, 213, 0.58);
  --chrome-border: rgba(238, 231, 213, 0.1);

  --btn-ink: #eae3d1;
  --btn-ink-hover: #f6f0de;
  --sky: #56659f;
  --sky-2: #8c9bd0;
  --sky-ink: #aab7e6;
  --sky-soft: rgba(140, 155, 208, 0.13);
  --anel-neutro: rgba(140, 155, 208, 0.4);
  --coral: #c8785a;
  --coral-2: #8a4f38;
  --mark: #4c421f;
  --danger: #d08575;
  --danger-soft: #43261f;
  --success: #93af8f;
  --success-soft: #2a3626;

  --m-rosa-bg: #46311f;   --m-rosa-dot: #c98a63;  --m-rosa-ink: #e7c1a5;
  --m-azul-bg: #2b3147;   --m-azul-dot: #8c9bd0;  --m-azul-ink: #c1cbea;
  --m-verde-bg: #2d3626;  --m-verde-dot: #93af8f; --m-verde-ink: #c6d6bf;
  --m-ambar-bg: #423a1c;  --m-ambar-dot: #cfa848; --m-ambar-ink: #e6d3a0;
  --m-lilas-bg: #362f47;  --m-lilas-dot: #a394cf; --m-lilas-ink: #cfc4e8;

  --glass-bg: linear-gradient(135deg, rgba(42, 39, 31, 0.82), rgba(42, 39, 31, 0.6));
  --glass-bg-strong: linear-gradient(135deg, rgba(42, 39, 31, 0.92), rgba(42, 39, 31, 0.76));
  --glass-border: rgba(238, 231, 213, 0.14);
  --glass-blur: blur(18px);

  --dot-grid: radial-gradient(rgba(236, 229, 211, 0.055) 1px, transparent 1.05px);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 22px -14px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
  --inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* o texto de todo popup usa a tinta da casa — nunca o CanvasText do navegador
   (que ignora o data-tema e fica preto no escuro / poderia clarear no claro) */
dialog { color: var(--ink); }
/* (o texto sobre fundo-tinta usa var(--canvas): creme no claro, fosco no
   escuro — a regra pontual que invertia o CTA saiu, o token faz o serviço) */
:root[data-tema="escuro"] .escolha--estudar { color: var(--chrome-ink); }
:root[data-tema="escuro"] .btn-primary:disabled { background: rgba(236, 229, 211, 0.08); color: var(--ink-3); }
/* superfícies brancas fixas apagam junto */
:root[data-tema="escuro"] kbd { background: rgba(255, 255, 255, 0.07); }
:root[data-tema="escuro"] .dlg-panel .search,
:root[data-tema="escuro"] .login-panel .search { background: rgba(255, 255, 255, 0.05); }
:root[data-tema="escuro"] .nota-rapida { background: rgba(255, 255, 255, 0.03); }
:root[data-tema="escuro"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
:root[data-tema="escuro"] .escolha-caret { background: var(--ink); }
:root[data-tema="escuro"] .lg-nota,
:root[data-tema="escuro"] .switch::after { background: #d8d1bd; }
:root[data-tema="escuro"] .toast { background: rgba(240, 234, 219, 0.94); color: #211f1a; border-color: rgba(0,0,0,0.1); }
:root[data-tema="escuro"] .toast svg { color: #2f4396; }
:root[data-tema="escuro"] ::selection { background: #8c9bd0; color: #211f1a; }
:root[data-tema="escuro"] .grade--dificil { color: #211f1a; }

/* alternância nos Ajustes */
.tema-opcoes { display: flex; gap: 7px; }
.tema-opcoes button {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-13); font-weight: 600;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tema-opcoes button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }

/* ============================================================
   v3.3 — A página salva sozinha, e o título mora nela
   ============================================================ */
/* o estado de salvamento no lugar do botão Guardar */
.esc-estado {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 600; color: var(--ink-3);
  transition: color var(--t-med) var(--ease-out);
}
.esc-estado.is-salvo { color: var(--ink-2); }
.esc-estado.is-salvo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}

/* leitura: o título é a primeira linha do papel, como no Capacities */
.nota-titulo-pagina {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-28); letter-spacing: var(--track-display);
  line-height: 1.12; text-wrap: balance; word-spacing: 0.09em;
  margin: 0 0 6px;
}
.nota-meta-pagina { margin: 0 0 22px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
@media (min-width: 900px) {
  .nota-titulo-pagina { font-size: var(--fs-34); }
  .nota-leitura { padding-top: 36px; }
}

/* ============================================================
   v3.5 — Heatmap, rail que se esconde, IA da fonte, sem-título
   ============================================================ */
/* calendário de criação (estilo Supernotes) */
.cal-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.cal-topo button {
  width: 26px; height: 26px; border-radius: 8px;
  color: var(--chrome-muted); font-size: var(--fs-14); line-height: 1;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-topo button:hover { background: rgba(244, 241, 234, 0.08); color: var(--chrome-ink); }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 4px 14px; }
.cal-sem {
  text-align: center; font-size: 0.6rem; font-weight: 600;
  color: var(--chrome-muted); opacity: 0.7; padding-bottom: 2px;
}
.cal-dia {
  height: 25px; border-radius: 7px;
  font-size: var(--fs-11); font-weight: 500; color: var(--chrome-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring);
}
.cal-dia:hover { transform: scale(1.12); color: var(--chrome-ink); }
/* a intensidade: quanto mais notas no dia, mais aceso */
.cal-dia.n1 { background: rgba(140, 155, 208, 0.22); color: var(--chrome-ink); }
.cal-dia.n2 { background: rgba(140, 155, 208, 0.4);  color: var(--chrome-ink); }
.cal-dia.n3 { background: rgba(140, 155, 208, 0.62); color: #10131f; }
.cal-dia.n4 { background: #8c9bd0; color: #10131f; font-weight: 700; }
.cal-dia.e-hoje { box-shadow: inset 0 0 0 1.5px var(--chrome-ink); }
.cal-dia.e-ativo { outline: 2px solid var(--sky-2); outline-offset: 1px; }
.rail-cal { margin-top: 16px; }

/* filtro por dia na Biblioteca */
.dia-filtro {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 7px 8px 7px 14px; border-radius: var(--r-pill);
  background: var(--sky-soft); color: var(--sky-ink);
  font-size: var(--fs-13); font-weight: 600;
}
.dia-filtro button {
  width: 24px; height: 24px; border-radius: 50%;
  color: inherit; font-size: var(--fs-14); line-height: 1;
}
.dia-filtro button:hover { background: rgba(47, 67, 150, 0.14); }

/* rail que se esconde */
.rail-fechar {
  position: absolute; top: 14px; right: 12px;
  width: 30px; height: 30px; border-radius: 9px;
  display: none; align-items: center; justify-content: center;
  color: var(--chrome-muted);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rail-fechar:hover { background: rgba(244, 241, 234, 0.1); color: var(--chrome-ink); }
.rail-abrir {
  position: fixed; left: 10px; top: 14px; z-index: var(--z-sticky);
  width: 36px; height: 36px; border-radius: 12px;
  display: none; align-items: center; justify-content: center;
  background: var(--chrome); color: var(--chrome-ink);
  border: 1px solid var(--chrome-border);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-spring) var(--spring);
}
.rail-abrir:hover { transform: scale(1.08); }
@media (min-width: 900px) {
  .tabbar { position: sticky; }
  .rail-fechar { display: flex; }
  body.rail-oculto .tabbar { display: none; }
  body.rail-oculto .rail-abrir { display: flex; }
}

/* sem título: presente, mas sussurrado */
.sem-titulo { color: var(--ink-3); font-weight: 500; }
.q-nota .sem-titulo, .note-item .sem-titulo { font-weight: 500; }

/* ícone de origem nos mini-cards de flashcard */
.mini-card .origem { flex: none; }

/* diálogo de flashcards por IA — a lista rola COM aviso de que rola:
   scrollbar fina sempre à vista e um véu no pé que diz "tem mais" */
.iac-lista {
  display: grid; gap: 8px; align-content: start;
  max-height: min(52vh, 460px); overflow-y: auto;
  margin: 4px 0 0; padding: 2px 10px 2px 2px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.iac-lista::-webkit-scrollbar { width: 6px; }
.iac-lista::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.iac-lista::-webkit-scrollbar-track { background: transparent; }
/* véus de continuação: grudam nas bordas da janela de rolagem e o
   conteúdo escapa deles nas extremidades */
.iac-lista::before {
  content: ""; position: sticky; top: -2px; display: block;
  height: 22px; margin-bottom: -18px; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--surface), rgba(252, 247, 234, 0));
}
:root[data-tema="escuro"] .iac-lista::before {
  background: linear-gradient(var(--surface), rgba(42, 39, 31, 0));
}
.iac-lista::after {
  content: ""; position: sticky; bottom: -2px; display: block;
  height: 30px; margin-top: -22px; pointer-events: none;
  background: linear-gradient(rgba(252, 247, 234, 0), var(--surface));
}
:root[data-tema="escuro"] .iac-lista::after {
  background: linear-gradient(rgba(42, 39, 31, 0), var(--surface));
}
.iac-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* item de sugestão de flashcard: pergunta em cima, resposta embaixo */
.iac-item {
  display: block; width: 100%; text-align: left;
  padding: 13px 40px 13px 16px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink); /* botão: sem isso vale o buttontext preto do UA */
  transition: opacity var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.iac-item:hover { box-shadow: var(--shadow-card); }
.iac-item b { display: block; font-size: var(--fs-14); font-weight: 700; }
.iac-item > span:not(.sel-marca) {
  display: block; margin-top: 3px;
  font-size: var(--fs-13); color: var(--ink-2); line-height: 1.45;
}

/* ============================================================
   v3.7 — Cores de nota (Supernotes, em creme)
   8 tintas pálidas para distinguir notas como o dono quiser.
   A cor vive no dado (n.cor) e pinta via [data-cor="…"]: cada
   seletor só define --tinta/--tinta-bg; as superfícies herdam.
   ============================================================ */
[data-cor="vermelho"]  { --tinta: #c25a48; --tinta-bg: #f6dbd4; --anel: rgba(194, 90, 72, .33); }
[data-cor="terracota"] { --tinta: #c96f45; --tinta-bg: #f3dbc8; --anel: rgba(201, 111, 69, .33); }
[data-cor="mostarda"]  { --tinta: #b9922e; --tinta-bg: #f0e3c0; --anel: rgba(185, 146, 46, .33); }
[data-cor="salvia"]    { --tinta: #6d8a5b; --tinta-bg: #dde4d3; --anel: rgba(109, 138, 91, .33); }
[data-cor="ceu"]       { --tinta: #47837b; --tinta-bg: #d8e6e2; --anel: rgba(71, 131, 123, .33); }
[data-cor="caneta"]    { --tinta: #5568ab; --tinta-bg: #dde2ef; --anel: rgba(85, 104, 171, .33); }
[data-cor="alfazema"]  { --tinta: #8d7cb8; --tinta-bg: #e3dcec; --anel: rgba(141, 124, 184, .33); }
[data-cor="rosa"]      { --tinta: #b56087; --tinta-bg: #f1dae4; --anel: rgba(181, 96, 135, .33); }

:root[data-tema="escuro"] [data-cor="vermelho"]  { --tinta: #c4796a; --tinta-bg: #3d2823; --anel: rgba(196, 121, 106, .33); }
:root[data-tema="escuro"] [data-cor="terracota"] { --tinta: #c98a63; --tinta-bg: #46311f; --anel: rgba(201, 138, 99, .33); }
:root[data-tema="escuro"] [data-cor="mostarda"]  { --tinta: #cfa848; --tinta-bg: #423a1c; --anel: rgba(207, 168, 72, .33); }
:root[data-tema="escuro"] [data-cor="salvia"]    { --tinta: #93af8f; --tinta-bg: #2d3626; --anel: rgba(147, 175, 143, .33); }
:root[data-tema="escuro"] [data-cor="ceu"]       { --tinta: #7fb0a8; --tinta-bg: #24342f; --anel: rgba(127, 176, 168, .33); }
:root[data-tema="escuro"] [data-cor="caneta"]    { --tinta: #8c9bd0; --tinta-bg: #2b3147; --anel: rgba(140, 155, 208, .33); }
:root[data-tema="escuro"] [data-cor="alfazema"]  { --tinta: #a394cf; --tinta-bg: #362f47; --anel: rgba(163, 148, 207, .33); }
:root[data-tema="escuro"] [data-cor="rosa"]      { --tinta: #c288a6; --tinta-bg: #3d2a34; --anel: rgba(194, 136, 166, .33); }

/* A mesma superfície em qualquer largura, lista e estado de leitura/edição. */
.note-item[data-cor] {
  --note-bg: var(--tinta-bg);
  --note-border: color-mix(in srgb, var(--tinta) 32%, transparent);
  background: var(--note-bg);
}
.note-item[data-cor]:not(.is-editando) {
  border-color: var(--note-border);
}

/* fixados e quadro: lavagem + borda tingida (a borda-topo da fonte convive) */
.fx-item[data-cor], .q-nota[data-cor] {
  background: var(--tinta-bg);
  border-color: color-mix(in srgb, var(--tinta) 32%, transparent);
}

/* ---------- Alvo à la Supernotes ----------
   A nota clicada ganha um anel de 2px NA COR DELA (--anel = a tinta a
   33%, medida no app deles), nítido, sem blur, seguindo o raio do card;
   entra e sai em .2s. Sem cor, o anel é o azul-caneta da casa. */
.note-item { transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out); }
.note-item.is-alvo, .note-item:focus-visible { box-shadow: 0 0 0 2px var(--anel, var(--anel-neutro)); }
@media (max-width: 899px) {
  .note-item.is-alvo, .note-item:focus-visible { box-shadow: var(--shadow-card), 0 0 0 2px var(--anel, var(--anel-neutro)); }
}
@media (min-width: 900px) {
  .note-grid .note-item.is-alvo,
  .note-grid .note-item:focus-visible,
  .note-grid .note-item[data-cor]:not(.is-expandida).is-alvo,
  .note-grid .note-item[data-cor]:not(.is-expandida):focus-visible { box-shadow: var(--shadow-card), 0 0 0 2px var(--anel, var(--anel-neutro)); }
  .note-grid .note-item.is-alvo:hover,
  .note-grid .note-item:focus-visible:hover,
  .note-grid .note-item[data-cor]:not(.is-expandida).is-alvo:hover,
  .note-grid .note-item[data-cor]:not(.is-expandida):focus-visible:hover { box-shadow: var(--shadow-float), 0 0 0 2px var(--anel, var(--anel-neutro)); }
}
#lib-notas .note-item.is-expandida.is-alvo, #lib-notas .note-item.is-expandida:focus-visible,
#folder-notas .note-item.is-expandida.is-alvo, #folder-notas .note-item.is-expandida:focus-visible,
#ent-notas .note-item.is-expandida.is-alvo, #ent-notas .note-item.is-expandida:focus-visible { box-shadow: var(--shadow-card), 0 0 0 2px var(--anel, var(--anel-neutro)); }

/* o anel alcança os outros lugares onde a nota é card: fixados e quadro */
.fx-item { transition: box-shadow .2s var(--ease-out); }
.fx-item.is-alvo, .q-nota.is-alvo { box-shadow: var(--shadow-card), 0 0 0 2px var(--anel, var(--anel-neutro)); }
.q-nota.is-alvo:hover { box-shadow: var(--shadow-float), 0 0 0 2px var(--anel, var(--anel-neutro)); }

/* Leitura sólida: a tinta continua até a barra de ações mobile. */
#dlg-card[data-cor] .pop-card {
  background: var(--tinta-bg);
  border-color: color-mix(in srgb, var(--tinta) 30%, transparent);
}

/* a fileira de tintas no menu de contexto */
.ctx-cores { display: flex; flex-wrap: wrap; gap: 7px; padding: 7px 10px 6px; }
.cor-dot {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--tinta-bg); border: 2px solid var(--tinta);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.cor-dot:hover { transform: scale(1.18); }
.cor-dot.is-atual { outline: 2px solid var(--ink); outline-offset: 2px; }
.cor-dot--nada { background: var(--surface); border-color: var(--border-strong); position: relative; }
.cor-dot--nada::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1.5px; background: var(--ink-3); transform: rotate(-45deg);
}

/* aviso fixo do sync (dados.js): honesto e discreto */
.sync-aviso {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: var(--z-toast, 90); padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  font-size: var(--fs-13); font-weight: 700; box-shadow: var(--shadow-float);
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.sync-aviso button { color: inherit; font: inherit; text-decoration: underline; min-height: 44px; }
@media (max-width: 899px) {
  .sync-aviso { bottom: calc(88px + env(safe-area-inset-bottom)); border-radius: var(--r-md); }
}

/* código de pareamento do WriterDesk: grande, mono, digitável de longe */
.desk-codigo { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.desk-codigo b {
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--fs-28); letter-spacing: 0.18em; color: var(--sky-ink);
}
.desk-codigo span { font-size: var(--fs-12); color: var(--ink-2); max-width: 30ch; }

/* ---------- Supertags: o vocabulário é do dono ----------
   No segmentado da Biblioteca, cada supertag é uma estante viva;
   nos cards, o selo #tag diz o que a nota É. O # esmaecido é a
   assinatura visual (mesma gramática da pill do editor). */
.seg-supertag { display: inline-flex; align-items: center; gap: 3px; }
.seg-supertag i { font-style: normal; opacity: 0.45; font-weight: 800; }
.seg-supertag b {
  font-size: var(--fs-11); font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0.55; margin-left: 2px;
}
.tag--supertag {
  background: color-mix(in srgb, var(--sky) 12%, transparent);
  color: var(--sky-ink); font-weight: 700;
}

/* ---------- Sugeridor inline e ferramenta de seleção (estilo Tana) ---------- */
#sugestor {
  position: fixed; z-index: var(--z-toast, 90); min-width: 210px; max-width: 280px;
  padding: 5px; border-radius: 12px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-float);
}
#sugestor button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 7px 9px; border-radius: 8px;
  font-size: var(--fs-13); font-weight: 600; color: var(--ink); text-align: left;
  cursor: pointer;
}
#sugestor button i { font-style: normal; font-size: var(--fs-11); color: var(--ink-3); }
#sugestor button[aria-selected="true"], #sugestor button:hover { background: var(--surface-2); }
#sel-ferramenta { position: fixed; z-index: var(--z-toast, 90); display: flex; gap: 6px; }
.ref-cerquilha { animation-delay: 60ms; }   /* o par nasce em cascatinha */
/* o @ da casa: um selo de tinta que nasce com mola e se inclina ao
   convite — ícone só, personalidade no gesto (top-design) */
.ref-arroba {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--chrome, #23211a); color: var(--chrome-ink, #f2ecdc);
  font-family: var(--font-mono); font-size: 17px; font-weight: 700;
  box-shadow: var(--shadow-float); cursor: pointer;
  animation: arroba-nasce 320ms var(--spring-soft) both;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ref-arroba:hover { transform: rotate(-8deg) scale(1.12); background: var(--sky); }
@keyframes arroba-nasce {
  from { opacity: 0; transform: scale(0.6) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ref-arroba { animation: none; } }

/* formatação na mesma barra: irmãos menores e quietos dos selos @/# —
   quadradinhos de tinta, hover seco (física Supernotes) */
.sel-vao { width: 2px; }
.ref-fmt {
  width: 28px; height: 28px; align-self: center; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-float); cursor: pointer;
  animation: arroba-nasce 320ms var(--spring-soft) both;
  animation-delay: 100ms;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.ref-fmt + .ref-fmt { animation-delay: 140ms; }
.ref-fmt--marca { animation-delay: 180ms; background: var(--mark, #f5e6a8); }
.ref-fmt:hover { transform: translateY(-2px); background: var(--sky); color: var(--chrome-ink, #f2ecdc); }
@media (prefers-reduced-motion: reduce) { .ref-fmt { animation: none; } }

/* mãe nomeada no rodapé do card (padrão Supernotes): chip clicável */
.tag--mae { cursor: pointer; transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
.tag--mae:hover { background: var(--sky-soft); color: var(--sky-ink); }

/* ▸ N — o badge de filhas ENTRA na nota (o "80" do pai no Supernotes) */
.tag--filhas { cursor: pointer; font-weight: 700; transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.tag--filhas:hover { background: var(--sky); color: var(--chrome-ink, #f2ecdc); transform: translateY(-1px); }

/* ---------- Supertags: o ambiente de gestão ---------- */
.tab-cerq {
  width: 21px; text-align: center; flex: none;
  font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 1;
}
#st-root .view-head, #st-tag .view-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
#st-root .view-head .btn { width: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; }
.st-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.st-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 16px 18px; border-radius: var(--r-card, 14px);
  background: var(--surface); box-shadow: var(--shadow-card);
  cursor: pointer; text-align: left;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.st-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.st-nome { font-weight: 700; font-size: 16px; display: flex; align-items: baseline; gap: 3px; }
.st-nome .est-cerq { opacity: 0.45; }
.st-qtd { font-family: var(--font-mono); font-size: var(--fs-11, 11.5px); color: var(--ink-2); }
.st-sub { font-size: 12px; color: var(--ink-3); }
#st-notas { margin-top: 4px; }
/* ---------- A FICHA DA SUPERTAG: gaveta ancorada no ⚙ ----------
   Entra pela direita (de baixo no telefone) e traz o próprio objeto
   se vestindo: o selo do topo assume a cor e o ícone que você escolhe.
   Configurar é ver o resultado antes de fechar. */
dialog#dlg-tag, dialog#dlg-lixeira {
  border: 0; padding: 0; margin: 0 0 0 auto;
  width: min(420px, 100vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  background: transparent; overflow: visible;
}
dialog#dlg-tag::backdrop, dialog#dlg-lixeira::backdrop { background: rgba(24, 29, 31, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog#dlg-tag[open] .ficha, dialog#dlg-lixeira[open] .ficha { animation: ficha-entra 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
dialog#dlg-tag[open]::backdrop, dialog#dlg-lixeira[open]::backdrop { animation: ficha-fundo 200ms var(--ease-out) both; }
@keyframes ficha-entra { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ficha-fundo { from { opacity: 0; } to { opacity: 1; } }

.ficha {
  height: 100dvh; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-float);
}
.ficha-topo {
  position: relative; flex: none;
  padding: 26px 22px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  transition: background 200ms var(--ease-out);
}
/* a cor eleita pinta o cabeçalho: a prévia é o próprio painel */
.ficha-topo[data-cor] { background: var(--tinta-bg, var(--surface-2)); }
.ficha-selo {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-card);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ficha-selo--emoji { font-size: 24px; }
.ficha-topo[data-cor] .ficha-selo { color: var(--tinta, var(--ink)); }
.ficha-nome { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 2px; }
.ficha-sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.ficha-x {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-2);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.ficha-x:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.ficha-corpo { flex: 1; overflow-y: auto; padding: 20px 22px 30px; }
.ficha-bloco + .ficha-bloco { margin-top: 26px; padding-top: 22px; border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent); }
.ficha-rotulo {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); margin-bottom: 4px;
}
.ficha-opc { font-weight: 400; opacity: 0.6; text-transform: none; letter-spacing: 0; }
.ficha-dica { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; }
.ficha-vazio { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; }
.ficha-cores { display: flex; flex-wrap: wrap; gap: 9px; }
.ficha-cores .cor-dot { width: 30px; height: 30px; }
.cor-dot--nenhuma {
  background: var(--surface); position: relative;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent);
}
.cor-dot--nenhuma::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 1.5px; height: 60%; background: color-mix(in srgb, var(--ink) 26%, transparent);
  transform: rotate(45deg);
}
.ficha-icones { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ficha-emoji {
  width: 36px; height: 36px; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.ficha-emoji:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); transform: translateY(-1px); }
.ficha-emoji.is-atual { background: var(--sky-soft); box-shadow: inset 0 0 0 1.5px var(--sky); }
.ficha-emoji--nenhum { font-size: 14px; color: var(--ink-3); }
.ficha-campo {
  width: 100%; padding: 10px 13px; border: 0; border-radius: 10px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.ficha-campo::placeholder { color: var(--ink-3); }
.ficha-campo:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--sky-soft); }
.ficha-busca { position: relative; }
.ficha-sug { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ficha-sug-item {
  display: flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer;
  padding: 8px 11px; border-radius: 9px; font-size: 13px;
  transition: background 160ms var(--ease-out);
}
.ficha-sug-item:hover, .ficha-sug-item.is-ativa { background: var(--sky-soft); }
.ficha-sug-item .p-nome { flex: 1; font-weight: 600; }
.ficha-sug-item .p-autor { font-size: 11px; color: var(--ink-3); }
@media (max-width: 620px) {
  dialog#dlg-tag { margin: auto auto 0; width: 100vw; height: 88dvh; }
  .ficha { height: 88dvh; border-radius: 20px 20px 0 0; overflow: hidden; }
  dialog#dlg-tag[open] .ficha { animation-name: ficha-sobe; }
}
@keyframes ficha-sobe { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* v210: o cartão cresce a partir do card tocado (a origem vem das vars
   --pop-ox/--pop-oy que o abrirNota mede; sem elas, cresce do centro) */
@keyframes ficha-cresce { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog#dlg-tag[open] .ficha { animation: ficha-fundo 140ms linear both; }
}
.stp-lista { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.stp-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.stp-item b { font-size: 13.5px; }
.stp-tipo { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); flex: 1; }
.stp-tipo i { font-style: normal; color: var(--sky-ink); font-weight: 700; }
.stp-x {
  width: 22px; height: 22px; border-radius: 7px; flex: none; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.stp-x:hover { background: var(--coral-soft, #f6dcd2); color: var(--coral-ink, #8a3d22); }
.stp-form { display: flex; flex-direction: column; gap: 10px; }
.stp-form input[type="text"] {
  padding: 10px 13px; border-radius: 10px; border: 0; font: inherit; font-size: 13.5px;
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
}
.stp-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--sky-soft); background: var(--surface); }
.stp-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
/* pílula de opção: parece botão, diz qual está escolhida (hover seco) */
.pill-op {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-2);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pill-op:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); color: var(--ink); }
.pill-op[aria-pressed="true"] {
  background: var(--chrome, #23211a); color: var(--chrome-ink, #f2ecdc);
}
.pill-op--tag { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-mono); }
.pill-op--tag i { font-style: normal; opacity: 0.5; font-weight: 700; }
.pill-op--tag[aria-pressed="true"] { background: var(--sky); color: var(--chrome-ink, #f2ecdc); }
.stp-rotulo {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: -4px;
}
.stp-aviso {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--ambar-soft, #f7ecd2); color: var(--ambar-ink, #6b4c12);
  font-size: 12px; line-height: 1.45;
}
.stp-alvo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.stp-alvo-rotulo { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.stp-alvo input { flex: 1; min-width: 130px; }
#stp-add { width: auto; align-self: flex-start; padding: 9px 18px; }

/* o painel na NOTA: linhas rótulo → campo, quietas como formulário de papel */
.pc-props {
  margin: 12px 0 2px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  display: flex; flex-direction: column; gap: 8px;
  animation: pop-nascer 200ms var(--ease-out) both;
}
.prop-linha { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 10px; }
.prop-nome {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prop-linha input[type="text"], .prop-linha input[type="number"], .prop-linha input[type="date"] {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 6px 8px; border-radius: 8px; width: 100%;
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.prop-linha input:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.prop-linha input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--sky-soft); }
.prop-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 8px; }
.prop-obj { display: inline-flex; align-items: center; gap: 4px; }
.prop-obj-ir {
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--sky-soft); color: var(--sky-ink); cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.prop-obj-ir:hover { background: var(--sky); color: var(--chrome-ink, #f2ecdc); }
.prop-obj-x { width: 20px; height: 20px; border-radius: 7px; cursor: pointer; color: var(--ink-3); }
.prop-obj-x:hover { background: var(--coral-soft, #f6dcd2); color: var(--coral-ink, #8a3d22); }
/* o campo fica SEMPRE aberto ao lado dos chips (padrão Tana): digitar
   sugere, Enter escolhe, e ele espera o próximo valor */
.prop-objs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 30px; }
.prop-obj-busca {
  flex: 1; min-width: 96px; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink); padding: 5px 8px; border-radius: 8px;
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.prop-obj-busca::placeholder { color: var(--ink-3); }
.prop-obj-busca:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.prop-obj-busca:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--sky-soft); }

#obj-sug {
  position: fixed; z-index: var(--z-toast, 90);
  display: flex; flex-direction: column; gap: 2px;
  max-width: 320px; padding: 5px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-float);
  animation: pop-nascer 140ms var(--ease-out) both;
}
.obj-sug-item {
  display: flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer;
  padding: 7px 10px; border-radius: 8px; font-size: 13px;
  transition: background 160ms var(--ease-out);
}
.obj-sug-item .p-nome { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-sug-item .p-autor { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); flex: none; }
.obj-sug-item:hover, .obj-sug-item.is-ativa { background: var(--sky-soft); }
.obj-sug-item.is-ativa .p-autor { color: var(--sky-ink); }
.pc-props-btn {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pc-props-btn:hover { background: var(--sky-soft); color: var(--sky-ink); }

.dlg-mini { min-width: min(400px, 86vw); padding: 20px 22px; }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.nt-linha { display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.nt-linha input { flex: 1; }

/* estantes: a sidebar é sua — linhas de supertag eleitas */
.est-cerq { font-family: var(--font-mono); font-weight: 700; opacity: 0.55; }
.rail-materia .est-cerq { width: 14px; text-align: center; flex: none; }
.rail-vazio { font-size: 12.5px; color: var(--ink-3); margin: 4px 10px; line-height: 1.45; }
.est-titulo { flex: 1; font-weight: 600; }
.paleta-explica { font-size: 12.5px; color: var(--ink-3); margin: 8px 14px 2px; line-height: 1.5; }
#folder-nome { cursor: pointer; }
#folder-nome:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--sky); }

/* popup: o corpo convida a escrever */
#pc-corpo { cursor: text; }

/* etiqueta clicável + popover de remoção (padrão Supernotes) */
.tag--supertag { cursor: pointer; }
.tag--supertag:hover { filter: brightness(0.94); }
button.tag--supertag { font-family: inherit; }
#tag-popover {
  position: fixed; z-index: var(--z-toast, 90); padding: 5px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--shadow-float);
}
#tag-popover button {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px;
  border-radius: 8px; font-size: var(--fs-13); font-weight: 700;
  color: var(--danger); cursor: pointer;
}
#tag-popover button:hover { background: var(--surface-2); }
#tag-popover {
  width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - 16px);
  display: flex; flex-direction: column; padding: 10px;
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--border); border-radius: 14px; color: var(--ink);
}
#tag-popover .tag-picker-head { display: flex; align-items: center; justify-content: space-between; padding-left: 8px; }
#tag-popover button { color: var(--ink); min-height: 40px; font-weight: 500; text-align: left; }
#tag-popover button svg { width: 16px; height: 16px; flex: none; }
#tag-popover .tag-picker-search { width: 100%; min-height: 42px; margin: 6px 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 16px; }
#tag-popover .tag-picker-search::placeholder { color: var(--ink-2); }
#tag-popover .tag-picker-list { overflow-y: auto; overscroll-behavior: contain; max-height: 280px; min-height: 0; }
#tag-popover .tag-picker-list button { width: 100%; }
#tag-popover .tag-picker-list button > span:nth-child(2) { overflow-wrap: anywhere; min-width: 0; flex: 1; }
#tag-popover .tag-picker-hash { color: var(--sky-ink); font-weight: 700; }
#tag-popover button[aria-pressed="true"] { background: var(--sky-soft); color: var(--sky-ink); }
#tag-popover small { font-size: 11px; font-weight: 600; }
#tag-popover .tag-picker-remove { border-top: 1px solid var(--border); border-radius: 0; margin-top: 6px; color: var(--danger); }
#tag-popover .tag-picker-help, #tag-popover .tag-picker-empty { margin: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
#tag-popover :focus-visible, .tag--supertag:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }
.tag--vazia { background: transparent; color: var(--ink-2); border: 1px dashed var(--border); }
#sugestor { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; max-height: min(320px, 45dvh); overflow-y: auto; }
#sugestor button { min-height: 40px; }
#sugestor button i { color: var(--ink-2); }
@media (pointer: coarse) {
  #tag-popover button, #sugestor button { min-height: 44px; }
  button.tag--supertag { min-height: 36px; }
}

/* ---------- Física Supernotes: hover seco, entrada com mola ----------
   Engenharia reversa 14/08: micro-interações deles vivem em 80–200ms
   lineares; molas só em ENTRADAS. Nossos hovers usavam a mola de
   480ms — flutuavam. Hover agora responde em 160ms. */
.note-grid .note-item, .q-nota, .folder, .modo-btn, .fx-item, .escolha, .chip {
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
.bi-tipo--acao { background: color-mix(in srgb, var(--sky) 14%, transparent); color: var(--sky-ink); }
#busca-lista kbd {
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 700;
  padding: 2px 6px; border-radius: 5px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink-2);
}

/* lista de sugestão do alvo: o vazio explica, nunca emudece */
.ficha-sug-nada {
  padding: 8px 11px; font-size: 12px; color: var(--ink-3); line-height: 1.5;
  border-radius: 9px; background: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* ---------- o mapa vivo ---------- */
.grafo-local { position: relative; height: min(62vh, 560px); }
#fonte-grafo { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; border-radius: 14px; }
#fonte-grafo:active { cursor: grabbing; }
.grafo-controles {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 5px;
  background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-float);
  animation: controles-sobem 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes controles-sobem { from { transform: translate(-50%, 14px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.gc-btn {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.gc-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.gc-btn[aria-pressed="true"] { background: var(--chrome, #23211a); color: var(--chrome-ink, #f2ecdc); }
@media (prefers-reduced-motion: reduce) { .grafo-controles { animation: none; } }

/* ---------- o ❝ das referências (padrão Supernotes) ---------- */
.tag--refs {
  cursor: pointer; font-weight: 700;
  background: color-mix(in srgb, var(--alfazema-dot, #8d7cb8) 16%, transparent);
  color: var(--alfazema-ink, #5b4a86);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.tag--refs:hover { background: color-mix(in srgb, var(--alfazema-dot, #8d7cb8) 30%, transparent); transform: translateY(-1px); }
.pc-aba--refs .pc-aspas { font-size: 14px; line-height: 1; color: var(--alfazema-ink, #5b4a86); }
.ref-item {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  width: 100%; padding: 10px 12px; border-radius: 11px; cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.ref-item + .ref-item { margin-top: 4px; }
.ref-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ref-item b { font-size: 13.5px; }
.ref-trecho { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.ref-alvo {
  background: color-mix(in srgb, var(--alfazema-dot, #8d7cb8) 22%, transparent);
  color: var(--alfazema-ink, #5b4a86);
  padding: 1px 6px; border-radius: 6px; font-weight: 600;
}

/* (v244: o menu-nota do pc-mais morreu — tudo mora no + do rodapé;
   .mn-tags sobrevive porque o tag-menu do editor a herda) */
.mn-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 8px; max-width: 280px; }

/* a tag no canto inferior direito, tal como lá */
.pc-pe-tag { margin-left: auto; display: inline-flex; }
.note-item .meta .tag--supertag { order: 99; margin-left: auto; }

/* Noteboard na tinta da casa, não em azul */
.pc-noteboard { background: var(--chrome, #23211a); color: var(--chrome-ink, #f2ecdc); }
.pc-noteboard:hover { background: var(--ink); color: var(--chrome-ink, #f2ecdc); }

/* ==================== PACOTE MOBILE (gramática Supernotes) ====================
   O telefone é o palco principal do público-alvo. Regras: + central
   elevado na barra; abas só-ícone; card em foco = FOLHA que cobre; cada
   nota é um CARTÃO com superfície; toque responde no dedo. */
* { -webkit-tap-highlight-color: transparent; }
.tab-mais { display: none; }

@media (max-width: 899px) {
  /* 1. o + central, elevado acima da barra (como lá) */
  .tab-mais {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%; flex: none;
    margin-top: -20px; cursor: pointer;
    background: var(--surface); color: var(--ink);
    box-shadow: 0 8px 22px -8px rgba(23, 21, 15, 0.55), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
    transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
  }
  .tab-mais:active { transform: scale(0.9); }

  /* 2. abas só-ícone, como as deles */
  .tabbar { align-items: center; }
  .tabbar .tab { font-size: 0; gap: 0; min-width: 50px; min-height: 48px; justify-content: center; }
  .tabbar .tab .tab-cerq { font-size: 19px; }
  .tabbar .tab .badge { font-size: var(--fs-11); }

  /* 2b. Números sai da barra (v209): com ele ficavam 2 abas à esquerda do +
     e 3 à direita — barra torta. Sem ele: 2 + [+] + 2, simétrica como a
     deles. A view de Números continua existindo no rail do desktop. */
  .tabbar .tab[data-go="stats"] { display: none; }

  /* 3. o card aberto CRESCE NO LUGAR (a mecânica deles, medida na v210):
     não é uma folha que cobre a tela — é um cartão flutuante perto de
     onde você tocou, com o fundo esmaecido e a tabbar viva embaixo */
  dialog#dlg-card {
    margin: 0; position: fixed;
    left: 4vw; top: var(--pop-top, 8dvh);
    width: 92vw; max-width: 92vw; height: auto; max-height: 76dvh;
  }
  dialog#dlg-card .pop-card {
    height: auto; max-height: 76dvh; overflow-y: auto;
    border-radius: 22px;
    padding: 0 18px calc(14px + env(safe-area-inset-bottom));
    transform-origin: var(--pop-ox, 50%) var(--pop-oy, 24%);
  }
  dialog#dlg-card[open] .pop-card { animation: ficha-cresce 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* 3b. (v237) no celular o cartão aberto é uma FOLHA à la Supernotes:
     a barra de ações tem a PRÓPRIA linha no topo (setas à esquerda, lápis
     e + à direita) e o título fica com a largura inteira — a classe de
     colisões título×botões morre por estrutura, não por medida */
  .pc-acoes { position: static; justify-content: flex-end; padding: 10px 0 2px; }
  .pc-nav-grupo { margin-right: auto; }
  .pc-titulo::before { content: none; }
  .pc-titulo-edit { padding-right: 0; }

  /* v236 — auditoria mobile (régua Supernotes):
     colunas não existem em 1 coluna; convite curto; Página só-ícone */
  #lib-colunas-wrap, #colunas-wrap { display: none; }
  .criar-linha .nota-rapida span { display: none; }
  .criar-linha .nota-rapida::after { content: 'Toque para criar…'; font-size: var(--fs-14); color: var(--ink-2); }
  .nota-rapida .nr-dica { display: none; }
  .criar-linha .nova-pagina { font-size: 0; gap: 0; }
  .criar-linha .nova-pagina svg { width: 16px; height: 16px; }
  /* a faixa sticky já reserva a linha inteira: título não precisa de recuo */
  .pc-titulo, .pc-titulo-edit { padding-right: 0; }

  /* 5. cada nota é um CARTÃO de verdade, como lá */
  .note-grid .note-item {
    background: var(--note-bg); border-radius: 16px;
    padding: 15px 16px 12px; margin-bottom: 10px;
    box-shadow: var(--shadow-card); border: 1px solid var(--note-border);
  }
  .note-grid .note-item:active { transform: scale(0.985); transition: transform 120ms var(--ease-out); }

  /* 6. o convite é UMA barra, não uma pilha (alguma regra antiga
     empilhava em coluna no mobile) */
  .criar-linha { flex-wrap: nowrap; flex-direction: row !important; }
  .criar-linha .nota-rapida { min-width: 0; }
  .criar-linha .nova-pagina { width: auto !important; }
  .criar-linha .nota-rapida span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .criar-linha .nova-pagina { flex: none; }

  /* o pé do cartão quebra linha: contadores + tag não cabem em 375 */
  .pc-pe { flex-wrap: wrap; row-gap: 6px; }

  /* 7. troca de tela com respiro (estado final é o natural: nada
     fica preso invisível se um frame não vier) */
  .view.is-active { animation: view-chega 180ms var(--ease-out); }

  /* 8. escrever sem distorcer (v211): campo de edição a 16px = iOS não
     dá zoom automático no foco (era isso que torcia o cartão todo).
     O Supernotes resolve com user-scalable=no no meta viewport; nós
     resolvemos na fonte — o pinch-zoom da a11y fica preservado. */
  input, textarea, [contenteditable="true"] { font-size: 16px; }
  .search input, .paleta-busca input, .pcf-compor input, .com-novo input,
  .fx-busca input, .stp-form input, .prop-linha input, .nt-linha input { font-size: 16px; }
  .pc-editor { font-size: 16px; max-height: none; min-height: 28dvh; }

  /* 8b. em edição o cartão sobe ao topo e estica — o campo fica acima do
     teclado. CLASSE, não :has(): a invalidação de estilo de :has() com
     atributo mudando falhou no teste real (o seletor casava mas o estilo
     não recalculava) */
  dialog#dlg-card { transition: top 240ms var(--ease-out); }
  dialog#dlg-card.is-editando { top: 6dvh; max-height: 86dvh; }
  dialog#dlg-card.is-editando .pop-card { max-height: 86dvh; }
}
@keyframes view-chega { from { opacity: 0.55; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
  dialog#dlg-card[open] .pop-card { animation: none; }
}

/* ---------- reencontro: a IA achou algo que você JÁ tem ---------- */
.ent-chip--ja { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sky) 55%, transparent); }
.ja-tem {
  font-family: var(--font-mono); font-style: normal; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: 6px; padding: 1px 5px; border-radius: 5px;
  background: var(--sky-soft); color: var(--sky-ink);
}

/* sugestão de conexão com uma NOTA comum (vira citação, não parentesco) */
.ent-chip--nota { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }

/* ============================================================================
   v213 — links clicáveis, vídeo embedado, vista Tabela e propriedade Link
   ============================================================================ */

/* URL solta: clicável no leitor (.md-url) e no editor vivo (.md-url-vivo) */
.md-url, .md-url-vivo {
  color: var(--sky-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--sky-ink) 40%, transparent);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.md-url:hover, .md-url-vivo:hover { text-decoration-color: var(--sky-ink); }

/* Prévia embedada do YouTube: capa com play desenhado em CSS (zero nós de
   texto — no editor vivo o cursor não pode sentir a prévia) */
.md-video { margin: 10px 0; }
.md-video-capa {
  position: relative; display: block; width: min(100%, 480px); aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid var(--border-strong); border-radius: 12px;
  overflow: hidden; background: #14120d; cursor: pointer;
}
.md-video-capa img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.md-video-capa::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(20, 18, 12, .72); border: 1px solid rgba(255, 255, 255, .25);
  transition: transform .18s var(--ease-out), background .18s var(--ease-out);
}
.md-video-capa::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fcf7ea;
  translate: 3px 0;
}
.md-video-capa:hover::before { transform: scale(1.08); background: rgba(20, 18, 12, .86); }
.md-video-frame {
  width: min(100%, 480px); aspect-ratio: 16 / 9; display: block;
  border: 0; border-radius: 12px; background: #000;
}
.md-yt-prev { display: block; margin: 6px 0 4px; }
.md-yt-prev .md-video-capa, .md-yt-prev .md-video-frame { width: min(100%, 420px); }

/* Vista Tabela: papel, réguas finas e cabeçalho que fica */
.tabela-head { margin-bottom: 10px; }
.tabela-dica { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.tabela-vazia { position: static; margin: 18px 0 8px; }
.tabela-scroll {
  overflow: auto; max-height: min(62vh, 560px);
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.tabela-notas { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.tabela-notas th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  padding: 9px 14px; background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}
.tabela-notas td {
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top; color: var(--ink); max-width: 340px;
}
.tabela-notas tbody tr:last-child td { border-bottom: 0; }
.tabela-notas tbody tr:hover td { background: var(--sky-soft); }
.tb-titulo {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--ink); cursor: pointer; text-align: left;
}
.tb-titulo:hover { color: var(--sky-ink); }
.tb-vazio { color: var(--ink-3); }
.tb-chip {
  display: inline-block; padding: 1px 8px; margin: 1px 0;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2); font: inherit; font-size: 12.5px;
  color: var(--ink); cursor: pointer;
}
.tb-chip:hover { border-color: var(--sky-ink); color: var(--sky-ink); }
.tb-link { font-size: 13px; }

/* Propriedade tipo Link: o campo edita, a setinha ao lado abre */
.prop-linkzona { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.prop-linkzona input { flex: 1; min-width: 0; }
.prop-link-ir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  color: var(--sky-ink); border: 1px solid var(--border); background: var(--surface);
}
.prop-link-ir:hover { border-color: var(--sky-ink); background: var(--sky-soft); }
.tabela-notas td:first-child { min-width: 170px; }
.tabela-notas th:first-child { min-width: 170px; }

/* ============================================================================
   v215 — supertags fixadas no topo da biblioteca (6 + "+" com alfinete)
   ============================================================================ */
.seg-mais-wrap { position: relative; }
.seg-mais { padding-inline: 10px; }
.seg-tags-pop { min-width: 248px; max-height: 330px; overflow: auto; padding: 6px; }
.stg-linha { display: flex; align-items: center; gap: 2px; }
.stg-ir {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 7px 8px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left;
}
.stg-ir:hover { background: var(--sky-soft); }
.stg-ir .est-cerq { color: var(--ink-3); }
.stg-ir span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-ir b { font-weight: 600; font-size: 12px; color: var(--ink-3); }
.stg-linha.is-fixa .stg-ir { font-weight: 600; }
.stg-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-3); cursor: pointer; flex: none;
}
.stg-pin:hover { background: var(--sky-soft); color: var(--sky-ink); }
.stg-pin.is-on { color: var(--sky-ink); }
.seg-tags-pop { position: fixed; z-index: 80; }
/* os botões do popover NÃO são chips da fila nem itens de menu comuns:
   neutraliza .seg-lib button e .menu-pop button (id ganha a cascata) */
#seg-tags-pop .stg-linha { display: flex; align-items: center; gap: 2px; }
#seg-tags-pop .stg-ir, #seg-tags-pop .stg-pin {
  width: auto; min-height: 0; border: 0; border-radius: 8px;
  background: none; box-shadow: none;
}
#seg-tags-pop .stg-ir { flex: 1; min-width: 0; padding: 7px 8px; font-weight: 500; }
#seg-tags-pop .stg-linha.is-fixa .stg-ir { font-weight: 650; }
#seg-tags-pop .stg-pin { flex: none; width: 28px; height: 28px; padding: 0; color: var(--ink-3); }
#seg-tags-pop .stg-pin:hover { background: var(--sky-soft); color: var(--sky-ink); }
#seg-tags-pop .stg-pin.is-on { color: var(--sky-ink); }
#seg-tags-pop .stg-ir:hover { background: var(--sky-soft); }
/* alfinete solto fica inclinado e discreto; fixado fica firme e à caneta */
#seg-tags-pop .stg-pin svg { transition: transform .15s var(--ease-out), opacity .15s var(--ease-out); }
#seg-tags-pop .stg-pin:not(.is-on) svg { opacity: .5; transform: rotate(45deg); }

/* ============================================================================
   v216 — vista Tabela dentro das supertags (Cards | Tabela + Colunas)
   ============================================================================ */
.ent-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.ent-topo .ent-intro { margin: 0; flex: 1; min-width: 220px; }
.ent-vista { display: flex; align-items: center; gap: 6px; }
.ent-vista [data-ent-vista] {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-13); font-weight: 700; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ent-vista [data-ent-vista]:hover { color: var(--ink); }
.ent-vista [data-ent-vista][aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
#lib-tab-ent .tabela-scroll { margin-top: 2px; }
/* v217: alternador Cards|Tabela também na tela Supertags */
.st-vista { margin: -4px 0 14px; }

/* ============================================================================
   v218 — propriedade tipo "Opções" (dropdown com criação no uso)
   ============================================================================ */
.prop-linha select.prop-select {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 6px 8px; border-radius: 8px; width: 100%; cursor: pointer;
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.prop-linha select.prop-select:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.prop-linha select.prop-select:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--sky-soft); }
.prop-linha .prop-opcao-nova {
  border: 0; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 6px 8px; border-radius: 8px; width: 100%;
  box-shadow: 0 0 0 2px var(--sky-soft);
}
.prop-linha .prop-opcao-nova:focus { outline: none; }
.stp-opcoes-nota { margin: 6px 2px 0; font-size: 12px; color: var(--ink-3); }
.tb-opcao {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  background: var(--sky-soft); color: var(--sky-ink);
  font-size: 12.5px; font-weight: 600;
}

/* ============================================================================
   v219 — personalidade nos campos de propriedade: data, link e opções
   ============================================================================ */

/* Data: números tabulares; apagada quando vazia, firme quando preenchida */
.prop-linha input[type="date"] { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.prop-linha input[type="date"].tem-valor { color: var(--ink); font-weight: 550; }
.prop-linha input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .45; cursor: pointer; border-radius: 6px;
  transition: opacity 150ms var(--ease-out);
}
.prop-linha input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .85; }

/* Opções: o select vira uma PILL da casa, com chevron nosso em currentColor
   (à prova de tema) — vazia é discreta, preenchida veste azul-caneta */
.prop-select-wrap { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.prop-linha .prop-select-wrap select.prop-select {
  appearance: none; -webkit-appearance: none;
  width: auto; max-width: 100%;
  padding: 5px 32px 5px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid transparent;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
              border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.prop-select-wrap::after {
  content: ''; position: absolute; right: 14px; top: 50%;
  width: 7px; height: 7px; pointer-events: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  color: var(--ink-3); transition: color 160ms var(--ease-out);
}
.prop-select-wrap.tem-valor select.prop-select {
  color: var(--sky-ink); background: var(--sky-soft);
  border-color: color-mix(in srgb, var(--sky-ink) 22%, transparent);
}
.prop-select-wrap.tem-valor::after { color: var(--sky-ink); }
.prop-linha .prop-select-wrap select.prop-select:hover {
  border-color: color-mix(in srgb, var(--sky-ink) 40%, transparent);
}
.prop-linha .prop-select-wrap select.prop-select:focus {
  outline: none; box-shadow: 0 0 0 2px var(--sky-soft);
}

/* Link: o valor tem cara de link; a setinha de abrir é um botão redondo vivo */
.prop-linha input.prop-url.tem-valor { color: var(--sky-ink); font-weight: 550; }
.prop-link-ir {
  border-radius: 999px;
  transition: transform 150ms var(--ease-out), background 150ms var(--ease-out),
              border-color 150ms var(--ease-out);
}
.prop-link-ir:hover { transform: translateY(-1px); }
.prop-link-ir:active { transform: translateY(0); }
/* o campo de link veste o mesmo tecido dos demais (url ficou fora do seletor base) */
.prop-linha input[type="url"] {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 6px 8px; border-radius: 8px; width: 100%;
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.prop-linha input[type="url"]:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.prop-linha input[type="url"]:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--sky-soft); }
/* a pill abraça o conteúdo (na célula do grid o span esticava e o chevron fugia) */
.prop-linha .prop-select-wrap { justify-self: start; }

/* ---------- v220: edição inline nas células da tabela ---------- */
/* a célula editável convida: cursor + um véu no hover (por cima do hover da linha) */
.tabela-notas td[data-ed] { cursor: pointer; }
.tabela-notas tbody tr:hover td[data-ed]:hover {
  background: color-mix(in srgb, var(--sky-ink) 9%, var(--sky-soft));
}
/* o select da casa dentro da célula (mesma pill do popup, um fio mais compacta) */
.tabela-notas .prop-select-wrap select.prop-select {
  appearance: none; -webkit-appearance: none;
  width: auto; max-width: 100%;
  padding: 4px 30px 4px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid transparent;
}
.tabela-notas .prop-select-wrap.tem-valor select.prop-select {
  color: var(--sky-ink); background: var(--sky-soft);
  border-color: color-mix(in srgb, var(--sky-ink) 22%, transparent);
}
.tabela-notas .prop-select-wrap select.prop-select:focus { outline: none; box-shadow: 0 0 0 2px var(--sky-soft); }
/* campo inline (texto/número/data/link/nova opção): flutua sobre a célula */
.tabela-notas .tb-campo {
  font: inherit; font-size: 13px; color: var(--ink);
  width: 100%; min-width: 110px; max-width: 240px;
  padding: 5px 9px; border: 0; border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--sky-soft), 0 4px 12px rgba(0, 0, 0, .07);
}
.tabela-notas .tb-campo:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sky-ink) 45%, transparent), 0 4px 12px rgba(0, 0, 0, .08); }
.tabela-notas .tb-campo[type="date"] { font-variant-numeric: tabular-nums; }
.tabela-notas .tb-campo[type="url"] { color: var(--sky-ink); font-weight: 550; }
/* link na célula não quebra letra a letra em coluna estreita: uma linha + reticências */
.tabela-notas a.tb-link {
  display: inline-block; max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal; vertical-align: bottom;
}
/* a célula em edição não deve “pular”: trava a altura visual */
.tabela-notas td[data-ed] { min-height: 34px; }

/* ---------- v223: nova nota de dentro da supertag ---------- */
/* cards: convite tracejado, discreto até o hover */
.tag-nova {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 0 0 16px; padding: 13px 16px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: var(--fs-13); font-weight: 600;
  cursor: pointer; text-align: left;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out),
              background 150ms var(--ease-out);
}
.tag-nova b { color: var(--sky-ink); font-weight: 700; }
.tag-nova:hover {
  color: var(--ink-2); border-color: var(--anel-neutro);
  background: color-mix(in srgb, var(--sky-soft) 45%, transparent);
}
/* v225: a tag acompanha a edição — pill informativa no pé do modo editar */
.pc-ed-tag { display: inline-flex; align-items: center; margin-left: 2px; }
.pc-ed-tag .tag--supertag { cursor: pointer; }

/* ---------- v224: rolagem lisa ---------- */
/* pinta só o que está na janela: card fora da tela não custa layout nem
   paint (o "Expandir" com corpo inteiro deixava a lista pesada).
   v228: SÓ nas listas de página — dentro de <dialog> (pop-card tem
   transform+filter) o Safari quebra hit-test e caret com c-v: cartão
   filho não abria e o cursor do composer travava. */
#lib-notas .note-item:not(.is-compondo):not(.is-editando), #folder-notas .note-item:not(.is-compondo):not(.is-editando),
#ent-grid .note-item:not(.is-compondo):not(.is-editando), #st-notas .note-item:not(.is-compondo):not(.is-editando) {
  content-visibility: auto; contain-intrinsic-size: auto 150px;
}
dialog .note-item, .note-item.is-compondo, .note-item.is-editando { content-visibility: visible; }
/* rolando, os cards não reagem a hover: a cadeia de transitions de
   transform+sombra conforme o cursor atravessa a grade era o soluço */
html.is-rolando .note-grid .note-item { transition: none; }
html.is-rolando .note-grid .note-item:hover { transform: none; box-shadow: var(--shadow-card); }

/* tabela: linha-rodapé à la Notion, colada ao pé da tabela */
.tb-nova {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-width: 560px;   /* acompanha o min-width da tabela */
  padding: 10px 14px; border: 0; border-top: 1px dashed var(--border);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: var(--fs-13); font-weight: 600;
  cursor: pointer; text-align: left;
  transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.tb-nova:hover { color: var(--sky-ink); background: var(--sky-soft); }

/* v227: contagem viva nos composers (ni-pe) — mono da casa, sem quebrar */
.ni-conta { margin-right: 10px; white-space: nowrap; }

/* ============================================================
   v231 — Fluidez lição-Supernotes: papel SÓLIDO nas superfícies
   grandes. Auditoria no app deles: ZERO backdrop-filter na UI —
   o overlay é cartão sólido + véu escuro simples. O vidro com
   blur(26px) re-rasteriza no Safari a cada frame de scroll/tecla;
   o sólido é gratuito. O vidro segue vivo onde é assinatura e
   pequeno: tabbar mobile, toast, overlay do foco.
   ============================================================ */
.pop-card, .pop-nota, .paleta, .dlg-panel, .login-panel {
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* véu um fio mais denso compensa a ausência do blur */
dialog#dlg-card::backdrop, dialog#dlg-anota::backdrop, dialog#dlg-fonte::backdrop,
dialog#dlg-fontes::backdrop, dialog#dlg-bloco::backdrop, dialog#dlg-cartao::backdrop,
dialog#dlg-ent::backdrop, dialog#dlg-confirmar::backdrop {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(24, 29, 31, 0.44);
}
/* v275: a barra do popup é ESTÁTICA desde a v237 — o fundo --surface que a
   v231 lhe deu (para matar o vidro sticky da v210) virou uma FAIXA CREME
   sobre os cards coloridos no celular. Barra estática rola junto: transparente. */

/* "Mostrar mais" da biblioteca (paginação Supernotes: só ~30 cards no DOM) */
.lib-mais {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 13px 16px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.lib-mais:hover { color: var(--ink); border-color: var(--anel-neutro); background: color-mix(in srgb, var(--sky-soft) 45%, transparent); }

/* v232: preview rico na paleta de lugares — nome em cima, fio do corpo embaixo */
.paleta-item .p-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.paleta-item .p-tit .p-nome { flex: none; }
.paleta-item .p-trecho {
  font-size: var(--fs-11); font-weight: 400; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   v233 — pele do CodeMirror 6 sobre a moldura da casa.
   O el (.editor) vira moldura; o CM injeta .cm-editor > .cm-scroller >
   .cm-content. Alturas mínimas vivem no CONTENT (área clicável inteira);
   rolagem interna vive no SCROLLER; a moldura para de rolar.
   ============================================================ */
.editor .cm-editor { outline: none; }
.editor .cm-scroller { font-family: inherit; font-size: inherit; line-height: inherit; overflow: visible; }
.editor .cm-content { padding: 0; white-space: pre-wrap; word-break: break-word; caret-color: var(--sky-ink); }
.editor .cm-line { padding: 0; }
/* CodeMirror mede padding, mas não admite margem vertical em line decorations.
   A margem acumulada dos títulos fazia o clique cair linhas abaixo no Safari. */
.editor .cm-line.md-h1, .editor .cm-line.md-h2, .editor .cm-line.md-h3 { padding-top: 0.35em; }
.editor .cm-placeholder { color: var(--ink-2); opacity: 0.7; }
.editor:focus-within { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }
.pc-editor:focus-within, .esc-corpo:focus-within, .ni-corpo:focus-within,
.q-corpo:focus-within, .write-area:focus-within, .pop-corpo:focus-within { outline: none; }
.pc-editor { overflow: visible; max-height: none; }
.pc-editor .cm-scroller { overflow: auto; max-height: 46vh; }
.pc-editor .cm-content { min-height: 160px; }
.ni-corpo { overflow: visible; max-height: none; }
.ni-corpo .cm-scroller { overflow: auto; max-height: 40vh; }
.ni-corpo .cm-content { min-height: 96px; }
.q-corpo { overflow: visible; max-height: none; }
.q-corpo .cm-scroller { overflow: auto; max-height: 220px; }
.q-corpo .cm-content { min-height: 76px; }
.esc-corpo { min-height: 0; padding: 0; }
.esc-corpo .cm-content { min-height: 46vh; padding: 10px 0 90px; font-size: var(--fs-16); line-height: 1.75; }
.write-area .cm-content { min-height: 200px; }
@media (max-width: 899px) {
  .pc-editor .cm-scroller { max-height: none; }
  .pc-editor .cm-content { min-height: 28dvh; }
}

/* ============ v234 — polimento lição-Supernotes ============ */
/* migalha da mãe no composer do filho (era rótulo de rodapé) */
.ni-mae {
  margin: 2px 0 8px; font-size: var(--fs-12); font-weight: 600;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* lápis do cabeçalho do noteboard: aparece junto do nome, discreto */
.folder-lapis { display: inline-flex; vertical-align: middle; margin-left: 6px; opacity: 0.55; }
.folder-lapis:hover { opacity: 1; }
/* apagar supertag: perigo discreto no pé da ficha */
.ficha-bloco--perigo { border-top: 1px dashed var(--border); padding-top: 14px; }
.ficha-apagar {
  font: 700 var(--fs-13)/1 var(--font-ui); color: var(--danger);
  padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--r-pill); background: transparent; cursor: pointer;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.ficha-apagar:hover { background: var(--danger-soft); }

/* ============ v235 — Lixeira ============ */
.rail-lixeira { opacity: 0.75; }
.rail-lixeira:hover { opacity: 1; }
.rail-lixeira .est-cerq { display: inline-flex; }
.toast-acao {
  margin-left: 4px; padding: 4px 10px; border-radius: var(--r-pill);
  font: 700 var(--fs-12)/1 var(--font-ui); color: var(--sky-ink);
  background: var(--sky-soft); border: 0; cursor: pointer; white-space: nowrap;
}
.lx-lista { display: grid; gap: 8px; }
.lx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
}
.lx-info { min-width: 0; display: grid; gap: 2px; }
.lx-info b { font-size: var(--fs-14); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-info span { font-size: var(--fs-12); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-info i { font-style: normal; font-size: var(--fs-11); color: var(--ink-3); }
.lx-acoes { display: flex; align-items: center; gap: 4px; flex: none; }
.lx-morrer { color: var(--danger); font-weight: 800; min-height: 34px; padding: 4px 10px; }
.lx-morrer:hover { background: var(--danger-soft); }

/* ============ v239 — dialog Nova Supertag com a pele da casa + descrição ============ */
/* (v242: Renomear veste a mesma pele) */
dialog#dlg-nova-tag, dialog#dlg-renomear-tag { border: 0; padding: 0; background: transparent; }
dialog#dlg-nova-tag::backdrop, dialog#dlg-renomear-tag::backdrop { background: rgba(24, 29, 31, 0.44); }
#dlg-nova-tag .dlg-mini, #dlg-renomear-tag .dlg-mini {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-float);
}
.nt-desc {
  width: 100%; resize: vertical; min-height: 56px;
  font: inherit; font-size: var(--fs-13); line-height: 1.5; color: var(--ink);
  margin-top: 6px;
}

/* v240: cartão aberto congela a página — o scroll é todo do cartão.
   v249: o overflow:hidden NÃO pode tocar o body no desktop — body com
   overflow ≠ visible vira scroller de referência e o sticky da .tabbar
   desgruda do viewport (a "sidebar que sobe" com a página rolada).
   No mobile a barra é fixed (imune) e o iOS precisa da trava dupla. */
html.trava-rolagem { overflow: hidden; }
@media (max-width: 899px) {
  html.trava-rolagem body { overflow: hidden; }
}

/* ============ v241 — mobile sem samba ============ */
/* o cartão NUNCA tem scroll lateral: transbordo horizontal não vira
   deslocamento (o caret sacudia o scrollLeft — o "samba" da edição) */
.pop-card { overflow-x: hidden; }
/* iOS: a trava também corta o overscroll de borracha da página */
html.trava-rolagem { overscroll-behavior: none; }
@media (max-width: 899px) {
  /* rodapé de edição cabe: kbd ⌘⏎ não existe no dedo; e pode quebrar linha */
  .pc-edicao-pe { flex-wrap: wrap; row-gap: 6px; }
  .pc-edicao-pe kbd { display: none; }
}
/* leitura: palavra sem espaço QUEBRA em vez de ser clipada na borda */
.nota-body, .pc-corpo { overflow-wrap: anywhere; }

/* ============ v242 — supertag editável: renomear + menu no cartão ============ */
/* o lápis mora ao lado do nome na ficha — mesma cara do lápis da nota-mãe */
.ficha-renomear { background: none; border: 0; cursor: pointer; color: inherit; padding: 2px; }

/* ============ v252 — Tutor independente para fontes externas ============ */
#v-tutor { min-height: calc(100dvh - 120px); }
.tt-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; max-width: 880px; margin: 34px auto 30px; }
.tt-cabecalho h1 { max-width: 650px; font: 650 clamp(34px, 5vw, 58px)/.98 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.tt-cabecalho p { max-width: 650px; margin-top: 16px; color: var(--ink-2); font: 470 clamp(16px, 1.7vw, 19px)/1.55 var(--font-ui); }

.tt-entrada { max-width: 880px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.tt-tipos { display: grid; grid-template-columns: 1fr 1fr; padding: 7px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tt-tipos button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--r-md); color: var(--ink-3); font: 720 var(--fs-13)/1 var(--font-ui); }
.tt-tipos button[aria-selected="true"] { background: var(--surface); color: var(--sky-ink); box-shadow: var(--shadow-card); }
.tt-fonte-painel { padding: 24px 24px 0; }
.tt-drop { display: flex; align-items: center; gap: 15px; width: 100%; min-height: 154px; padding: 25px 28px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-2) 55%, transparent); text-align: left; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out); }
.tt-drop:hover, .tt-drop.is-arrastando { border-color: var(--sky); background: var(--sky-soft); transform: translateY(-2px); }
.tt-drop-icone { display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--sky); color: #fff; }
.tt-drop > span:nth-child(2) { display: grid; gap: 3px; }
.tt-drop b { font: 740 var(--fs-16)/1.2 var(--font-ui); }
.tt-drop small { color: var(--ink-2); font-size: var(--fs-13); }
.tt-drop em { margin-left: auto; color: var(--ink-3); font: normal 600 var(--fs-11)/1.3 var(--font-ui); }
.tt-arquivo-pronto { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; min-height: 92px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.tt-arquivo-pronto > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--m-lilas-bg); color: var(--m-lilas-ink); }
.tt-arquivo-pronto div { display: grid; gap: 2px; min-width: 0; }
.tt-arquivo-pronto b { overflow: hidden; color: var(--ink); font: 720 var(--fs-14)/1.3 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.tt-arquivo-pronto small { color: var(--ink-3); font-size: var(--fs-12); }
.tt-arquivo-pronto button { min-height: 42px; padding: 0 10px; border-radius: 10px; color: var(--sky-ink); font: 700 var(--fs-12)/1 var(--font-ui); }
.tt-fonte-painel > label, .tt-objetivo label { display: block; margin-bottom: 8px; color: var(--ink-2); font: 680 var(--fs-12)/1.3 var(--font-ui); }
.tt-url { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); }
.tt-url:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.tt-url svg { flex: none; color: var(--coral); }
.tt-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.tt-fonte-painel > p { margin-top: 7px; color: var(--ink-3); font-size: var(--fs-11); }
.tt-objetivo { padding: 22px 24px 0; }
.tt-objetivo label span { color: var(--ink-3); font-weight: 520; }
.tt-objetivo input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); outline: 0; background: var(--surface-2); }
.tt-objetivo input:focus { border-color: var(--sky); background: var(--surface); box-shadow: 0 0 0 3px var(--sky-soft); }
.tt-entrada-pe { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 24px; }
.tt-entrada-pe p { color: var(--ink-3); font-size: var(--fs-11); }
.tt-entrada-pe .btn { flex: none; width: auto; min-height: 48px; margin: 0; padding-inline: 21px; }
.tt-processando, .tt-erro { max-width: 880px; margin: 16px auto 0; border-radius: var(--r-lg); }
.tt-processando { position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px; overflow: hidden; padding: 20px; border: 1px solid var(--border); background: var(--surface); }
.tt-pensando { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--m-lilas-bg); color: var(--m-lilas-ink); animation: tt-respirar 1.4s var(--ease-out) infinite alternate; }
.tt-processando h2 { font: 730 var(--fs-16)/1.2 var(--font-ui); }
.tt-processando p { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-12); }
.tt-processando-linha { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--surface-2); }
.tt-processando-linha i { display: block; width: 38%; height: 100%; background: var(--sky); animation: tt-lendo 1.5s var(--ease-in-out, ease-in-out) infinite; }
@keyframes tt-lendo { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } }
@keyframes tt-respirar { to { transform: scale(1.06); box-shadow: 0 8px 22px -14px var(--m-lilas-dot); } }
.tt-erro { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); background: var(--danger-soft); color: var(--danger); }
.tt-erro b { font-size: var(--fs-13); }
.tt-erro span { grid-column: 1; font-size: var(--fs-12); }
.tt-erro button { grid-column: 2; grid-row: 1 / span 2; min-height: 42px; padding: 0 10px; border-radius: 10px; font: 720 var(--fs-12)/1 var(--font-ui); }

.tt-estudo-cabecalho { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 14px; margin: 0 0 12px; }
.tt-estudo-cabecalho .back-btn { margin: 0; }
.tt-estudo-cabecalho > div { min-width: 0; text-align: center; }
.tt-estudo-cabecalho h1 { overflow: hidden; font: 680 var(--fs-19)/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.tt-estudo-cabecalho p { overflow: hidden; margin-top: 2px; color: var(--ink-3); font-size: var(--fs-11); text-overflow: ellipsis; white-space: nowrap; }
.tt-apoio-toggle { display: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-2); }
.tt-shell { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) 330px; height: clamp(610px, calc(100dvh - 150px), 850px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.tt-percurso { min-width: 0; overflow: auto; padding: 20px 13px; border-right: 1px solid var(--border); background: var(--surface-2); }
.tt-percurso-titulo { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 14px; color: var(--ink-2); font: 730 var(--fs-12)/1 var(--font-ui); }
.tt-percurso-titulo button { display: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink-3); }
.tt-modulo { padding: 11px 7px 8px; border-top: 1px solid var(--border); }
.tt-modulo:first-child { border-top: 0; }
.tt-modulo > b { display: block; color: var(--ink); font: 730 var(--fs-12)/1.3 var(--font-ui); }
.tt-modulo > p { margin: 3px 0 9px; color: var(--ink-3); font: 520 var(--fs-11)/1.4 var(--font-ui); }
.tt-modulo button { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; width: 100%; min-height: 42px; padding: 6px; border-radius: 10px; color: var(--ink-2); text-align: left; font: 610 var(--fs-11)/1.35 var(--font-ui); }
.tt-modulo button:hover { background: color-mix(in srgb, var(--surface) 62%, transparent); color: var(--ink); }
.tt-modulo button.is-atual { background: var(--sky-soft); color: var(--sky-ink); font-weight: 730; }
.tt-modulo button i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%; font: normal 700 .625rem/1 var(--font-ui); }
.tt-modulo button.is-atual i { border-color: var(--sky); background: var(--sky); color: #fff; }
.tt-aula { min-width: 0; overflow: auto; scroll-behavior: smooth; }
.tt-aula-barra { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 62px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.tt-aula-barra > button { display: none; align-items: center; gap: 6px; min-height: 42px; padding: 0 8px; border-radius: 10px; color: var(--ink-2); font: 700 var(--fs-11)/1 var(--font-ui); }
.tt-aula-barra > button:last-child { justify-self: end; }
.tt-aula-barra > div { display: grid; justify-items: center; gap: 7px; }
.tt-aula-barra span { color: var(--ink-3); font: 650 var(--fs-11)/1 var(--font-ui); }
#tt-progresso { display: flex; gap: 5px; width: 150px; }
#tt-progresso i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--border); }
#tt-progresso i.is-on { background: var(--sky); }
.tt-licao { width: min(calc(100% - 40px), 690px); min-height: calc(100% - 190px); margin: 0 auto; padding: 52px 10px 44px; outline: 0; }
.tt-licao > p { margin-bottom: 11px; color: var(--sky-ink); font: 720 var(--fs-12)/1.3 var(--font-ui); }
.tt-licao h2 { max-width: 17ch; font: 690 clamp(29px, 3.4vw, 43px)/1.06 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
#tt-licao-corpo { margin-top: 25px; color: var(--ink); font: 450 clamp(16px, 1.5vw, 18px)/1.75 var(--font-ui); }
#tt-licao-corpo p { margin: 0 0 1.25em; }
#tt-licao-corpo .md-h { margin-top: 1.8em; color: var(--ink); font-weight: 760; }
#tt-licao-corpo ul { margin: 1em 0 1.4em; padding-left: 1.2em; }
#tt-licao-corpo li { margin: .4em 0; }
.tt-aula-pe { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.tt-ajudas { display: flex; flex-wrap: wrap; gap: 3px; }
.tt-ajudas button { min-height: 38px; padding: 0 8px; border-radius: 9px; color: var(--ink-3); font: 660 var(--fs-11)/1 var(--font-ui); }
.tt-ajudas button:hover { background: var(--surface-2); color: var(--ink); }
#tt-continuar { flex: none; width: auto; min-height: 44px; margin: 0; }
.tt-chat { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--border); background: var(--surface); }
.tt-chat > header { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.tt-chat > header > div { display: flex; align-items: center; gap: 7px; color: var(--sky-ink); font-size: var(--fs-13); }
#tt-chat-fechar { display: none; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--ink-3); }
.tt-mensagens { flex: 1; min-height: 0; overflow: auto; padding: 18px 14px; }
.tt-msg { display: flex; margin-bottom: 13px; }
.tt-msg > div { max-width: 90%; padding: 10px 12px; border-radius: 5px 15px 15px 15px; background: var(--surface-2); color: var(--ink-2); font: 500 var(--fs-13)/1.52 var(--font-ui); }
.tt-msg > div p { margin: 0 0 7px; }
.tt-msg > div p:last-child { margin-bottom: 0; }
.tt-msg--usuario { justify-content: flex-end; }
.tt-msg--usuario > div { border-radius: 15px 5px 15px 15px; background: var(--sky-soft); color: var(--sky-ink); }
.tt-msg--carregando > div { display: flex; gap: 4px; min-width: 48px; }
.tt-msg--carregando i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: tt-ponto 800ms ease-in-out infinite alternate; }
.tt-msg--carregando i:nth-child(2) { animation-delay: 120ms; }.tt-msg--carregando i:nth-child(3) { animation-delay: 240ms; }
@keyframes tt-ponto { to { opacity: .25; transform: translateY(-2px); } }
.tt-pergunta { display: grid; grid-template-columns: 1fr 42px; align-items: end; gap: 7px; margin: 11px; padding: 7px 7px 7px 11px; border: 1px solid var(--border-strong); border-radius: 16px; }
.tt-pergunta:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.tt-pergunta textarea { width: 100%; max-height: 110px; resize: none; border: 0; outline: 0; background: transparent; font: 500 var(--fs-13)/1.45 var(--font-ui); }
.tt-pergunta button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sky); color: #fff; }
.tt-fundo { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(24,29,31,.4); }

@media (max-width: 1249px) {
  .tt-shell { grid-template-columns: minmax(0, 1fr) 330px; }
  .tt-percurso { position: absolute; z-index: var(--z-sheet); inset: 0 auto 0 0; width: min(300px, 88%); box-shadow: var(--shadow-float); transform: translateX(-105%); transition: transform var(--t-med) var(--ease-out); }
  .tt-shell.percurso-aberto .tt-percurso { transform: translateX(0); }
  .tt-percurso-titulo button, .tt-aula-barra > button:first-child { display: grid; }
}
@media (max-width: 899px) {
  .tt-cabecalho { display: grid; gap: 16px; margin-top: 18px; }
  .tt-cabecalho h1 { font-size: 39px; }
  .tt-fonte-painel { padding: 18px 16px 0; }
  .tt-drop { align-items: flex-start; min-height: 164px; padding: 20px; }
  .tt-drop em { align-self: flex-end; margin: 0 0 2px auto; text-align: right; }
  .tt-objetivo { padding: 18px 16px 0; }
  .tt-entrada-pe { align-items: stretch; flex-direction: column; padding: 18px 16px; }
  .tt-entrada-pe .btn { width: 100%; justify-content: center; }
  .tt-estudo-cabecalho { grid-template-columns: 92px 1fr 44px; }
  .tt-estudo-cabecalho .back-btn { font-size: 0; gap: 0; }
  .tt-estudo-cabecalho .back-btn svg { width: 18px; height: 18px; }
  .tt-apoio-toggle { display: grid; }
  .tt-shell { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 154px); min-height: 560px; margin-inline: -12px; border-inline: 0; border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .tt-aula-barra { min-height: 58px; padding: 8px 10px; }
  .tt-aula-barra > button { display: flex; }
  .tt-licao { width: min(calc(100% - 20px), 650px); min-height: calc(100% - 215px); padding: 38px 10px 34px; }
  .tt-licao h2 { font-size: 31px; }
  #tt-licao-corpo { font-size: 17px; }
  .tt-aula-pe { align-items: stretch; flex-direction: column; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .tt-ajudas { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tt-ajudas button { min-height: 40px; padding: 4px; line-height: 1.2; }
  #tt-continuar { width: 100%; justify-content: center; }
  .tt-chat { position: fixed; z-index: var(--z-sheet); left: 0; right: 0; bottom: 0; width: 100%; height: min(76dvh, 680px); border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: var(--shadow-float); transform: translateY(105%); transition: transform var(--t-med) var(--ease-out); }
  .tt-shell.chat-aberto .tt-chat { transform: translateY(0); }
  .tt-chat::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; border-radius: 4px; background: var(--border-strong); transform: translateX(-50%); }
  .tt-chat > header { padding-top: 13px; }
  #tt-chat-fechar { display: grid; }
  .tt-pergunta { margin-bottom: calc(11px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .tt-cabecalho h1 { font-size: 34px; }
  .tt-cabecalho p { font-size: 15px; }
  .tt-drop { display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
  .tt-drop-icone { width: 48px; height: 48px; }
  .tt-drop em { grid-column: 1 / -1; justify-self: start; text-align: left; }
  #tt-progresso { width: 104px; }
  .tt-aula-barra > button { width: 42px; justify-content: center; overflow: hidden; color: transparent; gap: 0; }
  .tt-aula-barra > button svg { flex: none; color: var(--ink-2); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-pensando, .tt-processando-linha i, .tt-msg--carregando i { animation: none; }
  .tt-percurso, .tt-chat { transition: none; }
}

/* ============ v253 — Tutor: polimento de mecânica e chegada ============ */
/* a troca de parte respira: o conteúdo novo entra subindo de leve */
.tt-entra { animation: tt-parte-entra 240ms var(--ease-out) both; }
@keyframes tt-parte-entra { from { opacity: 0; transform: translateY(9px); } }
/* voltar: discreto ao lado do Continuar — folhear para trás sem sair da aula */
.tt-passos { display: flex; flex: none; align-items: center; gap: 8px; }
.tt-voltar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--ink-2); transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.tt-voltar:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.tt-voltar:disabled { opacity: .32; cursor: default; }
/* lição atravessada: o ✓ ganha a cor de feito */
.tt-modulo button.is-feita i { border-color: var(--success); background: var(--success-soft); color: var(--success); }
/* ajudas são AÇÃO, não legenda: contraste de gente viva */
.tt-ajudas button { color: var(--ink-2); }
/* a chegada */
.tt-fim { width: min(calc(100% - 40px), 560px); margin: 0 auto; padding: 72px 10px 60px; text-align: center; }
.tt-fim-selo { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 22px; background: var(--success-soft); color: var(--success); }
.tt-fim h2 { font: 690 clamp(28px, 3vw, 38px)/1.08 var(--font-display); letter-spacing: -.03em; }
.tt-fim > p { max-width: 44ch; margin: 14px auto 0; color: var(--ink-2); font: 470 var(--fs-15)/1.6 var(--font-ui); }
.tt-fim-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.tt-fim-acoes .btn { width: auto; min-height: 46px; margin: 0; padding-inline: 18px; }
@media (max-width: 899px) {
  .tt-passos { width: 100%; }
  /* o width:100% antigo do #tt-continuar somava ao Voltar e estourava o cartão */
  .tt-passos #tt-continuar { width: auto; flex: 1; }
  .tt-fim { padding-top: 48px; }
  .tt-fim-acoes { flex-direction: column; }
  .tt-fim-acoes .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tt-entra { animation: none; } }

/* ============ v258 — Exportar o noteboard (.md e PDF via impressão) ============ */
#folha-impressao { display: none; }
@media print {
  /* só a folha existe para a impressora */
  body > *:not(#folha-impressao) { display: none !important; }
  body { background: #fff !important; }
  #folha-impressao {
    display: block !important; position: static;
    max-width: 17cm; margin: 0 auto;
    color: #111; font: 400 12pt/1.65 var(--font-ui), Georgia, serif;
  }
  #folha-impressao .md-h1, #folha-impressao h1 { font-size: 22pt; font-weight: 800; margin: 0 0 14pt; line-height: 1.15; }
  #folha-impressao .md-h2, #folha-impressao h2 { font-size: 15pt; font-weight: 760; margin: 18pt 0 7pt; break-after: avoid-page; }
  #folha-impressao .md-h3, #folha-impressao h3 { font-size: 13pt; font-weight: 720; margin: 14pt 0 5pt; break-after: avoid-page; }
  #folha-impressao p, #folha-impressao .md-line { margin: 0 0 8pt; orphans: 3; widows: 3; }
  #folha-impressao ul, #folha-impressao ol { margin: 0 0 8pt 1.2em; }
  #folha-impressao mark { background: #f3ecc9; color: inherit; }
  #folha-impressao a { color: inherit; text-decoration: none; }
  #folha-impressao img { max-width: 100%; }
}

/* ============ v259 — Tutor modelado no Heptabase ============ */
/* o percurso mostra a PROMESSA de cada lição e a âncora na fonte */
.tt-modulo button span { display: grid; gap: 2px; }
.tt-modulo button em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-3); font: 500 var(--fs-11)/1.35 var(--font-ui); font-style: normal; }
.tt-modulo button.is-atual em { color: color-mix(in srgb, var(--sky-ink) 70%, transparent); }
.tt-modulo button i { align-self: start; margin-top: 2px; font-size: .56rem; letter-spacing: -0.02em; }
.tt-modulo-ref { margin: 6px 7px 2px; color: var(--ink-3); font: 600 var(--fs-10, 10px)/1.3 var(--font-mono); }
/* leitura protagonista: corpo e título maiores, coluna de leitura larga */
.tt-licao { width: min(calc(100% - 40px), 720px); }
#tt-licao-corpo { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.78; }
#tt-licao-corpo .md-h { font-size: 1.12em; }
.tt-licao h2 { max-width: 20ch; }
/* modo imersivo: o app sai de cena, o estudo É a tela */
@media (min-width: 900px) {
  body.tutor-imersivo .tabbar { display: none; }
  body.tutor-imersivo .tt-shell { height: calc(100dvh - 92px); max-height: none; }
}
@media (max-width: 899px) {
  body.tutor-imersivo .tabbar { display: none; }
  body.tutor-imersivo .tt-shell { height: calc(100dvh - 74px); }
}
/* percurso recolhível também no desktop largo */
@media (min-width: 1250px) {
  .tt-aula-barra > button:first-child { display: flex; }
  .tt-shell.percurso-recolhido { grid-template-columns: 0 minmax(0, 1fr) 330px; }
  .tt-shell.percurso-recolhido .tt-percurso { display: none; }
}

/* ============ v260 — Anotar no estudo + biblioteca de percursos ============ */
/* abas do painel de apoio */
.tt-lado-abas { display: flex; gap: 3px; }
.tt-lado-abas button { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px; border-radius: 10px; color: var(--ink-3); font: 700 var(--fs-12)/1 var(--font-ui); }
.tt-lado-abas button[aria-selected="true"] { background: var(--sky-soft); color: var(--sky-ink); }
.tt-lado-abas button i { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--sky); color: #fff; font-size: .625rem; font-style: normal; }
.tt-chat[data-aba="nota"] .tt-mensagens, .tt-chat[data-aba="nota"] .tt-pergunta { display: none; }
.tt-chat[data-aba="chat"] .tt-nota { display: none; }
/* o composer de anotação */
.tt-nota { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 9px; overflow: auto; padding: 14px; }
.tt-nota-dica { color: var(--ink-3); font: 520 var(--fs-11)/1.5 var(--font-ui); }
.tt-nota-lista { display: grid; gap: 6px; padding-bottom: 6px; }
.tt-nota-lista-t { margin-top: 6px; color: var(--ink-3); font: 700 var(--fs-11)/1 var(--font-ui); }
.tt-nota-item { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); text-align: left; }
.tt-nota-item:hover { background: var(--surface); border-color: var(--border-strong); }
.tt-nota-item b { font: 720 var(--fs-12)/1.3 var(--font-ui); }
.tt-nota-item span { color: var(--ink-3); font: 500 var(--fs-11)/1.4 var(--font-ui); }
/* o Anotar mora junto das ajudas, com cara de ação */
.tt-anotar { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--ink-2); font: 680 var(--fs-11)/1 var(--font-ui); }
.tt-anotar:hover { background: var(--surface-2); color: var(--ink); }
/* a biblioteca de percursos na tela inicial */
.tt-salvos { max-width: 880px; margin: 26px auto 0; }
.tt-salvos-cabeca h2 { font: 700 var(--fs-19)/1.2 var(--font-display); }
.tt-salvos-cabeca p { margin: 3px 0 12px; color: var(--ink-3); font-size: var(--fs-12); }
.tt-salvo { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.tt-salvo:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.tt-salvo-abrir { display: grid; gap: 3px; min-height: 56px; padding: 8px 10px; border-radius: var(--r-md); text-align: left; }
.tt-salvo-abrir b { font: 730 var(--fs-14)/1.25 var(--font-ui); }
.tt-salvo-abrir span { color: var(--ink-3); font: 550 var(--fs-11)/1.3 var(--font-ui); }
.tt-salvo-acao { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink-3); }
.tt-salvo-acao:hover { background: var(--surface-2); color: var(--ink); }
.tt-salvo-perigo:hover { background: var(--danger-soft); color: var(--danger); }
.tt-salvo-editar { min-height: 34px; padding: 0 9px; border: 1px solid var(--sky); border-radius: 8px; outline: 0; background: var(--surface); font: 730 var(--fs-14)/1.25 var(--font-ui); box-shadow: 0 0 0 3px var(--sky-soft); }

/* v260: no estudo imersivo o palco recupera a tela toda */
body.tutor-imersivo .app-main { max-width: none; padding: 16px 24px 16px; }
@media (max-width: 899px) {
  body.tutor-imersivo .app-main { padding: 10px 12px 10px; }
}

/* v263: a aula sendo escrita — pulso discreto, nunca tela muda */
.tt-escrevendo { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font: 600 var(--fs-13)/1.4 var(--font-ui); }
.tt-escrevendo i { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); animation: tt-escreve-pulso 900ms ease-in-out infinite alternate; }
@keyframes tt-escreve-pulso { to { opacity: .3; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .tt-escrevendo i { animation: none; } }

/* ============ v264 — composer da casa no Tutor + grifo de leitura ============ */
/* o card de anotação herda a pele do composer; só o encaixe é local */
.tt-nota-card { width: 100%; }
.tt-nota-card .ni-corpo .cm-scroller { max-height: 280px; }
/* a ferramenta de grifo sobre o texto da IA — a mesma família do sel-ferramenta */
#tt-grifo { position: fixed; z-index: var(--z-toast, 90); display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float); }

/* ============ v266 — referências da aula (modelo Heptabase) ============ */
/* o marcador [n]: sobrescrito azul clicável, discreto como nota de rodapé */
.tt-ref { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 1px; padding: 0 4px; border-radius: 8px; background: var(--sky-soft); color: var(--sky-ink); font: 700 .625rem/1 var(--font-mono); vertical-align: super; cursor: pointer; transition: background var(--t-fast) var(--ease-out); }
.tt-ref:hover { background: var(--sky); color: #fff; }
/* o índice da parte */
.tt-fontes { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.tt-fontes-t { margin-bottom: 9px; color: var(--ink-3); font: 700 var(--fs-11)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
.tt-fonte-item { display: grid; grid-template-columns: 20px 1fr; gap: 9px; width: 100%; padding: 8px 9px; border-radius: 10px; text-align: left; align-items: start; }
.tt-fonte-item:hover { background: var(--surface-2); }
.tt-fonte-item i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 8px; background: var(--sky-soft); color: var(--sky-ink); font: 700 .625rem/1 var(--font-mono); font-style: normal; margin-top: 1px; }
.tt-fonte-item span { color: var(--ink-2); font: 500 var(--fs-12)/1.5 var(--font-ui); font-style: italic; }
/* o dialog da passagem original */
dialog#dlg-ref { border: 0; padding: 0; background: transparent; }
dialog#dlg-ref::backdrop { background: rgba(24, 29, 31, 0.44); }
#dlg-ref .dlg-mini { min-width: min(620px, 92vw); max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-float); }
.ref-corpo { max-height: 46vh; overflow: auto; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font: 460 var(--fs-14)/1.7 var(--font-ui); white-space: pre-wrap; }
.ref-corpo mark { background: var(--sky-soft); color: var(--ink); padding: 1px 2px; border-radius: 4px; font-weight: 640; }
.ref-aviso { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-12); }

/* ============ v268 — Foco: sala de estudo com a árvore do tempo ============ */
.foco-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: min(100%, 980px); margin: 0 auto; padding: 18px 20px 0; }
.foco-topo .focus-kicker { margin: 14px 0 0; text-align: left; }
/* o timer-árvore: um cartão vivo no canto — clicar pausa */
.foco-timer { display: flex; flex: none; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.foco-timer:hover { box-shadow: var(--shadow-float); transform: translateY(-1px); }
.foco-tempo { display: grid; justify-items: end; gap: 1px; }
.foco-tempo strong { font: 740 var(--fs-19)/1 var(--font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.foco-tempo span { color: var(--ink-3); font: 650 var(--fs-10, 10px)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
.foco-arvore { display: block; width: 58px; height: 70px; }
.foco-arvore svg { width: 100%; height: 100%; overflow: visible; }
.arv-solo { fill: color-mix(in srgb, var(--ink) 14%, transparent); }
.arv-tronco { stroke: #8a6a4b; stroke-width: 4.5; stroke-dasharray: 90; stroke-dashoffset: calc(90 - 90 * var(--cresc, 0)); }
.arv-galho { stroke: #8a6a4b; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 900ms var(--ease-out); }
.arv-copa { fill: var(--success); opacity: .92; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 900ms var(--spring-soft, cubic-bezier(.34,1.4,.64,1)); }
.arv-c2 { fill: color-mix(in srgb, var(--success) 82%, #e9f0c8); }
.arv-c3 { fill: color-mix(in srgb, var(--success) 90%, #2c5a3f); }
.arv-fruto { fill: var(--coral, #e2725b); transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--spring-soft, cubic-bezier(.34,1.4,.64,1)); }
[data-estagio="2"] .arv-g1, [data-estagio="3"] .arv-g1, [data-estagio="4"] .arv-g1, [data-estagio="5"] .arv-g1 { stroke-dashoffset: 0; }
[data-estagio="3"] .arv-g2, [data-estagio="4"] .arv-g2, [data-estagio="5"] .arv-g2 { stroke-dashoffset: 0; }
[data-estagio="2"] .arv-c1, [data-estagio="3"] .arv-c1, [data-estagio="4"] .arv-c1, [data-estagio="5"] .arv-c1 { transform: scale(1); }
[data-estagio="3"] .arv-c2, [data-estagio="4"] .arv-c2, [data-estagio="5"] .arv-c2 { transform: scale(1); }
[data-estagio="4"] .arv-c3, [data-estagio="5"] .arv-c3 { transform: scale(1); }
[data-estagio="5"] .arv-f1, [data-estagio="5"] .arv-f2 { transform: scale(1); }
.foco-timer[aria-pressed="true"] .arv-copa { opacity: .45; }
.foco-timer[aria-pressed="true"] .foco-tempo strong { opacity: .5; }
/* o palco: o composer da casa no centro, sem nada gritando ao redor */
.foco-palco { width: min(100%, 760px); flex: 1; min-height: 0; margin: 0 auto; padding: 26px 20px 8px; overflow: auto; }
.foco-card { width: 100%; }
.foco-card .ni-corpo .cm-scroller { max-height: min(46dvh, 460px); min-height: 180px; }
.foco-colheita { margin-top: 16px; }
.foco-colheita-t { color: var(--ink-3); font: 700 var(--fs-11)/1 var(--font-ui); margin-bottom: 7px; }
.foco-pe { width: min(100%, 760px); margin: 0 auto; padding: 8px 20px 20px; }
@media (max-width: 640px) {
  .foco-topo { padding: 12px 12px 0; }
  .foco-palco { padding: 16px 12px 6px; }
  .foco-arvore { width: 46px; height: 56px; }
  .foco-tempo strong { font-size: var(--fs-16); }
}
@media (prefers-reduced-motion: reduce) {
  .arv-copa, .arv-fruto, .arv-galho { transition: none; }
  .foco-timer { transition: none; }
}

/* v268: o overlay vira SALA — colunas topo/palco/pé, fundo sólido de leitura */
.focus-overlay.is-open { justify-content: flex-start; align-items: stretch; padding: 0; background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ============ v269 — foco simples: cards reais, voz, sem mudinha ============ */
/* a colheita é uma grade de cards da casa */
#foco-colheita-lista { margin-top: 4px; }
.foco-colheita { margin-top: 22px; }
/* o mic do card: irmão do +, pulsa gravando */
.foco-mic { margin-left: 6px; }
.foco-mic.is-rec { background: var(--danger, #b4442c); color: #fff; animation: foco-mic-pulso 1s ease-in-out infinite alternate; }
@keyframes foco-mic-pulso { to { transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger, #b4442c) 18%, transparent); } }
.foco-mic-estado { margin-left: 8px; color: var(--ink-3); font: 650 var(--fs-11)/1 var(--font-ui); }
@media (prefers-reduced-motion: reduce) { .foco-mic.is-rec { animation: none; } }

/* v270: a barra da colheita — contagem à esquerda, Expandir/Recolher à direita */
.foco-colheita-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.foco-colheita-barra .foco-colheita-t { margin: 0; }
.foco-colheita-barra .expandir-btn { width: auto; }

/* ============ v271 — timer ao centro e pip flutuante (busca lateral morreu no v272) ============ */
.foco-timer-linha { display: flex; justify-content: center; padding: 10px 20px 0; }
/* o timer flutuante: a sessão te acompanha pelo app */
.foco-pip { position: fixed; right: 18px; bottom: 84px; z-index: var(--z-toast, 90); display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-float); cursor: grab; touch-action: none; }
.foco-pip:active { cursor: grabbing; }
.foco-pip-arvore { width: 34px; height: 42px; }
.foco-pip-tempo { display: grid; justify-items: start; gap: 0; }
.foco-pip-tempo strong { font: 740 var(--fs-14)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.foco-pip-tempo span { color: var(--ink-3); font: 650 .5625rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
/* ============ v272 — sala num eixo só; consultar o acervo = painel de fixados ============ */
/* topo em grade real: o nome da fonte centra de verdade entre Voltar e Acervo */
.foco-topo { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; }
.foco-topo .foco-voltar { justify-self: start; margin: 0; }
.foco-topo .focus-kicker { margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foco-acervo { justify-self: end; margin: 0; gap: 7px; }
body.com-fixados .foco-acervo { color: var(--ink); }
/* o terrário: o vazio acima do broto é o espaço que a sessão vai preencher */
.foco-timer { padding: 8px 18px 8px 8px; }
.foco-timer .foco-arvore, .foco-pip .foco-arvore { background: var(--surface-2); border-radius: 12px; }
.foco-pip .foco-arvore { border-radius: 8px; }
.foco-tempo { justify-items: start; }
/* painel aberto: a sala inteira re-centra no espaço restante — um eixo, sempre */
@media (min-width: 900px) {
  body.com-fixados .focus-overlay.is-open { padding-right: 336px; }
}
@media (max-width: 899px) {
  .foco-acervo { display: none; }   /* no celular o painel de fixados não existe (como no app) */
}

/* ============ v273 — Preparar: a fonte é a pergunta da tela ============ */
/* a coluna vira um momento centrado: pergunta gigante → tempo → um botão */
.prep { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: min(64dvh, 540px); margin-top: 0; padding-bottom: 4dvh; }
.prep-fonte {
  display: inline-flex; align-items: center; gap: 13px; max-width: 100%;
  padding: 16px 26px; border: 2px dashed var(--border-strong); border-radius: 24px;
  font-family: var(--font-display); font-size: var(--fs-23); font-weight: 700;
  letter-spacing: -0.024em; line-height: 1.16; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              transform var(--t-spring) var(--spring), box-shadow var(--t-fast) var(--ease-out);
}
.prep-fonte:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.prep-fonte:active { transform: scale(0.97); }
.prep-fonte.is-on { border-color: transparent; border-style: solid; box-shadow: var(--shadow-card); animation: chip-pop var(--t-spring) var(--spring); }
.prep-fonte.is-on:hover { box-shadow: var(--shadow-float); }
.prep-fonte .dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.prep-fonte-nome { min-width: 0; overflow-wrap: anywhere; }
.prep-espera { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.prep-quanto { margin-top: 46px; color: var(--ink-2); font-size: var(--fs-13); font-weight: 650; }
.prep .bloco-row { margin-top: 12px; justify-content: center; }
.prep .prep-cta { margin-top: 36px; width: 100%; max-width: 420px; }
@media (min-width: 900px) {
  .prep-fonte { font-size: var(--fs-28); padding: 18px 32px; }
}
/* cascata do preparo, reescrita para os filhos novos */
#v-preparar.is-active .prep > *:nth-child(2) { animation-delay: 60ms; }
#v-preparar.is-active .prep > *:nth-child(3) { animation-delay: 120ms; }
#v-preparar.is-active .prep > *:nth-child(4) { animation-delay: 180ms; }
#v-preparar.is-active .prep > *:nth-child(5) { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .prep-fonte.is-on { animation: none; }
  .prep-fonte, .prep-fonte:hover, .prep-fonte:active { transform: none; }
}

/* ============ v284 — nota longa expandida vira PRÉVIA com "Ver mais" ============ */
.note-item.tem-mais:not(.is-inteira) .note-full {
  max-height: 320px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
}
.ver-mais {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 5px 12px; min-height: 30px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font: 650 var(--fs-12)/1 var(--font-ui);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.ver-mais:hover { color: var(--ink); border-color: var(--ink); }

/* v285: Números vive nos Ajustes; o rail ficou mais quieto */
.ajustes-nav .aj-numeros { display: inline-flex; align-items: center; gap: 7px; }
.ajustes-nav .aj-numeros svg { flex: none; }
#v-stats > .back-btn { margin-bottom: 0; }

/* ============ v285 — O menu da fonte (modelo Supernotes): o título é o menu ============ */
/* os ícones do canto superior direito morreram — tudo mora no menu do título */
.fonte-acoes { display: none !important; }
.menu-fonte-wrap { position: relative; display: inline-block; max-width: 100%; }
#lib-folder.e-categoria .menu-wrap.menu-fonte-wrap:first-child { display: inline-block; }
#lib-folder.e-categoria .menu-fonte-acoes { display: none; }
.fonte-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  margin: -4px -10px; padding: 4px 10px; border-radius: 12px;
  font: inherit; color: inherit; text-align: left; letter-spacing: inherit;
  transition: background var(--t-fast) var(--ease-out);
}
.fonte-btn:hover, .fonte-btn[aria-expanded="true"] { background: var(--surface-2); }
.fonte-btn > span { min-width: 0; overflow-wrap: anywhere; }
.fonte-chevron { flex: none; color: var(--ink-3); transition: transform var(--t-fast) var(--ease-out); }
.fonte-btn[aria-expanded="true"] .fonte-chevron { transform: rotate(180deg); }
.folder-lapis { vertical-align: middle; margin-left: 4px; }
/* o popover: um pouco mais largo que os menus de modo; itens com valor/seta/switch */
/* v313 — destilado: quatro linhas de texto, sem ícones nem cabeçalhos. O
   rótulo fala; o valor atual responde em voz baixa à direita; uma única
   linha fina separa o que é destrutivo. */
.menu-fonte { min-width: 232px; left: -6px; padding: 5px; font-family: var(--font-ui); letter-spacing: 0; }
.menu-fonte button { min-height: 36px; padding: 7px 10px; gap: 8px; border-radius: 9px; font-weight: 500; }
.menu-fonte .menu-valor { font-style: normal; font-size: var(--fs-12); font-weight: 400; color: var(--ink-2); }
.menu-fonte .ctx-sep { margin: 4px 10px; }
/* superfície OPACA: menu sobre texto de leitura não pode deixar o texto vazar por trás */
.menu-fonte { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 900px) {
  .menu-fonte .menu-item-sub > .menu-sub { min-width: 188px; padding: 5px; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (pointer: coarse), (max-width: 899px) { .menu-fonte button { min-height: 44px; } }
.menu-fonte kbd { font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2); padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 5px; }
.menu-seta {
  width: 12px; height: 12px; flex: none; background: var(--ink-3);
  -webkit-mask: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  mask: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
/* o interruptor (à la Supernotes): pílula que acende no aria-checked */
.menu-switch { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: var(--border-strong); transition: background var(--t-fast) var(--ease-out); }
.menu-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast) var(--ease-out); }
[aria-checked="true"] > .menu-switch { background: var(--sky); }
[aria-checked="true"] > .menu-switch::after { transform: translateX(12px); }
.menu-fonte [role="menuitemcheckbox"][aria-checked="true"] { color: var(--ink); }
.menu-fonte [role="menuitemcheckbox"][aria-checked="true"] svg { color: var(--ink-2); }
/* submenus: flyout à direita no desktop (hover ou clique), acordeão embaixo no celular */
.menu-item-sub { position: relative; }
.menu-item-sub > .menu-sub { display: none; position: absolute; top: -6px; left: calc(100% - 2px); min-width: 250px; padding: 6px; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--shadow-float), var(--inset-glass); z-index: 1; }
.menu-item-sub.is-aberto > .menu-sub { display: block; }
@media (hover: hover) and (min-width: 900px) {
  .menu-item-sub:hover > .menu-sub { display: block; }
  .menu-item-sub:hover > .menu-sub-btn, .menu-item-sub.is-aberto > .menu-sub-btn { background: var(--surface-2); }
  /* sem espaço à direita, o flyout abre à esquerda */
  .menu-fonte.sub-esquerda .menu-item-sub > .menu-sub { left: auto; right: calc(100% - 2px); }
}
@media (max-width: 899px) {
  .menu-item-sub > .menu-sub { position: static; margin: 2px 0 6px 22px; padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-item-sub.is-aberto > .menu-sub-btn { background: var(--surface-2); }
}
@media (max-width: 640px) {
  .menu-fonte { min-width: min(300px, calc(100vw - 32px)); }
}

/* v285b — como o Supernotes de verdade: submenu abre no CLIQUE (hover só destaca),
   com cabeçalho apagado; exportar/importar são DIÁLOGOS */
@media (hover: hover) and (min-width: 900px) {
  .menu-item-sub:not(.is-aberto):hover > .menu-sub { display: none; }
}
.menu-fonte .menu-sub [role="menuitemradio"] { padding-left: 10px; }
/* Estilo do cartão "Maximizado": nota longa sem prévia — inteira mesmo */
body.notas-maximizadas .note-item.tem-mais:not(.is-inteira) .note-full { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
body.notas-maximizadas .ver-mais { display: none; }
/* diálogos de transferência */
dialog#dlg-exportar, dialog#dlg-importar { border: 0; padding: 0; background: transparent; width: min(460px, calc(100vw - 28px)); margin: auto; }
dialog#dlg-exportar::backdrop, dialog#dlg-importar::backdrop { background: rgba(24, 29, 31, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.transfer-lista { display: grid; gap: 8px; }
.transfer-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  font: 650 var(--fs-14)/1.2 var(--font-ui); color: var(--ink); text-align: left;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-spring) var(--spring);
}
.transfer-btn:hover { border-color: var(--ink); background: var(--surface-2); }
.transfer-btn:active { transform: scale(0.985); }
.transfer-btn svg { flex: none; color: var(--ink-2); }
.transfer-btn span { flex: 1; }
.transfer-btn kbd { font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2); padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 5px; }
.transfer-nota { margin: 12px 0 0; color: var(--ink-2); font: 500 var(--fs-12)/1.5 var(--font-ui); }
.transfer-passos { margin: 10px 0 14px; padding-left: 20px; color: var(--ink-2); font: 500 var(--fs-13)/1.55 var(--font-ui); display: grid; gap: 6px; }
.transfer-passos b, .transfer-passos code { color: var(--ink); }
.transfer-zona {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 16px;
  border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2);
  font: 650 var(--fs-13)/1.2 var(--font-ui); color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.transfer-zona:hover, .transfer-zona.is-arrastando { border-color: var(--sky); color: var(--sky-ink); background: var(--sky-soft); }
.transfer-zona.tem-arquivos { border-style: solid; border-color: var(--success); color: var(--success); }
#dlg-importar .cf-acoes, #dlg-exportar .cf-acoes { margin-top: 14px; }

/* v285c — cabeçalho da fonte sem encavalar: a pílula do título não invade mais o
   kicker (sem margem vertical negativa), h2 vira linha flex (pílula + lápis
   alinhados de verdade) e o ritmo título → kicker → corpo → barra respira */
.fonte-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin-bottom: 4px; }
.fonte-btn { margin: 0 0 0 -10px; padding: 4px 10px; }
.folder-lapis { margin-left: 0; vertical-align: baseline; }
#folder-meta { margin-top: 2px; }
#folder-corpo.fonte-corpo { margin-top: 12px; }
/* v313 — O TOPO É FIXO, SÓ OS CARDS MUDAM. A nota-mãe, a barra de ferramentas
   e a barra de criar têm sempre a largura da mãe (--regua-topo): trocar de 1
   para 2 ou 3 colunas não as move nem redimensiona — o controle fica sob o
   cursor. Quem responde às colunas é a grade das filhas (--regua). */
#v-biblioteca { --regua: none; --regua-topo: 720px; }
#lib-folder.noteboard-pagina .fonte-head { position: relative; display: block; width: 100%; max-width: var(--regua-topo); margin-inline: auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 28px; }
#lib-folder.noteboard-pagina .fonte-head > .view-head { width: 100%; min-width: 0; }
#lib-folder.noteboard-pagina .fonte-head[data-cor] { background: var(--tinta-bg); border-color: color-mix(in srgb, var(--tinta) 32%, transparent); }
#lib-folder.noteboard-pagina #folder-meta { display: none; }
#lib-folder.noteboard-pagina #nb-migalha { margin-top: 10px; }
#nb-pe { flex-wrap: wrap; gap: 4px; }
#nb-pe .pc-aba { min-width: 44px; min-height: 44px; padding-inline: 6px; }
#nb-pe .pc-aba svg { flex: none; }
#nb-pe .note-more { position: static; flex: none; min-width: 36px; min-height: 40px; margin-left: 0; }
#nb-pe .nb-tag-acoes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; max-width: 100%; }
#nb-pe .pc-pe-tag { margin-left: 0; }
#nb-pe .tag--supertag { max-width: 160px; }
#nb-painel { overflow-wrap: anywhere; }
#nb-props input, #nb-props select { min-width: 0; }
#lib-folder:has(#folder-corpo .is-editando) #nb-pe,
#lib-folder:has(#folder-corpo .is-editando) #nb-painel { display: none; }
#lib-folder.noteboard-pagina .menu-fonte-wrap { width: 100%; }
#lib-folder.noteboard-pagina .fonte-titulo { align-items: flex-start; flex-wrap: nowrap; gap: 12px; padding-right: 40px; font-size: var(--fs-23); }
#lib-folder.noteboard-pagina .fonte-btn { white-space: normal; text-align: left; overflow-wrap: anywhere; }
#lib-folder.noteboard-pagina .folder-lapis { position: absolute; z-index: 1; top: 12px; right: 12px; margin: 0; width: 44px; height: 44px; }
#lib-folder.noteboard-pagina #folder-meta { font: 500 var(--fs-13)/1.5 var(--font-ui); letter-spacing: normal; text-transform: none; }
#lib-folder.noteboard-pagina #folder-corpo { max-width: none; margin-top: 24px; color: var(--ink); font-size: var(--fs-16); }
#folder-corpo .nb-mae, #folder-corpo .nb-mae:hover, #folder-corpo .nb-mae.is-editando {
  width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  cursor: auto; transform: none; animation: none; content-visibility: visible;
}
#folder-corpo .nb-mae .note-full, #folder-corpo .nb-mae .ni-corpo {
  font: 400 var(--fs-16)/1.6 var(--font-ui); color: var(--ink);
  max-width: 74ch;
  max-height: none; overflow: visible; -webkit-line-clamp: unset;
}
#folder-corpo .nb-mae .cm-scroller { max-height: none; }
#folder-corpo .nb-mae .meta { width: 100%; margin-top: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#folder-corpo .nb-mae .meta .tag--supertag { margin-left: auto; }
#folder-corpo .nb-mae .meta .note-more { position: static; margin-left: 0; flex: none; }
#folder-corpo .nb-mae .ni-pe { width: 100%; }
#folder-corpo .nb-mae [data-estante] { display: none; }
#lib-folder.noteboard-pagina #ftab-conhecimento { width: 100%; max-width: none; margin-inline: 0; }
#lib-folder .nb-toolbar,
#lib-folder #ftab-conhecimento .criar-linha,
#lib-folder #folder-notas > .card-sub { width: 100%; max-width: var(--regua-topo); margin-inline: auto; }
/* O compositor de filha também escreve na largura da mãe. Ele mora DENTRO da
   grade (flex em 2–3 colunas): largura máxima sozinha o faria dividir a linha
   com as colunas e espremê-las. Por isso as margens são calculadas — largura
   + margens somam 100%, a linha é só dele, e o card fica centrado. */
#lib-folder #folder-notas > .note-item.is-compondo {
  flex: 0 0 auto; width: min(100%, var(--regua-topo));
  margin-inline: calc((100% - min(100%, var(--regua-topo))) / 2);
}
#lib-folder #folder-notas { max-width: var(--regua); margin-inline: auto; }
#lib-folder.noteboard-pagina #ftab-conhecimento > .card { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* Ferramentas discretas: um único grupo, em vez de uma fila de pílulas. */
#lib-folder .nb-toolbar { justify-content: flex-end; margin: 0 auto 16px; }
#folder-corpo .nb-mae .ni-corpo { min-height: 180px; }
#lib-folder .nb-controles { display: flex; flex: none; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
#lib-folder .nb-controles .modo-btn {
  min-height: 32px; padding: 4px 8px; gap: 6px; border: 0; border-radius: 6px;
  background: transparent; box-shadow: none; font: 500 var(--fs-12)/1.3 var(--font-ui); color: var(--ink-2);
}
#lib-folder .nb-controles .modo-btn:hover,
#lib-folder .nb-controles .modo-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
#lib-folder .nb-controles .modo-btn:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }
#lib-folder .nb-controles .modo-chevron { width: 10px; height: 10px; }
#lib-folder .nb-controles .expandir-btn { width: 32px; padding: 4px; justify-content: center; }
#lib-folder .nb-controles .expandir-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#lib-folder .nb-controles .expandir-btn[aria-pressed="true"] { color: var(--sky-ink); }
@media (pointer: coarse) {
  #nb-migalha .pc-props-btn { min-height: 44px; }
  #nb-props input, #nb-props select { min-height: 44px; }
  #lib-folder .nb-controles .modo-btn { min-height: 44px; }
  #lib-folder .nb-controles .expandir-btn { width: 44px; }
}
#folder-corpo .nb-mae .ni-titulo { font-size: var(--fs-23); line-height: 1.25; }
#folder-corpo .nb-vazio { min-height: 64px; width: 100%; text-align: left; color: var(--ink-2); font: inherit; }
#folder-corpo .nb-vazio:hover { color: var(--ink); }
#lib-folder:has(#folder-corpo .is-editando) .fonte-titulo { display: none; }
#lib-folder:has(#folder-corpo .is-editando) .folder-lapis { display: none; }
#lib-folder:has(#folder-corpo .is-editando) .fonte-head > .view-head { display: flex; flex-direction: column; align-items: stretch; }
#lib-folder:has(#folder-corpo .is-editando) .menu-fonte-wrap { display: none; }
#lib-folder:has(#folder-corpo .is-editando) #folder-corpo,
#lib-folder:has(#folder-corpo .is-editando) .nb-mae { display: contents; }
#lib-folder:has(#folder-corpo .is-editando) .ni-titulo { order: -2; }
#lib-folder:has(#folder-corpo .is-editando) #nb-migalha { order: -1; }
#lib-folder:has(#folder-corpo .is-editando) #nb-linhagem { order: 0; }
#lib-folder:has(#folder-corpo .is-editando) #nb-props { order: 1; }
#lib-folder:has(#folder-corpo .is-editando) .ni-corpo { order: 2; }
#lib-folder:has(#folder-corpo .is-editando) .ni-pe { order: 3; }
#lib-folder:has(#folder-corpo .is-editando) #folder-meta { display: none; }
#lib-folder:has(#folder-corpo .is-editando) #folder-corpo { margin-top: 0; }
#lib-folder.noteboard-pagina:not([data-modo="conhecimento"]) #folder-corpo:not(:has(.is-editando)) { display: none; }
@media (max-width: 599px) {
  #lib-folder.noteboard-pagina .fonte-head { padding: 20px 16px; border-radius: 16px; margin-bottom: 24px; }
  #folder-corpo .nb-mae .ni-titulo { font-size: var(--fs-23); }
  #folder-corpo .nb-mae .ni-pe { flex-wrap: wrap; }
}
.fonte-head { margin-bottom: 20px; }
/* o h2 deixou de ser o alvo de clique (a pílula é o menu; o lápis edita a mãe):
   sem sublinhado fantasma nem cursor de link no espaço entre eles */
#folder-nome { cursor: default; }
#folder-nome:hover { text-decoration: none; }

/* v288 — Navegação mobile: localizar, criar e voltar sem perder o contexto. */
.mobile-nav, .pc-fechar-mobile { display: none; }
.busca-fechar { flex: none; width: 44px; height: 44px; }
dialog#dlg-navegar {
  padding: 0; border: 1px solid var(--border); border-radius: 24px;
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  margin: auto auto 12px; background: var(--surface); box-shadow: var(--shadow-float);
}
dialog#dlg-navegar::backdrop { background: rgb(23 21 15 / 36%); }
.nav-sheet { padding: 10px 16px max(16px, env(safe-area-inset-bottom)); }
.nav-sheet-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 8px; }
.nav-sheet-topo h2 { font: 700 var(--fs-19)/1.3 var(--font-ui); margin: 0; }
.nav-sheet-topo .pc-icone { width: 44px; height: 44px; }
.nav-sheet-lista { display: grid; }
.nav-sheet-lista button {
  display: flex; align-items: center; gap: 14px; min-height: 52px;
  padding: 10px 12px; border-radius: 12px; text-align: left;
  color: var(--ink); font: 600 var(--fs-16)/1.4 var(--font-ui);
}
.nav-sheet-lista button:hover, .nav-sheet-lista button:active { background: var(--surface-2); }
.nav-sheet-lista button[aria-current="page"] { background: var(--sky-soft); color: var(--sky-ink); }
.nav-sheet-lista svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-contagem { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
  .tabbar { gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--chrome); }
  .tabbar > .tab[data-go="tutor"], .tabbar > .tab[data-go="revisao"], .tabbar > .tab[data-go="supertags"] { display: none; }
  .tabbar > .tab { flex: 1 1 0; min-width: 0; min-height: 52px; font-size: var(--fs-11); gap: 4px; padding: 5px 2px; color: var(--chrome-ink); }
  .tabbar > .tab[aria-current="page"], .tabbar > .tab[aria-expanded="true"] { background: var(--chrome-2); }
  .tabbar > .mobile-nav { display: flex; }
  .tabbar > .tab-mais { width: 48px; height: 48px; margin: 0 6px; box-shadow: none; }
  .tabbar .badge { right: 8px; top: 0; }
  #lib-root .lib-notas-wrap { padding: 0; border: 0; box-shadow: none; background: transparent; }
  #lib-root .lib-notas-wrap > .card-head { margin-bottom: 12px; }
  #lib-root .lib-notas-wrap > .card-head .card-title { display: none; }
  #lib-root .lib-notas-wrap > .card-head { flex-wrap: wrap; gap: 6px; }
  #lib-root .lib-notas-wrap > .card-head > .lib-titulo { flex: 0 1 auto; }
  #lib-root .lib-notas-wrap > .card-head > .lib-titulo:has(.dia-filtro:not([hidden])) { flex: 1 0 100%; }
  #lib-root .lib-notas-wrap > .card-head > .barra-dir { flex: 1; justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
  #lib-root .lib-notas-wrap > .card-head .modo-btn { min-height: 44px; padding: 0 10px; font-size: var(--fs-12); }
  .pc-fechar-mobile { display: inline-flex; }
  #dlg-card .pc-acoes { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
  #dlg-card[data-cor] .pc-acoes { background: var(--tinta-bg); }
  #dlg-card .pc-acoes .pc-icone { width: 44px; height: 44px; }
  dialog#dlg-busca { width: 100%; max-width: 100%; margin: 0; max-height: 100dvh; height: 100dvh; }
  #dlg-busca .paleta { border-radius: 0; height: 100%; max-height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  #dlg-busca .paleta-busca { padding: 8px 12px; flex: none; }
  #dlg-busca .busca-filtros { flex: none; }
  #dlg-busca .busca-filtros button { min-height: 44px; }
  #dlg-busca .busca-lista { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
  #dlg-busca .paleta-pe { flex: none; }
  #dlg-busca .paleta-dica:first-child { display: none; }
  #fixados { background: var(--surface); padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
  #fixados .fx-topo { min-height: 48px; }
  #fixados .fx-tirar, #fixados .pc-icone, #fixados .fx-limpar { width: 44px; height: 44px; }
  #fixados .fx-abrir { padding-right: 56px; }
  #fixados .fx-busca input { min-height: 44px; font-size: var(--fs-16); }
  #fixados .fx-lista { overscroll-behavior: contain; }
  #fixados .fx-dica { display: none; } /* instruções de arrastar/Alt não são gestos de toque */
}

/* v289 — Cartões: tinta contínua, hierarquia de leitura e edição por toque.
   Só elementos de leitura: não altera métricas nem transformações do CM. */
:is(.note-grid, .pcf-grade, #foco-colheita-lista) .note-item:not(.is-editando) {
  background: var(--note-bg); border: 1px solid var(--note-border);
  border-radius: 16px; padding: 16px;
  box-shadow: 0 2px 6px -4px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: none;
}
:is(.note-grid, .pcf-grade, #foco-colheita-lista) .note-item.is-alvo:not(.is-editando) {
  box-shadow: 0 0 0 2px var(--anel, var(--anel-neutro));
}
/* O foco de setinha veste a MESMA roupa do alvo — anel de 2px na cor
   do card — e, como no Supernotes (3.2.4, medido via CDP), a borda-base
   apaga enquanto o anel está aceso. Precisa viver AQUI, com o peso do
   :is(#id), senão a superfície v289 logo acima engole o anel. */
:is(.note-grid, .pcf-grade, #foco-colheita-lista) .note-item:not(.is-editando):focus-visible {
  box-shadow: 0 0 0 2px var(--anel, var(--anel-neutro));
  border-color: transparent;
}
.note-item > .t { display: block; padding-right: 38px; overflow-wrap: anywhere; }
:is(.note-grid, .pcf-grade, #foco-colheita-lista) .note-item > .t {
  font-size: var(--fs-19); line-height: 1.3; letter-spacing: -0.015em;
}
.note-item > .note-full { font-size: var(--fs-16); line-height: 1.6; margin-top: 10px; }
.note-item > .note-context {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px;
}
.note-item > .note-context .tag {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, var(--note-bg));
}
.note-item:not(.is-editando) > .meta {
  border-top: 0; padding-top: 0; margin-top: 16px;
  color: color-mix(in srgb, var(--ink) 76%, var(--note-bg));
}
.note-item .note-lapis {
  top: 6px; right: 6px; width: 44px; height: 44px;
  background: transparent; border: 0; box-shadow: none;
  color: color-mix(in srgb, var(--ink) 70%, var(--note-bg));
}
.note-item .note-lapis:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); transform: none;
}
.note-item > .ver-mais {
  display: flex; justify-content: center; min-height: 44px; margin: 4px auto 0;
  border-color: transparent; background: transparent;
  color: color-mix(in srgb, var(--ink) 82%, var(--note-bg));
}
.note-item > .ver-mais:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 899px) {
  .note-item .note-lapis { opacity: 1; transform: none; }
  .note-item > .note-context button { min-height: 44px; }
}

/* v290 — Desktop: pesquisa identificável, leitura ajustável e painéis paralelos. */
.rail-search, .desktop-tools { display: none; }
@media (min-width: 900px) {
  .app-main { min-width: 0; padding: 76px 32px 80px; }
  .tabbar { top: 12px; padding: 14px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .rail-brand { font-size: var(--fs-23); padding: 2px 10px; margin-bottom: 12px; }
  .rail-brand::after { display: none; }
  .tabbar > .tab { min-height: 40px; padding: 8px 10px; }
  .rail-search {
    display: flex; align-items: center; gap: 8px; min-height: 40px;
    width: 100%; padding: 8px 10px; margin-bottom: 10px; border-radius: 10px;
    background: var(--chrome-2); border: 1px solid var(--chrome-border);
    color: var(--chrome-ink); font-size: var(--fs-13); text-align: left;
  }
  .rail-search kbd { margin-left: auto; background: transparent; color: inherit; border-color: var(--chrome-border); box-shadow: none; }
  .rail-search:hover { background: color-mix(in srgb, var(--chrome-ink) 12%, var(--chrome)); }
  .rail-section.rail-fontes { flex: 1 0 auto; }
  #rail-materias { flex: none; overflow: visible; }
  .rail-foot { position: sticky; bottom: -14px; background: var(--chrome); padding: 10px 0 14px; z-index: 1; }
  .rail-foot .tab-ajustes { margin-bottom: 4px; }
  .desktop-tools {
    position: fixed; top: 16px; right: 24px; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: 8px;
  }
  .desktop-tools .fx-toggle, .desk-busca {
    position: static; width: auto; min-height: 40px; height: 40px; padding: 0 12px;
    gap: 7px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-2); box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font-size: var(--fs-13); align-items: center; justify-content: center;
  }
  .desktop-tools .fx-toggle:hover, .desk-busca:hover { transform: none; background: var(--surface-2); color: var(--ink); }
  .desktop-tools .fx-n { position: static; margin-left: 2px; }
  .desk-busca { display: none; }
  body.rail-oculto .desk-busca { display: inline-flex; }
  body.com-fixados .app { padding-right: 320px; }
  body.com-fixados .app-main { padding-right: 32px; }
  body.com-fixados .desktop-tools { right: 344px; }
  .fixados { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .barra-modo { flex-wrap: wrap; row-gap: 8px; }
  #lib-root .lib-notas-wrap { padding: 0; border: 0; background: transparent; box-shadow: none; }
  #lib-root, #ftab-conhecimento, #lib-ent { container-type: inline-size; }
  body[data-colunas="3"] .app-main:has(#v-biblioteca.is-active) { max-width: 1520px; }
  body.biblioteca-ampla .app-main:has(#v-biblioteca.is-active) { max-width: none; }
  /* A RÉGUA da grade (v311, revista na v313). --regua responde às colunas:
     1 coluna = coluna de leitura; 2–3 colunas e “Largura total” = a bancada.
     Na raiz ela vale para cabeçalho, barra de criar e grade; no Noteboard só
     para a grade das filhas — o topo de lá é fixo (--regua-topo). Nenhuma
     superfície escreve um número próprio: todas leem uma das duas variáveis. */
  body[data-colunas="1"]:not(.biblioteca-ampla) #v-biblioteca { --regua: 720px; }
  /* v319: a raiz ganha a MESMA lei do Noteboard — o topo (título, busca, abas,
     cabeçalho da lista e barra de criar) fica sempre na coluna de leitura; quem
     responde às colunas é só a grade. Trocar de 1 para 3 colunas não desloca
     mais nada do que está acima dos cards. */
  #v-biblioteca:has(#lib-root:not([hidden])) > .view-head,
  #lib-root > .seg-linha,
  #lib-root .lib-notas-wrap > .card-head,
  #lib-root .lib-notas-wrap > .criar-linha { max-width: var(--regua-topo); margin-inline: auto; }
  #lib-root > .search { margin-left: max(0px, calc((100% - var(--regua-topo)) / 2)); }
  #lib-root #lib-notas { max-width: var(--regua); margin-inline: auto; }
  #lib-root .lib-notas-wrap > .card-head { margin-bottom: 16px; }
  #lib-root .lib-notas-wrap > .criar-linha { margin-bottom: 12px; }
  .colunas-menu [data-largura-total] { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
  @container (max-width: 640px) {
    .note-grid:has(.mas-col) { display: block; }
    .note-grid > .mas-col { display: contents; }
    .note-grid .note-item { margin-bottom: 12px; }
    .barra-dir { flex-wrap: wrap; }
    .criar-linha .nr-dica { display: none; }
    .criar-linha .nova-pagina { font-size: 0; gap: 0; padding-inline: 14px; flex: none; }
    .criar-linha .nota-rapida { min-width: 0; }
    .lib-notas-wrap > .card-head .card-title { display: none; }
    .lib-notas-wrap > .card-head { flex-wrap: wrap; }
  }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .tabbar { width: 224px; }
  .app-main { padding-inline: 16px; }
  body.com-fixados .app-main { padding-right: 16px; }
}
body.imersivo .desktop-tools, body.tutor-imersivo .desktop-tools { display: none; }

/* Ações do cartão: disponíveis sem botão direito, discretas no rodapé. */
.note-item .meta .note-more {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto;
  border: 0; border-radius: 8px; background: transparent; color: inherit;
  cursor: pointer; order: 100;
}
.note-item .meta .note-more:hover,
.note-item .meta .note-more[aria-expanded="true"] { background: color-mix(in srgb, currentColor 10%, transparent); }
.note-item .note-more:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.note-item .meta:has(.tag--supertag) .note-more { margin-left: 0; }
#menu-ctx { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.ctx-heading { display: flex; align-items: center; gap: 12px; padding-left: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ctx-heading > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--ink-2); }
.ctx-heading button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--ink-2); border-radius: 8px; cursor: pointer; }
.ctx-heading button:hover { background: var(--surface-2); }
#menu-ctx button:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; background: var(--surface-2); }
@media (max-width: 640px) {
  .note-item .meta .note-more { flex-basis: 44px; width: 44px; height: 44px; }
  #menu-ctx { left: 12px !important; right: 12px; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 32px); }
  #menu-ctx button[role="menuitem"] { min-height: 44px; }
  #menu-ctx kbd { display: none; }
  #menu-ctx .cor-dot { min-width: 28px; min-height: 28px; }
  #menu-ctx .ctx-cores { flex-wrap: wrap; }
}

/* ============================================================
   v294 — A EDIÇÃO VESTE A LEITURA (mecânica do Supernotes)
   No SN, entrar em edição não muda a tipografia: título e corpo ficam no
   mesmo lugar, no mesmo corpo de letra e na mesma entrelinha; só nasce a
   barra de ações embaixo. Aqui, medido na bancada leitura × edição,
   superfície por superfície: card da grade (lápis), popup (#dlg-card) e
   folha (#v-escrever vinda da página). Composers (.is-compondo), Quadro,
   sala de foco e Tutor ficam como estão. Números: DESIGN.md → v294.
   ============================================================ */

/* 0. O que a leitura e o editor pintavam diferente */
.editor mark { box-shadow: 0 0 0 2.5px var(--mark); }
/* a citação (> ) existe dos dois lados: o editor recupera o padding que
   .cm-line{padding:0} engolia e a leitura ganha o mesmo bloco */
.editor .cm-line.md-q { padding: 2px 8px; }
.nota-body .md-q, .note-full .md-q {
  background: var(--surface-2); border-radius: 8px; padding: 2px 8px;
  color: var(--ink-2); font-style: italic; margin: 0;
}
.nota-body p + .md-q, .nota-body .md-q + p, .nota-body ul + .md-q, .nota-body .md-q + ul { margin-top: 10px; }
.note-full .md-q { margin: 0 0 10px; }
.note-full .md-q:last-child { margin-bottom: 0; }
/* títulos markdown: a leitura sobe para a escala do editor (era 14px bold —
   ao editar, o título "crescia"; agora é o mesmo título nos dois lados) */
.nota-body .md-h, .note-full .md-h {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: 1.3em; line-height: 1.25; margin: 14px 0 4px; padding: 0;
}
.nota-body .md-h1, .note-full .md-h1 { font-size: 1.5em; }
.nota-body .md-h3, .note-full .md-h3 { font-size: 1.12em; }
.nota-body > .md-h:first-child, .note-full > .md-h:first-child { margin-top: 0.35em; }
.nota-body .md-h + p, .nota-body .md-h + ul, .nota-body .md-h + .md-q { margin-top: 4px; }
/* listas: o texto começa onde começa na leitura (padding = recuo do ul) e o
   respiro entre itens vira padding inferior — robusto à virtualização do CM */
:is(.pop-card .pc-editor, #v-escrever .esc-corpo) .cm-line.md-li { padding: 0 0 6px 20px; text-indent: -0.7em; }
.note-item.is-editando:not(.is-compondo) > .ni-corpo .cm-line.md-li { padding: 0 0 6px 18px; text-indent: -0.7em; }

/* 1. CARD DA GRADE (lápis): mesma moldura, mesmo título, mesmo corpo */
:is(.note-grid, .pcf-grade, #foco-colheita-lista) .note-item.is-editando:not(.is-compondo) {
  padding: 16px; border: 1px solid var(--sky); border-radius: 16px; box-shadow: var(--shadow-float);
}
.note-item.is-editando:not(.is-compondo) > .ni-titulo {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-19); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  height: 1.3em; min-height: 0; margin: 0; padding: 0 38px 0 0;
}
/* com ícone, o título recua TAMBÉM aqui: o shorthand acima zera o padding
   esquerdo e empatava com a regra do ícone — o ícone cobria a 1ª letra */
.note-item.is-editando:not(.is-compondo):has(> .editor-title-icon) > .ni-titulo { padding-left: 28px; }
/* a linhagem (↖ mãe · ▸ filhas) continua no lugar, só que inerte: o corpo
   não sobe 30px ao entrar em edição */
.note-item.is-editando:not(.is-compondo) > .note-context { pointer-events: none; }
.note-item.is-editando:not(.is-compondo) > .ni-corpo { margin-top: 10px; font-size: var(--fs-16); line-height: 1.6; min-height: 0; }
.note-item.is-editando:not(.is-compondo) > .ni-corpo .cm-content { min-height: 1.6em; }

/* 2. POPUP: o campo do título tem a altura do h2 (sem os 6px de baixo);
   o corpo edita como lê; ≥900 o editor cresce com a nota — a caixa rolava
   a 46vh enquanto a leitura mostrava tudo (o cartão já rola inteiro) */
.pop-card .pc-titulo-edit { display: block; padding: 0 116px 0 0; line-height: 1.5; height: 1.5em; }
@media (min-width: 900px) {
  .pop-card .pc-editor { font-size: var(--fs-16); line-height: 1.6; min-height: 0; }
  .pop-card .pc-editor .cm-scroller { max-height: none; overflow: visible; }
  .pop-card .pc-editor .cm-content { min-height: 1.7em; }
}
@media (max-width: 899px) {
  .pop-card .pc-titulo-edit { padding-right: 0; }
  /* no celular o editor já era 16px (piso do iOS); a leitura sobe junto */
  .pop-card .pc-corpo, .pop-card .pc-editor { font-size: var(--fs-16); line-height: 1.6; }
}

/* 3. FOLHA vinda da página: a moldura da leitura (#lib-nota), a mesma
   coluna de 64ch, a linha de meta fica (inerte) e o corpo lê a 1.6 */
#v-escrever .esc-top > .esc-acoes { margin-top: 0; }
#v-escrever .folha { max-width: none; margin: 30px 0 0; padding: 22px; }
#v-escrever .esc-titulo { display: block; word-spacing: 0.09em; }
#v-escrever .esc-meta { pointer-events: none; }
#v-escrever .esc-corpo, #v-escrever .esc-corpo .cm-content { line-height: 1.6; }
#v-escrever.de-pagina .esc-corpo .cm-content { padding-top: 0; }
@media (min-width: 900px) {
  #v-escrever .folha { padding: 36px 30px 30px; }
  #v-escrever .esc-corpo { max-width: 64ch; }
}
@media (min-width: 1100px) {
  #v-escrever .folha { width: calc((100% - 16px) * 0.6); }
}
@media (min-width: 1100px) and (max-width: 1500px) {
  body.com-fixados #v-escrever .folha { width: auto; }
}

/* ---------- Arrastar para dentro: o alvo acende, o fantasma viaja ----------
   O card prestes a receber veste o anel na própria cor (a roupa do alvo
   da casa) — e o gêmeo no nível do bloco v289 impede a superfície de
   engolir o anel (armadilha documentada). */
.note-item.is-recebendo { box-shadow: 0 0 0 2px var(--anel, var(--anel-neutro)); border-color: transparent; }
:is(.note-grid, .pcf-grade, #foco-colheita-lista) .note-item:not(.is-editando).is-recebendo {
  box-shadow: 0 0 0 2px var(--anel, var(--anel-neutro));
  border-color: transparent;
}
/* o fantasma do arrasto (decompilado do SN): cartãozinho título + trecho */
.drag-fantasma {
  position: absolute; top: -1000px; left: -1000px;
  max-width: 240px; padding: 9px 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-float);
  pointer-events: none;
}
.drag-fantasma .df-nome { font-weight: 700; font-size: var(--fs-14); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drag-fantasma .df-trecho { font-size: var(--fs-12); color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   v311 — polimento da auditoria tela por tela
   ============================================================ */
/* Flashcards lê a largura da mãe; Mapa, Quadro e Tabela usam a bancada
   (a mãe fica onde está — v313). */
#lib-folder.noteboard-pagina #ftab-cartoes { width: 100%; max-width: var(--regua-topo); margin-inline: auto; }

/* o subtítulo em caixa-alta encostava nas descendentes do título */
.view-head h1 + .kicker { margin-top: 6px; }

/* Rodapé do card em UMA linha: a data encolhe com reticências; a tag e o ⋯
   nunca caem sozinhos para a linha de baixo (acontecia em 3 colunas, com os
   Fixados abertos e no celular). */
.note-item .meta { flex-wrap: nowrap; }
.note-item .meta > * { flex-shrink: 0; }
.note-item .meta > span:not([class]) { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item .meta > .tag--supertag { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* no celular o card recolhido era só título: o trecho aparece como no desktop */
@media (max-width: 899px) {
  .note-grid .note-item .snip {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 8px; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); font-weight: 400;
  }
}
/* atalho de teclado não é dica para dedo */
@media (hover: none) and (pointer: coarse) {
  .ni-acao kbd { display: none; }
}
/* categoria (lugar sem nota-mãe) lê a mesma régua no cabeçalho */
#lib-folder:not(.noteboard-pagina) .fonte-head { max-width: var(--regua-topo); margin-inline: auto; }

/* ============================================================
   MOVIMENTO (v313–v314) — as cenas de suave() e as saídas de fecharSuave()
   ============================================================ */
/* CENA. Cada peça nomeada viaja do lugar antigo ao novo; a caixa muda de
   tamanho RECORTANDO o conteúdo (o texto não estica nem encolhe — a foto
   antiga some e a nova aparece dentro da mesma moldura). O que não tem nome
   troca num fade curto. 300 ms, desaceleração longa, sem ricochete. */
html.vt::view-transition-group(*) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  overflow: clip; border-radius: var(--r-lg);
}
html.vt::view-transition-old(*),
html.vt::view-transition-new(*) {
  inline-size: auto; block-size: auto; max-inline-size: none;
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
/* a página em si não se mexe: sem cantos, sem recorte */
html.vt::view-transition-group(root) { border-radius: 0; overflow: visible; }
/* tema: a tela inteira troca de luz num crossfade calmo — sem nada se mover */
html.vt-tema::view-transition-old(root),
html.vt-tema::view-transition-new(root) { animation-duration: 360ms; animation-timing-function: ease; }
/* o herói: o card que vira a nota-mãe (e a volta) leva os cantos da mãe e
   passa por cima dos vizinhos enquanto cresce */
html.vt::view-transition-group(vt-heroi) { border-radius: 20px; z-index: 2; animation-duration: 340ms; }

/* SAÍDA. O diálogo se despede antes de fechar: o cartão recua um nada e
   some; o véu do fundo sai junto. Mais curta que a entrada — quem sai não
   pede atenção. */
dialog.is-saindo { pointer-events: none; animation: dlg-sai 140ms cubic-bezier(0.4, 0, 1, 1) forwards; }
dialog.is-saindo::backdrop { animation: veu-sai 140ms linear forwards; }
@keyframes dlg-sai { to { opacity: 0; transform: translateY(6px) scale(0.985); } }
@keyframes veu-sai { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.vt::view-transition-group(*),
  html.vt::view-transition-old(*),
  html.vt::view-transition-new(*) { animation: none !important; }
  dialog.is-saindo, dialog.is-saindo::backdrop { animation: none; }
}
/* o rótulo "1 coluna / 2 colunas" tem largura estável: o botão não anda sob o cursor ao trocar */
.colunas-rotulo { display: inline-block; min-width: 4.3em; text-align: left; }
/* v316 — o "‹ voltar" do Noteboard mora na coluna do topo: alinhado à borda
   da nota-mãe, que nunca se move. Preso à borda da área de trabalho, ele
   saltava de lado quando 3 colunas alargam essa área (1180 → 1520px). */
#lib-folder > .back-btn { margin-left: max(0px, calc((100% - var(--regua-topo)) / 2)); }

/* ============================================================
   v317 — Curadoria de flashcards e Modo apresentação
   ============================================================ */
/* CURADORIA: a leitura do conjunto abre a lista; os cartões vêm sob o nome
   da nota de onde saíram; o que ficou de fora se recolhe num resumo. */
.iac-leitura { margin: 0 0 4px; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }
.iac-origem {
  margin: 10px 2px 0; font-size: var(--fs-12); font-weight: 650; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iac-leitura + .iac-origem { margin-top: 8px; }
.iac-fora { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.iac-fora summary { cursor: pointer; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); padding: 4px 2px; border-radius: 6px; }
.iac-fora summary:hover { color: var(--ink); }
.iac-fora summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.iac-fora ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.iac-fora li { display: grid; gap: 1px; font-size: var(--fs-13); line-height: 1.4; }
.iac-fora li b { font-weight: 650; color: var(--ink); }
.iac-fora li span { color: var(--ink-2); }

/* APRESENTAÇÃO: uma nota por vez, tipo grande, nada em volta. A tela é o
   próprio papel do app (opaca): o que estava atrás some de cena. */
dialog#dlg-apres {
  border: 0; padding: 0; margin: 0; inset: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: var(--canvas); color: var(--ink);
  animation: apres-entra 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
dialog#dlg-apres::backdrop { background: var(--canvas); }
@keyframes apres-entra { from { opacity: 0; } }
.apres-palco {
  display: grid; height: 100%; box-sizing: border-box;
  grid-template-columns: minmax(48px, 1fr) minmax(0, 760px) minmax(48px, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo topo topo" "ant card prox" "pe pe pe";
  gap: 16px 20px; padding: 20px 24px 22px;
  touch-action: pan-y;
}
.apres-topo { grid-area: topo; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.apres-sair { margin: 0; }
.apres-conta { font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.apres-card {
  grid-area: card; align-self: center; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 44px 48px 48px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  outline: none; scrollbar-width: thin;
}
.apres-card[data-cor] { background: var(--tinta-bg); border-color: color-mix(in srgb, var(--tinta) 32%, transparent); }
.apres-kicker { margin: 0 0 10px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); }
.apres-kicker:empty { display: none; }
.apres-titulo {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.16; text-wrap: balance; overflow-wrap: anywhere;
}
.apres-corpo { margin-top: 22px; font-size: var(--fs-19); line-height: 1.62; max-width: 66ch; }
.apres-vazia { color: var(--ink-2); }
.apres-seta {
  align-self: center; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
#apres-ant { grid-area: ant; justify-self: end; }
#apres-prox { grid-area: prox; justify-self: start; }
.apres-seta:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.apres-seta:disabled { opacity: 0.28; cursor: default; }
.apres-seta:focus-visible, .apres-acoes button:focus-visible, .apres-sair:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.apres-pe { grid-area: pe; display: grid; justify-items: center; gap: 12px; }
.apres-progresso { width: min(760px, 100%); height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.apres-progresso i { display: block; height: 100%; border-radius: 3px; background: var(--sky); transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.apres-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.apres-acoes button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 10px;
  font-size: var(--fs-13); font-weight: 600; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.apres-acoes button:hover { background: var(--surface-2); color: var(--ink); }
.apres-acoes kbd { font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2); padding: 3px 5px; border: 1px solid var(--border-strong); border-radius: 5px; }
.apres-aviso { margin: 0; min-height: 1.4em; font-size: var(--fs-13); color: var(--ink-2); }
.apres-btn { width: 32px; padding: 4px; justify-content: center; }
@media (pointer: coarse) { .apres-btn { width: 44px; } .apres-acoes kbd { display: none; } .apres-acoes button { min-height: 44px; } }
@media (max-width: 720px) {
  /* no celular as setas descem para o rodapé, uma de cada lado do progresso */
  .apres-palco {
    grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "topo topo topo" "card card card" "ant barra prox" "pe pe pe";
    gap: 12px; padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  }
  .apres-card { padding: 28px 22px 32px; border-radius: 20px; align-self: start; }
  .apres-titulo { font-size: var(--fs-23); }
  .apres-corpo { font-size: var(--fs-16); margin-top: 16px; }
  #apres-ant, #apres-prox { justify-self: center; }
  .apres-progresso { display: none; }
  .apres-acoes kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { dialog#dlg-apres { animation: none; } .apres-progresso i { transition: none; } }

#iac-resumo { white-space: nowrap; }


/* ============================================================
   REVISÃO v318 — bancada → sessão → fim, e o acervo de flashcards
   A bancada é uma LISTA (linhas com fio), não uma parede de cartões:
   o que se compara são os números, e número se compara em coluna.
   ============================================================ */
/* v319: UMA largura para a Revisão inteira (a coluna de leitura da casa) —
   bancada, acervo, sessão e fim. O título e as abas não andam entre elas. */
@media (min-width: 900px) { #v-revisao { max-width: 720px; } }
.rev-abas { display: flex; gap: 22px; margin: -6px 0 22px; border-bottom: 1px solid var(--border); }
.rev-abas button {
  position: relative; min-height: 44px; padding: 0 2px;
  font-size: var(--fs-14); font-weight: 700; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out);
}
.rev-abas button:hover, .rev-abas button[aria-selected="true"] { color: var(--ink); }
.rev-abas button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink);
}

/* o atalho do dia: o gesto antigo ("revisar o que venceu") em um toque */
.rev-hoje {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px;
  border-radius: var(--r-lg); background: var(--btn-ink); color: var(--canvas); text-align: left;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
button.rev-hoje:hover { background: var(--btn-ink-hover); }
button.rev-hoje:active { transform: scale(0.99); }
.rev-hoje-n {
  font-family: var(--font-display); font-size: var(--fs-34); font-weight: 600; line-height: 1;
  letter-spacing: var(--track-display); font-variant-numeric: tabular-nums;
}
.rev-hoje-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rev-hoje-txt b { font-size: var(--fs-16); font-weight: 700; }
.rev-hoje-txt small { font-size: var(--fs-13); opacity: 0.74; }
.rev-hoje svg { flex: none; opacity: 0.74; }
.rev-hoje--emdia { background: none; color: var(--ink); border: 1px dashed var(--border-strong); padding: 16px 20px; }
.rev-hoje--emdia small { color: var(--ink-2); opacity: 1; line-height: 1.45; }

/* conjuntos salvos: recortes com nome */
.rev-conjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rev-conj {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface);
}
.rev-conj button { min-height: 38px; font-size: var(--fs-13); font-weight: 700; color: var(--ink); transition: color var(--t-fast) var(--ease-out); }
.rev-conj [data-rev-conj] { padding: 0 4px 0 15px; }
.rev-conj [data-rev-conj]:hover { color: var(--sky-ink); }
.rev-conj-x { padding: 0 12px 0 6px; color: var(--ink-2) !important; font-size: 17px !important; line-height: 1; }
.rev-conj-x:hover { color: var(--danger) !important; }

.rev-secao { margin-top: 28px; }
.rev-secao-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.rev-secao-cab h2 { font-size: var(--fs-16); font-weight: 700; letter-spacing: -0.005em; }
.rev-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rev-tags button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  font-size: var(--fs-13); font-weight: 600; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.rev-tags button:hover { color: var(--ink); border-color: var(--border-strong); }
.rev-tags button[aria-pressed="true"] { background: var(--btn-ink); border-color: var(--btn-ink); color: var(--canvas); }
.rev-tags button b { font-weight: 600; opacity: 0.72; font-variant-numeric: tabular-nums; }

/* baralhos: nome à esquerda, três números em coluna, seta para ver por dentro */
.rev-baralhos-cab, .rev-baralho, .rev-notas li {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px 52px 52px 36px; align-items: center;
}
.rev-baralhos-cab { padding: 0 4px 2px 10px; border-bottom: 1px solid var(--border-strong); }
.rev-baralhos-cab .rev-marca { font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.rev-baralhos-cab .rev-col { font-size: var(--fs-12); font-weight: 600; }
.rev-baralhos { list-style: none; margin: 0; padding: 0; }
.rev-baralho { min-height: 54px; padding: 0 4px 0 10px; border-bottom: 1px solid var(--border); transition: background var(--t-fast) var(--ease-out); }
.rev-baralho:hover, .rev-baralho.is-sel { background: var(--sky-soft); }
.rev-marca { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; cursor: pointer; }
.rev-marca input, .rev-ac-tabela input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--sky); cursor: pointer; }
.rev-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--tinta, var(--border-strong)); }
.rev-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
.rev-nome .rev-ico { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 6px; vertical-align: -0.2em; }
.rev-papel { flex: none; font-size: var(--fs-12); color: var(--ink-2); }
.rev-col { padding-right: 8px; text-align: right; font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rev-col.tem { color: var(--ink); font-weight: 700; }
.rev-col--v.tem { color: var(--m-rosa-ink); }
.rev-col--n.tem { color: var(--sky-ink); }
.rev-abrir, .rev-so { display: grid; place-items: center; width: 36px; height: 40px; border-radius: var(--r-sm); color: var(--ink-2); transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.rev-abrir:hover, .rev-so:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.rev-abrir svg { transition: transform var(--t-med) var(--ease-out); }
.rev-abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.rev-so:disabled { opacity: 0.3; cursor: default; }
.rev-notas { display: block; padding: 2px 0 8px; border-bottom: 1px solid var(--border); }
.rev-notas ul { list-style: none; margin: 0; padding: 0; }
.rev-notas li { min-height: 40px; padding: 0 4px 0 38px; }
.rev-notas .rev-nome { font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
.rev-vazio { padding: 22px 10px; }

/* a barra da sessão: aparece com a seleção e acompanha a rolagem */
.rev-sessao {
  position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5;
  margin-top: 22px; padding: 10px 10px 10px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float);
}
@media (min-width: 900px) { .rev-sessao { bottom: 20px; } }
.rev-sessao:not([hidden]) { animation: rev-sobe 240ms var(--spring-soft); }
@keyframes rev-sobe { from { opacity: 0; transform: translateY(10px); } }
.rev-sessao-topo { display: flex; align-items: center; gap: 6px; }
.rev-sessao-resumo { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 600; color: var(--ink); line-height: 1.35; }
.rev-sessao .btn { width: auto; flex: none; }
.rev-ajustar {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 42px; padding: 0 12px;
  border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 700; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rev-ajustar:hover { background: var(--surface-2); color: var(--ink); }
.rev-ajustar svg { transition: transform var(--t-med) var(--ease-out); }
.rev-ajustar[aria-expanded="true"] svg { transform: rotate(180deg); }
.rev-ajustes { display: grid; gap: 10px; margin-top: 10px; padding: 12px 8px 4px 0; border-top: 1px solid var(--border); }
.rev-ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rev-ajuste-rot { flex: none; width: 66px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.rev-ajuste [role="radio"] {
  min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  font-size: var(--fs-13); font-weight: 600; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.rev-ajuste [role="radio"]:hover { color: var(--ink); border-color: var(--border-strong); }
.rev-ajuste [role="radio"][aria-checked="true"] { background: var(--btn-ink); border-color: var(--btn-ink); color: var(--canvas); }
.rev-ajuste--fim { justify-content: space-between; gap: 8px 16px; padding-top: 2px; }
.rev-treino { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.rev-treino:disabled { opacity: 0.62; cursor: default; }
.rev-conj-novo { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 210px; max-width: 340px; }
.rev-conj-novo input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--canvas); font-size: var(--fs-13);
}
.rev-conj-novo input::placeholder { color: var(--ink-2); }
.rev-conj-novo input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--sky); }
.rev-conj-novo .btn { min-height: 40px; padding: 0 14px; }
.rev-abas button:focus-visible, .rev-hoje:focus-visible, .rev-tags button:focus-visible, .rev-conj button:focus-visible,
.rev-abrir:focus-visible, .rev-so:focus-visible, .rev-ajustar:focus-visible, .rev-ajuste [role="radio"]:focus-visible,
.rev-treino:focus-visible, .rev-acoes button:focus-visible, .rev-origem button:focus-visible, .rev-ac-q:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* acervo: todos os flashcards numa tabela */
.rev-ac-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rev-ac-busca { flex: 1; min-width: 200px; margin-bottom: 0; }
#rev-ac-deck {
  min-height: 48px; max-width: 250px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-13); font-weight: 600;
}
/* filtros e barra de lote dividem a mesma célula: a seleção não empurra a tabela */
.rev-ac-faixa { display: grid; align-items: center; margin: 12px 0 10px; min-height: 48px; }
.rev-ac-faixa > * { grid-area: 1 / 1; }
.rev-ac-faixa:has(.rev-ac-lote:not([hidden])) { position: sticky; top: 10px; z-index: 5; }
.rev-ac-faixa:has(.rev-ac-lote:not([hidden])) > .rev-tags { visibility: hidden; }
.rev-ac-lote {
  display: flex; align-items: center; gap: 2px; align-self: start;
  padding: 5px 6px 5px 18px; border-radius: var(--r-pill);
  background: var(--btn-ink); color: var(--canvas); box-shadow: var(--shadow-float);
  font-size: var(--fs-13); font-weight: 700;
}
.rev-ac-lote:not([hidden]) { animation: rev-sobe 200ms var(--spring-soft); }
.rev-ac-lote span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-ac-limpar { flex: none; width: 38px; height: 38px; border-radius: 50%; color: inherit; font-size: 18px; line-height: 1; opacity: 0.8; }
.rev-ac-limpar:hover { opacity: 1; background: color-mix(in srgb, var(--canvas) 14%, transparent); }
.rev-ac-lote .btn { width: auto; min-height: 38px; padding: 0 14px; color: inherit; }
.rev-ac-lote .btn:hover { background: color-mix(in srgb, var(--canvas) 14%, transparent); color: inherit; }
.rev-ac-lote .rev-perigo, .rev-ac-lote .rev-perigo:hover { color: color-mix(in srgb, var(--coral) 52%, var(--canvas)); }   /* legível sobre a tinta nos dois temas */
.rev-ac-tabela-wrap { overflow-x: auto; }
.rev-ac-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.rev-ac-tabela th {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--border-strong);
}
.rev-ac-tabela td { padding: 4px 10px; vertical-align: middle; border-bottom: 1px solid var(--border); transition: background var(--t-fast) var(--ease-out); }
.rev-ac-tabela tbody tr:hover td, .rev-ac-tabela tr.is-sel td { background: var(--sky-soft); }
.rev-ac-tabela .rev-ac-c0 { width: 38px; padding-right: 0; }
.rev-ac-q {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  width: 100%; padding: 9px 0; text-align: left; line-height: 1.38;
  font-size: var(--fs-14); font-weight: 600; color: var(--ink);
}
.rev-ac-q:hover { color: var(--sky-ink); }
.rev-ac-deck, .rev-ac-prox { white-space: nowrap; color: var(--ink-2); }
.rev-ac-st { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; font-size: var(--fs-12); font-weight: 700; }
.rev-ac-st--novo { background: var(--m-azul-bg); color: var(--m-azul-ink); }
.rev-ac-st--vencido { background: var(--m-rosa-bg); color: var(--m-rosa-ink); }
.rev-ac-st--emdia { background: var(--m-verde-bg); color: var(--m-verde-ink); }
.rev-ac-st--suspenso { background: var(--surface-2); color: var(--ink-2); }
.rev-ac-mais { display: flex; width: auto; margin: 14px auto 0; }

/* sessão: de onde vem o flashcard e o que dá para fazer com ele */
.rev-origem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; margin: -6px 0 12px; font-size: var(--fs-13); color: var(--ink-2); }
.rev-origem .sep { color: var(--ink-3); }
.rev-origem-n { font-variant-numeric: tabular-nums; font-size: var(--fs-12); font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); }
.rev-origem button { text-align: left; font-weight: 600; color: var(--sky-ink); }
.rev-origem button:hover { text-decoration: underline; text-underline-offset: 3px; }
.rev-acoes { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.rev-acoes button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 10px;
  font-size: var(--fs-13); font-weight: 600; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rev-acoes button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.rev-acoes button:disabled { opacity: 0.38; cursor: default; }
.rev-acoes kbd { font: 650 var(--fs-11)/1 var(--font-ui); color: var(--ink-2); padding: 3px 5px; border: 1px solid var(--border-strong); border-radius: 5px; background: none; box-shadow: none; }
#rev-nota-agenda { margin-top: 12px; text-align: center; }

/* fim: o placar, por fonte, e o que errou */
.rev-fim { padding: 40px 24px 28px; }
.rev-fim-fontes, .rev-fim-erros { max-width: 440px; margin: 22px auto 0; text-align: left; }
.rev-fim-fontes { list-style: none; padding: 0; }
.rev-fim-fontes li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-14); }
.rev-fim-fontes li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rev-fim-fontes li b { flex: none; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rev-fim .rev-fim-erros-t { margin: 0; font-size: var(--fs-13); font-weight: 700; color: var(--ink); }
.rev-fim-erros ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px; font-size: var(--fs-14); line-height: 1.4; color: var(--ink-2); }
.rev-fim-acoes { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }
.rev-fim-acoes .btn { width: auto; min-width: min(260px, 100%); }

@media (pointer: coarse) {
  .rev-acoes kbd { display: none; }
  .rev-acoes button, .rev-tags button, .rev-ajuste [role="radio"] { min-height: 44px; }
  .rev-abrir, .rev-so { height: 44px; }
}
@media (max-width: 640px) {
  .rev-baralhos-cab, .rev-baralho, .rev-notas li { grid-template-columns: minmax(0, 1fr) 58px 44px 40px 34px; }
  .rev-baralhos-cab .rev-col { font-size: var(--fs-11); }
  .rev-papel { display: none; }
  .rev-notas li { padding-left: 28px; }
  .rev-sessao { padding-left: 14px; }
  /* painel aberto no celular: a barra volta ao fluxo — flutuando, cobriria a lista inteira */
  .rev-sessao:has(.rev-ajustes:not([hidden])) { position: static; }
  .rev-ajuste-rot { width: 100%; }
  .rev-ac-tabela th:nth-child(3), .rev-ac-tabela .rev-ac-deck,
  .rev-ac-tabela th:nth-child(5), .rev-ac-tabela .rev-ac-prox { display: none; }
  #rev-ac-deck { max-width: none; flex: 1; }
  .rev-fim-fontes li { flex-direction: column; gap: 2px; }   /* nome numa linha, placar na outra: nada trunca */
  .rev-ac-lote { padding-left: 14px; }
  .rev-ac-lote .btn { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .rev-sessao:not([hidden]), .rev-ac-lote:not([hidden]) { animation: none; }
  .rev-abrir svg, .rev-ajustar svg { transition: none; }
}


/* ============================================================
   v319 — ESTABILIDADE: o que não mudou de papel não muda de lugar
   Medido pelo robô de saltos (posição e tamanho de cada peça antes e
   depois de cada gesto). Três leis:
   1. a moldura de uma lista é uma só — filtro, aba e modo trocam os
      cards, não o cabeçalho;
   2. rótulo que muda de texto tem largura reservada (não empurra vizinho);
   3. o card tem a largura da coluna escolhida, não a do que sobrou.
   ============================================================ */
/* abas da Biblioteca + como ver (Cards | Tabela): o seletor mora na ponta
   direita da MESMA linha — nasce e some sem deslocar ninguém, e não sai de
   baixo do cursor quando é clicado */
.seg-linha { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.seg-linha > .seg-lib { flex: 1; min-width: 0; margin-bottom: 0; }
.seg-linha > .ent-vista { flex: none; }
@keyframes surgir { from { opacity: 0; } }

/* cabeçalho da lista: à esquerda o que ela É (título, conta, filtro de dia);
   à direita os controles, que por isso nunca andam */
.lib-notas-wrap > .card-head { min-height: 42px; align-items: center; }
.lib-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* o título reserva a largura de "Todas as notas": a contagem ao lado não anda quando a aba vira #tag */
.lib-titulo .card-title { min-width: 7.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-notas-wrap > .card-head { flex-wrap: nowrap; gap: 12px; }
.lib-notas-wrap > .card-head > .barra-dir { flex: none; flex-wrap: nowrap; }
.lib-titulo .card-sub { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lib-titulo .dia-filtro { margin: 0; padding: 3px 4px 3px 12px; white-space: nowrap; }
.nota-rapida b { color: var(--sky-ink); font-weight: 700; }

/* rótulos que trocam de texto reservam a largura do mais comprido */
/* a folga fica DEPOIS da seta (no fim do botão), não entre o texto e a seta */
.ordenar-btn { min-width: 12.7em; justify-content: flex-start; }   /* = "Mais flashcards", o rótulo mais comprido */
#lib-folder .nb-controles .ordenar-btn { min-width: 11.5em; }
#st-cols-rotulo { display: inline-block; min-width: 4.3em; text-align: left; }
.lib-notas-wrap .expandir-rotulo { display: inline-block; min-width: 4.1em; text-align: left; }   /* só aqui: no Noteboard o rótulo é só para leitor de tela */

/* colunas de largura fixa: menos cards que colunas → cards centrados, do
   tamanho de sempre (antes, 1 resultado em 3 colunas virava um card de
   parede a parede) */
.mas-col--fixa { flex: 0 0 calc((100% - (var(--mc, 1) - 1) * 14px) / var(--mc, 1)); }
.note-grid:has(> .mas-col--fixa) { justify-content: center; }

/* aviso de lista vazia entra com um fade — não "pisca" no lugar dos cards */
.lista-vazia { animation: surgir 220ms var(--ease-out); padding: 18px 2px; text-align: center; }

@media (max-width: 899.9px) {
  .seg-linha { gap: 8px; }
    .ordenar-btn, #lib-folder .nb-controles .ordenar-btn, .lib-notas-wrap .expandir-rotulo { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .lista-vazia { animation: none; } }

/* ---------- v319 · Revisão ---------- */
/* abas (fora da sessão) e voltar (na sessão) têm a mesma caixa: quem troca é o conteúdo da faixa */
.rev-faixa-sessao { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; margin: -6px 0 22px; border-bottom: 1px solid var(--border); }
.rev-faixa-sessao .back-btn { margin: 0; }
.rev-escopo { margin: 0; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Mostrar resposta" reserva a altura dos quatro botões que vêm depois: as ações de baixo não descem */
#show-answer:not([hidden]) { margin-bottom: 36px; }
@media (min-width: 900px) { #show-answer:not([hidden]) { margin-bottom: 48px; } }
.rev-ajustes:not([hidden]) { animation: surgir 200ms var(--ease-out); }
/* ---------- v319 · Supertags ---------- */
.st-vista { min-height: 42px; }
#st-notas.note-grid:has(> .mas-col--fixa) { justify-content: flex-start; }   /* cabeçalho à esquerda: os cards também */
@media (prefers-reduced-motion: reduce) { .rev-ajustes:not([hidden]) { animation: none; } }


/* ============================================================
   v321 — o celular como aplicativo (régua: o app do Sangha)
   Menos peças por tela; o que sobra tem alvo de toque inteiro.
   Só abaixo de 900px — o desktop não muda.
   ============================================================ */
@media (max-width: 899.9px) {
  /* barra de baixo só com ícones: o nome continua no rótulo de acessibilidade */
  .tabbar > .tab { font-size: 0; gap: 0; min-height: 50px; padding: 0; }
  .tabbar > .tab svg { width: 24px; height: 24px; }
  .tabbar > .tab .badge { font-size: var(--fs-11); right: calc(50% - 24px); top: 4px; }
  .tabbar > .tab[aria-current="page"], .tabbar > .tab[aria-expanded="true"] { background: none; color: var(--chrome-ink); }
  .tabbar > .tab { color: var(--chrome-muted); }
  .tabbar > .tab[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
  }
  .tabbar > .tab { position: relative; }
  /* na raiz da Biblioteca, criar é o "+" da barra: o convite tracejado repetia o mesmo gesto.
     No Noteboard ele fica — ali o convite diz que a nota nasce FILHA. */
  #lib-root .lib-notas-wrap > .criar-linha { display: none; }
}
#dlg-card .pop-card:focus { outline: none; }
@media (max-width: 899.9px) {
  /* etiquetas de linhagem: finas à vista, com a área de toque inteira (o alvo de 44px vira área invisível) */
  .note-item > .note-context button { min-height: 28px; position: relative; }
  .note-item > .note-context button::after { content: ""; position: absolute; inset: -8px -2px; }
}

/* ---------- v321 · dentro do app nativo (e do PWA instalado) ----------
   No Safari a barra do navegador fica entre o relógio e a página; no app não
   há barra: a página vai até o topo do vidro e precisa, ela mesma, deixar o
   relógio e o entalhe livres. env(safe-area-inset-top) é 0 no navegador comum,
   então nada muda lá. */
@media (max-width: 899.9px) {
  .app-main { padding-top: calc(20px + env(safe-area-inset-top)); }
  .focus-overlay { padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .apres-palco { padding-top: calc(14px + env(safe-area-inset-top)); }
  dialog#dlg-card { margin-top: max(0px, env(safe-area-inset-top)); }
  #toast { margin-top: env(safe-area-inset-top); }
}


/* ============================================================
   v323 — editor de nota: ferramentas no canto de cima, rodapé de UMA linha
   Antes o rodapé carregava +, microfone, contagem, tag, Descartar e
   Finalizar e quebrava em duas linhas tortas no celular. Agora:
     canto superior direito  → a tag e o "+" (o que se acrescenta à nota)
     rodapé                  → microfone · palavras ········ Descartar  Finalizar
   Vale para o editor no lugar (card e nota-mãe), o compositor e o popup.
   ============================================================ */
.note-item.is-editando { position: relative; }
.ni-ferramentas { position: absolute; top: 12px; right: 12px; z-index: 1; display: flex; align-items: center; gap: 6px; }
.ni-ferramentas .ed-mais { margin: 0; }
.ni-ferramentas .tag--supertag, #dlg-card .pc-acoes .tag--supertag { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
/* o título reserva a largura medida do canto (niFerramentas) */
.note-item.is-editando > .ni-titulo.ni-titulo,
#lib-folder:has(#folder-corpo .is-editando) .ni-titulo { padding-right: calc(var(--ni-ferr, 40px) + 10px); }
/* nota-mãe em edição: o card é a .fonte-head (a .nb-mae vira display: contents) */
#folder-corpo .ni-ferramentas { top: 22px; right: 24px; }
@media (max-width: 599px) { #folder-corpo .ni-ferramentas { top: 18px; right: 16px; } }

.ni-pe.ni-pe, #folder-corpo .nb-mae .ni-pe, .pc-edicao-pe.pc-edicao-pe {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px;
}
.ni-pe .ed-mais, .pc-edicao-pe .ed-mais { margin: 0; flex: none; }
.ni-pe .ni-conta, .pc-edicao-pe .pc-conta, .ni-pe .foco-mic-estado, .pc-edicao-pe .foco-mic-estado {
  flex: 0 1 auto; min-width: 0; margin: 0 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-12); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ni-pe .ni-espaco, .pc-edicao-pe .ni-espaco { flex: 1 1 0; min-width: 4px; }
.pc-edicao-pe .ni-espaco + .ni-espaco { display: none; }
.ni-pe .ni-acao, .pc-edicao-pe .ni-acao { flex: none; white-space: nowrap; }
/* uma ação principal por rodapé: Finalizar/Criar é o botão cheio; Descartar é texto */
.ni-pe .ni-ok, .pc-edicao-pe .ni-ok { padding: 7px 16px; border-radius: var(--r-pill); background: var(--btn-ink); color: var(--canvas); }
.ni-pe .ni-ok:hover, .pc-edicao-pe .ni-ok:hover { background: var(--btn-ink-hover); color: var(--canvas); }
.ni-pe .ni-ok kbd, .pc-edicao-pe .ni-ok kbd { border-color: color-mix(in srgb, var(--canvas) 34%, transparent); color: inherit; background: none; box-shadow: none; }

/* popup: tag e "+" ficam na barra de cima só durante a edição; o lápis sai */
#dlg-card .pc-so-edicao { display: none; }
#dlg-card.is-editando .pc-so-edicao { display: inline-flex; }
#dlg-card.is-editando #pc-editar { display: none; }
#dlg-card .pc-acoes .ed-mais { margin: 0 2px; }
#dlg-card .pc-acoes .pc-ed-tag { margin: 0 4px 0 0; }
@media (min-width: 900px) { #dlg-card.is-editando .pop-card .pc-titulo-edit { padding-right: 236px; } }
@media (pointer: coarse) { .ni-ferramentas .ed-mais, #dlg-card .pc-acoes .ed-mais { width: 36px; height: 36px; } }

/* enquanto se ESCREVE uma nota que ainda não tem filhas, a tela é só a nota:
   ordenar/expandir/apresentar e o convite de "criar filho" voltam ao finalizar */
#lib-folder.sem-filhas:has(#folder-corpo .is-editando) .nb-toolbar,
#lib-folder.sem-filhas:has(#folder-corpo .is-editando) #ftab-conhecimento .criar-linha { display: none; }


/* ============================================================
   v324 — supertag: o botão vazio é só "#"; o seletor foi redesenhado
   Antes: cabeçalho "Supertag ✕", campo em caixa, linhas com "Atual" por
   extenso, "Remover" em vermelho e um parágrafo de ajuda. Agora é uma
   paleta curta: a busca É o topo, cada linha tem a cor (ou o ícone) da
   tag, o nome e quantas notas a vestem; a atual leva um ✓.
   ============================================================ */
.tag--vazia {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-14); font-weight: 700; line-height: 1;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
/* no toque o :hover gruda depois do dedo sair: o escuro fica só para mouse — e para o seletor ABERTO */
@media (hover: hover) { .tag--vazia:hover { background: var(--ink); color: var(--canvas); filter: none; } }
.tag--vazia[aria-expanded="true"] { background: var(--ink); color: var(--canvas); }
/* no rodapé de um card em leitura ele é ainda mais quieto: aparece como convite, não como botão */
.note-item:not(.is-editando) .meta .tag--vazia { background: transparent; color: color-mix(in srgb, var(--ink) 46%, transparent); }
@media (hover: hover) { .note-item:not(.is-editando) .meta .tag--vazia:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } }
@media (pointer: coarse) { button.tag--supertag.tag--vazia { width: 36px; height: 36px; min-height: 0; } }

#tag-popover {
  width: min(268px, calc(100vw - 16px)); padding: 6px; gap: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-float);
  animation: tp-nasce 150ms var(--ease-out);
}
@keyframes tp-nasce { from { opacity: 0; transform: translateY(-4px); } }
#tag-popover .tp-busca { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
#tag-popover .tp-busca > span { font-size: var(--fs-16); font-weight: 700; color: var(--ink-2); }
#tag-popover .tag-picker-search {
  flex: 1; min-width: 0; min-height: 38px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); outline: none;   /* 16px: o iPhone não dá zoom no campo */
}
#tag-popover .tag-picker-search::-webkit-search-cancel-button { display: none; }
#tag-popover .tag-picker-list { display: flex; flex-direction: column; gap: 1px; max-height: min(288px, 46dvh); }
#tag-popover .tag-picker-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: 10px;
  font-size: var(--fs-14); font-weight: 600; color: var(--ink); text-align: left; background: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
#tag-popover .tag-picker-list button:hover,
#tag-popover .tag-picker-list button:focus-visible,
#tag-popover .tag-picker-list button.is-primeira { background: var(--surface-2); outline: none; }
#tag-popover .tag-picker-list button[aria-pressed="true"] { background: none; color: var(--ink); }
#tag-popover .tag-picker-list button[aria-pressed="true"]:hover { background: var(--surface-2); }
#tag-popover .tp-marca {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--tinta-bg, var(--sky-soft)); color: color-mix(in srgb, var(--tinta, var(--sky)) 72%, var(--ink));
  font-size: var(--fs-13); font-weight: 800; line-height: 1;
}
#tag-popover .tp-marca svg, #tag-popover .tp-marca .tp-ico { width: 14px; height: 14px; }
#tag-popover .tp-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tag-popover .tp-nome b { font-weight: 700; }
#tag-popover .tp-n { flex: none; font-size: var(--fs-12); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#tag-popover .tp-check { flex: none; display: grid; color: var(--sky-ink); }
#tag-popover .tp-check svg { width: 16px; height: 16px; }
#tag-popover .tp-criar .tp-marca, #tag-popover .tag-picker-remove .tp-marca { background: none; color: var(--ink-2); }
#tag-popover .tp-criar { color: var(--ink); }
#tag-popover .tag-picker-list .tag-picker-remove {
  margin-top: 4px; padding-top: 1px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px;
  color: var(--ink-2); font-weight: 500;
}
#tag-popover .tag-picker-list .tag-picker-remove:hover,
#tag-popover .tag-picker-list .tag-picker-remove:focus-visible { background: var(--danger-soft); color: var(--danger); }
#tag-popover .tag-picker-list .tag-picker-remove:hover .tp-marca,
#tag-popover .tag-picker-list .tag-picker-remove:focus-visible .tp-marca { color: var(--danger); }
#tag-popover .tag-picker-empty { margin: 8px 10px 10px; font-size: var(--fs-12); line-height: 1.5; color: var(--ink-2); }
@media (pointer: coarse) { #tag-popover .tag-picker-list button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { #tag-popover { animation: none; } }


/* ============================================================
   v325 — três rodadas de minimalismo (régua: o app do Sangha)
   ============================================================ */
/* em toda parte: contador zerado some (o ícone fica) */
#nb-pe .pc-aba b:empty, .pc-aba [hidden] { display: none; }
.ord-so-celular { display: none; }
.rev-pend, .rev-selecionar { display: none; }

@media (max-width: 899.9px) {
  /* --- Rodada 1: Biblioteca --- */
  /* a lupa da barra de baixo já busca: o campo do topo saía repetido */
  #lib-root > .search { display: none; }
  /* ordenar + expandir = um botão de ícone com um menu só */
  .ord-so-celular { display: flex; }
  .ordenar-menu .ctx-sep.ord-so-celular { display: block; }
  #lib-root [data-expandir], #lib-folder .nb-controles [data-expandir] { display: none; }
  .ordenar-btn, #lib-folder .nb-controles .ordenar-btn { min-width: 0; }
  .ordenar-btn .ordenar-rotulo, .ordenar-btn .modo-chevron { display: none; }
  #lib-root .lib-notas-wrap > .card-head .ordenar-btn { width: 44px; padding: 0; justify-content: center; }
  /* pílula da supertag no card: fina à vista, alvo de toque inteiro (como a linhagem) */
  .note-item .meta button.tag--supertag:not(.tag--vazia) { min-height: 26px; padding: 3px 10px; position: relative; }
  .note-item .meta button.tag--supertag:not(.tag--vazia)::after { content: ""; position: absolute; inset: -9px -2px; }

  /* --- Rodada 2: escrever --- */
  /* teclado aberto: a barra de baixo sai do caminho */
  body:has(.cm-content:focus, input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus) .tabbar { display: none; }

  /* --- Rodada 3: Hoje --- */
  .escolha-sub { display: none; }
  #v-hoje .head-actions { display: none; }   /* Ajustes mora no Menu */

  /* --- Rodada 3: Revisão — uma lista de baralhos; tocar começa --- */
  .rev-selecionar {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; margin-left: auto;
    border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 700; color: var(--sky-ink);
  }
  .rev-selecionar[aria-pressed="true"] { background: var(--btn-ink); color: var(--canvas); }
  .rev-secao-cab { flex-wrap: wrap; }
  .rev-secao-cab > .rev-tags { flex: 1 0 100%; }
  #rev-bancada:not(.is-selecionando) .rev-baralhos-cab { display: none; }
  #rev-bancada:not(.is-selecionando) .rev-baralho {
    grid-template-columns: minmax(0, 1fr) 44px 34px; min-height: 58px; cursor: pointer; border-top: 0;
  }
  #rev-bancada:not(.is-selecionando) .rev-baralho .rev-col { display: none; }
  #rev-bancada:not(.is-selecionando) .rev-baralho .rev-pend {
    display: block; text-align: right; padding-right: 6px; font-size: var(--fs-16); font-weight: 700;
    color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  #rev-bancada:not(.is-selecionando) .rev-baralho .rev-pend.tem { color: var(--ink); }
  /* a caixa some da vista, mas segue no lugar para teclado e leitor de tela */
  #rev-bancada:not(.is-selecionando) .rev-marca input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  }
  #rev-bancada:not(.is-selecionando) .rev-baralho.is-sel { background: none; }
  #rev-bancada:not(.is-selecionando) .rev-baralho:active { background: var(--sky-soft); }
  #rev-bancada:not(.is-selecionando) .rev-baralho .rev-nome { font-size: var(--fs-16); }
  #rev-bancada:not(.is-selecionando) .rev-notas li { grid-template-columns: minmax(0, 1fr) 44px 34px; }
  #rev-bancada:not(.is-selecionando) .rev-notas .rev-col { display: none; }
  #rev-bancada:not(.is-selecionando) .rev-notas li .rev-so { grid-column: 2 / 4; justify-self: end; }
}