/* ==========================================================================
   OS CHROME, CLEAN  --  a try (2026-10-13)
   The desktop redrawn from the PROFILE PICTURES window (.fm in style.css) --
   its system face, its white, its one blue -- and then sharpened: no round
   corner anywhere, no glass, no soft shadow. Every surface is flat and has
   a contour, one pixel wide. Blue is kept for lines and for what is under
   the hand: the edge of each bar, the outline of the window in front, a
   thin mark beside the row the pointer is on. Nothing is filled with it.
   The larger surfaces (windows, menus, search, the login box) have one
   corner cut off, and the contour follows the cut.
   It replaces the "Amiga Sunset" chrome -- the violet bars, the yellow mono
   capitals, the hand-drawn squares and pen-stroke buttons.

   ONLY THE OS. The login box, the menu bar, the taskbar, the desktop icons,
   the frame every window sits in (title bar, its three buttons, the
   contour), the menus, search, the toasts, and the app list that TRASH /
   SOFTWARE / SHARING carry down their left side. What is INSIDE a window is
   that window's own and is not touched here.

   Override-only and loaded last (see the <link> in index.html), on top of
   the "Amiga Sunset" rules in style.css -- but NO LONGER OPTIONAL. It began
   as a layer that could be unlinked to get the old desktop back; since then
   the page itself has changed to suit it (the bottom bar is out of
   index.html, the icons are new files, the window layout in script.js
   measures the bar instead of assuming one), and without this file the
   desktop is neither the old one nor this one. It is in
   scripts/build-dist.sh's whitelist accordingly. Each step on the way here
   is in backups/pre-*-20261013/.
   ========================================================================== */

/* ---- tokens ----
   Day and night are the same toggle as before (setBrightness() in script.js
   flips .os-dark on <html>). It moves the OS -- bars, menus, title bars,
   the login box -- and leaves the windows' contents as they are, which is
   what it did under the old chrome too. */
:root {
  --os-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --os-ink: #0f1114;
  --os-dim: #6b7079;
  --os-surface: #ffffff;
  --os-rule: rgba(15, 17, 20, 0.1);   /* a division inside a surface */
  --os-line: rgba(15, 17, 20, 0.24);  /* a neutral contour */
  --os-edge: rgba(15, 17, 20, 0.55);  /* the contour of a window that is not in front */
  --os-blue: #0a64ff;
  --os-blue-line: rgba(10, 100, 255, 0.6);
  --os-blue-wash: rgba(10, 100, 255, 0.07);
  /* the same blue where it has to hold against the photograph instead of a surface */
  --os-blue-photo: #7ea9ff;
  --os-cut: 12px; /* how much of a corner is cut off; 0px gives plain rectangles */
}
html.os-dark {
  --os-ink: #eceef2;
  --os-dim: #8b909c;
  --os-surface: #0c0d10;
  --os-rule: rgba(255, 255, 255, 0.1);
  --os-line: rgba(255, 255, 255, 0.22);
  --os-edge: rgba(255, 255, 255, 0.3);
  --os-blue: #5c95ff;
  --os-blue-line: rgba(92, 149, 255, 0.62);
  --os-blue-wash: rgba(92, 149, 255, 0.13);
}

/* what the browser draws itself inside the OS's own surfaces (a scrollbar in
   the search results, the font list) follows the hour too */
.search-box, .dropdown-menu, .context-menu, .boot-center { color-scheme: light; }
html.os-dark :is(.search-box, .dropdown-menu, .context-menu, .boot-center) { color-scheme: dark; }

/* the system's own pointer instead of the drawn arrow and hourglass.
   index.html writes --cur-arrow / --cur-wait inline on <html>; set again on
   <body> they are what everything on the page inherits. Same for the colour
   a selection is painted in (text, and the rubber band on the desktop). */
body {
  --cur-arrow: default;
  --cur-wait: progress;
  --selection-fill: rgba(92, 149, 255, 0.2);
}

/* ---- THE PICTURE ----
   Over the whole display, edge to edge, as style.css already lays it
   (#desktop.bg-photo::before, `cover`). Nothing is put behind it or over
   it: the dark vignette that #desktop::after drew round the edge of the
   screen is gone.

   OUT OF FOCUS UNTIL YOU ARE IN. On the login screen the picture is blurred
   and turned down; logging in pulls it sharp. Both are one layer of
   backdrop-filter over the picture rather than a blurred copy of it, so the
   picture itself never changes size or place between the two, and the blur
   has no faded rim at the edge of the screen. #desktop::after is that layer
   on the desktop side: it starts at exactly what the login screen showed and
   clears, then it is nothing again. (!important because style.css swaps this
   pseudo-element's animation when a dragged window bumps the screen edge;
   every swap back would run the focus pull again.) */
#desktop { background-color: #000; }
#desktop::after {
  z-index: -1;
  box-shadow: none;
}
#desktop.power-on::after { animation: os-focus-pull 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) !important; }
@keyframes os-focus-pull {
  from { -webkit-backdrop-filter: blur(22px) brightness(0.7); backdrop-filter: blur(22px) brightness(0.7); }
  to   { -webkit-backdrop-filter: blur(0) brightness(1); backdrop-filter: blur(0) brightness(1); }
}
/* the desktop used to fade up from black as a whole, which put a dark
   frame between the two pictures. Now only what lies on the picture arrives. */
#desktop.power-on { animation: none; }
#desktop.power-on > .menu-bar,
#desktop.power-on > .taskbar,
#desktop.power-on > .icons,
#desktop.power-on > #windows-layer { animation: os-arrive 0.45s ease-out backwards; }
@keyframes os-arrive {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #desktop.power-on::after { animation: none !important; }
}

#boot-screen {
  background: #000;
  font-family: var(--os-font);
}
#boot-screen::before,
#boot-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#boot-screen::before { background: center center / cover no-repeat var(--bg-photo-url, none); }
#boot-screen::after {
  -webkit-backdrop-filter: blur(22px) brightness(0.7);
  backdrop-filter: blur(22px) brightness(0.7);
}

/* ---- login ---- */
.boot-center {
  min-width: 320px;
  padding: 36px 46px 32px;
  gap: 14px;
  border: 1px solid var(--os-blue-line);
  border-radius: 0;
  background: var(--os-surface);
  box-shadow: none;
  color: var(--os-ink);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.boot-center::before { content: none; }
.boot-center::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.2px), var(--os-blue-line) calc(50% - 1.2px), var(--os-blue-line) 50%, transparent 50%);
}
.boot-avatar {
  width: 64px;
  height: 64px;
  border: 1px solid var(--os-line);
  border-radius: 0;
  background: transparent;
}
.boot-avatar svg { width: 62%; height: 62%; color: var(--os-ink); }
.boot-signing-label {
  color: var(--os-dim);
  font: 500 calc(10px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.14em;
}
.boot-username {
  color: var(--os-ink);
  font: 600 calc(17px * var(--ui-scale))/1.25 var(--os-font);
  letter-spacing: 0.05em;
}
.boot-progress-track {
  height: 2px;
  border: none;
  background: var(--os-rule);
}
.boot-progress-fill { background: var(--os-blue); }
.boot-line {
  color: var(--os-dim);
  font: 400 calc(12px * var(--ui-scale))/1.3 var(--os-font);
}
.boot-login-btn {
  margin-top: 8px;
  padding: 10px 30px;
  border: 1px solid var(--os-blue-line);
  border-radius: 0;
  background: transparent;
  color: var(--os-blue);
  font: 600 calc(11.5px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.16em;
  box-shadow: none;
}
.boot-login-btn:hover {
  border-color: var(--os-blue);
  background: var(--os-blue);
  color: var(--os-surface);
}

/* ---- THE BAR ----
   One bar, along the top. There is none at the foot of the screen any more
   (see index.html): what it held is here. From the left: log out; the
   greeting; a button for each open window; then the settings, and at the
   very end the date and the hour. Solid, and the line under it is the blue;
   the window in front is marked by a short heavier length of that same line
   under its name.

   IT IS DRAWN OVER THE WINDOWS NOW (it used to be under them). It is the
   only way from one window to another, so it must not be possible to cover
   it -- see windowTopFloor() in script.js for the other half of that, and
   .window.maximized below. */
.menu-bar,
.menu-bar:has(.dropdown-menu:not(.hover-dropdown):not(.hidden)),
.menu-bar:has(.menu-hover-wrap:hover) { z-index: 415; }
.menu-bar {
  justify-content: flex-start;
  padding: 0 14px 0 8px;
  background: var(--os-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--os-blue-line);
  font-family: var(--os-font);
  letter-spacing: 0;
}
/* log out, first of all. Its menu hangs from its left edge here: hung from
   the right, as the others are, it would run off the side of the screen. */
.menu-power { flex: none; margin-right: 10px; }
.menu-power .hover-dropdown { left: 0; right: auto; }
/* when the bar is crowded it is the greeting that gives way, long before a
   window's name does. (The weight is this lopsided on purpose: at 1000 to 1
   the names still took a fraction of a pixel of the shortfall, and a
   fraction of a pixel is enough to put "..." on every one of them.) */
.menu-welcome {
  flex: 0 100000 auto;
  min-width: 0;
  margin-right: 0;
  padding-right: 16px;
  color: var(--os-ink) !important;
  font: 600 calc(12px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.02em;
}

/* the open windows: each is its name and nothing else. They share what
   room there is, and a name that does not fit is cut short. */
.taskbar-items {
  flex: 1 1 auto; /* its own width first: only then is there a shortfall for the greeting to absorb */
  align-self: stretch;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--os-rule);
}
.taskbar-items:empty { border-left-color: transparent; }
.taskbar-item {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 230px;
  padding: 0 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  border-right: 1px solid var(--os-rule);
  border-radius: 0;
  background: transparent;
  color: var(--os-dim);
  font: 500 calc(10.5px * var(--ui-scale))/39px var(--os-font);
  letter-spacing: 0.09em;
  box-shadow: none;
}
.taskbar-item:hover { background: var(--os-blue-wash); color: var(--os-ink); box-shadow: none; }
.taskbar-item.active {
  border: none;
  border-right: 1px solid var(--os-rule);
  background: transparent;
  color: var(--os-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--os-blue);
}

/* the settings, then the date and the hour, each set off by a rule */
.menu-datetime {
  flex: none;
  align-self: stretch;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 14px;
  border: none;
  border-left: 1px solid var(--os-rule);
  background: transparent;
  font-family: var(--os-font);
}
.menu-datetime::before { content: none; }
.menu-date {
  color: var(--os-dim) !important;
  font: 500 calc(10.5px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.09em;
}
.menu-date:hover { color: var(--os-blue) !important; text-decoration: none; }
.menu-clock {
  color: var(--os-ink) !important;
  font: 600 calc(12.5px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.menu-left {
  flex: none;
  align-self: stretch;
  gap: 2px;
  padding: 0 8px;
  border-left: 1px solid var(--os-rule);
}
.menu-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--os-ink);
}
.menu-icon-btn:hover { background: var(--os-blue-wash); color: var(--os-blue); }
/* night is on: the sun is underlined */
#brightness-toggle.active,
#brightness-toggle.active:hover {
  background: transparent;
  color: var(--os-ink);
  box-shadow: inset 0 -1px 0 var(--os-blue);
}
#brightness-toggle.active:hover { background: var(--os-blue-wash); color: var(--os-blue); }
#lang-toggle {
  width: auto;
  padding: 0 8px;
  color: var(--os-ink);
  font: 600 calc(10.5px * var(--ui-scale))/1 var(--os-font);
  letter-spacing: 0.1em;
  box-shadow: none;
}
#lang-toggle:hover { background: var(--os-blue-wash); color: var(--os-blue); }
.menu-battery { margin: 0 6px; color: var(--os-ink); }
/* nothing stands between a toast and the foot of the screen any more */
#toast-container { bottom: 24px; }

/* ---- desktop icons ----
   The hand-drawn square behind each glyph is gone, and so is the old icon
   art. The twelve are redrawn (icons/edge/, see index.html) and ON PURPOSE
   THEY ARE NOT A SET: each is in a manner of its own, the way the icons on
   a real desktop come from a dozen different hands and years -- one in the
   pixels of Windows 95, one in neon, one isometric, one a glossy record, one
   a constructivist poster, and so on (each file says which). So nothing is
   laid over them here to make them match: only a soft shadow, to lift them
   off the picture. The label is white on the picture, held off it by its
   own shadow; picked, it is boxed in a hairline.

   NOTHING MOVES UNDER THE POINTER. script.js tilts an icon toward the cursor
   (ICON 3D TILT, an inline transform on every mousemove); that is switched
   off here, and there is no lift or change of shadow either. The press when
   one is clicked is still there (.icon:active in style.css outranks this). */
.icon {
  gap: 9px;
  border: none;
  font-family: var(--os-font);
  transform: none !important;
  transition: none;
}
.icon-glyph::before,
.icon-glyph::after { content: none; }
.icon-glyph,
.icon:hover .icon-glyph,
.icon.selected .icon-glyph {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  transition: none;
}
.icon-glyph img {
  width: calc(58px * var(--icon-scale));
  height: calc(58px * var(--icon-scale));
}
/* WHERE THEY STAND. Eight on the left in the grid style.css lays out: a
   column is filled, five deep, before the next is begun -- so five and
   three. (ZOOM and SOCIAL are sent to the end, so that MANIFESTO heads the
   second column.) Four are pinned somewhere of their own, the way the trash
   always was (.icon-trash in style.css):
   - TRASH, PROFILE PICTURES and CV down the right edge, and NOT IN A LINE --
     each is a little left or right, up or down, of where a column would put
     it, like things set down by hand;
   - WORKS near the middle of the screen, a tenth larger than the rest, and a
     little off the middle for the same reason.
   The steps down the right edge are one icon and the gap under it (a
   one-line label, then a two-line one) at whatever size Settings has the
   desktop. Once dragged an icon is wherever it was dropped, like any other
   -- hence :not(.free-positioned). */
.icon[data-app="zoom"],
.icon[data-app="social"] { order: 1; }
.icon[data-app="trash"]:not(.free-positioned),
.icon[data-app="profile_photos"]:not(.free-positioned),
.icon[data-app="cv"]:not(.free-positioned),
.icon[data-app="works"]:not(.free-positioned) {
  position: fixed;
  left: auto;
}
.icon[data-app="trash"]:not(.free-positioned) { top: 78px; right: 44px; }
.icon[data-app="profile_photos"]:not(.free-positioned) { top: calc(150px + 70.2px * var(--ui-scale)); right: 12px; }
.icon[data-app="cv"]:not(.free-positioned) { top: calc(196px + 154.6px * var(--ui-scale)); right: 52px; }
/* these are measured from .icons' own corner, which is 26px in and 66px
   down from the screen's (its margin in style.css) */
.icon[data-app="works"]:not(.free-positioned) {
  left: calc(50vw - 26px - 65px * var(--icon-scale) + 3.4vw);
  top: calc(50vh - 66px - 60px * var(--icon-scale) - 3.6vh);
}
.icon[data-app="works"] .icon-glyph {
  width: calc(62px * var(--icon-scale));
  height: calc(62px * var(--icon-scale));
}
.icon[data-app="works"] .icon-glyph img {
  width: calc(64px * var(--icon-scale));
  height: calc(64px * var(--icon-scale));
}
.icon-label {
  width: auto;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 600 calc(10.5px * var(--ui-scale))/1.35 var(--os-font);
  letter-spacing: 0.09em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.55);
}
.icon.selected .icon-label {
  background: rgba(8, 12, 22, 0.62);
  color: #fff;
  box-shadow: 0 0 0 1px var(--os-blue-photo);
  text-shadow: none;
}

/* ---- windows: the frame ----
   A flat rectangle with one corner cut and a one-pixel contour: grey on a
   window that is behind, blue on the one in front. No shadow -- a shadow
   could not follow the cut (clip-path takes it), and the line is the edge.
   The cut is on the side away from the three buttons, inside the height of
   the title bar, so it never reaches a window's contents.
   One title bar for every window -- the apps that had coloured their own
   (BIO, WORKS, a work's TEXTS / VIDEO / IMAGES) take the system's here;
   their contents below it are as they were. Scoped away from the bare work
   page (html.bare-work), where a window is the whole page and has no frame. */
html:not(.bare-work) #windows-layer .window {
  --win-line: var(--os-edge);
  border: 1px solid var(--win-line);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(var(--os-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--os-cut));
}
html.os-mac:not(.bare-work) #windows-layer .window {
  clip-path: polygon(0 0, calc(100% - var(--os-cut)) 0, 100% var(--os-cut), 100% 100%, 0 100%);
}
html:not(.bare-work) #windows-layer .window.focused { --win-line: var(--os-blue-line); }
/* the contour along the cut. .window clips at its padding edge, so this
   sits a pixel inside the corner and is two pixels smaller than the cut:
   its diagonal is then exactly the line the corner was cut on. */
html:not(.bare-work) #windows-layer .window::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: calc(var(--os-cut) - 2px);
  height: calc(var(--os-cut) - 2px);
  pointer-events: none;
  background: linear-gradient(to top left, transparent calc(50% - 1.2px), var(--win-line) calc(50% - 1.2px), var(--win-line) 50%, transparent 50%);
}
html.os-mac:not(.bare-work) #windows-layer .window::after {
  left: auto;
  right: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1.2px), var(--win-line) calc(50% - 1.2px), var(--win-line) 50%, transparent 50%);
}
/* as large as it goes is from under the bar to the foot of the screen
   (style.css has it from the very top, down to a bottom bar that is gone) */
html:not(.bare-work) #windows-layer .window.maximized {
  top: 40px !important;
  height: calc(100% - 40px) !important;
  border: none;
  clip-path: none;
}
html:not(.bare-work) #windows-layer .window.maximized::after { content: none; }

html:not(.bare-work) .window[data-app] .window-titlebar {
  height: 26px;
  gap: 12px;
  padding: 0 4px 0 13px;
  background: var(--os-surface);
  border-bottom: 1px solid var(--os-rule);
  font-family: var(--os-font);
}
/* where the buttons are on the left (.os-mac, see detectOS() in script.js)
   the name follows them instead of standing at the far end */
html.os-mac:not(.bare-work) .window[data-app] .window-titlebar {
  justify-content: flex-end;
  padding: 0 13px 0 4px;
}
/* a small square, then the name: grey on a window that is behind, and on
   the one in front the square is the blue */
html:not(.bare-work) .window[data-app] .window-title {
  min-width: 0;
  gap: 8px;
  padding: 0;
  background: none;
  color: var(--os-dim);
  font: 600 calc(10.5px * var(--ui-scale))/1.4 var(--os-font);
  letter-spacing: 0.1em;
}
html:not(.bare-work) .window[data-app].focused .window-title { color: var(--os-ink); }
html:not(.bare-work) .window[data-app] .window-title .dot {
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--os-dim);
  font-size: 0;
}
html:not(.bare-work) .window[data-app].focused .window-title .dot { background: var(--os-blue); }
html:not(.bare-work) .window[data-app] .window-title > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* close / minimize / maximize: three plain marks, one stroke wide. Which
   side they stand on, and in which order, is still each visitor's own
   system's. */
html:not(.bare-work) .window[data-app] .window-controls {
  gap: 0;
  padding: 0;
  background: none;
}
html:not(.bare-work) .window[data-app] .window-controls button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 20px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--os-dim);
  box-shadow: none;
  filter: none;
}
html:not(.bare-work) .window[data-app].focused .window-controls button { color: var(--os-ink); }
html:not(.bare-work) .window[data-app] .window-controls button:hover {
  background: var(--os-blue-wash);
  color: var(--os-blue);
  filter: none;
}
html:not(.bare-work) .window[data-app] .window-controls button img,
html:not(.bare-work) .window[data-app] .window-controls .ctl-sketch { display: none; }
html:not(.bare-work) .window[data-app] .window-controls button::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--os-mark) center / contain no-repeat;
  mask: var(--os-mark) center / contain no-repeat;
}
html:not(.bare-work) .window[data-app] .window-controls .btn-close {
  --os-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}
html:not(.bare-work) .window[data-app] .window-controls .btn-min {
  --os-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5.5h8' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}
html:not(.bare-work) .window[data-app] .window-controls .btn-max {
  --os-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5h7v7h-7z' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

/* back / forward (they only exist once a window has been somewhere else):
   two plain chevrons before the name */
html:not(.bare-work) .window[data-app] .window-nav { gap: 0; margin: 0 2px 0 -4px; }
html:not(.bare-work) .window[data-app] .window-nav button {
  width: 22px;
  height: 20px;
  border-radius: 0;
  color: var(--os-dim);
  cursor: default;
  transition: none;
}
html:not(.bare-work) .window[data-app] .window-nav .nav-sketch { display: none; }
html:not(.bare-work) .window[data-app] .window-nav button::before {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 0 1.2px 1.2px;
  transform: translateX(2px) rotate(45deg);
}
html:not(.bare-work) .window[data-app] .window-nav .btn-nav-fwd::before { transform: translateX(-2px) rotate(-135deg); }
html:not(.bare-work) .window[data-app] .window-nav button:hover:not(:disabled) {
  background: var(--os-blue-wash);
  color: var(--os-blue);
  transform: none;
}

/* dragging a window to the side of the screen: where it will land */
.snap-preview {
  border: 1px solid var(--os-blue-photo);
  border-radius: 0;
  background: rgba(92, 149, 255, 0.14);
}

/* ---- the app list down the side of TRASH / SOFTWARE / SHARING ----
   A plain list: each app's icon with nothing behind it, its name, and the
   one you are in marked by a length of the blue at its left. Light whatever
   the hour, like the file browsers it stands beside. */
.appnav {
  width: 188px;
  padding: 12px 0;
  gap: 0;
  background: #f6f7f9;
  border-right: 1px solid #e2e4e9;
  color: #0f1114;
  font-family: var(--os-font);
}
.appnav-heading {
  padding: 2px 16px 10px;
  color: #8a8f99;
  font: 600 9.5px/1.2 var(--os-font);
  letter-spacing: 0.16em;
}
.appnav-heading::after { content: none; }
.appnav-item {
  gap: 10px;
  padding: 6px 16px;
  border-radius: 0;
  color: #3a3e46;
  font: 500 calc(10.5px * var(--ui-scale))/1.25 var(--os-font);
  letter-spacing: 0.07em;
  cursor: default;
  transition: none;
}
.appnav-item .appnav-icon,
.appnav-item:hover .appnav-icon,
.appnav-item.active .appnav-icon {
  width: 24px;
  height: 24px;
  transform: none;
}
.appnav-icon::before,
.appnav-icon::after { content: none; }
.appnav-icon img, .appnav-icon svg { width: 100%; height: 100%; }
.appnav-label { padding-bottom: 0; }
.appnav-item:hover { background: rgba(10, 100, 255, 0.05); color: #0f1114; }
.appnav-item.active {
  background: rgba(10, 100, 255, 0.07);
  color: #0f1114;
  font-weight: 600;
  box-shadow: inset 2px 0 0 #0a64ff;
}
.appnav-item.active .appnav-label::after { content: none; }

/* ---- menus (language / sound / settings, "logged in as", right-click) ----
   A flat sheet in the blue contour, its corner cut. A row is plain text;
   under the pointer it takes the faintest wash and a mark at its left. The
   little coloured squares before each row and the tilted squares behind the
   settings buttons are gone. */
.dropdown-menu,
.context-menu {
  padding: 4px 0;
  border: 1px solid var(--os-blue-line);
  border-radius: 0;
  background: var(--os-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
  color: var(--os-ink);
  font-family: var(--os-font);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  animation: os-menu-in 0.12s ease-out;
}
.dropdown-menu::after,
.context-menu::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.2px), var(--os-blue-line) calc(50% - 1.2px), var(--os-blue-line) 50%, transparent 50%);
}
@keyframes os-menu-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.sound-dropdown { padding: 16px 14px 8px; }
.settings-dropdown { padding: 4px 14px 6px; }
/* this one opens flush under its button (see .hover-dropdown in style.css) */
.hover-dropdown { padding: 8px 0 4px; }

.dropdown-item,
.context-menu-item {
  gap: 8px;
  padding: 7px 14px;
  border-radius: 0;
  color: var(--os-ink);
  font: 500 calc(12px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.02em;
  transition: none;
}
.dropdown-item::before,
.context-menu-item::before { content: none; }
.dropdown-item:hover,
.context-menu-item:hover,
.dropdown-item:active,
.context-menu-item:active {
  background: var(--os-blue-wash);
  color: var(--os-ink);
  box-shadow: inset 2px 0 0 var(--os-blue);
  transform: none;
}
/* the language in use: ticked */
.dropdown-item.active::after {
  content: "";
  width: 4px;
  height: 8px;
  margin: -2px 3px 0 auto;
  border: solid var(--os-blue);
  border-width: 0 1.2px 1.2px 0;
  transform: rotate(45deg);
}
.sound-dropdown .dropdown-item { margin: 0 -14px; }
.context-menu-item.disabled,
.context-menu-item.disabled:hover {
  background: transparent;
  color: var(--os-dim);
  opacity: 0.55;
  box-shadow: none;
}
.context-menu-sep { margin: 4px 0; background: var(--os-rule); }
.dropdown-label,
.hover-dropdown .user-hover-label {
  color: var(--os-dim);
  font: 600 calc(9.5px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.14em;
}
.hover-dropdown .user-hover-label { padding: 6px 14px 2px; }
.hover-dropdown .user-hover-name {
  padding: 0 14px 8px;
  color: var(--os-ink);
  font: 600 calc(12px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.05em;
}

/* the controls inside them: outlined boxes side by side, the chosen one in
   the blue line */
.dropdown-menu .mobile-settings-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--os-rule);
  color: var(--os-ink);
  font: 500 calc(12px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.02em;
}
.dropdown-menu .mobile-settings-row:last-child { border-bottom: none; }
.dropdown-menu .mobile-lang-options { gap: 0; }
.dropdown-menu .mobile-chip {
  padding: 6px 11px;
  border: 1px solid var(--os-line);
  border-radius: 0;
  background: transparent;
  color: var(--os-dim);
  font: 500 calc(10.5px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.07em;
}
.dropdown-menu .mobile-chip::before { content: none; }
.dropdown-menu .mobile-chip + .mobile-chip { margin-left: -1px; }
.dropdown-menu .mobile-chip:hover { color: var(--os-ink); }
.dropdown-menu .mobile-chip.active {
  z-index: 1;
  border-color: var(--os-blue-line);
  background: var(--os-blue-wash);
  color: var(--os-blue);
  font-weight: 600;
}
.dropdown-menu .font-select {
  padding: 6px 10px;
  border: 1px solid var(--os-line);
  border-radius: 0;
  background: transparent;
  color: var(--os-ink);
  font: 500 calc(11px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.02em;
}
.dropdown-menu .font-select option { background: var(--os-surface); color: var(--os-ink); }
.dropdown-menu #volume-slider,
.dropdown-menu input[type="range"] { accent-color: var(--os-blue); }

/* ---- search ---- */
.search-overlay { background: rgba(0, 0, 0, 0.42); }
.search-box {
  position: relative;
  border: 1px solid var(--os-blue-line);
  border-radius: 0;
  background: var(--os-surface);
  box-shadow: none;
  color: var(--os-ink);
  font-family: var(--os-font);
  clip-path: polygon(0 0, calc(100% - var(--os-cut)) 0, 100% var(--os-cut), 100% 100%, 0 100%);
}
/* it clips at its padding edge, like a window: see .window::after above */
.search-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--os-cut) - 2px);
  height: calc(var(--os-cut) - 2px);
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.2px), var(--os-blue-line) calc(50% - 1.2px), var(--os-blue-line) 50%, transparent 50%);
}
#search-input {
  padding: 15px 18px;
  border-bottom: 1px solid var(--os-rule);
  color: var(--os-ink);
  font: 400 calc(17px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.01em;
}
#search-input::placeholder { color: var(--os-dim); }
.search-box:has(.search-results:empty) #search-input { border-bottom-color: transparent; }
.search-results:not(:empty) { padding: 4px 0; }
.search-result-row {
  padding: 9px 18px;
  border-bottom: none;
  border-radius: 0;
  color: var(--os-ink);
  font: 500 calc(11px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.09em;
}
.search-result-row .file-glyph { color: var(--os-dim); }
.search-result-tag {
  color: var(--os-dim);
  font: 500 calc(9.5px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.14em;
}
.search-result-row:hover,
.search-result-row.active {
  background: var(--os-blue-wash);
  color: var(--os-ink);
  box-shadow: inset 2px 0 0 var(--os-blue);
}
.search-result-row:hover .file-glyph,
.search-result-row.active .file-glyph { color: var(--os-blue); }
.search-result-row:hover .search-result-tag,
.search-result-row.active .search-result-tag { color: var(--os-dim); opacity: 1; }
.search-empty {
  padding: 12px 18px;
  color: var(--os-dim);
  font: 400 calc(12px * var(--ui-scale))/1.3 var(--os-font);
}

/* ---- toasts, and the rubber band on the desktop ---- */
.toast {
  padding: 10px 18px 10px 16px;
  border: 1px solid var(--os-blue-line);
  border-radius: 0;
  background: var(--os-surface);
  color: var(--os-ink);
  font: 500 calc(12px * var(--ui-scale))/1.3 var(--os-font);
  letter-spacing: 0.03em;
  box-shadow: inset 2px 0 0 var(--os-blue);
}
.selection-box {
  border: 1px solid var(--os-blue-photo);
  border-radius: 0;
}
.selection-text {
  color: #fff;
  font: 600 calc(10.5px * var(--ui-scale))/1.2 var(--os-font);
  letter-spacing: 0.09em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}