/* ── editor-paper usa var(--paper) para respeitar dark themes ── */
/* Mantém gradiente sutil em temas claros via color-mix */

/* Guia lateral: anotação de margem — plano, fosco, sem sombra nem gradiente */
.template-reference {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 22%, transparent) transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-low);
  box-shadow: none;
  padding: 18px;
}

.template-reference-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.template-reference-header > div:first-child {
  flex: 1;
  min-width: 0;
}

.template-reference-header strong {
  display: block;
  margin-top: 4px;
  color: var(--primary);
  font-size: 20px;
}

.template-reference-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.template-reference-tabs:not(:empty) {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.reference-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-low);
  color: var(--muted);
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.reference-tab.is-active,
.reference-tab:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.reference-tab .material-symbols-outlined {
  font-size: 16px;
}

.precision-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-low);
  padding: 14px;
  margin-bottom: 18px;
}

.precision-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.precision-top span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.precision-top-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.precision-hint-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
  text-transform: none;
  font-weight: 400;
}

.precision-hint-anchor .material-symbols-outlined {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.6;
}

.precision-hint-anchor:hover .material-symbols-outlined,
.precision-hint-anchor:focus .material-symbols-outlined {
  opacity: 1;
}

.precision-hint-anchor .precision-hint-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: none;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 7px;
  width: 220px;
  text-align: left;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.precision-hint-anchor .precision-hint-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 8px;
  border: 5px solid transparent;
  border-bottom-color: var(--ink);
}

.precision-hint-anchor:hover .precision-hint-tooltip,
.precision-hint-anchor:focus .precision-hint-tooltip {
  display: block;
}

.precision-top strong {
  color: var(--primary);
  font-size: 30px;
}

.precision-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-high);
  margin: 10px 0;
}

.precision-meter i {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width var(--motion-calm);
}

.precision-card p {
  margin: 0 0 12px;
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.45;
}

.precision-empty {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

.precision-hints {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.precision-hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-left: 2px solid var(--line);
  transition: border-color var(--motion-quick);
}
.precision-hint:hover { border-left-color: var(--primary); }
.precision-hint strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--soft-ink);
}
.precision-hint span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.precision-empty .material-symbols-outlined {
  font-size: 28px;
  opacity: 0.4;
}

.precision-empty p {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.8;
}

.precision-checks {
  display: grid;
  gap: 9px;
}

.precision-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
}

.precision-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--primary);
}

.precision-check .material-symbols-outlined {
  color: var(--muted);
  font-size: 18px;
}

.precision-check.is-passed .material-symbols-outlined {
  color: var(--primary);
}

.precision-check .is-failed-icon {
  color: var(--sienna);
}

.precision-check.is-checked strong {
  color: var(--primary);
}

.precision-check strong,
.precision-check small {
  display: block;
}

.precision-check strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.precision-check b {
  color: var(--primary);
  font-weight: 800;
}

.precision-check small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.reference-body {
  display: grid;
  gap: 18px;
}

.reference-body h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reference-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reference-pills span {
  border-radius: 999px;
  background: #e6f1ec;
  color: var(--primary);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
}

.reference-sections {
  display: grid;
  gap: 8px;
}

.reference-sections article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 10px;
}

.reference-sections strong {
  color: var(--ink);
  font-size: 13px;
}

.reference-sections p,
.reference-body li {
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.45;
}

.reference-sections p {
  margin: 4px 0 0;
}

.reference-body ul {
  margin: 0;
  padding-left: 18px;
}

.reference-model article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-low);
  padding: 12px;
}

.reference-model strong,
.reference-model small {
  display: block;
}

.reference-model strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.reference-model small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.reference-example {
  margin: 10px 0;
  border-left: 2px solid var(--primary);
  color: var(--soft-ink);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 13px;
  line-height: 1.6;
  padding-left: 10px;
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}


/* ── PORTRAIT GRANDE: tablet/TV vertical (largura ≤820px, altura ≥700px) ── */
/* Mantém os ajustes de mobile mas permite que a área de escrita cresça     */
@media (max-width: 820px) and (min-height: 700px) and (orientation: portrait) {
  .editor-paper {
    /* Área de escrita ocupa a altura disponível em vez de altura do conteúdo */
    min-height: calc(100dvh - 220px);
    flex: 1;
  }

  .writing-area {
    /* Permite que a área de texto se expanda verticalmente */
    min-height: calc(100dvh - 320px);
  }

  .editor-split {
    /* Empilha guia abaixo do manuscrito com espaço adequado */
    gap: 24px;
  }

  .template-reference {
    /* Guia de escrita em portrait: limita a altura para não sufocar o texto */
    max-height: min(340px, 40vh) !important;
    overflow-y: auto;
  }
}

/* ── MESA DE MADEIRA — fundo do canvas do editor ───────────────────────────
   Aparece só no espaço ao redor da folha, quando data-view="editor".
   A folha (.editor-paper) permanece intacta e protagonista.
   Não usa imagem externa — só CSS + SVG filter inline.               ── */

/* Camada 1: base de madeira + veios finos + divisórias de tábua */
/* Mesa de madeira — bétula clara, grão suave, como na referência Folio Notes */
.app-shell[data-view="editor"].has-desk-background .content-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* Veios horizontais finos sobre base clara */
  background:
    repeating-linear-gradient(
      178deg,
      transparent 0px, transparent 12px,
      rgba(150, 90, 30, 0.06) 12px, rgba(150, 90, 30, 0.06) 13px,
      transparent 13px, transparent 22px,
      rgba(130, 75, 20, 0.05) 22px, rgba(130, 75, 20, 0.05) 23px,
      transparent 23px, transparent 38px,
      rgba(160, 95, 32, 0.07) 38px, rgba(160, 95, 32, 0.07) 39px
    ),
    repeating-linear-gradient(
      91deg,
      transparent 0px, transparent 18px,
      rgba(120, 70, 20, 0.03) 18px, rgba(120, 70, 20, 0.03) 20px
    ),
    /* Base bétula/maple clara — igual à referência */
    linear-gradient(
      175deg,
      #deb882 0%,
      #d4ac76 15%,
      #dab87e 28%,
      #cda36c 40%,
      #d8b47c 52%,
      #cfa870 65%,
      #d6b27a 78%,
      #caa56e 90%,
      #d2ae78 100%
    );
  opacity: 0.72;
}

.app-shell[data-view="editor"].has-desk-background .content-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* Luz diagonal suave — verniz sobre madeira clara */
  background:
    linear-gradient(
      118deg,
      rgba(255, 245, 220, 0.28) 0%,
      rgba(255, 238, 200, 0.12) 25%,
      transparent 52%,
      rgba(0, 0, 0, 0.04) 80%,
      rgba(0, 0, 0, 0.07) 100%
    ),
    radial-gradient(ellipse at 20% 18%, rgba(255, 248, 225, 0.20) 0%, transparent 42%);
  opacity: 1;
}

/* Remove em impressão */
@media print {
  .content-stage::before,
  .content-stage::after { display: none !important; }
}

/* ── MODO FOCO — mesa limpa para escrever ─────────────────────────────────
   Escrever sem distração: topbar, abas, sidebar, inspector e guia somem.
   O papel e o texto ocupam o centro. Escape sai.                           */

.app-shell.is-focus .topbar,
.app-shell.is-focus .sidebar,
.app-shell.is-focus .panel-rail,
.app-shell.is-focus .panel-toggle,
.app-shell.is-focus .inspector,
.app-shell.is-focus .template-reference,
.app-shell.is-focus .editor-mode-bar,
.app-shell.is-focus .format-bar,
.app-shell.is-focus .statusbar {
  display: none !important;
}

/* Grid do shell no Foco: só o workspace, sem topbar e statusbar */
.app-shell.is-focus {
  grid-template-rows: minmax(0, 1fr);
}

/* Workspace ocupa tudo */
.app-shell.is-focus .workspace {
  height: 100dvh;
}

/* Papel centralizado com largura ajustável via --focus-width */
.app-shell.is-focus .editor-split {
  display: grid;
  place-items: start center;
  height: 100%;
  overflow-y: auto;
  padding: 0;
}

.app-shell.is-focus .editor-paper {
  width: var(--focus-width, 720px);
  max-width: min(var(--focus-width, 720px), calc(100vw - 48px));
  min-height: 100%;
  padding: 72px clamp(24px, 5vw, 64px) 120px;
  background: var(--paper);
}

/* Régua de foco (linha horizontal de leitura) */
.app-shell.is-focus .focus-ruler {
  display: block;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  pointer-events: none;
  z-index: 10;
  transform: translateY(-50%);
}

/* Barra de controles do foco — discreta, aparece ao hover */
.focus-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  opacity: 0.2;
  transition: opacity .25s;
  z-index: 50;
}

.focus-toolbar:hover,
.focus-toolbar:focus-within {
  opacity: 1;
}

/* Contador: canto superior direito, muito discreto */
.focus-counter {
  position: fixed;
  top: 16px;
  right: 20px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.4;
  pointer-events: none;
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: 0.04em;
}