/* ============================================================================
   ps-ui.css — PS Web UI shared components (L1)
   PS_UI_VERSION: 0.1.1 (2026-07-17)

   One canonical version of each component the estate previously drew by hand
   per-template. Requires ps-ui-core.css loaded first; styles resolve ONLY
   through core tokens so theme + skin swaps need no component changes.
   ========================================================================== */

/* ---- Buttons ---- */
.btn{border:0;border-radius:var(--r-btn);padding:.5rem 1.05rem;font:700 .86rem/1.3 var(--sans);
  cursor:pointer;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:.4rem}
.btn:hover{background:var(--accent-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn.ghost:hover{background:var(--surface2);color:var(--tx)}
.btn.danger{background:var(--err);color:var(--on-err)}
.btn.danger:hover{background:var(--err);filter:brightness(.92)}
.btn.tiny{padding:.28rem .7rem;font-size:.76rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}
/* dark-mode primary: accent is light, flip label to ink for contrast */
:root[data-theme="dark"] .btn{color:#10201B}
:root[data-theme="dark"] .btn:hover{color:#10201B}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn{color:#10201B}
  :root:not([data-theme="light"]) .btn:hover{color:#10201B}
}
:root[data-theme="dark"] .btn.ghost,:root[data-theme="dark"] .btn.danger{color:var(--tx)}
:root[data-theme="dark"] .btn.danger{color:var(--on-err)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.ghost{color:var(--tx)}
  :root:not([data-theme="light"]) .btn.danger{color:var(--on-err)}
}

/* ---- Pills (status) — one taxonomy ---- */
.pill{display:inline-block;font-size:.74rem;font-weight:700;border-radius:var(--r-chip);padding:.14rem .62rem;white-space:nowrap}
.pill.ok{color:var(--washtx);background:var(--wash-soft)}
.pill.warn{color:var(--amber);background:var(--amberbg)}
.pill.err{color:var(--err);background:var(--errbg)}
.pill.info{color:var(--info);background:var(--infobg)}
.pill.mut{color:var(--tx2);background:var(--surface2);border:1px solid var(--line)}

/* ---- Filter chips (interactive) ---- */
.fchip{display:inline-flex;align-items:center;gap:.4rem;font:600 .8rem/1.3 var(--sans);
  border:1px solid var(--line2);border-radius:var(--r-chip);padding:.28rem .8rem;
  background:var(--surface);color:var(--tx2);cursor:pointer}
.fchip:hover{border-color:var(--accent);color:var(--tx)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .fchip.on{color:#10201B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fchip.on{color:#10201B}}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.1rem 1.25rem;box-shadow:var(--shadow1)}
.card.link{display:block;color:inherit;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.card.link:hover{transform:translateY(-2px);box-shadow:var(--shadow2);text-decoration:none}

/* ---- Tabs + chrome bar ---- */
.chrome{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.6rem 0;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.tab{border:0;background:none;font:600 .88rem/1.3 var(--sans);color:var(--tx2);
  padding:.5rem .95rem;border-radius:9px 9px 0 0;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;display:inline-block}
.tab:hover{background:var(--surface2);text-decoration:none;color:var(--tx)}
.tab.on{color:var(--accent-deep);border-bottom-color:var(--accent);background:var(--surface)}

/* ---- Tables ---- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
table.tbl{border-collapse:collapse;width:100%;font-size:.88rem}
table.tbl th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);
  text-align:left;padding:.55rem .85rem;border-bottom:1px solid var(--line2);background:var(--surface2)}
table.tbl td{padding:.5rem .85rem;border-bottom:1px solid var(--line)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl th.n,table.tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
table.tbl.sticky thead th{position:sticky;top:0;z-index:2}
table.tbl tr.subtotal td{background:color-mix(in srgb,var(--wash) 22%,var(--surface));font-weight:700;border-top:1px solid var(--line2)}

/* ---- Banners ---- */
.banner{display:flex;gap:.6rem;align-items:flex-start;border-radius:11px;padding:.65rem .9rem;
  font-size:.86rem;border:1px solid}
.banner.ok{background:var(--okbg);border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--washtx)}
.banner.warn{background:var(--amberbg);border-color:color-mix(in srgb,var(--amber) 40%,transparent);color:var(--amber)}
.banner.err{background:var(--errbg);border-color:color-mix(in srgb,var(--err) 40%,transparent);color:var(--err)}
.banner.info{background:var(--infobg);border-color:color-mix(in srgb,var(--info) 40%,transparent);color:var(--info)}

/* ---- Toasts (bottom-right stack) ---- */
.toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:60;max-width:min(380px,90vw)}
.toast{background:var(--surface);border:1px solid var(--line2);border-left:4px solid var(--accent);
  border-radius:10px;padding:.6rem .9rem;font-size:.86rem;box-shadow:var(--shadow2)}
.toast.err{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--amber)}

/* ---- Freshness cluster ---- */
.fresh{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--tx2)}
.fdot{width:8px;height:8px;border-radius:50%;background:var(--tx3);flex:none}
.fdot.ok{background:var(--ok)}
.fdot.stale{background:var(--amber)}
.fdot.err{background:var(--err)}
@keyframes ps-blink{0%,100%{opacity:.25}50%{opacity:1}}
.fdots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--tx3);margin-right:3px;animation:ps-blink 1.2s infinite}
.fdots span:nth-child(2){animation-delay:.2s}
.fdots span:nth-child(3){animation-delay:.4s}

/* ---- Modal — the ONE modal system ----
   Markup: <div class="ovl"><div class="modal" role="dialog" aria-modal="true">…</div></div> */
.ovl{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;
  padding:1rem;z-index:50}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow2);
  width:min(560px,94vw);max-height:88vh;overflow:auto;padding:1.1rem 1.3rem}
.modal.wide{width:min(75vw,1440px)}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.mtitle{font-family:var(--serif);font-weight:700;font-size:1.1rem;margin:0}
.x{border:0;background:none;font-size:1.1rem;line-height:1;color:var(--tx3);cursor:pointer;padding:.2rem .4rem;border-radius:6px}
.x:hover{background:var(--surface2);color:var(--tx)}
@keyframes ps-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.modal{animation:ps-pop .14s ease}

/* ---- Slide-in panel (right drill) ---- */
.panel{position:fixed;top:0;right:0;bottom:0;width:min(620px,94vw);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:var(--shadow2);z-index:50;overflow:auto;padding:1.1rem 1.3rem}
@keyframes ps-slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.panel{animation:ps-slidein .16s ease}

/* ---- Form controls ---- */
input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="number"],
input[type="search"],select,textarea{
  font:400 .9rem/1.4 var(--sans);color:var(--tx);background:var(--bg);
  border:1px solid var(--line2);border-radius:var(--r-ctl);padding:.45rem .65rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
label{font-size:.8rem;font-weight:600;color:var(--tx2)}

/* ---- Empty state ---- */
.empty{border:1px dashed var(--line2);border-radius:var(--r-card);padding:1.6rem 1.2rem;
  text-align:center;color:var(--tx3);font-size:.9rem;background:var(--surface2)}

/* ---- Monogram / logo tile ----
   Fill defaults to wash; per-client accent overrides via inline --mono-bg. */
.mono{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--mono-bg,var(--wash-soft));color:var(--mono-tx,var(--washtx));
  font-weight:800;font-size:.82rem;flex:none}

/* ---- User chip / identity ---- */
.userchip{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--tx2);
  border:1px solid var(--line);border-radius:var(--r-chip);padding:.25rem .75rem;background:var(--surface)}