@import url('https://code.pulgasari.dev/aufbau/css/aufbau.css');

html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }

#app {
  display   : flex;
  flex-flow : column;
  height    : 100dvh;
  overflow  : hidden;
}

/* ── tokens ─────────────────────────────────────────────────────── */

body {
  --hover   :  --alpha(fg, 90%);
  --line    :  --alpha(fg, 85%);
  --panel   : --darker(bg, 10%);
  --panel-2 : --darker(bg, 20%);
  --zebra   : --darker(bg, 10%);
  /* --radius  : 0.5rem; */
}

/* ── mobile / android  ─────────────────────────────────────────────────────── */

/*
safe-area insets. non-zero where the page runs edge-to-edge:
the capacitor wrappers (android 15+ enforces it, viewport-fit=cover opts in) and notched screens.      
body's background covers the canvas behind the system bars, #app keeps clear
*/

body {
  --safe-top    : env(safe-area-inset-top,    0px);
  --safe-right  : env(safe-area-inset-right,  0px);
  --safe-bottom : env(safe-area-inset-bottom, 0px);
  --safe-left   : env(safe-area-inset-left,   0px);
}

:root #app {
  background-clip : content-box;
  padding         : var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}


/* CUSTOM PROPS */


/* TYPO */

/*
:root {
  --font      : "Manrope";
  --font-code : "JetBrains Mono", monospace;
  --font-size : 12px;
}
*          { font-family : var(--font); }
html, body { font-size   : var(--font-size); }
*/

/* move to: aufbau/css/mobile.css */

/* ::selection { background: var(--accent-25); } */

/* ── oled fix (temp) ─────────────────────────────────────────────────────── */

/* move to: zugriff/apps/podcasts/app.css
or move to: aufbau/css/surfaces.css */

@container style(--palette: oled) {
  body {
    --line: color-mix(in oklch, var(--color-fg) 15%, transparent);
  }
  #app {
    .view > header { border-bottom : 1px solid var(--line); }
    #app-dock      { border-top    : 1px solid var(--line); }
    data-item      { border-bottom : 1px solid var(--line); }
  }
}