/* Serce Inc. — a small retro desktop: a menu bar, a dock, and windows you can move around.
   Black outlines and hard shadows; the only color is the app's sunrise, in the pixel icons. */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --desktop: #efdcc9;
  --desktop-dot: #dcc0a7;
  --paper: #fffdf8;
  --ink: #000;
  --muted: #5a544c;
  --sunrise: #f0645a;

  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display: "Instrument Serif", Georgia, serif;

  --menubar: 34px;
  --dock: 64px;
  --line: 2px;
  --shadow: 5px 5px 0 var(--ink);
  --lifted-shadow: 10px 10px 0 var(--ink);

  /* A spring that overshoots a little, then settles. */
  --spring: linear(0, 0.035, 0.125, 0.249, 0.391, 0.535, 0.673, 0.795, 0.899, 0.983, 1.045, 1.088, 1.114, 1.125,
    1.125, 1.117, 1.103, 1.086, 1.068, 1.05, 1.033, 1.019, 1.007, 0.998, 0.991, 0.987, 0.985, 0.984, 0.985, 0.986, 1);
  --glide: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desktop: #2b2420;
    --desktop-dot: #3d332c;
    --paper: #1d1916;
    --ink: #f6efe5;
    --muted: #b5aa9c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --desktop: #2b2420;
  --desktop-dot: #3d332c;
  --paper: #1d1916;
  --ink: #f6efe5;
  --muted: #b5aa9c;
  color-scheme: dark;
}

/* ─── Desktop backgrounds, picked from the Desktop menu ───
   Each one sets its own colors and pattern, so a menu swatch can show it too. */

:root,
[data-desktop="sand"] {
  --desk-a: #efdcc9;
  --desk-b: #dcc0a7;
  --desktop-pattern: radial-gradient(var(--desk-b) 1px, transparent 1.2px) 0 0 / 6px 6px, var(--desk-a);
}

[data-desktop="graph"] {
  --desk-a: #e8eeec;
  --desk-b: #c3d1cd;
  --desktop-pattern:
    linear-gradient(var(--desk-b) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--desk-b) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--desk-a);
}

[data-desktop="dither"] {
  --desk-a: #d9d6d0;
  --desk-b: #a9a49c;
  --desktop-pattern: conic-gradient(var(--desk-b) 25%, var(--desk-a) 0 50%, var(--desk-b) 0 75%, var(--desk-a) 0) 0 0 / 4px 4px;
}

[data-desktop="sunrise"] {
  --band-1: #ffecd6;
  --band-2: #ffdcb8;
  --band-3: #ffc999;
  --band-4: #ffb27f;
  --band-5: #fa9670;
  --band-6: #f27a62;
  --desktop-pattern: linear-gradient(
    var(--band-1) 0 30%, var(--band-2) 0 48%, var(--band-3) 0 62%,
    var(--band-4) 0 74%, var(--band-5) 0 86%, var(--band-6) 0
  );
}

[data-desktop="pebbles"] {
  --desk-a: #efdcc9;
  --desktop-pattern: url("desktops/pebbles.svg") 0 0 / 160px 160px, var(--desk-a);
}

[data-desktop="night"] {
  --desk-a: #1c2340;
  --outline: #fffdf8;
  --desktop-pattern: url("desktops/night.svg") 0 0 / 360px 360px, var(--desk-a);
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-desktop="sand"] {
    --desk-a: #2b2420;
    --desk-b: #3d332c;
  }

  [data-desktop="graph"] {
    --desk-a: #1f2624;
    --desk-b: #34403c;
  }

  [data-desktop="dither"] {
    --desk-a: #2a2826;
    --desk-b: #45413c;
  }

  [data-desktop="sunrise"] {
    --band-1: #17152a;
    --band-2: #211932;
    --band-3: #2e1f3a;
    --band-4: #40263f;
    --band-5: #552c42;
    --band-6: #6a3543;
  }

  [data-desktop="pebbles"] {
    --desk-a: #2b2420;
  }

  [data-desktop="night"] {
    --desk-a: #10152b;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Anything hidden stays hidden, whatever layout it would otherwise have. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--desktop-pattern);
  background-attachment: fixed;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 2px;
}

.pixel-icon {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/* ─── Menu bar ─── */

.menubar {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 1000;
  height: var(--menubar);
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border-bottom: var(--line) solid var(--ink);
  font-size: 0.875rem;
}

.menubar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-right: var(--line) solid var(--ink);
  background: none;
  text-decoration: none;
  white-space: nowrap;
}

button.menubar-item {
  cursor: pointer;
}

.menubar-item .pixel-icon {
  width: 18px;
  height: 18px;
}

.menubar-item[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
}

.menu {
  position: fixed;
  top: calc(var(--menubar) - var(--line));
  left: 0;
  z-index: 1001;
  min-width: 220px;
  padding: 4px 0;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow);
}

.menu button {
  display: block;
  width: 100%;
  padding: 6px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.menu button:hover,
.menu button:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}

/* The Desktop menu is a grid of swatches; the current one gets a ring. */
.menu.swatches {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.menu .swatch {
  width: 56px;
  height: 38px;
  padding: 0;
  border: var(--line) solid var(--ink);
  background: var(--desktop-pattern);
  transition: box-shadow 160ms var(--glide), translate 160ms var(--glide);
}

.menu .swatch:hover,
.menu .swatch:focus-visible {
  background: var(--desktop-pattern);
  translate: -2px -2px;
  box-shadow: 3px 3px 0 var(--ink);
}

.menu .swatch[aria-checked="true"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

/* The roomier patterns are scaled down so a pebble or a few stars show in the small swatch. */
.menu .swatch[data-desktop="pebbles"] {
  background: url("desktops/pebbles.svg") 14px 5px / 80px 80px, var(--desk-a);
}

.menu .swatch[data-desktop="night"] {
  background:
    linear-gradient(#fffdf8 0 0) 7px 6px / 2px 2px no-repeat,
    linear-gradient(#ffb86b 0 0) 21px 20px / 2px 2px no-repeat,
    linear-gradient(#fffdf8 0 0) 34px 9px / 2px 2px no-repeat,
    linear-gradient(#fffdf8 0 0) 43px 25px / 2px 2px no-repeat,
    linear-gradient(#fffdf899 0 0) 13px 27px / 1px 1px no-repeat,
    var(--desk-a);
}

.menu hr {
  margin: 4px 0;
  border: 0;
  border-top: 1px dashed var(--ink);
}

/* ─── Windows ─── */

.window {
  position: absolute;
  width: min(var(--width, 440px), calc(100vw - 32px));
  max-height: calc(100dvh - var(--menubar) - var(--dock) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 200ms var(--glide), translate 200ms var(--glide);
}

/* Picked up while dragging or resizing: the window rises off the desktop. */
.window.is-lifted {
  translate: -3px -3px;
  box-shadow: var(--lifted-shadow);
}

/* Rolled up to just its title bar (double-click the title bar). */
.window.is-shaded .window-body,
.window.is-shaded .grow-box {
  display: none;
}

.window.is-shaded .titlebar {
  border-bottom: 0;
}

/* The grow box in the corner: drag it to resize the window. */
.grow-box {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-top: var(--line) solid var(--ink);
  border-left: var(--line) solid var(--ink);
  background: var(--paper);
  cursor: nwse-resize;
  touch-action: none;
}

.grow-box::before,
.grow-box::after {
  content: "";
  position: absolute;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.grow-box::before {
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
}

.grow-box::after {
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
}

.titlebar {
  flex: none;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  border-bottom: var(--line) solid var(--ink);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.titlebar:active {
  cursor: grabbing;
}

/* The front window gets pinstripes, like a classic desktop. */
.window.is-front .titlebar {
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px) left 34px center / calc(100% - 42px) 15px no-repeat;
}

.close-box {
  width: 18px;
  height: 18px;
  padding: 0;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  box-shadow: -4px 0 0 var(--paper), 4px 0 0 var(--paper);
  cursor: pointer;
  position: relative;
}

.close-box::before,
.close-box::after {
  content: "";
  position: absolute;
  inset: 6px 2px auto;
  height: 2px;
  background: var(--ink);
  opacity: 0;
}

.close-box::before {
  transform: rotate(45deg);
}

.close-box::after {
  transform: rotate(-45deg);
}

.close-box:hover::before,
.close-box:hover::after,
.close-box:focus-visible::before,
.close-box:focus-visible::after {
  opacity: 1;
}

.window-title {
  justify-self: center;
  margin: 0;
  padding: 0 10px;
  background: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
}

.window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 22px 24px 26px;
  scrollbar-color: var(--ink) var(--paper);
}

.window-body::-webkit-scrollbar {
  width: 16px;
}

.window-body::-webkit-scrollbar-track {
  border-left: var(--line) solid var(--ink);
  background: repeating-linear-gradient(45deg, var(--paper) 0 2px, var(--desktop-dot) 2px 3px);
}

.window-body::-webkit-scrollbar-thumb {
  border: var(--line) solid var(--ink);
  background: var(--paper);
}

/* The outlines that fly between the dock and a window as it opens or closes. */
.zoom-outline {
  position: fixed;
  z-index: 998;
  border: var(--line) solid var(--outline, var(--ink));
  pointer-events: none;
}

/* A new desktop background spreading out from the swatch that was picked. */
.desktop-reveal {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--desktop-pattern);
  background-attachment: fixed;
  pointer-events: none;
}

/* ─── Window content ─── */

.window h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 3rem;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.window h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.window p {
  margin: 0 0 0.875rem;
  max-width: 62ch;
}

.muted {
  color: var(--muted);
}

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.identity .pixel-icon {
  width: 48px;
  height: 48px;
}

.identity p {
  margin: 0;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 18px 0 0;
  border-top: var(--line) solid var(--ink);
}

.facts dt,
.facts dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink);
}

.facts dt {
  padding-right: 24px;
  color: var(--muted);
}

/* Apps: a list view, like a file browser. */
.list {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 18px;
}

.list th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
  padding: 0 12px 6px 0;
  border-bottom: var(--line) solid var(--ink);
}

.list td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px dashed var(--ink);
  vertical-align: middle;
}

.list .name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.list img {
  width: 32px;
  height: 32px;
  border: var(--line) solid var(--ink);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms var(--glide), box-shadow 120ms var(--glide);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.email {
  display: block;
  margin: 6px 0 20px;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1.1;
  word-break: break-word;
}

.policy h3:first-of-type {
  margin-top: 0.5rem;
}

.policy ul {
  padding-left: 1.25rem;
  margin: 0 0 0.875rem;
}

/* ─── Dock ─── */

.dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 999;
  transform: translateX(-50%);
  display: flex;
  max-width: 100vw;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-bottom: 0;
}

.dock-item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  width: 68px;
  height: var(--dock);
  padding: 0;
  border: 0;
  border-left: var(--line) solid var(--ink);
  background: none;
  font-size: 0.75rem;
  cursor: pointer;
}

.dock-item .pixel-icon {
  width: 24px;
  height: 24px;
  transition: transform 420ms var(--spring);
}

.dock-item:hover .pixel-icon {
  transform: translateY(-4px);
}

.dock-item:active .pixel-icon {
  transform: translateY(-1px) scale(0.86);
  transition-duration: 90ms;
}

.dock-item:first-child {
  border-left: 0;
}

.dock-item:hover {
  background: var(--desktop);
}

/* An open window's dock item gets a small marker, like a running app. */
.dock-item::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  background: var(--ink);
  scale: 0;
  transition: scale 420ms var(--spring);
}

.dock-item[aria-expanded="true"]::after {
  scale: 1;
}

/* The dock slides away when it's empty, and back up while an icon is being dragged. */
.dock {
  transition: translate 320ms var(--glide);
}

.dock.is-empty {
  width: 160px;
  height: var(--dock);
  translate: 0 110%;
}

.dock.is-empty.is-receiving {
  translate: none;
}

.dock.is-over {
  outline: var(--line) dashed var(--outline, var(--ink));
  outline-offset: 5px;
}

.dock-caret {
  position: fixed;
  z-index: 1001;
  width: 4px;
  background: var(--sunrise);
  pointer-events: none;
  transition: left 140ms var(--glide);
}

/* ─── Icons out on the desktop, and the copy that follows the pointer while one is dragged ─── */

.desktop-icons {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.desktop-icons .dock-item,
.drag-ghost {
  position: absolute;
  width: 92px;
  height: auto;
  padding: 6px 4px;
  gap: 6px;
  border: 0;
  background: none;
  pointer-events: auto;
}

.desktop-icons .dock-item .pixel-icon,
.drag-ghost .pixel-icon {
  width: 36px;
  height: 36px;
}

.desktop-icons .dock-item span,
.drag-ghost span {
  padding: 1px 6px;
  background: var(--paper);
}

.desktop-icons .dock-item:hover {
  background: none;
}

.desktop-icons .dock-item:hover span {
  background: var(--ink);
  color: var(--paper);
}

.desktop-icons .dock-item::after {
  bottom: -4px;
}

.drag-ghost {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  rotate: -4deg;
  scale: 1.08;
}

.drag-ghost::after {
  display: none;
}

.drag-ghost span {
  box-shadow: 3px 3px 0 var(--ink);
}

.dock-item.is-drag-source {
  opacity: 0.3;
}

/* On larger touch screens, a finger on an icon drags it rather than scrolling the page. */
@media (min-width: 641px) {
  .dock-item {
    touch-action: none;
  }
}

/* ─── Pages that are a single window (privacy, not found) ─── */

.page-window {
  position: relative;
  margin: calc(var(--menubar) + 40px) auto 56px;
  max-height: none;
}

.page-window .titlebar {
  cursor: default;
}

/* ─── Without JavaScript, every window simply reads in order ─── */

.no-js .window {
  position: relative;
  margin: 32px auto;
  max-height: none;
}

.no-js .desktop {
  padding-top: var(--menubar);
  padding-bottom: 24px;
}

.no-js .dock,
.no-js .close-box,
.no-js [data-menu-button] {
  display: none;
}

.no-js .titlebar {
  cursor: default;
}

/* ─── Phones: one window at a time, filling the space between the bars ─── */

@media (max-width: 640px) {
  :root {
    --dock: 58px;
  }

  .js .window {
    position: fixed;
    inset: calc(var(--menubar) + 10px) 10px calc(var(--dock) + 12px);
    width: auto;
    max-height: none;
  }

  .js .titlebar {
    cursor: default;
  }

  .window h2 {
    font-size: 2.5rem;
  }

  .dock {
    left: 0;
    right: 0;
    transform: none;
    overflow-x: auto;
    border-left: 0;
    border-right: 0;
  }

  .dock-item {
    flex: 1 0 60px;
    width: auto;
    font-size: 0.6875rem;
  }

  .dock-item .pixel-icon {
    width: 22px;
    height: 22px;
  }

  .dock-item::after {
    bottom: 3px;
  }

  .grow-box {
    display: none;
  }

  .page-window {
    margin: calc(var(--menubar) + 16px) 10px 32px;
    width: auto;
  }
}

/* ─── Reduced motion: everything changes instantly ─── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}