/* Symphora · Projects shared interaction kit.
   Drawer, popover/menu, sortable headers, small affordances.
   Pair with tokens.css + components.css. Vanilla — no framework. */

/* ====== Drawer (right slide-over) ======================================== */
.pu-scrim {
  position: fixed; inset: 0;
  background: oklch(0.18 0.01 260 / 0.42);
  z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease, ease);
}
.pu-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.pu-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 580px; max-width: 100vw;
  background: var(--paper);
  box-shadow: -8px 0 32px oklch(0.18 0.01 260 / 0.16);
  z-index: 61; overflow-y: auto;
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
}
.pu-drawer[data-open="true"] { transform: translateX(0); }
.pu-drawer--wide { width: 720px; }

.pu-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.pu-drawer__close {
  width: 30px; height: 30px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); flex-shrink: 0;
}
.pu-drawer__close:hover { background: var(--paper-2); color: var(--ink); }
.pu-drawer__body { flex: 1; }
.pu-sec { padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.pu-sec:last-child { border-bottom: 0; }
.pu-sec h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  margin: 0 0 12px;
}
.pu-drawer__foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper); z-index: 2;
}

/* Generic key/value line inside drawers */
.pu-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.pu-line__name { flex: 1; color: var(--ink-2); }
.pu-line__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.pu-line--total { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 10px; }
.pu-line--total .pu-line__name { color: var(--ink); font-weight: 600; }
.pu-line--total .pu-line__val { font-weight: 700; }
.pu-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; background: var(--ink-3); }

/* Mini metric tiles row inside a drawer */
.pu-tiles { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.pu-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.pu-tiles--2 { grid-template-columns: repeat(2, 1fr); }
.pu-tile { padding: 13px 15px; border-right: 1px solid var(--line-2); }
.pu-tile:last-child { border-right: 0; }
.pu-tile__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.pu-tile__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 5px; }
.pu-tile__s { font-size: 10px; color: var(--ink-3); margin-top: 3px; }

/* Recommendation card */
.pu-rec { padding: 11px 13px; border-radius: var(--r-md); font-size: 12px; line-height: 1.5; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; }
.pu-rec--bad { background: var(--bad-soft); color: var(--bad-ink); }
.pu-rec--warn { background: var(--warn-soft); color: var(--warn-ink); }
.pu-rec--good { background: var(--good-soft); color: var(--good-ink); }
.pu-rec--accent { background: var(--accent-soft); color: var(--accent-ink); }
.pu-rec__ico { flex-shrink: 0; margin-top: 1px; }
.pu-rec.is-applied { opacity: 0.5; text-decoration: line-through; }

/* ====== Popover / menu =================================================== */
.pu-pop {
  position: fixed; z-index: 70;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.pu-pop__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2); text-align: left;
}
.pu-pop__item:hover { background: var(--paper-2); color: var(--ink); }
.pu-pop__item[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.pu-pop__item[aria-selected="true"]::after { content: '✓'; margin-left: auto; color: var(--accent-ink); }
.pu-pop__sep { height: 1px; background: var(--line-2); margin: 5px 4px; }
.pu-pop__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px 4px; }

/* ====== Sortable table headers ========================================== */
.pu-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.pu-sort::after { content: '↕'; margin-left: 5px; opacity: 0.3; font-size: 0.9em; }
.pu-sort[data-dir="asc"]::after { content: '↑'; opacity: 1; color: var(--ink); }
.pu-sort[data-dir="desc"]::after { content: '↓'; opacity: 1; color: var(--ink); }

/* ====== Toast (extend components.css .toast with variants) ============== */
.toast--good { background: var(--good-ink); }
.toast--warn { background: var(--warn-ink); }
.toast--accent { background: var(--accent); color: var(--on-accent, #fff); }
.toast__act { margin-left: 8px; color: inherit; text-decoration: underline; font-weight: 600; opacity: 0.85; }
.toast__act:hover { opacity: 1; }

/* ====== Small shared utilities ========================================== */
.pu-empty { padding: 40px 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
[hidden] { display: none !important; }

/* ====== Prototype state previewer (review-only) ======================== */
.proto-states {
  position: fixed; left: 14px; bottom: 14px; z-index: 50;
  display: flex; align-items: center; gap: 3px;
  padding: 4px 5px 4px 4px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-full); box-shadow: var(--shadow-md);
  opacity: 0.55; transition: opacity .15s var(--ease, ease);
}
.proto-states:hover { opacity: 1; }
.proto-states__tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.07em; color: var(--ink-4); padding: 0 7px 0 6px; white-space: nowrap; }
.proto-states button { padding: 4px 10px; border-radius: var(--r-full); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.proto-states button:hover { background: var(--paper-2); color: var(--ink); }
.proto-states button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 500; }
@media (max-width: 640px) { .proto-states { display: none; } }
.pu-flash { animation: pu-flash .9s var(--ease, ease); }
@keyframes pu-flash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* ====== Compensation gate ============================================== */
.comp-masked {
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.comp-masked::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--lock-svg) center / contain no-repeat;
  mask: var(--lock-svg) center / contain no-repeat;
  opacity: 0.7;
}
:root { --lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.pu-viewas { color: var(--ink-2); }
.pu-viewas strong { color: var(--ink); font-weight: 600; }
.comp-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }