@charset "utf-8";
/* =====================================================================
   PSA REDESIGN — Pakistan Science Abstracts
   Ported from "PSA Redesign.dc.html" (Claude Design), 2026-08-15.

   Loaded LAST in NSSEMaster.master so it wins over bootstrap.min.css,
   style.css, psa-menu.css and psa-themes.css. The four-theme switcher
   still works: this file defines the palette as custom properties and
   theme 1 IS the redesign. Themes 2-4 only re-point a handful of hue
   variables further down — no structural rules are duplicated.

   Type scale and colour values are taken verbatim from the mockup.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root,
[data-psa-theme="1"] {
    --psa-green:        #0B5D3B;   /* primary */
    --psa-green-dark:   #073F2D;   /* topbar, footer, hero wash */
    --psa-green-pale:   #E6EFE8;   /* tint fills */
    --psa-green-tint:   #EFF4F0;   /* panel headers */
    --psa-green-soft:   #F1F6F2;   /* ghost button hover */

    --psa-gold:         #C5A028;   /* accent rules, focus ring */
    --psa-gold-light:   #E4D08A;   /* on dark backgrounds */

    --psa-ink:          #202B2F;   /* body text */
    --psa-ink-2:        #3C4A44;   /* secondary text */
    --psa-ink-3:        #4A554F;
    --psa-muted:        #66736D;   /* labels, meta */
    --psa-muted-2:      #5F6C66;
    --psa-muted-3:      #5A665F;

    --psa-canvas:       #DEDCD4;   /* outside the app shell */
    --psa-surface:      #F7F5EF;   /* page background */
    --psa-paper:        #ffffff;   /* cards */
    --psa-row-hover:    #FBFAF6;
    --psa-head-bg:      #F2F5F2;

    --psa-line:         #DDE6DF;   /* card borders */
    --psa-line-soft:    #E6EFE8;
    --psa-line-warm:    #EFEDE6;   /* row separators */
    --psa-line-warm-2:  #F1EFE8;
    --psa-field:        #A9B8B0;   /* input borders */
    --psa-field-2:      #BCCCC3;   /* secondary button borders */

    --psa-on-dark:      #C9DCD2;
    --psa-on-dark-2:    #D3E3DA;
    --psa-on-dark-3:    #DCE8E1;
    --psa-on-dark-mute: #9FB8AC;

    --psa-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --psa-sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --psa-mono:  ui-monospace, Menlo, Consolas, monospace;

    --psa-shell:  1320px;
    --psa-gutter: 28px;
    --psa-radius: 3px;
}

/* Accent variations kept for the existing theme switcher. Structure is
   untouched — only hue-bearing tokens change. */
[data-psa-theme="2"] {           /* Teal */
    --psa-green: #0E5C63; --psa-green-dark: #0A4046;
    --psa-green-pale: #E3EFF0; --psa-green-tint: #EDF4F4;
    --psa-green-soft: #F0F7F7; --psa-on-dark: #C7DCDE;
    --psa-on-dark-2: #D2E5E7; --psa-on-dark-3: #DBEAEB;
}
[data-psa-theme="3"] {           /* Red */
    --psa-green: #8C2F39; --psa-green-dark: #6B222A;
    --psa-green-pale: #F6E8EA; --psa-green-tint: #FAF0F1;
    --psa-green-soft: #FCF5F6; --psa-on-dark: #E8CFD2;
    --psa-on-dark-2: #EEDADD; --psa-on-dark-3: #F2E3E5;
}
[data-psa-theme="4"] {           /* Maroon */
    --psa-green: #6E2436; --psa-green-dark: #4E1826;
    --psa-green-pale: #F3E7EA; --psa-green-tint: #F7EFF1;
    --psa-green-soft: #FAF3F4; --psa-on-dark: #E4C9D0;
    --psa-on-dark-2: #EAD4DA; --psa-on-dark-3: #EFDDE1;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
/* The mockup assumes border-box everywhere. Without this the shell
   measures 1320 + 2x28 padding = 1376 instead of 1320, so every band
   sits 56px wider than designed. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--psa-surface);
    font-family: var(--psa-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--psa-ink);
    -webkit-font-smoothing: antialiased;
}

body a { color: var(--psa-green); text-decoration: none; }
body a:hover,
body a:focus { color: var(--psa-green-dark); text-decoration: underline; }

input, button, select, textarea { font-family: inherit; }

/* Single, consistent focus ring across the whole site. */
:focus-visible { outline: 2px solid var(--psa-gold); outline-offset: 2px; }
.psa-topbar :focus-visible,
.psa-mainnav :focus-visible,
.psa-footer :focus-visible,
.psa-hero :focus-visible { outline-color: var(--psa-gold-light); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.psa-shell {
    max-width: var(--psa-shell);
    margin: 0 auto;
    padding-left: var(--psa-gutter);
    padding-right: var(--psa-gutter);
}

/* Bootstrap's containers are re-pointed at the mockup's shell width so
   existing markup lines up without being rewritten. */
.psa-site-header .container,
.psa-site-header .container-fluid,
.psa-footer .container-fluid,
.psa-main .psa-content-wrap {
    max-width: var(--psa-shell);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--psa-gutter);
    padding-right: var(--psa-gutter);
    width: 100%;
}

.psa-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------
   3. Header — utility bar
   --------------------------------------------------------------- */
.psa-site-header { width: 100%; background: var(--psa-paper); box-shadow: none; }

.psa-topbar {
    background: var(--psa-green-dark);
    color: var(--psa-on-dark);
    font-size: 13px;
    padding: 0;
    border-bottom: 0;
}
.psa-topbar-row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.psa-topbar a { color: var(--psa-on-dark); text-decoration: none; }
.psa-topbar a:hover,
.psa-topbar a:focus { color: #fff; text-decoration: underline; opacity: 1; }
.psa-topbar-contact,
.psa-topbar-quicklinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.psa-topbar-quicklinks { gap: 16px; }
.psa-topbar-contact li { position: relative; display: flex; align-items: center; }
/* Gold interpunct between utility links, per the mockup. */
.psa-topbar-contact li + li::before {
    content: "\00B7";
    color: var(--psa-gold);
    margin-right: 18px;
    font-weight: 700;
}
.psa-topbar i { margin-right: 6px; opacity: .8; }

/* Theme control styled as the mockup's outlined pill. */
.psa-theme-switcher { position: relative; }
.psa-theme-trigger {
    min-height: 26px;
    background: transparent;
    border: 1px solid rgba(230,239,232,.35);
    color: #E6EFE8;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--psa-radius); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.psa-theme-trigger:hover { background: rgba(255,255,255,.08); border-color: rgba(230,239,232,.6); }
.psa-theme-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: var(--psa-paper); border: 1px solid var(--psa-line);
    box-shadow: 0 8px 24px rgba(7,63,45,.18);
    padding: 14px; min-width: 210px; border-radius: var(--psa-radius);
}
.psa-theme-panel.open { display: block; }
.psa-theme-panel-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--psa-green-dark); font-weight: 600; }
.psa-theme-options { display: flex; gap: 8px; }
.psa-theme-option {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; background: var(--swatch, var(--psa-green));
    color: #fff; font-size: 12px; font-weight: 600;
}
.psa-theme-option.active { border-color: var(--psa-gold); box-shadow: 0 0 0 2px #fff inset; }
.psa-theme-name { margin: 10px 0 0; font-size: 12.5px; color: var(--psa-muted); }

/* ---------------------------------------------------------------
   4. Header — brand band
   --------------------------------------------------------------- */
.psa-brand {
    position: relative; overflow: hidden;
    background: var(--psa-paper);
    border-bottom: 1px solid var(--psa-line-soft);
}
.psa-brand-decor { display: none; }          /* the old blue gradient wash */
.psa-brand-stamp { display: none; }          /* the old cap icon */

.psa-brand-inner {
    padding-top: 18px; padding-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.psa-brand-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.psa-brand-logo { height: 62px; width: auto; display: block; }

.psa-brand-text { flex: 1 1 auto; min-width: 0; }
.psa-brand-title {
    margin: 0;
    font-family: var(--psa-serif);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--psa-green);
    text-shadow: none;
}
.psa-brand-tagline {
    display: flex; align-items: center; gap: 10px;
    margin: 7px 0 0;
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--psa-muted);
}
.psa-brand-tagline-bar { width: 26px; height: 2px; background: var(--psa-gold); display: block; flex: none; }

/* Right-hand institutional address from the mockup. */
.psa-brand-org {
    text-align: right; font-size: 12.5px; line-height: 1.6;
    color: var(--psa-muted); max-width: 280px; flex: none;
}
.psa-brand-org strong { display: block; color: var(--psa-ink); font-weight: 600; }

/* ---------------------------------------------------------------
   5. Header — main navigation
   --------------------------------------------------------------- */
.psa-mainnav { background: var(--psa-green); }
.psa-mainnav-inner { display: flex; align-items: stretch; gap: 2px; }
.psa-mainnav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.psa-mainnav-list > li { display: flex; }
.psa-mainnav-list > li > a {
    display: flex; align-items: center;
    padding: 0 18px; min-height: 50px;
    font-size: 14.5px; font-weight: 500; white-space: nowrap;
    color: var(--psa-on-dark-2); text-decoration: none;
    border: 0; border-radius: 0; background: transparent;
}
.psa-mainnav-list > li > a:hover,
.psa-mainnav-list > li > a:focus { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.psa-mainnav-list > li > a.active {
    color: #fff;
    background: rgba(0,0,0,.18);
    box-shadow: inset 0 -3px 0 var(--psa-gold);
}
/* The mockup's nav is text-only. */
.psa-mainnav-list > li > a > i { display: none; }

.psa-mainnav-toggle {
    display: none;
    background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
    padding: 8px 14px; margin: 8px 0; border-radius: var(--psa-radius);
    font-size: 14px; cursor: pointer;
}

/* ---------------------------------------------------------------
   6. Hero band (homepage)
   --------------------------------------------------------------- */
.psa-hero {
    position: relative;
    min-height: 310px;
    background: var(--psa-green-dark);
    overflow: hidden;
    display: flex; align-items: center;
}
.psa-hero-media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center right;
    background-repeat: no-repeat;
}
/* The scrim was hardcoded to the green theme's rgba(7,63,45,...). With any
   other theme active that put a GREEN wash over a MAROON (or teal, or red)
   base and the band turned muddy. A neutral black scrim darkens whatever
   hue the theme supplies, so it reads correctly on all four and still gives
   the left-hand copy the contrast the mockup relies on. */
.psa-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(0,0,0,.34) 0%, rgba(0,0,0,.26) 34%,
        rgba(0,0,0,.10) 66%, rgba(0,0,0,0) 100%);
}

/* No banner photo is installed yet, so the flat wash was reading as a slab.
   A soft radial lift on the right gives the band some depth until a real
   image is dropped at Images/psa-hero.jpg, at which point it sits harmlessly
   underneath. */
.psa-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(120% 140% at 88% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
        radial-gradient(90% 120% at 8% 100%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 70%);
}

/* A gold hairline ties the band to the rest of the identity. */
.psa-hero { border-bottom: 3px solid var(--psa-gold); }
.psa-hero-inner { position: relative; z-index: 3; width: 100%; }
.psa-hero-copy { max-width: 660px; }
.psa-hero-eyebrow {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--psa-gold-light);
}
.psa-hero-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--psa-gold); display: block; flex: none; }
.psa-hero h1 {
    margin: 0;
    font-family: var(--psa-serif); font-weight: 700;
    font-size: 40px; line-height: 1.12; letter-spacing: -.015em;
    color: #fff; text-wrap: balance;
}
.psa-hero p {
    margin: 14px 0 0; max-width: 600px;
    font-size: 17px; line-height: 1.55; color: var(--psa-on-dark-3);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------
   7. Statistics strip
   --------------------------------------------------------------- */
.psa-statstrip { background: var(--psa-paper); border-bottom: 1px solid var(--psa-line-soft); }
.psa-statstrip-inner { display: flex; align-items: stretch; flex-wrap: wrap; }
.psa-stat {
    flex: 1 1 200px;
    padding: 16px 24px 16px 0;
    margin-right: 24px;
    display: flex; align-items: baseline; gap: 12px;
    border-right: 1px solid var(--psa-line-soft);
}
.psa-stat-value {
    font-family: var(--psa-serif); font-weight: 700; font-size: 27px; line-height: 1;
    color: var(--psa-green); font-variant-numeric: tabular-nums;
}
.psa-stat-label { font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--psa-muted); }
.psa-statstrip-note { display: flex; align-items: center; font-size: 13px; color: var(--psa-muted); padding: 16px 0; }

/* ---------------------------------------------------------------
   8. Page shell
   --------------------------------------------------------------- */
.psa-main { display: block; background: var(--psa-surface); }
.psa-main .psa-content-wrap { padding-top: 26px; padding-bottom: 40px; }
.psa-content-inner { min-width: 0; }

.psa-breadcrumb { font-size: 13.5px; color: var(--psa-muted); margin-bottom: 18px; }
.psa-breadcrumb .sep { color: var(--psa-gold); margin: 0 6px; }

/* Card primitive */
.psa-card { background: var(--psa-paper); border: 1px solid var(--psa-line); }
.psa-card--accent { border-top: 3px solid var(--psa-green); }
.psa-card-head {
    margin: 0; padding: 11px 14px;
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    color: var(--psa-green-dark);
    background: var(--psa-green-tint);
    border-bottom: 1px solid var(--psa-line);
}

/* Section headings used across the listing pages */
.psa-title,
.ja-title, .cpa-title, .cvj-title, .ccp-title, .sna-title {
    margin: 0 0 4px;
    font-family: var(--psa-serif); font-weight: 700;
    font-size: 30px; line-height: 1.18; letter-spacing: -.015em;
    color: var(--psa-ink);
    text-wrap: balance;
}
.psa-section-rule { width: 34px; height: 2px; background: var(--psa-gold); margin: 10px 0 18px; }

.psa-eyebrow {
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--psa-green-dark); font-weight: 600;
}

/* ---------------------------------------------------------------
   9. Buttons and form controls
   --------------------------------------------------------------- */
.psa-btn,
.psa-btn-primary,
.psa-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px;
    border-radius: var(--psa-radius);
    font-size: 15px; font-weight: 600; line-height: 1;
    cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.psa-btn-primary { background: var(--psa-green); color: #fff; border: 1px solid var(--psa-green); }
.psa-btn-primary:hover,
.psa-btn-primary:focus { background: var(--psa-green-dark); border-color: var(--psa-green-dark); color: #fff; text-decoration: none; }

.psa-btn-ghost { background: var(--psa-paper); color: var(--psa-green); border: 1px solid var(--psa-field-2); font-weight: 500; }
.psa-btn-ghost:hover,
.psa-btn-ghost:focus { background: var(--psa-green-soft); border-color: var(--psa-green); color: var(--psa-green-dark); text-decoration: none; }

.psa-btn[disabled],
.psa-btn-primary[disabled],
.psa-btn-ghost[disabled] { background: #F2F2EE; border-color: var(--psa-line); color: #A2ADA7; cursor: default; }

.psa-field-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--psa-ink-2); margin-bottom: 7px; }

.psa-input,
input[type="text"].psa-input,
input[type="search"].psa-input,
input[type="email"].psa-input,
select.psa-input,
textarea.psa-input {
    width: 100%; height: 44px; padding: 0 12px;
    font-size: 15.5px; color: var(--psa-ink);
    background: var(--psa-paper);
    border: 1px solid var(--psa-field); border-radius: var(--psa-radius);
    box-shadow: none;
}
textarea.psa-input { height: auto; padding: 11px 12px; resize: vertical; }
.psa-input:focus { border-color: var(--psa-green); box-shadow: none; }
.psa-input::placeholder { color: #8B978F; }

.psa-note {
    margin: 18px 0 0; padding: 11px 14px;
    background: var(--psa-green-pale);
    border-left: 3px solid var(--psa-green);
    font-size: 14px; line-height: 1.5; color: #2C3A34;
}
.psa-note code {
    font-family: var(--psa-mono); font-size: .92em;
    background: var(--psa-paper); border: 1px solid #CFDED5;
    padding: 1px 5px; border-radius: 2px; color: inherit;
}

/* ---------------------------------------------------------------
   10. Search panel (DataTables filter area is moved in here by JS)
   --------------------------------------------------------------- */
.psa-searchpanel {
    background: var(--psa-paper);
    border: 1px solid var(--psa-line);
    border-top: 3px solid var(--psa-green);
    padding: 22px 24px 20px;
}

/* Mode tabs: Basic / Author / Publication */
.psa-search-tabs {
    display: flex; gap: 0; width: 100%;
    border-bottom: 1px solid var(--psa-line-soft);
    margin: 0 0 20px;
}
.psa-search-tabs a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 18px; min-height: 42px; margin-bottom: -1px;
    font-size: 14.5px; font-weight: 500;
    color: var(--psa-muted); background: transparent;
    border: 0; border-bottom: 3px solid transparent;
    text-decoration: none;
}
.psa-search-tabs a:hover { color: var(--psa-green); background: var(--psa-green-soft); text-decoration: none; }
.psa-search-tabs a.active {
    color: var(--psa-green-dark); font-weight: 600;
    border-bottom-color: var(--psa-green);
    background: transparent;
}
.psa-search-tabs a i { opacity: .75; }

/* The row DataTables generates: label + input + our injected buttons */
.psa-search-row,
.dataTables_filter.psa-search-row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
    float: none !important; text-align: left !important; width: 100%;
}
.psa-search-row label {
    flex: 1 1 420px; min-width: 260px; margin: 0;
    font-size: 13.5px; font-weight: 500; color: var(--psa-ink-2);
}
.psa-search-row input[type="search"],
.psa-search-row input[type="text"] {
    display: block; width: 100%; margin: 7px 0 0;
    height: 48px; padding: 0 14px;
    font-size: 16px; color: var(--psa-ink);
    background: var(--psa-paper);
    border: 1px solid var(--psa-field); border-radius: var(--psa-radius);
}
.psa-search-row input[type="search"]:focus { border-color: var(--psa-green); }

.psa-search-row .psa-btn-primary,
.psa-search-row .psa-btn-ghost { height: 48px; min-height: 48px; }
.psa-search-row .psa-btn-primary { min-width: 132px; }

/* "Search within" checkbox group */
.psa-search-footer { flex: 1 1 100%; margin-top: 4px; }
.psa-search-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.psa-search-options-legend { font-size: 13.5px; color: var(--psa-muted); margin-right: 4px; }
.psa-search-options label {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 24px; margin: 0; font-size: 14.5px; font-weight: 400;
    color: var(--psa-ink); cursor: pointer; flex: none;
}
.psa-search-options input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--psa-green); }

/* Active-filter chips */
.psa-chipbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.psa-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 32px; padding: 4px 10px;
    background: var(--psa-green-pale); border: 1px solid #D2E0D7;
    font-size: 13.5px; color: var(--psa-green-dark); border-radius: var(--psa-radius);
}
.psa-chip button {
    background: none; border: 0; cursor: pointer; padding: 0 2px;
    color: var(--psa-green-dark); font-size: 15px; line-height: 1;
}
.psa-chip button:hover { color: #8A1B1B; }

/* ---------------------------------------------------------------
   11. Facet rail
   --------------------------------------------------------------- */
.psa-layout { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 26px; }
.psa-rail { min-width: 0; }
.psa-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.psa-rail-head h2 { margin: 0; font-family: var(--psa-serif); font-size: 19px; font-weight: 700; color: var(--psa-ink); }
.psa-rail-head a { font-size: 13px; }

.psa-facet { background: var(--psa-paper); border: 1px solid var(--psa-line); margin-bottom: 14px; }
.psa-facet > h3,
.psa-facet-title {
    margin: 0; padding: 11px 14px;
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    color: var(--psa-green-dark); background: var(--psa-green-tint);
    border-bottom: 1px solid var(--psa-line);
}
.psa-facet-body { padding: 6px 0; }

/* Facet rows are emitted by Mainsearch.ashx as .list-group-item anchors. */
.psa-facet .list-group,
.psa-facet ul { list-style: none; margin: 0; padding: 6px 0; }
.psa-facet .list-group-item,
.psa-facet-body > a {
    display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
    padding: 8px 14px;
    font-size: 14px; line-height: 1.35; color: var(--psa-ink);
    background: transparent; border: 0; border-radius: 0;
    text-decoration: none;
}
.psa-facet .list-group-item:hover,
.psa-facet .list-group-item:focus,
.psa-facet-body > a:hover {
    background: var(--psa-surface); color: var(--psa-green); text-decoration: none;
}
.psa-facet .badge,
.psa-facet .list-group-item .badge {
    background: transparent; color: var(--psa-muted-2);
    font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums;
    padding: 0; border-radius: 0; float: none;
}
.psa-facet .psa-showmore,
.psa-facet .showMoreLink,
.psa-facet-more {
    display: block; width: 100%; text-align: left;
    padding: 9px 14px; min-height: 38px;
    background: var(--psa-paper); border: 0; border-top: 1px solid var(--psa-line-warm);
    color: var(--psa-green); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.psa-facet .psa-showmore:hover,
.psa-facet .showMoreLink:hover,
.psa-facet-more:hover { background: var(--psa-surface); text-decoration: none; }

.psa-empty { padding: 12px 14px; font-size: 14px; color: var(--psa-muted); font-style: italic; }
.psa-panel-loading { opacity: .55; }

/* ---------------------------------------------------------------
   12. Results
   --------------------------------------------------------------- */
.psa-results-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 2px solid var(--psa-green);
}
.psa-results-head h2 { margin: 0; font-family: var(--psa-serif); font-size: 20px; font-weight: 700; color: var(--psa-ink); }
.psa-results-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--psa-muted); }
.psa-results-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.psa-results-tools .psa-btn-ghost { min-height: 38px; height: 38px; padding: 0 15px; font-size: 14px; }

/* DataTables table restyled as the mockup's record list */
table.dataTable,
#example.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
    background: var(--psa-paper);
    border: 1px solid var(--psa-line);
    border-top: 0;
    font-size: 15px;
}
table.dataTable thead th {
    padding: 9px 14px;
    background: var(--psa-head-bg);
    border-bottom: 1px solid var(--psa-line) !important;
    border-top: 0;
    font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--psa-muted-3); font-weight: 600; text-align: left;
}
table.dataTable tbody td {
    padding: 11px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--psa-line-warm);
    vertical-align: top;
    line-height: 1.45;
}
table.dataTable tbody tr:hover td { background: var(--psa-row-hover); }
table.dataTable tbody tr:last-child td { border-bottom: 0; }
table.dataTable tbody td a {
    font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--psa-green);
}
table.dataTable tbody td a:hover { color: var(--psa-green-dark); }
/* The journal / year / volume line the handler appends after the <br/>. */
table.dataTable tbody td { color: var(--psa-ink-3); font-size: 13.5px; }
table.dataTable tbody td a { font-size: 15px; }

table.dataTable.no-footer { border-bottom: 1px solid var(--psa-line); }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-image: none; }

/* DataTables chrome */
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper .dataTables_info {
    padding-top: 14px; font-size: 13.5px; color: var(--psa-muted);
}
.dataTables_wrapper .dataTables_length { padding-top: 12px; font-size: 13.5px; color: var(--psa-muted); }
.dataTables_wrapper .dataTables_length select {
    height: 38px; min-width: 68px; padding: 0 8px; margin: 0 6px;
    border: 1px solid var(--psa-field-2); border-radius: var(--psa-radius);
    background: var(--psa-paper); font-size: 14px; color: var(--psa-ink);
}
.dataTables_wrapper .dataTables_paginate { padding-top: 14px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: 38px; padding: 8px 13px !important; margin: 0 3px;
    background: var(--psa-paper) !important;
    border: 1px solid var(--psa-field-2) !important;
    border-radius: var(--psa-radius) !important;
    color: var(--psa-green) !important;
    font-size: 14px; font-weight: 500;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--psa-green-pale) !important;
    border-color: var(--psa-green) !important;
    color: var(--psa-green-dark) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--psa-green) !important;
    border-color: var(--psa-green) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #F2F2EE !important; border-color: var(--psa-line) !important;
    color: #A2ADA7 !important; cursor: default;
}
.dataTables_wrapper .dataTables_processing {
    background: var(--psa-paper); border: 1px solid var(--psa-line);
    box-shadow: 0 4px 14px rgba(7,63,45,.12); color: var(--psa-ink);
    border-radius: var(--psa-radius); padding: 12px 18px;
}

/* Plain (non-DataTables) listing tables on the Covered*/Articles pages */
.psa-table { width: 100%; border-collapse: collapse; background: var(--psa-paper); border: 1px solid var(--psa-line); font-size: 15px; }
.psa-table thead th {
    padding: 9px 14px; text-align: left;
    background: var(--psa-head-bg); border-bottom: 1px solid var(--psa-line);
    font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--psa-muted-3); font-weight: 600;
}
.psa-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--psa-line-warm); vertical-align: top; line-height: 1.45; }
.psa-table tbody tr:hover td { background: var(--psa-row-hover); }
.psa-table tbody tr:last-child td { border-bottom: 0; }

/* Standalone pagination (listing pages) */
.psa-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.psa-pager p { margin: 0; font-size: 13.5px; color: var(--psa-muted); }
.psa-pager-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.psa-pager-links a,
.psa-pager-links span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; min-width: 38px; padding: 0 12px;
    border: 1px solid var(--psa-field-2); border-radius: var(--psa-radius);
    background: var(--psa-paper); color: var(--psa-green);
    font-size: 14px; font-weight: 500; text-decoration: none;
}
.psa-pager-links a:hover { background: var(--psa-green-pale); border-color: var(--psa-green); text-decoration: none; }
.psa-pager-links .current { background: var(--psa-green); border-color: var(--psa-green); color: #fff; }
.psa-pager-links .disabled { background: #F2F2EE; border-color: var(--psa-line); color: #A2ADA7; }

/* Alphabetical index (Covered Journals) */
.psa-alpha { display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 14px; }
.psa-alpha a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px; padding: 0 6px;
    border: 1px solid var(--psa-line); background: var(--psa-paper);
    color: var(--psa-green); font-size: 14px; text-decoration: none;
}
.psa-alpha a:hover,
.psa-alpha a.active { background: var(--psa-green); border-color: var(--psa-green); color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------
   13. Article detail
   --------------------------------------------------------------- */
.psa-article-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; align-items: start; }
.psa-article {
    background: var(--psa-paper); border: 1px solid var(--psa-line);
    border-top: 3px solid var(--psa-green);
    padding: 30px 34px 34px; min-width: 0;
}
.psa-article-kicker {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--psa-green);
}
.psa-article-kicker .rule { width: 18px; height: 2px; background: var(--psa-gold); display: block; }
.psa-article-kicker .subject { color: var(--psa-muted); letter-spacing: .06em; }

.psa-article h1,
.psa-article-title {
    margin: 0;
    font-family: var(--psa-serif); font-size: 34px; line-height: 1.2; font-weight: 700;
    letter-spacing: -.015em; color: var(--psa-ink); text-wrap: pretty;
}
.psa-article-byline { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--psa-ink-2); }

.psa-article h2,
.psa-article-h2 {
    margin: 32px 0 12px;
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    color: var(--psa-green-dark);
    padding-bottom: 8px; border-bottom: 1px solid var(--psa-line-soft);
}
.psa-abstract { margin: 0; font-size: 16.5px; line-height: 1.72; color: var(--psa-ink); max-width: 70ch; text-wrap: pretty; }

.psa-authors { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.psa-authors > li {
    display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 16px;
    font-size: 15px; line-height: 1.5;
    padding-bottom: 12px; border-bottom: 1px solid var(--psa-line-warm-2);
}
.psa-authors .name { font-weight: 600; }
.psa-authors .affil { color: var(--psa-ink-3); }

.psa-pubdetails { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 26px; font-size: 15px; }
.psa-pubdetails dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--psa-muted-2); margin-bottom: 5px; font-weight: 400; }
.psa-pubdetails dd { margin: 0; line-height: 1.5; color: var(--psa-ink); }

.psa-keywords { display: flex; flex-wrap: wrap; gap: 9px; }
.psa-keywords a,
.psa-keyword {
    display: inline-flex; align-items: center;
    padding: 6px 12px; min-height: 32px;
    background: var(--psa-green-pale); border: 1px solid #D2E0D7;
    font-size: 14px; color: var(--psa-green-dark); text-decoration: none;
}
.psa-keywords a:hover { background: var(--psa-green); border-color: var(--psa-green); color: #fff; text-decoration: none; }

.psa-article-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; margin-top: 34px; }
.psa-article-empty { margin: 0; font-size: 14.5px; color: var(--psa-muted); font-style: italic; }

.psa-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.psa-aside-card { background: var(--psa-paper); border: 1px solid var(--psa-line); padding: 16px 18px; }
.psa-aside-card h2 {
    margin: 0 0 12px; font-size: 12.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--psa-green-dark); font-weight: 600;
}
.psa-metrics { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.psa-metrics > div {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--psa-line-warm-2); padding-bottom: 9px;
}
.psa-metrics dt { color: var(--psa-muted); font-weight: 400; }
.psa-metrics dd {
    margin: 0; font-family: var(--psa-serif); font-size: 19px; font-weight: 700;
    color: var(--psa-green); font-variant-numeric: tabular-nums;
}
.psa-aside-actions { display: flex; flex-direction: column; gap: 9px; }
.psa-aside-actions .psa-btn-primary,
.psa-aside-actions .psa-btn-ghost { width: 100%; }
.psa-aside-note { background: var(--psa-green-tint); border: 1px solid var(--psa-line); padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--psa-ink-2); }
.psa-aside-note h2 { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--psa-green-dark); font-weight: 600; }

/* ---------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------- */
.psa-footer { background: var(--psa-green-dark); color: var(--psa-on-dark); font-family: var(--psa-sans); }
.psa-footer-top { padding: 38px 0 30px; background: transparent; }
.psa-footer-col { margin-bottom: 24px; }
.psa-footer-title {
    margin: 0 0 6px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; font-weight: 600;
}
.psa-footer-title i { display: none; }
.psa-footer-title::after { content: ""; display: block; width: 34px; height: 2px; background: var(--psa-gold); margin-top: 6px; }
.psa-footer-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.psa-footer-list a { color: var(--psa-on-dark); font-size: 13.5px; line-height: 1.45; text-decoration: none; }
.psa-footer-list a:hover,
.psa-footer-list a:focus { color: #fff; text-decoration: underline; }
.psa-footer-list i { display: none; }

.psa-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); background: transparent; }
.psa-footer-bottom .row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 14px 0; margin: 0; }
.psa-copyright,
.psa-credits { font-size: 12.5px; color: var(--psa-on-dark-mute); padding: 0; }
.psa-credits { text-align: right; }

#top-link {
    position: fixed; right: 22px; bottom: 22px; z-index: 50;
    width: 42px; height: 42px; border-radius: var(--psa-radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--psa-green); color: #fff; text-decoration: none;
    box-shadow: 0 4px 14px rgba(7,63,45,.28);
}
#top-link:hover { background: var(--psa-green-dark); color: #fff; }

/* ---------------------------------------------------------------
   15. Responsive
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
    .psa-layout { grid-template-columns: 1fr; }
    .psa-article-layout { grid-template-columns: 1fr; }
    .psa-pubdetails { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
    :root { --psa-gutter: 18px; }

    .psa-brand-inner { flex-wrap: wrap; gap: 16px; }
    .psa-brand-org { display: none; }
    .psa-brand-title { font-size: 23px; }
    .psa-brand-logo { height: 48px; }

    .psa-mainnav-inner { display: block; }
    .psa-mainnav-toggle { display: inline-flex; align-items: center; gap: 8px; }
    .psa-mainnav-list { display: none; flex-direction: column; padding-bottom: 8px; }
    .psa-mainnav-list.open { display: flex; }
    .psa-mainnav-list > li,
    .psa-mainnav-list > li > a { width: 100%; }
    .psa-mainnav-list > li > a { min-height: 46px; }
    .psa-mainnav-list > li > a.active { box-shadow: inset 3px 0 0 var(--psa-gold); }

    .psa-hero { min-height: 240px; }
    .psa-hero h1 { font-size: 28px; }
    .psa-hero p { font-size: 15.5px; }

    .psa-statstrip-inner { display: grid; grid-template-columns: repeat(2, 1fr); }
    .psa-stat { border-right: 0; border-bottom: 1px solid var(--psa-line-soft); margin-right: 0; padding-right: 0; }
    .psa-statstrip-note { display: none; }

    .psa-searchpanel { padding: 18px 16px 16px; }
    .psa-search-tabs { overflow-x: auto; }
    .psa-search-row label { flex-basis: 100%; min-width: 0; }
    .psa-search-row .psa-btn-primary,
    .psa-search-row .psa-btn-ghost { flex: 1 1 auto; }

    .psa-article { padding: 22px 18px 26px; }
    .psa-article h1, .psa-article-title { font-size: 26px; }
    .psa-abstract { font-size: 16px; }
    .psa-authors > li { grid-template-columns: 1fr; gap: 4px; }
    .psa-pubdetails { grid-template-columns: 1fr; }
    .psa-article-split { grid-template-columns: 1fr; gap: 22px; }

    .psa-title, .ja-title, .cpa-title, .cvj-title, .ccp-title, .sna-title { font-size: 24px; }

    .psa-credits { text-align: left; }

    /* Listing tables scroll rather than squash. */
    .psa-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.dataTable { font-size: 14px; }
}

@media (max-width: 520px) {
    .psa-statstrip-inner { grid-template-columns: 1fr; }
    .psa-results-head { align-items: flex-start; }
    .psa-hero h1 { font-size: 24px; }
}

/* ---------------------------------------------------------------
   16. Print
   --------------------------------------------------------------- */
@media print {
    .psa-topbar, .psa-mainnav, .psa-footer, #top-link,
    .psa-searchpanel, .psa-rail, .psa-aside, .psa-hero { display: none !important; }
    body { background: #fff; }
    .psa-article { border: 0; padding: 0; }
    .psa-article-layout { display: block; }
    a[href]::after { content: ""; }
}

/* ---------------------------------------------------------------
   17. Compatibility with the existing WebForms markup

   The pages predate this redesign and use their own class names for
   some of the same components. Rather than rewrite that markup (and
   the JavaScript that generates parts of it), the redesign adopts the
   existing hooks here.
   --------------------------------------------------------------- */

/* DataTables prepends .psa-search-tabs and appends .psa-search-footer
   INSIDE .dataTables_filter, which the redesign turns into a flex row.
   Both need to break onto their own full-width line, and the tabs must
   come first regardless of DOM order. */
.psa-search-row > .psa-search-tabs { flex: 1 1 100%; order: -1; margin-bottom: 20px; }
.psa-search-row > .psa-search-footer { flex: 1 1 100%; order: 10; }

/* The host is now inside .psa-searchpanel, so it contributes no chrome. */
.psa-search-host { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

/* Facet rail: pages use .psa-card / .psa-card-header / .psa-card-body. */
.psa-left-panel { min-width: 0; }
.psa-left-panel .psa-card { margin-bottom: 14px; }
.psa-results-panel { min-width: 0; }
.psa-main-grid { margin-left: 0; margin-right: 0; }

/* Bootstrap's .badge is used for facet counts; strip its pill styling so
   the count reads as plain tabular text, as in the mockup. */
.psa-card-body .badge,
.psa-card-body .list-group-item .badge {
    background: transparent !important;
    color: var(--psa-muted-2) !important;
    font-size: 12.5px; font-weight: 400;
    font-variant-numeric: tabular-nums;
    padding: 0; border-radius: 0; box-shadow: none;
}
.psa-card-body .list-group-item:hover .badge { background: transparent !important; color: var(--psa-green) !important; }

/* showMoreItems injects its toggle as a plain anchor at the end of a list. */
.psa-card-body .showMoreItems_link,
.psa-card-body > a.more,
.psa-card-body > a.less {
    display: block; padding: 9px 14px; min-height: 38px;
    border-top: 1px solid var(--psa-line-warm);
    color: var(--psa-green); font-size: 13.5px; font-weight: 500;
    text-decoration: none;
}
.psa-card-body .showMoreItems_link:hover { background: var(--psa-surface); text-decoration: none; }

/* The results table header row in the markup is .psa-thead. */
.psa-thead th {
    background: var(--psa-head-bg) !important;
    border-bottom: 1px solid var(--psa-line) !important;
    font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--psa-muted-3); font-weight: 600;
}

/* Active-filter chip bar (page markup) adopts the redesign chip. */
.psa-active-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 16px 0 0; padding: 0; background: none; border: 0;
}
.psa-active-filters-title { font-size: 13.5px; color: var(--psa-muted); }
.psa-active-filters-title i { color: var(--psa-green); }
.psa-active-filters-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Article detail page renders inside a centred "modal" shell. The
   redesign makes it a normal page surface. */
.psa-modal-shell { padding: 0; display: block; min-height: 0; }
.psa-modal {
    max-width: var(--psa-shell); margin: 0 auto;
    border-radius: 0; box-shadow: none; animation: none;
    background: transparent;
}

/* ---------------------------------------------------------------
   18. Overrides for page-level rules that survive in inline <style>

   Page <style> blocks sit in the body, so they beat this file on
   document order. Where a page rule still contradicts the mockup, it is
   out-specified here rather than edited in eight separate files.
   --------------------------------------------------------------- */

/* Facet card header: was a solid green gradient bar with white 15px
   text; the mockup uses a pale tint with small uppercase green text. */
.psa-card > .psa-card-header,
.psa-left-panel .psa-card-header {
    background: var(--psa-green-tint);
    background-image: none;
    color: var(--psa-green-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 14px;
    border-bottom: 1px solid var(--psa-line);
}
.psa-card > .psa-card-header i { color: var(--psa-gold); }

/* Facet card gets the mockup's hairline border. */
.psa-left-panel .psa-card,
.psa-main-grid .psa-card { border: 1px solid var(--psa-line); background: var(--psa-paper); }
.psa-left-panel .psa-card-body { padding: 6px 0; }

/* "Export BibTeX" uses .psa-btn-accent, which no longer exists; render it
   as a ghost button, and make the disabled state read as disabled rather
   than as the default appearance. */
.psa-results-toolbar .psa-btn-accent,
button.psa-btn-accent {
    background: var(--psa-paper);
    color: var(--psa-green);
    border: 1px solid var(--psa-green);
    min-height: 38px; height: 38px; padding: 0 15px;
    font-size: 14px; font-weight: 500;
    border-radius: var(--psa-radius);
}
.psa-results-toolbar .psa-btn-accent:hover:not(:disabled),
button.psa-btn-accent:hover:not(:disabled) { background: var(--psa-green-pale); color: var(--psa-green-dark); }
button.psa-btn-accent:disabled {
    background: #F2F2EE; border-color: var(--psa-line);
    color: #A2ADA7; cursor: default;
}

/* psa-menu.css draws pipe separators between nav items; the mockup's nav
   is separated by the hover/active fill alone. */
.psa-mainnav-list > li + li::before,
.psa-mainnav-list > li > a::before { content: none !important; }
.psa-mainnav-list > li { border: 0 !important; }
.psa-mainnav-list > li > a { border-left: 0 !important; border-right: 0 !important; }

/* Footer bottom row: copyright left, credit right, on one line. */
.psa-footer-bottom .psa-copyright,
.psa-footer-bottom .psa-credits { float: none; width: auto; padding: 0; }

/* Article page presents itself as a floating "modal" card. The redesign
   makes it a normal page surface — out-specified because the page's own
   <style> block sits later in the document. */
body .psa-modal-shell { padding: 26px 0 44px; display: block; min-height: 0; background: var(--psa-surface); }
body .psa-modal {
    max-width: var(--psa-shell); margin: 0 auto;
    border-radius: 0; box-shadow: none; animation: none;
    border: 1px solid var(--psa-line); background: var(--psa-paper);
}
html body { background: var(--psa-surface); background-image: none; }

/* ---------------------------------------------------------------
   19. Results grid (redesign)
   Three columns: selection, title + authors, published in.
   --------------------------------------------------------------- */
.psa-col-select { width: 42px; }
.psa-col-source { width: 220px; }
.psa-col-select input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--psa-green); }

table.dataTable tbody td.psa-col-title { padding-right: 18px; }
a.psa-rec-title {
    display: inline-block;
    font-size: 15px; font-weight: 500; line-height: 1.4;
    color: var(--psa-green);
}
.psa-rec-authors {
    display: block; margin-top: 3px;
    font-size: 13px; line-height: 1.4; color: var(--psa-muted);
}
td.psa-col-source { font-size: 13px; line-height: 1.45; color: var(--psa-ink-3); }
.psa-rec-cite { display: block; color: var(--psa-muted-2); font-variant-numeric: tabular-nums; }

/* Results header block */
.psa-results-head #psaResultsCount {
    margin: 0; font-family: var(--psa-serif); font-size: 20px; font-weight: 700; color: var(--psa-ink);
}
.psa-results-head #psaResultsRange { margin: 4px 0 0; font-size: 13.5px; color: var(--psa-muted); }
.psa-results-head #psaResultsRange strong { color: var(--psa-ink); font-weight: 500; }
.psa-pagesize {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 13.5px; font-weight: 400; color: var(--psa-muted);
}
.psa-pagesize select {
    height: 38px; padding: 0 8px;
    border: 1px solid var(--psa-field-2); border-radius: var(--psa-radius);
    background: var(--psa-paper); font-size: 14px; color: var(--psa-ink);
}

/* DataTables' own length control is now proxied by .psa-pagesize. */
.dataTables_wrapper .dataTables_length { display: none; }

@media (max-width: 860px) {
    /* Stack each record instead of squashing three columns. */
    .psa-col-source { width: auto; }
    table.dataTable thead .psa-col-source { display: none; }
    table.dataTable tbody td.psa-col-source {
        display: block; padding-top: 0; padding-left: 56px; border-bottom: 0;
    }
    table.dataTable tbody td.psa-col-title { display: block; padding-bottom: 4px; width: auto; }
    table.dataTable tbody td.psa-col-select { display: block; float: left; border-bottom: 0; }
    table.dataTable tbody tr { display: block; border-bottom: 1px solid var(--psa-line-warm); }
    table.dataTable tbody tr::after { content: ""; display: table; clear: both; }
}

/* DataTables' own head/foot wrappers (see the "dom" string on the pages). */
.psa-dt-head { display: none; }        /* the search row is relocated by initComplete */
.psa-dt-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-top: 18px;
}
.psa-dt-foot .dataTables_info { padding-top: 0; }
.psa-dt-foot .dataTables_paginate { padding-top: 0; }

/* Keep the three "search within" checkboxes grouped at the left rather
   than spread across the full width of the panel. */
.psa-search-footer { display: flex; justify-content: flex-start; }
.psa-search-options { justify-content: flex-start; }

/* The page's own badge rule is `.psa-card-body .list-group-item .badge`
   with !important, and it sits later in the document, so matching its
   specificity is not enough — this goes one level higher. The mockup's
   facet count is plain tabular text, not a green pill. */
.psa-left-panel .psa-card-body .badge,
.psa-left-panel .psa-card-body .list-group-item .badge,
.psa-left-panel .psa-card-body .list-group-item:hover .badge {
    background: transparent !important;
    color: var(--psa-muted-2) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-variant-numeric: tabular-nums;
}
.psa-left-panel .psa-card-body .list-group-item:hover .badge { color: var(--psa-green) !important; }

/* ---------------------------------------------------------------
   20. Listing / search pages built to the mockup
   (Conference Proceedings, Journal Articles)
   --------------------------------------------------------------- */
.psa-page-title {
    margin: 0;
    font-family: var(--psa-serif); font-size: 32px; font-weight: 700;
    line-height: 1.18; letter-spacing: -.015em; color: var(--psa-ink);
    text-wrap: balance;
}
.psa-page-lead {
    margin: 10px 0 22px; max-width: 72ch;
    font-size: 16px; line-height: 1.6; color: var(--psa-ink-3);
    text-wrap: pretty;
}

/* Inline variant of the search panel: one row of field + buttons + scope */
.psa-searchpanel--inline {
    display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
    padding: 18px 20px;
}
.psa-search-field { flex: 1 1 420px; min-width: 260px; }
.psa-search-field label {
    display: block; margin-bottom: 7px;
    font-size: 13.5px; font-weight: 500; color: var(--psa-ink-2);
}
.psa-search-field .psa-input { height: 46px; font-size: 16px; }
.psa-searchpanel--inline .psa-btn-primary { height: 46px; min-height: 46px; min-width: 126px; }
.psa-searchpanel--inline .psa-btn-ghost   { height: 46px; min-height: 46px; padding: 0 17px; }
.psa-search-scope { display: flex; gap: 20px; align-items: center; padding-bottom: 2px; flex-wrap: wrap; }
.psa-search-scope label {
    display: flex; align-items: center; gap: 8px; margin: 0;
    min-height: 44px; font-size: 14.5px; font-weight: 400;
    color: var(--psa-ink); cursor: pointer;
}
.psa-search-scope input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--psa-green); }

/* Record list — the mockup's 42px / 1fr / 240px row grid. */
.psa-reclist { background: var(--psa-paper); border: 1px solid var(--psa-line); border-top: 0; }
.psa-rec {
    display: grid; grid-template-columns: 42px minmax(0,1fr) 240px;
    padding: 11px 14px; align-items: start;
    border-bottom: 1px solid var(--psa-line-warm);
}
.psa-rec:last-child { border-bottom: 0; }
.psa-rec:hover { background: var(--psa-row-hover); }
.psa-rec-pick input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--psa-green); }
.psa-rec-main { min-width: 0; padding-right: 18px; }
.psa-rec-main .psa-rec-title { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--psa-green); }
.psa-rec-source { font-size: 13px; line-height: 1.45; color: var(--psa-ink-3); min-width: 0; }
.psa-rec-source .psa-rec-cite { display: block; color: var(--psa-muted-2); font-variant-numeric: tabular-nums; }

/* Facet links rendered server-side on these pages use .list-group-item
   directly inside .psa-facet-body. */
.psa-facet-body > a.list-group-item {
    display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
    padding: 8px 14px; font-size: 14px; line-height: 1.35;
    color: var(--psa-ink); text-decoration: none; border: 0;
}
.psa-facet-body > a.list-group-item:hover { background: var(--psa-surface); color: var(--psa-green); text-decoration: none; }
.psa-facet-body > a.list-group-item .badge {
    background: transparent; color: var(--psa-muted-2);
    font-size: 12.5px; font-weight: 400; padding: 0; border-radius: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
    .psa-page-title { font-size: 24px; }
    .psa-searchpanel--inline { padding: 16px; }
    .psa-rec { grid-template-columns: 30px minmax(0,1fr); }
    .psa-rec-source { grid-column: 2; padding-top: 6px; }
}

/* "Show more <facet>" control on the server-rendered facet cards. */
.psa-facet-more {
    display: block; width: 100%; text-align: left;
    padding: 9px 14px; min-height: 38px;
    background: var(--psa-paper); border: 0;
    border-top: 1px solid var(--psa-line-warm);
    color: var(--psa-green); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.psa-facet-more:hover { background: var(--psa-surface); }

/* ---------------------------------------------------------------
   21. Flatten the legacy page "hero" card

   Several pages still open with a rounded, gradient-filled card
   containing a "PAKISTAN SCIENCE ABSTRACTS" pill above the title.
   The mockup has no such card anywhere — every page starts with a
   plain serif h1 and a lead paragraph. This strips the card
   treatment site-wide so pages match even before their markup is
   rebuilt.
   --------------------------------------------------------------- */
.ja-hero, .sna-hero, .cpa-hero, .cvj-hero, .ccp-hero, .psa-page-intro {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
    text-align: left !important;
}
/* The eyebrow pill is redundant — the site wordmark is in the header. */
.ja-kicker, .sna-kicker, .cpa-kicker, .cvj-kicker, .ccp-kicker { display: none !important; }

.ja-title, .sna-title, .cpa-title, .cvj-title, .ccp-title, .psa-page-intro h1 {
    margin: 0 !important;
    font-family: var(--psa-serif);
    font-size: 32px; font-weight: 700; line-height: 1.18;
    letter-spacing: -.015em; color: var(--psa-ink);
    text-align: left !important;
}
.ja-hero p, .sna-hero p, .psa-page-intro p,
.instruction-text {
    margin: 10px 0 0 !important; max-width: 72ch;
    font-size: 16px; line-height: 1.6; color: var(--psa-ink-3);
    text-align: left !important;
}

/* Legacy "Find X" filter cards -> the mockup's flat find bar. */
.psa-findbar,
.ja-search-card, .sna-search-card, .cvj-search-card, .ccp-search-card {
    background: var(--psa-paper);
    border: 1px solid var(--psa-line);
    border-radius: 0;
    box-shadow: none;
    padding: 16px 18px;
    display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: 18px;
}
.psa-findbar .psa-btn-primary,
.psa-findbar .psa-btn-ghost { height: 44px; min-height: 44px; }

/* Legacy dark table headers -> the mockup's pale header row. */
.styled-grid th, .cpa-grid th, table.psa-table th {
    background: var(--psa-head-bg) !important;
    background-image: none !important;
    color: var(--psa-muted-3) !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px solid var(--psa-line) !important;
    text-align: left;
}
table.psa-table td.num, table.psa-table th.num { font-variant-numeric: tabular-nums; }
table.psa-table td.right, table.psa-table th.num.right,
table.psa-table th:last-child, table.psa-table td:last-child { text-align: right; }
table.psa-table th[scope="row"] { font-weight: 500; }

/* ---------------------------------------------------------------
   22. Article detail refinements

   Addressing review feedback: the page read as a stock UI template.
   Removes the decorative watermark, the tinted full-width section
   bands, the ordinal author pills, and the heavy empty-state cards.
   --------------------------------------------------------------- */

/* (1) Decorative FontAwesome document watermark behind the title. */
.psa-article-hero::before { content: none !important; }
.psa-article-hero {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 4px !important;
    overflow: visible !important;
}
.psa-article-tag { display: none !important; }

/* (5) Section headings: bold text with a short accent rule, not a
       full-width tinted band. */
.psa-modal-body .psa-card-header {
    background: none !important;
    background-image: none !important;
    color: var(--psa-green-dark) !important;
    padding: 0 0 8px !important;
    margin: 0 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--psa-line-soft);
    position: relative;
}
.psa-modal-body .psa-card-header::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 34px; height: 2px; background: var(--psa-gold);
}
.psa-modal-body .psa-card-header i { color: var(--psa-gold); font-size: 13px; }

/* Cards themselves lose the heavy chrome; sections are separated by
   space and the rule above, not by boxes inside boxes. */
.psa-modal-body .psa-card {
    background: none; border: 0; border-radius: 0;
    box-shadow: none; margin: 0 0 30px;
}
.psa-modal-body .psa-card-body { padding: 0; background: none; border: 0; }

/* (6) Authors: bold name, affiliation beneath, no ordinal pill. */
.author-block { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--psa-line-warm-2); }
.author-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.author-block .chip {
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px; align-items: baseline;
    background: none !important; border: 0 !important; padding: 0 !important;
}
.author-block .author-name { font-weight: 600; font-size: 15px; color: var(--psa-ink); }
.author-block .author-name::before { content: none !important; }
.author-block .small-muted { font-size: 14.5px; line-height: 1.5; color: var(--psa-ink-3); }

/* (3) Metrics: one card, three columns — not three stacked cards. */
.psa-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--psa-paper); border: 1px solid var(--psa-line);
    padding: 4px 0; margin-bottom: 16px;
}
.psa-metric-card {
    background: none !important; border: 0 !important;
    border-right: 1px solid var(--psa-line-warm-2) !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 14px 8px !important; margin: 0 !important;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
}
.psa-metric-card:last-child { border-right: 0 !important; }
.psa-metric-card::before { content: none !important; }
.psa-metric-card:hover { transform: none !important; }
.psa-metric-card .icon { display: none !important; }
.psa-metric-card .value {
    font-family: var(--psa-serif); font-size: 22px; font-weight: 700;
    color: var(--psa-green); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.psa-metric-card .label {
    font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--psa-muted);
}

/* (7) Empty states: quiet italic text, no card and no list icon. */
.psa-ref-list > div:only-child,
.psa-empty-note, .no-data, .psa-article-empty {
    background: none !important; border: 0 !important;
    padding: 0 !important; margin: 0 !important;
    color: var(--psa-muted) !important; font-style: italic; font-size: 14.5px;
}
.psa-ref-list > div::before { content: none !important; }
.psa-modal-body .psa-card-body > p:only-child { color: var(--psa-muted); font-style: italic; }

@media (max-width: 860px) {
    .psa-metrics { grid-template-columns: repeat(3, 1fr); }
    .author-block .chip { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------------------------------------------
   23. Listing table + search control polish

   Review feedback: tables read as dense and unstyled, search controls
   looked disconnected, and the page felt wall-to-wall flat.
   --------------------------------------------------------------- */

/* --- Typography ------------------------------------------------ */
/* Nothing in a data row should be transformed. Titles keep whatever
   case the catalogue stored, so acronyms (ISSN, IEEE, COMSATS) stay
   correct — `capitalize` would wreck them. Bold weight is reserved
   for the header row. */
table.psa-table,
.psa-reclist { font-family: var(--psa-sans); }
table.psa-table td,
table.psa-table th[scope="row"],
table.psa-table th[scope="row"] a {
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: 0;
}
table.psa-table th[scope="row"] a { color: var(--psa-green); }
table.psa-table th[scope="row"] a:hover { color: var(--psa-green-dark); }

/* Header row: the only bold, and kept small so it recedes. */
table.psa-table thead th {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    color: var(--psa-muted-3) !important;
    padding: 12px 14px !important;
}

/* --- Rows ------------------------------------------------------ */
table.psa-table tbody td,
table.psa-table tbody th[scope="row"] {
    padding: 16px 14px !important;      /* was 11px — too tight */
    line-height: 1.5;
    vertical-align: middle;
}
table.psa-table tbody tr:nth-child(even) { background: #F9F9F7; }
table.psa-table tbody tr { border-bottom: 1px solid #E9EDE9; }
table.psa-table tbody tr:hover { background: var(--psa-green-soft); }

/* --- Column alignment ------------------------------------------ */
/* Text left, figures right. Tabular numerals so digits line up. */
table.psa-table th[scope="row"],
table.psa-table thead th:first-child { text-align: left; }
table.psa-table td.num,
table.psa-table thead th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Numeric badges -------------------------------------------- */
table.psa-table td.num > span.psa-pill,
.psa-pill {
    display: inline-block; padding: 3px 9px;
    background: #F1F3F1; border: 1px solid #E4E8E4; border-radius: 999px;
    font-size: 12.5px; color: var(--psa-ink-3);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.psa-pill--count { background: var(--psa-green-pale); border-color: #D2E0D7; color: var(--psa-green-dark); font-weight: 600; }

/* --- Search controls ------------------------------------------- */
/* The field and its buttons now read as one control group. */
.psa-findbar {
    align-items: flex-end;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(7,63,45,.04);
}
.psa-findbar .psa-search-field { margin: 0; }
.psa-findbar .psa-input { border-radius: 6px 0 0 6px; border-right: 0; }
.psa-findbar .psa-btn-primary {
    border-radius: 0 6px 6px 0; margin-left: -1px;
    background: var(--psa-green); border-color: var(--psa-green); color: #fff;
}
/* Clear is secondary — an outline button, not a second solid one. */
.psa-findbar .psa-btn-ghost {
    margin-left: 10px; border-radius: 6px;
    background: transparent; border: 1px solid var(--psa-field-2);
    color: var(--psa-muted); font-weight: 500;
}
.psa-findbar .psa-btn-ghost:hover {
    background: var(--psa-green-soft); border-color: var(--psa-green); color: var(--psa-green-dark);
}

/* --- Table card ------------------------------------------------ */
/* Lifts the results off the page instead of running edge to edge. */
.psa-table-scroll {
    background: var(--psa-paper);
    border: 1px solid var(--psa-line);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
}
.psa-table-scroll > table.psa-table { border: 0; margin: 0; }
.psa-main { background: #F4F6F8; }

/* --- Footer ---------------------------------------------------- */
.psa-footer-top { padding: 30px 0 24px; }
.psa-footer-list { gap: 7px; }
.psa-footer-list a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.psa-footer-list a:hover,
.psa-footer-list a:focus {
    color: #fff; text-decoration: none;
    border-bottom-color: var(--psa-gold);
}
.psa-muted-dash { color: #B4BDB6; }

/* ---------------------------------------------------------------
   24. Footer tightening

   The footer was running to ~460px tall with loose link spacing and
   a bottom bar that wrapped onto two centred lines instead of one
   justified row. Matches the mockup's proportions.
   --------------------------------------------------------------- */
.psa-footer-top { padding: 34px 0 22px; }
.psa-footer-col { margin-bottom: 0; }

.psa-footer-title {
    margin: 0 0 6px; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: #fff; font-weight: 600;
}
.psa-footer-title::after { width: 30px; height: 2px; margin-top: 6px; }

.psa-footer-list { margin: 12px 0 0; gap: 6px; }
.psa-footer-list a { font-size: 13px; line-height: 1.35; }

/* Bottom bar: one row, copyright left, credit right. Bootstrap's
   .row/.col-md-6 were wrapping and centring it; these override the grid
   rather than relying on it. */
.psa-footer-bottom .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 12px 0;
    margin: 0;
}
.psa-footer-bottom .psa-copyright,
.psa-footer-bottom .psa-credits {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12.5px;
    color: var(--psa-on-dark-mute);
}
.psa-footer-bottom .psa-copyright { text-align: left !important; }
.psa-footer-bottom .psa-credits   { text-align: right !important; }

@media (max-width: 760px) {
    .psa-footer-top { padding: 26px 0 18px; }
    .psa-footer-col { margin-bottom: 22px; }
    .psa-footer-bottom .row { flex-direction: column !important; align-items: flex-start; }
    .psa-footer-bottom .psa-credits { text-align: left !important; }
}

/* The results table was sizing to its content instead of filling the
   column, leaving a wide empty gutter on the right. Pinned explicitly:
   the wrapper is a full-width block and the table fills it. */
.psa-table-scroll { display: block; width: 100%; }
.psa-table-scroll > table.psa-table,
table.psa-table { width: 100% !important; max-width: none !important; table-layout: auto; }
/* Give the fixed-width columns a floor so the title column takes the slack. */
table.psa-table th.num, table.psa-table td.num { width: 1%; white-space: nowrap; }
table.psa-table th[scope="col"]:first-child { width: auto; }

/* ---------------------------------------------------------------
   25. Contact Us
   --------------------------------------------------------------- */
.psa-contact-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin: 0 0 26px;
}
.psa-contact-card { background: var(--psa-paper); border: 1px solid var(--psa-line); padding: 16px 18px; }
.psa-contact-card h2 {
    margin: 0 0 6px; font-size: 12.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--psa-green-dark); font-weight: 600;
}
.psa-contact-name { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--psa-ink); }
.psa-contact-line { margin: 0 0 3px; font-size: 13.5px; color: var(--psa-ink-3); }

.psa-contact-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 26px; align-items: start; }
.psa-enquiry { padding: 24px 26px 26px; }
.psa-enquiry-title { margin: 0 0 18px; font-family: var(--psa-serif); font-size: 22px; font-weight: 700; color: var(--psa-ink); }

.psa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.psa-form-field { min-width: 0; margin-bottom: 16px; }
.psa-form-field--wide { grid-column: 1 / -1; }
.psa-form-field label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--psa-ink-2); }
.psa-form-field textarea.psa-input { min-height: 140px; }
.psa-field-error { display: block; margin-top: 5px; font-size: 13px; color: #A3282F; }

.psa-form-actions { margin-top: 6px; }
.psa-form-actions .psa-btn-primary { min-width: 160px; }

/* CAPTCHA */
.psa-captcha {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 18px; align-items: start;
    padding: 16px; margin: 4px 0 18px;
    background: var(--psa-green-tint); border: 1px solid var(--psa-line);
}
.psa-captcha-img { position: relative; display: flex; align-items: center; gap: 8px; }
.psa-captcha-img img { display: block; border: 1px solid var(--psa-line); background: #fff; }
.psa-captcha-refresh {
    width: 34px; height: 34px; flex: none;
    background: var(--psa-paper); border: 1px solid var(--psa-field-2);
    border-radius: var(--psa-radius); color: var(--psa-green); cursor: pointer;
}
.psa-captcha-refresh:hover { background: var(--psa-green-pale); border-color: var(--psa-green); }
.psa-captcha .psa-form-field { margin-bottom: 0; }
.psa-captcha input.psa-input { max-width: 220px; letter-spacing: .22em; text-transform: uppercase; font-size: 17px; }

/* Honeypot — positioned off-screen rather than display:none, which some
   bots specifically look for and skip. */
.psa-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Result banner */
.psa-note--ok    { background: var(--psa-green-pale); border-left-color: var(--psa-green); }
.psa-note--error { background: #F9EBEC; border-left-color: #A3282F; color: #5E1A1F; }

/* Sidebar */
.psa-contact-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.psa-address { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--psa-ink-3); }
.psa-subcentres { list-style: none; margin: 0; padding: 0; }
.psa-subcentres li {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--psa-line-warm-2); font-size: 14px;
}
.psa-subcentres li:last-child { border-bottom: 0; }
.psa-subcentres li > span:first-child { font-weight: 600; color: var(--psa-ink); }
.psa-subcentre-host { color: var(--psa-muted); font-size: 13px; text-align: right; }

@media (max-width: 1100px) {
    .psa-contact-layout { grid-template-columns: 1fr; }
    .psa-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .psa-contact-grid { grid-template-columns: 1fr; }
    .psa-form-grid { grid-template-columns: 1fr; }
    .psa-captcha { grid-template-columns: 1fr; }
    .psa-enquiry { padding: 18px 16px 20px; }
}

/* ============================================================
   26. PUBLICATION SEARCH — deep-linked journal context
   Shown on PSA-Publication-Search.aspx?journalid=NNNN so the
   visitor can see the results are scoped to one publication.
   ============================================================ */
.psa-tip--journal {
    background: var(--psa-green-pale);
    border-left: 3px solid var(--psa-green);
}
.psa-tip--journal i { color: var(--psa-green); }
.psa-tip--journal strong { color: var(--psa-ink); }
.psa-tip--journal em { font-style: normal; font-weight: 600; }

/* The server form that wraps the Contact Us content. Browsers give <form>
   a default margin in some UA sheets, and it sits between .psa-contact-grid
   and its layout context, so pin it to a plain block. */
#psaContactForm { margin: 0; padding: 0; display: block; }