/* Early-90s look: browser-default gray, Times, blue/purple links, beveled controls. */
:root {
  --bg: #c0c0c0;
  --text: #000000;
  --link: #0000ee;
  --visited: #551a8b;
  --active: #ff0000;
  --light: #ffffff;
  --shadow: #808080;
  --dark: #000000;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 "Times New Roman", Times, serif;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

a:link { color: var(--link); }
a:visited { color: var(--visited); }
a:active { color: var(--active); }

h1 { font-size: 2.2rem; text-align: center; margin: 24px 0 8px; }
h2 { font-size: 1.5rem; margin: 20px 0 8px; }
h3 { font-size: 1.1rem; margin: 0; display: inline; }

hr { border: 0; border-top: 2px groove var(--light); margin: 16px 0; }

.masthead { padding: 8px 0 0; }
.lede { text-align: center; margin: 0 0 8px; }

/* Beveled controls, like a 3.1-era dialog */
.controls { padding: 8px 0; }
.controls input {
  width: 100%;
  padding: 3px 4px;
  font: 16px "Courier New", Courier, monospace;
  background: var(--light);
  color: var(--text);
  border: 2px inset var(--light);
  border-radius: 0;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font: 14px "MS Sans Serif", Arial, sans-serif;
  padding: 3px 10px;
  background: var(--bg);
  color: var(--text);
  border: 2px outset var(--light);
  border-radius: 0;
  cursor: pointer;
}
.chip:active,
.chip[aria-pressed="true"] { border-style: inset; font-weight: bold; }

.status { font-style: italic; margin: 8px 0; }

/* The catalog is a plain bulleted list */
.catalog { margin: 0; padding-left: 24px; list-style: square; }
.card { margin: 0 0 14px; }
.author { display: inline; margin: 0 0 0 4px; font-style: italic; }
.desc { margin: 2px 0; }
.meta { margin: 0; font-size: 0.9rem; }
.meta span + span::before { content: " | "; }
.category { font-weight: bold; }
.tag { font-family: "Courier New", Courier, monospace; }
.badge { font-size: 0.8rem; color: #800000; font-weight: bold; }
.badge::before { content: "["; }
.badge::after { content: "]"; }

.about { max-width: 40em; }

.suggest input,
.suggest select,
.suggest textarea {
  width: 100%;
  max-width: 32em;
  padding: 3px 4px;
  font: 16px "Courier New", Courier, monospace;
  background: var(--light);
  color: var(--text);
  border: 2px inset var(--light);
  border-radius: 0;
}
.suggest .hp { position: absolute; left: -9999px; }

.footer { padding-bottom: 32px; text-align: center; font-size: 0.9rem; }
.footer address { font-style: italic; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}