/* ==========================================================================
   phone.css — his phone.

   The same machine, held in one hand: NeXT's gray and its bevels, the black
   title bar of the window in front, amber for anything live, and the dusk
   and the wires behind the icons. Touch targets are 44px or more, body
   text is 15px, and nothing on the desktop is visible while this is.
   ========================================================================== */

body.phone { overflow: hidden; background: #050506; overscroll-behavior: none; }
body.phone #desktop > :not(#phone) { display: none !important; }
body.phone #boot, body.phone #marks, body.phone #tear { display: none !important; }
/* the room is still here, lighter: this is a small screen held close */
body.phone #tint { opacity: .45; }
body.phone #vignette { opacity: .55; }
body.phone #dirt { opacity: .14; }

#phone {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: #0a0b0d; color: #111;
  font-family: var(--ui);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
#phone button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------ status bar */
.ph-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(26px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: #000; color: var(--bone);
  font: 600 12px var(--mono); letter-spacing: .06em;
  position: relative; z-index: 40;
}
.ph-left, .ph-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; }
.ph-right { justify-content: flex-end; }
.ph-time { flex: 0 0 auto; }
.ph-carrier { color: var(--amber); }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.ph-sig i { width: 3px; background: #3a3f46; }
.ph-sig i:nth-child(1) { height: 3px; }
.ph-sig i:nth-child(2) { height: 5px; }
.ph-sig i:nth-child(3) { height: 7px; }
.ph-sig i:nth-child(4) { height: 10px; }
.ph-sig i.on { background: var(--bone); }
.ph-obs {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 6px 2px; margin: -6px 0;
  color: var(--bone); font: inherit; letter-spacing: inherit;
}
.ph-obs i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e0342a; box-shadow: 0 0 6px #e0342a;
  animation: ph-rec 2.4s steps(2) infinite;
}
@keyframes ph-rec { 50% { opacity: .35; } }
.ph-batt { display: inline-flex; align-items: center; gap: 4px; }
.ph-cell {
  position: relative; width: 20px; height: 9px;
  border: 1px solid var(--bone); padding: 1px;
}
.ph-cell::after {
  content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px;
  background: var(--bone);
}
.ph-cell i { display: block; height: 100%; background: var(--bone); }
.ph-batt.low { color: #ff6a4a; }
.ph-batt.low .ph-cell { border-color: #ff6a4a; }
.ph-batt.low .ph-cell i { background: #ff6a4a; }
body.phone[data-drift="3"] .ph-carrier { animation: ph-rec .9s steps(2) infinite; }

/* ------------------------------------------------------------- the stage */
.ph-stage { flex: 1 1 auto; position: relative; overflow: hidden; }
.ph-stage > section { position: absolute; inset: 0; }
.ph-stage > section[hidden] { display: none; }

.ph-wall {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, #16181c 0%, #2b2320 34%, #7a4726 60%,
                              #c9793a 78%, #eba857 92%, #f3c47a 100%);
}
.ph-wall.lock::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 45%, rgba(0,0,0,.45));
}
.ph-poles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------- lock */
.ph-lock {
  z-index: 30; display: flex; flex-direction: column;
  color: var(--bone); outline: none;
  transition: transform .26s ease-in, opacity .26s ease-in;
  touch-action: none;
}
.ph-lock.gone { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.ph-lock-saver { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.ph-lock.away .ph-lock-saver { display: block; }
.ph-lock.away .ph-wall { display: none; }
.ph-lock-top { position: relative; text-align: center; padding: 38px 16px 0; }
.ph-lock-time {
  font: 200 72px/1 var(--mono); letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.ph-lock-date { margin-top: 8px; font: 500 15px var(--ui); }
.ph-lock-owner { margin-top: 6px; font: 11px var(--mono); letter-spacing: .08em; opacity: .7; }
.ph-notes {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 12px 12px; touch-action: pan-y;
}
.ph-note {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  text-align: left; padding: 9px 11px;
  background: rgba(176,172,164,.9); color: #111;
  border-top: 1px solid rgba(255,255,255,.9); border-left: 1px solid rgba(255,255,255,.9);
  border-right: 1px solid #444; border-bottom: 1px solid #444;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ph-note-ico {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  background: var(--gray); border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #555; border-bottom: 1px solid #555;
}
.ph-note-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ph-note b { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #333; }
.ph-note-t { font: 600 14px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-note-b { font: 13px var(--ui); color: #222; display: -webkit-box; -webkit-line-clamp: 2;
             -webkit-box-orient: vertical; overflow: hidden; }
.ph-lock.away .ph-note { background: rgba(10,11,13,.72); color: var(--bone); border-color: #555 #222 #222 #555; }
.ph-lock.away .ph-note b { color: var(--amber); }
.ph-lock.away .ph-note-b { color: #b9b4a8; }
.ph-lock-foot { position: relative; text-align: center; padding: 10px 16px 14px; }
.ph-lock-hint { font: 12px var(--mono); letter-spacing: .08em; animation: ph-rec 3.2s steps(2) infinite; }
.ph-found { margin-top: 6px; font: 10.5px var(--mono); opacity: .55; }

/* ------------------------------------------------------------- home */
.ph-home { display: flex; flex-direction: column; }
.ph-grid {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px 6px; align-content: start; padding: 26px 12px 12px;
}
.ph-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; color: var(--bone);
  font: 500 11.5px var(--ui); text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.ph-ico {
  width: 58px; height: 58px; display: grid; place-items: center;
  background: var(--gray);
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #555; border-bottom: 1px solid #555;
  box-shadow: 0 1px 0 #000, 0 6px 14px rgba(0,0,0,.35);
}
.ph-tile:active .ph-ico { border-color: #555 #fff #fff #555; background: var(--gray-dk); }
.ph-lbl { max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-home-note {
  position: relative; margin: 0; padding: 0 0 8px; text-align: center;
  font: 10.5px var(--mono); letter-spacing: .08em; color: rgba(20,14,10,.75);
}
.ph-dock {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 10px 8px 8px; gap: 6px;
  background: rgba(176,172,164,.42); border-top: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ph-dock .ph-tile { color: #111; text-shadow: none; }

/* ------------------------------------------------------------- an app */
.ph-app { z-index: 10; display: flex; flex-direction: column; background: var(--gray); }
.ph-appbar {
  flex: 0 0 44px; display: flex; align-items: center;
  background: #000; color: #fff; border-bottom: 1px solid #555;
}
.ph-back { flex: 0 0 44px; height: 44px; background: none; border: 0; display: grid; place-items: center; }
.ph-title {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  font: 600 14px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-act { flex: 0 0 44px; display: flex; justify-content: flex-end; }
.ph-actbtn { background: none; border: 0; color: var(--amber); font: 13px var(--ui); padding: 12px 8px; }
.ph-view { flex: 1 1 auto; position: relative; overflow: hidden; }
.ph-page {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--gray); padding-bottom: 24px;
  animation: ph-in .18s ease-out;
}
.ph-page[hidden] { display: none; }
@keyframes ph-in { from { transform: translateX(22px); opacity: .5; } }
.ph-page.ph-hosted { overflow: hidden; padding-bottom: 0; display: flex; flex-direction: column; }
.ph-hosted .field, .ph-hosted input, .ph-hosted textarea { font-size: 16px; }

/* lists */
.ph-list { background: #c4c4c4; border-top: 1px solid #8e8e8e; }
.ph-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 8px 10px 8px 12px; text-align: left; color: #111;
  background: #c4c4c4; border: 0;
  border-top: 1px solid #e2e2e2; border-bottom: 1px solid #8e8e8e;
}
.ph-row:active { background: #9c9c9c; }
.ph-row-ico { flex: 0 0 auto; display: grid; place-items: center; }
.ph-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-row-t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row-s { font-size: 12.5px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row-r { flex: 0 0 auto; font: 11px var(--mono); color: #333; }
.ph-chev { flex: 0 0 auto; font-size: 22px; line-height: 1; color: #555; }
.ph-row.dot .ph-row-t::before { content: "\25CF"; color: var(--amber-dim); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.ph-msg .ph-row-t { font-weight: 600; }
.ph-sec {
  padding: 16px 12px 6px; font: 600 10.5px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: #262626;
}
.ph-foot, .ph-path, .ph-empty { margin: 0; padding: 12px; font: 11px var(--mono); color: #333; }
.ph-path { padding: 8px 12px; background: #b6b6b6; border-bottom: 1px solid #8e8e8e; }
.ph-empty { padding: 30px 12px; text-align: center; }

/* reading */
.ph-prose {
  background: var(--bone); color: #111; padding: 16px 16px 12px;
  font-size: 15px; line-height: 1.52; border-bottom: 1px solid #8e8e8e;
  -webkit-user-select: text; user-select: text;
}
.ph-prose h2 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
.ph-prose p { margin: 0 0 10px; }
.ph-prose hr { border: 0; border-top: 1px solid #b6b1a6; margin: 10px 0 12px; }
.ph-meta { font: 12px var(--mono); color: #444; margin: 2px 0 !important; }
.ph-unsent { font: 600 12px var(--mono); letter-spacing: .14em; color: var(--amber-dim); margin-top: 16px !important; }
.ph-pre {
  margin: 0; padding: 12px 16px 28px; background: var(--bone); color: #111;
  font: 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word;
  -webkit-user-select: text; user-select: text;
}
.ph-btn {
  display: inline-block; margin: 12px 0 4px; padding: 11px 18px; font: 14px var(--ui); color: #111;
  background: var(--gray); border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #555; border-bottom: 1px solid #555;
}
.ph-btn:active { border-color: #555 #fff #fff #555; }
.ph-btn.ghost { margin: 0; padding: 8px 14px; font: 12px var(--mono); }
.ph-center { text-align: center; padding: 10px; }
.ph-field {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px; font: 16px var(--ui);
  background: #fff; border-top: 1px solid #555; border-left: 1px solid #555;
  border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-radius: 0;
}
.ph-bad { color: #9c1f14; font: 600 13px var(--mono); }

/* about */
.ph-card {
  text-align: center; padding: 24px 16px 18px; color: var(--bone);
  background: linear-gradient(180deg, #16181c, #3a2a22);
}
.ph-card h2 { margin: 10px 0 4px; font-size: 21px; }
.ph-card .ph-meta { color: #b9b4a8; }
.ph-avatar {
  width: 72px; height: 72px; margin: 0 auto; display: grid; place-items: center;
  font: 300 38px var(--mono); color: #111; background: var(--gray);
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #555; border-bottom: 1px solid #555;
}

/* photos */
.ph-albums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 14px 12px; }
.ph-album {
  display: flex; flex-direction: column; gap: 2px; background: none; border: 0; padding: 0;
  text-align: left; color: #111; font-size: 12px;
}
.ph-album b { font-size: 14px; margin-top: 5px; }
.ph-cover { display: block; aspect-ratio: 1; overflow: hidden; background: #0b0c0e; border: 1px solid #555; }
.ph-cover img, .ph-cover canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: #0b0c0e; }
.ph-ph { aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: #0b0c0e; }
.ph-ph img, .ph-ph canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-viewer { background: #050506; }
.ph-viewer img, .ph-viewer video { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.ph-facts {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px;
  font: 11.5px var(--mono); color: #222; background: #b6b6b6; border-bottom: 1px solid #8e8e8e;
  word-break: break-all;
}
.ph-facts b { font: 600 14px var(--ui); word-break: break-word; }
.ph-viewer .ph-facts { background: #0b0c0e; color: #b9b4a8; border: 0; }
.ph-viewer .ph-facts b { color: var(--bone); }
.ph-file img { max-width: 100%; height: auto; }
.ph-file embed, .ph-file iframe, .ph-file object { width: 100%; min-height: 60vh; }
.ph-save { padding: 10px 12px; }
.ph-page canvas { max-width: 100%; }

/* the Wired */
.ph-acct {
  display: flex; flex-direction: column; gap: 3px; padding: 14px;
  background: #0b0c0e; color: var(--bone); font-size: 13px;
}
.ph-acct b { font-size: 16px; }
.ph-acct .ph-meta { color: #8a857b; }
.ph-tabs {
  position: sticky; top: 0; z-index: 2;
  display: flex; gap: 6px; overflow-x: auto; padding: 8px; background: #000;
  scrollbar-width: none;
}
.ph-tabs::-webkit-scrollbar { display: none; }
.ph-tab {
  flex: 0 0 auto; padding: 8px 11px; font: 12px var(--mono);
  background: #1c1e22; color: var(--bone); border: 1px solid #3a3f46;
}
.ph-tab[aria-selected="true"] { background: var(--amber); color: #000; border-color: var(--amber); }
.ph-feedhead {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px;
  font: 11px var(--mono); color: #222; background: #b6b6b6; border-bottom: 1px solid #8e8e8e;
}
.ph-feedlist.dk-list { overflow: visible; direction: ltr; background: var(--paper); }
.ph-feedlist .dk-row { font-size: 14px; line-height: 1.45; padding: 11px 12px 9px; }
.ph-feedlist .dk-med { max-width: 100%; height: auto; }

/* calendar */
.ph-row.ev { border-left: 4px solid #777; }
.ph-row.ev-class    { border-left-color: var(--teal); }
.ph-row.ev-advising { border-left-color: var(--amber); }
.ph-row.ev-group    { border-left-color: #7d9a5c; }
.ph-row.ev-service  { border-left-color: #8a8fa0; }
.ph-row.ev-life     { border-left-color: #b4574b; }
.ph-row.ev-exam     { border-left-color: #c9372c; }
.ph-row.ev-backlog  { border-left-color: #555; }

/* the home bar */
.ph-homebar {
  flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-start;
  height: calc(22px + env(safe-area-inset-bottom)); padding: 9px 0 0;
  background: #000; border: 0; position: relative; z-index: 40;
}
.ph-homebar i { width: 124px; height: 4px; border-radius: 2px; background: var(--bone); opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  body:not(.fx-force) .ph-page { animation: none; }
  body:not(.fx-force) .ph-lock { transition: none; }
  body:not(.fx-force) .ph-obs i,
  body:not(.fx-force) .ph-lock-hint,
  body:not(.fx-force) .ph-carrier { animation: none; }
}

/* a picture that is not there is shown on the machine's gray, where the
   failed render was designed to be read */
.ph-viewer.dead { background: var(--gray); }
.ph-viewer.dead .ph-facts { background: #b6b6b6; color: #222; border-bottom: 1px solid #8e8e8e; }
.ph-viewer.dead .ph-facts b { color: #111; }
/* after you have been away, what you looked at shows through the lock */
.ph-lock.away .ph-lock-saver { opacity: .6; }
.ph-lock.away .ph-note { background: rgba(10,11,13,.84); }