/* ============================================
   Tech path: working desktop furniture
   Menubar menus, window resize grips, dock, dialogs, Mail.
   Everything is scoped under the tech path.
   ============================================ */

/* ---------- window resize grips ---------- */

.win-grips { position: absolute; inset: 0; pointer-events: none; }
.win-grip  { position: absolute; pointer-events: auto; z-index: 4; }

.win-grip-n, .win-grip-s { left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.win-grip-e, .win-grip-w { top: 10px; bottom: 10px; width: 7px;  cursor: ew-resize; }
.win-grip-n { top: 0; }
.win-grip-s { bottom: 0; }
.win-grip-w { left: 0; }
.win-grip-e { right: 0; }

.win-grip-ne, .win-grip-nw, .win-grip-se, .win-grip-sw { width: 15px; height: 15px; }
.win-grip-nw { top: 0; left: 0; cursor: nwse-resize; }
.win-grip-se { bottom: 0; right: 0; cursor: nwse-resize; }
.win-grip-ne { top: 0; right: 0; cursor: nesw-resize; }
.win-grip-sw { bottom: 0; left: 0; cursor: nesw-resize; }

/* Once resized, the explicit size wins over the responsive default. */
.terminal-window.sized { width: var(--win-w); height: var(--win-h); max-height: none; }
.terminal-window.sized .terminal-body { flex: 1 1 auto; overflow-y: auto; }
.terminal-window.resizing { user-select: none; }
.terminal-window.maximized .win-grips,
.terminal-window.minimized .win-grips { display: none; }

@media (max-width: 968px) { .win-grips { display: none; } }

/* ---------- menubar menus ---------- */

.macos-menubar { position: relative; z-index: 60; }
.menubar-left  { display: flex; align-items: center; gap: 0; }
.menubar-menu  { position: relative; }

.menubar-left .menubar-item {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  padding: 2px 9px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.menubar-left .menubar-item:hover { background: rgba(255,255,255,0.14); }
.menubar-menu.open > .menubar-item { background: rgba(255,255,255,0.22); }

.menubar-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 216px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(30, 32, 40, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  display: none;
  z-index: 61;
}
.menubar-menu.open .menubar-dropdown { display: block; }
.menubar-menu:last-child .menubar-dropdown { left: auto; right: 0; }

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 5px 9px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #edeef2;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item:hover { background: var(--tech-bright, #0f4c81); color: #fff; }
.menu-item kbd {
  font: inherit;
  font-size: 0.76rem;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.menu-sep { height: 1px; margin: 4px 8px; background: rgba(255,255,255,0.13); }

.menubar-icon.is-interactive,
.menubar-time.is-interactive { cursor: pointer; border-radius: 4px; padding: 1px 5px; }
.menubar-icon.is-interactive:hover,
.menubar-time.is-interactive:hover { background: rgba(255,255,255,0.14); }

/* ---------- toast ---------- */

.os-toast {
  position: absolute;
  left: 50%;
  bottom: 122px;
  transform: translate(-50%, 8px);
  max-width: min(460px, 78%);
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(18, 18, 31, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,217,255,0.28);
  color: #e9f6ff;
  font-size: 0.83rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 70;
}
.os-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- dialogs ---------- */

.os-dialog {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(430px, calc(100% - 60px));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(24, 26, 36, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 26px 70px rgba(0,0,0,0.6);
  z-index: 65;
}
.os-dialog-bar,
.os-mail-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  cursor: grab;
}
.os-dialog.dragging .os-dialog-bar,
.os-mail.dragging .os-mail-bar { cursor: grabbing; }
.os-dialog-title { font-size: 0.79rem; color: #cfd4e0; letter-spacing: 0.02em; }
.os-dialog-body { padding: 18px 20px 20px; color: #dfe4ee; font-size: 0.85rem; line-height: 1.62; }
.os-dialog-body p { margin: 0 0 9px; }
.os-dialog-body p:last-child { margin-bottom: 0; }

.about-mac { text-align: center; }
.about-logo {
  width: 52px; height: 52px; margin: 2px auto 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a2463, #0f4c81);
}
.about-mac h3 { margin: 0 0 14px; font-size: 0.98rem; color: #fff; }
.about-mac dl, .shortcut-list { margin: 0; text-align: left; }
.about-mac dl > div, .shortcut-list > div {
  display: flex; gap: 14px; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.about-mac dt, .shortcut-list dt { flex: 0 0 92px; color: #94a3b8; margin: 0; }
.about-mac dd, .shortcut-list dd { margin: 0; }
.shortcut-list dt { flex-basis: 96px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-note { margin-top: 14px !important; font-size: 0.78rem; font-style: italic; opacity: 0.62; }
.egg-list, .trash-list { margin: 0; padding-left: 20px; }
.egg-list li, .trash-list li { margin-bottom: 7px; }

/* ---------- dock ---------- */

.os-dock {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100% - 32px);
}
.os-dock-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(28, 30, 42, 0.62);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 14px 44px rgba(0,0,0,0.48);
}
.os-dock-sep { width: 1px; align-self: stretch; margin: 6px 3px; background: rgba(255,255,255,0.18); }

/* Hover lifts the one icon under the cursor. The macOS-style distance
   magnification was doing too much: neighbours swelling on either side made
   the whole dock breathe every time the pointer crossed it. */
.os-dock-app {
  position: relative;
  width: 58px; height: 58px;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(0);
  transform-origin: bottom center;
  transition: transform 0.18s cubic-bezier(0.32, 0.9, 0.36, 1);
}
.os-dock-app:hover,
.os-dock-app:focus-visible { transform: translateY(-7px); }
.os-dock-app:active { transform: translateY(-3px); }
.os-dock-app img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; pointer-events: none; }
.os-dock-app:focus-visible { outline: 2px solid var(--tech-cyan, #00d9ff); outline-offset: 3px; border-radius: 12px; }

.os-dock-dot {
  position: absolute; left: 50%; bottom: -6px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.82);
  transform: translateX(-50%) scale(0);
  transition: transform 0.2s ease;
}
.os-dock-app.running .os-dock-dot { transform: translateX(-50%) scale(1); }

.os-dock-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  padding: 4px 10px; border-radius: 6px;
  background: rgba(20, 22, 32, 0.95);
  border: 1px solid rgba(255,255,255,0.14);
  color: #eaf2ff; font-size: 0.72rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.os-dock-app:hover .os-dock-tip, .os-dock-app:focus-visible .os-dock-tip { opacity: 1; }

@keyframes os-dock-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-18px); }
  70%      { transform: translateY(-6px); }
}
.os-dock-app.bouncing { animation: os-dock-bounce 0.68s ease; }

@media (max-width: 968px) {
  .os-dock { position: static; transform: none; margin: 18px auto 4px; max-width: 100%; }
  .os-dock-inner { flex-wrap: wrap; justify-content: center; }
  .os-dock-app { width: 50px; height: 50px; }
  .os-dock-app:hover { transform: none; }
  .os-dock-tip { display: none; }
}

/* ---------- Mail ---------- */

.os-mail {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: min(500px, calc(100% - 48px));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(22, 24, 34, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 26px 74px rgba(0,0,0,0.62);
  z-index: 66;
}
.os-mail-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; }

.os-field { display: flex; align-items: center; gap: 10px; }
.os-field > span {
  flex: 0 0 62px; font-size: 0.76rem; color: #93a0b4;
  text-align: right; letter-spacing: 0.02em;
}
.os-field input {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #eaeef6; font: inherit; font-size: 0.83rem;
}
.os-field input[readonly] { opacity: 0.62; cursor: default; }
.os-mail-body textarea {
  padding: 10px; border-radius: 7px; resize: vertical; min-height: 118px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #eaeef6; font: inherit; font-size: 0.85rem; line-height: 1.55;
}
.os-field input:focus, .os-mail-body textarea:focus {
  outline: none; border-color: var(--tech-cyan, #00d9ff);
  box-shadow: 0 0 0 3px rgba(0,217,255,0.14);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.os-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.os-mail-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2px; }
.os-mail-status { margin: 0; font-size: 0.77rem; color: #93a0b4; line-height: 1.45; }
.os-mail-status.is-error { color: #ff9aa8; }
.os-mail-status.is-ok { color: #6ee7b7; }

.os-send {
  flex: 0 0 auto;
  padding: 8px 20px; border: 0; border-radius: 7px;
  background: linear-gradient(135deg, #0a2463, #0f4c81);
  color: #fff; font: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer;
}
.os-send:hover:not(:disabled) { filter: brightness(1.18); }
.os-send:disabled { opacity: 0.55; cursor: default; }

/* ---------- screen effects ---------- */

/* A slept screen is just a mirror, so the copy says so. Set in `content`
   rather than in the DOM because the whole sleep state is one class on the
   surface and nothing should have to be built or torn down to show it. */
.desktop-surface.os-asleep::after {
  content: 'Oh — hello.\A That’s you, in the reflection.\A\A Click anywhere to wake';
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: #000; color: rgba(255,255,255,0.3);
  white-space: pre-line; text-align: center;
  padding: 0 28px;
  font-size: 0.86rem; line-height: 2.15; letter-spacing: 0.02em;
}
.desktop-surface.os-scanlines::before {
  content: ''; position: absolute; inset: 0; z-index: 45; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
}
.desktop-surface.os-invert { filter: invert(1) hue-rotate(180deg); }
.desktop-surface.os-barrel-roll { animation: os-roll 1.1s ease; }
@keyframes os-roll { to { transform: rotate(360deg); } }
.os-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .os-dock-app, .os-toast { transition: none; }
  .os-dock-app.bouncing, .desktop-surface.os-barrel-roll { animation: none; }
}

/* ---------- app windows (the demos, running on the desktop) ---------- */

.os-app {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  min-width: 340px;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: #12121f;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 78px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.04);
}

.os-app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 9px 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  cursor: grab;
}
.os-app.dragging .os-app-bar { cursor: grabbing; }
.os-app-bar .os-dialog-title { flex: 1 1 auto; }

.os-app-pop {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 5px;
  color: #9fb0c8;
  font-size: 0.82rem;
  text-decoration: none;
  line-height: 1.5;
}
.os-app-pop:hover { background: rgba(255,255,255,0.12); color: #fff; }

.os-app-body { flex: 1 1 auto; min-height: 0; background: #0d0d18; }
.os-app-body iframe { display: block; width: 100%; height: 100%; border: 0; }

/* An iframe swallows pointermove, so a drag that crosses it would stall.
   Nothing inside needs events while the frame itself is being moved. */
.os-app.dragging .os-app-body,
.os-app.resizing .os-app-body { pointer-events: none; }

.os-app.minimized { height: auto !important; min-height: 0; }
.os-app.minimized .os-app-body,
.os-app.minimized .win-grips { display: none; }

.os-app.maximized {
  left: 16px; top: 30px;
  width: auto !important; height: auto !important;
  right: 16px; bottom: 92px;
  transform: none;
}
.os-app.maximized .win-grips { display: none; }

@media (max-width: 968px) {
  .os-app {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100% !important;
    height: 78vh !important;
    margin: 16px 0;
  }
  .os-app.maximized { position: relative; inset: auto; }
}

/* ---------- traffic lights ---------- */

/* The bars these sit in are drag handles carrying cursor: grab, which the
   dots were inheriting — a move cursor on a button that does not move. */
.terminal-dots .dot,
.os-app-bar .dot,
.os-dialog-bar .dot,
.os-mail-bar .dot {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Glyphs appear on hovering the group, as they do on macOS — hovering one
   light shows all three, so you can see what the others will do. */
.terminal-dots .dot::after,
.os-app-bar .dot::after,
.os-dialog-bar .dot::after,
.os-mail-bar .dot::after {
  content: '';
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, 0.62);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.terminal-dots:hover .dot::after,
.os-app-bar .terminal-dots:hover .dot::after,
.os-dialog-bar .terminal-dots:hover .dot::after,
.os-mail-bar .terminal-dots:hover .dot::after { opacity: 1; }

.terminal-dots .dot.red::after,
.os-app-bar .dot.red::after,
.os-dialog-bar .dot.red::after,
.os-mail-bar .dot.red::after { content: '\00D7'; font-size: 11px; }

.terminal-dots .dot.yellow::after,
.os-app-bar .dot.yellow::after,
.os-dialog-bar .dot.yellow::after,
.os-mail-bar .dot.yellow::after { content: '\2212'; }

.terminal-dots .dot.green::after,
.os-app-bar .dot.green::after,
.os-dialog-bar .dot.green::after,
.os-mail-bar .dot.green::after { content: '\2197'; font-size: 10px; }

/* ---------- site nav, adopted into the menubar ---------- */

/* On this path the floating pill is redundant furniture: there is already a
   bar across the top of the screen. The nav moves into it and drops the
   pill's positioning and chrome, keeping its own buttons and handlers. */
.v2-nav.in-menubar {
  position: static;
  transform: none;
  z-index: auto;
  padding: 0;
  gap: 0.5rem;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.v2-nav.in-menubar .nav-home { width: 22px; height: 22px; }
.v2-nav.in-menubar .nav-home svg { width: 13px; height: 13px; }
.v2-nav.in-menubar .nav-paths { gap: 2px; }
.v2-nav.in-menubar .nav-btn {
  padding: 2px 9px;
  font-size: 0.76rem;
  border-radius: 4px;
}
.v2-nav.in-menubar .nav-btn-dot { width: 5px; height: 5px; }
.v2-nav.in-menubar .nav-cv {
  padding: 1px 9px;
  font-size: 0.7rem;
  border-radius: 4px;
}

@media (max-width: 968px) {
  /* Below the desktop breakpoint the menubar is decoration, so the nav goes
     back to being a pill the reader can actually reach. */
  .v2-nav.in-menubar { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); }
}

/* ---------- desktop file labels ---------- */

/* The label is nowrap + ellipsis and centred, so a name wider than 94px lost
   characters off BOTH ends — "Sambold_CV.docx" showed as "ambold_CV.d…".
   The Finder wraps a long filename onto a second line instead of truncating
   it, so this does too, and only ellipsises past two. */
.desktop-icons .desktop-icon-label {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- CV as a document window ---------- */

/* The CV button leaves the menubar on this path: the document is on the
   desktop, and a pill marked CV beside the Apple menu was a second door to
   the same room. Other paths keep theirs — it is their only way in. */
[data-active-path="tech"] .v2-nav.in-menubar .nav-cv { display: none; }

.os-word .os-word-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 7px 12px;
  background: #185abd;
  color: #fff;
  font-size: 0.75rem;
}
.os-word-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
  background: rgba(255,255,255,0.22);
  font-weight: 800; font-size: 0.68rem;
}
.os-word-name { font-weight: 600; letter-spacing: 0.01em; }
.os-word-chip {
  padding: 1px 7px; border-radius: 3px;
  background: rgba(0,0,0,0.22);
  font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.os-word-spacer { flex: 1 1 auto; }
.os-word-dl {
  padding: 2px 9px; border-radius: 4px;
  background: rgba(255,255,255,0.16);
  color: #fff; text-decoration: none; font-size: 0.7rem; font-weight: 600;
}
.os-word-dl:hover { background: rgba(255,255,255,0.3); }

/* The grey desk the page sits on, and the page itself. */
.os-word .os-word-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #4a4a4f;
  padding: 22px 0 30px;
}
.os-word-page {
  width: min(660px, calc(100% - 44px));
  margin: 0 auto;
  padding: 46px 54px 56px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 3px 16px rgba(0,0,0,0.45);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 0.88rem;
  line-height: 1.62;
}
.os-word-page h2 {
  margin: 0 0 4px;
  font-size: 1.32rem;
  color: #10121a;
}
.os-word-page h3 {
  margin: 1.5em 0 0.4em;
  font-size: 0.94rem;
  color: #185abd;
  border-bottom: 1px solid #d8dde5;
  padding-bottom: 3px;
}
.os-word-page p { margin: 0 0 0.7em; }
.os-word-page ul { margin: 0 0 0.9em; padding-left: 1.15rem; }
.os-word-page li { margin-bottom: 0.32em; }
.os-word-page a { color: #185abd; }
.os-word-page .cv-contact { font-size: 0.8rem; color: #4a5260; margin-bottom: 1.2em; }

@media (max-width: 968px) {
  .os-word-page { width: calc(100% - 24px); padding: 26px 22px 32px; }
}

/* ============================================
   Below the desktop breakpoint
   ============================================
   The desktop metaphor stops paying for itself on a phone: the window is
   already in normal flow with nothing to drag, and eight menus plus a status
   tray in 375px is a cramped strip nobody can hit. What is left is the part
   that carries content — the file tree, the icons, the dock as a launcher. */

@media (max-width: 968px) {
  /* Menus and status tray go; the bar itself must not. The site nav may be
     parked inside it, and display:none takes the whole subtree with it —
     including, on a resize across this breakpoint, the only navigation on the
     page. Collapsing the bar instead leaves the nav free to sit as a pill.
     JS also moves the nav back out on a breakpoint change, but that is the
     belt to this brace: a media query cannot miss an event. */
  .macos-menubar {
    position: static;
    height: auto;
    padding: 0;
    background: none;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .macos-menubar .menubar-left,
  .macos-menubar .menubar-right { display: none; }

  /* The surface is min-height: calc(100vh - 28px), so it is a screenful tall
     whatever the content does. With the dock in normal flow that left it
     stranded directly under the file tree with a third of the screen of empty
     wallpaper beneath — a dock floating in the middle of the desktop.
     margin-top: auto in a flex column drops it to the bottom of the surface
     when there is room and lets it sit after the content when there is not,
     which is what absolute positioning would have got wrong. */
  /* A row of files on a surface nothing can be dragged around is decoration.
     Both apps are already in the dock and the CV joins them there, so nothing
     is lost by dropping the icons — and the file tree gets the space. */
  .desktop-icons { display: none; }

  /* Collapsing the menubar above took 28px of height out of the page, and that
     28px was quietly doing a job: it pushed the surface clear of the nav pill,
     which is fixed at top: 1.5rem. Without it the icons sat under the pill and
     it took their taps. responsive.css already corrects this, but only below
     640px — the same correction is needed everywhere the pill floats, which is
     everywhere below the desktop breakpoint. */
  .desktop-surface {
    display: flex;
    flex-direction: column;
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
  }
  .desktop-surface > .desktop-icons,
  .desktop-surface > .terminal-window { flex: 0 0 auto; }

  /* A compact single row that scrolls sideways rather than stacking into a
     block two hundred pixels tall. */
  .os-dock { margin: 14px auto 4px; max-width: 100%; margin-top: auto; }
  .os-dock-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 14px;
    scrollbar-width: none;
  }
  .os-dock-inner::-webkit-scrollbar { display: none; }
  .os-dock-app { width: 44px; height: 44px; flex: 0 0 auto; }
  .os-dock-app img { border-radius: 9px; }
  .os-dock-dot { bottom: -5px; width: 3px; height: 3px; }

  /* Dialogs and Mail become sheets rather than little floating windows. */
  .os-dialog,
  .os-mail {
    left: 50%; top: auto; bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
  }
  .os-dialog-bar, .os-mail-bar { cursor: default; }

  .os-toast { bottom: 84px; }
}

/* ---------- touch targets ---------- */

@media (max-width: 968px) {
  /* responsive.css turns .terminal-dots inert at this width, on the reasoning
     that the terminal window has no chrome to operate on a phone. That was
     right when the dots only drove that window. These sheets borrow the same
     markup and their red dot is the only way to close them, so it takes taps
     again — scoped to the sheets, leaving the terminal's own dots inert. */
  .os-mail-bar .terminal-dots,
  .os-dialog-bar .terminal-dots,
  .os-app-bar .terminal-dots { pointer-events: auto; }

  /* A traffic light is a 12px circle: fine for a cursor, well under half the
     ~44px a fingertip needs. The dot keeps its size; an invisible pad around
     it catches the tap, so closing a sheet does not become a game of darts. */
  .terminal-dots .dot::before,
  .os-app-bar .dot::before,
  .os-dialog-bar .dot::before,
  .os-mail-bar .dot::before {
    content: '';
    position: absolute;
    inset: -15px;
  }
  /* Roomier gaps so the enlarged areas cannot overlap each other. */
  .os-dialog-bar .terminal-dots,
  .os-mail-bar .terminal-dots,
  .os-app-bar .terminal-dots { gap: 18px; }

  /* Sheets get a real bar to grab and a bigger title, since they are now the
     full width of the screen rather than a small floating window. */
  .os-dialog-bar, .os-mail-bar { padding: 13px 16px; }
}

/* ---------- logos vs app icons ---------- */

/* Every dock button is the same box, but the artwork inside is not the same
   shape. The app icons are square tiles that fill it; the lab and GitHub marks
   are bare logos on transparency, and JPSS-1 is wider than it is tall, so
   object-fit: contain letterboxes it. Giving the bare logos a tile of their
   own makes every item the same size, and gives the dark GitHub mark something
   to sit on.

   The padding here costs readable artwork twice over, since these marks carry
   ring text that is already at the edge of legible at dock size. The source
   files are trimmed to their ink, so the tile only needs enough inset to keep
   the art off the rounded corner. */
.os-dock-app.is-logo img {
  background: #f4f7fa;
  border-radius: 11px;
  padding: 2px;
  box-sizing: border-box;
}

@media (max-width: 968px) {
  .os-dock-app.is-logo img { border-radius: 9px; padding: 1px; }
}