/* ═══════════════════════════════════════════════════════════════════
   desktop.css — the OS shell.

   The whole page is the desktop; the menu bar across the top is the OS
   bar; page content lives in a browser window sitting on that desktop.
   Loaded after each page's own <style>, so the .os-shell class on <body>
   wins on specificity regardless of source order.

   Below 760px the metaphor is dropped entirely: the window chrome
   flattens, the desktop stops being a stage, and everything becomes a
   normal stacked page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The desktop surface ──────────────────────────────────────────── */
body.os-shell {
  background-color: #F3F1ED;
  background-image: radial-gradient(circle at 1px 1px, rgba(44, 31, 20, 0.05) 1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
}

/* ── Menu bar: clock ──────────────────────────────────────────────── */
.menubar-clock {
  margin-left: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Browser window ───────────────────────────────────────────────── */
.browser {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* Chrome sits in normal document flow, so on a long page it scrolls
   away and leaves the reading column unobstructed. */
.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  background: linear-gradient(#F7F5F2, #EFEDE9);
  border-bottom: 1px solid var(--color-border);
}

.browser-dots { display: flex; gap: 8px; flex: 0 0 auto; }
.browser-dots span { width: 12px; height: 12px; border-radius: 50%; display: block; }
.browser-dots span:nth-child(1) { background: #E8917F; }
.browser-dots span:nth-child(2) { background: #E8C87F; }
.browser-dots span:nth-child(3) { background: #9CC98A; }

.browser-nav { display: flex; gap: 2px; flex: 0 0 auto; }
.browser-nav button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0; border: none; background: none;
  border-radius: 6px;
  color: var(--color-text-tertiary);
  cursor: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.browser-nav button:hover { background: rgba(44, 31, 20, 0.06); color: var(--color-text-secondary); }
.browser-nav button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.browser-nav svg { width: 15px; height: 15px; display: block; }

/* Display-only: no text cursor, no focus ring, nothing that invites a
   click it can't honour. */
.browser-address {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
}
.browser-address svg { width: 10px; height: 10px; flex: 0 0 auto; color: var(--color-text-tertiary); }
.browser-address b { font-weight: var(--weight-regular); color: var(--color-text-primary); }

.browser-body { position: relative; }

/* ── Home: the small window floating on the desktop ───────────────── */
/* Now a direct flex child of .desktop, so it needs its own width — it used
   to inherit one from the .os-window wrapper that no longer exists. The
   dotted surface itself is full-bleed on <body>; this just keeps the folder
   composition from flying apart on an ultrawide monitor. */
body.os-shell .desktop-stage {
  position: relative;
  background: none;
  width: 100%;
  max-width: 1180px;
  margin: auto;
  height: clamp(520px, calc(100vh - 168px), 700px);
}

.browser--float {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  width: 268px;
  z-index: 5;
}
.browser--float .browser-body { padding: 14px 14px 6px; text-align: center; }
.browser--float .dk-name a { font-size: 17px; }

/* the polaroid, now living inside the window instead of floating loose */
.browser--float .dk-portrait {
  position: static;
  transform: rotate(-1.5deg);
  width: 100%;
  margin: 0 auto;
}
/* the little pixel arrow, resting against the window's corner */
.browser--float .dk-cursor {
  position: absolute;
  left: auto; top: auto;
  right: -10px; bottom: -14px;
  z-index: 6;
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile — below 760px the desktop metaphor is dropped. No stage, no
   floating window, no absolute positioning: just a normal page.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  body.os-shell {
    background-color: var(--color-bg);
    background-image: none;
  }

  .browser {
    max-width: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }
  .browser-bar { height: 38px; padding: 0 12px; gap: 10px; }
  .browser-nav { display: none; }
  .browser-address { height: 24px; font-size: 11px; }


  /* .page carries 64px of side padding, which on a 375px phone left the
     folder area only 223px wide — 89px per column, so every long label
     wrapped. Claw that back on the desktop home only. */
  body.os-shell main.page:has(.desktop) {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  body.os-shell .desktop { padding-left: 4px; padding-right: 4px; }

  /* Folders sit exactly 2 to a row. The previous flex-wrap happened to give
     two on a 375px phone, but spilled to three on wider handsets — a grid
     pins it regardless of screen width. Portrait and greeting span the row. */
  body.os-shell .desktop-stage {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    gap: 28px 12px;
    padding: 28px 16px 52px;
  }
  body.os-shell .dk-portrait,
  body.os-shell .dk-caption { grid-column: 1 / -1; }
  /* Let the label use the whole column — at 134px, names like
     "style_minimalist" overflowed and collided with the folder beside it. */
  body.os-shell .folder { width: 100%; max-width: none; }
  body.os-shell .folder-label {
    width: 100%;            /* without this the flex item shrinks to min-content */
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: break-word;  /* not "anywhere" — that broke style_minimali/st */
  }

  /* the floating window becomes an ordinary card at the top of the page */
  .browser--float {
    position: static;
    transform: none;
    flex-basis: 100%;   /* forces its own row */
    max-width: 258px;   /* ...but only this wide, centred by the auto margins */
    margin: 0 auto 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
  }
  .browser--float .browser-bar { height: 34px; }
  .browser--float .dk-cursor { display: none; }
}

@media (max-width: 620px) {
  .menubar-clock { display: none; }
  /* The bar ran out of room: the logo wrapped to two lines and the CTA fell
     off the right edge. "Say hello" and "Contact" both point at contact.html,
     so dropping the duplicate CTA costs nothing and buys back the space. */
  .menubar { padding: 0 14px; }
  .menubar-inner { gap: 15px; }
  .menubar-logo { white-space: nowrap; }
  .menubar-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .browser-nav button { transition: none; }
}

/* ── Sub-nav on small screens ──────────────────────────────────────
   Every page's in-page nav shares id="page-nav" (the class differs:
   .page-nav on About/Personal, .inpage-nav on the case studies). With
   six pills — Overview, Problem, Constraints, Process, Solution, Impact
   — it ran off both edges of a phone. Cap it to the viewport and let it
   scroll sideways instead, so every section stays reachable.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.os-shell #page-nav {
    max-width: calc(100vw - 20px);
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.os-shell #page-nav::-webkit-scrollbar { display: none; }
  body.os-shell #page-nav > * { flex: 0 0 auto; }
  /* Tighter spacing fits more pills before scrolling kicks in; the partly
     visible next pill is what signals the strip scrolls. */
  body.os-shell #page-nav { gap: 4px; padding: 4px 6px; }
  body.os-shell #page-nav .page-nav-link { font-size: 12px; padding: 5px 10px; }
}
