/* Clock Explorer styling. Reads palette vars (custom.css) with fallbacks. */
.ce-root { --ce-primary: var(--pst-color-primary, #3a7ca5); --ce-border: var(--pst-color-border, #e2e8f0);
  --ce-surface: var(--pst-color-surface, #f6f8fa); --ce-muted: var(--pst-color-text-muted, #6b7a8d);
  font-size: 0.9rem; }

/* Controls block: search/sort/view + filter bar + active chips. The table
   itself scrolls inside a bounded box (.ce-scroll), so these controls stay put
   and the page barely scrolls — no page-level sticky needed (and a theme
   ancestor's overflow would trap it anyway). */
.ce-controls { padding-bottom: 4px; }
.ce-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ce-search { flex: 1 1 240px; min-width: 200px; padding: 8px 12px; border: 1px solid var(--ce-border);
  border-radius: 8px; background: var(--pst-color-background, #fff); color: inherit; }
.ce-btn { padding: 7px 12px; border: 1px solid var(--ce-border); border-radius: 8px; background: var(--ce-surface);
  color: inherit; cursor: pointer; line-height: 1; }
.ce-btn:hover { border-color: var(--ce-primary); }
.ce-btn.active { background: var(--ce-primary); color: #fff; border-color: var(--ce-primary); }
.ce-viewtoggle { display: inline-flex; }
.ce-viewtoggle .ce-btn:first-child { border-radius: 8px 0 0 8px; }
.ce-viewtoggle .ce-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.ce-sort { padding: 7px 10px; border: 1px solid var(--ce-border); border-radius: 8px; background: var(--ce-surface); color: inherit; }
.ce-count { margin-left: auto; color: var(--ce-muted); font-size: 0.85rem; }

.ce-main { display: block; }

/* Filter bar — one dropdown button per categorical column, above the table. */
.ce-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ce-filter { position: relative; }
.ce-filter-btn { display: inline-flex; align-items: center; gap: 6px; }
.ce-filter-caret { opacity: 0.6; font-size: 0.75rem; }
.ce-filter-badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center;
  justify-content: center; border-radius: 999px; background: var(--ce-primary); color: #fff; font-size: 0.7rem;
  font-variant-numeric: tabular-nums; }
.ce-filter-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 260px; max-width: 80vw;
  background: var(--pst-color-background, #fff); border: 1px solid var(--ce-border); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(11, 27, 43, 0.16); padding: 8px; }
.ce-filter-search { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--ce-border);
  border-radius: 7px; background: var(--pst-color-background, #fff); color: inherit; margin-bottom: 6px; }
.ce-filter-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ce-filter-opt { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.ce-filter-opt:hover { background: var(--ce-surface); }
.ce-filter-opt input { margin: 0; flex: none; }
.ce-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ce-opt-count { margin-left: auto; opacity: 0.65; font-variant-numeric: tabular-nums; font-size: 0.8rem; }

/* Active-filter chips */
.ce-active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ce-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--ce-surface); border: 1px solid var(--ce-border); font-size: 0.8rem; }
.ce-active-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.ce-active-x { cursor: pointer; border: none; background: none; color: var(--ce-muted); font-size: 1rem; line-height: 1;
  padding: 0 4px; }
.ce-active-x:hover { color: var(--ce-primary); }

/* Bounded scroll box: the 170+ rows scroll here, not the page, so the sticky
   <thead> pins against this container and the controls above stay visible. */
.ce-scroll { max-height: 72vh; overflow: auto; border: 1px solid var(--ce-border); border-radius: 10px; }
.ce-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.ce-table th, .ce-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--ce-border); }
.ce-table .ce-col-clock { min-width: 15rem; font-weight: 600; }
.ce-table .ce-col-approval, .ce-table .ce-col-num, .ce-table .ce-col-short { width: 1%; }
.ce-table .ce-col-long { min-width: 11rem; }
.ce-table thead th { position: sticky; top: 0; background: var(--ce-surface); cursor: pointer; user-select: none;
  font-weight: 600; z-index: 1; }
.ce-table thead th.sort-asc::after { content: " ▲"; color: var(--ce-primary); }
.ce-table thead th.sort-desc::after { content: " ▼"; color: var(--ce-primary); }
.ce-num { text-align: right; font-variant-numeric: tabular-nums; }
.ce-row { cursor: pointer; }
.ce-row:hover { background: var(--ce-surface); }
.ce-approval { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px;
  font-size: 0.72rem; font-weight: 600; }
.ce-approval.is-approved { color: #166534; background: #dcfce7; }
.ce-approval.is-pending { color: var(--ce-muted); background: var(--ce-surface); border: 1px solid var(--ce-border); }
html[data-theme="dark"] .ce-approval.is-approved { color: #bbf7d0; background: #14532d; }
.ce-expander-col { width: 26px; }
.ce-caret { display: inline-block; transition: transform 0.15s ease; color: var(--ce-muted); }
.ce-caret.open { transform: rotate(90deg); color: var(--ce-primary); }

.ce-detail-row td { background: var(--ce-surface); }
.ce-detail { padding: 6px 4px 10px; white-space: normal; }
.ce-notes { margin: 0 0 10px; max-width: 70ch; }
.ce-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; margin: 0; }
.ce-detail-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ce-muted); }
.ce-detail-grid dd { margin: 0 0 6px; }
.ce-links { margin-top: 10px; display: flex; gap: 14px; }
.ce-link { color: var(--ce-primary); font-weight: 600; text-decoration: none; }
.ce-link:hover { text-decoration: underline; }

.ce-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ce-card { border: 1px solid var(--ce-border); border-radius: 12px; padding: 14px; background: var(--pst-color-background, #fff);
  transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.ce-card:hover { box-shadow: 0 4px 18px rgba(11, 27, 43, 0.08); border-color: var(--ce-primary); }
.ce-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ce-card-title { margin: 0; font-size: 1rem; word-break: break-word; }
.ce-card-cites { color: var(--ce-muted); font-size: 0.8rem; white-space: nowrap; }
.ce-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.ce-badge { padding: 2px 8px; border-radius: 999px; background: var(--ce-surface); font-size: 0.72rem; }
.ce-card-predicts { margin: 6px 0 10px; color: var(--ce-muted); }
.ce-error { padding: 12px; border: 1px solid var(--ce-border); border-radius: 8px; }

@media (max-width: 820px) {
  .ce-count { margin-left: 0; }
  .ce-filter-pop { width: 220px; }
}

/* Hide the static no-JS/SEO fallback (intro note + csv-table) once the Explorer
   app has actually mounted. Keyed on the injected .ce-root so the fallback stays
   visible when JS is off and when the data fetch fails (the error message points
   users to "the table below"). Uses ~ * to also catch the theme's
   .pst-scrollable-table-container wrapper around the .ce-fallback table. */
#clock-explorer:has(.ce-root) ~ * { display: none; }

/* Full-width Catalogue. buildAll() adds .ce-fullwidth to <body> when the app
   mounts, so this is scoped to the Catalogue page only (no-JS fallback keeps the
   normal width). The secondary-sidebar hide is belt-and-suspenders alongside the
   page's :html_theme.sidebar_secondary.remove metadata. */
.ce-fullwidth .bd-sidebar-secondary { display: none; }
.ce-fullwidth .bd-main .bd-content { max-width: 100%; }
.ce-fullwidth .bd-article-container { max-width: 100%; }
.ce-fullwidth .bd-article { max-width: 100%; }