/* public/os.css — the imagined operating system.
 *
 * Windows Vista Aero: the Aurora desktop, glass window frames, and system
 * dialogs. The work presents itself as a notification from a piece of
 * benign, well-made consumer software.
 *
 * Pure CSS. No images, no web fonts — nothing to fail on a gallery machine. */

:root {
  --ui: "Segoe UI", Frutiger, "Frutiger Linotype", Calibri, Carlito, Candara,
        "Lucida Grande", "Trebuchet MS", "DejaVu Sans", sans-serif;

  --dlg-ink:       #1b1b1b;
  --dlg-ink-soft:  #3f3f3f;
  --dlg-ink-faint: #5c5c5c;
  --dlg-heading:   #003399;

  --ctl-edge:      #97a4ae;
  --ctl-edge-hot:  #3c9ad9;
  --ctl-glow:      rgba(96, 184, 235, 0.78);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--ui);
  color: var(--dlg-ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;

  /* The Aurora desktop: teal above, a green-gold burst low and left,
   * a cyan sweep to the right. */
  background:
    radial-gradient(38% 26% at 40% 92%, rgba(255,255,255,0.95) 0%, rgba(246,255,205,0.55) 26%, rgba(200,245,130,0) 62%),
    radial-gradient(62% 52% at 4% 82%, rgba(217,240,86,0.80) 0%, rgba(150,214,74,0) 66%),
    radial-gradient(46% 62% at 96% 74%, rgba(86,222,238,0.62) 0%, rgba(38,176,214,0) 70%),
    radial-gradient(78% 58% at 12% 6%, rgba(58,190,142,0.72) 0%, rgba(24,146,124,0) 72%),
    radial-gradient(52% 44% at 78% 4%, rgba(46,168,178,0.55) 0%, rgba(22,120,146,0) 74%),
    linear-gradient(165deg, #12837a 0%, #0e7480 38%, #0a6274 68%, #0a4f63 100%);
  background-attachment: fixed;
}

/* The fanned filaments that sweep up from the lower left. Fine parallel
 * striations, masked so they only appear inside the burst. */
body::before {
  content: "";
  position: fixed;
  left: -60%; top: -40%;
  width: 220%; height: 200%;
  transform: rotate(-19deg);
  background: repeating-linear-gradient(
    92deg,
    rgba(255,255,255,0.00) 0px,
    rgba(255,255,255,0.00) 5px,
    rgba(255,255,255,0.30) 6px,
    rgba(255,255,255,0.00) 8px);
  -webkit-mask-image: radial-gradient(44% 20% at 44% 74%, #000 0%, rgba(0,0,0,0.55) 42%, transparent 78%);
  mask-image: radial-gradient(44% 20% at 44% 74%, #000 0%, rgba(0,0,0,0.55) 42%, transparent 78%);
  opacity: 0.72;
  pointer-events: none;
  z-index: 0;
}

/* Light rays falling from the top, and a soft vignette. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(196deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(172deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 44%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 52%, rgba(2,34,48,0.34) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------------ layout */

.desktop {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
}

/* ----------------------------------------------------------- glass dialog */

/* Aero framed a dialog in glass: a tall glass caption above, a thin glass
 * margin around, and an opaque client area inside. */
.dlg {
  width: min(560px, 100%);
  padding: 0 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg,
    rgba(226, 244, 250, 0.44) 0%,
    rgba(198, 228, 240, 0.34) 46%,
    rgba(184, 218, 234, 0.40) 100%);
  box-shadow:
    0 0 0 1px rgba(8, 52, 66, 0.42),
    0 26px 64px rgba(3, 28, 40, 0.52),
    0 4px 14px rgba(3, 28, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.dlg-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 2px 0 8px;
}

.dlg-name {
  font-size: 12.5px;
  font-weight: 400;
  color: #16323f;
  /* Aero composited caption text with a white glow behind it. */
  text-shadow:
    0 0 5px rgba(255,255,255,0.95),
    0 0 10px rgba(255,255,255,0.80),
    0 0 16px rgba(255,255,255,0.55);
}

.dlg-spacer { flex: 1; }

/* Chrome only — deliberately inert. */
.dlg-x {
  width: 45px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 3px 4px 5px 5px;
  background: linear-gradient(180deg, #f4a99e 0%, #e2604f 46%, #cf3a26 54%, #ef8877 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 1px 2px rgba(20,20,20,0.24);
  text-shadow: 0 1px 1px rgba(90, 20, 12, 0.6);
}

/* The opaque client area. */
.dlg-client {
  border: 1px solid rgba(126, 152, 166, 0.62);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(10, 40, 55, 0.14);
  overflow: hidden;
}

.dlg-main {
  display: flex;
  gap: 16px;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
}

.dlg-icon { flex: none; width: 32px; height: 32px; margin-top: 1px; }
.dlg-icon.sm { width: 26px; height: 26px; }

.dlg-copy { flex: 1; min-width: 0; }

.dlg-lead {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dlg-heading);
}

.dlg-copy p {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dlg-ink-soft);
}

.dlg-copy p.fine { font-size: 12px; color: var(--dlg-ink-faint); margin-bottom: 0; }
.dlg-copy p.strong { font-weight: 600; color: var(--dlg-ink); }

.dlg-choice { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }

/* The command strip Vista put along the bottom of a dialog. */
.dlg-commands {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px;
  background: #f0f0f0;
  border-top: 1px solid #dfdfdf;
}
.dlg-commands .left { margin-right: auto; }

/* --------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 27px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 12.5px;
  color: #101010;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--ctl-edge);
  border-radius: 3px;
  background: linear-gradient(180deg, #fdfefe 0%, #f1f6fa 45%, #dfe9f1 46%, #eef5fa 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86);
  transition: box-shadow 110ms ease, border-color 110ms ease, background 110ms ease;
}

.btn:hover {
  border-color: var(--ctl-edge-hot);
  background: linear-gradient(180deg, #f7fcff 0%, #e4f4fd 45%, #c9e9fb 46%, #e6f6fe 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.92), 0 0 7px var(--ctl-glow);
}

.btn:active {
  background: linear-gradient(180deg, #cfe6f4 0%, #bcdcf0 46%, #b3d6ec 47%, #cbe6f6 100%);
  box-shadow: inset 0 2px 4px rgba(20, 60, 85, 0.28);
}

.btn:focus-visible { outline: 1px dotted #2a2a2a; outline-offset: -4px; }

/* The default button carried a standing blue glow. */
.btn.primary {
  border-color: #4ca3dc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 0 0 1px rgba(120, 200, 240, 0.85);
}

/* Larger controls for the two terminals. */
.btn.terminal {
  min-width: 148px;
  height: 34px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.btn[disabled] { opacity: 0.55; cursor: default; box-shadow: none; }

/* ------------------------------------------------------------------ field */

.field { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.field label { font-size: 12.5px; color: var(--dlg-ink); }

.input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 12.5px;
  color: #101010;
  background: #fff;
  border: 1px solid #a7b4bd;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(30, 60, 80, 0.16);
  outline: none;
}
.input:focus {
  border-color: var(--ctl-edge-hot);
  box-shadow: inset 0 1px 2px rgba(30,60,80,0.14), 0 0 5px var(--ctl-glow);
}

.hidden { display: none; }

@media (max-width: 560px) {
  .dlg-main { padding: 18px 16px 16px; gap: 12px; }
  .dlg-commands { padding: 12px 16px; }
  .btn.terminal { min-width: 0; flex: 1; }
}

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

/* ==========================================================================
   APPLICATION WINDOWS
   Same operating system as the dialogs, but a resident application rather
   than a modal: menu strip, toolbar, client area, status bar.
   ========================================================================== */

body.app { overflow: auto; }

.workspace {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  justify-content: center;
  padding: 22px 18px 26px;
}

.win {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  padding: 0 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg,
    rgba(226, 244, 250, 0.44) 0%,
    rgba(198, 228, 240, 0.34) 46%,
    rgba(184, 218, 234, 0.40) 100%);
  box-shadow:
    0 0 0 1px rgba(8, 52, 66, 0.42),
    0 26px 64px rgba(3, 28, 40, 0.52),
    0 4px 14px rgba(3, 28, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.win.narrow { width: min(820px, 100%); }

.win-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 2px 0 10px;
  flex: none;
}

.win-name {
  font-size: 12.5px;
  color: #16323f;
  text-shadow:
    0 0 5px rgba(255,255,255,0.95),
    0 0 10px rgba(255,255,255,0.80),
    0 0 16px rgba(255,255,255,0.55);
}
.win-spacer { flex: 1; }

.win-client {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(126, 152, 166, 0.62);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(10, 40, 55, 0.14);
  overflow: hidden;
}

/* --- menu strip --- */

.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  flex: none;
  font-size: 12px;
  color: #1f1f1f;
  background: linear-gradient(180deg, #fdfefe 0%, #eef3f7 100%);
  border-bottom: 1px solid #d6dee4;
}
.menu span, .menu a {
  padding: 3px 9px;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
}
.menu a:hover { background: #cde7f8; box-shadow: inset 0 0 0 1px #a9d4ef; }
.menu .fill { flex: 1; }
.menu .muted { color: #6a7780; }

/* --- toolbar --- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  flex: none;
  background: linear-gradient(180deg, #f8fbfd 0%, #eaf1f6 100%);
  border-bottom: 1px solid #d6dee4;
}
.toolbar .fill { flex: 1; }
.toolbar .label {
  font-size: 11.5px;
  color: #4a5b66;
}

/* --- status bar --- */

.statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 5px 12px;
  flex: none;
  font-size: 11.5px;
  color: #43535e;
  background: linear-gradient(180deg, #f4f8fa 0%, #e8eff4 100%);
  border-top: 1px solid #d6dee4;
}
.statusbar .fill { flex: 1; }
.statusbar b { font-weight: 600; color: #1c3b4b; }

.led {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.led::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #b9c6cd 62%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
}
.led.on::before {
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #6fcf3a 60%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 0 7px rgba(111, 207, 58, 0.85);
}
.led.warn::before {
  background: radial-gradient(circle at 34% 30%, #fff6d8 0%, #f0b41c 60%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 0 7px rgba(240, 180, 28, 0.8);
}

/* --- group box --- */

.group {
  border: 1px solid #cfd9e0;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
  padding: 14px 16px 16px;
}
.group > h2 {
  margin: -24px 0 14px -4px;
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dlg-heading);
  background: #fff;
}

/* --- notice bars --- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 13px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #f0c88a;
  border-radius: 3px;
  background: linear-gradient(180deg, #fffaef 0%, #fdf1d8 100%);
  color: #6a4a06;
}
.notice.bad { border-color: #e5a49c; background: linear-gradient(180deg,#fff5f4,#fbe4e1); color: #7d2418; }

/* --- list view --- */

.listview {
  border: 1px solid #c8d3da;
  border-radius: 3px;
  background: #fff;
  overflow: auto;
}
.lv-head {
  display: flex;
  position: sticky;
  top: 0;
  font-size: 11.5px;
  color: #33454f;
  background: linear-gradient(180deg, #fbfdfe 0%, #eaf0f5 100%);
  border-bottom: 1px solid #cfd9e0;
}
.lv-head span { padding: 6px 10px; border-right: 1px solid #dde5ea; }
.lv-row {
  display: flex;
  font-size: 12px;
  border-bottom: 1px solid #eef2f5;
  cursor: pointer;
}
.lv-row span { padding: 7px 10px; }
.lv-row:hover { background: #eaf5fd; }
.lv-row.sel { background: linear-gradient(180deg, #d4ebfb 0%, #bcdff7 100%); }
.lv-row.event { color: #5b6b75; font-style: italic; cursor: default; background: #fbfcfd; }
.lv-row.event:hover { background: #fbfcfd; }
.lv-row .mono { font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); color: #6d7d87; }

/* --- pill / tab strip --- */

.tabs { display: flex; gap: 4px; }
.tab {
  padding: 6px 16px;
  font-size: 12.5px;
  color: #22434f;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #b7c5cd;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #f2f7fa 0%, #e2ebf1 100%);
}
.tab.on {
  color: #0b3c53;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfe 100%);
  border-color: #9fb4c0;
}