/* UHST Library: visual layer for the staff page and public catalog.
   Direction: a university reading room. Deep forest green and brass for the building, cloth-bound
   book colours for the collection itself. The one bold element is the books: covers without an image
   are drawn as cloth bindings coloured by subject, and the sign-in page opens on a shelf of them. */
:root{
  --bg:#f1f3ef; --surface:#ffffff; --sunk:#e9ede7; --line:#d9e0da; --ink:#15241e; --muted:#5d6e66;
  --lamp:#1d4d3c; --lamp-ink:#ffffff; --brass:#a97c27; --brass-soft:#f5ead2;
  --ok:#2c7a4b; --ok-soft:#e2f1e7; --warn:#a05a00; --warn-soft:#fbeed8; --bad:#b0302a; --bad-soft:#fbe5e2;
  --rail:#163b2e; --rail-ink:#e8efe9; --rail-muted:#a9bfb3; --rail-hover:#1f4a3a; --rail-active:#245644;
  --c1:#2f5d47; --c2:#7a2e2e; --c3:#22395b; --c4:#9a6b1f; --c5:#4a5a66; --c6:#5b3a5a; --c7:#1f5e63; --c8:#6b4a2b;
  --shadow:0 1px 2px rgba(21,36,30,.06),0 8px 24px rgba(21,36,30,.06);
  --r-sm:8px; --r-md:12px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1613; --surface:#151f1b; --sunk:#1b2823; --line:#28382f; --ink:#e6eee9; --muted:#97aaa0;
  --lamp:#6fbf9c; --lamp-ink:#0b1310; --brass:#d8ad55; --brass-soft:#2c2412;
  --ok:#72cf98; --ok-soft:#153024; --warn:#efb25e; --warn-soft:#30240f; --bad:#f08b82; --bad-soft:#371917;
  --rail:#0b1310; --rail-ink:#e6eee9; --rail-muted:#8ea398; --rail-hover:#14201b; --rail-active:#1b2b24;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}}

body{background:var(--bg);font-size:14.5px;-webkit-font-smoothing:antialiased}

/* ---------- side rail ---------- */
.rail{background:var(--rail);color:var(--rail-ink);padding:22px 14px;gap:22px}
.brand{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center}
.brand .mark{grid-row:span 3;width:40px;height:40px;border-radius:10px;background:var(--brass);display:flex;align-items:center;justify-content:center;color:#1a1408}
.brand .mark svg{width:22px;height:22px}
.brand b{font-size:19px;line-height:1.15}
.brand span{font-size:12.5px;color:var(--rail-muted);opacity:1}
.brand small{display:none}
.rail .seg{border-color:rgba(255,255,255,.18);margin-left:2px}
.rail .seg button{color:var(--rail-ink)}
.rail .seg button[aria-pressed="true"]{background:var(--rail-ink);color:var(--rail)}
nav{gap:3px}
nav button{color:var(--rail-ink);padding:9px 12px;border-radius:var(--r-sm);display:flex;align-items:center;gap:12px;justify-content:flex-start;position:relative;font-weight:500}
nav button svg{width:18px;height:18px;flex:0 0 auto;opacity:.75}
nav button:hover{background:var(--rail-hover)}
nav button[aria-current="page"]{background:var(--rail-active);color:#fff}
nav button[aria-current="page"] svg{opacity:1;color:var(--brass)}
nav button[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brass)}
.rail .me{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--rail-muted);opacity:1;padding:10px 8px 0;border-top:1px solid rgba(255,255,255,.1)}
.rail .me .av{flex:0 0 34px;height:34px;border-radius:50%;background:var(--rail-active);color:var(--rail-ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.rail .me b{display:block;color:var(--rail-ink);font-weight:600}
.rail .me a{color:var(--rail-muted)}

/* ---------- page ---------- */
main{padding-block:30px 56px;padding-inline:36px;max-width:1320px}
.head{margin-bottom:24px}
.head h2{font-size:30px;font-weight:700;letter-spacing:-.01em}
.head p{font-size:14px}
.panel{border-radius:var(--r-md);border-color:var(--line);padding:20px 22px;box-shadow:none}
.panel h3{font-size:19px}
.btn{border-radius:var(--r-sm);padding:8px 15px;border-color:var(--line);transition:background-color .12s,border-color .12s}
.btn:hover{border-color:color-mix(in srgb,var(--lamp) 50%,var(--line));background:color-mix(in srgb,var(--lamp) 4%,var(--surface))}
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover{background:color-mix(in srgb,var(--lamp) 88%,#000);border-color:transparent}
.btn.small{padding:4px 11px;border-radius:7px}
input,select{border-radius:var(--r-sm);padding:9px 12px;border-color:var(--line)}
input:focus,select:focus{outline:none;border-color:var(--lamp);box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp) 18%,transparent)}
label{font-size:12.5px;letter-spacing:0}
.msg{border-radius:var(--r-sm);padding:10px 12px}
.pill{padding:2px 9px}

/* headline figures: one ledger strip instead of a row of separate cards */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:24px}
.stat{border:0;border-radius:0;margin:0 -1px -1px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 18px 14px;background:transparent}
.stat .k{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--muted)}
.stat .v{font-size:32px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.stats:has(> .stat:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}
.stat.alert{background:color-mix(in srgb,var(--bad) 5%,transparent)}
.stat.note{background:color-mix(in srgb,var(--brass) 7%,transparent)}

/* tables */
.tablewrap{border-radius:var(--r-md)}
th{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;background:var(--sunk);padding:11px 14px}
td{padding:12px 14px}
tbody tr:hover td{background:color-mix(in srgb,var(--lamp) 3%,transparent)}
.empty{padding:44px 16px}

/* charts */
.chart{border-radius:var(--r-md);padding:18px 20px}
.chart h3{font-size:17px}
.hbar .bar{height:10px;border-radius:5px}

/* dialogs */
dialog{border-radius:16px;border-color:var(--line);box-shadow:0 24px 64px rgba(10,20,16,.28)}
dialog form{padding:24px;gap:14px}
dialog::backdrop{background:rgba(10,24,18,.5);backdrop-filter:blur(2px)}

/* ---------- cloth-bound covers (books without a cover image) ---------- */
.cover{border-radius:3px 6px 6px 3px;border:0;box-shadow:inset 3px 0 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12)}
.cover .ph,.bcard .cover .ph{align-self:stretch;justify-self:stretch;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:14% 12% 10%;color:rgba(255,255,255,.92);font-family:var(--f-display);text-align:left;max-height:none;background:var(--cloth,var(--c5))}
.cover .ph::before{content:"";position:absolute;left:0;right:0;top:9%;height:2px;background:color-mix(in srgb,var(--brass) 75%,transparent)}
.cover .ph::after{content:"";position:absolute;left:0;right:0;bottom:7%;height:1px;background:rgba(255,255,255,.25)}
.cover .ph .ct{font-size:7.5px;line-height:1.2;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;overflow-wrap:anywhere;-webkit-box-orient:vertical;margin-top:6%}
.cover .ph .ca{font-family:var(--f-body);font-size:7px;opacity:.75;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bcard .cover .ph .ct,.card .cover .ph .ct{font-size:16px;-webkit-line-clamp:6;overflow-wrap:normal}
.bcard .cover .ph{padding:16% 12% 10%}
.bcard .cover .ph .ca,.card .cover .ph .ca{font-size:11.5px}
.cover.c1{--cloth:var(--c1)} .cover.c2{--cloth:var(--c2)} .cover.c3{--cloth:var(--c3)} .cover.c4{--cloth:var(--c4)}
.cover.c5{--cloth:var(--c5)} .cover.c6{--cloth:var(--c6)} .cover.c7{--cloth:var(--c7)} .cover.c8{--cloth:var(--c8)}
.bcard{gap:8px;padding:6px;margin:-6px;border-radius:10px;transition:background-color .15s}
.bcard:hover{background:color-mix(in srgb,var(--lamp) 5%,transparent)}
.bcard .cover{box-shadow:inset 4px 0 0 rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.08),0 10px 20px -12px rgba(0,0,0,.35);transition:transform .15s}
.bcard:hover .cover{transform:translateY(-2px)}
.covers{gap:26px 22px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
@media (prefers-reduced-motion:reduce){.bcard .cover,.bcard{transition:none}.bcard:hover .cover{transform:none}}

/* desk */
.mcard{border-radius:var(--r-md);background:color-mix(in srgb,var(--lamp) 5%,var(--surface));border-color:color-mix(in srgb,var(--lamp) 18%,var(--line))}
.mini .row{border-radius:10px;padding:8px 10px}
.bookchip{border-radius:var(--r-md);background:var(--surface)}

/* ---------- sign-in: a shelf of the collection beside the form ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
.auth-art{background:var(--rail);color:var(--rail-ink);padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:hidden}
.auth-art .brand{grid-template-columns:48px 1fr}
.auth-art .brand .mark{width:48px;height:48px;border-radius:12px}
.auth-art .brand b{font-size:24px}
.auth-art h2{font-family:var(--f-display);font-size:clamp(30px,3.6vw,46px);line-height:1.12;margin:0;max-width:16ch;font-weight:700;text-wrap:balance}
html[lang="km"] .auth-art h2{font-family:var(--f-khmer);line-height:1.5}
.auth-art p{margin:12px 0 0;color:var(--rail-muted);max-width:42ch;font-size:15px}
.shelf{display:flex;align-items:flex-end;gap:5px;height:190px;padding:0 4px;border-bottom:10px solid #5a3d22;box-shadow:0 12px 0 -6px rgba(0,0,0,.25)}
.shelf i{display:block;border-radius:3px 3px 1px 1px;position:relative;box-shadow:inset -3px 0 0 rgba(0,0,0,.18),inset 2px 0 0 rgba(255,255,255,.08)}
.shelf i::before,.shelf i::after{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(216,173,85,.8)}
.shelf i::before{top:12%} .shelf i::after{bottom:10%}
.shelf i.lean{transform:rotate(-8deg);transform-origin:bottom left;margin-left:10px}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:var(--bg)}
.auth-form .card{border:0;background:transparent;box-shadow:none;width:min(380px,100%);padding:0;gap:14px}
.auth-form .card h1{font-size:30px}
.auth-form .seg{border-color:var(--line);background:var(--surface)}
.auth-form .seg button{color:var(--ink)}
.auth-form .seg button[aria-pressed="true"]{background:var(--lamp);color:var(--lamp-ink)}
.auth-form .btn.primary{width:100%;justify-content:center;padding:11px 16px;margin-top:4px}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .head h2{font-size:24px;overflow-wrap:anywhere}
  .stats:has(> .stat:nth-child(8)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:1fr}
  .auth-art{padding:28px 20px;gap:20px}
  .shelf{height:110px}
  main{padding-inline:16px;padding-block:22px 40px}
  .rail .me{display:none}
  nav button::before{display:none}
}

/* member dialog: student account row */
.pinrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;font-size:13.5px;background:var(--sunk)}