/*
  ir-common.css — Internet Rewind shared chrome
  ALL pages must link this BEFORE any page-specific styles.
  This file owns: title-bar, nav-toolbar, bottom-bar, ticker, bevel-btn system.
*/

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  --bg:      #C8C8C0;
  --cream:   #FFFFF0;
  --panel:   #F4F4E8;
  --navy:    #000080;
  --teal:    #008080;
  --cyan:    #00CCCC;
  --amber:   #CC8800;
  --red:     #AA0000;
  --green:   #006600;
  --magenta: #880088;
  --purple:  #550088;
  --text:    #000;
  --dim:     #444;
  --gold:    #FFD700;
}

body {
  background: var(--bg);
  font-family: 'Bedstead', monospace;
  font-size: 14px;
  color: var(--text);
  image-rendering: pixelated;
  /* Reserve space for fixed bottom bar + ticker */
  padding-bottom: 48px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TITLE BAR — top chrome strip
   Logo is BIG. 44px tall bar, logo 38px.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ir-title-bar {
  background: var(--navy);
  display: flex;
  align-items: stretch;
  border-bottom: 3px solid var(--cyan);
  height: 44px;
  flex-shrink: 0;
}

.ir-logo-slot {
  background: #000030;
  border-right: 3px solid var(--cyan);
  padding: 3px 14px;
  display: flex;
  align-items: center;
  min-width: 200px;
  flex-shrink: 0;
}

/* The wordmark: tall and readable */
.ir-logo-slot img {
  height: 38px;      /* LARGE — Rob's explicit request */
  width: auto;
  image-rendering: pixelated;
  display: block;
}

.ir-title-sn {
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.9rem;
  color: #fff;
  letter-spacing: 1px;
}
.ir-title-sn strong { color: var(--gold); margin-left: 5px; }

.ir-title-clock {
  padding: 0 14px;
  margin-left: auto;
  display: flex;
  align-items: center;
  font-family: 'Bedstead', monospace;
  font-size: 0.82rem;
  color: #8888CC;
  border-left: 1px solid #224;
  flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV TOOLBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ir-nav {
  background: var(--teal);
  border-bottom: 2px solid #005555;
  display: flex;
  align-items: stretch;
  height: 30px;
  flex-shrink: 0;
}

.ir-nav-sn {
  background: var(--navy);
  color: var(--gold);
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-right: 2px solid #005555;
  flex-shrink: 0;
  white-space: nowrap;
}

.ir-nav a,
.ir-nav button {
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: none;
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.88rem;
  letter-spacing: 1px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(0, 80, 80, 0.5);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.ir-nav a:hover,
.ir-nav button:hover { background: #005555; }

.ir-nav .ir-exit {
  margin-left: auto;
  background: var(--red);
  border-left: 2px solid #005555;
  border-right: none;
  letter-spacing: 2px;
}
.ir-nav .ir-exit:hover { background: #880000; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BEVEL BUTTON SYSTEM — THE PRODIGY LOOK
   Every interactive button MUST use one of these.
   Flat colored rows are NOT buttons.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.88rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 6px 14px;
  cursor: pointer;
  user-select: none;
  /* Default: Win95 gray */
  background: #C0C0C0;
  color: #000;
  border-top:    2px solid #FFFFFF;
  border-left:   2px solid #FFFFFF;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  transition: none;
  white-space: nowrap;
}
.bv:active, .bv.pressed {
  border-top:    2px solid #404040;
  border-left:   2px solid #404040;
  border-right:  2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  padding: 7px 13px 5px 15px; /* shifts content down-right on press */
}
.bv:hover:not(:active) { filter: brightness(1.1); }

/* Color variants — each with proper light/dark edge pairs */
.bv-navy {
  background: #0000A0;
  color: var(--gold);
  border-top-color:    #5555DD;
  border-left-color:   #5555DD;
  border-right-color:  #000040;
  border-bottom-color: #000040;
}
.bv-navy:active {
  border-top-color:    #000040;
  border-left-color:   #000040;
  border-right-color:  #5555DD;
  border-bottom-color: #5555DD;
}

.bv-teal {
  background: #008888;
  color: #fff;
  border-top-color:    #44BBBB;
  border-left-color:   #44BBBB;
  border-right-color:  #003333;
  border-bottom-color: #003333;
}
.bv-teal:active {
  border-top-color:    #003333;
  border-left-color:   #003333;
  border-right-color:  #44BBBB;
  border-bottom-color: #44BBBB;
}

.bv-green {
  background: #007000;
  color: #fff;
  border-top-color:    #44CC44;
  border-left-color:   #44CC44;
  border-right-color:  #002800;
  border-bottom-color: #002800;
}
.bv-green:active {
  border-top-color:    #002800;
  border-left-color:   #002800;
  border-right-color:  #44CC44;
  border-bottom-color: #44CC44;
}

.bv-amber {
  background: #BB8800;
  color: #fff;
  border-top-color:    #FFCC44;
  border-left-color:   #FFCC44;
  border-right-color:  #442200;
  border-bottom-color: #442200;
}
.bv-amber:active {
  border-top-color:    #442200;
  border-left-color:   #442200;
  border-right-color:  #FFCC44;
  border-bottom-color: #FFCC44;
}

.bv-red {
  background: #AA0000;
  color: #fff;
  border-top-color:    #EE4444;
  border-left-color:   #EE4444;
  border-right-color:  #440000;
  border-bottom-color: #440000;
}
.bv-red:active {
  border-top-color:    #440000;
  border-left-color:   #440000;
  border-right-color:  #EE4444;
  border-bottom-color: #EE4444;
}

.bv-magenta {
  background: #990099;
  color: #fff;
  border-top-color:    #CC55CC;
  border-left-color:   #CC55CC;
  border-right-color:  #330033;
  border-bottom-color: #330033;
}
.bv-magenta:active {
  border-top-color:    #330033;
  border-left-color:   #330033;
  border-right-color:  #CC55CC;
  border-bottom-color: #CC55CC;
}

.bv-purple {
  background: #660088;
  color: #fff;
  border-top-color:    #AA44CC;
  border-left-color:   #AA44CC;
  border-right-color:  #220033;
  border-bottom-color: #220033;
}
.bv-purple:active {
  border-top-color:    #220033;
  border-left-color:   #220033;
  border-right-color:  #AA44CC;
  border-bottom-color: #AA44CC;
}

.bv-darkred {
  background: #880000;
  color: #FFD700;
  border-top-color:    #CC3333;
  border-left-color:   #CC3333;
  border-right-color:  #330000;
  border-bottom-color: #330000;
}
.bv-darkred:active {
  border-top-color:    #330000;
  border-left-color:   #330000;
  border-right-color:  #CC3333;
  border-bottom-color: #CC3333;
}

/* Size modifiers */
.bv-lg {
  font-size: 1rem;
  padding: 10px 18px;
  letter-spacing: 2px;
}
.bv-xl {
  font-size: 1.1rem;
  padding: 12px 22px;
  letter-spacing: 2px;
  width: 100%;
}
.bv-sm {
  font-size: 0.78rem;
  padding: 3px 8px;
}
.bv-full { width: 100%; display: flex; }

/* Sidebar genre button — full width, tall, readable */
.bv-genre {
  display: block;
  width: 100%;
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 11px 8px;
  cursor: pointer;
  user-select: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  /* top bevel only (stacked buttons) */
  border-top: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bv-genre:first-child { border-top: none; }
.bv-genre:hover { filter: brightness(1.15); }
.bv-genre:active { filter: brightness(0.9); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOTTOM BAR — Prodigy-style shortcut strip
   Fixed above ticker. Clickable shortcut buttons.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ir-bottom-bar {
  background: #777;
  border-top: 2px solid #999;
  display: flex;
  align-items: stretch;
  height: 26px;
  position: fixed;
  bottom: 22px;     /* sits directly above the 22px ticker */
  left: 0;
  right: 0;
  z-index: 90;
}

.ir-bb-btn {
  color: #fff;
  background: transparent;
  border: none;
  border-right: 1px solid #999;
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.82rem;
  letter-spacing: 1px;
  padding: 0 12px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.ir-bb-btn:hover { background: #555; }
.ir-bb-btn:active { background: #444; }

.ir-bb-right {
  margin-left: auto;
  background: var(--navy);
  color: var(--gold);
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.8rem;
  letter-spacing: 2px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-left: 2px solid var(--cyan);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TICKER — fixed news/score crawl at bottom
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ir-ticker {
  background: var(--navy);
  border-top: 2px solid var(--cyan);
  height: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.ir-ticker-tag {
  background: var(--cyan);
  color: #000;
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 0.78rem;
  letter-spacing: 2px;
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.ir-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.ir-ticker-inner {
  white-space: nowrap;
  display: inline-block;
  font-family: 'Bedstead', monospace;
  font-size: 0.88rem;
  color: var(--gold);
  letter-spacing: 1px;
  padding-left: 100%;
  animation: ir-scroll 90s linear infinite;
}

.ir-ticker-sep { color: var(--cyan); margin: 0 10px; }

@keyframes ir-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION HEADERS — page content blocks
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ir-sec-hdr {
  background: var(--navy);
  color: var(--gold);
  font-family: 'BedsteadBold', 'Bedstead', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #000060;
}
.ir-sec-hdr.teal { background: var(--teal); border-bottom-color: #005555; }
.ir-sec-hdr.green { background: var(--green); border-bottom-color: #003300; }
.ir-sec-hdr.red { background: var(--red); border-bottom-color: #660000; }
.ir-sec-hdr a { font-size: 0.78rem; color: #88CCFF; text-decoration: none; letter-spacing: 1px; }
.ir-sec-hdr a:hover { text-decoration: underline; }

.ir-panel {
  background: var(--cream);
  border: 2px solid var(--navy);
}
.ir-panel.teal { border-color: var(--teal); }
.ir-panel.red { border-color: var(--red); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INSET TEXT INPUT — sunken Win95 field
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ir-input {
  font-family: 'Bedstead', monospace;
  font-size: 14px;
  padding: 6px 8px;
  background: #fff;
  color: #000;
  outline: none;
  border-top:    2px solid #888;
  border-left:   2px solid #888;
  border-right:  2px solid #fff;
  border-bottom: 2px solid #fff;
}
.ir-input:focus { background: #FFFDE8; }