/* Problem browsing only; coding layout lives in problem-workspace.css. */
[data-problem-results] {
  transition: opacity 120ms ease;
}

[data-problem-results][aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
[data-problem-results] {
    transition: none;
  }
}

.oj-submission-link:hover {
  color: var(--oj-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oj-problem-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) auto;
  gap: 16px;
  align-items: end;
}

.oj-problem-filter-grid > * { min-width: 0; }

.oj-problem-filter-grid .oj-filter-actions { display: flex; gap: 8px; }

.oj-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 16px; }

.oj-active-filters a { padding-block: 8px; overflow-wrap: anywhere; max-width: 100%; text-underline-offset: 4px; }

.oj-problem-table tbody td { vertical-align: top; }

.oj-problem-table .oj-text-tags { font-size: 13px; }

@container oj-page (max-width: 999.98px) {
.oj-problem-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.oj-filter-search { grid-column: 1 / -1; }

.oj-problem-filter-grid .oj-filter-actions { align-self: end; }

.oj-problem-filter-grid .oj-filter-actions > * { flex: 1; }

.oj-frontend .oj-problem-table { display: block; min-width: 0; }

.oj-frontend .oj-problem-table thead { display: none; }

.oj-frontend .oj-problem-table tbody { display: block; }

.oj-frontend .oj-problem-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--oj-border);
  }

.oj-frontend .oj-problem-table td {
    display: block; width: auto; min-width: 0; border: 0; padding: 0;
    text-align: left; overflow-wrap: anywhere;
  }

.oj-frontend .oj-problem-table td[data-label]::before { display: none; }

.oj-frontend .oj-problem-table td[data-label="題號"] { grid-row: 1; grid-column: 1; align-self: center; }

.oj-frontend .oj-problem-table .oj-completion-cell { grid-row: 1; grid-column: 2; align-self: center; }

.oj-frontend .oj-problem-table .oj-completion-cell:not(.is-complete) { display: none; }

.oj-frontend .oj-problem-table td[data-label="難度"] { grid-row: 1; grid-column: 3; }

.oj-frontend .oj-problem-table td[data-label="標題"] { grid-row: 2; grid-column: 1 / -1; padding-block: 4px; font-size: 17px; }

.oj-frontend .oj-problem-table td[data-label="來源"] { grid-row: 3; grid-column: 1 / -1; }

.oj-frontend .oj-problem-table td[data-label="標籤"] { grid-row: 4; grid-column: 1 / -1; }

.oj-frontend .oj-problem-table td[colspan] { grid-column: 1 / -1; }

.oj-frontend .oj-problem-table .oj-line-clamp-2 { display: block !important; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
}

@media (max-width: 767.98px) {
.oj-problem-filter-grid { grid-template-columns: minmax(0, 1fr); }

.oj-problem-filter-grid .oj-filter-actions { display: flex; }

.oj-active-filters a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
}

.oj-problem-filter-grid .oj-filter-actions > .btn { flex: 1 1 0 !important; width: auto; }

/* Catalogue A: a stable toolbar and readable, compact data rows. */
.oj-catalog-page .oj-page-heading { margin-bottom: 22px; }
.oj-catalog-page .oj-page-heading h1 { font-size: 32px; }
.oj-catalog-page .oj-problem-filter-grid { grid-template-columns: minmax(200px, 2fr) minmax(110px, .85fr) minmax(110px, .85fr) minmax(160px, 1.15fr) auto; gap: 16px; }
.oj-catalog-page .oj-problem-filter-grid:not(:has(#solved-filter)) { grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(180px, 1.3fr) auto; }
.oj-catalog-page .oj-problem-filters { padding: 18px 20px !important; box-shadow: none; }
.oj-catalog-page .oj-problem-filter-grid .form-label { font-size: 13px; margin-bottom: 8px; }
.oj-catalog-page .oj-filter-actions .btn { min-width: 88px; min-height: 46px; }
.oj-catalog-page .oj-data-surface { box-shadow: none; }
.oj-catalog-page .oj-problem-table thead th { font-size: 13px; letter-spacing: 0; padding: 14px 18px; }
.oj-catalog-page .oj-problem-table tbody td { vertical-align: middle; padding: 13px 18px; font-size: 14px; }
.oj-catalog-page .oj-problem-table .oj-cell-primary { font-size: 15px; line-height: 1.5; }
.oj-catalog-status-column { width: 124px; }
.oj-catalog-id-column { width: 96px; }
.oj-catalog-difficulty-column { width: 112px; }
.oj-catalog-source-column { width: 100px; }
.oj-catalog-topics-column { width: 27%; }
.oj-catalog-page .oj-problem-table .oj-completion-cell { color: var(--oj-muted); font-size: 12px; white-space: nowrap; }
.oj-catalog-page .oj-problem-table .oj-completion-cell.is-complete { color: var(--oj-success); }
.oj-catalog-page .oj-completion-label { margin-inline-start: 6px; }
.oj-catalog-page .oj-problem-table td[data-label="來源"] > a { display: inline-flex; align-items: center; min-height: 28px; }
@container oj-page (max-width: 999.98px) {
  .oj-catalog-page .oj-problem-filter-grid, .oj-catalog-page .oj-problem-filter-grid:not(:has(#solved-filter)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oj-catalog-page .oj-problem-table tbody td { padding: 0; }
  .oj-catalog-page .oj-problem-table .oj-completion-cell { text-align: left; }
  .oj-catalog-page .oj-problem-table .oj-cell-primary { font-size: 17px; }
  .oj-catalog-page .oj-problem-table td[data-label="來源"] > a { min-height: 44px; }
}
@media (max-width: 767.98px) {
  .oj-catalog-page .oj-problem-filters { padding: 16px !important; }
  .oj-catalog-page .oj-problem-filter-grid, .oj-catalog-page .oj-problem-filter-grid:not(:has(#solved-filter)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .oj-catalog-page .oj-filter-search { grid-column: 1 / -1; }
  .oj-catalog-page .oj-filter-actions { align-self: end; }
  .oj-catalog-page .oj-filter-actions .btn { min-width: 0; }
}