/* Section pages (models, papers, files, jobs): the heading across the top, then a filter column on the left
   and the search field, count, sort and the list on the right (sections.js). Rows are styled in site-theme.css. */

body:not(:has(.admin)) {
  .sf-side [hidden], .sf-bar [hidden], .sf-empty[hidden] { display: none !important; }
  .sf-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* heading across the top, then two columns: filters | search, list */
  .section-page:has(> .sf-side) {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; align-items: start;
  }
  .section-page:has(> .sf-side) > * { grid-column: 1 / -1; min-width: 0; }
  .section-page:has(> .sf-side) > .page-hero  { grid-row: 1; }
  .section-page > .sf-side { grid-column: 1; grid-row: 2 / span 4; }
  .section-page:has(> .sf-side) > .sf-bar     { grid-column: 2; grid-row: 2; }
  .section-page:has(> .sf-side) > .post-list  { grid-column: 2; grid-row: 3; }
  .section-page:has(> .sf-side) > .sf-pager   { grid-column: 2; grid-row: 4; }
  .section-page:has(> .sf-side) > .sf-empty   { grid-column: 2; grid-row: 5; }

  .section-page > .page-hero { padding: 40px 0 28px; }
  .section-page > .page-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); }

  /* ---- filter column ---- */
  .sf-side { padding: 0 0 16px; }
  .sf-side-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 11px 0 10px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong);
  }
  .sf-side-head h2 {
    margin: 0; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  }
  .sf-link {
    font: inherit; font-size: .84rem; color: var(--ink-muted); background: none; border: 0; padding: 2px 0; cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  }
  .sf-link:hover { color: var(--ink); text-decoration-color: var(--solar); }

  .sf-group { border: 0; margin: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--line); min-width: 0; }
  .sf-group legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; color: var(--ink-muted); }
  .sf-opts { clear: both; list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .sf-check {
    display: flex; align-items: center; gap: 9px; padding: 4px 6px; margin: 0 -6px; border-radius: 2px;
    font-size: .93rem; color: var(--body); cursor: pointer;
  }
  .sf-check:hover { background: var(--wash); }
  .sf-check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--navy); cursor: pointer; }
  .sf-opt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-n { flex: none; font-size: .8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .sf-check:has(input:checked) { color: var(--ink); font-weight: 600; }
  .sf-zero .sf-check { opacity: .45; cursor: default; }
  .sf-zero .sf-check:hover { background: none; }
  .sf-more { margin-top: 6px; }

  /* ---- search, count and sort above the list ---- */
  .sf-bar { display: grid; gap: 0; }
  .sf-search { position: relative; display: block; margin-bottom: 18px; }
  .sf-search::before {
    content: ""; position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
    background-color: var(--ink-muted); pointer-events: none; z-index: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .sf-search input {
    width: 100%; height: 46px; font: inherit; font-size: 1rem; color: var(--ink);
    padding: 0 14px 0 42px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--card);
  }
  .sf-search input::placeholder { color: #8A8F9C; }
  .sf-search input:hover { border-color: var(--ink-muted); }
  .sf-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(242, 160, 7, .3); }

  .sf-meta {
    display: flex; align-items: center; gap: 12px; padding: 9px 0;
    border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong);
  }
  .sf-toggle { display: none; }
  .sf-count { margin: 0; color: var(--ink); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sf-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-muted); }
  .sf-sort select {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink);
    padding: 4px 22px 4px 8px; border: 1px solid var(--line); border-radius: 3px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7386' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 6px center / 10px no-repeat;
  }
  .sf-sort select:hover { border-color: var(--line-strong); }
  .sf-sort select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(242, 160, 7, .3); }

  .section-page .post-card { grid-template-columns: 96px minmax(0, 1fr) 160px; column-gap: 22px; }
  .post-card.sf-out, .post-card.sf-page-out { display: none !important; }
  .sf-pager[hidden] { display: none; }
  /* one line of excerpt here, so ten posts stay short */
  .section-page .post-card > .fx-abs, .section-page .post-card:not(.fx) > .post-body { -webkit-line-clamp: 1; line-clamp: 1; }
  .sf-empty { padding: 40px 0; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
  .sf-empty p { margin: 0 0 12px; font-family: var(--serif); font-size: 1.05rem; }
  .section-page > p.muted, .section-page > p.err { padding: 40px 0; margin: 0; border-top: 2px solid var(--ink); }
  .section-page > p.muted:first-child { border-top: 0; padding-bottom: 20px; font-family: var(--serif); font-size: 1.15rem; }
}

/* wide screens: the filter column stays in view while the list scrolls */
@media (min-width: 821px) {
  body:not(:has(.admin)) .section-page > .sf-side {
    position: sticky; top: 16px; align-self: start;
    max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* phones and small tablets: one column; the filters open from a "Filters" button */
@media (max-width: 820px) {
  body:not(:has(.admin)) {
    .section-page:has(> .sf-side) { display: block; }
    .section-page > .page-hero { padding: 28px 0 20px; }
    .sf-toggle { display: inline-flex; }
    .sf-side { display: none; margin: 0; padding: 0 0 8px; border-bottom: 1px solid var(--line-strong); }
    .sf-side.sf-open { display: block; }
    .sf-side-head { border-top: 0; }
    .sf-group:last-child { border-bottom: 0; }
  }
}

/* post pages: "Print / PDF" (post-print.js) */
@media print { .detail-head .pp-btn { display: none; } }
@media (max-width: 720px) {
  body:not(:has(.admin)) .section-page .post-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
}