/* oldschool.technology
 *
 * A text-mode terminal, in a browser. The whole visual language is borrowed from
 * a 1980s monochrome CRT in amber phosphor:
 *
 *   - a fixed pitch font stack, everything sized in character-ish units
 *   - a curved bezel with a vignette and a glass highlight
 *   - horizontal scanlines that drift, plus a slow brightness flicker
 *   - text-shadow bloom, so bright glyphs glow the way phosphor did
 *   - green or amber or white phosphor, chosen by the OST_PHOSPHOR env var
 *
 * The site has to stay readable first. Everything decorative is either a
 * pseudo-element or behind `prefers-reduced-motion`, and there is no
 * horizontal scrolling below 60 columns.
 */

:root {
  --bg:        #0a0704;
  --bg-glass:  #100b06;
  --bezel:     #17110b;
  --bezel-hi:  #241a10;
  --fg:        #ffb454;
  --fg-dim:    #b8763a;
  --fg-faint:  #7d4f27;
  --fg-glow:   rgba(255, 180, 84, 0.55);
  --rule:      #4a2f16;
  --accent:    #6fe3a0;
  --warn:      #ff7b6b;
  --link:      #ffd08a;
  --sel:       #ffb45433;
  --scan:      rgba(0, 0, 0, 0.32);
  --line-h:    2px;
  --radius:    14px;
  --mono: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", "Menlo", "Consolas",
          "Courier New", monospace;
}

/* OST_PHOSPHOR=green */
body[data-phosphor="green"] {
  --fg:       #7bff9e;
  --fg-dim:   #4fcb74;
  --fg-faint: #2e8b4c;
  --fg-glow:  rgba(123, 255, 158, 0.5);
  --rule:     #1f5c35;
  --accent:   #9be0ff;
  --warn:     #ff9d7a;
  --link:     #b6ffd0;
}

/* OST_PHOSPHOR=white */
body[data-phosphor="white"] {
  --fg:       #e8f0f8;
  --fg-dim:   #a8b4c2;
  --fg-faint: #6d7986;
  --fg-glow:  rgba(232, 240, 248, 0.45);
  --rule:     #46505c;
  --accent:   #9fe6c8;
  --warn:     #ff9c9c;
  --link:     #ffffff;
}

* { box-sizing: border-box; }

html { background: #050403; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 0 1px var(--fg-glow), 0 0 6px var(--fg-glow);
  -webkit-font-smoothing: none;
  font-variant-ligatures: none;
  overflow-wrap: break-word;
}

::selection { background: var(--sel); color: #fff; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { background: var(--fg); color: #000; text-shadow: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- the tube */

.crt {
  position: relative;
  min-height: 100vh;
  padding: 18px 12px 40px;
  background:
    radial-gradient(120% 90% at 50% 0%, #191108 0%, #0a0704 55%, #050403 100%);
}

.bezel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
  border-radius: calc(var(--radius) + 10px);
  background:
    linear-gradient(160deg, var(--bezel-hi) 0%, var(--bezel) 40%, #0d0906 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 6px rgba(0, 0, 0, 0.8),
    0 22px 60px rgba(0, 0, 0, 0.75);
}

.screen {
  position: relative;
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  background:
    radial-gradient(130% 100% at 50% 0%, #150e07 0%, #0b0704 70%, #070503 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 84, 0.10),
    inset 0 0 40px rgba(0, 0, 0, 0.9),
    inset 0 0 140px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Scanlines, drifting. */
.screen::before {
  content: "";
  position: absolute;
  inset: -60px 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    var(--scan) 0,
    var(--scan) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: drift 9s linear infinite;
  opacity: 0.75;
}

/* Glass highlight + vignette. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(140% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.045) 0%, transparent 38%);
}

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}

/* The slow brightness wobble of an old tube. */
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes flicker {
  0%, 100% { opacity: 0.72; }
  47%      { opacity: 0.72; }
  48%      { opacity: 0.80; }
  50%      { opacity: 0.66; }
  52%      { opacity: 0.74; }
}
.screen > * { animation: flicker 6.5s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .screen::before { animation: none; }
  .screen > * { animation: none; }
  .cursor { animation: none !important; }
}

/* ---------------------------------------------------------------- masthead */

.masthead { border-bottom: 1px dashed var(--rule); padding-bottom: 8px; }

.logo {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(7px, 1.8vw, 12px);
  font-weight: normal;
  line-height: 1.05;
  color: var(--fg);
  letter-spacing: 0;
  white-space: pre;
  overflow-x: auto;
  text-shadow: 0 0 2px var(--fg-glow), 0 0 10px var(--fg-glow);
}

.tagline {
  margin: 6px 0 10px;
  color: var(--fg-dim);
  font-size: 13px;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
}

.topnav .spacer { flex: 1 1 auto; }
.topnav .who { color: var(--fg-dim); }
.topnav a { white-space: nowrap; }

.pending-flag {
  color: var(--warn);
  border: 1px solid var(--warn);
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 1px;
}

/* ------------------------------------------------------------------ status */

.line {
  margin: 8px 0 0;
  padding: 4px 8px;
  border-left: 3px solid var(--rule);
  font-size: 13px;
}
.line-error   { border-left-color: var(--warn); color: var(--warn); }
.line-notice  { border-left-color: var(--accent); color: var(--accent); }

.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: space-between;
  margin-top: 22px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(255, 180, 84, 0.035);
  color: var(--fg-dim);
  font-size: 12px;
}

.statusbar .stat b { color: var(--fg); font-weight: normal; }
.statusbar .stat.warn b { color: var(--warn); }
.statusbar .clock { color: var(--accent); letter-spacing: 1px; }

.colophon {
  margin: 10px 0 0;
  color: var(--fg-faint);
  font-size: 12px;
}

/* ------------------------------------------------------------------ layout */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 22px;
  margin-top: 16px;
}
.columns.wide-only { grid-template-columns: minmax(0, 1fr); }
.main { min-width: 0; }
.side { min-width: 0; }

@media (max-width: 900px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .side { order: 2; }
}

h1, h2 { font-weight: normal; letter-spacing: 1px; }
h1 { font-size: 19px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 0 0 8px; color: var(--fg-dim); }

.panel {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(255, 180, 84, 0.025);
}
.panel.wide { grid-column: 1 / -1; }

.hint { color: var(--fg-dim); font-size: 13px; }
.empty { color: var(--fg-faint); font-style: italic; }

/* ------------------------------------------------------------- story lists */

.viewbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.viewbar .tab { text-decoration: none; color: var(--fg-dim); }
.viewbar .tab:hover { background: var(--fg-dim); color: #000; }
.viewbar .tab.on { color: var(--fg); background: var(--fg); color: #000; padding: 0 4px; }

ol.stories { list-style: none; margin: 0; padding: 0; }

.story {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 10px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255, 180, 84, 0.13);
}
.story:hover { background: rgba(255, 180, 84, 0.04); }

.story .points { grid-row: span 2; text-align: right; }
.story .score {
  display: block;
  font-size: 14px;
  color: var(--fg);
  text-align: right;
}
.storylink { font-size: 15px; }
.storylink:link { text-decoration: none; }
.storylink:hover { text-decoration: underline; }
.domain { color: var(--fg-faint); font-size: 12px; }
.subline { color: var(--fg-dim); font-size: 12px; }
.dot { color: var(--fg-faint); }

.arrow {
  display: inline-block;
  min-width: 1.6em;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--fg-faint);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.arrow:hover { color: #000; background: var(--fg); border-color: var(--fg); }
.arrow.on { color: var(--accent); }
.arrow.off { opacity: 0.5; cursor: default; }

.vote { display: inline; margin: 0; }
.inline-form { display: inline; }

.tag {
  color: var(--accent);
  border: 1px solid rgba(111, 227, 160, 0.35);
  padding: 0 3px;
  font-size: 11px;
  text-decoration: none;
}
.tag:hover { background: var(--accent); color: #000; text-shadow: none; }

.mod-flag {
  color: var(--warn);
  border: 1px solid var(--warn);
  padding: 0 3px;
  font-size: 11px;
}

.pager {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-top: 14px;
  font-size: 13px;
}
.pager .off { color: var(--fg-faint); }
.pager .pageof { color: var(--fg-dim); }

ol.stories.tight .story { padding: 3px 0; }

/* ----------------------------------------------------------------- item */

.item {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(255, 180, 84, 0.03);
}
.item-head { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.item-idx { color: var(--fg-faint); }
.score.big { font-size: 20px; }
.points-label { color: var(--fg-dim); font-size: 12px; }
.item-title { margin: 8px 0 6px; font-size: 20px; line-height: 1.3; }
.item-meta { margin: 0 0 10px; color: var(--fg-dim); font-size: 12px; }
.item-url { margin: 0; font-size: 13px; word-break: break-all; }
.item-url.none { color: var(--fg-faint); font-style: italic; }
.voters { color: var(--fg-faint); }
.mod-tools { color: var(--fg-dim); }

.commentbox { margin-bottom: 18px; }
.commentbox h2 { margin-bottom: 6px; }

.comments { border-top: 1px dashed var(--rule); padding-top: 12px; }

.comment {
  margin: 0 0 2px;
  padding: 6px 8px 6px calc(8px + var(--depth, 0) * 14px);
  border-left: 2px solid var(--rule);
}
.comment.reply { border-left-style: dotted; }
.comment:target { background: rgba(255, 180, 84, 0.10); }

.c-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; }
.c-indent { color: var(--fg-faint); letter-spacing: -1px; }
.c-points { color: var(--fg-dim); text-decoration: none; }
.c-user { color: var(--accent); }
.c-time { color: var(--fg-faint); }
.c-body { margin: 4px 0 2px; }
.c-body p { margin: 0 0 8px; }
.c-body p:last-child { margin-bottom: 0; }
.c-body blockquote { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--rule); }
.c-body blockquote pre,
.quoted pre {
  margin: 0;
  font: inherit;
  color: var(--fg-dim);
  white-space: pre-wrap;
}
.c-body code, code { color: var(--accent); }
.c-body a { word-break: break-all; }
.c-foot { font-size: 11px; color: var(--fg-faint); }

/* ----------------------------------------------------------------- forms */

.formpane {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(255, 180, 84, 0.03);
}
.formpane.center { text-align: center; }

.stdf { display: grid; gap: 4px; margin: 10px 0; }
.stdf label { color: var(--fg-dim); font-size: 12px; letter-spacing: 1px; }
.stdf .opt { color: var(--fg-faint); letter-spacing: 0; }
.stdf .hint { margin: 0 0 8px; }
.stdf.tiny { display: inline-grid; margin: 0; }

input, select, textarea, button {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 5px 7px;
}
textarea { resize: vertical; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--fg-faint); opacity: 1; }

button {
  cursor: pointer;
  color: var(--fg);
  background: rgba(255, 180, 84, 0.08);
  letter-spacing: 1px;
  justify-self: start;
}
button:hover { background: var(--fg); color: #000; text-shadow: none; }
button.good:hover { background: var(--accent); }
button.bad:hover  { background: var(--warn); }

.as-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
  font-size: 13px;
  letter-spacing: 0;
}
.as-link:hover { background: var(--fg); color: #000; }

.searchform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 12px; }
.searchform input { flex: 1 1 16rem; }
.prompt { color: var(--fg-dim); }

.bigbutton {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--fg-dim);
  text-decoration: none;
  font-size: 13px;
}
.bigbutton:hover { background: var(--fg); color: #000; }

.tagpills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tagpills a {
  color: var(--fg-faint);
  border: 1px solid var(--rule);
  padding: 0 4px;
  font-size: 11px;
  text-decoration: none;
}
.tagpills a:hover { background: var(--fg-dim); color: #000; }

/* ----------------------------------------------------------------- tables */

.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left;
  font-weight: normal;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--rule);
  padding: 3px 6px;
  white-space: nowrap;
}
.tbl td { padding: 4px 6px; border-bottom: 1px dotted rgba(255, 180, 84, 0.12); vertical-align: top; }
.tbl tr:hover td { background: rgba(255, 180, 84, 0.05); }
.tbl .actions { white-space: nowrap; }
.tbl .actions button { font-size: 11px; padding: 1px 4px; margin: 0 2px 2px 0; }
.tbl .yes { color: var(--accent); }
.tbl .no { color: var(--fg-faint); }
.tbl details summary { color: var(--fg-dim); cursor: pointer; font-size: 11px; display: inline-block; }

.adminrow { display: flex; flex-wrap: wrap; gap: 6px; }
.adminrow button { font-size: 12px; padding: 1px 5px; }

.row-pending td { background: rgba(255, 180, 84, 0.06); }
.row-disabled td, .row-banned td { opacity: 0.72; }

.status-active   { color: var(--accent); }
.status-pending  { color: var(--warn); }
.status-disabled { color: var(--fg-dim); }
.status-banned   { color: var(--warn); }
.status-published { color: var(--accent); }
.status-dead, .status-hidden { color: var(--warn); }

.statrow { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--fg-dim); font-size: 12px; }
.statrow b { color: var(--fg); font-weight: normal; font-size: 15px; }

/* ------------------------------------------------------------------ misc */

ul.taglist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
ul.taglist li { padding: 1px 0; }
ul.taglist .count { color: var(--fg-faint); }

ul.commentlist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
ul.commentlist li { padding: 6px 0; border-bottom: 1px dotted rgba(255, 180, 84, 0.12); }
ul.commentlist .excerpt { margin: 3px 0 0; color: var(--fg-dim); }

.prose { max-width: 74ch; }
.prose h2 { margin-top: 20px; color: var(--fg); }
.prose ul { padding-left: 20px; }
.prose li { margin: 4px 0; }

pre.dump {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--accent);
  font-size: 12px;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
}
pre.dump.big { font-size: 13px; color: var(--fg); }

mark { background: var(--fg); color: #000; }

.cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-left: 0.2em;
  vertical-align: text-bottom;
  background: var(--fg);
  opacity: 0.75;
  animation: blink 1.05s steps(1, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 0.75; } 51%, 100% { opacity: 0; } }

mark { background: var(--fg); color: #000; }

@media (max-width: 560px) {
  body { font-size: 14px; }
  .bezel { padding: 8px; }
  .screen { padding: 12px 12px 10px; }
  .story { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .item-title { font-size: 17px; }
}

/* Users who do not want the tube can have a plain, honest page. */
body.plain .screen::before,
body.plain .screen::after,
body.plain .crt-overlay { display: none; }
body.plain .screen { box-shadow: none; }
body.plain .screen > * { animation: none; }

.registration-captcha {
  border: 1px solid var(--fg-dim);
  padding: 12px;
  margin: 12px 0;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.registration-captcha legend { padding: 0 6px; color: var(--fg); }
.registration-captcha .captcha-image { max-width: 100%; height: auto; border: 1px solid var(--rule); }
.registration-captcha input { max-width: 16em; width: 100%; letter-spacing: 3px; }