/* Myrrhos — shared polish layer (frontend polish pass).
 * Additive only: builds on each page's inline :root vars and class names.
 * No external deps, no palette changes, no layout changes.
 * Loaded after each page's inline <style> so it layers cleanly.
 */

/* ---- 1. Calm, consistent interaction feedback -------------------------- */
/* Buttons: smoother lift on hover, gentle press, clear loading/disabled. */
.btn,
button.card,
a.card {
  transition: transform .16s cubic-bezier(.2,.8,.2,1),
              opacity .16s ease,
              background .16s ease,
              box-shadow .16s ease;
  will-change: transform;
}
.btn:hover,
button.card:hover,
a.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,227,.10);
}
.btn:active,
button.card:active,
a.card:active {
  transform: translateY(0) scale(.985);
  box-shadow: none;
}
.btn[disabled],
.btn.is-loading {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn.is-loading {
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--bg);
  animation: mh-spin .7s linear infinite;
  opacity: .8;
}

/* Nav links: subtle lift + active state glow (no color shift). */
.nav a,
.bar .right a {
  transition: color .15s ease, transform .16s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
}
.nav a:hover,
.bar .right a:hover {
  transform: translateY(-1px);
}
.nav a.on {
  position: relative;
}
.nav a.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
  opacity: .85;
  box-shadow: 0 0 8px rgba(255,255,227,.35);
}

/* Cards: already elevated; add hover skin + press. */
.card {
  transition: transform .16s cubic-bezier(.2,.8,.2,1),
              box-shadow .16s ease,
              background .16s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,227,.10);
}
.card:active { transform: translateY(-1px) scale(.99); }

/* Filter chips: smooth toggle, clear active. */
.chip {
  transition: background .15s ease, color .15s ease,
              border-color .15s ease, transform .14s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: translateY(0) scale(.97); }
.chip.on {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Rows (tables / user list): quiet hover, no harsh flash. */
.row,
.ulist > * {
  transition: background .15s ease, transform .14s ease;
}
.row:hover,
tbody tr:hover {
  background: var(--surface-2, rgba(255,255,227,.08));
}
.ulist .card:hover,
.ulist > div:hover {
  background: var(--surface-2, rgba(255,255,227,.08));
}

/* Icons / back links / generic interactive. */
.back,
.bar .right a,
.menu .mi {
  transition: color .15s ease, background .15s ease, transform .14s ease;
}
.menu .mi:hover { transform: translateX(2px); }

/* ---- 2. Keyboard focus visibility (accessibility) ---------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--green, #5fbf7f) 65%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible,
.chip:focus-visible,
.nav a:focus-visible,
.card:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--green, #5fbf7f) 70%, transparent);
  outline-offset: 2px;
}

/* ---- 3. Subtle entrance (staggered, capped) ---------------------------- */
@keyframes mh-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Apply only to STATIC chrome + small grouped card grids — never to
   dynamically re-rendered list rows (those would replay on every filter).
   Capped via :nth-child so large grids stay instant. */
.bar,
.panel,
.empty,
.note,
.cards > .card {
  animation: mh-rise .42s cubic-bezier(.2,.8,.2,1) both;
}
.cards > .card:nth-child(1) { animation-delay: .02s; }
.cards > .card:nth-child(2) { animation-delay: .06s; }
.cards > .card:nth-child(3) { animation-delay: .10s; }
.cards > .card:nth-child(4) { animation-delay: .14s; }
.cards > .card:nth-child(5) { animation-delay: .18s; }
.cards > .card:nth-child(6) { animation-delay: .22s; }
.cards > .card:nth-child(7) { animation-delay: .26s; }
.cards > .card:nth-child(8) { animation-delay: .30s; }
.cards > .card:nth-child(n+9) { animation: none; }

/* ---- 4. Status & live indicators --------------------------------------- */
@keyframes mh-spin { to { transform: rotate(360deg); } }

/* Live status dot: gentle breathing pulse (calm, not flashing).
   NOTE: scoped to .live .d (the live indicator on the screening toolbar)
   ONLY — the bare .d class is also used for card description text on
   the admin console, so it must NOT get the pulsing ring. */
.live .d {
  position: relative;
}
.live .d::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: mh-pulse 2.4s ease-out infinite;
}
@keyframes mh-pulse {
  0%   { transform: scale(.6); opacity: .5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Badges: crisp pill with a faint inset ring; tiny settle on appear. */
.badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,227,.10);
  transition: opacity .2s ease;
}
.b-pri, .b-qualc, .b-watch, .b-rej {
  box-shadow: inset 0 0 0 1px rgba(255,255,227,.12);
}

/* ---- 5. Loading / skeleton shimmer (quiet, not noisy) ------------------ */
@keyframes mh-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    var(--inset, rgba(0,0,0,.30)) 0%,
    var(--hair, rgba(255,255,227,.10)) 50%,
    var(--inset, rgba(0,0,0,.30)) 100%);
  background-size: 400px 100%;
  animation: mh-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
}
.skeleton-row {
  height: 14px;
  margin: 10px 0;
  border-radius: 8px;
}

/* ---- 6. Refined states: empty / error / success ------------------------ */
.empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--fg-faint);
  line-height: 1.6;
}
.empty b { color: var(--fg); font-weight: 600; }
.ok-msg, .success {
  color: var(--green, #5fbf7f);
}
.err-msg, .error {
  color: var(--red, #e0584f);
}

/* ---- 8. Sync & Screen progress: alive but calm ------------------------- */
.bar-track {
  box-shadow: inset 0 0 0 1px rgba(255,255,227,.06);
}
.bar-track > i {
  position: relative;
  background: linear-gradient(90deg, var(--fg) 0%, #fff7cf 100%);
  box-shadow: 0 0 10px rgba(255,247,207,.35);
}
/* Indeterminate sheen while a sync is in progress (calm, not noisy). */
.bar-track.running > i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,227,.45) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: mh-sheen 1.6s ease-in-out infinite;
}
@keyframes mh-sheen {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ---- 7. Reduced motion: honor the OS preference ------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .live .d::after,
  .d::after { animation: none !important; }
  .shimmer { animation: none !important; }
}

/* ---- 8. Cascade-delete confirmation modal (owner w/ linked Viewers) ------
 * Additive only: reuses --surface/--fg/--danger palette tokens. Single-motion
 * easeOut rise; no competing animations. */
.cm-backdrop{
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
  padding: 20px;
  animation: cm-fade .2s ease-out;
}
/* The `hidden` attribute MUST win over display:flex, or the (empty) modal
 * would render on every page load and its backdrop would intercept clicks. */
.cm-backdrop[hidden]{ display: none; }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
.cm-card{
  width: min(460px, 100%);
  background: var(--surface, #15150f);
  border: 1px solid rgba(255,255,227,.12);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  color: var(--fg, #FFFFE3);
  animation: cm-rise .22s cubic-bezier(.16,1,.3,1);
}
@keyframes cm-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cm-card .cm-icon{ font-size: 30px; line-height: 1; margin-bottom: 8px; }
.cm-card h3{ margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cm-lead{ margin: 0 0 14px; color: var(--fg, #FFFFE3); font-size: 14px; line-height: 1.5; }
.cm-lead b{ color: #ff8a8a; font-weight: 700; }
.cm-list{ display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px;
  background: rgba(255,138,138,.07); border: 1px solid rgba(255,138,138,.22);
  border-radius: 10px; padding: 10px 12px; }
.cm-list .cm-item{ font-size: 13px; color: var(--fg, #FFFFE3); }
.cm-list .cm-item .cm-lbl{ color: var(--fg-dim, rgba(255,255,227,.6)); }
.cm-warn{ margin: 0 0 16px; font-size: 12.5px; color: var(--fg-dim, rgba(255,255,227,.6)); line-height: 1.45; }
.cm-confirm-label{ display: block; font-size: 13px; margin-bottom: 6px; color: var(--fg-dim, rgba(255,255,227,.7)); }
.cm-confirm-label b{ color: var(--fg, #FFFFE3); font-family: var(--mono, monospace); }
.cm-input{
  width: 100%; box-sizing: border-box; padding: 11px 12px; margin-bottom: 18px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,227,.18);
  border-radius: 10px; color: var(--fg, #FFFFE3); font-size: 14px; font-family: var(--mono, monospace);
}
.cm-input:focus{ outline: none; border-color: #ff8a8a; }
.cm-actions{ display: flex; gap: 10px; justify-content: flex-end; }
.btn.danger{ background: #c0392b; color: #fff; border: 1px solid #e05a4a; }
.btn.danger:hover:not([disabled]){ background: #d6452f; box-shadow: 0 6px 20px rgba(192,57,43,.45); }
.btn.ghost{ background: transparent; color: var(--fg-dim, rgba(255,255,227,.75)); border: 1px solid rgba(255,255,227,.18); }
.btn.ghost:hover{ background: rgba(255,255,227,.06); color: var(--fg, #FFFFE3); }
.btn.danger[disabled]{ opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }