/* ── Responsive ──────────────────────────────────────────── */

/* ── Sidebar display-settings panel ─────────────────────── */
.sb-prefs { padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sb-pref-group { display: flex; flex-direction: column; gap: 0.6rem; }
.sb-pref-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.sb-pref-btns  { display: flex; gap: 0.4rem; }
/* Theme toggle button inherits icon-btn — just needs wider padding for the text */
.sb-theme-btn  { padding: 0.2rem 0.65rem; }

/* ── Sidebar nav (left panel) ────────────────────────────── */
.sb-nav { display: flex; flex-direction: column; padding: 0.4rem 0; }
.sb-nav-link {
  padding: 0.65rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-label);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sb-nav-link:hover {
  color: var(--text);
  background: var(--gold-dim);
  border-left-color: var(--gold);
}

@media (max-width: 640px) {
  .topbar { padding: 0 0.85rem; gap: 0.5rem; }
  .topbar-a11y { display: none; }
  .sidebar-topbar-btn { display: none; }
  .brand-name { font-size: 0.8125rem; }

  /* Settings rows: stack vertically so controls never get clipped */
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .nav-bar { display: none; }

  .container { padding: 0.75rem; gap: 0.75rem; }

  .meta-area { padding: 0.9rem 1rem; }
  .meta-grid { gap: 0.45rem; }
  .meta-item-wrap { min-width: calc(50% - 0.225rem); flex: 1 1 calc(50% - 0.225rem); }
  .meta-item-wrap .meta-item { min-width: 0; width: 100%; flex: 1 1 auto; }

  .challenge-actions { justify-content: flex-start; padding: 0.45rem 0.75rem; }
  .guess-result { padding: 0.4rem 0.75rem; }
  .challenge-group-reveal { margin-left: 0; }
  .challenge-btn-primary {
    flex: 1;
    justify-content: center;
  }

  .code-area { padding: 0.75rem; }

  .code-header { padding: 0.35rem 0.65rem; }
  .code-lang   { font-size: 0.625rem; }

  .copy-btn { font-size: 0.625rem; padding: 0.15rem 0.4rem; }
  .challenge-btn { font-size: 0.6875rem; padding: 0.22rem 0.5rem; }

  .puter-panel-hint { display: none; }
  .puter-panel-header { padding: 0.55rem 0.75rem; }
  .puter-output { padding: 0.85rem 0.9rem; }

  .details-area { padding: 0.85rem; }

  .toolbar {
    margin: 0 -0.75rem -0.75rem;
    padding: 0.5rem 0.75rem 0.6rem;
    gap: 0.4rem;
  }
  /* Actions row: scrollable if many buttons */
  .toolbar-actions {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .toolbar-actions::-webkit-scrollbar { display: none; }
  /* Nav row: both buttons share the row equally */
  #prev-btn    { flex: 1; justify-content: center; margin-right: 0; }
  #refresh-btn { flex: 1; justify-content: center; }

  .footer { padding: 0.65rem 0.75rem; font-size: 0.6875rem; gap: 0.2rem; }
  .footer-row { gap: 0.15rem 0.4rem; }
}

@media (max-width: 400px) {
  .meta-item-wrap { min-width: 100%; flex: 1 1 100%; }
  .meta-item-wrap .meta-item { min-width: 0; width: 100%; flex: 1 1 auto; }
  .icon-btn { padding: 0.25rem 0.3rem; font-size: 0.7rem; }
}

/* ── Tag chips ───────────────────────────────────────────── */

.tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

.tags-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-label);
  margin-right: 0.2rem;
  flex-shrink: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tag-chip:hover {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
}

/* ── Browse page ─────────────────────────────────────────── */

.browse-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.browse-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
}

.browse-back {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-right: auto;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.6rem;
  transition: border-color 0.15s, color 0.15s;
}

.browse-back:hover { border-color: var(--gold-border); color: var(--gold); }

.browse-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Layout toggle ───────────────────────────────────────── */

.layout-toggle {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
}

.layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.layout-btn:hover {
  border-color: var(--gold-border);
  color: var(--gold);
}

.layout-btn.active {
  border-color: var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
}

/* ── Browse search ───────────────────────────────────────── */

/* ── Browse search row (search + filter selects on one line) ─ */

.browse-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0.6rem 0 0;
  flex-wrap: wrap;
}

.browse-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.browse-search-wrap::before {
  content: "⌕";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  color: var(--text-muted);
  pointer-events: none;
  line-height: 1;
}

.browse-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.75rem 0.4rem 2.1rem;
  font-size: 0.8125rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  height: 30px;
}

.browse-search:focus {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.browse-search::placeholder { color: var(--text-muted); }

/* ── Custom filter dropdowns ─────────────────────────────── */

.browse-filters {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.browse-filters-label {
  font-size: 0.72rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  padding-right: 0.15rem;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 30px;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-label);
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline: none;
}

.filter-dropdown-btn:hover {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-dim);
}

.filter-dropdown-btn:focus-visible {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.filter-dropdown-btn.filter-active {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-dim);
}

.filter-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
}

.filter-dropdown-btn[aria-expanded="true"] .filter-dropdown-chevron {
  transform: rotate(180deg);
}

.filter-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px var(--border-subtle);
  z-index: 200;
  padding: 0.3rem;
  list-style: none;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
}

.filter-dropdown-list.open { display: block; }

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.filter-dropdown-item:hover {
  background: var(--gold-dim);
  color: var(--gold);
}

.filter-dropdown-item[aria-selected="true"] {
  color: var(--gold);
  background: var(--gold-dim);
  border-left: 2px solid var(--gold);
  padding-left: calc(0.6rem - 2px);
}

.filter-dropdown-item-none {
  color: var(--text-muted);
}

/* ── Active filter chips bar ─────────────────────────────── */

.browse-active-filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.1rem;
  min-height: 1.5rem;
}

.browse-active-filters.hidden { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  padding: 0.15rem 0.5rem 0.15rem 0.65rem;
  white-space: nowrap;
}

.filter-chip-label {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 0.1rem;
}

.filter-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gold);
  opacity: 0.7;
  line-height: 1;
  font-size: 0.85rem;
  transition: opacity 0.15s;
}

.filter-chip-clear:hover { opacity: 1; }

.filter-clear-all {
  font-size: 0.7rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.2rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.filter-clear-all:hover { color: var(--text); }

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

/* ── List layout mode ────────────────────────────────────── */

.results-grid.layout-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.results-grid.layout-list .result-card {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
}

.results-grid.layout-list .result-title {
  display: block;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-grid.layout-list .result-meta {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.results-grid.layout-list .result-tags {
  display: none;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 8px var(--silver-glow);
}

.result-card:hover {
  border-color: var(--gold-border);
  background: var(--surface-raised);
  box-shadow: 0 0 16px var(--gold-glow);
}

.result-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.result-badge {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono), ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver);
  background: var(--surface-3);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.15rem 0.45rem;
}

.result-badge.sev-critical { color: #ef4444; border-color: #ef444455; background: #ef444412; }
.result-badge.sev-high     { color: #f97316; border-color: #f9731655; background: #f9731612; }
.result-badge.sev-medium   { color: #eab308; border-color: #eab30855; background: #eab30812; }
.result-badge.sev-low      { color: #3b82f6; border-color: #3b82f655; background: #3b82f612; }

[data-theme="light"] .result-badge.sev-critical { color: #b91c1c; border-color: rgba(185,28,28,0.35);  background: rgba(185,28,28,0.08);  }
[data-theme="light"] .result-badge.sev-high     { color: #c2410c; border-color: rgba(194,65,12,0.35);  background: rgba(194,65,12,0.08);  }
[data-theme="light"] .result-badge.sev-medium   { color: #a16207; border-color: rgba(161,98,7,0.35);   background: rgba(161,98,7,0.08);   }
[data-theme="light"] .result-badge.sev-low      { color: #1d4ed8; border-color: rgba(29,78,216,0.35);  background: rgba(29,78,216,0.08);  }

.result-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.tag-chip-sm {
  font-size: 0.625rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.page-btn {
  cursor: pointer;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}

.page-btn:hover:not(:disabled) { border-color: var(--gold-border); background: var(--gold-dim); color: var(--gold); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-btn-active {
  border-color: var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
  pointer-events: none;
}

.page-info { font-size: 0.75rem; color: var(--text-muted); min-width: 4rem; text-align: center; }

.page-ellipsis {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 0.15rem;
  align-self: center;
  user-select: none;
}

.browse-empty,
.browse-loading,
.browse-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.browse-error { color: #f87171; }

@media (max-width: 640px) {
  .results-grid { grid-template-columns: 1fr; }
  .browse-header { gap: 0.5rem; }
}