/* ==========================================================================
   samisee.design, PHONE SHELL. body[data-shell="phone"] (js/shell.js:
   up to 700px wide, or a phone on its side):
     status bar   the menubar, reduced to the clock, language and sound
     lock screen  the intro: Vienna clock and date, the signature writing
                  itself with its tagline, three notifications, swipe up
     home         the specs widget on top, the app grid under it, the dock
     apps         full-screen sheets that slide up, "← back" to close
   Behaviour: js/phone.js. Nothing here touches the desktop.
   ========================================================================== */

body[data-shell="phone"] {
  --status-h: calc(32px + env(safe-area-inset-top));
  --dock-room: calc(84px + env(safe-area-inset-bottom));
  height: 100dvh;
}

/* ---- the boot overlay and its log belong to the desktop ---- */
body[data-shell="phone"] .boot { display: none; }

/* ---- status bar ---- */
body[data-shell="phone"] .menubar {
  height: var(--status-h); padding: env(safe-area-inset-top) 18px 0; gap: 0;
  opacity: 1; translate: none;                          /* there from the lock screen on */
}
body[data-shell="phone"] .menubar > .menubar__slot,
body[data-shell="phone"] .menubar > .menubar__item,
body[data-shell="phone"] .menubar__right > .menubar__slot { display: none; }
body[data-shell="phone"] .menubar__right { width: 100%; margin: 0; gap: 14px; font-size: var(--text-caption); }
/* sleep: phone only, the crescent with its little z puts it back on the lock screen */
.menubar__sleep { display: none; }
body[data-shell="phone"] .menubar__sleep { display: grid; place-items: center; padding: 4px 2px; }
body[data-shell="phone"]:not(.is-unlocked) .menubar__sleep { visibility: hidden; }
body[data-shell="phone"] [data-clock] { order: -1; margin-right: auto; font-weight: 500; letter-spacing: var(--track-label); }

/* ---- lock screen ---- */
.lock[hidden] { display: none; }
.lock {
  position: fixed; inset: 0; z-index: var(--z-phone);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--status-h) + 26px) 16px calc(20px + env(safe-area-inset-bottom));
  touch-action: none; user-select: none; -webkit-user-select: none;
  /* a soft floor, so the notifications and the pill read on any look */
  background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--shade) 34%, transparent));
}
.lock__time { display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: 0 2px 18px var(--halo); }
.lock__time b { font: var(--weight-display) 68px/.9 var(--font-display); letter-spacing: -.01em; color: var(--os-ink); }
.lock__time span { font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--os-ink); }
/* the signature plate is laid over this slot by js/phone.js, which sizes it to match */
.lock__sig { width: 100%; flex: none; margin: 26px 0 18px; }
.lock__notifs { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; }
.notif {
  display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; width: 100%;
  padding: 10px 12px; text-align: left; --lg-r: 18px;
  opacity: 0; translate: 0 10px; animation: notif-in .5s var(--ease-enter) forwards;
}
.notif:nth-child(1) { animation-delay: 1.4s; }
.notif:nth-child(2) { animation-delay: 1.6s; }
.notif:nth-child(3) { animation-delay: 1.8s; }
@keyframes notif-in { to { opacity: 1; translate: 0 0; } }
.notif__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--os-ink) 8%, transparent); }
.notif__icon svg { width: 22px; height: 22px; --ico-sw: 2.2; }
.notif__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.notif__head { display: flex; justify-content: space-between; gap: 8px; font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink-dim); }
.notif__head b { font-weight: 500; color: var(--os-ink); }
.notif__text { font: 400 13px/1.35 var(--font-body); color: var(--os-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lock__unlock {
  margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 18px;
  font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--os-ink);
  text-shadow: 0 1px 10px var(--halo);
}
.lock__chev { width: 14px; height: 14px; border: solid var(--os-ink); border-width: 2px 0 0 2px; rotate: 45deg; animation: chev 1.6s ease-in-out infinite; }
@keyframes chev { 50% { translate: 0 -5px; } }
/* while a finger drags it, it follows; on release it glides up (or back) */
.lock.is-gliding { transition: transform .38s cubic-bezier(.3, .7, .2, 1), opacity .38s; }
.lock.is-gone { opacity: 0; pointer-events: none; }

/* a phone on its side: clock and signature on the left, notifications on the right */
@media (max-height: 500px) {
  .lock { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 24px; align-items: start;
    padding: calc(var(--status-h) + 8px) calc(20px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
  .lock__time { grid-column: 1; grid-row: 1; }
  .lock__time b { font-size: 44px; }
  .lock__sig { grid-column: 1; grid-row: 2; margin: 14px 0 0; }
  .lock__notifs { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .notif { padding: 8px 10px; }
  .lock__unlock { grid-column: 1 / -1; grid-row: 4; margin: 0; padding: 6px; justify-self: center; }
  body[data-shell="phone"] .wp-plate { width: min(40vw, 300px); }
}

/* the signature: the hero of the lock screen; unlocked, it glides down to rest in the home
   screen's open space, lower right, like the desktop's right third (js/phone.js glideHome) */
body[data-shell="phone"] .wp-plate { left: 50%; width: min(78vw, 360px); z-index: calc(var(--z-phone) + 1); }
body[data-shell="phone"].is-unlocked .wp-plate {
  left: 52%; top: calc(100dvh - var(--dock-room) - 196px); width: min(60vw, 300px); z-index: var(--z-decor);
}

/* ---- home: the widget, then the grid ---- */
body[data-shell="phone"] .home {
  position: fixed; inset: var(--status-h) 0 var(--dock-room) 0; z-index: var(--z-icons);
  display: flex; flex-direction: column; gap: 22px; padding: 12px 16px 16px; overflow-y: auto; overscroll-behavior: contain;
}
body[data-shell="phone"] .specs { position: static; order: -1; width: auto; flex: none; }
body[data-shell="phone"] .scope { height: 78px; }
body[data-shell="phone"] .icons {
  position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 6px; align-content: start;
}
body[data-shell="phone"] .icon { width: auto; gap: 7px; }
body[data-shell="phone"] .icons .icon--phone { display: flex; }
body[data-shell="phone"] .icon__tile { width: 58px; height: 58px; }
body[data-shell="phone"] .icon svg { width: 28px; height: 28px; }
body[data-shell="phone"] .icon__label { max-width: 100%; padding: 1px 4px; font-size: var(--text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- dock: the four that matter most; testimonials and terminal live in the grid ---- */
body[data-shell="phone"] .dock { bottom: calc(10px + env(safe-area-inset-bottom)); }
body[data-shell="phone"] .dock__item:is([data-app="testimonials"], [data-app="terminal"]) { display: none; }

/* ---- apps: full-screen sheets ---- */
body[data-shell="phone"] .win {
  inset: var(--status-h) 0 0 0 !important; width: auto !important; height: auto !important;
  max-width: none; max-height: none; --lg-r: 22px; border-radius: 22px 22px 0 0;
  padding-bottom: env(safe-area-inset-bottom);       /* z-index: windows.js, over the dock, under the status bar */
}
body[data-shell="phone"] .win[data-open] { animation: sheet-up .32s var(--ease-enter); }
body[data-shell="phone"] .win[data-closing] { animation: sheet-down .2s var(--ease-standard) forwards; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-down { to { transform: translateY(60px); opacity: 0; } }
body[data-shell="phone"] .win:not([data-focus]) { filter: none; }
body[data-shell="phone"] .win__bar { cursor: default; height: 50px; }
body[data-shell="phone"] .lights, body[data-shell="phone"] .win__grip { display: none; }
.win__back { display: none; }
body[data-shell="phone"] .win__back {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px 7px 10px; border-radius: 999px;
  font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink);
  background: color-mix(in srgb, var(--os-ink) 9%, transparent);
}
body[data-shell="phone"] .win__title { max-width: calc(100% - 200px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the folio: tabs beside back, scrolling sideways */
body[data-shell="phone"] #w-folio .tabs { min-width: 0; flex: 1; }
body[data-shell="phone"] .folio__count { display: none; }

/* ---- what's inside, at 375 ---- */
body[data-shell="phone"] .md { padding: 22px 20px 32px; font-size: 14px; }
body[data-shell="phone"] .md .mk { display: none; }
body[data-shell="phone"] .md blockquote { padding-left: 14px; }
body[data-shell="phone"] .steps { grid-template-columns: 1fr; }
/* the skill tree: three trunks stacked, each with a plain spine; the root's wires are for the wide layout */
body[data-shell="phone"] .tree__wires, body[data-shell="phone"] .tree__root { display: none; }
body[data-shell="phone"] .tree__trunks { grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
body[data-shell="phone"] .trunk { border-left: 1px solid color-mix(in srgb, var(--c) 45%, transparent); padding-left: 14px; }
body[data-shell="phone"] .trunk .tree__node { display: none; }
body[data-shell="phone"] .branch { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin-bottom: 12px; }
body[data-shell="phone"] .leaves { display: flex; flex-wrap: wrap; gap: 2px 10px; }
body[data-shell="phone"] .tree__extras { grid-template-columns: 1fr; gap: 3px; }
body[data-shell="phone"] .tree__extras dd { margin-bottom: 8px; }

body[data-shell="phone"] .grid { padding: 16px; grid-template-columns: 1fr; }
body[data-shell="phone"] .folio__intro { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 16px 0; }
body[data-shell="phone"] .case__top { padding: 16px 18px; }
body[data-shell="phone"] .case__title h3 { font-size: 26px; }
body[data-shell="phone"] .case__view { padding-left: 18px; padding-right: 18px; }
body[data-shell="phone"] .case__stats,
body[data-shell="phone"] .case__scope,
body[data-shell="phone"] .sys--two { grid-template-columns: 1fr; }
body[data-shell="phone"] .case__credits { flex-direction: column; gap: 10px; }
/* palette: every swatch one size (a quarter row), groups flowing on as they fit, so nothing stretches */
body[data-shell="phone"] .pal { flex-wrap: wrap; gap: 14px 10px; }
body[data-shell="phone"] .pal__group { flex: none !important; }
body[data-shell="phone"] .pal__sw { flex: none; width: 54px; height: 46px; }
body[data-shell="phone"] .evo { grid-template-columns: repeat(3, 1fr); }
body[data-shell="phone"] .evo__grid { grid-template-columns: repeat(4, 1fr); }
body[data-shell="phone"] .photo__hero img { height: 200px; }
body[data-shell="phone"] .vid--playing { min-width: 0; width: 100%; }

body[data-shell="phone"] .quote { padding: 26px 22px; }
body[data-shell="phone"] .quote__mark { font-size: 96px; }

/* lightbox: the piece full width, the controls along the bottom */
body[data-shell="phone"] .lb__stage { inset: calc(var(--status-h) + 8px) 8px calc(84px + env(safe-area-inset-bottom)); }
body[data-shell="phone"] .lb__stage :is(img, video) { max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--status-h) - 100px - env(safe-area-inset-bottom)); }
body[data-shell="phone"] .lb__btn { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); translate: none; }
body[data-shell="phone"] .lb__prev { left: 24px; }
body[data-shell="phone"] .lb__next { right: 24px; left: auto; }
body[data-shell="phone"] .lb__close { left: 50%; right: auto; translate: -50% 0; }
body[data-shell="phone"] .lb__count { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* toasts wrap instead of running off the screen */
body[data-shell="phone"] .toast { top: calc(var(--status-h) + 6px); max-width: calc(100vw - 32px); white-space: normal; text-align: center; line-height: 1.35; }

/* ---- terminal: quick commands above the keyboard; 16px input so iOS doesn't zoom ---- */
.term__chips { display: none; }
body[data-shell="phone"] .term__chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; flex: none; }
body[data-shell="phone"] .term__chips::-webkit-scrollbar { display: none; }
.term__chips button { flex: none; padding: 7px 11px; border-radius: 999px; font: 500 var(--text-caption)/1 var(--font-mono); color: var(--os-ink); background: color-mix(in srgb, var(--os-ink) 9%, transparent); box-shadow: inset 0 0 0 1px var(--os-border); }
body[data-shell="phone"] .term__in { font-size: 16px; }
/* snake: the game pops up over the terminal, which blurs behind it; the pad sits under the board */
.snake-pop[hidden] { display: none; }
.snake-pop {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: var(--status-h) 16px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--shade) 30%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: pop-in .25s var(--ease-enter);
}
@keyframes pop-in { from { opacity: 0; } }
.snake-pop__board { width: 100%; animation: board-in .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes board-in { from { scale: .9; } }
.snake-pop .snake { width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 0; border-radius: 14px; box-shadow: 0 18px 40px color-mix(in srgb, var(--shade) 45%, transparent), inset 0 0 0 1px var(--os-border); }
.pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px); gap: 8px; padding: 12px; --lg-r: 26px; }
.pad button { border-radius: 14px; font: 600 20px/1 var(--font-mono); color: var(--os-ink); background: color-mix(in srgb, var(--os-ink) 10%, transparent); box-shadow: inset 0 0 0 1px var(--os-border); touch-action: none; }
.pad button:active { background: color-mix(in srgb, var(--os-accent) 30%, transparent); }
.pad [data-key="ArrowUp"] { grid-column: 2; }
.pad [data-key="ArrowLeft"] { grid-column: 1; grid-row: 2; }
.pad [data-key="ArrowDown"] { grid-column: 2; grid-row: 2; }
.pad [data-key="ArrowRight"] { grid-column: 3; grid-row: 2; }

/* ---- the oscilloscope plays under a finger ---- */
body[data-shell="phone"] .scope { touch-action: none; }

@media (prefers-reduced-motion: reduce) {
  .notif { animation: none; opacity: 1; translate: none; }
  .lock__chev { animation: none; }
  body[data-shell="phone"] .win[data-open], body[data-shell="phone"] .win[data-closing] { animation: none; }
}