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


/* ── TO STYLE: what every app shares ─────────────────────────────────────────
   (n) = how many apps use it

   frame
   - #app, app-root
   - app-area, by name: main | menu (dock=start, a drawer where narrow) |
     config (dock=end) | context (dock=bottom, a sheet). open, :state(overlay)
   - app-view, its glide transition
   - app-view > header: ViewHeader (.ViewBack, h1, .ViewTools) or the app's own (12)
   - app-view > main
   - app-panel (5), app-config (Config, 13), app-float (1)

   navigation
   - Dock: #app-dock > btn-tap.col, .active, aria-current (6)
   - the menu area's content: .sidebar / .menu, .nav-item, .brand (feeds, audio,
     todo, notes, prompts, files), each its own markup for now
   - nav-crumbs (2), nav-toc (notes)

   controls
   - btn-icon (11), btn-push (8), btn-tap
   - native button / input / select / textarea: no font inherited (arial)
   - input-value + input-option, the combobox and segments looks (Picker, Config)
   - input-text, input-search, SearchPanel .search-panel (5)
   - input-number (Slider), input-file look=dropzone (Dropzone), input-bool,
     input-date / -time / -datetime, input-chips, input-url, input-password
   - .chip, .chip.active (4)

   content
   - data-index + data-item, aufbau-index + aufbau-item: list and grid
   - data-tree (Tree, FolderTree with .reconnect)
   - output-md (Reader), write-md
   - aufbau-progress, media-file
   - svg-icon, its sizes in buttons, headers, lists

   feedback
   - pop-toast (toast(), every app)
   - pop-modal / Modal .modal-backdrop, pop-prompt (prompt, confirm)
   - .empty (Empty, 9), Loading, .booting (6, each its own spinner)
   - .install-tip (InstallTip, 6), Brand
*/

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

/* #app is the <app-root>. with areas it is their grid (app-root's own css),
   an app without areas gets a column */
#app {
  height   : 100dvh;
  overflow : hidden;

  &:not(:has(> app-area)) { display: flex; flex-flow: column; }
}

app-view {
  display: flex;
  flex-direction: column;
}
app-view > header {
  --bg  : --darker(bg, 0.2);
  --gap : small;
  --pad : normal;
  display: flex; justify-content: space-between;
  position: sticky; top: 0;
  text-transform: uppercase;

  button { text-transform: uppercase; }
  > h1   { flex: 1 1 auto; }   /* next to the back button, the tools at the end */
}
app-view > main {
  justify-content: safe center;
  display: flex;
  flex: 1;
}
app-view .empty {
  align-items: center;
  align-self: center;
  display: flex;
  flex-flow: column;
  --gap: normal;
}

app-view .empty   { text-align: center; }
app-view .empty * { text-align: center; }

/* ── the dock, the Dock component: a row of btn-tap, icon over label ─────── */

#app-dock, .dock, .Dock {
  --bg       : --darker(bg, 0.1);
  border-top : 1px solid var(--line);
  display    : flex;
  flex       : none;
  text-transform: uppercase;

  > btn-tap {
    --bg           : --darker(bg, 0.2);
    flex           : 1 1 0;
    flex-direction : column;
    font-size      : 1rem;
    gap            : --space(small);
    padding        : --space(small);
    opacity        : 0.5;

    &:hover       { opacity: 1; }
    &.active      { opacity: 1; color: --color(ink); }
    &::part(icon) { font-size: 2rem; }
  }
}

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

body {
  --hover   :  --alpha(fg, 90%);
  --line    :  --alpha(fg, 50%);
  --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: --alpha(fg, 0.25);
  }
  #app {
    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); }
  }
}