/* GoMango Timing Help — stylesheet
   Theme: timing-tower / scoreboard, mango accent on asphalt dark */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --asphalt-950: #14161a;
  --asphalt-900: #1b1e24;
  --asphalt-800: #23262e;
  --asphalt-700: #2d313b;
  --line: #383c46;
  --paper: #faf8f4;
  --ink: #1b1e24;
  --ink-soft: #565b66;
  --mango: #ff7a1a;
  --mango-deep: #e8600a;
  --mango-light: #ffb15c;
  --lime: #b6d94c;
  --flag-red: #d94c3d;
  --focus: #4ea8ff;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --sidebar-w: 280px;
  --content-max: 780px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mango-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

img { max-width: 100%; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  height: 56px; padding: 0 1rem;
  background: var(--asphalt-950);
  border-bottom: 3px solid var(--mango);
  color: var(--paper);
}
.topbar .menu-btn {
  display: none;
  background: none; border: none; color: var(--paper);
  font-size: 1.4rem; cursor: pointer; padding: .25rem .5rem;
}
.brand {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: .02em;
  font-size: 1.05rem; color: var(--paper);
}
.brand:hover { text-decoration: none; }
.brand .chip {
  width: 28px; height: 28px;
  display: inline-block;
  object-fit: contain;
}
.brand .sub {
  color: #9aa0ad; font-family: var(--font-body); font-weight: 500;
  font-size: .8rem; margin-left: .15rem; padding-left: .6rem;
  border-left: 1px solid var(--line);
}
.topbar-spacer { flex: 1; }
.topbar-search {
  display: flex; align-items: center; gap: .4rem;
  background: var(--asphalt-800); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .6rem;
  color: #9aa0ad; font-size: .85rem;
}
.topbar-search input {
  background: none; border: none; color: var(--paper);
  font-family: var(--font-body); font-size: .85rem; width: 170px;
}
.topbar-search input:focus { outline: none; }
.topbar-search input::placeholder { color: #6b7280; }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - 56px);
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--asphalt-900);
  color: #dfe2e8;
  padding: 1.4rem 1rem 3rem;
  border-right: 1px solid var(--asphalt-950);
}
.sidebar nav { position: sticky; top: 72px; }
.side-group { margin-bottom: 1.4rem; }
.side-group h3 {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mango-light); margin: 0 0 .5rem .5rem; font-weight: 600;
}
.side-group ul { list-style: none; margin: 0; padding: 0; }
.side-group li { margin: 1px 0; }
.side-group a {
  display: block; padding: .4rem .55rem; border-radius: 6px;
  color: #c7cbd4; font-size: .89rem; font-weight: 500;
}
.side-group a:hover { background: var(--asphalt-800); text-decoration: none; color: #fff; }
.side-group a.active {
  background: var(--asphalt-800);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--mango);
}

/* ---------- Content ---------- */
main.content {
  padding: 2.6rem clamp(1.2rem, 4vw, 4rem) 5rem;
  max-width: 980px;
}
.content-inner { max-width: var(--content-max); }
.wide .content-inner { max-width: 920px; }

.eyebrow {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mango-deep); font-weight: 600;
  margin: 0 0 .5rem;
}
h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .01em;
  font-size: 2.15rem; margin: 0 0 .6rem; color: var(--ink);
}
h1 + p.lede { font-size: 1.1rem; color: var(--ink-soft); margin-top: 0; }
h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.4rem; margin: 2.4rem 0 .8rem; padding-top: .2rem;
  border-top: 1px solid #e7e2d8;
  color: var(--ink);
}
h2:first-of-type { border-top: none; margin-top: 1.6rem; }
h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.05rem; margin: 1.6rem 0 .5rem; color: var(--ink);
}
p { margin: .7rem 0; }
ul, ol { padding-left: 1.35rem; }
li { margin: .3rem 0; }

code, kbd {
  font-family: var(--font-mono); font-size: .85em;
  background: #efe9dd; color: #6a4300;
  padding: .12em .4em; border-radius: 4px;
}
kbd {
  background: var(--asphalt-900); color: var(--paper);
  border-bottom: 2px solid var(--mango);
  font-weight: 600; padding: .18em .5em;
}
pre {
  background: var(--asphalt-950); color: #e7e9ee;
  padding: 1rem 1.1rem; border-radius: 8px; overflow-x: auto;
  font-family: var(--font-mono); font-size: .85rem; line-height: 1.55;
}
pre code { background: none; color: inherit; padding: 0; }

table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem;
  font-size: .92rem;
}
th, td {
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid #e7e2d8;
  vertical-align: top;
}
thead th {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid var(--asphalt-900);
}
tr:last-child td { border-bottom: none; }

.callout {
  display: flex; gap: .7rem;
  border-left: 4px solid var(--mango);
  background: #fff3e6;
  border-radius: 0 8px 8px 0;
  padding: .85rem 1rem; margin: 1.2rem 0;
  font-size: .93rem;
}
.callout .tag {
  font-family: var(--font-mono); font-weight: 700; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mango-deep); flex-shrink: 0; padding-top: .1rem;
}
.callout.warn { border-left-color: var(--flag-red); background: #fdeceb; }
.callout.warn .tag { color: var(--flag-red); }
.callout.tip { border-left-color: var(--lime); background: #f4f9e3; }
.callout.tip .tag { color: #6d8a12; }

.card-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 1.4rem 0 2rem;
}
.card {
  border: 1px solid #e7e2d8; border-radius: 10px;
  padding: 1.1rem 1.15rem; background: #fff;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--mango); transform: translateY(-2px); text-decoration: none; }
.card .k { font-family: var(--font-mono); font-size: .72rem; color: var(--mango-deep); letter-spacing: .06em; text-transform: uppercase; }
.card h3 { margin: .35rem 0 .3rem; font-size: 1.02rem; }
.card p { margin: 0; font-size: .87rem; color: var(--ink-soft); }

.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: .15rem 0 .15rem 2.6rem; margin: .9rem 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 6px;
  background: var(--asphalt-950); color: var(--mango-light);
  font-family: var(--font-mono); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

.status-pill {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem;
  font-weight: 600; padding: .12em .55em; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
}
.status-pill.staged { background: #fff3e6; color: var(--mango-deep); }
.status-pill.course { background: #e9f0ff; color: #2457c8; }
.status-pill.finished { background: #e9f7ea; color: #1f8a3b; }
.status-pill.dnf { background: #fdeceb; color: var(--flag-red); }

.kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed #e2ddd0; }
.kbd-row:last-child { border-bottom: none; }
.kbd-row span.action { font-size: .93rem; }

.breadcrumb {
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--ink-soft); }

.page-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid #e7e2d8;
}
.page-nav a {
  flex: 1; border: 1px solid #e7e2d8; border-radius: 8px;
  padding: .8rem 1rem; font-size: .85rem; color: var(--ink);
}
.page-nav a:hover { border-color: var(--mango); text-decoration: none; }
.page-nav .dir { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem;}
.page-nav .next { text-align: right; margin-left: auto; }

.app-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  padding: .2em .6em; border-radius: 5px; letter-spacing: .04em;
  margin-bottom: .8rem;
}
.app-tag.timing { background: #fff3e6; color: var(--mango-deep); }
.app-tag.livetiming { background: #e9f0ff; color: #2457c8; }
.app-tag.announcer { background: #f4f9e3; color: #6d8a12; }
.app-tag.admin { background: #efe9dd; color: #6a4300; }

hr.divider { border: none; border-top: 1px solid #e7e2d8; margin: 2.4rem 0; }

/* Hero (home page) */
.hero {
  background: var(--asphalt-950);
  color: var(--paper);
  border-radius: 14px;
  padding: 2.6rem clamp(1.4rem, 4vw, 3rem);
  margin-bottom: 2.4rem;
  position: relative; overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255,122,26,.07) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.hero h1 { color: #fff; font-size: 2.3rem; }
.hero p.lede { color: #b9bfcb; max-width: 60ch; }
.hero .eyebrow { color: var(--mango-light); }
.hero-logo {
  position: absolute; top: 1.6rem; right: clamp(1.2rem, 4vw, 3rem);
  width: 88px; height: 88px; object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
@media (max-width: 620px) { .hero-logo { display: none; } }

footer.site-footer {
  padding: 2rem clamp(1.2rem, 4vw, 4rem) 3rem;
  color: var(--ink-soft); font-size: .82rem;
  max-width: 980px;
}

/* Mobile */
@media (max-width: 880px) {
  .topbar .menu-btn { display: inline-block; }
  .topbar-search { display: none; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0; width: 280px;
    transform: translateX(-100%); transition: transform .2s ease;
    overflow-y: auto; z-index: 30;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,.25); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; top: 56px;
    background: rgba(0,0,0,.35); z-index: 20;
  }
  .sidebar-backdrop.open { display: block; }
  main.content { padding: 1.6rem 1.2rem 4rem; }
  .hero h1 { font-size: 1.7rem; }
}

@media print {
  .topbar, .sidebar, .sidebar-backdrop, .page-nav { display: none; }
  .layout { display: block; }
  main.content { padding: 0; max-width: 100%; }
}