/* =============================================================================
 * v3_caderno_skins.css — 4 estéticas (skins) do caderno compartilhado.
 *
 * Riqueza herdada do "caderno-vivo" da home (web/markets-demo.css). Técnica-chave
 * copiada da home: cada skin RE-PINTA as variáveis --v2-* do caderno. Assim TODO
 * elemento (título, busca, "nenhum item", árvore, cartões, stats) fica legível de
 * uma vez — em vez de override caso-a-caso (que deixava texto sumindo).
 *
 * O picker (4 bolinhas no header) é montado por v3_study_layer.js como
 * <button class="study-skin-dot" data-skin-id="..."> (vazio); o gradiente vem daqui.
 * ============================================================================= */

/* Ícone dentro dos chips de filtro (categorias + subtipos) */
.study-notebook-filters button .nbf-ic,
.study-notebook-subs button .nbf-ic{margin-right:5px;font-size:1em;line-height:1}

/* =============================================================================
 * REBASE NA HOME — o caderno do material espelha os tamanhos/espacamentos do
 * caderno-vivo da home (web/markets-demo.css): tudo compacto (14-15px), padding
 * pequeno. Sem isso, o caderno herda os botões inchados do v3_clean.css
 * (padding 9px 20px, min-height 36px) e fica feio/gigante.
 * ============================================================================= */

/* 1) CONFINAMENTO: o painel é display:grid; filhos/netos sem min-width:0
 *    estouram os 460px (a filterbox neta ia a 634px e cortava os chips). */
.study-notebook > *{min-width:0 !important;box-sizing:border-box}
.study-notebook-toolbar{min-width:0 !important;box-sizing:border-box;overflow:hidden}
.study-notebook-toolbar *{min-width:0 !important}
.study-notebook-filterbox{min-width:0 !important;box-sizing:border-box;overflow:hidden;width:100%}

/* 2) HEADER fiel à home: título "Caderno" pequeno (14px), itálico, dourado;
 *    header fino. (home: .w-notebook__caderno-head font 14px italic). */
body.clean-mode .study-notebook[data-skin] h2{
  font-size:1rem !important;line-height:1.15 !important;font-weight:700 !important;
  font-style:italic !important;font-family:"Cormorant Garamond",Georgia,serif !important;
}
body.clean-mode .study-notebook[data-skin] header{padding:9px 13px !important}
/* botões Exportar/Importar do topo: discretos (a home só tem "limpar" texto) */
body.clean-mode .study-notebook[data-skin] .study-notebook-actions button:not(.study-skin-dot){
  min-height:0 !important;padding:4px 10px !important;font-size:1rem !important;font-weight:600 !important;
}

/* 3) BUSCA — discreta e fina (mantida, recurso extra além da home) */
body.clean-mode .study-notebook .study-notebook-search{
  min-height:0 !important;padding:7px 11px !important;font-size:1rem !important;
}

/* 4) FILTROS — abas da home. QUEBRAM EM QUANTAS LINHAS PRECISAR (pedido do dono
 *    2026-06-13): todas visíveis juntas, sem rolagem horizontal que cortava as
 *    últimas (EXERCÍCIOS sumia). flex-wrap:wrap + overflow visível. */
.study-notebook-filters{display:flex !important;flex-wrap:wrap !important;overflow-x:visible !important;
  gap:4px !important;grid-template-columns:none !important;
  min-width:0 !important;max-width:100%;box-sizing:border-box;margin:2px 0 5px}
.study-notebook-subs{display:flex !important;flex-wrap:wrap !important;overflow-x:visible !important;
  min-width:0 !important;max-width:100%;box-sizing:border-box;gap:4px !important}
body.clean-mode .study-notebook .study-notebook-filters button,
body.clean-mode .study-notebook .study-notebook-subs button{
  flex:0 0 auto !important;min-height:0 !important;padding:5px 11px !important;
  font:600 .9rem/1.2 Inter,system-ui,sans-serif !important;letter-spacing:.02em;text-transform:uppercase;
  border-radius:6px !important;border:1px solid transparent !important;background:rgba(212,168,87,.08) !important;
  white-space:nowrap !important;justify-content:center;
}
body.clean-mode .study-notebook .study-notebook-filters button.is-active,
body.clean-mode .study-notebook .study-notebook-subs button.is-active{
  background:rgba(212,168,87,.20) !important;border-color:rgba(212,168,87,.45) !important;color:var(--cad-gold-bright) !important;
}
/* 5) toggle "FILTROS" e modos (Lista/Árvore/Cornell): legíveis (>=14px). */
body.clean-mode .study-notebook .study-notebook-filters-toggle{
  min-height:0 !important;padding:4px 10px !important;font-size:1rem !important;
  background:transparent !important;border-color:transparent !important;opacity:1;
}
body.clean-mode .study-notebook .study-notebook-view-mode{gap:3px !important}
body.clean-mode .study-notebook .study-notebook-view-mode button{
  min-height:0 !important;padding:4px 10px !important;font-size:1rem !important;flex:1 1 0 !important;
}
/* toolbar inteira mais compacta (menos respiro entre as fileiras de controle) */
body.clean-mode .study-notebook .study-notebook-toolbar{gap:5px !important;padding:8px 13px !important}
/* "Agrupar por seção": legível (>=14px). */
body.clean-mode .study-notebook .study-notebook-grouping{font-size:1rem !important;opacity:.95}
body.clean-mode .study-notebook .study-notebook-grouping span{font-size:1rem !important}
/* botões ↗/🗑 do cartão: mantidos (pedido), legíveis. */
body.clean-mode .study-notebook .study-note-card-actions button{
  min-height:0 !important;padding:3px 6px !important;font-size:1rem !important;
  background:transparent !important;border:none !important;opacity:.85;
}
body.clean-mode .study-notebook .study-note-card-actions button:hover{opacity:1}
/* meta ("Salvo ... sync") bem discreta, como detalhe de rodapé do cartão */
body.clean-mode .study-notebook .study-note-card-meta{font-size:1rem !important;opacity:.55}
/* 6b) LISTA não estica os cartões: a lista é display:grid com altura fixa (1fr),
 *     então com poucos itens cada cartão era esticado a ~190px (a "caixa vazia").
 *     align-content:start empilha no topo; cartões com altura natural. */
body.clean-mode .study-notebook .study-notebook-list{align-content:start !important}
body.clean-mode .study-notebook .study-note-card{align-self:start !important;display:block !important}
body.clean-mode .study-notebook .study-note-card blockquote{min-height:0 !important;height:auto !important}
/* o blockquote herdava um fundo creme de uma regra global de blockquote do
 * material (a "caixa branca" feia nas skins escuras). Transparente: herda o
 * fundo translúcido do cartão, igual aos entry da home. */
body.clean-mode .study-notebook .study-note-card blockquote{
  background:transparent !important;box-shadow:none !important;border-radius:0 !important;
}

/* 6) CARTÕES iguais aos .w-notebook__entry da home: borda-esq 3px, padding
 *    apertado (4px 6px 4px 8px), rótulo 14.5px uppercase dourado, texto 15px. */
body.clean-mode .study-notebook .study-note-card{padding:4px 6px 4px 8px !important;border-radius:0 6px 6px 0;border-left-width:3px !important}
body.clean-mode .study-notebook .study-note-card-head strong{font-size:1rem !important;letter-spacing:.05em;text-transform:uppercase}
body.clean-mode .study-notebook .study-note-card blockquote,
body.clean-mode .study-notebook .study-note-card-note{font-size:1rem !important;line-height:1.4}

/* ---- Picker no header: 4 bolinhas, cada uma com a CARA do seu tema ----------
 * IMPORTANTE: o picker fica DENTRO de .study-notebook-actions, e a regra
 * ".study-notebook-actions button" do study_layer.css (+ override !important no
 * dark) pega qualquer botão ali — pintava a bolinha de branco/cinza, 42px, com
 * borda e padding (escondia o gradiente do tema). Por isso aqui PRECISA de
 * especificidade alta (.study-notebook-actions .study-skin-dot) + !important nos
 * pontos que o material força. */
.study-skin-picker{display:inline-flex;gap:5px;align-items:center;margin-right:6px;
  padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.18)}
.study-notebook-actions .study-skin-picker .study-skin-dot,
.study-skin-picker .study-skin-dot{
  width:18px !important;height:18px !important;min-width:0 !important;
  min-height:18px !important;max-height:18px !important;flex:0 0 auto !important;
  border-radius:50% !important;padding:0 !important;cursor:pointer;
  border:1px solid rgba(255,255,255,.35) !important;
  font-size:0 !important;line-height:0 !important;color:transparent !important;
  background-color:transparent;background-clip:border-box;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.study-notebook-actions .study-skin-picker .study-skin-dot:hover,
.study-skin-picker .study-skin-dot:hover{transform:scale(1.18) !important;background-color:transparent}
.study-notebook-actions .study-skin-picker .study-skin-dot[aria-checked="true"],
.study-skin-picker .study-skin-dot[aria-checked="true"]{
  border-color:#e8c97a !important;box-shadow:0 0 0 1.5px rgba(232,201,122,.5),0 0 0 3px rgba(232,201,122,.22) !important;
}
/* constelação: céu noturno com 2 estrelas (branca + dourada) */
.study-skin-picker .study-skin-dot[data-skin-id="constelacao"]{
  /* Safari (WebKit shipping) REJEITA stop de posição-dupla (`#fff 0 8%`, que mistura
   * 0 sem unidade + %) → descarta o background-image inteiro = bolinha em branco.
   * Reescrito em stops de posição única, que todo navegador aceita. */
  background-image:
    radial-gradient(circle at 30% 30%, #fff 0%, #fff 8%, transparent 9%),
    radial-gradient(circle at 72% 68%, #ffe9a8 0%, #ffe9a8 12%, transparent 13%),
    linear-gradient(135deg,#070512 0%,#1a1230 100%) !important;
}
/* pergaminho: papel sépia */
.study-skin-picker .study-skin-dot[data-skin-id="pergaminho"]{background-image:linear-gradient(135deg,#ead9b6 0%,#8a6a3a 100%) !important}
/* mesa: glow de luminária sobre madeira */
.study-skin-picker .study-skin-dot[data-skin-id="mesa"]{background-image:radial-gradient(circle at 50% 45%,#e8c97a 0%,#6b3f1c 60%,#2a1a0c 100%) !important}
/* trilhos: madeira escura com brilho do trilho no topo */
.study-skin-picker .study-skin-dot[data-skin-id="trilhos"]{background-image:linear-gradient(180deg,#6a4e3a 0%,#2a1a0c 45%,#0a0608 100%) !important}

/* paleta interna reutilizada pelas skins escuras */
.study-notebook{--cad-creme:#f5e9d0;--cad-creme-bright:#fff7e6;--cad-gold:#d4a857;--cad-gold-bright:#e8c97a;--cad-muted:rgba(245,233,208,.66)}

/* ---- TAMANHO: a fonte serifada (Cormorant) das skins renderiza grande; o
 * título "Caderno do aluno" estava com 33px e quebrava em 3 linhas no painel de
 * 460px. Encolhe o h2 e aperta o header pra caber numa linha (ou duas curtas). */
.study-notebook[data-skin] h2{font-size:1.25rem !important;line-height:1.05;font-weight:600}
.study-notebook[data-skin] header{padding:12px 14px}
/* picker não deve empurrar a largura: deixa quebrar embaixo do título se faltar espaço */
.study-notebook[data-skin] .study-notebook-actions{flex-wrap:wrap;gap:5px;justify-content:flex-end}

/* ===========================================================================
 * SKIN 1 — CONSTELAÇÃO (padrão): céu noturno + estrelas douradas.
 * RE-PINTA as --v2-* pra tudo ficar legível (creme sobre o azul-noite).
 * =========================================================================== */
.study-notebook[data-skin="constelacao"]{
  --v2-text:#f5e9d0; --v2-muted:rgba(245,233,208,.66); --v2-line:rgba(232,201,122,.22);
  --v2-soft:rgba(245,233,208,.06); --v2-surface:rgba(20,14,28,.55); --v2-accent:#e8c97a; --v2-accent-soft:rgba(232,201,122,.16);
  position:fixed; overflow:hidden;        /* fixed (não relative!) senão o painel descola da tela */
  background:
    radial-gradient(ellipse at 20% 15%, rgba(106,18,26,.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 85%, rgba(40,30,90,.22) 0%, transparent 60%),
    linear-gradient(180deg, #0d0a14 0%, #110b08 100%) !important;
  border-color:rgba(232,201,122,.28) !important;
  color:var(--cad-creme);
  font-family:"Cormorant Garamond",Georgia,serif;
}
.study-notebook[data-skin="constelacao"]::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.85;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 43% 25%, rgba(232,201,122,.9), transparent 55%),
    radial-gradient(1px 1px at 58% 88%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(232,201,122,.75), transparent 55%),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 8% 92%, rgba(255,255,255,.55), transparent 60%);
}
.study-notebook[data-skin="constelacao"] > *{position:relative;z-index:1}
.study-notebook[data-skin="constelacao"] h2{color:var(--cad-creme-bright);font-family:"Cormorant Garamond",Georgia,serif}

/* ===========================================================================
 * SKIN 2 — PERGAMINHO (clara): papel sépia, tinta ESCURA (par casado).
 * =========================================================================== */
.study-notebook[data-skin="pergaminho"]{
  --v2-text:#2a1c08; --v2-muted:rgba(58,40,16,.72); --v2-line:rgba(120,80,30,.34);
  --v2-soft:rgba(255,245,220,.5); --v2-surface:rgba(255,250,235,.55); --v2-accent:#6b4818; --v2-accent-soft:rgba(120,80,30,.16);
  position:fixed; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,238,200,.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(120,80,30,.18), transparent 55%),
    linear-gradient(160deg, #e9d6b0 0%, #d8c094 50%, #c8a974 100%) !important;
  border-color:rgba(120,80,30,.42) !important;
  box-shadow:inset 0 0 24px rgba(120,80,30,.22), inset 0 0 0 1px rgba(255,250,230,.18);
  color:#2a1c08;
  font-family:"Cormorant Garamond","Charter",Georgia,serif;
}
.study-notebook[data-skin="pergaminho"] h2{color:#2a1c08;font-family:"Cormorant Garamond",Georgia,serif}

/* ===========================================================================
 * SKIN 3 — MESA: madeira marrom, glow dourado central (luminária).
 * =========================================================================== */
.study-notebook[data-skin="mesa"]{
  --v2-text:#f5e9d0; --v2-muted:rgba(245,233,208,.66); --v2-line:rgba(212,168,87,.30);
  --v2-soft:rgba(245,233,208,.06); --v2-surface:rgba(245,233,208,.05); --v2-accent:#e8c97a; --v2-accent-soft:rgba(212,168,87,.16);
  position:fixed; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(212,168,87,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.45) 0%, transparent 70%),
    linear-gradient(180deg, #3a2818 0%, #2a1a0c 60%, #1a0e08 100%) !important;
  border-color:rgba(212,168,87,.3) !important;
  box-shadow:inset 0 1px 0 rgba(255,237,180,.08), 0 4px 14px rgba(0,0,0,.32);
  color:var(--cad-creme);font-family:"Cormorant Garamond",Georgia,serif;
}
.study-notebook[data-skin="mesa"] h2{color:var(--cad-creme-bright);font-family:"Cormorant Garamond",Georgia,serif}

/* ===========================================================================
 * SKIN 4 — TRILHOS: estação ferroviária, linhas de fuga discretas (atrás do texto).
 * =========================================================================== */
.study-notebook[data-skin="trilhos"]{
  --v2-text:#f5e9d0; --v2-muted:rgba(245,233,208,.66); --v2-line:rgba(212,168,87,.26);
  --v2-soft:rgba(245,233,208,.05); --v2-surface:rgba(15,8,6,.5); --v2-accent:#e8c97a; --v2-accent-soft:rgba(212,168,87,.16);
  position:fixed; overflow:hidden;
  background:
    linear-gradient(85deg,  transparent 49.4%, rgba(212,168,87,.14) 50%, transparent 50.6%) left/52% 100% no-repeat,
    linear-gradient(95deg,  transparent 49.4%, rgba(212,168,87,.14) 50%, transparent 50.6%) right/52% 100% no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(212,168,87,.16) 0%, transparent 35%),
    linear-gradient(180deg, #0a0608 0%, #050304 100%) !important;
  border-color:rgba(212,168,87,.28) !important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.5);
  color:var(--cad-creme);font-family:"Cormorant Garamond",Georgia,serif;
}
/* trilhos: as linhas de fuga ficam SÓ na faixa do "vazio" (não cruzam cartões).
   Como o conteúdo é z-index maior e tem fundo próprio, os trilhos só aparecem
   no fundo entre os elementos. */
.study-notebook[data-skin="trilhos"] h2{color:var(--cad-creme-bright);font-family:"Cormorant Garamond",Georgia,serif}

/* ===========================================================================
 * Garantias de legibilidade comuns às skins ESCURAS (constelação/mesa/trilhos):
 * busca, toolbar, "nenhum item", árvore, cartões herdam o creme via --v2-*,
 * mas reforçamos os pontos que costumam escapar.
 * =========================================================================== */
.study-notebook[data-skin="constelacao"] .study-notebook-toolbar,
.study-notebook[data-skin="mesa"] .study-notebook-toolbar,
.study-notebook[data-skin="trilhos"] .study-notebook-toolbar{background:rgba(20,14,28,.45)}
.study-notebook[data-skin="constelacao"] .study-notebook-search,
.study-notebook[data-skin="mesa"] .study-notebook-search,
.study-notebook[data-skin="trilhos"] .study-notebook-search{background:rgba(245,233,208,.08);color:var(--cad-creme)}
.study-notebook[data-skin="constelacao"] .study-notebook-search::placeholder,
.study-notebook[data-skin="mesa"] .study-notebook-search::placeholder,
.study-notebook[data-skin="trilhos"] .study-notebook-search::placeholder{color:rgba(245,233,208,.55)}
/* árvore legível: níveis herdam creme/dourado em vez do azul-escuro padrão */
.study-notebook[data-skin="constelacao"] .study-tree-node[data-tree-level="0"] > .study-tree-toggle,
.study-notebook[data-skin="mesa"] .study-tree-node[data-tree-level="0"] > .study-tree-toggle,
.study-notebook[data-skin="trilhos"] .study-tree-node[data-tree-level="0"] > .study-tree-toggle{color:var(--cad-gold-bright)}
.study-notebook[data-skin="constelacao"] .study-tree-node[data-tree-level="1"] > .study-tree-toggle,
.study-notebook[data-skin="mesa"] .study-tree-node[data-tree-level="1"] > .study-tree-toggle,
.study-notebook[data-skin="trilhos"] .study-tree-node[data-tree-level="1"] > .study-tree-toggle{color:var(--cad-creme-bright)}
.study-notebook[data-skin="constelacao"] .study-tree-node[data-tree-level="2"] > .study-tree-toggle,
.study-notebook[data-skin="mesa"] .study-tree-node[data-tree-level="2"] > .study-tree-toggle,
.study-notebook[data-skin="trilhos"] .study-tree-node[data-tree-level="2"] > .study-tree-toggle{color:var(--cad-muted)}
/* cartões nas skins escuras: fundo translúcido claro pra leitura */
.study-notebook[data-skin="constelacao"] .study-note-card,
.study-notebook[data-skin="mesa"] .study-note-card,
.study-notebook[data-skin="trilhos"] .study-note-card{background:rgba(245,233,208,.06);border-color:rgba(232,201,122,.22)}
/* pergaminho (clara): cartões e busca em tinta escura */
.study-notebook[data-skin="pergaminho"] .study-notebook-search{background:rgba(255,250,235,.6);color:#2a1c08}
.study-notebook[data-skin="pergaminho"] .study-notebook-search::placeholder{color:rgba(58,40,16,.55)}
.study-notebook[data-skin="pergaminho"] .study-note-card{background:rgba(255,245,220,.45);border-color:rgba(120,80,30,.3)}
.study-notebook[data-skin="pergaminho"] .study-tree-node[data-tree-level="0"] > .study-tree-toggle{color:#6b4818}
.study-notebook[data-skin="pergaminho"] .study-tree-count{background:rgba(120,80,30,.18);color:#5a3a10}

/* ── CONTRASTE dos controles (toggle FILTROS, botões de filtro, Lista/Árvore/
      Cornell, "Agrupar"). Antes saíam em navy escuro sobre as peles escuras
      (constelação/mesa/trilhos) = "preto sobre azul" ilegível; e o filtro ativo
      era dourado-claro sobre dourado-fraco. Texto legível por pele + ativo com
      fundo dourado sólido e tinta escura (alto contraste em qualquer pele). ── */
.study-notebook[data-skin="constelacao"] .study-notebook-filters-toggle,
.study-notebook[data-skin="mesa"] .study-notebook-filters-toggle,
.study-notebook[data-skin="trilhos"] .study-notebook-filters-toggle,
.study-notebook[data-skin="constelacao"] .study-notebook-filters button:not(.is-active),
.study-notebook[data-skin="mesa"] .study-notebook-filters button:not(.is-active),
.study-notebook[data-skin="trilhos"] .study-notebook-filters button:not(.is-active),
.study-notebook[data-skin="constelacao"] .study-notebook-view-mode button:not(.is-active),
.study-notebook[data-skin="mesa"] .study-notebook-view-mode button:not(.is-active),
.study-notebook[data-skin="trilhos"] .study-notebook-view-mode button:not(.is-active),
.study-notebook[data-skin="constelacao"] .study-notebook-grouping,
.study-notebook[data-skin="mesa"] .study-notebook-grouping,
.study-notebook[data-skin="trilhos"] .study-notebook-grouping{
  color:var(--cad-creme) !important;
}
.study-notebook[data-skin="pergaminho"] .study-notebook-filters-toggle,
.study-notebook[data-skin="pergaminho"] .study-notebook-filters button:not(.is-active),
.study-notebook[data-skin="pergaminho"] .study-notebook-view-mode button:not(.is-active),
.study-notebook[data-skin="pergaminho"] .study-notebook-grouping{
  color:#2a1c08 !important;
}
body.clean-mode .study-notebook .study-notebook-filters button.is-active,
body.clean-mode .study-notebook .study-notebook-subs button.is-active,
body.clean-mode .study-notebook .study-notebook-view-mode button.is-active{
  background:var(--cad-gold) !important;border-color:var(--cad-gold) !important;color:#241a06 !important;
}

/* ===== Caderno MENOS "blocoso" (D) + árvore/vistas compactas (C1) =========
   Os botões internos do caderno NÃO usam os pills pesados do "Cartier" global
   (body.clean-mode button:not(...)), que deixava tudo grandão/1990. Versão
   leve e compacta. Vence o Cartier por !important. */
body.clean-mode .study-notebook button{
  min-height:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  letter-spacing:normal !important;
}
/* Árvore: linhas leves, sem pill nem borda (eram botões champagne enormes). */
body.clean-mode .study-notebook .study-tree-toggle{
  background:transparent !important;border:0 !important;
  padding:5px 8px !important;border-radius:8px !important;font-size:16px !important;font-weight:600 !important;
}
body.clean-mode .study-notebook .study-tree-toggle:hover{ background:rgba(212,168,87,.16) !important; }
body.clean-mode .study-notebook .study-tree-children{ padding-left:10px !important;margin-left:6px !important; }
/* Vistas Lista/Árvore/Cornell: compactas, numa LINHA só (sem empilhar/inchar). */
body.clean-mode .study-notebook .study-notebook-view-mode button{
  min-height:0 !important;padding:7px 8px !important;border-radius:10px !important;
  font-size:16px !important;border-width:1px !important;line-height:1.1 !important;
  white-space:nowrap !important;display:inline-flex !important;align-items:center !important;
  justify-content:center !important;gap:5px !important;
}
/* Flashcard no caderno: botões mais finos. */
body.clean-mode .study-notebook .study-fc-flip,
body.clean-mode .study-notebook .study-fc-rate-btn{
  padding:6px 13px !important;border-radius:10px !important;border-width:1px !important;
}
/* Botões de ação do cartão e do topo: leves (sem o pill champagne pesado). */
body.clean-mode .study-notebook .study-note-card-actions button,
body.clean-mode .study-notebook .study-notebook-actions button{
  background:rgba(212,168,87,.10) !important;border:1px solid rgba(212,168,87,.30) !important;
  padding:5px 10px !important;border-radius:10px !important;
}

/* ===== C4 — recolher a faixa de controles (filtros + agrupar + Lista/Árvore/Cornell) === */
.study-controls-min{
  justify-self:start;align-self:start;
  border:1px solid rgba(212,168,87,.35);background:transparent;color:inherit;
  border-radius:999px;padding:3px 12px;font:inherit;font-size:16px;cursor:pointer;opacity:.85;
}
.study-controls-min:hover{ background:rgba(212,168,87,.16);opacity:1; }
.study-notebook.is-controls-min .study-notebook-filterbox,
.study-notebook.is-controls-min .study-notebook-grouping,
.study-notebook.is-controls-min .study-notebook-view-mode{ display:none !important; }

/* ===========================================================================
 * PISO DE 16px NO CADERNO — EM TODA SUPERFÍCIE (não só no clean).
 * Raiz do "ilegível no escuro": as regras de tamanho estavam presas a
 * body.clean-mode (somem no tema artístico) e o fallback usava fontes <16px.
 * Esta regra escopa em .study-notebook[data-skin] (o aside SEMPRE tem data-skin),
 * então vale em clean E artístico, claro E escuro. Texto do caderno é chrome:
 * piso de 16px integral (regra do dono). Igual à home, que crava 16px no chrome.
 * =========================================================================== */
body .study-notebook[data-skin] .study-notebook-search,
body .study-notebook[data-skin] .study-notebook-filters-toggle,
body .study-notebook[data-skin] .study-notebook-filters button,
body .study-notebook[data-skin] .study-notebook-subs button,
body .study-notebook[data-skin] .study-notebook-view-mode button,
body .study-notebook[data-skin] .study-notebook-grouping,
body .study-notebook[data-skin] .study-notebook-grouping span,
body .study-notebook[data-skin] .study-controls-min,
body .study-notebook[data-skin] .study-notebook-stats,
body .study-notebook[data-skin] .study-notebook-empty,
body .study-notebook[data-skin] .study-notebook-group-head,
body .study-notebook[data-skin] .study-notebook-actions button:not(.study-skin-dot),
body .study-notebook[data-skin] .study-note-card-head strong,
body .study-notebook[data-skin] .study-note-card-note,
body .study-notebook[data-skin] .study-note-card blockquote,
body .study-notebook[data-skin] .study-note-card-status,
body .study-notebook[data-skin] .study-note-card-tag,
body .study-notebook[data-skin] .study-note-card-meta,
body .study-notebook[data-skin] .study-note-card-block-ref,
body .study-notebook[data-skin] .study-note-card-refs > strong,
body .study-notebook[data-skin] .study-ref-chip,
body .study-notebook[data-skin] .study-tree-toggle,
body .study-notebook[data-skin] .study-tree-count,
body .study-notebook[data-skin] .study-note-compare,
body .study-notebook[data-skin] .study-note-compare strong,
body .study-notebook[data-skin] .study-block-counter{ font-size:16px !important; }
/* rodapé "Salvo… sync" deixa de ser fantasma (era opacity .55 + 12px) */
body .study-notebook[data-skin] .study-note-card-meta{ opacity:.9 !important; }

/* =============================================================================
 * COR DO TEXTO SEGUE A SKIN — não o tema da página. (Conserto da RAIZ da
 * "ilegibilidade nos temas escuros".)
 *
 * A nota do caderno é um <p>; a regra de PROSA do material no clean
 * (`body.clean-mode p,li,dd,td{color:var(--ink-2)}`, navy) vazava pra dentro do
 * caderno e pintava o corpo do cartão de NAVY. Como o fundo do caderno vem da
 * SKIN (que pode ser escura — constelação/mesa/trilhos), dava navy sobre escuro
 * = ilegível. No artístico o vazamento é o inverso
 * (`[data-theme="dark"] .study-note-card-note{#e2e8f0!important}`). Os dois
 * IGNORAM a skin. Aqui o texto passa a vir da MESMA skin do fundo (var(--v2-*)),
 * especificidade (0,3,1) + !important pra vencer os dois vazamentos: skin escura
 * = creme; skin clara (pergaminho) = tinta escura — sempre casado. */
body .study-notebook[data-skin] .study-note-card-note,
body .study-notebook[data-skin] .study-note-card blockquote,
body .study-notebook[data-skin] .study-note-compare,
body .study-notebook[data-skin] .study-notebook-empty{ color:var(--v2-text) !important; }
body .study-notebook[data-skin] .study-note-card-meta,
body .study-notebook[data-skin] .study-note-card-block-ref,
body .study-notebook[data-skin] .study-note-card-refs > strong,
body .study-notebook[data-skin] .study-note-compare strong,
body .study-notebook[data-skin] .study-block-counter{ color:var(--v2-muted) !important; }
/* Cartões "especiais" (afeto/autoavaliação) têm fundo em gradiente ESCURO fixo
 * (só no tema artístico). Ali o texto é SEMPRE creme, independe da skin — senão
 * numa skin clara (pergaminho) ficaria tinta-escura sobre o gradiente escuro. */
[data-theme="dark"] .study-notebook[data-skin] .study-note-card-afeto .study-note-card-note,
[data-theme="dark"] .study-notebook[data-skin] .study-note-card-autoavaliacao .study-note-card-note{ color:var(--cad-creme) !important; }

/* =============================================================================
 * CHROME DO CADERNO SEGUE A SKIN — não o tema da página. (Auditoria do dono:
 * "Exportar/Importar é azul hardcoded e some em algumas skins" + os outros do
 * mesmo tipo.)
 *
 * Raiz: o bloco `[data-theme="dark"] .study-*` (v3_study_layer.css:351-372) pinta
 * TODO o painel do caderno com uma paleta cinza-azulada FIXA, presa ao tema da
 * página, ignorando a skin — então em skin clara (pergaminho) ou quando tema≠skin
 * vira cor sem contraste. Aqui o chrome do PAINEL passa a vir das variáveis da
 * SKIN (--v2-surface/-text/-line/-accent/-accent-soft/-soft/-muted), que é um par
 * fundo+texto casado. Especificidade (0,3,1)+ + !important vence o bloco fixo.
 * Os flutuantes .study-toolbar/.study-modal ficam de FORA de propósito: flutuam
 * sobre o material, não dentro da skin do caderno. */
/* Exportar/Importar (o caso citado) */
body .study-notebook[data-skin] .study-notebook-actions button:not(.study-skin-dot){
  background:var(--v2-surface) !important; color:var(--v2-text) !important; border-color:var(--v2-line) !important;
}
body .study-notebook[data-skin] .study-notebook-actions button:not(.study-skin-dot):hover{
  background:var(--v2-accent-soft) !important; border-color:var(--v2-accent) !important;
}
/* botões de ação do cartão (↗/🗑) */
body .study-notebook[data-skin] .study-note-card-actions button{ color:var(--v2-muted) !important; border-color:var(--v2-line) !important; }
body .study-notebook[data-skin] .study-note-card-actions button:hover{ color:var(--v2-text) !important; background:var(--v2-accent-soft) !important; }
/* título e tag do cartão (eram teal/azul fixos) */
body .study-notebook[data-skin] .study-note-card-head strong{ color:var(--v2-accent) !important; }
body .study-notebook[data-skin] .study-note-card-tag{ background:var(--v2-accent-soft) !important; color:var(--v2-accent) !important; }
/* árvore: contador + linhas + hover (eram navy fixos) */
body .study-notebook[data-skin] .study-tree-count{ background:var(--v2-soft) !important; color:var(--v2-muted) !important; }
body .study-notebook[data-skin] .study-tree-children{ border-left-color:var(--v2-line) !important; }
body .study-notebook[data-skin] .study-tree-toggle:hover{ background:var(--v2-accent-soft) !important; }
/* cabeçalho de grupo, busca, filtros, bordas do header/toolbar */
body .study-notebook[data-skin] .study-notebook-group-head{ background:var(--v2-soft) !important; color:var(--v2-accent) !important; }
body .study-notebook[data-skin] .study-notebook-search{ background:var(--v2-surface) !important; color:var(--v2-text) !important; border-color:var(--v2-line) !important; }
body .study-notebook[data-skin] .study-notebook-filters button:not(.is-active){ background:var(--v2-soft) !important; border-color:var(--v2-line) !important; }
body .study-notebook[data-skin] .study-notebook-toolbar{ border-color:var(--v2-line) !important; }
body .study-notebook[data-skin] header{ border-color:var(--v2-line) !important; }
/* chips de referência (lei/termo/fórmula): eram azul/roxo/teal fixos → vira o
 * acento da skin (legível em fundo claro OU escuro). Perde a cor-categoria, mas
 * ganha legibilidade em todas as skins (que era o pedido). */
body .study-notebook[data-skin] .study-ref-chip{ background:var(--v2-accent-soft) !important; color:var(--v2-accent) !important; border-color:var(--v2-line) !important; }

/* ---- BOLINHAS DE SKIN VISÍVEIS (caso A confirmado pelo raio-X: o código é o
 * atual; o problema é que as bolinhas eram 18px e 3 das 4 em gradiente quase-preto
 * sobre a cápsula escura = sumiam). Maiores (26px) pra dar pra ver a "miniatura"
 * de cada tema, e cada bolinha com ARO DUPLO (escuro+claro) que destaca em fundo
 * claro OU escuro. Cápsula em cinza neutro (boa em qualquer skin). ---- */
body .study-notebook[data-skin] .study-skin-picker{
  background:rgba(128,128,128,.22) !important; border-color:rgba(128,128,128,.45) !important;
  gap:8px !important; padding:5px 8px !important;
}
body .study-notebook[data-skin] .study-skin-picker .study-skin-dot{
  /* Safari NÃO pinta background-image em <button> com aparência nativa: as bolinhas
   * SÃO <button>, então sem appearance:none o gradiente do tema não aparece. */
  -webkit-appearance:none !important; appearance:none !important;
  width:26px !important; height:26px !important; min-width:26px !important;
  min-height:26px !important; max-height:26px !important;
  border:1px solid rgba(0,0,0,.45) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.65) !important;  /* aro claro externo */
}
body .study-notebook[data-skin] .study-skin-picker .study-skin-dot[aria-checked="true"]{
  border-color:#e8c97a !important;
  box-shadow:0 0 0 2px rgba(232,201,122,.7), 0 0 0 4px rgba(232,201,122,.3) !important;
}

/* =============================================================================
 * À PROVA DE SAFARI: o DESENHO de cada bolinha vai num ::before (que NÃO é
 * <button>), então NENHUMA regra de button consegue apagá-lo — nem o
 * `background:#1e293b!important` do tema escuro, nem o bug de cascata do Safari.
 * O controle do dono provou que o Safari pinta gradiente em elemento comum
 * (div:ok); o ::before se comporta como elemento comum. (O dono também notou: a
 * MESMA bolinha funciona na home, que não tem essa regra de button por cima.) */
body .study-notebook[data-skin] .study-skin-picker .study-skin-dot{ position:relative !important; overflow:hidden !important; }
body .study-notebook[data-skin] .study-skin-picker .study-skin-dot::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  border-radius:inherit !important; background-position:center !important; background-size:cover !important; pointer-events:none;
}
body .study-notebook[data-skin] .study-skin-dot[data-skin-id="constelacao"]::before{
  background-image:
    radial-gradient(circle at 30% 30%, #fff 0%, #fff 8%, transparent 9%),
    radial-gradient(circle at 72% 68%, #ffe9a8 0%, #ffe9a8 12%, transparent 13%),
    linear-gradient(135deg,#070512,#1a1230) !important;
}
body .study-notebook[data-skin] .study-skin-dot[data-skin-id="pergaminho"]::before{ background-image:linear-gradient(135deg,#ead9b6,#8a6a3a) !important; }
body .study-notebook[data-skin] .study-skin-dot[data-skin-id="mesa"]::before{ background-image:radial-gradient(circle at 50% 45%,#e8c97a,#6b3f1c 60%,#2a1a0c) !important; }
body .study-notebook[data-skin] .study-skin-dot[data-skin-id="trilhos"]::before{ background-image:linear-gradient(180deg,#6a4e3a,#2a1a0c 45%,#0a0608) !important; }