/* Library layout; shared tokens and controls live in theme.css. */
html { scroll-behavior: smooth; }
.topbar, .archive-main {
  width: min(1180px, calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}
.archive-main { padding-bottom: calc(var(--space-8) * 2); }
.social-links { display: flex; gap: var(--space-2); }
.social-link svg { width: 18px; height: 18px; }
.social-link svg:not(.stroke-icon) { fill: currentColor; }
.overview { padding-block: var(--space-8) var(--space-6); }
.profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.profile-identity h1 {
  margin: var(--space-2) 0 0;
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.live-dot, .sync-indicator {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.sync-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-label);
}
.sync-indicator { background: var(--muted); }
.sync-indicator.syncing { animation: pulse 1.15s ease-in-out infinite; background: var(--warning); }
.sync-indicator.live { background: var(--accent); }
@keyframes pulse { 50% { opacity: 0.35; } }

.updates-card { padding: var(--space-6); }
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-heading h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.section-kicker { margin-bottom: var(--space-1); }
.section-meta { margin: 0; color: var(--muted); font-size: var(--text-label); }
.branch-label, .platform-badge, .language-badge {
  display: inline-block;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: var(--space-1) var(--space-2);
  color: var(--muted);
  font: 500 var(--text-meta)/1.4 var(--font-mono);
}
.branch-label { margin-left: var(--space-2); vertical-align: middle; }
.commits-link { flex-shrink: 0; }
.commits-link:hover { color: var(--accent); }
.commit-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.commit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7ch auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--text-label);
}
.commit-title { overflow-wrap: anywhere; text-decoration: none; }
.commit-title:hover { color: var(--accent); text-decoration: underline; }
.commit-sha, .commit-row time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
}
.commit-row time { white-space: nowrap; }
.updates-status { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-meta); }

.library { margin-top: var(--space-6); overflow: hidden; scroll-margin-top: var(--space-4); }
.library-heading { padding: var(--space-6); }
.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-4);
}
.search-box, .sort-control {
  min-height: var(--control-height);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  padding-inline: var(--space-3);
  color: var(--muted);
  font-size: var(--text-label);
}
.search-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.search-box:focus-within, .sort-control:focus-within { border-color: var(--accent); }
.search-box svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  padding-block: var(--space-2);
  color: var(--ink);
}
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-box kbd {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
  padding-inline: var(--space-2);
  color: var(--muted);
  font: var(--text-meta)/1.5 var(--font-mono);
}
.sort-control { display: flex; align-items: center; gap: var(--space-2); }
.sort-control select {
  min-height: 36px;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--ink);
  font-weight: 550;
}
.sort-control option { background: var(--surface); color: var(--ink); }
.platform-filters {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) var(--space-6) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--surface);
}
.filter-chip { flex: 0 0 auto; border-radius: var(--radius-pill); }
.filter-chip span { color: var(--muted); font: var(--text-meta)/1.4 var(--font-mono); }
.filter-chip[aria-pressed="true"] span { color: inherit; }
.table-shell { border-top: 1px solid var(--line); }
.table-header, .problem-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 160px 76px 28px;
  gap: var(--space-4);
  align-items: center;
  padding-inline: var(--space-6);
}
.table-header {
  min-height: var(--control-height);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: 600;
}
.problem-row {
  min-height: 80px;
  border-top: 1px solid var(--line);
  padding-block: var(--space-4);
  text-decoration: none;
  transition: background 140ms ease;
}
.problem-row:first-child { border-top: 0; }
.problem-row:hover, .problem-row:focus-visible { background: var(--surface-soft); }
.problem-row:focus-visible { outline-offset: -2px; }
.problem-main { min-width: 0; }
.problem-meta { display: flex; min-width: 0; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.problem-title {
  display: block;
  overflow: hidden;
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.problem-path {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font: var(--text-meta)/1.5 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.submission-time, .problem-date-mobile {
  color: var(--muted);
  font: var(--text-meta)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.problem-date-mobile { display: none; }
.platform-badge { border-color: transparent; background: var(--accent-soft); color: var(--accent-deep); }
.row-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-small);
  color: var(--muted);
}
.problem-row:hover .row-arrow { background: var(--accent-soft); color: var(--accent); }
.empty-state { padding: calc(var(--space-8) * 2) var(--space-6); text-align: center; }
.empty-state > span {
  display: grid;
  width: var(--control-height);
  height: var(--control-height);
  place-items: center;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-control);
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-mono);
}
.empty-state h3 { margin: 0; font-size: var(--text-body); font-weight: 600; }
.empty-state p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-label); }
.load-more { width: calc(100% - var(--space-6) * 2); margin: var(--space-4) var(--space-6) var(--space-6); }

@media (max-width: 900px) {
  .table-header, .problem-row { grid-template-columns: minmax(0, 1fr) 94px 146px 64px 24px; gap: var(--space-3); }
}
@media (max-width: 680px) {
  .profile-header { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .overview { padding-block: var(--space-6); }
  .updates-card { padding: var(--space-4); }
  .section-heading { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
  .commit-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); }
  .commit-title { grid-column: 1 / -1; }
  .commit-row time { grid-column: 2; }
  .library-heading { padding: var(--space-4); }
  .toolbar { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .sort-control { justify-content: space-between; }
  .platform-filters { padding-inline: var(--space-4); }
  .table-header { display: none; }
  .problem-row { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4); }
  .problem-row .platform-badge, .problem-row .language-badge, .problem-row > .submission-time { display: none; }
  .problem-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .problem-path { max-width: 100%; }
  .problem-date-mobile { display: block; }
  .load-more { width: calc(100% - var(--space-4) * 2); margin-inline: var(--space-4); }
}