/* ============================================================
   Rayvn — Layout: Fenstergerüst und Panel-Raster
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--ui-font);
  background:var(--shell);
  color:var(--text);
  font-size:13px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Das Attribut hidden muss jede eigene display-Regel schlagen.
   Ohne diese Zeile gewinnt zum Beispiel `.empty{display:grid}` gegen die
   Browser-Vorgabe `[hidden]{display:none}` — Autoren-Regeln haben immer
   Vorrang vor Vorgaben des Browsers. Ergebnis: das Element bekommt brav
   hidden gesetzt und bleibt trotzdem sichtbar. Genau das ist passiert. */
[hidden]{display:none !important}
input,textarea{font:inherit}
svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
::selection{background:var(--sel)}

.app{
  height:100%;
  display:grid;
  grid-template-rows:var(--chrome) 1fr 24px;
  padding:var(--gap);
  gap:var(--gap);
}

.body{
  display:grid;
  grid-template-columns:44px 240px 1fr 0;
  gap:var(--gap);
  min-height:0;
}
[data-right="an"] .body{grid-template-columns:44px 240px 1fr minmax(280px,38%)}
[data-sidebar="aus"] .body{grid-template-columns:44px 0 1fr 0}
[data-sidebar="aus"][data-right="an"] .body{grid-template-columns:44px 0 1fr minmax(280px,38%)}
[data-sidebar="aus"] .sidebar{display:none}
[data-right="aus"] .previewpane{display:none}
[data-focus="an"] .body{grid-template-columns:0 0 1fr 0}
[data-focus="an"] .activitybar,
[data-focus="an"] .sidebar,
[data-focus="an"] .previewpane,
[data-focus="an"] .dock{display:none}
[data-dock="aus"] .dock{display:none}

.pane{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  min-height:0;min-width:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}

.pane-head{
  display:flex;align-items:center;gap:6px;
  height:30px;padding:0 6px 0 12px;flex:none;
  border-bottom:1px solid var(--line-soft);
}
.pane-head h2{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.pane-head .tools{margin-left:auto;display:flex;gap:1px}
.pane-head .iconbtn{width:22px;height:22px}
.pane-head .iconbtn svg{width:13px;height:13px}
.pane-body{overflow:auto;flex:1;min-height:0}

.editorpane{background:var(--editor)}
.editor-shell{flex:1;min-height:0;position:relative;display:flex}
.previewpane iframe{flex:1;border:0;background:#fff;min-height:0}

@media (max-width:1080px){
  [data-right="an"] .body{grid-template-columns:44px 0 1fr minmax(240px,46%)}
  [data-right="an"] .sidebar{display:none}
}
@media (max-width:760px){
  .body{grid-template-columns:44px 0 1fr 0 !important}
  .sidebar,.previewpane{display:none}
  .menu,.omni{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}