/* ==========================================================================
   v7 — Keks. Identidade, grifos, fila de cartões, transcrição sincronizada e
   painel Ambiente. Carregado depois de features.css e antes de mobile.css.
   Princípios: respiro · papel, não vidro · luz de dia nublado · ritmo de página
   · movimento de garoa · cantos de 4–6 px · som como parte da identidade.
   ========================================================================== */

/* ---------------------------------------------------------- tipografia */
body{ font-feature-settings:'kern' 1; letter-spacing:.005em; }
h1, h2, h3, h4{ font-weight:600; letter-spacing:-.012em; }
h1{ font-weight:560; letter-spacing:-.02em; }
.view-head .eyebrow, .tc-eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-size:var(--fs-micro); font-weight:700; color:var(--ink-faint); }
.view-head .sub{ font-family:var(--font-reading); font-style:italic; color:var(--ink-soft); }
.tabular{ font-variant-numeric:tabular-nums; }
.label-opt{ font-weight:400; color:var(--ink-faint); font-size:var(--fs-micro); margin-left:4px; }
a{ text-underline-offset:.18em; }
::selection{ background:color-mix(in srgb, var(--teal) 28%, transparent); }

/* ---------------------------------------------------------- barra lateral */
.sidebar{ gap:var(--sp-5); padding:var(--sp-5) var(--sp-3) var(--sp-4); }
.brand{ display:flex; align-items:center; gap:10px; padding:2px 8px 0; text-decoration:none; color:var(--ink); }
.brand .brand-mark{ flex:none; border-radius:7px; }
.brand-name{ font-family:var(--font-display); font-size:1.55rem; font-weight:600; letter-spacing:-.03em; line-height:1; transform:translateY(-1px); }
:root[data-theme="dark"] .brand .brand-mark{ box-shadow:0 0 0 1px var(--hairline-strong); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .brand-mark{ box-shadow:0 0 0 1px var(--hairline-strong); } }
.nav-link{ border-radius:var(--radius-sm); padding:9px 10px; }
.nav-link.active{ background:var(--paper-raised); box-shadow:inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--hairline); }
.sidebar-extra{ display:flex; flex-direction:column; gap:var(--sp-2); }
.focus-side{ margin-top:0; border-radius:var(--radius-md); padding:9px 12px; background:transparent; }
.focus-side .nav-focus-time{ margin-left:auto; }
.nav-sound-dot{ display:none; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; }
.nav-focus.has-sound .nav-sound-dot{ display:inline-block; animation:keks-breathe 2.4s var(--ease) infinite; }
@keyframes keks-breathe{ 50%{ opacity:.35; } }
.sidebar-cta{
  background:transparent; color:var(--ink-soft); border:1px dashed var(--hairline-strong);
  font-weight:600; justify-content:flex-start; padding:9px 12px; border-radius:var(--radius-md);
}
.sidebar-cta:hover{ opacity:1; color:var(--ink); border-color:var(--accent); background:var(--paper-raised); }
.sidebar-foot{ border-top:1px solid var(--hairline); padding-top:var(--sp-2); gap:var(--sp-2); }
.sidebar-tagline{ font-family:var(--font-reading); font-style:italic; color:var(--ink-faint); font-size:.86rem; padding:0 10px; }

/* ---------------------------------------------------------- superfícies */
.btn{ font-weight:650; letter-spacing:.005em; }
.btn-primary:hover{ opacity:1; background:color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-secondary:hover{ border-color:var(--accent); }
.source-card:hover, .practice-tile:hover, .today-continue:hover{ transform:none; }
.source-card:hover{ border-color:var(--hairline-strong); }
.toast{ border-radius:var(--radius-md); font-weight:500; }
.modal{ border:1px solid var(--hairline); }
.modal-wide{ width:min(640px, 100%); }
.empty-state{ border-style:solid; background:color-mix(in srgb, var(--paper-raised) 60%, transparent); }
.banner-warn{ background:var(--sky-soft); }
.source-status.is-done{ color:var(--teal-ink); }
.flash-source-link{ color:var(--teal-ink); }

/* ---------------------------------------------------------- leitor */
.reader-view .reader-head{ flex-direction:column; align-items:stretch; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.reader-view .reader-tools{ justify-content:flex-start; padding-top:var(--sp-2); }
.reader-view #rd-fav{ margin-left:auto; }
.reader-title{ min-width:0; }
.reader-title h1{ margin-top:10px; font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
.back-link{ margin-left:-11px; }
.reader-tools{ flex-wrap:wrap; justify-content:flex-end; }
.reader-body{ max-width:var(--measure); }
[lang="de"].reader-body{ font-feature-settings:'kern' 1, 'liga' 1; }
.reader-hint{ margin-top:var(--sp-6); text-align:center; }
.tool-count{ font-size:var(--fs-micro); font-variant-numeric:tabular-nums; color:var(--ink-faint); min-width:0; }
.tool-count:empty{ display:none; }
.tool-count.is-paused::after{ content:''; display:inline-block; width:6px; height:6px; margin-left:4px; border-radius:50%; background:var(--plum); vertical-align:middle; }
.btn-primary .tool-count{ color:inherit; opacity:.8; }

/* edição do texto */
.reader-editor{ max-width:var(--measure); }
.reader-editor textarea{
  font-family:var(--font-reading); font-size:var(--fs-reading); line-height:1.75; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--hairline-strong); border-radius:var(--radius-md);
  padding:var(--sp-5); min-height:50vh; resize:vertical;
}
.editor-bar{
  position:sticky; bottom:var(--sp-3); z-index:10; margin-top:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  background:var(--paper-raised); border:1px solid var(--hairline-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-modal);
}
.editor-bar .source-meta{ margin-right:auto; }

/* ---------------------------------------------------------- grifos */
mark.hl{
  color:inherit; padding:.08em 0; border-radius:0;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  cursor:pointer;
}
mark.hl.hl-first{ border-top-left-radius:3px; border-bottom-left-radius:3px; padding-left:.06em; margin-left:-.06em; }
mark.hl.hl-last{ border-top-right-radius:3px; border-bottom-right-radius:3px; padding-right:.06em; margin-right:-.06em; }
mark.hl-yellow{ background:var(--hl-yellow); }
mark.hl-green{ background:var(--hl-green); }
mark.hl-blue{ background:var(--hl-blue); }
mark.hl-pink{ background:var(--hl-pink); }
mark.hl-purple{ background:var(--hl-purple); }
mark.hl:hover{ box-shadow:0 1.5px 0 0 color-mix(in srgb, var(--ink) 35%, transparent); }
/* já virou cartão: um pontinho discreto no fim do trecho */
mark.hl.has-card.hl-last::after{
  content:''; display:inline-block; width:5px; height:5px; margin-left:3px; border-radius:50%;
  background:var(--accent); vertical-align:.45em; opacity:.75;
}
mark.hl.is-flash{ animation:hl-flash 1.4s var(--ease); }
@keyframes hl-flash{ 0%, 60%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } 100%{ box-shadow:none; } }
.shadow-active mark.hl{ cursor:inherit; }

/* bolinhas de cor */
.swatch{
  width:20px; height:20px; border-radius:50%; padding:0; cursor:pointer; flex:none;
  border:2px solid var(--paper-raised); box-shadow:0 0 0 1px var(--hairline-strong);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.swatch:hover{ transform:scale(1.12); }
.swatch.is-active{ box-shadow:0 0 0 2px var(--ink); }
.sw-yellow{ background:var(--sw-yellow); } .sw-green{ background:var(--sw-green); } .sw-blue{ background:var(--sw-blue); }
.sw-pink{ background:var(--sw-pink); } .sw-purple{ background:var(--sw-purple); }

/* barra de seleção com as cores */
.selection-toolbar{ border-radius:var(--radius-md); gap:10px; }
.selection-toolbar button{ border-radius:var(--radius-sm); }
.st-preview{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-reading); font-style:italic; opacity:.85; }
.st-swatches{ display:flex; gap:6px; padding:0 6px; border-left:1px solid color-mix(in srgb, var(--paper) 25%, transparent); border-right:1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.selection-toolbar button.swatch{ width:22px; height:22px; border:2px solid var(--ink); box-shadow:none; padding:0; border-radius:50%; }
.selection-toolbar button.sw-yellow{ background:var(--sw-yellow); } .selection-toolbar button.sw-green{ background:var(--sw-green); }
.selection-toolbar button.sw-blue{ background:var(--sw-blue); } .selection-toolbar button.sw-pink{ background:var(--sw-pink); }
.selection-toolbar button.sw-purple{ background:var(--sw-purple); }
.selection-toolbar .swatch:hover{ box-shadow:0 0 0 2px var(--paper); }

/* menu de um grifo */
.hl-popover{
  position:fixed; z-index:160; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  background:var(--paper-raised); border:1px solid var(--hairline-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-modal); padding:8px 10px; animation:toast-in var(--dur-fast) var(--ease);
}
.hl-popover.is-docked{ left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + var(--sp-4)); justify-content:space-between; padding:10px 12px; }
.hlp-colors{ display:flex; gap:7px; padding-right:var(--sp-2); border-right:1px solid var(--hairline); }
.hlp-actions{ display:flex; align-items:center; gap:4px; }
.hlp-actions button{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font:inherit; font-size:var(--fs-small); font-weight:650; color:var(--ink); padding:6px 9px; border-radius:var(--radius-sm);
}
.hlp-actions button:hover{ background:var(--paper-sunken); }
.hlp-actions .hlp-remove{ color:var(--ink-faint); }
.hlp-actions .hlp-remove:hover{ color:var(--danger); background:var(--danger-soft); }

/* painel de grifos */
.hp-colors{ display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper); }
.hp-color{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--hairline); flex-wrap:wrap; }
.hp-color:first-child{ border-top:none; }
.hp-dot{ width:12px; height:12px; border-radius:50%; flex:none; display:inline-block; }
.hp-color > .hp-dot{ width:16px; height:16px; }
.hp-color-text{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 140px; }
.hp-color-text span{ font-size:var(--fs-small); color:var(--ink-faint); }
.hp-color-actions{ display:flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap; }
.hp-empty{ padding:var(--sp-5) var(--sp-4); color:var(--ink-faint); text-align:center; font-size:var(--fs-small); }
.hp-list-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:var(--sp-5) 0 var(--sp-2); flex-wrap:wrap; }
.hp-filter{ display:flex; gap:4px; flex-wrap:wrap; }
.hp-filter .chip{ padding:3px 10px; gap:6px; }
.hp-list{ display:flex; flex-direction:column; max-height:40vh; overflow:auto; border-top:1px solid var(--hairline); }
.hp-item{
  display:flex; align-items:baseline; gap:var(--sp-3); width:100%; text-align:left; cursor:pointer;
  background:none; border:none; border-bottom:1px solid var(--hairline); padding:10px 4px; color:var(--ink); font:inherit;
}
.hp-item:hover{ background:var(--paper-sunken); }
.hp-item .hp-dot{ transform:translateY(1px); }
.hp-quote{ flex:1; font-family:var(--font-reading); font-size:1.02rem; line-height:1.45; }
.hp-card{ color:var(--teal-ink); flex:none; }

/* ---------------------------------------------------------- fila de cartões */
.fq-head{ display:flex; align-items:center; gap:var(--sp-3); margin:-4px 0 var(--sp-4); font-size:var(--fs-small); color:var(--ink-soft); }
.fq-dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.fq-count b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.fq-track{ flex:1; height:3px; border-radius:var(--radius-pill); background:var(--hairline); overflow:hidden; }
.fq-track > div{ height:100%; background:var(--accent); transition:width var(--dur-base) var(--ease); }
.fq-actions .btn-ghost{ margin-right:auto; }

/* ---------------------------------------------------------- vídeo + transcrição */
.video-layout{ grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:var(--sp-5); }
.video-col{ min-width:0; }
.video-sticky{ position:sticky; top:var(--sp-4); z-index:6; background:var(--paper); }
.video-progress{ margin-top:var(--sp-3); }
.caption-line{
  margin-top:var(--sp-2); min-height:3.2em; padding:var(--sp-2) var(--sp-3);
  font-family:var(--font-reading); font-size:1.18rem; line-height:1.45; text-align:center; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
}
.caption-line.is-empty{ color:var(--ink-faint); }
.transcript-panel{ max-height:calc(100vh - 2 * var(--sp-5)); position:sticky; top:var(--sp-4); padding:var(--sp-4) var(--sp-4) var(--sp-3); scroll-padding:var(--sp-6); }
.transcript-tools{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-bottom:var(--sp-3); }
.transcript-body{ font-size:1.06rem; line-height:1.7; max-width:none; }
.transcript-body.cues{ white-space:normal; display:flex; flex-direction:column; gap:2px; }
.transcript-empty{ color:var(--ink-faint); font-family:var(--font-ui); font-size:var(--fs-small); white-space:normal; }
.cue{
  position:relative; display:grid; grid-template-columns:3.4em 1fr; gap:var(--sp-2); align-items:baseline;
  padding:5px 8px 5px 0; border-radius:var(--radius-sm); cursor:pointer; white-space:pre-wrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cue:hover{ background:var(--paper-sunken); }
.cue-time{
  background:none; border:none; padding:0 0 0 6px; cursor:pointer; text-align:left;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums;
  align-self:baseline; line-height:1.9;
}
.cue-time::before{ content:attr(data-t); }
.cue-time:hover{ color:var(--accent); }
.cue-text{ min-width:0; }
.cue.is-active{ background:var(--accent-soft); color:var(--ink); }
.cue.is-active .cue-time{ color:var(--accent); }
.cue.is-active::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:2px; background:var(--accent); }
.vp-return{ position:sticky; bottom:var(--sp-2); margin:var(--sp-2) auto 0; display:flex; box-shadow:var(--shadow-modal); }
.transcript-hint{ margin-top:var(--sp-3); }
.transcript-edit textarea{ min-height:320px; border:1px solid var(--hairline-strong); padding:var(--sp-3); border-radius:var(--radius-sm); font-family:var(--font-reading); font-size:1.02rem; line-height:1.6; }
.te-tools{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-2); }
.te-file{ margin:0; color:var(--ink); }
.te-help{ font-size:var(--fs-small); color:var(--ink-faint); margin:var(--sp-2) 0 0; line-height:1.5; }
.te-help code{ font-size:.85em; background:var(--paper-sunken); padding:1px 5px; border-radius:3px; }

@media (max-width: 980px){
  .video-layout{ grid-template-columns:1fr; gap:var(--sp-3); }
  .video-col{ display:contents; }          /* o vídeo fica preso no topo enquanto a transcrição rola */
  .video-sticky{ top:0; margin:0 calc(-1 * var(--sp-4)); padding:0 var(--sp-4) var(--sp-2); border-bottom:1px solid var(--hairline); }
  .transcript-panel{ max-height:none; position:static; overflow:visible; }
  .caption-line{ min-height:2.9em; font-size:1.05rem; }
}

/* ---------------------------------------------------------- painel Ambiente */
.focus-panel{ width:340px; gap:var(--sp-4); padding:var(--sp-4); max-height:calc(100vh - 2 * var(--sp-4)); overflow:auto; }
.fp-head h3{ font-size:1.25rem; }
.fp-amb{ border-top:none; padding-top:0; gap:var(--sp-3); }
.fp-groups{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.fp-group{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px 8px;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-md); cursor:pointer;
  color:var(--ink-soft); font:inherit; font-size:var(--fs-micro); font-weight:650;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fp-group svg{ width:20px; height:20px; }
.fp-group:hover{ color:var(--ink); border-color:var(--hairline-strong); }
.fp-group.active{ background:var(--paper-raised); border-color:var(--accent); color:var(--ink); }
.fp-live{ position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--teal); display:none; }
.fp-group.is-playing .fp-live{ display:block; animation:keks-breathe 2.4s var(--ease) infinite; }
.fp-variants{ display:flex; flex-direction:column; gap:4px; }
.fp-variant{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-md); padding:8px 10px; font:inherit; color:var(--ink);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fp-variant:hover{ background:var(--paper-sunken); }
.fp-variant.is-playing{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.fv-icon{ width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--hairline-strong); color:var(--ink-soft); }
.fp-variant.is-playing .fv-icon{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.fv-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.fv-text b{ font-size:.92rem; }
.fv-text small{ font-size:var(--fs-micro); color:var(--ink-faint); }
.fv-bars{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.fv-bars i{ width:3px; background:var(--accent); border-radius:1px; animation:fv-bar 1.6s var(--ease) infinite; }
.fv-bars i:nth-child(1){ height:6px; } .fv-bars i:nth-child(2){ height:12px; animation-delay:.3s; } .fv-bars i:nth-child(3){ height:8px; animation-delay:.6s; }
@keyframes fv-bar{ 50%{ transform:scaleY(.45); } }
.fv-bars i{ transform-origin:bottom; }
.fp-transport{ display:flex; align-items:center; gap:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--hairline); }
.fp-play{ border-radius:50%; width:38px; height:38px; flex:none; }
.fp-now{ display:flex; flex-direction:column; min-width:0; flex:1; font-size:var(--fs-small); line-height:1.3; }
.fp-now small{ color:var(--ink-faint); font-size:var(--fs-micro); }
.fp-vol{ margin:0; flex:0 1 110px; }
.fp-vol input{ width:100%; }
.fp-pomo{ gap:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--hairline); }
.fp-section-toggle{
  display:flex; align-items:baseline; gap:8px; width:100%; background:none; border:none; padding:0; cursor:pointer;
  font:inherit; color:var(--ink); text-align:left;
}
.fp-section-toggle .collapse-chevron{ align-self:center; }
.fp-pomo.is-collapsed .collapse-chevron{ transform:rotate(-90deg); }
.fp-sub{ font-size:var(--fs-micro); color:var(--ink-faint); flex:1; }
.fp-mini-time{ font-size:var(--fs-small); font-weight:650; font-variant-numeric:tabular-nums; color:var(--accent); }
.fp-pomo-body{ display:flex; flex-direction:column; gap:var(--sp-3); }
.fp-time{ font-family:var(--font-ui); font-weight:300; font-size:2.6rem; letter-spacing:-.02em; color:var(--ink); }
.fp-today{ text-align:left; }

/* ---------------------------------------------------------- Hoje */
.today-heat .th-head h2{ font-size:var(--fs-h3); }
.hm-cell.l1{ background:color-mix(in srgb, var(--teal) 25%, var(--paper)); }
.hm-cell.l2{ background:color-mix(in srgb, var(--teal) 50%, var(--paper)); }
.hm-cell.l3{ background:color-mix(in srgb, var(--accent) 65%, var(--paper)); }
.hm-cell.l4{ background:var(--accent); }

/* ---------------------------------------------------------- flashcards: observações */
.flash-notes{ font-size:var(--fs-small); color:var(--ink-soft); background:var(--paper-sunken); border-radius:var(--radius-sm); padding:6px 10px; white-space:pre-wrap; }
.flip-face .flash-notes{ max-width:90%; text-align:left; }

/* ---------------------------------------------------------- toque e celular */
@media (pointer: coarse){
  .swatch{ width:30px; height:30px; }
  .selection-toolbar .swatch{ width:30px; height:30px; }
  .hlp-actions button{ min-height:44px; }
  .cue{ padding-top:8px; padding-bottom:8px; }
  .fp-variant{ min-height:52px; }
}
@media (max-width: 720px){
  .selection-toolbar.is-docked{ flex-wrap:wrap; justify-content:center; border-radius:var(--radius-md); row-gap:8px; padding:10px 12px; }
  .selection-toolbar.is-docked .st-preview{ flex:1 1 100%; text-align:center; max-width:none; }
  .selection-toolbar.is-docked .st-swatches{ border:none; padding:0 4px; }
  .reader-view .reader-head{ align-items:flex-start; }
  .reader-tools{ justify-content:flex-start; width:100%; }
  .reader-body{ font-size:1.12rem; }
  .hp-color-actions{ width:100%; }
  .hp-color-actions .btn:not(.btn-icon){ flex:1; justify-content:center; }
  .fq-actions{ display:grid !important; grid-template-columns:1fr 1fr; }
  .fq-actions .btn-primary{ grid-column:1 / -1; order:-1; }
  .fq-actions .btn-ghost{ margin-right:0; }
  .focus-panel{ width:auto; max-height:min(78vh, 640px); }
  body.is-video .focus-pill{ display:none; }
  body.is-video .main{ padding-top:calc(env(safe-area-inset-top, 0px) + var(--sp-3)); }
  .brand-name{ font-size:1.35rem; }
}
.hl-popover.is-docked .hlp-colors{ border-right:none; padding-right:0; }