/* ------------------------------------------------------------------
   Design tokens. Defaults are light-mode; dark overrides at the bottom.
   ------------------------------------------------------------------ */
:root {
  --bg:          #ffffff;
  --bg-alt:      #f6f8fa;
  --bg-sunken:   #eef1f4;
  --fg:          #1f2328;
  --fg-muted:    #656d76;
  --border:      #d0d7de;
  --border-muted:#eff2f5;
  --accent:      #0969da;
  --accent-hover:#0550ae;
  --result-ac:   #1a7f37;
  --result-wa:   #d1242f;
  --result-warn: #9a6700;
  --radius:      6px;

  --font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono:   "SF Mono", Menlo, Consolas, "Cascadia Code", "Noto Sans Mono", monospace;

  --header-h:    52px;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
  :root[data-theme="auto"] {
    --bg:         #0d1117;
    --bg-alt:     #161b22;
    --bg-sunken:  #010409;
    --fg:         #c9d1d9;
    --fg-muted:   #8b949e;
    --border:     #30363d;
    --border-muted:#21262d;
    --accent:     #58a6ff;
    --accent-hover:#79c0ff;
    --result-ac:  #3fb950;
    --result-wa:  #f85149;
    --result-warn:#d29922;
  }
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --bg:         #0d1117;
  --bg-alt:     #161b22;
  --bg-sunken:  #010409;
  --fg:         #c9d1d9;
  --fg-muted:   #8b949e;
  --border:     #30363d;
  --border-muted:#21262d;
  --accent:     #58a6ff;
  --accent-hover:#79c0ff;
  --result-ac:  #3fb950;
  --result-wa:  #f85149;
  --result-warn:#d29922;
}

:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------------
   Base & layout
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
}

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

code {
  font-family: var(--font-mono);
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

pre {
  font-family: var(--font-mono);
  background: var(--bg-alt);
  padding: 12px;
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.app-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
}

.app-nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.app-nav .brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.app-nav .brand:hover { text-decoration: none; }
.app-nav a { color: var(--fg-muted); font-weight: 500; }
.app-nav a:hover { color: var(--fg); text-decoration: none; }
.app-nav .spacer { flex: 1; }

#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
#theme-toggle:hover { background: var(--bg-sunken); }

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  transition: opacity 120ms ease;
}
#app.loading { opacity: 0.55; pointer-events: none; }

.loading { color: var(--fg-muted); }

.error {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--result-wa);
  border-radius: var(--radius);
  padding: 20px;
}
.error h2 { margin-top: 0; color: var(--result-wa); }

/* ------------------------------------------------------------------
   Page header (shared across views)
   ------------------------------------------------------------------ */
.page-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.page-header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.page-header .summary {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Filters
   ------------------------------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filters input, .filters select, .filters button {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
}
.filters input[type="search"] {
  min-width: 200px;
  flex: 1;
}
.filters button { cursor: pointer; }
.filters button:hover { background: var(--bg-sunken); }

/* ------------------------------------------------------------------
   Submissions table
   ------------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.submissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.submissions-table th, .submissions-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-muted);
}
/* Column-width control. A long BOJ title (the "SUPER SUPER BINARY
   SEARCH DELUXE 2.5: ..." family is the prototypical offender) makes
   the 제목 cell's intrinsic width blow past the .table-wrap overflow
   edge, pushing memory / time / language / date off-screen so they
   look "missing". Fix: switch to table-layout: fixed on desktop,
   pin every short column to its natural width, and cap 제목 via an
   inner .cell-title wrapper. max-width on the <td> itself is
   silently ignored under auto layout, so the inner block is what
   actually binds. The mobile card layout further down overrides all
   of this below 768px, so the ruleset is scoped to ≥769px. */
@media (min-width: 769px) {
  .submissions-table { table-layout: fixed; }
  .submissions-table th[data-sort="solution_id"]   { width: 96px;  }
  .submissions-table th[data-sort="problem_id"]    { width: 64px;  }
  /* 제목 has no data-sort — fixed layout hands it all leftover width,
     which .cell-title visually caps. */
  .submissions-table th[data-sort="result_code"]   { width: 84px;  }
  .submissions-table th[data-sort="memory"]        { width: 80px;  }
  .submissions-table th[data-sort="time"]          { width: 72px;  }
  .submissions-table th[data-sort="language"]      { width: 100px; }
  .submissions-table th[data-sort="code_length"]   { width: 84px;  }
  .submissions-table th[data-sort="submitted_at"]  { width: 112px; }

  .submissions-table td[data-label="제목"],
  .problems-table td[data-label="제목"] {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .cell-title {
    /* Larger cap now that the inline .row-tag chips live inside the
       title cell — we need room for title + 3 small chips side-by-side
       before wrapping. */
    max-width: 720px;
    overflow-wrap: anywhere;
  }
  /* Inline tags rendered right after the title <a>. Visually smaller
     than the top-of-page filter chips, non-interactive (they're just
     labels — users click the filter panel to actually filter). */
  .cell-title .inline-tags {
    margin-left: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
  }
  .row-tag {
    display: inline-block;
    padding: 1px 7px;
    background: var(--bg-sunken);
    border-radius: 999px;
    color: var(--fg-muted);
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .row-tag.more {
    background: transparent;
    border: 1px dashed var(--border-muted);
  }
  /* Short-label result column: tighter padding + nowrap/keep-all so
     "틀렸습니다" doesn't break between characters when the viewport
     is dragged narrow. */
  .submissions-table td[data-label="결과"],
  .submissions-table th[data-sort="result_code"] {
    padding-left: 6px;
    padding-right: 6px;
  }
  .cell-result {
    white-space: nowrap;
    word-break: keep-all;
  }

  /* Dashboard "최근 활동" panel reuses .submissions-table but renders
     only 6 columns (no memory/time/code). Its <th>s don't carry
     data-sort attributes, so the selectors above don't bind — pin
     via :nth-child instead. Without these the fixed-layout algorithm
     gave every column 1/6 of the panel width, which squeezed 제목
     until the anchor overflowed into 결과. */
  .submissions-table.recent-activity th:nth-child(1) { width: 96px;  } /* # */
  .submissions-table.recent-activity th:nth-child(2) { width: 64px;  } /* 번호 */
  /* :nth-child(3) — 제목 — unpinned so fixed layout hands it the
     leftover width (capped at .cell-title max-width). */
  .submissions-table.recent-activity th:nth-child(4) { width: 84px;  } /* 결과 */
  .submissions-table.recent-activity th:nth-child(5) { width: 100px; } /* 언어 */
  .submissions-table.recent-activity th:nth-child(6) { width: 112px; } /* 제출 */

  /* Problems table: 5 columns now that tags live inline inside the
     제목 cell. Pin fixed widths for the short columns so 제목
     absorbs the leftover (capped by .cell-title max-width, which we
     bump below because the inline tag chips need more room than a
     bare title). */
  .problems-table { table-layout: fixed; }
  .problems-table th:nth-child(1)  /* 티어 */         { width: 72px;  }
  .problems-table th[data-sort="problem_id"]           { width: 72px;  }
  /* 제목 (:nth-child(3)) unpinned — takes all remaining width. */
  .problems-table th[data-sort="accepted_user_count"]  { width: 96px;  }
  .problems-table th:nth-child(5)  /* 내 제출 / AC */  { width: 96px;  }
}
/* Shared tag-chips panel (used by /#/problems and /#/submissions).
   Collapsed state hides every chip flagged `.overflow` — those are
   non-selected tags past MAX_TAG_CHIPS_COLLAPSED (40). Selected tags
   never get the .overflow class so active filters stay visible when
   the panel is in the default collapsed state. */
.tag-chips[data-expanded="false"] .filter-chip.overflow { display: none; }
.tag-chips-toggle {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.tag-chips-toggle:hover {
  background: var(--bg-sunken);
  color: var(--fg);
}
/* Separate the tag-chip panel from whatever the next dashboard /
   view section below it is — without this the 태그 panel's pill
   background runs flush against the stat-grid / table-wrap that
   follows it, which reads as a single merged block and makes the
   page feel cramped. 18px is just over the panel's own internal
   6px flex-gap + 10-12px padding, so the visual break is
   proportional to the panel's own density. */
.tag-chips + * { margin-top: 18px; }

.submissions-table thead th {
  background: var(--bg-alt);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Note: sticky thead would be nice, but `.table-wrap { overflow-x: auto }`
 * silently promotes overflow-y to auto too, which traps the sticky thead
 * inside the wrap. Drop the sticky; the global app-header stays sticky. */
.submissions-table thead th.active {
  color: var(--fg);
}
.submissions-table thead th:hover {
  background: var(--bg-sunken);
  color: var(--fg);
}
.submissions-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.submissions-table td.date {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.submissions-table tbody tr:hover td { background: var(--bg-alt); }
.submissions-table tbody tr.row-focused > td {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent);
}
.submissions-table tbody tr.row-focused > td:first-child {
  /* Avoid the inset shadow double-drawing on the first cell's left edge */
  box-shadow: inset 3px 0 0 var(--accent);
}
.submissions-table .solution-id {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.submissions-table .empty {
  padding: 32px;
  text-align: center;
  color: var(--fg-muted);
}

.result { font-weight: 500; }
.result-ac { color: var(--result-ac); }
.result-wa { color: var(--result-wa); }
.result-ce, .result-rte, .result-tle, .result-mle, .result-ole, .result-pe {
  color: var(--result-warn);
}

.lock { opacity: 0.6; font-size: 0.9em; }
.vis {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.vis-private { border-color: var(--result-wa); color: var(--result-wa); }
.vis-restricted { border-color: var(--result-warn); color: var(--result-warn); }

.pager {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.pager .disabled { color: var(--border); cursor: not-allowed; }
.pager-meta { font-size: 13px; }

/* ------------------------------------------------------------------
   Submission detail view
   ------------------------------------------------------------------ */
.submission .detail-breadcrumbs {
  margin-bottom: 12px;
  color: var(--fg-muted);
  font-size: 13px;
}
.submission .detail-breadcrumbs .sep { margin: 0 6px; opacity: 0.5; }

.submission .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.submission .detail-header h1 {
  margin: 0;
  font-size: 22px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.submission .detail-header h1 .solution-id {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-muted);
  font-weight: 500;
}
.submission .detail-header h1 .result { font-size: 18px; }

.submission .sibling-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-muted);
}
.submission .sibling-nav .sib-prev,
.submission .sibling-nav .sib-next {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
}
.submission .sibling-nav .sib-prev:hover,
.submission .sibling-nav .sib-next:hover {
  background: var(--bg-alt);
  text-decoration: none;
}
.submission .sibling-nav .disabled {
  padding: 4px 10px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  color: var(--border);
}

.submission .meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.submission .meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.submission .meta dt {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.submission .meta dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.submission .meta dd .muted {
  color: var(--fg-muted);
  font-size: 12px;
  margin-left: 4px;
}

.submission .source-block {
  margin-bottom: 24px;
}
.submission .source-block .source-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.submission .source-block h2 {
  margin: 0;
  font-size: 16px;
}
.submission .source-block .actions { display: flex; gap: 6px; }
.submission .source-block .actions button {
  background: var(--bg-alt);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.submission .source-block .actions button:hover { background: var(--bg-sunken); }

.submission .source-pre {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  /* Full content height — the page, not the block, scrolls vertically.
   * overflow-x stays auto for long single lines (horizontal scrollbar
   * appears only when needed). */
  overflow-x: auto;
  overflow-y: visible;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
  word-break: normal;
  tab-size: 4;
}

.submission .source-block.unavailable,
.submission .source-block.error {
  padding: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.submission .source-block.error { border-left: 3px solid var(--result-wa); }
.submission .source-block p { margin: 8px 0 0; color: var(--fg-muted); }

.submission .compiler-output {
  margin-bottom: 24px;
}
.submission .compiler-output h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.submission .compiler-output pre {
  margin: 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--result-warn);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 40vh;
  overflow: auto;
}

@media (max-width: 768px) {
  .submission .detail-header { flex-direction: column; align-items: flex-start; }
  .submission .sibling-nav { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------
   Problem detail view
   ------------------------------------------------------------------ */
.problem .problem-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.problem .problem-header .tier {
  display: flex;
  align-items: center;
  gap: 8px;
}
.problem .tier-badge {
  display: inline-block;
  vertical-align: middle;
}
.problem .tier-name {
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.problem .problem-header h1 {
  margin: 0;
  font-size: 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  letter-spacing: -0.01em;
}
.problem .problem-header .problem-id {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 20px;
}

.problem-stats {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 13px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.problem-stats th, .problem-stats td {
  padding: 8px 12px;
  text-align: center;
  border-right: 1px solid var(--border-muted);
}
.problem-stats th:last-child, .problem-stats td:last-child { border-right: none; }
.problem-stats thead th {
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.problem-stats tbody td {
  font-variant-numeric: tabular-nums;
}

.problem-section {
  margin-bottom: 28px;
}
.problem-section > h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-muted);
}
.problem-section .muted {
  color: var(--fg-muted);
  font-weight: 400;
  font-size: 13px;
}

/* --- Scoped styles for sanitized BOJ HTML inside .problem-body --- */
.problem-body {
  font-size: 14px;
  line-height: 1.7;
}
.problem-body p { margin: 0 0 12px; }
.problem-body em { font-style: italic; color: var(--fg); }
.problem-body strong, .problem-body b { font-weight: 700; }
.problem-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px auto;
}
.problem-body a {
  color: var(--accent);
  text-decoration: underline;
}
.problem-body ul, .problem-body ol { padding-left: 24px; margin: 0 0 12px; }
.problem-body li { margin-bottom: 4px; }
.problem-body table {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}
.problem-body table th, .problem-body table td {
  padding: 4px 10px;
  border: 1px solid var(--border);
}
.problem-body table th { background: var(--bg-alt); }
.problem-body pre,
.problem-body code {
  font-family: var(--font-mono);
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}
.problem-body pre {
  padding: 12px 14px;
  overflow-x: auto;
  line-height: 1.45;
}
.problem-body blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--border);
  color: var(--fg-muted);
}
/* BOJ uses <span class="space-highlight"> to visualise whitespace in
 * sample data. Render as a subtle underline. */
.problem-body .space-highlight {
  display: inline-block;
  border-bottom: 1px dotted var(--fg-muted);
  min-width: 1ch;
}

/* --- Sample input/output pairs --- */
.samples-grid {
  display: grid;
  gap: 16px;
}
.sample-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sample .sample-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sample .sample-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
}
.sample .btn-copy {
  background: var(--bg-alt);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.sample .btn-copy:hover { background: var(--bg-sunken); }
.sample pre.sampledata {
  margin: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
}

/* --- Contributors / source list --- */
.contributors {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--fg-muted);
  font-size: 13px;
}
.contributors li { padding: 3px 0; }

/* --- Tag chips --- */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
}
.tag-chip:hover {
  background: var(--bg-sunken);
  border-color: var(--accent);
  text-decoration: none;
}

/* --- My submissions table inside problem view (reuses submissions-table) --- */
.my-submissions .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  .sample-pair { grid-template-columns: 1fr; }
  .problem-stats { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------------
   Problems index view
   ------------------------------------------------------------------ */

/* Tier colour palette — solved.ac-inspired. Hoisted to :root so the
   .tier-bar component renders with color wherever it's used (problems
   index, submissions filter bar, any future consumer), not just
   when it's nested inside .problems. */
:root {
  --tier-bronze:   #ad5600;
  --tier-silver:   #435f7a;
  --tier-gold:     #ec9a00;
  --tier-platinum: #27e2a4;
  --tier-diamond:  #00b4fc;
  --tier-ruby:     #e8214f;
  --tier-unrated:  var(--fg-muted);
}

.tier-dist {
  display: grid;
  grid-template-columns: repeat(6, 1fr) auto;
  gap: 6px;
  margin-bottom: 20px;
}
.tier-bar {
  position: relative;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11px;
  color: var(--fg);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}
.tier-bar:hover { text-decoration: none; border-color: var(--accent); }
.tier-bar.active { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.tier-bar-label { font-weight: 600; letter-spacing: 0.02em; z-index: 1; }
.tier-bar-count { font-variant-numeric: tabular-nums; z-index: 1; }
.tier-bar-fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 100%;
  background: currentColor;
  opacity: 0.18;
  transition: width 180ms ease;
}
.tier-bar.tier-bronze   { color: var(--tier-bronze); }
.tier-bar.tier-silver   { color: var(--tier-silver); }
.tier-bar.tier-gold     { color: var(--tier-gold); }
.tier-bar.tier-platinum { color: var(--tier-platinum); }
.tier-bar.tier-diamond  { color: var(--tier-diamond); }
.tier-bar.tier-ruby     { color: var(--tier-ruby); }
.tier-bar.tier-unrated  { color: var(--tier-unrated); }

.filter-panel {
  margin-bottom: 16px;
}
.filter-panel .filters { margin-bottom: 8px; }
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
}
.tag-chips-label {
  font-size: 11px;
  color: var(--fg-muted);
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
}
.filter-chip:hover { border-color: var(--accent); text-decoration: none; }
.filter-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.filter-chip .chip-count {
  opacity: 0.6;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.filter-chip.active .chip-count { opacity: 0.85; }

/* Problems table (reuse submissions-table base) */
.problems-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.problems-table th, .problems-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-muted);
}
.problems-table thead th {
  background: var(--bg-alt);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.problems-table thead th.active  { color: var(--fg); }
.problems-table thead th:hover   { background: var(--bg-sunken); color: var(--fg); }
.problems-table thead th.num, .problems-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.problems-table tbody tr:hover td { background: var(--bg-alt); }
.problems-table tbody tr.row-focused > td {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent);
}
.problems-table .empty {
  padding: 32px;
  text-align: center;
  color: var(--fg-muted);
}

.tier-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tier-abbrev {
  font-size: 11px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}

.row-tag {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 4px;
  background: var(--bg-alt);
  border-radius: 10px;
  font-size: 11px;
  color: var(--fg-muted);
}
.row-tag.more {
  background: transparent;
  border: 1px dashed var(--border);
}

.solved-badge   { color: var(--result-ac); font-weight: 700; margin-right: 3px; }
.tried-badge    { color: var(--result-warn); font-weight: 700; margin-right: 3px; }
.untried-badge  { color: var(--border); margin-right: 3px; }

/* Reuse submissions-table mobile card behaviour */
@media (max-width: 768px) {
  .tier-dist { grid-template-columns: repeat(3, 1fr); }
  .problems-table thead { display: none; }
  .problems-table, .problems-table tbody, .problems-table tr, .problems-table td { display: block; }
  .problems-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 10px 0;
    background: var(--bg);
  }
  .problems-table tbody tr:hover td { background: transparent; }
  .problems-table td {
    border: none;
    padding: 3px 0;
    white-space: normal;
    text-align: left;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
  .problems-table td::before {
    content: attr(data-label);
    color: var(--fg-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
  }
  .problems-table td.num { text-align: left; }
}

/* ------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------ */
.dashboard .page-header h1 { font-size: 24px; letter-spacing: -0.02em; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-tile {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stat-tile .stat-label {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-tile .stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.stat-tile .stat-sub {
  font-size: 12px;
  color: var(--fg-muted);
}

.panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.panel h2 .muted { color: var(--fg-muted); font-weight: 400; font-size: 12px; }
.panel h2 .more {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Heatmap ---- */
.heatmap-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}
.heatmap { display: block; min-width: 100%; }
.heatmap rect { fill: var(--border-muted); stroke: none; }
.heatmap rect[data-level="1"] { fill: #9be9a8; }
.heatmap rect[data-level="2"] { fill: #40c463; }
.heatmap rect[data-level="3"] { fill: #30a14e; }
.heatmap rect[data-level="4"] { fill: #216e39; }
:root[data-theme="dark"] .heatmap rect,
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .heatmap rect { fill: #161b22; }
}
:root[data-theme="dark"] .heatmap rect[data-level="1"] { fill: #0e4429; }
:root[data-theme="dark"] .heatmap rect[data-level="2"] { fill: #006d32; }
:root[data-theme="dark"] .heatmap rect[data-level="3"] { fill: #26a641; }
:root[data-theme="dark"] .heatmap rect[data-level="4"] { fill: #39d353; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .heatmap rect[data-level="1"] { fill: #0e4429; }
  :root[data-theme="auto"] .heatmap rect[data-level="2"] { fill: #006d32; }
  :root[data-theme="auto"] .heatmap rect[data-level="3"] { fill: #26a641; }
  :root[data-theme="auto"] .heatmap rect[data-level="4"] { fill: #39d353; }
}
.heatmap .heatmap-month,
.heatmap .heatmap-day {
  font-size: 9px;
  fill: var(--fg-muted);
  font-family: var(--font-sans);
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-muted);
  justify-content: flex-end;
}
.heatmap-legend i {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 2px;
  background: var(--border-muted);
}
.heatmap-legend i[data-level="1"] { background: #9be9a8; }
.heatmap-legend i[data-level="2"] { background: #40c463; }
.heatmap-legend i[data-level="3"] { background: #30a14e; }
.heatmap-legend i[data-level="4"] { background: #216e39; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .heatmap-legend i                  { background: #161b22; }
  :root[data-theme="auto"] .heatmap-legend i[data-level="1"]  { background: #0e4429; }
  :root[data-theme="auto"] .heatmap-legend i[data-level="2"]  { background: #006d32; }
  :root[data-theme="auto"] .heatmap-legend i[data-level="3"]  { background: #26a641; }
  :root[data-theme="auto"] .heatmap-legend i[data-level="4"]  { background: #39d353; }
}
:root[data-theme="dark"] .heatmap-legend i                 { background: #161b22; }
:root[data-theme="dark"] .heatmap-legend i[data-level="1"] { background: #0e4429; }
:root[data-theme="dark"] .heatmap-legend i[data-level="2"] { background: #006d32; }
:root[data-theme="dark"] .heatmap-legend i[data-level="3"] { background: #26a641; }
:root[data-theme="dark"] .heatmap-legend i[data-level="4"] { background: #39d353; }

/* ---- Sparkline ---- */
.sparkline-wrap {
  color: var(--accent);
  overflow: hidden;
}
.sparkline { width: 100%; height: auto; display: block; }
.sparkline-line { stroke: currentColor; fill: none; }
.sparkline-fill { fill: currentColor; opacity: 0.15; stroke: none; }

/* ---- 3-up row ---- */
.dashboard-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.dashboard-row .panel { margin-bottom: 0; }
@media (max-width: 900px) {
  .dashboard-row { grid-template-columns: 1fr; }
}

/* ---- Result breakdown ---- */
.result-breakdown { list-style: none; padding: 0; margin: 0; }
.result-breakdown .result-row {
  display: grid;
  grid-template-columns: 85px 1fr 110px;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.result-breakdown .result-label { font-weight: 500; }
.result-breakdown .result-bar {
  background: var(--border-muted);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.result-breakdown .result-bar-fill {
  display: block; height: 100%;
  background: currentColor;
  opacity: 0.7;
}
.result-breakdown .result-ac   { color: var(--result-ac); }
.result-breakdown .result-wa   { color: var(--result-wa); }
.result-breakdown .result-ce,
.result-breakdown .result-rte,
.result-breakdown .result-tle,
.result-breakdown .result-mle,
.result-breakdown .result-ole,
.result-breakdown .result-pe   { color: var(--result-warn); }
.result-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--fg-muted);
}
.result-count .muted { margin-left: 4px; }

/* ---- Solved tiers + top tags (shared bar list layout) ---- */
.solved-tiers, .top-tags {
  list-style: none;
  padding: 0;
  margin: 0;
}
.solved-tiers li, .top-tags li {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.tier-row, .top-tags li {
  text-decoration: none;
  color: var(--fg);
}
.tier-row { display: contents; }
.tier-row-label, .top-tag-label {
  color: currentColor;
  font-weight: 500;
}
.tier-row-bar, .top-tag-bar {
  background: var(--border-muted);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.tier-row-bar > span, .top-tag-bar > span {
  display: block; height: 100%;
  background: currentColor;
  opacity: 0.65;
}
.tier-row-count, .top-tag-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.tier-row.tier-bronze   { color: var(--tier-bronze); }
.tier-row.tier-silver   { color: var(--tier-silver); }
.tier-row.tier-gold     { color: var(--tier-gold); }
.tier-row.tier-platinum { color: var(--tier-platinum); }
.tier-row.tier-diamond  { color: var(--tier-diamond); }
.tier-row.tier-ruby     { color: var(--tier-ruby); }

/* Tier palette is defined once on :root (see the "Tier colour palette"
   block earlier in this file) — no per-view redeclaration needed. */

/* ------------------------------------------------------------------
   Mobile: collapse the submissions table into cards.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .app-nav { gap: 10px; }
  .app-nav .brand { font-size: 14px; }

  .submissions-table thead { display: none; }
  .submissions-table,
  .submissions-table tbody,
  .submissions-table tr,
  .submissions-table td { display: block; }
  .submissions-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 10px 0;
    background: var(--bg);
  }
  .submissions-table tbody tr:hover td { background: transparent; }
  .submissions-table td {
    border: none;
    padding: 3px 0;
    white-space: normal;
    text-align: left;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
  .submissions-table td::before {
    content: attr(data-label);
    color: var(--fg-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
  }
  .submissions-table td.num,
  .submissions-table td.date { text-align: left; }
  .submissions-table .empty {
    display: block;
    padding: 24px;
  }
  .submissions-table .empty::before { content: ""; }

  .table-wrap { border: none; overflow: visible; }
}