/* Windows 98: beveled chrome, gradient title bar, Start menu taskbar,
   web-era blue links and Verdana reading text. */
:root {
  --desktop: #008080; --face: #c0c0c0; --hi: #dfdfdf; --light: #fff; --shadow: #808080; --dark: #0a0a0a;
  --title-a: #000080; --title-b: #1084d0; --select: #000080; --link: #0000ee; --link-visited: #551a8b;
  --ui: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Verdana, sans-serif;
  --read: Verdana, Tahoma, sans-serif;
  --raised: inset -1px -1px 0 var(--dark), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--shadow), inset 2px 2px 0 var(--light);
  --pressed: inset -1px -1px 0 var(--light), inset 1px 1px 0 var(--dark), inset -2px -2px 0 var(--hi), inset 2px 2px 0 var(--shadow);
  --field: inset -1px -1px 0 var(--light), inset 1px 1px 0 var(--shadow), inset -2px -2px 0 var(--hi), inset 2px 2px 0 var(--dark);
}
html { background: var(--desktop); }
body { color: #000; font: 13px/1.4 var(--ui); padding-bottom: 34px; }
:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }

.desktop { padding: 24px 24px 40px; }
.window { background: var(--face); padding: 3px; box-shadow: var(--raised); }

.titlebar { height: 22px; background: linear-gradient(90deg, var(--title-a), var(--title-b)); padding: 2px 3px; gap: 2px; align-items: center; }
.ctl { width: 16px; height: 16px; background: var(--light); border: 1px solid var(--dark); border-top: 4px solid var(--title-a); margin-right: 4px; }
.titlebar-text { color: var(--light); font: 700 13px/1 var(--ui); text-align: left; }
.sizer { width: 18px; height: 16px; background: var(--face); box-shadow: var(--raised); position: relative; }
.sizer-close { display: block; margin-left: 2px; }
.sizer::after { content: ""; position: absolute; }
.sizer-min::after { left: 4px; bottom: 4px; width: 7px; height: 2px; background: #000; }
.sizer-max::after { left: 4px; top: 3px; width: 9px; height: 7px; border: 1px solid #000; border-top-width: 2px; }
.sizer-close::after { content: "×"; left: 0; right: 0; top: -1px; text-align: center; font: 700 14px/16px var(--ui); color: #000; }

.menubar { padding: 2px 2px 3px; gap: 0; }
.menubar > a { color: #000; padding: 3px 8px; }
.menubar > a:hover, .menubar > a:focus-visible, .menubar > a[aria-current="page"] { background: var(--select); color: var(--light); outline: none; }

.client { background: var(--light); box-shadow: var(--field); padding: 20px 22px 28px; }
.statusbar { padding: 3px 0 0; gap: 3px; }
.panel { padding: 2px 6px; box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--light); }
.panel a { color: #000; }

.btn, .auth-page .client button { display: inline-block; font: 13px/1 var(--ui); color: #000; text-decoration: none; background: var(--face);
  border: 0; min-width: 75px; text-align: center; padding: 6px 12px; box-shadow: var(--raised); cursor: pointer; }
.btn:active { box-shadow: var(--pressed); padding: 7px 11px 5px 13px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn-default { outline: 1px solid #000; }
.btn-default:focus-visible { outline: 1px dotted #000; outline-offset: -5px; box-shadow: var(--raised), 0 0 0 1px #000; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, select { font: 13px var(--ui); color: #000; background: var(--light);
  border: 0; border-radius: 0; padding: 5px 6px; min-height: 26px; box-shadow: var(--field); }
select { appearance: none; padding-right: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22'%3E%3Crect width='18' height='22' fill='%23c0c0c0'/%3E%3Cpath d='M0 21.5h18M17.5 0v22' stroke='%230a0a0a'/%3E%3Cpath d='M1 20.5h16M16.5 1v20' stroke='%23808080'/%3E%3Cpath d='M0.5 0v21M0 0.5h17' stroke='%23dfdfdf'/%3E%3Cpath d='M5 9h7l-3.5 4z'/%3E%3C/svg%3E") no-repeat right 2px center / 18px calc(100% - 4px), var(--light); }
input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: #000; }

.group { border: 1px solid var(--shadow); box-shadow: 1px 1px 0 var(--light), inset 1px 1px 0 var(--light); margin: 22px 0 0; padding: 18px 14px 14px; }
.group > legend, .group > h2 { font: 13px/1 var(--ui); padding: 0 3px; margin: 0; background: var(--light); }
.group > h2 { position: absolute; top: -7px; left: 8px; }
.sunken { box-shadow: var(--field); background: var(--light); margin: 0; }

.jump, .help a, .details dd a { color: var(--link); text-decoration: underline; }
.jump:visited, .details dd a:visited { color: var(--link-visited); }

.tile { color: #000; }
.tile-art.is-screen img { border: 1px solid #000; }
.tile-noart { box-shadow: var(--field); background: var(--face); }
.tile-year { font-size: 12px; color: #444; }
.tile:hover .tile-label { background: var(--select); color: var(--light); }
.tile:focus-visible .tile-label { background: var(--select); color: var(--light); outline: 1px dotted #ffff00; outline-offset: -1px; }

.empty { font: 15px/1.6 var(--read); max-width: 40em; }
.details dt { font-weight: 700; }
.help { font: 15px/1.65 var(--read); max-width: 44em; }
.help p { margin: 0 0 1em; } .help p:last-child { margin-bottom: 0; }
.aka { font: 15px/1.5 var(--read); } .aka td + td { font-size: 12px; color: #444; }
.covers img { border: 1px solid #000; }
.collection-groups { font: 15px/1.5 var(--read); }
.collection-groups dt { font: 700 13px/1.4 var(--ui); margin-top: 6px; }
.versions { font: 15px/1.6 var(--read); }
.shot figcaption, .game-cover figcaption, .covers figure { font-size: 12px; }

.result { color: #000; }
.result-title { font-weight: 700; }
.result-meta { font-size: 12px; }
.result-aka { font: italic 13px/1.4 var(--read); }
.result:hover, .result:focus-visible { background: var(--select); color: var(--light); }

/* Taskbar and Start menu */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 32px; display: flex; align-items: center; gap: 4px;
  padding: 2px; background: var(--face); box-shadow: inset 0 1px 0 var(--hi), inset 0 2px 0 var(--light); z-index: 50; }
.start { position: relative; }
.start-button { font-weight: 700; min-width: 0; padding: 6px 10px; list-style: none; }
.start-button::-webkit-details-marker { display: none; }
.start[open] .start-button { box-shadow: var(--pressed); }
.start-menu { position: absolute; bottom: 34px; left: 0; min-width: 220px; margin: 0; padding: 3px 3px 3px 28px; list-style: none;
  background: var(--face); box-shadow: var(--raised); }
.start-menu::before { content: attr(data-label); position: absolute; left: 3px; top: 3px; bottom: 3px; width: 22px;
  background: linear-gradient(0deg, var(--title-a), var(--title-b)); color: var(--light); font: 700 13px/22px var(--ui);
  writing-mode: vertical-rl; transform: rotate(180deg); padding-top: 8px; }
.start-menu a { display: block; padding: 7px 12px; color: #000; text-decoration: none; }
.start-menu a:hover, .start-menu a:focus-visible { background: var(--select); color: var(--light); outline: none; }
.start-menu .sep { border-top: 1px solid var(--shadow); box-shadow: inset 0 1px 0 var(--light); margin-top: 3px; padding-top: 3px; }
.task { flex: 0 1 200px; padding: 6px 8px; box-shadow: var(--pressed); background: repeating-conic-gradient(var(--face) 0 25%, var(--light) 0 50%) 0 0 / 2px 2px;
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .desktop { padding: 0; }
  .client { padding: 16px 12px 24px; }
}

/* Stories */
.editor { font: 15px/1.65 var(--read); background: var(--light); box-shadow: var(--field); }
.tag-chip { color: var(--link); text-decoration: underline; }
.tag-picker { background: var(--light); border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.tag-option[aria-selected="true"] { background: var(--select); color: var(--light); }
.message, .notice { background: #ffffe1; border: 1px solid #000; }
.field-error, .errorlist { color: #c00000; }
.story-card-title { color: var(--link); }
.story-card-meta, .hint { color: #444; }
.story-card-meta a { color: inherit; }
.menubar-link { color: #000; padding: 3px 8px; }
.menubar-link:hover, .menubar-link:focus-visible { background: var(--select); color: var(--light); outline: none; }