/* Enlight Garden Study UI V2
   Additive presentation layer for read-v2.html. The original reader.css and
   read.html stay untouched and remain the rollback path. */

body.ui-v2{
  --v2-bar:rgba(253,250,245,.96);
  --v2-shadow:0 12px 34px rgba(55,38,18,.12);
  --v2-touch:44px;
}
body.ui-v2.dark{--v2-bar:rgba(28,28,32,.96);--v2-shadow:0 16px 40px rgba(0,0,0,.34)}
body.ui-v2.v2-tools-open{overflow:hidden}

.ui-v2 .topBar{z-index:70;background:var(--v2-bar);box-shadow:0 1px 0 var(--line)}
.ui-v2 .v2-top{min-height:64px;padding:10px max(18px,env(safe-area-inset-left));gap:8px;flex-wrap:nowrap}
.ui-v2 .v2-home{flex:0 0 auto}
.ui-v2 .v2-chapter-nav{flex-wrap:nowrap}
.ui-v2 .v2-chapter-nav select{height:36px}
.ui-v2 .v2-quick,.ui-v2 .v2-menu-toggle{
  min-height:36px;border:1px solid var(--line);border-radius:50px;background:var(--card);
  color:var(--fg2);padding:0 13px;font:800 12px/1 var(--serif);cursor:pointer;white-space:nowrap
}
.ui-v2 .v2-quick:hover,.ui-v2 .v2-menu-toggle:hover{color:var(--red);border-color:var(--gold);background:var(--hl2)}
.ui-v2 .v2-menu-toggle{display:inline-flex;align-items:center;gap:7px;color:var(--fg)}
.ui-v2 .v2-menu-toggle>span:first-child{font-size:18px}
.ui-v2 .v2-audio-status{padding:5px 9px;border-radius:50px;background:var(--hl2);white-space:nowrap}
/* Zoom direkt in der Kopfzeile erreichbar (Nutzerwunsch: "auf der Hauptseite",
   nicht im Werkzeug-Drawer versteckt) — auf schmalen Bildschirmen fehlt dafür
   der Platz, dort bleibt der Drawer-Proxy (#v2ZoomOutProxy/-InProxy) der Weg. */
.ui-v2 .v2-zoom-ctl{min-height:36px;border-radius:50px;overflow:hidden}
.ui-v2 .v2-zoom-ctl button{height:36px;padding:0 10px}
.v2-learn-fab{display:none}
.v2-marks-fab{display:none}
.ui-v2 .grammar-legend,.ui-v2 .lens-bar{position:relative;z-index:1}

.v2-tools-backdrop{position:fixed;inset:0;z-index:60;background:rgba(18,13,8,.46);opacity:0;transition:opacity .2s}
.v2-tools-backdrop.open{opacity:1}
.v2-tools-panel{
  position:fixed;z-index:61;top:0;right:0;bottom:0;width:min(410px,92vw);
  height:auto;max-height:none;min-height:0;flex:none;align-self:auto;border-radius:0;
  overflow-y:auto;overscroll-behavior:contain;background:var(--bg2);color:var(--fg);
  border-left:1px solid var(--line);box-shadow:-18px 0 48px rgba(30,20,10,.22);
  padding:0 20px max(24px,env(safe-area-inset-bottom));transform:translateX(104%);
  transition:transform .24s ease;visibility:hidden
}
.v2-tools-panel.open{transform:translateX(0);visibility:visible}
.v2-tools-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  margin:0 -20px 8px;padding:18px 20px 14px;background:var(--v2-bar);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.v2-tools-head div{display:flex;flex-direction:column;line-height:1.25}
.v2-tools-head strong{font-size:20px}
.v2-tools-head span,.v2-tool-section h2 span{font-size:11px;color:var(--fg2);font-weight:600}
.v2-tools-head button{width:var(--v2-touch);height:var(--v2-touch);border:0;border-radius:50%;background:var(--card);color:var(--fg);font-size:26px;cursor:pointer}
.v2-tool-section{padding:16px 0;border-bottom:1px solid var(--line)}
.v2-tool-section h2{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:13px;letter-spacing:.035em;text-transform:uppercase}
.v2-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v2-tool-grid>button,.v2-tool-link{
  min-height:var(--v2-touch);display:flex;align-items:center;justify-content:flex-start;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);
  padding:8px 12px;font:700 13px/1.25 var(--serif);text-decoration:none;cursor:pointer;text-align:left
}
.v2-tool-grid>button:hover,.v2-tool-link:hover{background:var(--hl2);border-color:var(--gold);color:var(--red);text-decoration:none}
.v2-tool-grid>button.on{background:var(--red);border-color:var(--red);color:#fff}
.v2-tool-grid .zoom-ctl{min-height:var(--v2-touch);border-radius:12px;background:var(--card)}
.v2-tool-grid .zoom-ctl button{height:42px;flex:1}
.v2-segment-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.v2-segment-row label{font-size:11px;font-weight:800;color:var(--fg2)}
.v2-segment-row .zhvoice button{min-height:36px}
.v2-tools-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font-size:11px;color:var(--fg2)}
.v2-tools-foot a{font-weight:800}

.ui-v2 .wrap{max-width:1380px}
.ui-v2 main{padding-top:24px}
.ui-v2 .verse{padding:15px 0 17px}
.ui-v2 .tok{min-height:28px}

/* Die eingebettete Karte braucht mehr Raum als Wort-/Lexikondetails. V2
   verbreitert deshalb nur bei aktiver Karte die Detailspalte; alle anderen
   Detailansichten behalten die bewährten 380px. */
@media(min-width:881px){
  .ui-v2 #detail.v2-map-active{
    width:min(720px,58vw);flex-basis:min(720px,58vw)
  }
  .ui-v2 #detail.v2-map-active #mapView .map-main{
    height:70vh;min-height:430px
  }
  .ui-v2 #detail.v2-map-active #mapView .map-embed-toolbar select{
    flex:1;min-width:160px
  }
}

@media(max-width:880px){
  body.ui-v2{--v2-touch:46px}
  .ui-v2 .topBar{box-shadow:var(--v2-shadow)}
  .ui-v2 .v2-top{min-height:auto;padding:8px 10px calc(8px + env(safe-area-inset-top));display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"home nav search zoom menu";gap:5px}
  .ui-v2 .v2-home{grid-area:home;width:40px;height:38px;padding:0;display:grid;place-items:center}
  .ui-v2 .v2-home span{display:none}
  .ui-v2 .v2-chapter-nav{grid-area:nav;display:grid;grid-template-columns:30px minmax(0,1fr) minmax(52px,.38fr) 30px;gap:4px}
  .ui-v2 .v2-chapter-nav select{width:100%;max-width:none!important;min-width:0;height:38px;padding:4px 7px}
  .ui-v2 .v2-chapter-nav button{width:30px;height:38px}
  .ui-v2 .v2-quick{height:38px;padding:0;width:40px;display:grid;place-items:center;font-size:16px}
  .ui-v2 .v2-quick span{display:none}
  .ui-v2 #searchToggle{grid-area:search}
  .ui-v2 #learnModeToggle{display:none}
  .v2-learn-fab{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:25;
    min-width:78px;height:44px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:5px;
    border:1px solid var(--line);border-radius:50px;background:var(--card);color:var(--fg);font:800 12px/1 var(--serif);
    box-shadow:0 8px 24px rgba(40,20,5,.22);cursor:pointer}
  .v2-learn-fab.on{background:var(--red);border-color:var(--red);color:#fff}
  /* Recherche-Button: auf schmalen Bildschirmen ist im 5-Spalten-Grid der
     Kopfzeile kein Platz (Nutzerwunsch war trotzdem "immer in der oberen
     Leiste erreichbar, nicht nur ueber die Werkzeugleiste") — daher hier,
     wie beim Lernmodus, dieselbe Loesung: echter Button verschwindet aus dem
     Grid, ein fixiertes FAB auf der gegenueberliegenden Seite (links statt
     rechts, damit es nicht mit dem Lernmodus-FAB kollidiert) proxyt den Klick. */
  .ui-v2 #marksLink{display:none}
  .v2-marks-fab{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:25;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;
    border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--fg);
    box-shadow:0 8px 24px rgba(40,20,5,.22);cursor:pointer}
  .ui-v2 .theme-toggle{display:none}
  /* Bleibt bei jeder Breite in der Kopfzeile sichtbar (Nutzerfeedback: war
     unter 880px komplett ausgeblendet und "verschwand") — eigene, schmalere
     Grid-Spalte statt display:none. */
  .ui-v2 .v2-zoom-ctl{grid-area:zoom;height:38px;min-height:38px}
  .ui-v2 .v2-zoom-ctl button{height:38px;width:34px;padding:0;font-size:13px}
  .ui-v2 .v2-menu-toggle{grid-area:menu;width:40px;height:38px;padding:0;justify-content:center;border-radius:10px}
  .ui-v2 .v2-menu-label{display:none}
  .ui-v2 .v2-audio-status{position:absolute;left:10px;top:100%;margin-top:6px;font-size:10px;opacity:.86;pointer-events:none}
  .ui-v2 .top .sp{display:none}
  .ui-v2 .wrap{padding-top:var(--top-h,62px)}
  /* Bottom-Wert per --mobile-main-pad live nachgezogen (reader.js
     syncMobileMainPad()) -- diese spezifischere .ui-v2-Regel ueberschrieb
     sonst reader.css' main{padding-bottom:var(--mobile-main-pad,...)}
     komplett mit einem festen Wert, unabhaengig von der Sheet-Hoehe. */
  .ui-v2 main{padding:42px 14px var(--mobile-main-pad,92px)}
  .ui-v2 .row{gap:8px}
  .ui-v2 .row-tokens{gap:4px 5px}
  .ui-v2 .vplay{min-width:38px;min-height:34px;padding:4px 8px}
  .ui-v2 .tok{min-height:32px;padding:2px 3px}
  .ui-v2 aside#detail{padding-left:18px;padding-right:18px;padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .ui-v2 aside#detail.v2-map-active{height:82vh!important;max-height:82vh!important;min-height:60vh}
  .ui-v2 #detail.v2-map-active #mapView .map-main{height:62vh;min-height:400px}
  .ui-v2 #detail.v2-map-active #mapView .map-embed-toolbar select{flex:1;min-width:140px}
  .v2-tools-panel{width:100%;border-left:0;padding-left:16px;padding-right:16px}
  .v2-tools-head{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;padding-top:calc(12px + env(safe-area-inset-top))}
  .v2-tools-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .ui-v2 .hm-panel,.ui-v2 .search-panel{top:var(--top-h,62px);padding-left:16px;padding-right:16px}
  .ui-v2 .search-bar{position:sticky;top:0;background:var(--bg);padding:8px 0;margin-top:-8px;z-index:1}
}

@media(max-width:430px){
  .ui-v2 .v2-top{grid-template-columns:36px minmax(0,1fr) 36px 58px 36px;padding-left:6px;padding-right:6px;gap:3px}
  .ui-v2 .v2-home,.ui-v2 .v2-quick,.ui-v2 .v2-menu-toggle{width:36px}
  .ui-v2 .v2-zoom-ctl button{width:29px;font-size:12px}
  .ui-v2 .v2-chapter-nav{grid-template-columns:24px minmax(0,1fr) 46px 24px;gap:2px}
  .ui-v2 .v2-chapter-nav button{width:24px;padding:0}
  .ui-v2 .v2-chapter-nav select{font-size:11px;padding-left:4px;padding-right:2px}
  .v2-tool-grid{grid-template-columns:1fr}
  .v2-tools-foot{align-items:flex-start;flex-direction:column}
  .ui-v2 .v2-tools-panel #alignToggle{display:flex}
}

@media(prefers-reduced-motion:reduce){
  .v2-tools-panel,.v2-tools-backdrop,.ui-v2 aside{transition:none!important}
}

@media print{
  .v2-tools-panel,.v2-tools-backdrop,.ui-v2 .v2-menu-toggle{display:none!important}
}