/* listing.css — tier listing pages (Policy / AP / WI / Forms).
   Loaded after portal.css + home.css; reuses tokens, masthead, chips. */

.lst-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 28px 96px; }
@media (max-width: 760px){ .lst-wrap { padding: 18px 18px 72px; } }

/* breadcrumb */
.lst-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
.lst-crumbs a { color: var(--ink-3); cursor: pointer; }
.lst-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lst-crumbs .sep { color: var(--ink-4); }
.lst-crumbs .here { color: var(--ink-2); font-weight: 500; }

/* header band — accent per tier */
.lst-head { display: block; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 2px solid var(--rule); position: relative; }
.lst-head::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 120px; }
.lst-head.gold::after     { background: var(--gold); }
.lst-head.green::after    { background: var(--green-bright); }
.lst-head.teal::after     { background: var(--teal-bright); }
.lst-head.burgundy::after { background: var(--burgundy-bright); }
.lst-eyebrow { font: 600 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; display: block; }
.lst-head.gold .lst-eyebrow     { color: var(--gold); }
.lst-head.green .lst-eyebrow    { color: var(--green); }
.lst-head.teal .lst-eyebrow     { color: var(--teal); }
.lst-head.burgundy .lst-eyebrow { color: var(--burgundy); }
.lst-title { font-family: "Source Serif 4", serif; font-size: 30px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin: 0; line-height: 1.05; }
.lst-head-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.lst-head-titles { min-width: 0; }
.lst-metaline { font-size: 13px; color: var(--ink-3); margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.lst-metaline b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-sep { color: var(--ink-4); margin: 0 8px; }
@media (max-width: 680px){
  .lst-head-row { flex-direction: column; align-items: stretch; gap: 14px; }
}
.lst-headcount { text-align: right; white-space: nowrap; }
.lst-headcount b { font-family: "Source Serif 4", serif; font-size: 28px; font-weight: 600; color: var(--ink); display: block; line-height: 1; }
.lst-headcount span { font-size: 11.5px; color: var(--ink-4); }

/* header search */
.lst-head .lst-search { width: 320px; max-width: 42%; margin: 0; flex: 0 0 auto; }
.lst-headmeta { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.lst-headmeta b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 680px){
  .lst-head .lst-search { width: 100%; max-width: 100%; }
}

/* single-column main (sidebar removed) */
.lst-main { width: 100%; }

/* layout: sidebar + main */
.lst-grid { display: grid; grid-template-columns: 232px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .lst-grid { grid-template-columns: 1fr; gap: 18px; } .lst-side { position: static !important; } }

/* sidebar */
.lst-side { position: sticky; top: 84px; align-self: start;
  background: var(--white); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow-1); padding: 14px 10px; }
.lst-side-h { font: 600 10px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 10px; padding: 0 10px; }
.lst-side-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; transition: background .12s; }
.lst-side-link:hover { background: var(--paper-2); }
.lst-side-link.on { background: var(--paper-2); }
.lst-side-link .nm { font-size: 13px; color: var(--ink-2); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-side-link.on .nm { color: var(--ink); font-weight: 600; }
.lst-side-link .ct { font: 600 11px/1 "JetBrains Mono", monospace; color: var(--ink-4); flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: var(--paper-2); }
.lst-side-link:hover .ct, .lst-side-link.on .ct { background: var(--white); }

.lst-side-link.on.gold     { border-left-color: var(--gold);     background: var(--gold-bg); }
.lst-side-link.on.green    { border-left-color: var(--green-bright);    background: var(--green-bg); }
.lst-side-link.on.teal     { border-left-color: var(--teal-bright);     background: var(--teal-bg); }
.lst-side-link.on.burgundy { border-left-color: var(--burgundy-bright); background: var(--burgundy-bg); }

/* toolbar */
.lst-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.lst-tools-left { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lst-expand { margin-left: auto; }
.lst-search { position: relative; flex: 1 1 220px; max-width: 460px; }
.lst-search input { width: 100%; font: 13.5px/1.4 "Inter", sans-serif; color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px 9px 34px; outline: none; transition: border-color .15s, box-shadow .15s; }
.lst-search .si { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); }
.lst-search input:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.lst-fbtn { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 "Inter", sans-serif; color: var(--ink-2); background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; cursor: pointer; transition: border-color .12s, background .12s; }
.lst-fbtn:hover { background: var(--paper-2); }
.lst-fbtn.has { border-color: var(--ink-3); color: var(--ink); background: var(--paper-2); }
.lst-fbtn .chev { color: var(--ink-4); }
.lst-filt { position: relative; }
.lst-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 180px; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-2); padding: 6px; }
.lst-pop label { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.lst-pop label:hover { background: var(--paper-2); }
.lst-pop input { width: 15px; height: 15px; }
.lst-spacer { flex: 1 1 auto; }
.lst-expand { display: inline-flex; align-items: center; gap: 7px; }
.lst-linkbtn { appearance: none; border: 0; background: transparent; font: 500 12.5px/1 "Inter", sans-serif; color: var(--ink-3); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.lst-linkbtn:hover { background: var(--paper-2); color: var(--ink); }
.lst-sep { color: var(--ink-4); }

/* sort select */
.lst-sort { font: 500 13px/1 "Inter", sans-serif; color: var(--ink-2); background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 10px; cursor: pointer; }

/* category group */
.lcat { border-top: 1px solid var(--rule); margin-bottom: 6px; scroll-margin-top: 92px; }
.lcat:first-of-type { border-top: 0; }
.lcat-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px 4px 12px; cursor: pointer; user-select: none; }
.lcat-id-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.lcat-id { font-family: "Source Serif 4", serif; font-size: 19px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; letter-spacing: -.01em; }
.gold .lcat-id, .gold .lcat-name         { color: var(--gold); }
.green .lcat-id, .green .lcat-name        { color: var(--green); }
.teal .lcat-id, .teal .lcat-name          { color: var(--teal); }
.burgundy .lcat-id, .burgundy .lcat-name  { color: var(--burgundy); }
.lcat-name { font: 600 19px/1.3 "Source Serif 4", serif; letter-spacing: -.01em; }
.lcat-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-4); }
.lcat-chev { color: var(--ink-4); transition: transform .18s; }
.lcat.open .lcat-chev { transform: rotate(90deg); }
/* Server-rendered groups always emit their body; hide it when collapsed (the React
   prototype conditionally rendered it instead, so it had no such rule). */
.lcat:not(.open) .ldocs { display: none; }

/* document rows */
.ldocs { display: flex; flex-direction: column; padding: 2px 0 14px; }
.ldoc { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 13px 12px; border-top: 1px solid var(--rule-2); cursor: pointer; transition: background .1s; }
.ldoc:first-child { border-top: 0; }
.ldoc:hover { background: var(--paper-2); }
.ldoc-badge { font: 600 11.5px/1 "JetBrains Mono", monospace; padding: 7px 9px; border-radius: 6px; white-space: nowrap; text-align: center; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--rule); }
.ldoc-badge.gold     { color: var(--gold);     background: var(--gold-bg);     border-color: rgba(184,135,14,.25); }
.ldoc-badge.green    { color: var(--green);    background: var(--green-bg);    border-color: rgba(47,99,21,.22); }
.ldoc-badge.teal     { color: var(--teal);     background: var(--teal-bg);     border-color: rgba(21,97,110,.22); }
.ldoc-badge.burgundy { color: var(--burgundy); background: var(--burgundy-bg); border-color: rgba(140,45,45,.25); }
.ldoc-main { min-width: 0; }
.ldoc-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; line-height: 1.3; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ldoc-sum { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; max-width: 74ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldoc-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ldoc-date { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; text-align: right; }
.ldoc { align-items: center; }
.ldoc-badge { align-self: center; }
.ldoc-go { color: var(--ink-4); display: inline-flex; }
.ldoc:hover .ldoc-go { color: var(--ink-2); transform: translateX(1px); }
.ldoc-lock { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 "Inter", sans-serif; color: var(--ink-4); }

/* forms action */
.lform-act { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 "Inter", sans-serif; padding: 7px 11px; border-radius: 7px; border: 1px solid; cursor: pointer; white-space: nowrap; }
.burgundy .lform-act { color: var(--burgundy); border-color: rgba(140,45,45,.3); background: #fff; }
.burgundy .lform-act:hover { background: var(--burgundy-bg); }
.lform-aud { font: 500 11px/1 "Inter", sans-serif; color: var(--ink-3); padding: 4px 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); }
/* forms-only row signal: online/PDF format swatch (audience reuses .lform-aud above) */
.ldoc-fmt { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; }
.ldoc-fmt.online { color: var(--teal); background: var(--teal-bg); }
.ldoc-fmt.pdf { color: var(--burgundy); background: var(--burgundy-bg); }

.lst-empty { padding: 40px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }
.lst-empty b { color: var(--ink-2); }

/* reader stub */
.reader { max-width: 820px; margin: 0 auto; }
.reader-doc { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-1); padding: 40px 44px; }
@media (max-width: 640px){ .reader-doc { padding: 26px 22px; } }
.reader-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.reader.gold .reader-eyebrow { color: var(--gold); }
.reader.green .reader-eyebrow { color: var(--green); }
.reader.teal .reader-eyebrow { color: var(--teal); }
.reader.burgundy .reader-eyebrow { color: var(--burgundy); }
.reader-title { font-family: "Source Serif 4", serif; font-size: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; line-height: 1.15; text-wrap: balance; }
.reader-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.reader-body { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.reader-body p { margin: 0 0 16px; }
.reader-body h3 { font-family: "Source Serif 4", serif; font-size: 18px; color: var(--ink); margin: 24px 0 10px; }
.reader-note { margin-top: 22px; padding: 14px 16px; background: var(--paper-2); border-radius: 9px; font-size: 13px; color: var(--ink-3); font-style: italic; }
.reader-back { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 "Inter", sans-serif; color: var(--ink-3); margin-bottom: 18px; padding: 6px 10px 6px 6px; border-radius: 7px; cursor: pointer; }
.reader-back:hover { background: var(--paper-2); color: var(--ink); }