/* Windows 3.1: Program Manager chrome, WinHelp reading text. */
:root {
  --desktop: #008080; --face: #c0c0c0; --shadow: #808080; --light: #fff; --ink: #000;
  --title: #000080; --jump: #007a00; --jump-hover: #004d00;
  --chrome: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  --help: "Times New Roman", Times, Georgia, serif;
}
html { background: var(--desktop); }
body { color: var(--ink); font: 14px/1.4 var(--chrome); }
:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }

.desktop { padding: 28px 24px 40px; }
.window { background: var(--face); border: 1px solid var(--ink); padding: 4px; }
.titlebar { height: 26px; background: var(--title); border: 1px solid var(--ink); }
.titlebar-text { color: var(--light); font: 700 14px/1 var(--chrome); text-align: center; padding: 0 8px; }
.ctl { width: 26px; background: var(--face); border-right: 1px solid var(--ink); position: relative; }
.ctl::after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 4px;
  background: var(--light); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--shadow); }
.sizer { width: 26px; background: var(--face); border-left: 1px solid var(--ink); position: relative;
  box-shadow: inset -2px -2px 0 var(--shadow), inset 2px 2px 0 var(--light); }
.sizer::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; }
.sizer-min::after { border-top: 6px solid var(--ink); }
.sizer-max::after { border-bottom: 6px solid var(--ink); }

.menubar { background: var(--light); border: 1px solid var(--ink); border-top: 0; padding: 3px 4px; }
.menubar > a { color: var(--ink); padding: 3px 9px; }
.menubar > a:hover, .menubar > a:focus-visible, .menubar > a[aria-current="page"] { background: var(--title); color: var(--light); outline: none; }

.client { background: var(--light); border: 1px solid var(--ink); border-top: 0; padding: 20px 22px 28px; }
.statusbar { padding: 4px 0 0; font-size: 13px; }
.panel { padding: 2px 8px; border: 1px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); }
.panel a { color: var(--ink); }

.btn, .auth-page .client button { display: inline-block; font: 700 14px/1 var(--chrome); color: var(--ink); text-decoration: none;
  background: var(--face); border: 1px solid var(--ink); border-radius: 3px; padding: 6px 14px 7px; cursor: pointer;
  box-shadow: inset -2px -2px 0 var(--shadow), inset 2px 2px 0 var(--light); }
.btn:active { box-shadow: inset 2px 2px 0 var(--shadow); padding: 7px 13px 6px 15px; }
.btn:focus-visible { outline: 1px dotted var(--ink); outline-offset: -6px; }
.btn-default { border-width: 2px; padding: 5px 13px 6px; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, select { font: 14px var(--chrome); color: var(--ink); background: var(--light);
  border: 1px solid var(--ink); border-radius: 0; padding: 4px 6px; min-height: 28px; }
select { appearance: none; padding-right: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26'%3E%3Crect x='0.5' y='0.5' width='21' height='25' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M20 25H1M21 1v24' stroke='%23808080' stroke-width='2'/%3E%3Cpath d='M6 11h10l-5 6z'/%3E%3C/svg%3E") no-repeat right 0 center / 22px 100%, var(--light); }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--title); margin: 0; }

.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 16px 16px; }
.group > legend, .group > h2 { font: 700 14px/1 var(--chrome); padding: 0 5px; margin: 0; background: var(--light); }
.group > h2 { position: absolute; top: -8px; left: 10px; }
.sunken { border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 var(--shadow); background: var(--light); margin: 0; }

.jump, .help a, .details dd a { color: var(--jump); text-decoration: underline; text-underline-offset: 2px; }
.jump:hover, .help a:hover, .details dd a:hover { color: var(--jump-hover); }

.tile { color: var(--ink); }
.tile-art.is-screen img { border: 1px solid var(--ink); }
.tile-noart { border: 1px solid var(--ink); background: repeating-linear-gradient(45deg, var(--face) 0 2px, var(--light) 2px 6px); }
.tile-year { font-size: 13px; color: #404040; }
.tile:hover .tile-label { background: var(--title); color: var(--light); }
.tile:focus-visible .tile-label { background: var(--title); color: var(--light); outline: 1px dotted var(--ink); outline-offset: 1px; }

.empty { font: 18px/1.5 var(--help); max-width: 36em; }
.game-cover figcaption, .shot figcaption, .covers figure { font-size: 13px; }
.details dt { font-weight: 700; }
.help { font: 18px/1.55 var(--help); max-width: 40em; }
.help p { margin: 0 0 0.9em; } .help p:last-child { margin-bottom: 0; }
.aka { font: 17px/1.45 var(--help); }
.aka td + td { font: 13px/1.6 var(--chrome); color: #404040; }
.covers img { border: 1px solid var(--ink); }
.collection-groups { font: 17px/1.45 var(--help); }
.collection-groups dt { font: 700 14px/1.4 var(--chrome); margin-top: 6px; }
.versions { font: 17px/1.5 var(--help); }

.result { color: var(--ink); }
.result-title { font-weight: 700; }
.result-meta { font-size: 13px; }
.result-aka { font: italic 15px/1.4 var(--help); }
.result:hover, .result:focus-visible { background: var(--title); color: var(--light); }
.result:focus-visible { outline: 1px dotted var(--ink); outline-offset: 1px; }

@media (max-width: 760px) {
  .desktop { padding: 0; }
  .window { border-width: 0; padding: 0; }
  .client { padding: 16px 14px 24px; border-left: 0; border-right: 0; }
  .menubar { border-left: 0; border-right: 0; }
  .statusbar { padding: 4px; }
}

/* Stories */
.editor { font: 18px/1.55 var(--help); background: var(--light); border: 1px solid var(--ink); }
.editor:focus-visible { outline: 1px dotted var(--ink); outline-offset: 3px; }
.tag-chip { color: var(--jump); text-decoration: underline; }
.tag-picker { background: var(--light); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); }
.tag-option[aria-selected="true"] { background: var(--title); color: var(--light); }
.message { background: #ffffe1; }
.notice { background: #ffffe1; }
.field-error, .errorlist { color: #a00000; }
.story-card-title { color: var(--jump); }
.story-card-meta, .hint { color: #404040; }
.story-card-meta a { color: inherit; }
.menubar-link { color: var(--ink); }
.menubar-link:hover, .menubar-link:focus-visible { background: var(--title); color: var(--light); outline: none; }
.story-body { font-size: 19px; }