/* =======================================================
   Pollygon — Pink Windows 7 Portfolio
   7.css for controls + WinBox for windowing, re-skinned pink
   ======================================================= */

:root {
  /* Pollygon.dev brand palette — pastel pink, periwinkle, lavender,
     with a dusty-purple outline (matches the logo). */
  --pink-1: #fde4ef;   /* palest pink */
  --pink-2: #f6bcd6;   /* soft pink */
  --pink-3: #eca0c5;   /* mid pink */
  --pink-4: #c882ac;   /* deep rosy mauve accent */
  --pink-deep: #6b4f7d;/* deep purple (headings / strong text) */

  --blue-1: #e6edfc;   /* palest periwinkle */
  --blue-2: #c6d5f1;   /* periwinkle */
  --lavender: #cbb6dd; /* lavender */

  --outline: #7c5f8f;  /* signature dusty-purple outline */
  --outline-deep: #5f4770;

  --glass: rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, sans-serif;
  user-select: none;
}

/* ---------- Desktop / wallpaper ---------- */
#desktop {
  position: fixed;
  inset: 0 0 40px 0;              /* leave room for taskbar */
  background:
    radial-gradient(1200px 600px at 18% 8%, #ffeaf4 0%, transparent 60%),
    radial-gradient(900px 520px at 50% 62%, #fff3fb 0%, transparent 60%),  /* horizon glow */
    radial-gradient(1000px 700px at 88% 96%, #dbe6fb 0%, transparent 55%),
    linear-gradient(160deg, #f7c3dc 0%, #dcc2e8 46%, #c3d3ef 100%);
  overflow: hidden;
}

/* Retro perspective checkerboard floor (pastel), receding to a horizon.
   Perspective is baked into the transform so #desktop keeps a flat stacking
   context for the WinBox windows. */
#desktop {
  --grid:
    linear-gradient(45deg, #c6afdb 25%, transparent 25%, transparent 75%, #c6afdb 75%, #c6afdb),
    linear-gradient(45deg, #c6afdb 25%, #fbdcec 25%, #fbdcec 75%, #c6afdb 75%, #c6afdb);
  --gsize: 56px 56px;
  --gpos: 0 0, 28px 28px;
}
#desktop::before {
  content: "";
  position: absolute;
  left: -40%; right: -40%;
  bottom: 0;
  height: 68%;
  background-image: var(--grid);
  background-size: var(--gsize);
  background-position: var(--gpos);
  transform: perspective(620px) rotateX(72deg);
  transform-origin: bottom center;
  /* dissolve the far edge into the sky */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 45%, transparent 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 45%, transparent 85%);
  opacity: .68;
  pointer-events: none;
  z-index: 0;
}
/* soft glow along the horizon line */
#desktop::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 34%;
  height: 120px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,222,244,.75), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Desktop icons ---------- */
#icons {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 6px;
  height: 100%;
  align-content: flex-start;
  position: relative;
  z-index: 1;
}
.desk-icon {
  width: 88px;
  padding: 8px 4px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(58,40,72,.85), 0 0 8px rgba(58,40,72,.5);
}
.desk-icon:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.desk-icon:focus { background: rgba(255,255,255,.28); border-color: #fff; outline: none; }
.desk-icon .icon { display: block; line-height: 1; }
.desk-icon .icon .bx {
  font-size: 44px;
  color: #fff;
  filter: drop-shadow(0 2px 2px rgba(58,40,72,.7));
}
.desk-icon:hover .icon .bx { filter: drop-shadow(0 2px 4px rgba(58,40,72,.8)) brightness(1.05); }

/* Aero gloss on the glyphs: a light top half, a hard shine break at the
   midpoint, and a touch of bounce light at the bottom — the three moves
   that make a Windows 7 icon look like moulded plastic. Painted through
   the glyph with background-clip, so it degrades to plain white if the
   browser can't do it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* Boxicons draws the glyph in ::before, so the gradient has to be painted
     on the pseudo-element — the <i> itself holds no text to clip against. */
  .desk-icon .icon .bx::before {
    background: linear-gradient(180deg,
      #ffffff 0%,
      #ffe9f5 44%,
      #f3b3d7 46%,
      #cf7fb4 80%,
      #eaa9d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* the dark rim keeps the glyph off the wallpaper now that it isn't solid white */
  .desk-icon .icon .bx {
    filter:
      drop-shadow(0 1px 0 rgba(92,56,106,.45))
      drop-shadow(0 2px 3px rgba(58,40,72,.6));
  }
  /* .desk-icon's text-shadow (meant for the label) is inherited by the glyph and
     paints ON TOP of a background-clip:text fill, hiding it. The drop-shadow
     above does the icon's shadow instead. */
  .desk-icon .icon,
  .desk-icon .icon .bx,
  .desk-icon .icon .bx::before { text-shadow: none; }
  .desk-icon:hover .icon .bx::before,
  .desk-icon:focus .icon .bx::before {
    background: linear-gradient(180deg,
      #ffffff 0%,
      #fff5fb 46%,
      #f9c9e4 48%,
      #dc93c2 80%,
      #f5bcdd 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .desk-icon:hover .icon .bx,
  .desk-icon:focus .icon .bx {
    filter:
      drop-shadow(0 1px 0 rgba(92,56,106,.45))
      drop-shadow(0 2px 5px rgba(58,40,72,.65));
  }
}
.desk-icon .label { font-size: 12px; display: block; margin-top: 4px; }

/* ---------- Brand logo (top-right of the desktop) ---------- */
#site-logo {
  position: absolute;
  top: 22px; right: 30px;
  width: 340px; max-width: 40vw; height: auto;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 6px 14px rgba(90,50,100,.35));
  opacity: .96; z-index: 0;
}

/* ---------- Welcome window ---------- */
.welcome-pad { padding: 16px 20px; }
.welcome-logo { text-align: center; margin-bottom: 6px; }
.welcome-logo img { width: 240px; max-width: 80%; height: auto; filter: drop-shadow(0 3px 6px rgba(90,50,100,.25)); }
.welcome-lead { margin: 0 0 12px; color: #4a3a54; }
.welcome-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* The text sits in its own <span>: a bare text run and each <b> would
   otherwise become separate flex items and wrap in separate columns. */
.welcome-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #4a3a54; }
.welcome-list li > span { min-width: 0; line-height: 1.45; }
/* the drag tip only applies where windows can actually be dragged */
.welcome-list .tip-touch { display: none; }
.welcome-list .bx { font-size: 18px; color: var(--pink-4); flex: 0 0 auto; margin-top: 1px; }
.welcome-note {
  background: linear-gradient(135deg, #fff, #f6edf8);
  border: 1px solid var(--lavender); border-left: 3px solid var(--pink-3);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--outline-deep);
}
.welcome-note a { color: #b56aa0; font-weight: 700; text-decoration: none; }
.welcome-note a:hover { text-decoration: underline; }

/* ---------- Taskbar (Windows 7 Aero, pink glass) ---------- */
#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  /* Aero glass: bright top gloss, lighter upper half, darker lower half */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.22) 3%,
      rgba(240,214,232,.42) 4%,
      rgba(214,180,210,.42) 49%,
      rgba(150,112,162,.50) 50%,
      rgba(126,94,143,.55) 100%),
    linear-gradient(180deg, #d9bcd8, #9d76ac);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  border-top: 1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 -2px 10px rgba(80,50,95,.35);
  overflow: visible;            /* let the Start orb bulge above the bar */
  z-index: 10001;               /* above the Start menu so the orb overlays it */
}

/* Round, raised Start orb (Win7 pearl) */
#start-btn {
  position: relative;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  min-width: 0;                 /* 7.css sets min-width:75px on <button> */
  margin: -13px 4px 0 3px;      /* bulge above the taskbar */
  padding: 0;
  font-size: 0;                 /* hide the "Start" text node */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;             /* strip native button chrome (square hover) */
  -webkit-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 50% 32%,
      #ffffff 0%, #f6cfe6 14%, #de9dc9 42%, #b06aa0 70%, #7c4f86 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55),
    0 0 0 3px rgba(120,80,135,.55),
    0 3px 8px rgba(60,35,75,.5),
    inset 0 2px 5px rgba(255,255,255,.8),
    inset 0 -6px 10px rgba(110,70,125,.55);
}
/* 7.css gives <button> rectangular ::before/::after overlays that fade in on
   hover/active — on the round orb they show through the corners as a SQUARE.
   Kill the ::before, and repurpose ::after as the glossy pearl highlight. */
#start-btn::before { content: none !important; }
#start-btn::after {          /* glossy top highlight on the pearl */
  content: "" !important;
  position: absolute;
  left: 18%; right: 18%; top: 12%;
  height: 34%;
  width: auto;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 2;
  pointer-events: none;
}
#start-btn:hover  { filter: brightness(1.08) saturate(1.1); }
#start-btn:active { filter: brightness(.96); }
#start-btn .orb { display: grid; place-items: center; width: 100%; height: 100%; }
#start-btn .orb .bx {
  font-size: 26px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(90,55,105,.7));
}

/* Program buttons — square, icon-only, glass "gel" like Win7 */
#task-buttons { flex: 1; display: flex; align-items: center; gap: 3px; overflow: hidden; padding-left: 2px; height: 100%; }
.task-btn {
  height: 36px;
  width: 52px;
  min-width: 0;                 /* 7.css sets min-width:75px on <button> */
  margin: 1px 0;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.task-btn::before, .task-btn::after { content: none !important; }  /* drop 7.css button overlays */
.task-btn .bx { font-size: 24px; color: #fff; filter: drop-shadow(0 1px 1px rgba(70,45,85,.6)); }
.task-btn span { display: grid; place-items: center; font-size: 0; }   /* icon only */
/* running app: subtle raised glass frame */
.task-btn {
  border-color: rgba(255,255,255,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.06) 50%, rgba(255,255,255,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.12);
}
.task-btn:hover {
  border-color: rgba(255,255,255,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.18) 50%, rgba(255,255,255,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 8px rgba(255,224,244,.5);
}
/* focused window: pressed / brighter gel + colored underglow */
.task-btn.active {
  border-color: rgba(255,255,255,.7);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(246,188,214,.35) 50%, rgba(255,255,255,.4));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 10px rgba(255,255,255,.5),
    inset 0 -3px 8px rgba(180,120,190,.5);
}

/* System tray — glass, with a divider from the app area */
#tray {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 12px;
  height: 100%;
  color: #fff;
  font-size: 12px;
  border-left: 1px solid rgba(255,255,255,.35);
  box-shadow: -1px 0 0 rgba(90,55,105,.25);
  text-shadow: 0 1px 1px rgba(70,45,85,.5);
}
#tray .bx { filter: drop-shadow(0 1px 1px rgba(70,45,85,.5)); }
#clock {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
}
#clock .date { font-size: 11px; opacity: .95; }

/* ---------- Start menu (Windows 7, pink Aero) ---------- */
#start-menu {
  position: fixed;
  left: 4px; bottom: 41px;
  width: 402px; display: flex;
  border-radius: 6px 6px 5px 5px;
  border: 1px solid rgba(160,110,165,.7);
  box-shadow: 0 12px 44px rgba(80,40,90,.5), inset 0 0 0 1px rgba(255,255,255,.6);
  background: linear-gradient(180deg, rgba(255,246,251,.97), rgba(243,224,240,.96));
  backdrop-filter: blur(14px) saturate(1.2);
  z-index: 10000;
  overflow: hidden;
}
/* the `hidden` attribute must win over the id's display:flex */
#start-menu[hidden] { display: none; }
/* LEFT — pinned programs (white) */
.sm-left {
  width: 244px; flex: 0 0 244px;
  background: rgba(255,255,255,.92);
  border-right: 1px solid #e6cfe4;
  display: flex; flex-direction: column;
  padding: 6px 6px 0;
}
.sm-programs { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.sm-programs li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.sm-programs li:hover {
  background: linear-gradient(180deg, #fdeaf5, #f6d3e8);
  border-color: #ecbcda; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.sm-ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 5px;
  display: grid; place-items: center;
  /* glossy Aero tile: bright top half, shine break, soft lower bounce */
  background: linear-gradient(180deg, #ffffff, #fdeaf5 45%, #f5cde6 46%, #fadff0);
  border: 1px solid #ecc9df;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(120,80,110,.18);
}
.sm-ico .bx { font-size: 19px; color: #b06ab3; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sm-ico .bx::before {
    background: linear-gradient(180deg, #d194d6, #b06ab3 45%, #92509e 46%, #b268b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sm-ico .bx { filter: drop-shadow(0 1px 0 rgba(255,255,255,.65)); }
}
.sm-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sm-txt b { font-size: 13px; font-weight: 600; color: #33223f; }
.sm-txt small { font-size: 11px; color: #9a86a8; }
.sm-allprograms {
  display: flex; align-items: center; gap: 6px;
  margin: 4px -6px 0; padding: 8px 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #33223f;
  border-top: 1px solid #e6cfe4;
}
.sm-allprograms:hover { background: linear-gradient(180deg, #fdeaf5, #f6d3e8); }
.sm-allprograms .bx { font-size: 13px; color: #b06ab3; }
.sm-search { margin: 0 -6px; padding: 8px 10px; border-top: 1px solid #cdb6dd; width: auto; }
.sm-search input { width: 100%; min-width: 0; height: 24px; font-size: 12px; font-family: inherit; box-sizing: border-box; }

/* RIGHT — user + places (pink glass) */
.sm-right {
  width: 158px; flex: 0 0 158px;
  display: flex; flex-direction: column;
  padding: 14px 0 10px;
  background: linear-gradient(180deg, rgba(233,205,232,.6), rgba(214,180,214,.55));
  color: #4a2b48;
}
.sm-avatar {
  width: 54px; height: 54px; margin: 0 auto 4px; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden; font-size: 28px;
  background: linear-gradient(135deg, var(--pink-2), var(--blue-2));
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(90,50,100,.35);
}
.sm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sm-avatar .bx { color: #fff; }
.sm-username {
  text-align: center; font-weight: 700; font-size: 14px; color: #6b2f63;
  margin-bottom: 10px; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.sm-places { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.sm-places li { padding: 6px 14px; font-size: 12.5px; color: #4a2b48; cursor: pointer; }
.sm-places li:hover { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28)); }
.sm-places li.sm-gap { height: 8px; padding: 0; border-top: 1px solid rgba(150,90,140,.3); margin: 6px 10px; cursor: default; }
.sm-places li.sm-gap:hover { background: none; }
.sm-places a { color: #4a2b48; text-decoration: none; display: block; }
.sm-shutdown { padding: 8px 12px 0; }
#shutdown {
  width: 100%; min-width: 0; cursor: pointer; padding: 6px 10px; font-size: 12.5px;
  font-family: inherit; color: #43273f; border: 1px solid #c48fbb; border-radius: 4px;
  background: linear-gradient(180deg, #ffffff, #f7dcee 48%, #eebbdd 50%, #f5d3ea);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#shutdown::before, #shutdown::after { content: none !important; }
#shutdown:hover { filter: brightness(1.05); }

/* =======================================================
   WinBox + 7.css marriage
   ---------------------------------------------------------
   WinBox is used ONLY as the drag / resize / stacking engine.
   Its native chrome is hidden, and a REAL 7.css `.window`
   (title-bar, title-bar-controls, window-body, status-bar)
   is mounted inside as the actual, visible window.
   ======================================================= */
.winbox.seven {
  background: transparent;      /* let the 7.css window show through */
  box-shadow: none;
}
/* hide WinBox's own header + body chrome */
.winbox.seven .wb-header { display: none; }
.winbox.seven .wb-body {
  top: 0;                       /* no header offset */
  inset: 0;
  background: transparent;
  overflow: visible;
}

/* the genuine 7.css window fills the WinBox body */
.winbox.seven .wb-body > .window {
  height: 100%;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 46px rgba(120, 10, 70, .45);
}
.winbox.seven .wb-body > .window > .window-body {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0;                    /* window-body handles its own spacing */
  min-height: 0;
}
/* Explorer windows: make the body a flex column so the explorer fills the
   full height (percentage heights don't resolve against a flex-sized body,
   which left empty space when maximized). */
.winbox.seven .wb-body > .window > .window-body:has(:is(.explorer, .about7, .resume-pad, .project-detail)) {
  display: flex; flex-direction: column; overflow: hidden;
}
/* the cloned template <section> wraps the layout — make it pass the
   flex height through so the layout fills the body. (Project-detail windows
   mount the node directly, so this only matters for the wrapped ones.) */
.winbox.seven .wb-body > .window > .window-body:has(:is(.explorer, .about7, .resume-pad)) > section {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.winbox.seven .wb-body > .window > .status-bar { flex: 0 0 auto; }

/* The pink look is produced the DOCUMENTED way: by redefining 7.css's
   own --w7-w-bg (title bar / frame) and --w7-surface (body) variables
   on each .window element in JS. No title-bar re-skin here — 7.css draws
   the Aero gradient itself, just tinted pink. */
.winbox.seven .title-bar-text { font-weight: 600; }

/* Move cursor over the draggable title bar (but not over the controls). */
.winbox.seven .title-bar { cursor: move; }
.winbox.seven .title-bar-controls,
.winbox.seven .title-bar-controls button { cursor: default; }

/* --- Drag performance ---
   7.css anchors the title-bar's Aero glass with `background-attachment:
   fixed`, which forces a full-viewport repaint on every move and makes
   dragging crawl. Pin the glass to the element instead (visually near
   identical, hugely cheaper), and hint the compositor. */
.winbox.seven .title-bar { background-attachment: scroll !important; }

/* While dragging: WinBox transitions left/top over 0.3s, which makes a
   drag EASE toward the cursor (laggy, and it keeps gliding after release).
   Kill that transition during the drag so the window snaps to the pointer.
   Also freeze pointer events inside the body so hover/repaint work doesn't
   compete with the move. */
.winbox.seven.wb-moving {
  transition: none !important;
  will-change: left, top;
}
.winbox.seven.wb-moving .wb-body { pointer-events: none; }

/* keep the WinBox resize handles usable over the 7.css frame */
.winbox.seven .wb-n,
.winbox.seven .wb-e,
.winbox.seven .wb-s,
.winbox.seven .wb-w,
.winbox.seven .wb-nw,
.winbox.seven .wb-ne,
.winbox.seven .wb-se,
.winbox.seven .wb-sw { z-index: 2; }

/* =======================================================
   Pink Windows-7-style scrollbars (akin to 7.css)
   ======================================================= */
.winbox.seven ::-webkit-scrollbar { width: 17px; height: 17px; }
.winbox.seven ::-webkit-scrollbar-track { background: linear-gradient(to right, #e7d8ef, #f8f2fb 22%); }
.winbox.seven ::-webkit-scrollbar-track:horizontal { background: linear-gradient(to bottom, #e7d8ef, #f8f2fb 22%); }
.winbox.seven ::-webkit-scrollbar-corner { background: #f1e7f7; }
.winbox.seven ::-webkit-scrollbar-thumb {
  border: 1px solid #cf85b3; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  background: linear-gradient(to right, #fbe4f2 44%, #edaad1 44%, #dd86b3);
}
.winbox.seven ::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(to bottom, #fbe4f2 44%, #edaad1 44%, #dd86b3);
}
.winbox.seven ::-webkit-scrollbar-thumb:hover { filter: brightness(1.05); }
.winbox.seven ::-webkit-scrollbar-thumb:active { filter: brightness(.95); }
/* arrow buttons at the ends */
.winbox.seven ::-webkit-scrollbar-button {
  background: linear-gradient(#fdf6fc, #eedbee); border: 1px solid #ddc9ec;
  background-repeat: no-repeat; background-position: center;
}
.winbox.seven ::-webkit-scrollbar-button:hover { background: linear-gradient(#fff, #f8e9f6); }
.winbox.seven ::-webkit-scrollbar-button:vertical:single-button:decrement {
  height: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M4.5 2 8 7 1 7z' fill='%237c5f8f'/></svg>");
}
.winbox.seven ::-webkit-scrollbar-button:vertical:single-button:increment {
  height: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M1 2 8 2 4.5 7z' fill='%237c5f8f'/></svg>");
}
.winbox.seven ::-webkit-scrollbar-button:horizontal:single-button:decrement {
  width: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M2 4.5 7 1 7 8z' fill='%237c5f8f'/></svg>");
}
.winbox.seven ::-webkit-scrollbar-button:horizontal:single-button:increment {
  width: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M7 4.5 2 1 2 8z' fill='%237c5f8f'/></svg>");
}
.winbox.seven ::-webkit-scrollbar-button:vertical:double-button,
.winbox.seven ::-webkit-scrollbar-button:horizontal:double-button { display: none; }

/* =======================================================
   Window content
   ======================================================= */
.win-pad { padding: 14px 16px; font-size: 13px; color: #333; line-height: 1.5; }
.win-pad h1 { margin: 0 0 2px; font-size: 20px; color: var(--pink-deep); }
.win-pad h2 { margin: 0 0 8px; color: var(--pink-deep); }
.win-pad h3 { margin: 0 0 4px; color: var(--outline-deep); }

.btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* =======================================================
   About window — sidebar + sections (from the old About.app),
   styled to the pink 7.css aesthetic
   ======================================================= */
.about7 {
  display: flex; height: 100%; flex: 1 1 auto; min-height: 0;
  background: #fff;
}
/* left nav */
.about7 .ab7-nav {
  width: 150px; flex: 0 0 150px; overflow: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 12px 8px;
  background: linear-gradient(180deg, #fdfafd, #f5edf8);
  border-right: 1px solid #e4d5ee;
}
.about7 .ab7-navlink {
  text-align: left; border: 1px solid transparent; border-radius: 4px;
  background: transparent; cursor: pointer; font-family: inherit;
  padding: 7px 10px; font-size: 13px; color: var(--outline-deep);
  min-width: 0; min-height: 0; box-shadow: none;
}
.about7 .ab7-navlink::before, .about7 .ab7-navlink::after { content: none !important; }
.about7 .ab7-navlink:hover { background: var(--w7-li-bg-hl, #f6e6f1); border-color: #e6c6de; }
.about7 .ab7-navlink.active {
  background: linear-gradient(#fbe6f2, #f0cbe4); border-color: #e2acce;
  font-weight: 600; color: var(--pink-deep);
}

/* content */
.about7 { --w7-li-bg-hl: linear-gradient(#ffffffdd, #f4d4e8cc 90%, #ffffffe6); }
.ab7-content {
  flex: 1 1 auto; min-width: 0; overflow: auto; padding: 18px 22px;
  background: var(--w7-surface, #fbf4fb); color: #3a2b46; font-size: 13px; line-height: 1.55;
}
.ab7-profile { margin-bottom: 14px; }
.ab7-avatar {
  width: 66px; height: 66px; border-radius: 14px;
  display: grid; place-items: center; font-size: 38px; overflow: hidden;
  background: linear-gradient(135deg, var(--pink-2), var(--blue-2));
  border: 2px solid #fff; box-shadow: 0 4px 12px rgba(124,95,143,.22);
  margin-bottom: 10px;
}
.ab7-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab7-profile h1 { margin: 0; font-size: 26px; color: var(--pink-deep); letter-spacing: .5px; }
.ab7-role { margin: 2px 0 10px; color: #b56aa0; font-weight: 600; font-size: 13px; }
.ab7-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ab7-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 6px; text-decoration: none;
  background: linear-gradient(#fff, #f7ecf6); border: 1px solid var(--lavender);
  color: var(--outline-deep); font-weight: 600; font-size: 12.5px;
}
.ab7-link:hover { background: #fff; border-color: var(--pink-3); }
.ab7-link .bx { font-size: 15px; color: var(--pink-4); }
.ab7-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ab7-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 12px; font-size: 11.5px;
  background: var(--pink-1); color: var(--outline-deep); border: 1px solid var(--pink-2);
}
.ab7-badge .bx { font-size: 13px; color: var(--pink-4); }

.ab7-section { padding: 16px 0 24px; }
.ab7-section + .ab7-section { border-top: 1px solid var(--lavender); }
.ab7-section .btn-row { margin-top: 18px; }
.ab7-section h2 { margin: 4px 0 10px; font-size: 16px; color: var(--pink-deep); }
.ab7-section p { margin: 0 0 10px; }
.ab7-study {
  padding: 12px 14px; border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f6edf8); border: 1px solid var(--lavender);
}
.ab7-study-name { font-weight: 700; color: var(--pink-deep); }
.ab7-study-sub { font-size: 12.5px; color: var(--outline); margin-top: 2px; }
.ab7-toolkit { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab7-toolkit li {
  padding: 6px 12px; border-radius: 14px; font-size: 12.5px; font-weight: 600;
  background: linear-gradient(135deg, var(--pink-1), var(--blue-1));
  border: 1px solid var(--lavender); color: var(--outline-deep);
}

/* =======================================================
   Windows 7 Explorer layout (Projects + Gallery)
   ======================================================= */
.explorer {
  display: flex; flex-direction: column; height: 100%;
  flex: 1 1 auto; min-height: 0;   /* fill the flex-column window-body */
  background: #fff; font-size: 12px; color: #3a2b46;
  font-family: "Segoe UI", Tahoma, sans-serif;
  /* Re-tint 7.css's list selection variables to pink so the tree
     highlight follows the theme (defaults are light blue #aaddfa). */
  --w7-li-bg-hl: linear-gradient(#ffffffdd, #f4d4e8cc 90%, #ffffffe6);
  --w7-li-bd-hl: #e2acce;
}
/* 7.css sets min-width:75px + hover pseudo-overlays on every <button>;
   neutralise both so Explorer buttons size to content and don't flash. */
.explorer button { min-width: 0; min-height: 0; box-shadow: none; }
.explorer button::before, .explorer button::after { content: none !important; }

/* ── address bar ── */
.ex-addressbar {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  background: linear-gradient(#fdf8fc, #f1e7f7);
  border-bottom: 1px solid #ddccea;
}
.ex-nav-btns { display: flex; align-items: center; gap: 5px; }
.ex-nav-btns button {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid #bd6c9d;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 26%, #ffe9f6 0%, #f2aad2 46%, #cf6fa6 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -2px 3px rgba(150,60,105,.35), 0 1px 2px rgba(120,50,90,.3);
}
.ex-nav-btns .bx {
  font-size: 20px; color: #fff; line-height: 1;
  filter: drop-shadow(0 -1px 1px rgba(120,30,70,.45));
}
.ex-nav-btns button:hover { filter: brightness(1.07); }
.ex-nav-btns .ex-fwd { filter: grayscale(.85) opacity(.5); cursor: default; }
.ex-crumb {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px;
  height: 24px; padding: 0 8px; border: 1px solid #cbb1dd; border-radius: 3px;
  background: #fff; color: #3a2b46; overflow: hidden; white-space: nowrap;
  box-shadow: inset 0 1px 1px rgba(90,50,110,.05);
}
.ex-crumb > .bx { color: #e6a53c; font-size: 15px; margin-right: 2px; }  /* amber folder (Win7) */
.ex-crumb .seg { padding: 1px 4px; border-radius: 2px; }
.ex-crumb .seg:hover { background: #f6e6f1; }
.ex-crumb .sep { color: #b192c6; font-size: 9px; }
/* 7.css .searchbox component, sized to fit the address bar */
.ex-search { width: 150px; flex: 0 0 auto; }
.ex-search input {
  width: 100%; min-width: 0;   /* inputs default to ~187px intrinsic min-width */
  height: 24px; font-size: 12px; font-family: inherit; box-sizing: border-box;
}

/* ── command bar ── */
.ex-toolbar {
  display: flex; align-items: center; gap: 1px; padding: 3px 6px;
  background: linear-gradient(#fdfaff, #f2eaf8);
  border-bottom: 1px solid #e1d2ec;
}
.ex-toolbar button {
  border: 1px solid transparent; background: transparent; padding: 4px 9px;
  border-radius: 3px; font-size: 12px; color: var(--outline-deep); cursor: pointer; font-family: inherit;
}
.ex-toolbar button:hover { background: linear-gradient(#fbeaf5, #f2d6e9); border-color: #e7bcd9; }
.ex-toolbar .spacer { flex: 1; }

/* ── split panes ── */
.ex-main { flex: 1 1 auto; display: flex; min-height: 0; }

/* nav pane — light tree */
.ex-nav {
  width: 160px; flex: 0 0 160px; overflow: auto; padding: 6px 0 12px;
  background: linear-gradient(90deg, #fdfafd, #f6eff9);
  border-right: 1px solid #e4d5ee;
}
.ex-nav .nav-head {
  display: flex; align-items: center; gap: 5px; padding: 5px 8px 4px 6px;
  color: var(--outline); font-weight: 700;
}
.ex-nav .nav-head .tri { color: #a68ab8; font-size: 9px; width: 9px; text-align: center; }
.ex-nav .nav-head .bx { font-size: 15px; }
.ex-nav .nav-link {
  display: flex; align-items: center; gap: 7px; margin: 1px 5px;
  padding: 4px 8px 4px 26px; cursor: pointer; color: #4a3a54;
  border: 1px solid transparent; border-radius: 3px; white-space: nowrap;
}
.ex-nav .nav-link .bx { font-size: 15px; color: #b06ab3; }
.ex-nav .nav-link:hover { background: var(--w7-li-bg-hl); border-color: var(--w7-li-bd-hl); }
.ex-nav .nav-link.active {
  background: linear-gradient(#fbe6f2, #f0cbe4); border-color: #e2acce;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* content pane */
.ex-content { flex: 1 1 auto; overflow: auto; padding: 12px 16px; background: linear-gradient(180deg, #fdf7fb, #fbf2f8); }
.ex-group-hdr {
  display: flex; align-items: center; gap: 8px;
  color: var(--pink-deep); font-size: 13px; font-weight: 400; margin: 2px 0 14px;
}
.ex-group-hdr::before { content: "▾"; color: #b58fc0; font-size: 10px; }
.ex-group-hdr::after { content: ""; flex: 1; height: 0; border-top: 1px solid #e6d6ee; }
.ex-content .project-grid { padding: 0; }
.ex-content .gallery-grid { margin-top: 0; }

/* details pane (bottom, like Win7) */
.ex-details {
  flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  background: linear-gradient(#f7eef9, #e9def1); border-top: 1px solid #dac7e8; color: var(--outline-deep);
}
.ex-details .ex-dico {
  width: 36px; height: 36px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, #eba7cd, #b9c8ee);
  border: 1px solid #fff; box-shadow: 0 1px 3px rgba(80,60,110,.25);
}
.ex-details .ex-dinfo b { font-size: 12.5px; color: #43304f; }
.ex-details .ex-dinfo div { font-size: 11px; color: #7a6a86; margin-top: 1px; }

/* Projects */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px;
}
.project-card {
  position: relative; overflow: hidden;
  border: 1px solid #d99ec4;
  border-radius: 7px;
  padding: 12px 10px;
  /* Aero gel: bright top, reflection line at the midpoint, darker lower half */
  background: linear-gradient(180deg, #ffffff 0%, #fde6f3 46%, #f5cfe7 47%, #fbe1f2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 2px 5px rgba(150,80,130,.18);
  text-align: center; cursor: pointer;
  transition: filter .12s, box-shadow .12s, transform .12s, border-color .12s;
}
/* top-half gloss sheen */
.project-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.12));
  pointer-events: none; z-index: 0;
}
.project-card > * { position: relative; z-index: 1; }
.project-card:hover, .project-card:focus {
  border-color: var(--pink-4); outline: none; filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 7px 15px rgba(160,80,130,.3);
  transform: translateY(-2px);
}
.project-card .thumb {
  position: relative; overflow: hidden;
  font-size: 34px;
  height: 62px; display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f4d8ec 48%, #e9c2e0 50%, #f6ddf0 100%);
  border: 1px solid #e2abd2; border-radius: 6px; margin-bottom: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.project-card p {
  font-size: 12px; color: #6a5f70; min-height: 48px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card .tags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.project-card .tags span {
  font-size: 10px; background: var(--outline); color: #fff;
  padding: 1px 6px; border-radius: 10px;
}
.project-card .card-open {
  min-width: 0; min-height: 0;
  font-size: 11px; padding: 4px 14px; cursor: pointer; font-family: inherit;
  color: var(--outline-deep); border: 1px solid #d391bd; border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #fbdcef 48%, #f0bcdf 50%, #f8d6ec 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.project-card .card-open:hover { filter: brightness(1.05); }
.project-card .card-open::before, .project-card .card-open::after { content: none !important; }

/* Project detail window — hero banner + scrollable body + pinned actions */
.project-detail { display: flex; flex-direction: column; height: 100%; flex: 1 1 auto; min-height: 0; }
.project-detail .pd-hero {
  flex: 0 0 auto; height: 172px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #cbb6dd, #b9c8ee);
  border-bottom: 1px solid var(--outline);
}
.project-detail .pd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-detail .pd-hero.emoji { display: grid; place-items: center; }
.project-detail .pd-hero .pd-hero-emoji { font-size: 74px; filter: drop-shadow(0 3px 4px rgba(80,50,100,.3)); }
/* glossy Aero sheen across the top of the hero */
.project-detail .pd-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}
.project-detail .pd-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px;
  background: var(--w7-surface, #fbf4fb);
}
.project-detail .pd-titlerow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.project-detail .pd-titlerow h1 { margin: 0; font-size: 22px; color: var(--pink-deep); }
.project-detail .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.project-detail .tags span {
  font-size: 10px; background: var(--outline); color: #fff; padding: 2px 8px; border-radius: 10px;
}
.project-detail .pd-desc { line-height: 1.6; color: #4a3a54; white-space: pre-line; font-size: 13px; }
.project-detail .pd-actions {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--lavender);
  background: linear-gradient(180deg, #fdf7fb, #f4e9f5);
}

/* Skills — 7.css progress bars, tinted pink via --w7-pg-bg */
.skills-pad { padding: 16px 18px; }
.skills-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--pink-deep);
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--lavender);
}
.skills-hdr .bx { font-size: 19px; color: var(--pink-4); }
[data-fill="skills"] { --w7-pg-bg: #ec80bb; }   /* pink progress fill (Win7 gloss) */
.skill { margin: 12px 0; }
.skill-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.skill-name { font-size: 12.5px; font-weight: 700; color: var(--outline-deep); }
.skill-pct { font-size: 11px; font-weight: 700; color: var(--pink-4); font-variant-numeric: tabular-nums; }
.skill-bar { width: 100%; }
.skill-bar > .skill-fill { transition: width .05s linear; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.art {
  position: relative;
  aspect-ratio: 1;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 40px; overflow: hidden;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border: 3px solid #fff;
  outline: 1px solid #d7a4cb;
  box-shadow: 0 3px 9px rgba(140,80,130,.28), inset 0 0 0 1px rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
/* glossy sheen over the top half (Aero photo frame) */
.art::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.05));
  pointer-events: none;
}
.art:hover { transform: scale(1.05) rotate(-1.5deg); box-shadow: 0 8px 18px rgba(140,80,130,.4); }
.art.art-img { padding: 0; }
.art.art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card .thumb img { max-width: 100%; max-height: 56px; object-fit: cover; border-radius: 6px; }

/* Contact */
#contact-form .field-row-stacked { margin-bottom: 8px; }
#contact-form input, #contact-form textarea { width: 100%; }
.contact-links { margin-top: 14px; text-align: center; }
.contact-links a { color: #b56aa0; text-decoration: none; font-weight: 600; }
.contact-links a:hover { text-decoration: underline; }
.contact-status { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; min-height: 16px; }
.contact-status.ok  { color: #46a06f; }
.contact-status.err { color: #d1567f; }

/* Gallery lightbox */
#lightbox {
  position: fixed; inset: 0; z-index: 20000; display: none; place-items: center;
  background: rgba(60,35,70,.62); backdrop-filter: blur(5px);
}
#lightbox.show { display: grid; }
#lightbox .lb-inner {
  position: relative; max-width: 90vw; max-height: 90vh;
  background: #fff; padding: 10px; border-radius: 12px;
  border: 1px solid var(--outline);
  box-shadow: 0 24px 70px rgba(60,20,60,.55), inset 0 1px 0 rgba(255,255,255,.8);
}
#lightbox .lb-img { display: block; max-width: 86vw; max-height: 80vh; border-radius: 6px; }
#lightbox .lb-cap { text-align: center; padding: 8px 4px 2px; color: var(--pink-deep); font-weight: 700; }
#lightbox .lb-close {
  position: absolute; top: -14px; right: -14px; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; color: #fff; font-size: 14px; line-height: 1;
  border: 1px solid var(--outline-deep);
  background: radial-gradient(circle at 50% 30%, #ffe0f0, #ec7fb4 60%, #cf5f96);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 2px 4px rgba(90,40,80,.4);
}
#lightbox .lb-close:hover { filter: brightness(1.06); }

/* Resume */
.resume-pad {
  display: flex; flex-direction: column;
  height: 100%; flex: 1 1 auto; min-height: 0;
}
.resume-pad h2 { flex: 0 0 auto; }
.resume-blurb { flex: 0 0 auto; margin: 0 0 12px; color: #4a3a54; }
.resume-viewer {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--lavender);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.resume-viewer iframe, .resume-viewer object { width: 100%; height: 100%; border: 0; display: block; }
.resume-pad .btn-row { flex: 0 0 auto; margin-top: 12px; align-items: center; }
.resume-pad .btn-row button { min-width: 0; }
.resume-pad .btn-row button::before, .resume-pad .btn-row button::after { content: none !important; }
.resume-empty {
  height: 100%;
  display: grid; place-content: center; justify-items: center; gap: 4px;
  color: var(--outline); text-align: center; padding: 20px;
}
.resume-empty .bx { font-size: 52px; color: var(--pink-3); }
.resume-empty p { margin: 6px 0 0; font-weight: 700; color: var(--pink-deep); }
.resume-empty span { font-size: 12px; color: var(--outline); }
.resume-dl-link {
  align-self: center;
  color: #b56aa0; font-weight: 600; text-decoration: none; padding: 4px 6px;
}
.resume-dl-link:hover { text-decoration: underline; }

/* Status window (like the old Status.app) */
.status-app { padding: 16px 18px; }
.status-main { display: flex; align-items: center; gap: 9px; }
.status-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: #46b47a; box-shadow: 0 0 0 3px rgba(70,180,122,.22), inset 0 1px 1px rgba(255,255,255,.6);
}
.status-dot.busy  { background: #e6b93c; box-shadow: 0 0 0 3px rgba(230,185,60,.22), inset 0 1px 1px rgba(255,255,255,.6); }
.status-dot.away  { background: #e0567f; box-shadow: 0 0 0 3px rgba(224,86,127,.22), inset 0 1px 1px rgba(255,255,255,.6); }
.status-text { font-size: 15px; font-weight: 700; color: var(--pink-deep); }
.status-note { margin: 8px 0 0 21px; color: #b56aa0; font-weight: 600; font-size: 12.5px; }
.status-hr { border: none; border-top: 1px solid var(--lavender); margin: 14px 0; }
.status-meta { display: flex; flex-direction: column; gap: 8px; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--outline-deep); }
.status-line .bx { font-size: 16px; color: var(--pink-4); }

/* =======================================================
   Boxicons — sizing & colour across the UI
   ======================================================= */
.bx { vertical-align: middle; line-height: 1; }

/* Start button orb + tray */
#start-btn .orb .bx { font-size: 20px; color: #fff; }
#tray .bx { font-size: 16px; }
#shutdown .bx { font-size: 15px; position: relative; top: -1px; }

/* Start menu */
.start-header .avatar .bx { font-size: 26px; color: var(--outline); }
.start-list li span { display: inline-flex; }
.start-list li .bx { font-size: 19px; color: var(--outline); }
.start-list li:hover .bx { color: var(--outline-deep); }

/* Window title bars (7.css) */
.winbox.seven .title-bar-text .bx {
  font-size: 14px;
  color: var(--outline-deep);
  position: relative;
  top: -1px;
}

/* Taskbar buttons */
.task-btn .bx { font-size: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  #site-logo { width: 200px; top: 12px; right: 14px; opacity: .85; }
  #tray #net, #tray #vol { display: none; }
  #start-menu { width: calc(100vw - 12px); }
}

/* =======================================================
   Windows on small screens
   Windows are spawned full-desktop on a phone (see windowGeometry in
   script.js), so the job here is the chrome inside them: side panes
   become horizontal strips, and anything that assumed ~600px of width
   gets to wrap or scroll.
   ======================================================= */
@media (max-width: 640px) {
  /* No edge-resizing on touch — the window already fills the desktop. */
  .winbox.seven .wb-n, .winbox.seven .wb-e,
  .winbox.seven .wb-s, .winbox.seven .wb-w,
  .winbox.seven .wb-nw, .winbox.seven .wb-ne,
  .winbox.seven .wb-se, .winbox.seven .wb-sw { display: none; }
  .winbox.seven .title-bar { cursor: default; }

  /* Slightly larger tap targets, scaled as a cluster so 7.css's button
     sprites keep their proportions. */
  .winbox.seven .title-bar-controls {
    transform: scale(1.18);
    transform-origin: right center;
  }

  /* Drop the path field — three status fields don't fit at 375px. */
  .winbox.seven .status-bar .status-bar-field:nth-child(3) { display: none; }

  /* About: the left nav becomes a scrollable tab strip above the content. */
  .about7 { flex-direction: column; }
  .about7 .ab7-nav {
    width: auto; flex: 0 0 auto;
    flex-direction: row; gap: 6px;
    overflow-x: auto; padding: 8px;
    border-right: 0; border-bottom: 1px solid #e4d5ee;
  }
  .about7 .ab7-navlink { flex: 0 0 auto; white-space: nowrap; padding: 6px 11px; }
  .ab7-content { padding: 14px; }

  /* Explorer: the folder tree becomes a horizontal filter strip. */
  .ex-main { flex-direction: column; }
  .ex-nav {
    width: auto; flex: 0 0 auto;
    display: flex; gap: 6px;
    overflow-x: auto; padding: 6px 8px;
    border-right: 0; border-bottom: 1px solid #e4d5ee;
    background: linear-gradient(180deg, #fdfafd, #f6eff9);
  }
  .ex-nav .nav-head { display: none; }              /* "Favorites" / "Categories" headers */
  .ex-nav .nav-link {
    flex: 0 0 auto; margin: 0; padding: 5px 10px;
    white-space: nowrap; border-radius: 3px;
  }

  /* Address bar: let the search box drop to its own row instead of squeezing
     the breadcrumb to nothing. */
  .ex-addressbar { flex-wrap: wrap; }
  .ex-crumb { min-width: 0; }
  .ex-search { width: 100%; flex: 1 0 100%; }

  .ex-toolbar { overflow-x: auto; }
  .ex-toolbar button { flex: 0 0 auto; white-space: nowrap; }
  /* Decorative Explorer commands ("Share with", "New folder", "Burn"…) don't
     fit at 375px — keep the first two and the view button on the right. */
  .ex-toolbar button:nth-child(n+3):not(:last-child) { display: none; }

  /* These rows are swiped, not scrollbar-dragged: the themed 17px Win7
     scrollbar would eat most of the strip. */
  .ex-nav::-webkit-scrollbar,
  .ex-toolbar::-webkit-scrollbar,
  .about7 .ab7-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .ex-nav, .ex-toolbar, .about7 .ab7-nav { scrollbar-width: none; }
  .ex-content { padding: 10px; }
  .ex-details { padding: 6px 10px; gap: 8px; }

  .win-pad { padding: 14px; }

  .welcome-list .tip-pointer { display: none; }
  .welcome-list .tip-touch { display: flex; }
}

/* =======================================================
   Boot screen — Windows 7 logon, in pink
   One flat gradient, the user tile, the name, the marquee.
   ======================================================= */
#boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: linear-gradient(118deg, #e3aed0 0%, #f2c9e0 38%, #fbdff0 70%, #fff6fb 100%);
  font-family: "Segoe UI", Tahoma, sans-serif;
  cursor: progress;
  transition: opacity .45s ease, visibility .45s ease;
}
#boot.boot-done { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-user { text-align: center; transform: translateY(-6%); }

/* The logon user tile: white mat, thin frame, soft drop shadow */
.boot-tile {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: #fff;
  border: 4px solid #fff;
  border-radius: 5px;
  box-shadow:
    0 0 0 1px rgba(120, 80, 110, .4),
    0 5px 14px rgba(120, 70, 105, .25);
  overflow: hidden;
}
.boot-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.boot-emoji { font-size: 54px; line-height: 1; }

/* Account name — bold white with the Win7 logon shadow */
.boot-name {
  margin: 12px 0 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pink-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}

/* The 7.css marquee, sized like the logon password box and tinted pink */
#boot [role="progressbar"] {
  --w7-pg-bg: #d75da4;                 /* the sweeping band */
  width: 152px;
  height: 16px;
  margin: 0 auto;
  border-color: #8f6486;
  background:
    radial-gradient(circle at 0 50%, rgba(0, 0, 0, .12) 10px, transparent 30px),
    radial-gradient(circle at 100% 50%, rgba(0, 0, 0, .12) 10px, transparent 30px),
    linear-gradient(180deg, #fff8fc, #fffdfe 3px, #f2dbe8 6px, #ecd0e0 0, #f3dceb),
    #f4e2ed;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    0 1px 3px rgba(120, 70, 105, .28);
}
#boot [role="progressbar"].marquee::before { opacity: .85; }

@media (max-width: 640px) {
  .boot-tile { width: 84px; height: 84px; }

}

@media (prefers-reduced-motion: reduce) {
  #boot { transition: none; }
}