/* Minimal coach styles — single file, no framework. Light theme. */
:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel-2: #f1f3f9;
  --text: #1a1f2e;
  --muted: #5b6479;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --border: #d8dde7;
  --code-bg: #f3f5fb;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
header.topbar .brand { font-weight: 700; letter-spacing: 0.02em; }
header.topbar nav { display: flex; gap: 1rem; flex: 1; }
header.topbar nav a { color: var(--muted); }
header.topbar nav a.active, header.topbar nav a:hover { color: var(--text); }
header.topbar .who { color: var(--muted); font-size: 0.9rem; }

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.muted { color: var(--muted); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:hover { background: var(--accent-2); }
.btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.good { background: var(--good); }
.btn.danger { background: var(--bad); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

input[type=text], input[type=password] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
}
label { display: block; font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 0.25rem; }

.tier {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.tier.trace { background: #dbe7ff; color: #1d4ed8; }
.tier.fix   { background: #fde7c8; color: #9a4d10; }
.tier.build { background: #d2f0dc; color: #146c3b; }

.status-pill {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.5rem;
}
.status-new      { background: #e6e9f5; color: #4a536e; }
.status-opened   { background: #ebe1ff; color: #5a3aa3; }
.status-attempted{ background: #fde7c8; color: #9a4d10; }
.status-solved   { background: #d2f0dc; color: #146c3b; }
.status-locked   { background: #e6e9f5; color: #8089a3; }

.problem-list { list-style: none; padding: 0; margin: 0; }
.problem-list li {
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
}
.problem-list li:last-child { border-bottom: 0; }

.bandgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.bandcard {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.bandcard .meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }
.bandcard h3 { margin: 0; }

.progress {
  height: 6px;
  background: #e1e6f2;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.6rem;
}
.progress > div {
  height: 100%;
  background: var(--accent);
}

.layer {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 0.9rem 1rem;
}
.layer h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--accent-2); }
.layer .reveal { margin-top: 0.3rem; }

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.45;
}
code { font-family: "Fira Code", "Menlo", monospace; }
:not(pre) > code {
  background: var(--code-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.92em;
}

.heatmap { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.heatmap th, .heatmap td { border: 1px solid var(--border); padding: 0.3rem 0.5rem; text-align: center; }
.heatmap th { background: var(--panel-2); }
.heatmap td.name { text-align: left; }
.heat-0 { background: #f3f4f9; }
.heat-1 { background: #fde7c8; }
.heat-2 { background: #d2f0dc; }
.heat-3 { background: #98d9b0; }

.flash {
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 0.8rem;
}
.flash.error { background: #fde2e2; color: #8a1c1c; border: 1px solid #f3b3b3; }
.flash.ok    { background: #d2f0dc; color: #146c3b; border: 1px solid #98d9b0; }
.flash.warn  { background: #fde7c8; color: #9a4d10; border: 1px solid #f0c98a; }

.locked-row { opacity: 0.55; }
.locked-row .lock-icon { margin-right: 0.4rem; }
.locked-banner {
  background: var(--panel-2);
  border: 1px dashed var(--border);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  color: var(--muted);
  margin-top: 0.6rem;
}

.tablist { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
}
.tab.active { background: var(--accent); color: white; border-color: var(--accent); }

@media (max-width: 600px) {
  main { padding: 1rem 0.75rem 4rem; }
}