/* ==========================================================================
   v8 — Identidade "C · Brot". Carregado DEPOIS de mobile.css (camada global de marca);
   as telas novas e a padaria (Heute, Ofen, Schreiben, Tagebuch, Musik) ficam em brot.css.
   O que dá a cara do app:
     · o toldo listrado de sálvia no alto da página, com a borda em semicírculos;
     · contorno de café (2px) em cartões de destaque, sem sombra decorativa;
     · botões como teclas: a borda de baixo mais escura "afunda" ao clicar;
     · pílulas de informação (HUD) com contorno; etiquetas de papel;
     · Young Serif nos títulos (a placa da padaria), Albert Sans na interface,
       Newsreader para o alemão que se lê.
   ========================================================================== */
:root{
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .4 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.3'/></svg>");
  --lift: translateY(-1px);
  --awning-h: 30px;
}
html{ background:var(--paper); }
body{ background-color:var(--paper); background-image:var(--grain); background-size:160px; font-family:var(--font-ui); color:var(--ink); }
.main{ background:transparent; position:relative; }
h1, h2, h3{ font-family:var(--font-display); font-weight:400; }
h1{ letter-spacing:-.01em; font-size:clamp(2.05rem, 1.5rem + 1.8vw, 2.7rem); line-height:1.08; }
h2{ letter-spacing:-.005em; }
h3{ letter-spacing:0; }
h2 small, h1 small{ font-family:var(--font-ui); font-size:.62em; color:var(--ink-faint); font-weight:500; letter-spacing:0; margin-left:4px; }
.view-head .eyebrow, .tc-eyebrow{ text-transform:none; letter-spacing:0; font-size:.86rem; font-weight:600; color:var(--ink-soft); }
.view-head .sub{ font-family:var(--font-ui); font-style:normal; font-size:1rem; color:var(--ink-soft); }
[lang="de"]{ hyphens:manual; }

/* ----------------------------------------------------------- o toldo */
.main::before{
  content:''; display:block; position:relative; z-index:4; pointer-events:none;
  height:32px; margin:calc(-1 * var(--sp-6)) calc(-1 * var(--sp-7)) var(--sp-5);
  background:var(--awning-img) repeat-x 0 0 / 80px 32px;
}
.main{ isolation:isolate; }

/* ----------------------------------------------------------- barra lateral (a bancada) */
.sidebar{
  background-color:var(--tin-bg); background-image:var(--grain); background-size:160px;
  border-right:1.5px solid var(--hairline-strong); color:var(--tin-fg); position:sticky; z-index:5;
}
.brand{ gap:10px; padding:4px 6px 0; color:var(--ink); }
.brand .brand-mark{ width:auto; height:auto; background:none; border-radius:0; display:grid; place-items:center; transform:rotate(-6deg); transition:transform var(--dur-base) var(--ease); }
.brand:hover .brand-mark{ transform:rotate(4deg) translateY(-1px); }
.brand-name{ font-family:var(--font-display); font-weight:400; font-size:2rem; letter-spacing:-.01em; color:var(--ink); line-height:1; transform:translateY(1px); }
.nav-link{ color:var(--ink-soft); border-radius:12px; padding:9px 12px; font-weight:550; border:2px solid transparent; position:relative; }
.nav-link svg{ opacity:1; }
.nav-link:hover{ background:var(--paper-sunken); color:var(--ink); }
.nav-link.active{ background:var(--butter); color:var(--kaffee); border-color:var(--line); box-shadow:none; font-weight:650; }
:root[data-theme="dark"] .nav-link.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.nav-sublink{ color:var(--ink-soft); }
.nav-sublink:hover{ color:var(--ink); background:var(--paper-sunken); }
.nav-sublink.active{ color:var(--ink); font-weight:700; }
.nav-sub{ border-left:2px dotted var(--hairline-strong); margin-left:22px; }
.nav-oven-time{ margin-left:auto; font-size:.74rem; font-weight:700; font-variant-numeric:tabular-nums; padding:1px 7px; border-radius:var(--radius-pill); background:var(--kruste); color:#FBF9F3; }
.nav-ofen.is-break .nav-oven-time{ background:var(--salbei); }
.nav-ofen.is-live svg{ color:var(--kruste); }
.focus-side{ color:var(--ink); border:2px solid var(--line); background:var(--paper-raised); border-radius:12px; font-weight:600; }
.focus-side:hover{ background:var(--butter-soft); }
.nav-sound-dot{ background:var(--kruste); }
.sidebar-cta{ background:transparent; color:var(--ink-soft); border:1.5px dashed var(--hairline-strong); border-radius:12px; }
.sidebar-cta:hover{ background:var(--paper-sunken); color:var(--ink); border-color:var(--ink-faint); opacity:1; }
.sidebar-foot{ border-top:1.5px dashed var(--hairline-strong); }
.sidebar-tagline{ font-family:var(--font-reading); font-style:italic; font-weight:400; color:var(--ink-faint); font-size:.92rem; }

/* ----------------------------------------------------------- botões: teclas */
.btn{ border-radius:12px; font-weight:650; padding:9px 18px; border:2px solid transparent; transition:transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn-sm{ padding:6px 12px; border-radius:10px; }
.btn-lg{ padding:12px 24px; font-size:1.05rem; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; border-bottom:3px solid var(--accent-press); padding-bottom:7px; }
.btn-sm.btn-primary{ padding-bottom:4px; }
.btn-lg.btn-primary{ padding-bottom:10px; }
.btn-primary:hover{ background:color-mix(in srgb, var(--accent) 92%, #fff); opacity:1; }
.btn-primary:active{ transform:translateY(2px); border-bottom-width:1px; padding-bottom:9px; }
.btn-sm.btn-primary:active{ padding-bottom:6px; }
.btn-secondary{ background:var(--paper-raised); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ background:var(--butter-soft); border-color:var(--line); }
.btn-secondary:active{ transform:translateY(1px); }
.btn-ghost{ border-radius:10px; }
.btn.btn-icon{ padding:7px; display:inline-flex; align-items:center; justify-content:center; }
.btn-sm.btn-icon{ padding:5px; }
.btn-primary.btn-icon{ padding-bottom:5px; }
.btn-ghost:hover{ background:var(--paper-sunken); color:var(--ink); }
.btn:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--kruste); outline-offset:2px; }
.btn:disabled{ box-shadow:none; opacity:.55; }
.link-btn{ background:none; border:none; padding:0; color:var(--teal-ink); font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }

/* campos */
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea{ border:1.5px solid var(--hairline-strong); border-radius:12px; background:var(--paper-raised); color:var(--ink); }
input:not([type=range]):focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--butter) 70%, transparent); }
:root[data-theme="dark"] input:not([type=range]):focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
input[type=range]{ accent-color:var(--accent); }

/* ----------------------------------------------------------- superfícies */
.modal{ border:2px solid var(--line); border-radius:var(--radius-lg); background-color:var(--paper-raised); box-shadow:var(--shadow-modal); }
.modal-backdrop{ background:rgba(43, 32, 26, .42); }
:root[data-theme="dark"] .modal-backdrop{ background:rgba(4, 8, 14, .6); }
.toast{ background:var(--kaffee); color:#FBF9F3; border:2px solid var(--kaffee); border-radius:14px; padding-inline:18px; box-shadow:0 10px 24px -12px rgba(0,0,0,.4); }
:root[data-theme="dark"] .toast{ background:var(--paper-raised); color:var(--ink); border-color:var(--line); }
.badge{ border-radius:var(--radius-pill); border:1.5px solid var(--hairline-strong); font-weight:700; background:var(--paper-raised); }
.badge-accent{ background:var(--accent-soft); border-color:transparent; }
.word-chip{ border:1.5px solid var(--hairline-strong); border-radius:var(--radius-pill); background:var(--paper-raised); font-weight:600; font-family:var(--font-reading); font-size:1rem; }
.word-chip:hover{ background:var(--butter); border-color:var(--line); color:var(--kaffee); }
.word-chip.is-static:hover{ background:var(--paper-raised); border-color:var(--hairline-strong); color:inherit; }
.word-chip.is-used{ background:var(--sage); border-color:var(--salbei); color:var(--ink); }
.word-chip.is-used::after{ content:' ✓'; font-family:var(--font-ui); font-size:.8em; }
.progress-track{ height:10px; background:var(--paper-sunken); border:1.5px solid var(--line); border-radius:99px; }
.progress-fill{ background:var(--butter); border-right:1.5px solid var(--line); min-width:0; }
:root[data-theme="dark"] .progress-fill{ background:var(--accent); }
.empty-state{ border:2px dashed var(--hairline-strong); border-radius:var(--radius-lg); background-color:color-mix(in srgb, var(--paper-raised) 70%, transparent); }
.empty-state h3{ font-size:1.3rem; }
.hud-pill{ display:inline-flex; align-items:center; gap:8px; border:2px solid var(--line); border-radius:var(--radius-pill); padding:5px 14px 5px 10px; background:var(--paper-raised); font-weight:600; font-size:.95rem; color:var(--ink); white-space:nowrap; }
.hud-pill svg{ flex:none; }
.hud-pill b{ font-variant-numeric:tabular-nums; }
button.hud-pill{ cursor:pointer; font:inherit; font-weight:600; font-size:.95rem; }
button.hud-pill:hover{ background:var(--butter-soft); }
.hud{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dot{ display:inline-block; width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); flex:none; }
.dot-salbei{ background:var(--salbei); } .dot-himmel{ background:var(--himmel); } .dot-butter{ background:var(--butter); } .dot-kruste{ background:var(--kruste); }

/* abas e segmentos em pílula */
.tabs{ border-bottom:none; gap:var(--sp-2); flex-wrap:wrap; }
.tab{ border:1.5px solid transparent; border-radius:var(--radius-pill); padding:7px 16px; margin:0; font-weight:650; color:var(--ink-soft); }
.tab:hover{ background:var(--paper-sunken); }
.tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tab small{ color:inherit; opacity:.7; }
.seg{ display:inline-flex; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-raised); }
.seg > button{ border:none; background:none; padding:7px 14px; font:inherit; font-weight:600; color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; gap:6px; border-right:1.5px solid var(--hairline-strong); }
.seg > button:last-child{ border-right:none; }
.seg > button:hover{ background:var(--paper-sunken); color:var(--ink); }
.seg > button.active{ background:var(--butter); color:var(--kaffee); }
:root[data-theme="dark"] .seg > button.active{ background:var(--accent); color:var(--accent-ink); }

/* ----------------------------------------------------------- cartões gerais */
.source-card{ border:2px solid var(--hairline-strong); border-radius:var(--radius-lg); background-color:var(--paper-raised); overflow:visible; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.source-card:hover{ border-color:var(--line); transform:var(--lift); }
.source-link .cover{ border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; border-bottom:2px solid var(--hairline-strong); }
.source-card h3{ font-size:1.12rem; line-height:1.25; }
.cover{ background:var(--sky-soft); color:var(--accent); }
.cover-text{ background-color:var(--butter-soft); background-image:repeating-linear-gradient(transparent 0 21px, rgba(185,121,67,.2) 21px 22px); background-position:0 6px; color:var(--teal-ink); }
.cover-excerpt{ color:var(--ink); font-family:var(--font-reading); }
.cover-play{ background:var(--butter); color:var(--kaffee); border:2px solid var(--line); width:32px; height:32px; }
.cover-chip{ border-radius:99px; background:var(--kaffee); color:#FBF9F3; padding:2px 9px; font-weight:700; }
.source-fav, .source-more{ border:2px solid var(--line); }
.source-fav.is-fav{ background:var(--apfel); color:#fff; }
.today-panel{ background:var(--butter-soft); border:2px solid var(--line); border-radius:var(--radius-md); }
.flash-card{ border:2px solid var(--hairline-strong); border-radius:16px; background-color:var(--paper-raised); padding:var(--sp-4) var(--sp-5); transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.flash-card:hover, .flash-card.is-open{ border-color:var(--line); transform:var(--lift); }
.flash-front{ font-size:1.25rem; font-weight:500; font-family:var(--font-reading); }
.level-tag{ background:var(--butter-soft); color:var(--ink); border:1.5px solid var(--hairline-strong); }
.flip-face{ border:2px solid var(--line); border-radius:var(--radius-lg); background-color:var(--paper-raised); }
.flip-face.back{ background-color:var(--butter-soft); }
.flip-face .word{ font-size:2.2rem; font-family:var(--font-reading); }
.pt-icon{ background:var(--butter); color:var(--kaffee); border:2px solid var(--line); border-radius:50%; width:40px; height:40px; }
.practice-tile{ border:2px solid var(--hairline-strong); border-radius:var(--radius-lg); background-color:var(--paper-raised); }
.practice-tile:hover{ border-color:var(--line); transform:var(--lift) !important; }
.practice-tile.is-primary{ border-color:var(--line); background-color:var(--butter-soft); }
.settings-group{ border:2px solid var(--line); border-radius:var(--radius-lg); background-color:var(--paper-raised); padding:var(--sp-5) var(--sp-6); }
.settings-group h2{ font-size:1.4rem; display:flex; align-items:baseline; gap:6px; }
.journal-item{ border:2px solid var(--hairline-strong); border-radius:14px; background-color:var(--paper-raised); }
.journal-item:hover, .journal-item.active{ border-color:var(--line); }
.journal-day-label{ text-transform:none; letter-spacing:0; font-size:.84rem; font-weight:700; color:var(--ink-soft); }
.ts-sym{ border:2px solid var(--line); background:var(--paper-raised); border-radius:18px; font-size:2rem; min-width:80px; height:80px; color:var(--teal-ink); transition:transform var(--dur-fast) var(--ease); }
.ts-sym:hover{ transform:rotate(-2deg); }
.ts-sym.br-hard{ background:var(--plum-soft); color:var(--plum); }
.hm-cell{ border-radius:4px !important; }
.hm-cell.l0{ background:var(--paper-sunken); }
.hm-cell.l1{ background:#EFE3B0; } .hm-cell.l2{ background:#E9D99A; } .hm-cell.l3{ background:#D9A66A; } .hm-cell.l4{ background:#B97943; }
:root[data-theme="dark"] .hm-cell.l1{ background:#3A3320; } :root[data-theme="dark"] .hm-cell.l2{ background:#6B5428; } :root[data-theme="dark"] .hm-cell.l3{ background:#B07A30; } :root[data-theme="dark"] .hm-cell.l4{ background:#E8A84A; }
.hm-cell.is-today{ outline:2px solid var(--line); outline-offset:1px; }
.sidebar .sync-chip, .sidebar .sync-chip *{ color:var(--ink-faint); }

/* leitura em alemão: Newsreader */
.reader-text, .transcript-body, .journal-body, .we-review, .flash-sentence, .original-sentence{ font-family:var(--font-reading); }

/* ----------------------------------------------------------- celular */
@media (max-width:720px){
  :root{ --awning-h:22px; }
  .main::before{ height:24px; margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); background-size:60px 24px; }
            mask:linear-gradient(#000 0 0) 0 0/100% 7px no-repeat, radial-gradient(circle at 15px 7px, #000 14.4px, transparent 15px) 0 0/30px 100% repeat-x; }
  .bottom-nav{ background-color:var(--paper-raised); border-top:2px solid var(--line); }
  .bn-item{ color:var(--ink-faint); font-weight:650; font-size:.66rem; gap:2px; position:relative; }
  .bn-item.active{ color:var(--ink); }
  .bn-item.active::before{ display:none; }
  .bn-item.active svg{ background:var(--butter); border:1.5px solid var(--line); border-radius:10px; box-sizing:content-box; padding:3px 9px; color:var(--kaffee); }
  :root[data-theme="dark"] .bn-item.active svg{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .bn-item .nav-oven-time{ position:absolute; top:2px; left:calc(50% + 4px); margin:0; padding:0 5px; font-size:.58rem; }
  .fab{ background:var(--accent); color:var(--accent-ink); border:2px solid var(--line); border-bottom-width:3px; box-shadow:none; }
  .settings-group{ padding:var(--sp-4); }
  h1{ font-size:2rem; }
}
@media (max-width:880px) and (min-width:721px){ .main::before{ margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); } }