/* CISD Library Books Tracker — redesigned to match the Board Monitor design system,
   with the warm "library" palette retained as this site's identity/accent. */

:root {
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-sm:6px; --r-md:10px; --r-lg:16px;

  /* Library palette (warm parchment / brown) — this site's accent identity */
  --bg:            #f8f3e9;
  --surface:       #fffaf0;
  --surface-2:     #f4ede0;
  --surface-open:  #fdf5e4;

  --ink:           #2a1f12;
  --ink-2:         #6a5840;
  --ink-3:         #8a7858;

  --line:          #ddd0b8;
  --line-2:        #e8dcc8;

  --brand:         #4a3825;
  --brand-700:     #2a1f12;
  --brand-50:      #efe5d2;

  --accent:        #b88040;
  --link:          #8a5a20;
  --link-hover:    #b88040;

  --badge-bg:      #efe5d2;
  --badge-text:    #6a4a18;

  --warn:#c87030; --good:#4a8a4a; --bad:#b84040;

  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-hover: 0 1px 3px rgba(80,60,30,.08), 0 8px 24px rgba(80,60,30,.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width:100%; overflow-x:hidden; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.wrap { max-width:1080px; margin:0 auto; padding-left:var(--sp-5); padding-right:var(--sp-5); }
a { color:var(--link); }
a:hover { color:var(--link-hover); }

.skip-link {
  position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff;
  padding:var(--sp-2) var(--sp-4); border-radius:0 0 var(--r-sm) 0; z-index:10;
}
.skip-link:focus { left:0; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(135deg, rgba(74,56,37,.88) 0%, rgba(106,74,40,.78) 55%, rgba(138,90,48,.7) 100%),
    url('images/hero-bg.jpg') center center / cover no-repeat;
  border-bottom: none;
  padding: var(--sp-8) 0 var(--sp-6);
}
.eyebrow {
  margin:0 0 var(--sp-3); font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(245,228,196,.85);
}
.hero h1 {
  margin:0 0 var(--sp-4); font-size:clamp(26px,3.4vw,36px); line-height:1.15;
  font-weight:700; letter-spacing:-.015em; color:#fff;
}
.lede { margin:0; max-width:60ch; color:rgba(255,250,240,.82); font-size:clamp(15px,1.6vw,17px); line-height:1.55; }

/* ── Site navigation chips ──────────────────────────────────── */
.sitenav { margin:var(--sp-5) 0 0; }
.sitenav__tog, .sitenav__chip {
  display:inline-flex; align-items:center;
  padding:5px var(--sp-3); border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  transition:background .12s, color .12s, border-color .12s;
}
.sitenav__chip { text-decoration:none; }
.sitenav__tog:hover, .sitenav__chip:hover {
  background:rgba(255,255,255,.23); color:#fff; border-color:rgba(255,255,255,.38);
}
.sitenav__chip[aria-current="page"] {
  background:rgba(255,255,255,.25); color:#fff;
  border-color:rgba(255,255,255,.55); cursor:default;
}
.sitenav__tog { display:none; }
.sitenav__chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
@media (max-width:600px) {
  .sitenav__tog { display:inline-flex; }
  .sitenav__chips { display:none; margin-top:var(--sp-2); }
  .sitenav[data-open] .sitenav__chips { display:grid; grid-template-columns:1fr 1fr; }
  .sitenav[data-open] .sitenav__chip { justify-content:center; padding:9px var(--sp-3); font-size:13px; }
}

/* ── Disclaimer ───────────────────────────────────────────────── */
.disclaimer {
  background:var(--brand-50); border-bottom:1px solid var(--line);
}
.disclaimer .wrap {
  padding-top:var(--sp-2); padding-bottom:var(--sp-2);
  font-size:13px; font-style:italic; color:var(--ink-2);
}

/* ── Layout ───────────────────────────────────────────────────── */
main { padding:var(--sp-6) 0 var(--sp-6); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }

/* Toolbar card — search + result count */
.toolbar-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.toolbar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:200px; }
.search-wrap input {
  width:100%; padding:.55rem 2.1rem .55rem 2.3rem;
  font-size:.9rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink); font:inherit;
}
.search-wrap input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.search-icon { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:1rem; pointer-events:none; }
.search-clear {
  position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:.1rem .25rem;
  color:var(--ink-3); font-size:1rem; line-height:1; border-radius:3px; display:none;
}
.search-clear:hover { color:var(--ink); background:var(--surface-2); }
.search-wrap.has-value .search-clear { display:block; }
.result-count { font-size:.8rem; color:var(--ink-3); white-space:nowrap; }

/* Filter bar — ghost-pill chips matching .sitenav__chip aesthetic */
.filter-bar { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.filter-label { font-size:.72rem; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.filter-btn, .filter-select {
  display:inline-flex; align-items:center;
  padding:5px var(--sp-3); border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer; font-family:inherit;
  color:var(--ink-2);
  background:var(--brand-50); border:1px solid var(--line);
  transition:background .12s, color .12s, border-color .12s;
}
.filter-btn:hover, .filter-select:hover {
  background:var(--surface-2); color:var(--ink); border-color:var(--accent);
}
.filter-btn.active {
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.filter-btn--pending { border-color:var(--bad); color:var(--bad); }
.filter-btn--pending:hover { background:var(--brand-50); }

/* Custom dropdown — replaces native <select> so the open panel can match
   the site's rounded ghost-pill aesthetic (native select popups can't be restyled) */
.filter-dd { position:relative; }
.filter-dd__btn { gap:.45rem; }
.filter-dd__arrow {
  display:inline-block; width:7px; height:7px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .15s;
  opacity:.65;
}
.filter-dd[data-open] > .filter-dd__btn .filter-dd__arrow { transform:rotate(225deg) translateY(2px); }
.filter-dd[data-open] > .filter-dd__btn {
  background:var(--surface-2); color:var(--ink); border-color:var(--accent);
}
.filter-dd__menu {
  position:absolute; top:calc(100% + 6px); left:0; z-index:30;
  min-width:13rem; max-height:18rem; overflow-y:auto;
  margin:0; padding:var(--sp-1) 0; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 12px 28px rgba(42,31,18,.22);
  display:none;
}
.filter-dd[data-open] .filter-dd__menu { display:block; }
.filter-dd__opt {
  padding:.45rem var(--sp-4); font-size:.8rem; font-weight:500;
  color:var(--ink-2); white-space:nowrap; cursor:pointer; transition:background .1s, color .1s;
}
.filter-dd__opt:hover { background:var(--brand-50); color:var(--ink); }
.filter-dd__opt.is-selected { color:var(--brand); font-weight:700; }
.filter-dd__opt.is-selected::before { content:"✓ "; }

/* ── Table ────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--r-md); border:1px solid var(--line);
}
table {
  width:100%; border-collapse:collapse; font-size:.88rem; table-layout:fixed;
  background:var(--surface);
}
thead tr { background:var(--brand); color:#fdf6ea; }
thead th {
  padding:.65rem .85rem; text-align:left; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; cursor:pointer; user-select:none;
}
thead th:hover { background:rgba(255,255,255,.08); }
thead th.sorted-asc::after  { content:" ▲"; }
thead th.sorted-desc::after { content:" ▼"; }

th.col-title, td.col-title { position:sticky; left:0; z-index:1; background:inherit; }
thead th.col-title { background:var(--brand); z-index:2; }

tbody tr { border-top:1px solid var(--line); cursor:pointer; }
tbody tr:nth-child(even) td { background:var(--surface-2); }
tbody tr:nth-child(even) td.col-title { background:var(--surface-2); }
tbody tr:hover td { background:#f0e8d4; }
tbody tr.open td { background:var(--surface-open) !important; border-bottom:none; }

td { padding:.55rem .75rem; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; }
td.col-cover { padding:.35rem .5rem .35rem .75rem; width:62px; min-width:62px; vertical-align:middle; overflow:visible; }
td.col-cover img { display:block; width:52px; height:72px; object-fit:cover; border-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.18); background:var(--line); }
td.col-cover .no-cover {
  width:52px; height:72px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--ink-3);
}
th.col-cover  { width:62px; }
th.col-title  { width:32%; }
th.col-author { width:22%; }
th.col-date   { width:18%; }
th.col-cat    { width:24%; }

td.col-title  { font-weight:600; }
td.col-author { color:var(--ink-2); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
td.col-cat .badge {
  display:inline-block; background:var(--badge-bg); color:var(--badge-text);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.15rem .45rem; border-radius:3px; white-space:nowrap;
}
td.col-date   { font-size:.82rem; }

.plot-body { line-height:1.6; }
.plot-body.clamped { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.plot-toggle {
  display:inline-block; margin-top:.35rem; font-size:.78rem; font-weight:600; color:var(--link);
  cursor:pointer; background:none; border:none; padding:0; text-decoration:underline;
  text-underline-offset:2px; font-family:inherit;
}
.plot-toggle:hover { color:var(--link-hover); }

/* Small inline notes used inside table cells (replaces inline style="" attrs) */
.cell-note { font-size:.75rem; color:var(--ink-3); }
.cell-note--italic { font-style:italic; }
.cell-note--xs { font-size:.68rem; }
.src--mt { margin-top:.4rem; }

/* ── Expandable detail row ────────────────────────────────────── */
tr.detail-row { cursor:default; display:none; }
tr.detail-row.is-open { display:table-row; }
tr.detail-row td { padding:0; border-top:none; }
.detail-panel {
  background:var(--surface);
  border-top:2px solid var(--accent);
  border-bottom:1px solid var(--line-2);
  padding:1.2rem 1.4rem 1.4rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1.2rem;
}
.detail-section { min-width:0; overflow-wrap:break-word; word-break:break-word; }
.detail-section h3 {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);
  margin-bottom:.4rem; font-weight:700;
}
.detail-section p { font-size:.88rem; line-height:1.55; }
.detail-section .na { color:var(--ink-3); font-style:italic; }
.detail-section .src { font-size:.7rem; color:var(--ink-3); margin-top:.3rem; font-style:italic; }
.detail-section ul { padding-left:1.1rem; }
.detail-section li { font-size:.85rem; line-height:1.5; margin-bottom:.2rem; }
.detail-section.full-width { grid-column:1 / -1; }
.detail-section table { font-size:.85rem; border-collapse:collapse; width:100%; margin-top:.2rem; }
.detail-section table td { padding:.2rem .6rem .2rem 0; vertical-align:top; }
.detail-section table td:first-child { color:var(--ink-3); white-space:nowrap; font-weight:600; }

.action-card {
  margin-bottom:1rem; padding:.75rem; background:var(--bg); border-radius:var(--r-sm);
}
.action-card__meta { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.4rem; }
.action-card__type { font-size:.88rem; font-weight:700; }
.action-card__outcome { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.action-card__date,
.action-card__code { font-size:.78rem; color:var(--ink-3); }
.action-card__line { font-size:.82rem; color:var(--ink-2); margin-bottom:.35rem; }
.action-card__reason { font-size:.85rem; }
.action-card__verbatim { font-size:.82rem; font-style:italic; margin-top:.25rem; color:var(--ink-2); }
.action-card__audience { font-size:.82rem; margin-top:.3rem; color:var(--ink-2); }
.action-card__criteria { margin-top:.5rem; }
.action-card__criterion {
  margin-top:.4rem; padding:.5rem .65rem; background:var(--bg); border-radius:4px;
  border-left:2px solid var(--accent);
}
.action-card__criterion-code { font-size:.72rem; font-weight:700; color:var(--accent); margin-bottom:.2rem; }
.action-card__criterion-text { font-size:.82rem; line-height:1.5; }
.flag-mature { color:var(--accent); font-weight:600; }

/* ── Footer ───────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--line); margin-top:var(--sp-6); padding:var(--sp-5) 0 var(--sp-7); }
.foot__note { margin:0; font-size:12px; color:var(--ink-3); text-align:center; }
.foot__note + .foot__note { margin-top:var(--sp-1); }

/* ── Mobile card list ─────────────────────────────────────────── */
#card-list { display:none; }
@media (max-width:768px) {
  .table-wrap { display:none; }
  #card-list  { display:block; }
  .detail-panel { grid-template-columns:1fr; padding:.8rem .9rem 1rem; }
  .detail-section p,
  .detail-section li { font-size:.82rem; }
}

.book-card-mobile {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:.6rem; overflow:hidden; cursor:pointer;
}
.book-card-mobile.open { border-color:var(--accent); }
.card-main { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem .6rem .6rem; }
.card-cover-wrap img {
  display:block; width:48px; height:66px; object-fit:cover; border-radius:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.18); flex-shrink:0;
}
.card-cover-wrap .no-cover {
  width:48px; height:66px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--ink-3); flex-shrink:0;
}
.card-info { flex:1; min-width:0; }
.card-title  { font-weight:600; font-size:.95rem; line-height:1.3; margin-bottom:.2rem; }
.card-author { font-size:.82rem; color:var(--ink-2); font-style:italic; margin-bottom:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-badges { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.card-badges__meta { font-size:.68rem; color:var(--ink-3); }
.card-chevron { font-size:1.3rem; color:var(--ink-3); flex-shrink:0; transition:transform .2s; line-height:1; }
.book-card-mobile.open .card-chevron { transform:rotate(90deg); }
.card-detail { display:none; border-top:2px solid var(--accent); }
.book-card-mobile.open .card-detail { display:block; }

.outcome-badge {
  display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:.1rem .4rem; border-radius:3px; border:1px solid;
}
/* Outcome color variants — defined as classes (not inline styles) so the page
   can run under a strict style-src 'self' CSP with no 'unsafe-inline'. */
.outcome-badge--retained,        .outcome-badge--restored        { background:#4a8a4a20; color:#4a8a4a; border-color:#4a8a4a60; }
.outcome-badge--removed                                          { background:#b8404020; color:#b84040; border-color:#b8404060; }
.outcome-badge--partial_removal, .outcome-badge--not_ordered     { background:#c8703020; color:#c87030; border-color:#c8703060; }
.outcome-badge--classroom_removed                                { background:#8b451320; color:#8b4513; border-color:#8b451360; }
.outcome-badge--relocated                                        { background:#4070a820; color:#4070a8; border-color:#4070a860; }
.outcome-badge--pending,         .outcome-badge--default         { background:#88888820; color:#888;    border-color:#88888860; }

.action-card { border-left:3px solid var(--ink-3); }
.action-card--retained,        .action-card--restored        { border-left-color:#4a8a4a; }
.action-card--removed                                        { border-left-color:#b84040; }
.action-card--partial_removal, .action-card--not_ordered     { border-left-color:#c87030; }
.action-card--classroom_removed                              { border-left-color:#8b4513; }
.action-card--relocated                                      { border-left-color:#4070a8; }
.action-card--pending,         .action-card--default         { border-left-color:#888; }

.action-card__outcome--retained,        .action-card__outcome--restored        { color:#4a8a4a; }
.action-card__outcome--removed                                                 { color:#b84040; }
.action-card__outcome--partial_removal, .action-card__outcome--not_ordered     { color:#c87030; }
.action-card__outcome--classroom_removed                                       { color:#8b4513; }
.action-card__outcome--relocated                                               { color:#4070a8; }
.action-card__outcome--pending,         .action-card__outcome--default         { color:#888; }

.err { color:var(--bad); font-size:13px; margin:0; padding:2rem; text-align:center; }

@media (prefers-reduced-motion: reduce){
  * { transition:none !important; }
}