/* ==========================================================================
   jg-sra.css - Shul Records America
   Section stylesheet. Loads AFTER jg-global.css, which supplies the design
   tokens, .jg-search-card, .page-title-band, .rd-sidebar-card and the tag
   components. Nothing in here redeclares a token or invents a color.

   CHW / JG40. Plain ASCII only in comments - see the Unicode hazard note.
   ========================================================================== */

/* -- Metadata tags, following the site color system:
      sage = record type, navy = geography,
      cream w/ navy border = topic, charcoal = years -- */
.sra-tag {
    display: inline-block;
    font-size: 0.6875rem; font-weight: bold;
    letter-spacing: 0.6px; padding: 3px 9px;
    border-radius: 3px; white-space: nowrap;
    margin: 0 4px 4px 0; border: 1px solid transparent;
    text-decoration: none;
}
.sra-tag--type  { background-color: var(--sage);  color: #ffffff; text-transform: uppercase; }
.sra-tag--geo   { background-color: #09497a;      color: #ffffff; }
.sra-tag--topic { background-color: var(--cream); color: #09497a; border-color: #09497a; }
.sra-tag--years { background-color: var(--charcoal); color: #ffffff; font-variant-numeric: tabular-nums; }
body.dark-mode .sra-tag--type  { background-color: #a8b361; color: #121212; }
body.dark-mode .sra-tag--geo   { background-color: #0d2a45; color: #ffffff; border-color: #5a7a95; }
body.dark-mode .sra-tag--topic { background-color: #2a2620; color: #a9c0d0; border-color: #5a7a95; }
body.dark-mode .sra-tag--years { background-color: #2a2a2a; color: #e0e0e0; }
a.sra-tag:hover, a.sra-tag:focus-visible { filter: brightness(1.15); outline-offset: 2px; }

/* -- Results toolbar (count, sort, per-page, export) -- */
.sra-toolbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 0 14px; border-bottom: 2px solid var(--sage); margin-bottom: 0;
}
.sra-toolbar__count { font-size: 0.9375rem; color: var(--charcoal); margin-right: auto; }
.sra-toolbar__count strong { color: var(--navy); font-size: 1.0625rem; }
body.dark-mode .sra-toolbar__count strong { color: #a8b361; }
.sra-toolbar label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--charcoal); opacity: 0.8; }
.sra-toolbar select {
    padding: 6px 9px; border: 1px solid #c4d0d6; border-radius: 4px;
    background: var(--ecru); color: var(--charcoal);
    font: inherit; font-size: 13px;
}
body.dark-mode .sra-toolbar select { background: #2a2a2a; border-color: #444; color: #e0e0e0; }

/* -- Active filter chips -- */
.sra-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0 4px; }
.sra-chips__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--charcoal); opacity: 0.7; }
.sra-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cream); color: #09497a;
    border: 1px solid #09497a; border-radius: 20px;
    padding: 5px 8px 5px 13px; font-size: 12.5px; font-weight: 600;
}
body.dark-mode .sra-chip { background: #2a2620; color: #a9c0d0; border-color: #5a7a95; }
.sra-chip button {
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 15px; line-height: 1;
    padding: 2px 5px; border-radius: 50%; font-family: inherit;
}
.sra-chip button:hover { background: rgba(9,73,122,0.12); }
.sra-chip button:focus-visible { outline: 2px solid var(--sage); }
.sra-chips__clear {
    background: none; border: none; cursor: pointer;
    color: var(--navy); font: 600 12px/1 inherit;
    text-decoration: underline; padding: 6px;
}
body.dark-mode .sra-chips__clear { color: #a8b361; }

/* -- Results table -- */
.sra-table-wrap { background: var(--white); border-radius: 8px; box-shadow: 0 2px 14px rgba(0,0,0,0.06); overflow: hidden; }
body.dark-mode .sra-table-wrap { background: #1e1e1e; box-shadow: 0 2px 14px rgba(0,0,0,0.4); }
.sra-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.sra-table col.c-x { width: 44px; }
.sra-table col.c-name { width: 28%; }
.sra-table col.c-type { width: 27%; }
.sra-table col.c-yr { width: 12%; }
.sra-table col.c-repo { width: 21%; }
.sra-table col.c-dig { width: 12%; }
.sra-table td { overflow-wrap: break-word; }
.sra-table th { overflow-wrap: normal; }
.sra-table thead th {
    background-color: #09497a; color: #ffffff;
    text-align: left; padding: 12px 14px;
    font-size: 11px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1px;
    position: sticky; top: 0; z-index: 3;
    border-bottom: 3px solid var(--sage);
}
body.dark-mode .sra-table thead th { background-color: #0d2a45; }
.sra-table thead th button {
    background: none; border: none; color: inherit; font: inherit;
    cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px;
}
.sra-table thead th button:focus-visible { outline: 2px solid var(--light-green); outline-offset: 3px; }
.sra-table tbody td { padding: 12px 14px; border-bottom: 1px solid #d1caba; vertical-align: top; color: var(--charcoal); line-height: 1.5; }
body.dark-mode .sra-table tbody td { border-bottom-color: #333; }
.sra-table tbody tr:nth-child(4n+1) { background-color: var(--ecru); }
body.dark-mode .sra-table tbody tr:nth-child(4n+1) { background-color: #1a1a1a; }
.sra-table tbody tr.sra-row:hover { background-color: var(--cream); }
body.dark-mode .sra-table tbody tr.sra-row:hover { background-color: #2a2a2a; }

.sra-table .sra-name { font-weight: 700; color: var(--navy); font-size: 14.5px; }
body.dark-mode .sra-table .sra-name { color: #e0e0e0; }
.sra-table .sra-place { display: block; font-size: 12.5px; opacity: 0.8; margin-top: 3px; }
.sra-table .sra-repo { font-size: 12.5px; }

.sra-dig-none { color: var(--charcoal); opacity: 0.45; font-size: 14px; }
body.dark-mode .sra-dig-none { color: #a0a0a0; }

/* -- Expand control column -- */
.sra-expand-cell { width: 44px; padding: 8px 0 8px 12px !important; }
.sra-expand {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--sage); background: transparent;
    color: var(--sage); cursor: pointer;
    font: bold 15px/1 monospace;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.sra-expand:hover { background-color: var(--sage); color: #ffffff; }
.sra-expand:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
body.dark-mode .sra-expand:hover { color: #121212; }

/* -- Expanded detail drawer -- */
.sra-detail-row > td {
    background-color: var(--ecru);
    box-shadow: inset 4px 0 0 var(--sage);
    border-bottom: 2px solid var(--sage) !important;
    padding: 0 !important;
}
body.dark-mode .sra-detail-row > td { background-color: #1a1a1a; box-shadow: inset 4px 0 0 #a8b361; }
.sra-detail { padding: 20px 24px 22px 58px; }
.sra-detail__grid {
    display: grid; grid-template-columns: 170px 1fr;
    gap: 9px 20px; font-size: 13.5px; margin-bottom: 16px;
}
.sra-detail__grid dt { font-weight: 700; color: var(--navy); }
body.dark-mode .sra-detail__grid dt { color: #a8b361; }
.sra-detail__grid dd { margin: 0; color: var(--charcoal); line-height: 1.55; }
.sra-detail__grid dd a { color: var(--navy); font-weight: 600; text-decoration: underline; }
body.dark-mode .sra-detail__grid dd a { color: #a8b361; }
.sra-detail__empty { font-style: italic; opacity: 0.7; }
.sra-detail__actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: 14px; border-top: 1px solid rgba(9,73,122,0.15);
}
body.dark-mode .sra-detail__actions { border-top-color: #333; }

/* Real record-type values are long ("CORRESPONDENCE") and a row can carry six
   of them, so type tags wrap inside their cell. Year ranges never wrap. */
.sra-table .sra-tag { font-size: 10.5px; padding: 2px 7px; }
.sra-table .sra-tag--type { white-space: normal; overflow-wrap: anywhere; }
.sra-table .sra-tag--years { white-space: nowrap; }
.sra-table tbody tr.sra-row > td { overflow: hidden; }

/* Status flags - Digital Image and Indexed */
.sra-flag {
    display: inline-block;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.sra-flag--yes     { background-color: var(--light-green); color: var(--charcoal); }
.sra-flag--process { background-color: var(--light-blue); color: var(--charcoal); }
.sra-flag--no      { background-color: transparent; color: var(--charcoal); opacity: 0.6; padding-left: 0; }
body.dark-mode .sra-flag--yes     { background-color: #C7CC82; color: #232b2b; }
body.dark-mode .sra-flag--process { background-color: #24323d; color: #d5dde2; }
body.dark-mode .sra-flag--no      { color: #a0a0a0; }
.sra-volunteer {
    display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600;
    color: var(--navy); text-decoration: underline;
}
.sra-volunteer:hover { color: var(--sage); }
body.dark-mode .sra-volunteer { color: #a8b361; }

/* Notes sub-row - rendered only when the field is populated */
.sra-notes-row > td {
    padding: 0 14px 12px 14px !important;
    font-size: 12.5px; line-height: 1.55; color: var(--charcoal);
    border-bottom: 1px solid #d1caba;
}
body.dark-mode .sra-notes-row > td { border-bottom-color: #333; color: #c0c0c0; }
.sra-notes__label {
    display: inline-block; margin-right: 8px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--navy);
}
body.dark-mode .sra-notes__label { color: #a8b361; }

.sra-btn--sm { padding: 5px 11px; font-size: 11.5px; white-space: nowrap; }
.sra-hero-cta { margin-top: 0.85rem; }
.sra-inline-link {
    font-size: 12.5px; font-weight: bold; color: var(--navy);
    text-decoration: underline; display: inline-block;
}
.sra-inline-link:hover { color: var(--sage); }
body.dark-mode .sra-inline-link { color: #a8b361; }

/* -- Repository contact card (second level) -- */
.sra-modal {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    background: rgba(35,43,43,0.55); padding: 20px;
}
.sra-modal[hidden] { display: none; }
.sra-modal__panel {
    background: var(--ecru); border-radius: 10px;
    max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    border-top: 5px solid var(--sage);
}
body.dark-mode .sra-modal__panel { background: #1a1a1a; }
.sra-modal__head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid #d1caba;
}
body.dark-mode .sra-modal__head { border-bottom-color: #333; }
.sra-modal__head h2 { margin: 0; font-size: 1.125rem; color: var(--navy); }
body.dark-mode .sra-modal__head h2 { color: #e0e0e0; }
.sra-modal__close {
    background: none; border: none; cursor: pointer;
    font: bold 22px/1 inherit; color: var(--charcoal); padding: 2px 6px;
}
.sra-modal__close:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
body.dark-mode .sra-modal__close { color: #a0a0a0; }
.sra-modal__body { padding: 16px 24px 22px; }
.sra-modal__grid {
    display: grid; grid-template-columns: 140px 1fr;
    gap: 9px 18px; font-size: 13.5px; margin: 0 0 18px;
}
.sra-modal__grid dt { font-weight: 700; color: var(--navy); }
body.dark-mode .sra-modal__grid dt { color: #a8b361; }
.sra-modal__grid dd { margin: 0; color: var(--charcoal); line-height: 1.55; }
body.dark-mode .sra-modal__grid dd { color: #c0c0c0; }
.sra-modal__grid a { color: var(--navy); font-weight: 600; text-decoration: underline; }
body.dark-mode .sra-modal__grid a { color: #a8b361; }
.sra-modal__note {
    font-size: 12.5px; line-height: 1.55; color: var(--charcoal);
    background: var(--white); border-left: 3px solid var(--sage);
    padding: 10px 14px; border-radius: 4px;
}
body.dark-mode .sra-modal__note { background: #232323; color: #c0c0c0; }

/* Small buttons used inside detail panels and cards */
.sra-btn {
    display: inline-block; padding: 8px 16px;
    font-size: 12.5px; font-weight: bold; border-radius: 4px;
    text-decoration: none; border: 2px solid transparent; cursor: pointer;
    font-family: inherit; transition: filter 0.15s;
}
.sra-btn--primary { background-color: var(--sage); color: #ffffff; border-color: var(--sage); }
.sra-btn--primary:hover { filter: brightness(1.1); color: #ffffff; }
.sra-btn--ghost { background: transparent; color: #09497a; border-color: #09497a; }
.sra-btn--ghost:hover { background-color: #09497a; color: #ffffff; }
body.dark-mode .sra-btn--primary { background-color: #a8b361; border-color: #a8b361; color: #121212; }
body.dark-mode .sra-btn--ghost { color: #e0e0e0; border-color: #e0e0e0; }
body.dark-mode .sra-btn--ghost:hover { background-color: #e0e0e0; color: #121212; }

/* -- Browse-by-state grid -- */
.sra-state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sra-state-tile {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid #d1caba; border-radius: 6px;
    padding: 12px 14px; text-decoration: none;
    color: var(--navy); font-size: 13.5px; font-weight: 600;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sra-state-tile:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.sra-state-tile:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.sra-state-tile__n {
    background: var(--cream); color: var(--charcoal);
    font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
    font-variant-numeric: tabular-nums;
}
body.dark-mode .sra-state-tile { background: #1e1e1e; border-color: #333; color: #e0e0e0; }
body.dark-mode .sra-state-tile__n { background: #2a2a2a; color: #c0c0c0; }

/* -- Filter rail layout -- */
/* Grid and flex children default to min-width:auto, so a single wide child -
   a long repository name, a row of tags, the pager - can push its track wider
   than the container and widen the whole document. That is what left the
   footer bands sitting at ~60% of the layout width on a phone. */
.sra-rail-layout > * { min-width: 0; }
.sra-rail-layout {
    max-width: 1320px; margin: 0 auto; padding: 2.25rem 2rem 3rem;
    display: grid; grid-template-columns: 244px 1fr; gap: 2rem; align-items: start;
}
.sra-rail { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.sra-rail__group { padding: 0 18px 14px; }
.sra-rail__group h4 {
    margin: 12px 0 8px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--charcoal); opacity: 0.75;
}
.sra-rail__group select, .sra-rail__group input[type="text"] {
    width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit; font-size: 13px;
    border: 1px solid #c4d0d6; border-radius: 4px;
    background: var(--ecru); color: var(--charcoal);
}
body.dark-mode .sra-rail__group select,
body.dark-mode .sra-rail__group input[type="text"] { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.sra-rail__check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; color: var(--charcoal); }
.sra-rail__check input { accent-color: var(--sage); width: 15px; height: 15px; }

/* -- Body wrap -- */
.sra-body-wrap { background-color: var(--ecru); }
.sra-body-inner { max-width: 1180px; margin: 0 auto; padding: 2.5rem 2rem 3.5rem; }

/* -- Pagination. div role="navigation", not <nav>. -- */
.sra-pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 22px 0 4px; flex-wrap: wrap; }
.sra-pager a, .sra-pager span {
    padding: 7px 13px; border-radius: 4px; font-size: 13px; font-weight: 600;
    color: var(--navy); text-decoration: none; border: 1px solid transparent;
}
.sra-pager a:hover { background: var(--cream); }
.sra-pager .current { background-color: #09497a; color: #ffffff; }
body.dark-mode .sra-pager .current { background-color: #0d2a45; }
body.dark-mode .sra-pager a { color: #e0e0e0; }

@media (max-width: 900px) {
    .jg-grid-3 { grid-template-columns: 1fr; }
    /* Grid and flex children default to min-width:auto, so a single wide child -
   a long repository name, a row of tags, the pager - can push its track wider
   than the container and widen the whole document. That is what left the
   footer bands sitting at ~60% of the layout width on a phone. */
.sra-rail-layout > * { min-width: 0; }
.sra-rail-layout { grid-template-columns: 1fr; }
    .sra-rail { position: static; }
    .jg-tips-panel__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .jg-search-card .search-row { flex-direction: column; align-items: stretch; }
    .jg-search-card .sf.n, .jg-search-card .sf.w { flex: unset; width: 100%; min-width: unset; }
    /* Stacked cards. Each cell carries its own label because the header row
       is hidden and columns cannot be read positionally.

       The whole table has to be blockified, not just the rows and cells.
       Leaving <table>, <tbody> and <colgroup> as table elements while the
       rows are display:block makes the browser lay the blocks out INSIDE the
       first table column, which is 44px wide - that is what squeezed every
       row into a single character-per-line strip. */
    /* auto, not visible: if anything in here is still too wide it scrolls
       inside its own box rather than making the whole page scroll sideways. */
    .sra-table-wrap { overflow-x: auto; max-width: 100%; }
    .sra-table { display: block; width: 100%; max-width: 100%; min-width: 0; table-layout: auto; }
    .sra-table colgroup { display: none; }
    .sra-table tbody { display: block; width: 100%; }
    .sra-table thead { display: none; }
    .sra-table tbody tr.sra-row {
        display: block; width: 100%; padding: 14px 0 12px;
        border-bottom: 1px solid #d1caba;
    }
    .sra-table tbody tr.sra-detail-row { display: block; width: 100%; }
    .sra-table tbody tr.sra-detail-row > td { display: block; width: 100%; }
    body.dark-mode .sra-table tbody tr.sra-row { border-bottom-color: #333; }
    .sra-table tbody tr.sra-row--has-notes { border-bottom: none; }
    .sra-table tbody td { display: block; width: auto; max-width: 100%; border-bottom: none; padding: 3px 14px; }
    /* Long unbroken repository and collection names must wrap rather than
       stretch the card. */
    .sra-table .sra-repo, .sra-table .sra-name,
    .sra-table .sra-alt, .sra-table .sra-place { overflow-wrap: anywhere; }
    /* The expand control keeps its fixed width in the desktop table; here the
       cell must be free to sit on its own line. */
    .sra-table td.sra-expand-cell { width: auto; padding: 0 14px 6px !important; }
    .sra-table td.sra-expand-cell button.sra-expand { margin: 0; }
    .sra-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
        text-transform: uppercase; color: var(--navy);
        margin-bottom: 2px;
    }
    body.dark-mode .sra-table tbody td[data-label]::before { color: #a8b361; }
    /* The name cell leads the card, so it needs no label. */
    .sra-table tbody td.sra-cell-name::before { content: none; }
    .sra-detail { padding: 16px; }
    .sra-detail__grid { grid-template-columns: 1fr; gap: 2px 0; }
    .sra-detail__grid dd { margin-bottom: 10px; }

    /* The toolbar was pushing SHOW off the right edge and dropping its select
       onto a line of its own. Count on its own row, controls beneath it. */
    .sra-toolbar { flex-wrap: wrap; row-gap: 8px; }
    .sra-toolbar__count { flex: 0 0 100%; }
    /* The rail and its cards are flex/grid children too. */
    .sra-rail, .sra-rail > *, .sra-rail__group { min-width: 0; max-width: 100%; }
    .sra-pager { flex-wrap: wrap; }
}

/* -- SRA logo lockup.
      The mark is an image, so it introduces no new colours into the
      stylesheet. In dark mode it sits on a cream plate, because the navy
      wordmark would otherwise disappear against the dark background.
      A proper dark variant of the artwork would remove the need for the
      plate - worth asking whether one exists. -- */
.sra-logo-plate {
    display: inline-block; padding: 0; border-radius: 10px;
    transition: background-color 0.3s ease, padding 0.3s ease;
}
body.dark-mode .sra-logo-plate { background-color: #e8e1d1; padding: 20px 30px; }
.sra-wordmark { margin: 0 0 14px; line-height: 0; }
.sra-logo { display: block; width: 100%; max-width: 430px; height: auto; margin: 0 auto; }
.sra-mark { height: 38px; width: auto; vertical-align: middle; margin-right: 10px; }
@media (max-width: 640px) {
    .sra-logo { max-width: 280px; }
    body.dark-mode .sra-logo-plate { padding: 14px 18px; }
}

/* -- Browse by state: region groupings -- */
.sra-region-head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin: 2.25rem 0 0.875rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.375rem; font-weight: normal; color: var(--navy);
    border-bottom: 2px solid var(--sage); padding-bottom: 8px;
}
.sra-region-head:first-of-type { margin-top: 0; }
.sra-region-head__n {
    margin-left: auto; font-family: Arial, sans-serif;
    font-size: 0.75rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 1px; color: var(--charcoal); opacity: 0.65;
}
body.dark-mode .sra-region-head { color: #e0e0e0; }

/* -- Browse A-Z -- */
.sra-az-letter {
    display: flex; align-items: baseline; gap: 12px;
    margin: 2.25rem 0 0.75rem; scroll-margin-top: 130px;
    font-size: 1.375rem; font-weight: bold; color: var(--sage);
    border-bottom: 2px solid var(--sage); padding-bottom: 8px;
}
.sra-az-letter:first-of-type { margin-top: 1.25rem; }
.sra-az-letter__n {
    font-size: 0.6875rem; font-weight: bold; letter-spacing: 1px;
    color: var(--charcoal); opacity: 0.6; text-transform: uppercase;
}
.sra-az-list {
    columns: 2; column-gap: 44px;
    list-style: none; padding: 0; margin: 0;
    font-size: 13.5px; line-height: 2.05;
}
.sra-az-list li { break-inside: avoid; }
.sra-az-list a { color: var(--navy); text-decoration: none; }
.sra-az-list a:hover, .sra-az-list a:focus-visible {
    color: var(--sage); text-decoration: underline; text-underline-offset: 3px;
}
body.dark-mode .sra-az-list a { color: #e0e0e0; }
body.dark-mode .sra-az-list a:hover { color: #a8b361; }
@media (max-width: 700px) { .sra-az-list { columns: 1; } }

/* The jump bar is sticky against the top of the viewport. */
.jump-bar { position: sticky; top: 0; z-index: 10; }
@media (max-width: 760px) { .jump-bar { position: static; } }

/* -- Browse by repository -- */
.sra-repo-list { display: flex; flex-direction: column; gap: 10px; }
.sra-repo-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--white); border-radius: 6px;
    border-left: 3px solid var(--sage);
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    padding: 14px 18px; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sra-repo-row:hover { transform: translateX(3px); box-shadow: 0 3px 12px rgba(0,0,0,0.09); }
.sra-repo-row:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
body.dark-mode .sra-repo-row { background: #1e1e1e; box-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.sra-repo-row__name { font-weight: 700; color: var(--navy); font-size: 14px; }
body.dark-mode .sra-repo-row__name { color: #e0e0e0; }
.sra-repo-row__place { display: block; font-size: 12.5px; opacity: 0.8; margin-top: 2px; color: var(--charcoal); }
.sra-repo-row__n {
    margin-left: auto; flex-shrink: 0;
    background: var(--cream); color: var(--charcoal);
    font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.dark-mode .sra-repo-row__n { background: #2a2a2a; color: #c0c0c0; }

/* -- v2 additions -- */
.sra-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* "or search by field" divider */
.sra-or-rule {
    display: flex; align-items: center; gap: 14px;
    margin: 16px 0 14px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--charcoal); opacity: 0.6;
}
.sra-or-rule::before, .sra-or-rule::after {
    content: ""; flex: 1; height: 1px; background: #c4d0d6;
}
body.dark-mode .sra-or-rule::before, body.dark-mode .sra-or-rule::after { background: #444; }

/* phonetic-search checkbox under the name field */
.sra-inline-check {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 7px; font-size: 12px; color: var(--charcoal); cursor: pointer;
}
.sra-inline-check input { accent-color: var(--sage); width: 15px; height: 15px; }
.sra-inline-check__note { opacity: 0.6; font-style: italic; }

/* former / alternate names shown under the collection name */
.sra-alt {
    display: block; font-size: 12px; font-style: italic;
    color: var(--charcoal); opacity: 0.8; margin-top: 2px;
}

/* provisional-data marker */
.sra-rail__prov {
    display: inline-block; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    background: var(--cream); color: var(--charcoal);
    border: 1px solid #d1caba; border-radius: 3px;
    padding: 2px 5px; margin-left: 6px; vertical-align: middle;
}
body.dark-mode .sra-rail__prov { background: #2a2a2a; border-color: #444; color: #c0c0c0; }

.sra-admin-note {
    margin-top: 22px; padding: 11px 16px;
    background: var(--light-blue); border-left: 3px solid var(--sage);
    border-radius: 4px; font-size: 12.5px; font-style: italic;
    color: var(--charcoal); opacity: 0.9;
}
body.dark-mode .sra-admin-note { background: #2a2a2a; color: #c8c0b0; }


/* --------------------------------------------------------------------------
   Live page additions - elements that exist in sraindex.php but had no
   equivalent in the wireframe.
   -------------------------------------------------------------------------- */

/* Stat line and Submit a Collection link under the title band */
/* .sra-hero-stats retired - replaced by the .sra-stats bar below. */

/* The record type facet is built from the data, so its length is unknown.
   Cap it and scroll rather than letting the rail run off the page. */
.sra-rail__scroll {
    max-height: 300px; overflow-y: auto;
    padding-right: 4px; margin-bottom: 4px;
}
.sra-rail__note {
    margin: 8px 0 12px; font-size: 12.5px;
    line-height: 1.55; color: var(--charcoal);
}
body.dark-mode .sra-rail__note { color: #c0c0c0; }

/* Empty state */
.sra-empty {
    padding: 40px 24px; text-align: center;
    font-size: 14px; line-height: 1.6; color: var(--charcoal);
    background: var(--ecru); border-radius: 8px;
    border-left: 4px solid var(--sage);
}
body.dark-mode .sra-empty { background: #1a1a1a; color: #c0c0c0; }

/* Disabled pager arrows */
.sra-pager span.disabled { opacity: 0.4; }

/* Screen-reader-only label on the actions column header */
.sra-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The two outbound links carried over from sra_intro.txt */
.sra-hero-links { margin-top: 0.6rem; font-size: 12.5px; }
.sra-hero-links a { color: var(--navy); text-decoration: underline; font-weight: 600; }
.sra-hero-links a:hover { color: var(--sage); }
body.dark-mode .sra-hero-links a { color: #a8b361; }
.sra-hero-links__sep { opacity: 0.4; margin: 0 6px; }

/* --------------------------------------------------------------------------
   SRA logo lockup in the title band.
   The artwork is a JPEG with a baked-in white background, so it sits on a
   white plate rather than directly on the navy. The plate stays white in
   dark mode - the wordmark is navy and would vanish otherwise.
   -------------------------------------------------------------------------- */
.sra-logo-lockup { margin: 0 0 14px; }
.sra-logo-lockup img {
    display: block;
    width: 100%;
    max-width: 430px;
    height: auto;
    margin: 0 auto;
    background: #ffffff;
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.28);
}
@media (max-width: 640px) {
    .sra-logo-lockup img { max-width: 280px; padding: 10px 14px; }
}

/* --------------------------------------------------------------------------
   ADMIN - row controls and the record editor
   -------------------------------------------------------------------------- */
.sra-admin-actions { display: flex; gap: 10px; margin-top: 7px; justify-content: center; }
.sra-admin-actions button {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--navy); text-decoration: underline;
}
.sra-admin-actions button:hover { color: var(--sage); }
.sra-admin-actions button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body.dark-mode .sra-admin-actions button { color: #a8b361; }

.sra-btn--danger { background: transparent; color: #981908; border-color: #981908; }
.sra-btn--danger:hover { background-color: #981908; color: #ffffff; }
body.dark-mode .sra-btn--danger { color: #e08a7e; border-color: #e08a7e; }
body.dark-mode .sra-btn--danger:hover { background-color: #e08a7e; color: #121212; }

.sra-modal__panel--wide { max-width: 720px; }

.sra-form__row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.sra-form__row label {
    flex: 0 0 180px; padding-top: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--charcoal);
}
body.dark-mode .sra-form__row label { color: #c0c0c0; }
.sra-form__control { flex: 1; min-width: 0; }
.sra-form input[type="text"],
.sra-form textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid #c4d0d6; border-radius: 4px;
    font-family: inherit; font-size: 13.5px; color: var(--charcoal);
    background: var(--white); resize: vertical;
}
.sra-form input[type="text"]:focus,
.sra-form textarea:focus {
    border-color: var(--navy); outline: none;
    box-shadow: 0 0 0 2px rgba(9,73,122,0.12);
}
body.dark-mode .sra-form input[type="text"],
body.dark-mode .sra-form textarea { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.sra-form__hint {
    display: block; margin-top: 4px;
    font-size: 11.5px; line-height: 1.45; color: var(--charcoal); opacity: 0.75;
}
body.dark-mode .sra-form__hint { color: #a0a0a0; }
.sra-form__actions {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    padding-top: 14px; margin-top: 6px;
    border-top: 1px solid #d1caba;
}
body.dark-mode .sra-form__actions { border-top-color: #333; }
.sra-form__actions .sra-btn--danger { margin-left: auto; }
.sra-form__error {
    margin: 10px 0 0; padding: 10px 14px; border-radius: 4px;
    font-size: 12.5px; line-height: 1.5;
    background: var(--cream); border-left: 3px solid #981908; color: var(--charcoal);
}
body.dark-mode .sra-form__error { background: #2a2a2a; color: #e0e0e0; }

@media (max-width: 640px) {
    .sra-form__row { flex-direction: column; gap: 4px; }
    .sra-form__row label { flex: none; padding-top: 0; }
    .sra-form__actions .sra-btn--danger { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Multi-page additions - elements introduced when the single page was split
   into index / results / browse-state / browse-az / browse-repository.
   -------------------------------------------------------------------------- */


/* Landing-page search buttons */
.sra-search-actions {
    display: flex; gap: 12px; justify-content: center; align-items: center;
    margin-top: 22px; flex-wrap: wrap;
}
.sra-search-actions .btn-search { margin: 0; width: auto; min-width: 240px; }

/* A-Z: the parenthesised alternate names shown beside a collection */
.sra-az-alt { font-style: italic; opacity: 0.8; }

/* Browse by repository */
.sra-repo-intro {
    font-size: 0.9375rem; line-height: 1.7; max-width: 760px;
    margin-bottom: 1.75rem; color: var(--charcoal);
}
.sra-repo-intro strong { color: var(--navy); }
body.dark-mode .sra-repo-intro strong { color: #a8b361; }

/* --------------------------------------------------------------------------
   Search-row alignment override.
   jg-global.css sets align-items: flex-end on .jg-search-card .search-row.
   The name field carries the Daitch-Mokotoff checkbox below its input, so
   bottom-aligning the row drops "City or Town" level with that checkbox
   instead of level with the name input. Scoped to SRA rather than changed in
   jg-global, which other search pages depend on.
   -------------------------------------------------------------------------- */
.jg-search-card .search-row { align-items: flex-start; }

/* --------------------------------------------------------------------------
   Footer seam.
   jg-global.css gives .volunteer-strip margin-bottom: 1.5rem. On pages where
   something follows it that gap is invisible; here the site footer comes next,
   so the page background showed through as a white band between the two.
   -------------------------------------------------------------------------- */
.volunteer-strip { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Expand control, hardened.
   Something loaded after this stylesheet - most likely a style block inside
   the injected header - was resetting bare <button>, so the expand control
   rendered as a default grey square. These selectors are deliberately more
   specific than a class on its own so the circle survives.
   -------------------------------------------------------------------------- */
.sra-table td.sra-expand-cell button.sra-expand {
    width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
    border: 2px solid var(--sage);
    background: transparent; background-color: transparent;
    color: var(--sage);
    padding: 0; margin: 0;
    font: bold 15px/1 monospace;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none;
}
.sra-table td.sra-expand-cell button.sra-expand:hover {
    background-color: var(--sage); color: #ffffff;
}
body.dark-mode .sra-table td.sra-expand-cell button.sra-expand:hover { color: #121212; }

/* Same defence for the buttons inside the drawer and the admin bar. */
.sra-detail__actions .sra-btn,
.sra-admin-note .sra-btn,
.sra-modal .sra-btn {
    margin: 0;
    font: inherit; font-size: 12.5px; font-weight: bold;
    line-height: normal;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   The back link now uses the site pattern: .jg-back-link-light inside
   .page-title-band__inner, as on the Yizkor Book Fund page. jg-global styles
   it; only the arrow needs anything here.
   -------------------------------------------------------------------------- */
.jg-back-link-light .arrow { margin-right: 4px; }

/* --------------------------------------------------------------------------
   SUB-NAV: stats bar + section navigation
   Two bands, the JOWBR_SubNav shape at a smaller scale. Cream band with the
   figures, then a white strip of section links with an underline on the
   current page. SRA's figures are in the thousands rather than the millions
   and there are three rather than four, so the type is 1.25rem not 1.75rem.

   Class names are SRA's own: the JOWBR rules live inside that section's
   sub-nav component and are not loaded here, so sharing names would imply a
   shared component that does not exist.
   -------------------------------------------------------------------------- */
.sra-stats {
    background-color: var(--cream);
    border-bottom: 1px solid #d1caba;
    padding: 12px 50px 10px;
}
body.dark-mode .sra-stats { background-color: #1a1a1a; border-bottom-color: #333; }
.sra-stats__figures { display: flex; justify-content: center; flex-wrap: wrap; }
.sra-stat {
    text-align: center;
    padding: 4px 32px;
    border-right: 1px solid #c5bca8;
}
.sra-stat:last-child { border-right: none; }
body.dark-mode .sra-stat { border-right-color: #333; }
.sra-stat__num {
    display: block;
    font-size: 1.25rem; font-weight: bold;
    color: #09497a;          /* hardcoded - var(--navy) flips to light grey */
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
body.dark-mode .sra-stat__num { color: #a8b361; }
.sra-stat__label {
    display: block;
    font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--charcoal); margin-top: 2px;
}
.sra-stats__updated {
    margin: 6px 0 0; text-align: center;
    font-size: 11px; font-style: italic;
    color: var(--charcoal); opacity: 0.7;
}

/* Section nav. div[role=navigation], not <nav> - the global nav {} selector
   would paint it navy. */
.sra-subnav {
    background-color: var(--white);
    border-bottom: 2px solid var(--cream);
    padding: 0 50px;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.dark-mode .sra-subnav { background-color: #121212; border-bottom-color: #333; }
.sra-subnav a {
    display: inline-block;
    padding: 11px 16px;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--charcoal);
    border-bottom: 3px solid transparent;
    white-space: nowrap; text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.sra-subnav a:hover { color: var(--navy); border-bottom-color: var(--sage); }
.sra-subnav a.active { color: var(--navy); border-bottom-color: var(--navy); }
body.dark-mode .sra-subnav a { color: #a0a0a0; }
body.dark-mode .sra-subnav a:hover,
body.dark-mode .sra-subnav a.active { color: #e0e0e0; border-bottom-color: #a8b361; }

@media (max-width: 900px) {
    .sra-stats { padding: 12px 20px 10px; }
    .sra-stat { padding: 4px 18px; }
    .sra-subnav { padding: 0 20px; justify-content: flex-start; }
}
@media (max-width: 520px) {
    .sra-stat { border-right: none; padding: 6px 12px; }
    .sra-stat__num { font-size: 1.125rem; }
}
}