/* =====================================================================
   classic.css — the raw ingredients of the mid-1990s desktop look.
   Bevels, buttons, windows, form fields, menus, scrollbars.
   Layout of the desktop itself lives in desktop.css.
   ================================================================== */

:root {
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --hilite: #ffffff;
  --shadow: #808080;
  --dark: #0a0a0a;

  --title-a1: #000080;
  --title-a2: #1084d0;
  --title-i1: #808080;
  --title-i2: #b5b5b5;

  --select: #000080;
  --select-fg: #ffffff;
  --disabled: #808080;

  --desktop-bg: #008080;

  --font: "MS Sans Serif", "Pixelated MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --fs: 12px;

  --taskbar-h: 30px;

  /* The viewport meta asks for viewport-fit=cover, so on phones with a notch,
     rounded corners or a home bar the page runs underneath them. These keep
     the taskbar and window buttons out of those areas. All 0 on a desktop. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* the four classic bevels, as reusable shadow stacks */
  --out: inset -1px -1px var(--dark), inset 1px 1px var(--hilite),
         inset -2px -2px var(--shadow), inset 2px 2px var(--face-light);
  --in:  inset -1px -1px var(--hilite), inset 1px 1px var(--dark),
         inset -2px -2px var(--face-light), inset 2px 2px var(--shadow);
  --out-thin: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
  --in-thin:  inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
}

/* --- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  color: #000;
  background: var(--desktop-bg);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;   /* no pull-to-refresh on a phone */
}
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
/* No double-tap-to-zoom on controls: on a phone a quick second tap zoomed
   the page instead of pressing the button. Pinch zoom still works. */
button, a, input, textarea, select, label { touch-action: manipulation; }
/* Icons inside buttons never receive the tap themselves. A finger landing on
   an SVG <use> made that the event target, which older WebKit reports as an
   object without closest() — the press silently did nothing. */
button svg, button use { pointer-events: none; }
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico16 { width: 16px; height: 16px; flex: none; }
.ico32 { width: 32px; height: 32px; flex: none; }
.ico24 { width: 24px; height: 24px; flex: none; }

/* --- buttons ----------------------------------------------------- */
button {
  position: relative;
  min-width: 75px;
  padding: 4px 12px;
  border: none;
  background: var(--face);
  box-shadow: var(--out);
  cursor: default;
  text-align: center;
  user-select: none;
}
button::-moz-focus-inner { border: 0; }
button:disabled {
  color: var(--disabled);
  text-shadow: 1px 1px 0 var(--hilite);
}
button:not(:disabled):active,
button.is-pressed { box-shadow: var(--in); }

/* A pressed push button nudges its label down and right. 11 + 13 is the
   same 24px as 12 + 12, so the width never changes and nothing reflows.
   This deliberately does NOT live on the bare `button:active` rule:
   that selector scores (0,2,1) and outranks every `.thing:active`
   override at (0,2,0), so it clobbered the padding of every button with
   its own — calendar cells, desktop icons, toolbar buttons, swatches —
   and shoved whole layouts sideways for as long as the mouse was down. */
.button-row button:not(:disabled):active,
.button-row button.is-pressed { padding: 5px 11px 3px 13px; }
button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
button.default { box-shadow: var(--out), 0 0 0 1px #000; }

/* --- window ------------------------------------------------------ */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-height: 110px;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--out);
}
/* display:flex above would otherwise beat the browser's own
   [hidden] { display: none }, leaving minimised windows on screen */
.window[hidden] { display: none; }
.window:focus { outline: none; }
/* Flex children default to min-width:auto and refuse to shrink below
   their content, which pushes toolbars and status bars out through the
   window border. The window itself stays overflow:visible so the resize
   handles and menu popups can sit outside it. */
.window > * { min-width: 0; }

.title-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  flex: none;
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--title-a1), var(--title-a2));
  color: #fff;
  font-weight: bold;
  cursor: default;
  touch-action: none;
  user-select: none;
}
.window.inactive .title-bar {
  background: linear-gradient(90deg, var(--title-i1), var(--title-i2));
  color: #dfdfdf;
}
.title-bar-icon { width: 16px; height: 16px; flex: none; }
.title-bar-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.title-bar-controls { display: flex; gap: 2px; flex: none; }
.title-bar-controls button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 16px;
  min-width: 0;
  padding: 0;
}
.title-bar-controls button:active { padding: 1px 0 0 1px; }
.title-bar-controls svg { width: 8px; height: 8px; }
.title-bar-controls .tb-close { margin-left: 2px; }

/* --- menu bar ---------------------------------------------------- */
.menu-bar {
  display: flex;
  flex: none;
  padding: 1px 2px;
  border-bottom: 1px solid var(--face);
  user-select: none;
}
.menu-bar > button {
  min-width: 0;
  padding: 2px 7px;
  background: none;
  box-shadow: none;
}
.menu-bar > button[aria-expanded="true"] {
  background: var(--select);
  color: var(--select-fg);
}
.menu-bar u { text-decoration: underline; }

/* --- popup menus (menu bar, start menu, context menu) ------------- */
.menu-pop {
  position: absolute;
  z-index: 9000;
  min-width: 140px;
  padding: 2px;
  background: var(--face);
  box-shadow: var(--out);
}
.menu-pop li > button,
.context-menu li > button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 4px 18px 4px 22px;
  background: none;
  box-shadow: none;
  text-align: left;
}
/* the dot Windows puts beside the active view mode */
.menu-pop li > button.checked::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  background: currentColor;
}
.menu-pop li > button:not(:disabled):hover,
.context-menu li > button:not(:disabled):hover {
  background: var(--select);
  color: var(--select-fg);
}
.menu-sep, .context-menu .menu-sep {
  height: 0;
  margin: 3px 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--hilite);
}

/* --- window body ------------------------------------------------- */
.window-body {
  flex: 1;
  min-height: 0;
  margin-top: 2px;
  overflow: auto;
  background: var(--face);
}
.window-body.paper {
  background: #fff;
  box-shadow: var(--in);
}

/* --- status bar -------------------------------------------------- */
.status-bar {
  display: flex;
  gap: 2px;
  flex: none;
  margin-top: 3px;
  padding: 0 1px;
}
.status-field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  box-shadow: var(--in-thin);
  white-space: nowrap;
  overflow: hidden;
}
.status-field span { overflow: hidden; text-overflow: ellipsis; }
.status-field:first-child { flex: 1; }

/* --- form fields ------------------------------------------------- */
input[type="text"],
input[type="email"],
textarea,
select {
  padding: 3px 4px;
  border: none;
  background: #fff;
  box-shadow: var(--in);
  outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus { outline: 1px dotted #000; outline-offset: -4px; }
textarea { resize: none; font-family: var(--font); }
::placeholder { color: #8a8a8a; }

.fieldset {
  padding: 12px;
  box-shadow: var(--out-thin);
  background: var(--face);
}
.field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.field-row.col { align-items: stretch; flex-direction: column; gap: 4px; }
.field-row:last-child { margin-bottom: 0; }
.field-row > label { flex: none; width: 78px; }
.field-row.col > label { width: auto; }
.field-row > input, .field-row > textarea { flex: 1; min-width: 0; }

.button-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.rule {
  height: 0;
  margin: 12px 0;
  border: none;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--hilite);
}

a { color: #0000c8; }
a:visited { color: #551a8b; }
a:hover { color: #1084d0; }

/* --- scrollbars -------------------------------------------------- */
.window-body { scrollbar-color: var(--face) #d8d8d8; }
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track {
  background-color: #fff;
  background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%),
                    linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}
::-webkit-scrollbar-thumb {
  background: var(--face);
  box-shadow: var(--out);
}
::-webkit-scrollbar-corner { background: var(--face); }
::-webkit-scrollbar-button:single-button {
  display: block;
  height: 17px;
  background: var(--face);
  box-shadow: var(--out);
  background-repeat: no-repeat;
  background-position: center;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3.5 0L7 4H0z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3.5 4L0 0h7z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7'><path d='M0 3.5L4 0v7z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7'><path d='M4 3.5L0 7V0z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:end,
::-webkit-scrollbar-button:single-button:vertical:increment:start,
::-webkit-scrollbar-button:single-button:horizontal:decrement:end,
::-webkit-scrollbar-button:single-button:horizontal:increment:start { display: none; }