/* ============================================================================
   ORCA DEVS — desk.css
   The desktop metaphor: the floating object layer, the app icons, the little
   mac windows, the music widget and the windows they open.

   THIS FILE EXISTS BECAUSE OF A BUG. All of it used to live in home.css, which
   only the home page loads — but /work, /studio and /contact carry the same
   markup in their mastheads. With no rules, .stick-layer was a plain block and
   every 58px icon sat in the document flow: on a phone that stacked a 1215px
   column of images down the left edge and shoved the whole page under it.
   Anything with this markup must load this file.
   ========================================================================== */
/* ============================================================================
   THE BASE RULES FOR THE FLOATING LAYER.
   These went missing in an earlier edit, and without them .stick-layer was a
   normal block: every window, widget and icon sat in the document flow and
   shoved the headline hundreds of pixels down the page. This is the fix for
   the "why is everything so far down" problem.
   ========================================================================== */
.stick-layer{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;   /* only the objects themselves take clicks */
  overflow:hidden;       /* a thrown object must not grow the page */
}
.stick{
  position:absolute;
  transform-origin:center;
  user-select:none; -webkit-user-select:none;
  background:none; border:0; padding:0;
  /* hidden until placed — prevents the 0,0 flash before JS runs */
  opacity:0;
  scale:0.6;
}
/* An <img> is natively draggable in HTML. Since we stopped calling
   preventDefault on controls (so their clicks survive), the browser started
   its own image-drag instead of ours — which is why some icons could not be
   moved. Killing native drag on the artwork fixes those. */
.stick img, .stick svg{ -webkit-user-drag:none; user-drag:none; pointer-events:none }
.stick-layer.live .stick{ pointer-events:auto; cursor:grab; touch-action:none }
.stick-layer.live .stick.held{
  cursor:grabbing;
  filter:drop-shadow(0 16px 28px rgba(5,12,15,.24));
}
/* placed — pop in from scaled-down, invisible state */
.stick.stick-placed{
  animation: stick-pop 0.42s cubic-bezier(.34,1.56,.64,1)
             calc(var(--stick-i, 0) * 55ms) both;
}
@keyframes stick-pop{
  from{ opacity:0; scale:0.55 }
  to  { opacity:1; scale:1    }
}
/* after the animation settles, lock in the final state so hover/drag works */
.stick.stick-placed.stick-settled{
  opacity:1; scale:1;
  animation:none;
}
/* while held, never re-run the animation; keep the settled state */
.stick.held{ transition:none !important; animation:none !important }

/* the local screens carry on, and say so */
.hero.offline .stick-win .sw{ box-shadow:0 0 0 2px var(--kelp), var(--sh-3) }
.hero.offline .stick-win .sw-cap::after{
  content:" · still working"; color:var(--kelp); font-weight:500;
}
.stick-win .sw{ transition:box-shadow .3s var(--ease) }

/* trash */
.stick-trash{ display:grid; justify-items:center }

/* a mac alert, mid-panic */
.stick-alert{
  width:172px; border-radius:0; overflow:hidden;
  background:#fff; border:1.5px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.75);
}

/* a real month grid inside the calendar window */
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
  margin:2px 0 4px;
}
.cal-grid .cal-h{
  font-family:var(--mono); font-size:8.5px; color:var(--ink-4);
  text-align:center; padding-bottom:2px;
}
.cal-grid button{
  aspect-ratio:1; border-radius:5px; padding:0;
  font-size:11px; color:var(--ink-2);
  display:grid; place-items:center;
  transition:background .15s, color .15s;
}
.cal-grid button:hover:not(:disabled){ background:rgba(5,12,15,.08); color:var(--ink) }
.cal-grid button:disabled{ color:var(--ink-4); opacity:.4; cursor:default }
.cal-grid button[aria-pressed="true"]{ background:var(--ink); color:#fff; font-weight:600 }
.cal-grid .cal-blank{ visibility:hidden }

/* Every icon carries a standing capsule saying what it does. Hover-only meant
   nobody knew the icons were clickable at all, so the labels are always on —
   soft and small at rest, and they light up under the cursor. */
.stick[aria-label]{ position:absolute; overflow:visible }
.stick[aria-label]::after{
  content:attr(aria-label);
  position:absolute; left:50%; top:100%; transform:translate(-50%,7px);
  padding:3px 9px; border-radius:999px;
  background:rgba(252,251,247,.86);
  color:var(--ink-2);
  border:1px solid rgba(5,12,15,.12);
  box-shadow:0 2px 6px rgba(5,12,15,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:9px; letter-spacing:.01em;
  white-space:nowrap; pointer-events:none;
  opacity:.85;
  transition:opacity .18s, transform .18s var(--ease),
             background .18s, color .18s, box-shadow .18s;
}
.stick-layer.live .stick[aria-label]:hover::after{
  opacity:1; transform:translate(-50%,10px);
  background:var(--ink); color:#fff;
  border-color:var(--ink);
  box-shadow:0 6px 14px rgba(5,12,15,.28);
}
/* out of the way while the object is in hand */
.stick.held[aria-label]::after{ opacity:0 !important }

/* a click should feel like a click, not just a grab */
.stick-layer.live .stick[data-opens]{ cursor:pointer }
.stick-layer.live .stick[data-opens]:active{ transform:scale(.94) }
.stick-layer.live .stick[data-opens][aria-expanded="true"]::after{
  background:var(--ink); color:#fff; border-color:var(--ink); opacity:1;
}

/* small mono chip */
.stick-chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  padding:6px 11px; border-radius:var(--pill);
  background:var(--paper-2); color:var(--ink-2);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
  white-space:nowrap;
}

/* ------------------------------------------------------------ music widget
   A small player sitting on the desk. Point the audio tag at your own mp3 and
   the whole thing works; until the file exists it says so instead of failing. */
.music-widget{
  width:196px; padding:11px 12px 12px;
  border-radius:14px;
  background:rgba(252,251,247,.92);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(5,12,15,.14);
  box-shadow:var(--sh-3);
}
.mw-top{ display:flex; align-items:center; gap:9px }
.mw-art{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center;
  position:relative;
}
.mw-art img{
  width:38px; height:38px; display:block;
  filter:drop-shadow(0 3px 8px rgba(5,12,15,.28));
}
/* the icon gets a gentle pulse while the track is actually playing */
.music-widget.playing .mw-art img{ animation:mw-pulse 2.2s var(--ease-soft) infinite }
.mw-meta{ display:grid; gap:1px; min-width:0 }
.mw-title{
  font-size:12.5px; font-weight:600; color:var(--ink);
  letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mw-artist{
  font-size:10.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* The bar is 4px of paint inside a 16px hit area, so it is easy to grab
   without looking chunky. The handle appears on hover and while scrubbing. */
.mw-bar{
  position:relative;
  height:16px; margin-top:7px;
  cursor:grab; touch-action:none;
  display:flex; align-items:center;
}
.mw-bar::before{
  content:""; position:absolute; left:0; right:0; height:4px;
  border-radius:2px; background:rgba(5,12,15,.14);
}
.mw-fill{
  position:relative; display:block; height:4px; width:0;
  background:var(--ink); border-radius:2px;
  transition:width .12s linear;
}
.mw-bar:active{ cursor:grabbing }
.mw-bar.scrubbing .mw-fill{ transition:none }
/* the grab handle */
.mw-fill::after{
  content:""; position:absolute; right:-6px; top:50%;
  width:12px; height:12px; border-radius:50%;
  transform:translateY(-50%) scale(0);
  background:#fff; border:1px solid rgba(5,12,15,.24);
  box-shadow:0 1px 4px rgba(5,12,15,.32);
  transition:transform .16s var(--ease);
}
.mw-bar:hover .mw-fill::after,
.mw-bar.scrubbing .mw-fill::after{ transform:translateY(-50%) scale(1) }
.mw-times{
  display:flex; justify-content:space-between; margin-top:5px;
  font-family:var(--mono); font-size:9px; color:var(--ink-4);
}

.mw-controls{ display:flex; align-items:center; gap:7px; margin-top:8px }
.mw-btn,.mw-play{
  display:grid; place-items:center; padding:0;
  border-radius:50%; color:var(--ink);
  transition:background .16s, transform .12s;
}
.mw-btn{ width:24px; height:24px; color:var(--ink-3) }
.mw-btn:hover{ background:rgba(5,12,15,.07); color:var(--ink) }
.mw-play{
  width:30px; height:30px;
  background:var(--ink); color:#fff;
}
.mw-play:hover{ transform:scale(1.06) }
.mw-play:active{ transform:scale(.94) }

/* four bars that dance while it plays */
.mw-viz{ display:flex; align-items:flex-end; gap:2px; height:14px; margin-left:auto }
.mw-viz i{ width:2.5px; height:3px; border-radius:1px; background:var(--ink-4) }
.music-widget.playing .mw-viz i{ animation:mw-bounce .9s ease-in-out infinite }
.music-widget.playing .mw-viz i:nth-child(2){ animation-delay:.16s }
.music-widget.playing .mw-viz i:nth-child(3){ animation-delay:.32s }
.music-widget.playing .mw-viz i:nth-child(4){ animation-delay:.48s }

.mw-missing{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:9px; color:#B4413A;
}

/* beach ball */
.stick-ball{
  width:24px; height:24px; border-radius:50%;
  background:conic-gradient(#F05A4F 0 25%, #F5C147 0 50%, #4E9FCB 0 75%, #56B77E 0);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75) inset, var(--sh-1);
}
.stick-ball{ animation:ball-spin 9s linear infinite }

/* ------------------------------------------------- Nametags */
.nametag {
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 6px;
  width: 110px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  overflow: hidden;
}
.nametag.blue .hdr, .nametag.blue .ftr { background: #0076FF; }
.nametag.red .hdr, .nametag.red .ftr { background: #FF3B30; }
.nametag .hdr {
  padding: 6px 0 2px;
  text-align: center;
  color: #fff;
}
.nametag .hdr .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.nametag .hdr .sm {
  font-size: 7px;
  text-transform: uppercase;
  opacity: 0.9;
  letter-spacing: 0.08em;
  margin-top: 1px;
}
.nametag .body {
  height: 42px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nametag .body .name {
  font-family: "Comic Sans MS", "Chalkboard", cursive, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  transform: rotate(-2deg);
}
.nametag .ftr {
  height: 8px;
}

/* ------------------------------------------------- 3D macOS App Icons */
.stick.app-icon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18));
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.stick.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.stick.app-icon:hover {
  transform: scale(1.15) rotate(0deg) !important;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.25));
}

/* ============================================================================
   RESTORED — an earlier edit spliced out this whole block by accident, which
   is why the offline toast rendered as raw text in the corner and every desk
   window lost its styling.
   ========================================================================== */

/* --------------------------------------------------------- object styling */
.stick-kao{
  font-family:var(--mono); font-size:23px; color:var(--ink-3);
  letter-spacing:-.03em; white-space:nowrap;
  transition:color .25s, scale .25s var(--ease);
}
.stick-kao.sm{ font-size:15px }
.stick-kao.near{ color:var(--tide); scale:1.14 }

.app-icon img{ width:58px; height:58px; display:block;
  filter:drop-shadow(0 6px 12px rgba(5,12,15,.26));
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.app-icon:hover img{ transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 10px 18px rgba(5,12,15,.32)) }
.app-icon:active img{ transform:scale(.95) }

.micro-ico img{ width:38px; height:38px; display:block;
  filter:drop-shadow(0 4px 9px rgba(5,12,15,.24));
  transition:transform .2s var(--ease);
}
.micro-ico.sm img{ width:28px; height:28px }
.micro-ico:hover img{ transform:translateY(-2px) scale(1.07) }

.app-icon,.micro-ico{ background:none; border:0; padding:0; line-height:0 }

/* ------------------------------------------------------- while dragging
   nothing else may claim the pointer, or a live iframe eats the release */
body.dragging-sticker iframe,
body.dragging-sticker .veil,
body.dragging-sticker .stage{ pointer-events:none !important }
body.dragging-sticker{ user-select:none; cursor:grabbing }

/* ------------------------------------------------------------ wifi switch */
.stick-wifi{
  display:grid; gap:8px; justify-items:center;
  padding:12px 14px 11px; border-radius:12px;
  background:var(--paper-2); border:1px solid rgba(5,12,15,.16);
  box-shadow:var(--sh-3);
}

/* ----------------------------------------------------------- offline state */
.offline-toast{
  position:absolute; left:50%; bottom:22px; z-index:8;
  transform:translate(-50%,14px);
  display:flex; align-items:center; gap:10px;
  max-width:min(92vw,520px);
  padding:12px 18px; border-radius:var(--pill);
  background:rgba(5,12,15,.9); color:#fff;
  font-size:13.5px; line-height:1.4;
  box-shadow:var(--sh-3);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.offline-toast b{ font-weight:600 }
.ot-dot{ width:7px; height:7px; border-radius:50%; background:#FF5F57; flex-shrink:0 }
.hero.offline .offline-toast{ opacity:1; visibility:visible; transform:translate(-50%,0) }

/* --------------------------------------------------------- bin interaction */
.stick-trash{ transition:transform .18s var(--ease) }
.stick-trash.armed{ transform:scale(1.18) rotate(-6deg) }
.stick.binned{ animation:bin-drop .45s var(--ease-soft) forwards; pointer-events:none }

/* ------------------------------------------------------------ desk windows
   These were drawn as System 7 panels — hard black borders, an offset shadow,
   a pinstriped title bar — while everything around them had moved on to the
   soft modern language: frosted tray menus, rounded icons, cream paper. They
   now match their surroundings: translucent, rounded, softly lit, with real
   traffic lights instead of a square close box. */
.deskwin{
  position:absolute; z-index:30;
  width:min(320px, 82vw);
  border-radius:14px;
  background:rgba(252,251,247,.94);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(5,12,15,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 44px -12px rgba(5,12,15,.30),
    0 4px 12px -4px rgba(5,12,15,.16);
  overflow:hidden;
  animation:dw-in .18s var(--ease);
}
.dw-bar{
  display:flex; align-items:center; gap:8px;
  height:34px; padding-inline:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
  border-bottom:1px solid rgba(5,12,15,.09);
  cursor:grab;
}
.dw-bar:active{ cursor:grabbing }
/* one live traffic light, plus two dimmed companions drawn in CSS */
.dw-close{
  position:relative; width:11px; height:11px; padding:0; line-height:0;
  border:0; border-radius:50%;
  background:#FF5F57; box-shadow:0 0 0 .5px rgba(0,0,0,.14) inset;
  font-size:0; color:transparent; flex-shrink:0; cursor:pointer;
  transition:filter .15s;
}
.dw-close::before, .dw-close::after{
  content:""; position:absolute; top:0;
  width:11px; height:11px; border-radius:50%;
  box-shadow:0 0 0 .5px rgba(0,0,0,.14) inset;
}
.dw-close::before{ left:16px; background:#FEBC2E }
.dw-close::after{  left:32px; background:#28C840 }
.dw-close:hover{ filter:brightness(.92) }
.dw-title{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:-.015em; color:var(--ink-2);
  margin-inline:auto; padding-right:40px;   /* balance the lights */
}
.dw-close:hover{ background:#000; color:#fff }
.dw-body p{ font-size:13.5px; line-height:1.55; color:var(--ink-2) }
.dw-body b{ color:var(--ink); font-weight:600 }
.dw-list{ display:grid; gap:9px }
.dw-list li{ display:grid; gap:1px }
.dw-list a{
  font-size:13.5px; font-weight:600; color:var(--tide-deep);
  text-decoration:underline; text-underline-offset:2px;
}
.dw-list span{ font-size:11.5px; color:var(--ink-3) }
.dw-mail a{ font-family:var(--mono); font-size:14px; color:var(--tide-deep) }
.dw-small{ font-size:11.5px !important; color:var(--ink-3) !important }
.dw-go:hover{ color:var(--tide-deep) }
@media (max-width:1000px){ .deskwin{ transform: scale(0.65); transform-origin: top center; }
}

/* --------------------------------------------- the rest of the missing set */

/* floating mac windows (vidwin) */
.vidwin{ display:grid; justify-items:center; gap:5px }
.vidwin .win{
  background:#fff; border:1.5px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.7);
  overflow:hidden;
}
.vidwin .bar{
  display:flex; align-items:center; gap:5px;
  height:16px; padding-inline:5px;
  background:repeating-linear-gradient(180deg,#000 0 1px,#fff 1px 2px);
  border-bottom:1.5px solid #000;
}
.vidwin .dots{ display:flex; gap:3px }
.vidwin .dots i{ width:8px; height:8px; background:#fff; border:1.4px solid #000; border-radius:0 }
.vidwin .dots .y,.vidwin .dots .g{ display:none }
.win-caption{
  font-family:var(--mono); font-size:9px; color:var(--ink-2);
  text-align:center;
}

/* a tiny notes window */
.mac-notes{
  width:150px; padding:10px 11px 12px;
  background:#FFF9DB; border:1px solid rgba(5,12,15,.18);
  box-shadow:var(--sh-2);
  font-size:11.5px; line-height:1.5; color:var(--ink-2);
}

/* a tiny terminal */
.mac-terminal{
  width:190px; padding:9px 10px 11px;
  background:#0B0F10; border-radius:7px;
  box-shadow:var(--sh-3);
  font-family:var(--mono); font-size:9.5px; line-height:1.6;
}
.t-prompt{ color:#7FE0A8 }
.t-cmd{ color:#EDEFEE }
.t-ok{ color:#8FCFD1 }

/* play/pause glyph swap in the music widget */
.mw-i-play,.mw-i-pause{ display:block }
.mw-i-play[hidden],.mw-i-pause[hidden]{ display:none }

/* ------------------------------------------------ what the windows contain */

/* Safari: a launcher list */
a.dw-site:hover{ background:rgba(5,12,15,.06) }
.dw-site.off{ opacity:.55 }
.ds-dot.live{ background:#37D67A; box-shadow:0 0 0 2px rgba(55,214,122,.22) }
.ds-txt{ display:grid; gap:1px; min-width:0 }
a.dw-site:hover .ds-go{ color:var(--tide) }

/* FaceTime: a booking form */
.dw-form{ display:grid; gap:9px }
.dw-form label{
  display:grid; gap:3px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.dw-form input, .dw-form select{
  font:inherit; font-size:13px; color:var(--ink);
  padding:8px 10px; border-radius:7px;
  border:1px solid rgba(5,12,15,.2); background:#fff;
  text-transform:none; letter-spacing:normal;
}
.dw-form input:focus, .dw-form select:focus{
  outline:none; border-color:var(--tide); box-shadow:0 0 0 3px rgba(10,95,105,.14);
}
.dw-submit{
  margin-top:3px; padding:10px 14px; border-radius:8px;
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:600;
  transition:background .18s, transform .12s;
}
.dw-submit:hover{ background:var(--tide-deep) }
.dw-submit:active{ transform:scale(.98) }

/* Folder: a file-manager listing */
.fm-bar{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  padding-bottom:8px; border-bottom:1px solid var(--line-2);
}
.fm-head, .fm-row{
  display:grid; grid-template-columns:1.5fr .8fr .7fr;
  gap:8px; align-items:center;
}
.fm-head{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4);
  padding:8px 6px 5px;
}
.fm-list{ display:grid; gap:1px }
.fm-row{
  padding:7px 6px; border-radius:6px;
  font-size:12px; color:var(--ink-3);
  transition:background .14s;
}
.fm-row:hover{ background:rgba(5,12,15,.06) }
.fm-n{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); font-weight:500 }
.fm-i{
  width:13px; height:16px; flex-shrink:0; border-radius:2px;
  border:1.4px solid var(--ink-3); background:#fff;
}
.fm-i.app{ border-radius:4px; background:var(--tide-wash); border-color:var(--tide) }
.fm-s{ font-family:var(--mono); font-size:9.5px; color:var(--ink-4) }
.fm-s.live{ color:#1D7A4E }

/* ------------------------------------------------- inside the desk windows */
.dw-body{ padding:14px 14px 15px; display:grid; gap:11px }
.dw-lead{ font-size:13px; line-height:1.55; color:var(--ink-2) }

/* the launcher list reads as rows in a menu, not as links on a page */
.dw-sites{ display:grid; gap:1px; margin:1px -6px -2px }
.dw-site{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px;
  transition:background .16s var(--ease);
}
a.dw-site:hover{ background:rgba(5,12,15,.055) }
a.dw-site:active{ background:rgba(5,12,15,.09) }
.dw-site.off{ opacity:.5 }

.ds-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ink-4);
}
.ds-dot.live{
  background:#37D67A;
  box-shadow:0 0 0 3px rgba(55,214,122,.18);
}
.ds-txt{ display:grid; gap:2px; min-width:0 }
.ds-txt b{
  font-size:12.5px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink); line-height:1.2;
}
.ds-txt i{
  font-style:normal; font-size:10.5px; color:var(--ink-3); line-height:1.25;
}
.ds-go{
  margin-left:auto; flex-shrink:0;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; color:var(--ink-4);
  background:transparent;
  transition:background .16s, color .16s, transform .16s var(--ease);
}
a.dw-site:hover .ds-go{
  background:var(--ink); color:#fff;
  transform:translate(1px,-1px);
}

/* the footer link at the bottom of a window */
.dw-go{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:3px; padding-top:11px;
  border-top:1px solid rgba(5,12,15,.09);
  font-size:12.5px; font-weight:600; color:var(--tide-deep);
  transition:gap .2s var(--ease);
}
.dw-go:hover{ gap:9px }

/* the file-manager header row, matched to the new window chrome */
.fm-path{ font-family:var(--mono); font-size:10px; color:var(--ink-2) }
.fm-count{ font-family:var(--mono); font-size:10px; color:var(--ink-4) }
.fm-i.doc{
  border-radius:2px; background:#fff;
  border:1.4px solid var(--ink-4);
  position:relative;
}
.fm-i.doc::after{
  content:""; position:absolute; top:-1.4px; right:-1.4px;
  width:5px; height:5px; background:var(--paper-3);
  border-left:1.4px solid var(--ink-4); border-bottom:1.4px solid var(--ink-4);
}

/* ------------------------------------------------------------- the popup */
.privpop{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(5,12,15,.38);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:pp-fade .18s var(--ease);
}
.pp-card{
  position:relative;
  width:min(420px, 100%);
  padding:30px 28px 24px;
  border-radius:20px;
  background:rgba(252,251,247,.97);
  border:1px solid rgba(5,12,15,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 70px -18px rgba(5,12,15,.44);
  text-align:center;
  animation:pp-pop .24s var(--ease);
}
.pp-close{
  position:absolute; top:12px; right:12px;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; padding:0;
  font-size:11px; color:var(--ink-3);
  transition:background .16s, color .16s;
}
.pp-close:hover{ background:rgba(5,12,15,.08); color:var(--ink) }
.pp-lock{ display:block; margin-bottom:12px; color:var(--ink-3) }
.pp-lock svg{ width:30px; height:30px; display:block }
.pp-title{
  font-family:var(--display); font-weight:700;
  font-size:1.5rem; letter-spacing:-.03em; line-height:1.15;
  color:var(--ink); margin-bottom:9px;
}
.pp-body{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-bottom:20px }
.pp-body b{ color:var(--ink); font-weight:600 }
.pp-actions{ display:grid; gap:10px; justify-items:center }
.pp-actions .btn-glass{ width:100% }
.pp-later{
  font-family:var(--mono); font-size:11px; color:var(--ink-4);
  padding:4px 8px; transition:color .16s;
}
.pp-later:hover{ color:var(--ink-2) }

@media (max-width:760px){
  .pp-card{ padding:26px 20px 20px }
  .pp-title{ font-size:1.3rem }
}

/* Phones and touch: the whole floating layer is a desktop metaphor. It is
   hidden here rather than only in the script, so a page whose script fails
   still cannot drop 58px icons into the document flow. */
@media (max-width:760px){ .stick-layer{ display:none !important } }
@media (hover: none){ .stick-layer{ display:none !important } }