/* A readable workstation: neutral paper, machined inner edges and real type.
   This finish leaves the desktop's arrangement and device navigation alone. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

#screen-anchor .login-screen,
.retro-os {
  --desktop-font: "IBM Plex Mono", "Courier New", Courier, monospace;
  --os-paper: #f6f5ef;
  --os-ink: #242421;
  --os-muted: #5b5b53;
  --os-line: #77776d;
  --os-frame: #474740;
  --os-soft: #e1e0d9;
  --os-surface: #efeee8;
  --os-surface-low: #b8b7ae;
  --os-highlight: #fffffb;
  color: var(--os-ink);
  background: var(--os-paper);
  font-weight: 400;
  font-synthesis: none;
  text-shadow: none;
}
/* A single family also covers local article/profile/map font shorthands. */
.retro-os,
.retro-os *,
#screen-anchor .login-screen,
#screen-anchor .login-screen * { font-family: var(--desktop-font) !important; }
.retro-os.os-high-contrast {
  --os-paper: #fff;
  --os-ink: #111;
  --os-muted: #333;
  --os-line: #555;
  --os-frame: #222;
}
.flat-mode #screen-anchor { border-color: var(--os-frame, #474740); box-shadow: none; }
#screen-anchor .screen-inner::after { background: none; box-shadow: inset 0 0 10px #0000000a; }
.retro-os ::selection,
#screen-anchor .login-screen ::selection { color: #f6f5ef; background: #33332d; }
.retro-os :is(button, a, input, textarea, select, canvas):focus-visible { outline: 1px solid var(--os-ink); outline-offset: 3px; }
.retro-os .os-workspace { background: var(--os-paper); background-image: none !important; }
.retro-os :is(.os-brand, .os-titlebar h1, .os-project-card-label strong,
  .os-case-heading h2, .os-case-body > h2, .os-demo-page > h2,
  .os-profile-identity h2, .os-profile h3, .os-contact-identity h2,
  .os-contact-write h2, .os-empty-collection h2, .os-settings legend,
  .os-step-detail h3, .os-process-step strong, .os-material-file strong,
  .os-project-facts dt) { font-weight: 600; }
.retro-os :is(.os-brand, .os-titlebar h1, .os-desktop-item > span,
  .os-project-card-label strong, .os-profile-identity h2,
  .os-contact-identity h2) { letter-spacing: -.025em; }
.retro-os :is(.os-main-menu > button, .os-taskbar > button,
  .os-case-tabs > button, .os-desktop-item > span) { font-weight: 500; }

/* A window has an outside contour, a bevel and a second inside contour.
   The rings sit over its existing edge; they add no padding or layout shift. */
.retro-os .os-window {
  border-color: #353531;
  background: var(--os-paper);
  box-shadow: none;
}
.retro-os .os-window::before,
.retro-os .os-window::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 0;
}
.retro-os .os-window::before {
  inset: 0;
  z-index: 18;
  border: 2px solid;
  border-color: #fffffb #a8a79e #a8a79e #fffffb;
}
.retro-os .os-window::after {
  inset: 3px;
  z-index: 19;
  border: 1px solid #777771;
  box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #d0cfc7;
}
.retro-os :is(.os-menubar, .os-taskbar, .os-titlebar, .os-pathbar,
  .os-browser-toolbar, .os-case-tabs, .os-dropdown) {
  background: var(--os-surface);
  background-image: none;
  border-color: var(--os-frame);
  box-shadow: inset 1px 1px 0 var(--os-highlight), inset -1px -1px 0 #cbc9c0;
}
.retro-os .os-titlebar h1,
.retro-os .os-titlebar > .os-icon { background: transparent; }
.retro-os .os-dropdown { box-shadow: inset 1px 1px 0 var(--os-highlight), inset -1px -1px 0 #aaa99b, inset 0 0 0 3px var(--os-surface); }
.retro-os .os-notice { box-shadow: none; font-weight: 500; }
.retro-os .os-taskbar > button { border-color: var(--os-frame) !important; }
.retro-os .os-taskbar > button:hover { color: var(--os-ink); background: #deddd1; --os-icon-face: #deddd1; }

/* Three internal lines form a short, solid bevel. No cast side shadow. */
.retro-os :is(.os-button, .os-small-button, .os-window-controls button,
  .os-map-return, .os-layout-switch button, .os-case-tabs button,
  .os-folder-return, .os-window-footer button),
.retro-os .retro-games :is(.rg-tabs, .rg-actions, .rg-toolbar,
  .rg-dpad, .rg-mine-mode) > button {
  --key-ink: #242421;
  --key-face: #efeee8;
  --key-edge: #3b3b34;
  --key-highlight: #fffffb;
  --key-inset: #a7a69d;
  --key-inner: #c8c7be;
  --key-depth: transparent;
  filter: none;
  font-weight: 500;
  text-shadow: none;
}
.retro-os :is(.os-button, .os-small-button, .os-window-controls button,
  .os-map-return, .os-layout-switch button, .os-case-tabs button,
  .os-folder-return, .os-window-footer button)::before,
.retro-os .retro-games :is(.rg-tabs, .rg-actions, .rg-toolbar,
  .rg-dpad, .rg-mine-mode) > button::before {
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%,
    0 calc(100% - 2px), 0 2px);
}
.retro-os :is(.os-button, .os-small-button, .os-window-controls button,
  .os-map-return, .os-layout-switch button, .os-case-tabs button,
  .os-folder-return, .os-window-footer button)::after,
.retro-os .retro-games :is(.rg-tabs, .rg-actions, .rg-toolbar,
  .rg-dpad, .rg-mine-mode) > button::after {
  inset: 1px;
  clip-path: polygon(1px 0, calc(100% - 1px) 0, 100% 1px,
    100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%,
    0 calc(100% - 1px), 0 1px);
  background: var(--key-face);
  box-shadow: inset 1px 1px 0 var(--key-highlight),
    inset -1px -1px 0 var(--key-inset),
    inset 0 0 0 2px var(--key-face),
    inset 0 0 0 3px var(--key-inner);
}
.retro-os :is(.os-button, .os-small-button, .os-window-controls button,
  .os-map-return, .os-layout-switch button, .os-case-tabs button,
  .os-window-footer button):where(:hover:not(:disabled)) {
  --key-face: #f9f8f0;
  --key-edge: #242421;
  --key-inset: #959487;
  --key-inner: #c2c1b4;
}
.retro-os .os-button.os-button-dark,
.retro-os .os-button.os-button-dark:hover,
.retro-os .retro-games :is(.rg-tabs, .rg-mine-mode) > button[aria-pressed=true] {
  --key-ink: #fffff8;
  --key-face: #363630;
  --key-edge: #25251f;
  --key-highlight: #6d6d62;
  --key-inset: #20201b;
  --key-inner: #55554a;
  font-weight: 600;
}
.retro-os .os-layout-switch > button[aria-pressed=true],
.retro-os .os-case-tabs > button[aria-current=page] {
  --key-ink: #fcfbf6;
  --key-face: #363633;
  --key-edge: #292926;
  --key-highlight: #72726c;
  --key-inset: #1e1e1b;
  --key-inner: #565650;
  --os-icon-face: #363633;
  font-weight: 600;
}
.retro-os :is(.os-button, .os-small-button):disabled {
  --key-ink: #68685f;
  --key-face: #eeede5;
  --key-edge: #77776d;
  --key-highlight: #fffffa;
  --key-inset: #b5b4a8;
  --key-inner: #d0cfc3;
  opacity: .55;
}
.retro-os .os-window-footer { background: var(--os-frame); }
.retro-os .os-window-footer button > span:last-child { opacity: .85; }
.retro-os :is(.os-titlebar, .os-taskbar, .os-project-card-label,
  .os-case-tabs, .os-window-footer, .os-profile-links,
  .os-journal-sidebar .os-folder-return) .os-icon
  :is(path, rect, circle, ellipse, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}
.retro-os .os-window-content { scrollbar-color: #9a998c var(--os-paper); }
.retro-os .os-window-content::-webkit-scrollbar-track { background: #e8e7dc; border-color: var(--os-frame); }
.retro-os .os-window-content::-webkit-scrollbar-thumb { background: var(--os-surface); border-color: var(--os-frame); box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #9b9a8c; }
.retro-os .os-window-content::-webkit-scrollbar-button { background: var(--os-surface); border-color: var(--os-frame); }
.retro-os .os-browser-toolbar .os-address { color: var(--os-ink); background: var(--os-paper); border-color: #646458; box-shadow: inset 1px 1px 0 #c1c0b3, inset -1px -1px 0 #fffffb; font-weight: 400; }

.retro-os :is(.os-profile-card, .os-contact-mail, .os-settings fieldset,
  .os-material-grid > button, .os-process-step, .os-journal-sidebar .os-print-ad) {
  background: var(--os-paper);
  background-image: none;
  border-color: #555;
  border-width: 1.5px;
  box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #cccbbe;
}
.retro-os :is(.os-cover-frame, .os-case-cover, .os-profile-photo img) { border-color: #555; border-width: 1.5px; box-shadow: none; }
.retro-os .os-project-card:hover,
.retro-os .os-project-card.is-selected { outline: 1.5px solid #555; }
.retro-os .os-profile-photo img { image-rendering: pixelated; }
.retro-os .os-profile-card { box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #c6c5b8, inset 0 0 0 3px #ebeade; }
.retro-os .os-profile-intro,
.retro-os .os-profile section > p { font-weight: 400; }
.retro-os .os-project-facts { font-size: max(16px, .9em); }
.retro-os .os-step-detail,
.retro-os .os-empty-collection p { font-size: max(16px, .9em); }
.retro-os .os-step-detail { background: var(--os-paper); border-color: #555; border-width: 1.5px; box-shadow: inset 1px 1px 0 #fffffb; }
.retro-os .os-process-step strong { font-weight: 500; }
.retro-os .os-process-step:hover,
.retro-os .os-process-step.is-active { color: var(--os-ink); background: #e2e1db; border-color: #555; box-shadow: inset 1px 1px 0 #faf9f2, inset -1px -1px 0 #aaa9a0; --os-icon-face: #e2e1db; }
.retro-os .os-material-grid > button:hover { background: #f0efe9; box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #aaa99f; }
.retro-os .os-inset { border-color: #555; border-width: 1.5px; }
.retro-os .os-inset h3 { background: var(--os-paper); background-image: none; }
.retro-os .os-settings legend { color: var(--os-ink); }
.retro-os .os-contact-presets button { background: #eeede3; border-color: #68685b; box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #a9a796, inset 0 0 0 3px #e0dfd1; font-weight: 500; }
.retro-os .os-contact-presets button:hover:not([aria-pressed=true]) { background: #f7f6eb; }
.retro-os .os-contact-presets button[aria-pressed=true] { background: #38382f; color: #fbfaf2; box-shadow: inset 1px 1px 0 #737367, inset -1px -1px 0 #22221a, inset 0 0 0 3px #4b4b3e; }
.retro-os .os-contact-write textarea { color: var(--os-ink); background: #faf9f3; border-color: #68685a; box-shadow: inset 1px 1px 0 #c2c0b2, inset -1px -1px 0 #fffffc; font-weight: 400; }
.retro-os .os-contact-mail > a { font-weight: 500; }
.retro-os .os-journal :is(.os-article-heading h2, article > section h3) { font-weight: 600; }
.retro-os .os-journal :is(.os-journal-lead, article > section p) { font-weight: 400; }
.retro-os .os-journal-sidebar .os-print-ad :is(h3, strong) { font-weight: 500; }

/* The skill map keeps its measured coordinates and running spring transforms. */
.retro-os .pm-map {
  --pm-paper: #f6f5ef;
  --pm-ink: #242421;
  --pm-line: #828276;
  --pm-muted: #626258;
  color: var(--pm-ink);
  background: var(--pm-paper);
}
.retro-os .pm-map :is(.pm-topbar, .pm-display, .pm-detail-heading) { background: #efeee8; border-color: #777771; }
.retro-os .pm-map :is(.pm-lenses button, .pm-display button,
  .pm-zoom button, .pm-detail-heading > button, .pm-contact) {
  color: var(--pm-ink);
  background: #eeede3;
  border-color: #757569;
  box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #b3b1a0;
  font-weight: 500;
}
.retro-os .pm-map :is(.pm-lenses button, .pm-display button,
  .pm-node, .pm-list-node)[aria-pressed=true],
.retro-os .pm-map .pm-contact:hover,
.retro-os .pm-map .pm-detail-heading > button:hover {
  background: #36362e;
  color: #faf9f1;
  border-color: #35352c;
  box-shadow: inset 1px 1px 0 #6f6f60, inset -1px -1px 0 #22221a;
}
.retro-os .pm-map :is(.pm-zoom button:hover, .pm-list-node:hover:not([aria-pressed=true])) { background: #e1e0d3; color: #242421; }
.retro-os .pm-map .pm-node { color: #30302b; background: var(--pm-paper); border-color: #858578; box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #d5d3c5; }
.retro-os .pm-map .pm-node[aria-pressed=true] { color: #faf9f1; background: #36362e; }
.retro-os .pm-map .pm-detail { border-color: #4d4d42; background: var(--pm-paper); box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #aeac9a; }
.retro-os .pm-map .pm-detail-heading h2 { font-weight: 600; }
.retro-os .pm-map .pm-detail-action { font-size: 16px; line-height: 1.55; font-weight: 400; }
.retro-os .pm-map .pm-detail dd { font-size: 15px; line-height: 1.55; font-weight: 400; }
.retro-os .pm-map :is(.pm-scale, .pm-detail-heading p, .pm-detail dt, .pm-related h3, .pm-list-heading > span) { color: #626258; }
.retro-os .pm-map :is(.pm-connection, .pm-overview-connection, .pm-web-link) { stroke: #7d7d70; }
.retro-os .pm-map :is(.pm-connection.is-near, .pm-web-link.is-near) { stroke: #34342a; }
.retro-os .pm-map .pm-web-node { color: #303029; background: none; box-shadow: none; }
.retro-os .pm-map .pm-web-node > span { color: #303029; background: var(--pm-paper); font-weight: 400; }
.retro-os .pm-map .pm-web-node[aria-pressed=true] > span { color: #faf9f1; background: #36362e; font-weight: 500; }
.retro-os .pm-map .pm-web-node.is-neighbor > span { font-weight: 500; }
.retro-os .pm-map .pm-web-dot { background: #555547; }
.retro-os .pm-map .pm-web-node.is-neighbor .pm-web-dot { background: #333328; }

.retro-os .retro-games { --rg-paper: #f6f5ef; --rg-ink: #242421; --rg-muted: #e4e3d8; background: #f6f5ef; color: #242421; }
.retro-os .retro-games :is(.rg-bounce-message, .rg-bounce-pad > button) { border-color: #646456; background: #eeede2; }
.retro-os .retro-games .rg-bounce-pad > button { box-shadow: inset 1px 1px 0 #fffffb, inset -1px -2px 0 #aba894; }
.retro-os .retro-games .rg-bounce-pad > button.is-held { color: #fffef5; background: #3d3d32; box-shadow: inset 1px 2px 0 #25251c; }

#screen-anchor #enter-desktop {
  --key-ink: #242421;
  --key-face: #efeee8;
  --key-edge: #3b3b32;
  --key-highlight: #fffffb;
  --key-inset: #a4a294;
  --key-depth: transparent;
  font-weight: 500;
  filter: none;
  box-shadow: none;
}
#screen-anchor #enter-desktop::before { clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }
#screen-anchor #enter-desktop::after { clip-path: polygon(1px 0, calc(100% - 1px) 0, 100% 1px, 100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px), 0 1px); background: var(--key-face); box-shadow: inset 1px 1px 0 #fffffb, inset -1px -1px 0 #a7a69d, inset 0 0 0 2px #efeee8, inset 0 0 0 3px #c8c7be; }
#screen-anchor #enter-desktop > span { color: #faf9f1; background: #37372e; border-color: #24241c; border-radius: 0; box-shadow: inset 1px 1px 0 #747465, inset -1px -1px 0 #212119, inset 0 0 0 3px #444437; }
#screen-anchor #enter-desktop:hover { --key-face: #f7f6ed; --key-inset: #949181; }
#screen-anchor #enter-desktop:hover > span { background: #303027; }