/* ── pda.css — the phone shell ────────────────────────────────────────────────
 *
 * A Palm-era handheld: graphite body, a screen sunk into it, and a row of
 * hardware keys along the bottom. The restraint is the point — 22px of status
 * strip and 54px of keys, and the app owns everything in between. A drawn
 * device bezel would read as a toy and cost a fifth of a phone screen.
 *
 * The status strip is deliberately dark and monospaced so it reads as part of
 * the DEVICE rather than as a second app toolbar sitting on the app's own
 * header — the same double-chrome mistake the feed made inside a window.
 */

:root {
  --pda-body:   #2b2f36;
  --pda-bodyLt: #454b54;
  --pda-bodyDk: #171a1f;
  --pda-key:    #cfd5dc;
  --pda-keyLt:  #ffffff;
  --pda-keyDk:  #7b838d;
  --pda-ink:    #10141a;
  --pda-lcd:    #0d1117;
  --pda-accent: #63d8c4;   /* the backlight green every one of these had */
  --pda-status: 22px;
  --pda-keys:   54px;
}

.pda-root {
  position: fixed; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column;
  background: var(--pda-body);
  overflow: hidden;
}
.pda-root [hidden] { display: none; }

/* ── Status strip ────────────────────────────────────────────────────────── */
.pda-status {
  flex: 0 0 auto;
  height: calc(var(--pda-status) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(var(--pda-bodyDk), #101318);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  font: 600 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .06em;
  color: var(--pda-accent);
  text-transform: uppercase;
  user-select: none;
}
.pda-spacer { flex: 1 1 auto; }
.pda-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pda-clock { color: #cfe8e2; font-variant-numeric: tabular-nums; }
.pda-batt {
  width: 17px; height: 9px;
  border: 1px solid rgba(160, 220, 210, .75);
  border-radius: 2px;
  padding: 1px;
  position: relative;
}
.pda-batt::after {                      /* the terminal nub */
  content: ''; position: absolute; right: -3px; top: 2px;
  width: 2px; height: 3px; background: rgba(160, 220, 210, .75);
  border-radius: 0 1px 1px 0;
}
.pda-batt i { display: block; height: 100%; width: 72%; background: var(--pda-accent); border-radius: 1px; }

/* ── Screen ──────────────────────────────────────────────────────────────── */
.pda-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--pda-lcd);
  /* Sunk into the body: dark inner edge at the top-left, a faint lit edge at
     the bottom-right, the way a recessed panel actually catches light. */
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.pda-pane {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
  /* The containing block: this is what re-anchors the editor's position:fixed
     layout to the pane instead of the viewport. Identical in purpose to
     .sh-body in shell.css — see the note there. */
  transform: translateZ(0);
}
.pda-pane.on { display: block; }

/* ── Launcher ────────────────────────────────────────────────────────────── */
.pda-home {
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(99, 216, 196, .10), transparent 60%),
    linear-gradient(#101720, #0a0e14);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  padding: 18px 14px 8px;
}
.pda-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  color: #dfe9f0;
  font: 600 11px/1.25 "Tahoma", "Verdana", system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pda-app:active { background: rgba(99, 216, 196, .16); border-color: rgba(99, 216, 196, .45); }
.pda-app-art {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  overflow: hidden;
}
/* The launcher tile, same material as the desktop's — see css/shell.css. */
.pda-app-svg {
  display: grid; place-items: center;
  border-radius: 14px;
  color: #eef3ff;
  background: linear-gradient(155deg, rgba(255, 255, 255, .26), rgba(150, 175, 255, .10));
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 3px 10px rgba(0, 0, 0, .38);
}
.pda-app-art svg { width: 58%; height: 58%; display: block; }
.pda-app:active .pda-app-svg { transform: scale(.95); }
.pda-app-glyph {
  font-size: 24px; line-height: 1;
  color: #0b1016;
  background: linear-gradient(#eaf4f6, #9fc4c9 55%, #6f9aa2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -4px 8px rgba(20,50,60,.4), 0 2px 5px rgba(0,0,0,.5);
}
.pda-app-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pda-tip {
  margin: 4px 16px 20px;
  font: 400 10.5px/1.5 system-ui, sans-serif;
  color: rgba(200, 220, 230, .42);
  text-align: center;
}

/* The four the home screen took over. Hidden here rather than deleted, so the
   desktop header is untouched and the handlers stay in one place. */
body.pda-on #explore-btn,
body.pda-on #feedback-btn,
body.pda-on #kofi-open-btn,
body.pda-on #insta-btn { display: none; }

.pda-sys {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 0 14px 22px;
}
.pda-sys-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: rgba(214, 232, 240, .82);
  font: 600 11px/1 "Tahoma", "Verdana", system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pda-sys-item:active { background: rgba(99, 216, 196, .16); border-color: rgba(99, 216, 196, .4); }

/* ── Hardware keys ───────────────────────────────────────────────────────── */
.pda-keys {
  flex: 0 0 auto;
  height: calc(var(--pda-keys) + env(safe-area-inset-bottom, 0px));
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(var(--pda-bodyLt), var(--pda-body) 40%, var(--pda-bodyDk));
  border-top: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.pda-key {
  /* Shrinkable. With six apps the row needs 394px on a 375px phone, and under
     `justify-content: center` an over-wide row overflows BOTH edges equally —
     clipping the first and last key while scrollWidth reports no overflow at
     all, because it cannot see the left-hand side. Letting the keys give way is
     the fix.

     Measured after: 53x34 at 375px, 43x34 at 320px, clipped at neither. Note
     that 34px tall is UNDER the 44px touch-target guideline — it was already,
     before six keys made them narrower, so this is a pre-existing shortfall
     rather than one the shrinking introduced. Worth raising the row if it ever
     proves fiddly in the hand. */
  flex: 1 1 auto;
  width: 54px; max-width: 54px; min-width: 0;
  height: 34px;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  color: var(--pda-ink);
  background: linear-gradient(var(--pda-keyLt), var(--pda-key) 46%, var(--pda-keyDk));
  border: 1px solid #5d646d;
  border-radius: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 6px rgba(40, 50, 62, .40),
    0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Pressed reads as travel, not colour: the highlight moves to the bottom and
   the whole key sinks a pixel. */
.pda-key:active {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .55), inset 0 3px 7px rgba(30, 40, 50, .55);
  transform: translateY(1px);
}
.pda-key-svg { width: 20px; height: 20px; display: block; }
.pda-key-svg svg { width: 100%; height: 100%; display: block; }
.pda-key.on {
  background: linear-gradient(#d8f4ee, #9adbcd 46%, #57a294);
  border-color: #3f7f73;
}

/* ── Live view ───────────────────────────────────────────────────────────── */
/* The digicam chassis is its own device. When the camera is running it should
   be the thing you are holding, so the PDA's own body recedes rather than
   framing a second device inside the first. */
body.live-view .pda-status { opacity: .45; }
body.live-view .pda-stage { box-shadow: none; }
body.live-view .pda-keys {
  background: linear-gradient(#3a3e45, #1c1f24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* The desktop shell owns anything wide; this is only ever the phone. */
@media (min-width: 900px) and (pointer: fine) {
  .pda-root { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pda-key:active { transform: none; }
}

.sh-frame { display: block; width: 100%; height: 100%; border: 0; background: #1a1a2e; }

/* System-row icons match the launcher's: drawn, not emoji, so the whole device
   speaks one visual language. */
.pda-sys-ico { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
.pda-sys-ico svg { width: 100%; height: 100%; display: block; }

/* ── Hosted desktop apps on a phone ───────────────────────────────────────────
   PEN and the DAW have no mobile layout, and measuring says they cannot be
   given one cheaply: PEN's own CSS forces a 757px viewport and overflows below
   it, and the DAW does not overflow at 375 but COLLAPSES — its track lane
   squeezed to ~100px with labels wrapping one word per line.

   Shrinking either to fit would put their 12px text somewhere near 6px, which
   is not a smaller version of the app so much as an unusable one. So they get
   the width they were built for and the pane pans, which is what a phone
   browser does with any desktop site. Full-size text, reachable by dragging.

   `--frame-min` is set per app from its measured requirement (js/shell.js). */
.pda-pane > .sh-frame {
  width: max(100%, var(--frame-min, 100%));
  height: 100%;
  border: 0;
}
body.pda-on .pda-pane.pda-pane-frame {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* panning the app must not drag the page */
}

/* Said once, then never again — a permanent banner over someone's DAW is worse
   than the problem it describes. */
.pda-frame-hint {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  z-index: 5;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(12, 20, 32, .92);
  border: 1px solid rgba(99, 216, 196, .4);
  color: #cfe8e2;
  font: 500 11px/1.45 system-ui, sans-serif;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.pda-frame-hint button {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(99, 216, 196, .5);
  background: rgba(99, 216, 196, .16);
  color: #bff0e4;
  font: 600 11px/1 system-ui, sans-serif;
  cursor: pointer;
}

/* The same correction the taskbar needs — see the note in css/shell.css. Here
   the obstruction is the hardware key row, which is taller than the taskbar. */
body.pda-on .lr-toast {
  z-index: 2147483003;
  bottom: calc(var(--pda-keys, 54px) + env(safe-area-inset-bottom, 0px) + 14px);
}