/* Mythos Studio — shell: boot splash, login / first run, app frame, sidebar, command palette, shortcuts.
   Classes are prefixed sh-. Tokens come from base.css. */

/* ---------- boot splash (also in index.html before any JS runs) ---------- */
.sh-boot {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(ellipse 70% 55% at 50% 38%, #0b2234 0%, #04101c 55%, var(--abyss) 100%);
  animation: fade .4s ease both;
}
.sh-boot-mark { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sh-boot-mark b { font: 500 30px/1 var(--display); letter-spacing: .34em; margin-right: -.34em; color: var(--pearl); }
.sh-boot-mark span { font: 500 10px/1 var(--mono); letter-spacing: .7em; margin-right: -.7em; color: var(--bronze); }
.sh-boot-line { width: 180px; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze), transparent); background-size: 200% 100%; animation: sh-sweep 1.8s ease-in-out infinite; }
.sh-boot-text { font: italic 16px/1 var(--serif); color: var(--muted); }
@keyframes sh-sweep { 0% { background-position: 120% 0; opacity: .3; } 50% { opacity: 1; } 100% { background-position: -20% 0; opacity: .3; } }

/* ---------- brand ---------- */
.sh-sigil { flex: none; overflow: visible; }
.sh-sigil-ring { fill: none; stroke: var(--bronze); stroke-width: 1.1; }
.sh-sigil-ring2 { fill: rgba(6, 20, 36, .7); stroke: rgba(159, 211, 224, .22); stroke-width: .6; }
.sh-sigil-moon { fill: var(--bronze-hi); filter: drop-shadow(0 0 2px rgba(240, 220, 174, .6)); }
.sh-sigil-wave { fill: none; stroke: var(--shaft); stroke-width: 1.3; stroke-linecap: round; }
.sh-sigil-wave.dim { opacity: .45; }

.sh-wordmark { display: inline-flex; flex-direction: column; gap: 5px; line-height: 1; white-space: nowrap; }
.sh-wordmark b { font: 600 16.5px/1 var(--display); letter-spacing: .3em; color: var(--pearl); }
.sh-wordmark span { font: 500 8.5px/1 var(--mono); letter-spacing: .62em; color: var(--bronze); }
.sh-wordmark.big { align-items: center; gap: 10px; }
.sh-wordmark.big b { font-size: 38px; font-weight: 500; letter-spacing: .32em; margin-right: -.32em; text-shadow: 0 2px 30px rgba(159, 211, 224, .25); }
.sh-wordmark.big span { font-size: 11px; letter-spacing: .95em; margin-right: -.95em; }

/* ---------- ambient abyss (login, empty hero) ---------- */
.sh-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sh-abyss {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(159, 211, 224, .18), transparent 70%),
    radial-gradient(ellipse 70% 55% at 85% 105%, rgba(116, 173, 155, .13), transparent 62%),
    radial-gradient(ellipse 60% 50% at 8% 92%, rgba(20, 54, 80, .7), transparent 70%),
    linear-gradient(180deg, #0a1d2e 0%, #051220 46%, #020509 100%);
  animation: sh-breathe 20s ease-in-out infinite alternate;
}
.sh-shafts i {
  position: absolute; top: -25%; width: 16%; height: 150%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(191, 243, 255, .16), rgba(159, 211, 224, .05) 45%, transparent 78%);
  filter: blur(22px); mix-blend-mode: screen; animation: sh-shaft 24s ease-in-out infinite alternate;
}
.sh-shafts i:nth-child(1) { left: 14%; --r: 16deg; animation-duration: 21s; }
.sh-shafts i:nth-child(2) { left: 38%; width: 9%; --r: 9deg; animation-duration: 27s; animation-delay: -6s; }
.sh-shafts i:nth-child(3) { left: 58%; width: 20%; --r: -6deg; animation-duration: 31s; animation-delay: -12s; opacity: .7; }
.sh-shafts i:nth-child(4) { left: 80%; width: 7%; --r: -14deg; animation-duration: 23s; animation-delay: -3s; }
@keyframes sh-shaft {
  from { transform: rotate(var(--r, 10deg)) translateX(-6%); opacity: .35; }
  to { transform: rotate(calc(var(--r, 10deg) + 5deg)) translateX(8%); opacity: 1; }
}
@keyframes sh-breathe { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5%); } }
.sh-motes {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(191, 243, 255, .8), transparent 70%),
    radial-gradient(1.2px 1.2px at 34% 68%, rgba(191, 243, 255, .6), transparent 70%),
    radial-gradient(1px 1px at 58% 38%, rgba(240, 220, 174, .7), transparent 70%),
    radial-gradient(1.4px 1.4px at 76% 82%, rgba(191, 243, 255, .5), transparent 70%),
    radial-gradient(1px 1px at 88% 14%, rgba(191, 243, 255, .7), transparent 70%),
    radial-gradient(1.2px 1.2px at 46% 92%, rgba(240, 220, 174, .5), transparent 70%);
  background-size: 640px 640px; animation: sh-motes 80s linear infinite;
}
@keyframes sh-motes { to { background-position: 40px -640px; } }
.sh-grain, .hm-hero-grain {
  position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sh-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 45%, rgba(0, 0, 0, .72)); }

/* ---------- login / first run ---------- */
.sh-auth { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 16px 84px; overflow: hidden; background: var(--abyss); }
.sh-auth-card {
  position: relative; z-index: 1; width: min(430px, 100%); padding: 38px 34px 30px;
  background: rgba(6, 16, 27, .58); border-color: rgba(159, 211, 224, .17);
  box-shadow: 0 50px 140px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .05);
  /* Quick, transform + opacity only (no filter: it fights the card's backdrop blur and made the card late). */
  animation: sh-arrive .42s var(--ease) both;
}
.sh-auth-card::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent); opacity: .8;
  animation: sh-glint 1.6s .2s ease-out both; /* atmosphere after the card is already readable */
}
.sh-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.sh-auth-brand .sh-sigil { filter: drop-shadow(0 0 18px rgba(159, 211, 224, .25)); }
.sh-auth-tag { margin: 16px 0 26px; text-align: center; font: italic 19px/1.35 var(--serif); color: #c3d2d3; }
.sh-auth-lead { margin: 18px 0 12px; text-align: center; font: italic 20px/1.3 var(--serif); color: var(--pearl); }
.sh-auth-card > .msg, .sh-auth-card > .muted { margin-bottom: 14px; }
.sh-auth-card > .btn { width: 100%; }
.sh-auth-intro { margin: -8px 0 20px; padding: 12px 14px; border-radius: var(--r); border: 1px solid rgba(201, 160, 99, .25); background: rgba(201, 160, 99, .06); }
.sh-auth-intro .eyebrow { color: var(--bronze); margin-bottom: 4px; }
.sh-auth-intro p { color: var(--muted); font-size: 13px; }
.sh-auth-form { gap: 14px; }
.sh-auth-form .input { min-height: 42px; background: rgba(2, 5, 9, .55); }
.sh-auth-go { width: 100%; margin-top: 6px; letter-spacing: .02em; }
.sh-auth-go .icon { transition: transform var(--t); }
.sh-auth-go:hover:not(:disabled) .icon { transform: translateX(3px); }
.sh-auth-go .spinner { width: 16px; height: 16px; border-color: rgba(26, 18, 6, .22); border-top-color: #1a1206; }
.sh-auth-foot {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
  font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--faint); padding: 0 16px;
}
.sh-auth-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--bronze); opacity: .7; }
.sh-pw { position: relative; }
.sh-pw .input { padding-right: 42px; }
.sh-reveal { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; transition: color var(--t), background var(--t); }
.sh-reveal:hover { color: var(--ink); background: rgba(159, 211, 224, .08); }
.sh-reveal[aria-pressed="true"] { color: var(--bronze-hi); }
.sh-caps { display: flex; align-items: center; gap: 6px; color: var(--warn); font-size: 12px; margin-top: -4px; }
.sh-shake { animation: sh-shake .42s var(--ease); }
@keyframes sh-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sh-arrive { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes sh-glint { from { opacity: 0; transform: scaleX(.2); } to { opacity: .8; transform: none; } }
.sh-auth-brand .sh-sigil-moon { animation: sh-moonrise 1.4s .1s var(--ease) both; }
@keyframes sh-moonrise { from { opacity: .35; transform: translateY(1.5px); } to { opacity: 1; transform: none; } }

/* ---------- app frame ---------- */
.sh-app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
.sh-main { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; outline: none; }
.sh-main:focus, .sh-main:focus-visible { outline: none; }
.sh-scrim { display: none; }

/* ---------- sidebar ---------- */
.sh-side {
  --side-w: 252px;
  position: relative; z-index: 20; flex: none; width: var(--side-w); height: 100%;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px;
  /* On a short window the whole sidebar scrolls (the project list keeps at least ~3 rows); tooltips are fixed-position, so nothing clips them. */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
  background:
    radial-gradient(ellipse 120% 40% at 30% 0%, rgba(159, 211, 224, .07), transparent 70%),
    linear-gradient(180deg, rgba(9, 24, 40, .96), rgba(3, 9, 16, .98));
  border-right: 1px solid var(--line);
  transition: width .26s var(--ease), padding .26s var(--ease);
}
.sh-side.rail { --side-w: 68px; padding-inline: 10px; }

.sh-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 12px 4px; }
.sh-brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--pearl); border-radius: 10px; }
.sh-brand:hover { color: var(--pearl); }
.sh-brand:hover .sh-sigil-moon { fill: #fff3d6; }
.sh-collapse { color: var(--faint); }

.sh-mode {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; padding: 6px 10px;
  border-radius: 99px; border: 1px solid rgba(232, 194, 106, .26); background: rgba(232, 194, 106, .06);
  color: var(--warn); font: 500 10.5px/1.2 var(--mono); letter-spacing: .05em; cursor: help; white-space: nowrap; overflow: visible;
}
.sh-mode-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--warn); box-shadow: 0 0 0 3px rgba(232, 194, 106, .14); animation: sh-pulse 2.6s ease-in-out infinite; }
.sh-mode-text { overflow: hidden; text-overflow: ellipsis; }
@keyframes sh-pulse { 50% { box-shadow: 0 0 0 6px rgba(232, 194, 106, 0); opacity: .7; } }

.sh-search {
  position: relative; display: flex; align-items: center; gap: 9px; height: 36px; margin: 2px 0 10px; padding: 0 7px 0 11px;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(2, 5, 9, .5); color: var(--muted); cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.sh-search:hover { border-color: var(--line-2); color: var(--ink); background: rgba(15, 33, 53, .6); }
.sh-search-text { flex: 1; text-align: left; font-size: 13px; }
.sh-search-kbd { display: flex; gap: 3px; }
.sh-search-kbd kbd { height: 19px; min-width: 19px; font-size: 10px; }

.sh-nav, .sh-sub { display: flex; flex-direction: column; gap: 2px; }
.sh-link {
  position: relative; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 10px;
  color: var(--muted); font-weight: 500; white-space: nowrap; transition: background var(--t), color var(--t);
}
.sh-link:hover { color: var(--ink); background: rgba(159, 211, 224, .06); }
.sh-link-ico { display: grid; place-items: center; width: 20px; flex: none; transition: color var(--t); }
.sh-link-text { flex: 1; }
.sh-link.active { color: var(--pearl); background: linear-gradient(90deg, rgba(201, 160, 99, .17), rgba(201, 160, 99, .03)); box-shadow: inset 0 0 0 1px rgba(201, 160, 99, .16); }
.sh-link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px; border-radius: 0 3px 3px 0; background: var(--bronze); box-shadow: 0 0 10px rgba(201, 160, 99, .7); }
.sh-link.active .sh-link-ico { color: var(--bronze-hi); }
.sh-link.sm { height: 31px; font-size: 12.5px; gap: 10px; }
.sh-link.sm .sh-link-ico { width: 18px; }
.sh-count { font: 500 10.5px/1 var(--mono); color: var(--faint); padding: 4px 7px; border-radius: 99px; background: rgba(159, 211, 224, .06); }
.sh-count:empty { display: none; }

.sh-side-scroll { flex: 1 1 auto; min-height: 112px; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.sh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 16px 6px 6px 10px; }
.sh-section-head .eyebrow { color: var(--faint); font-size: 9.5px; }
.sh-none { padding: 4px 10px; color: var(--faint); font-size: 12px; }
.sh-project + .sh-project { margin-top: 2px; }
.sh-project.open > .sh-project-link { color: var(--pearl); }
.sh-project.open > .sh-project-link.active { background: rgba(159, 211, 224, .05); box-shadow: none; }
.sh-project.open > .sh-project-link.active::before { display: none; }
.sh-sub { margin: 2px 0 8px 19px; padding-left: 9px; border-left: 1px solid var(--line); }
.sh-sub-title { padding: 10px 10px 4px; font-size: 9.5px; color: var(--faint); }
.sh-episodes:empty { display: none; }
.sh-ep-pct { font: 10.5px/1 var(--mono); color: var(--faint); }
.sh-link.active .sh-ep-pct { color: var(--bronze); }
.sh-ep-bar { height: 2px; margin: -2px 10px 5px 38px; border-radius: 2px; background: rgba(159, 211, 224, .08); overflow: hidden; }
.sh-ep-bar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }

.sh-side-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.sh-user { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 2px 0 4px; }
.sh-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 600 11px/1 var(--mono); letter-spacing: .04em; color: #1a1206;
  background: linear-gradient(135deg, var(--bronze-hi), var(--bronze)); box-shadow: 0 0 0 2px rgba(201, 160, 99, .18), 0 4px 14px rgba(201, 160, 99, .18);
}
.sh-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.sh-user-text b { font-size: 13px; font-weight: 600; }
.sh-user-text small { font: 500 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* rail (collapsed) */
.sh-side.rail .sh-side-head { flex-direction: column; gap: 10px; padding: 2px 0 12px; }
.sh-side.rail .sh-brand { justify-content: center; }
.sh-side.rail .sh-wordmark,
.sh-side.rail .sh-search-kbd,
.sh-side.rail .sh-count,
.sh-side.rail .sh-episodes,
.sh-side.rail .sh-none { display: none; }
/* Visually hidden, still read out: links, Search, the mode pill and the user box keep their names in the rail. */
.sh-side.rail .sh-mode-text,
.sh-side.rail .sh-search-text,
.sh-side.rail .sh-link-text,
.sh-side.rail .sh-section-head .eyebrow,
.sh-side.rail .sh-user-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sh-side.rail .sh-mode { justify-content: center; padding: 9px 0; margin-inline: 4px; }
.sh-side.rail .sh-search { justify-content: center; padding: 0; }
.sh-side.rail .sh-link { justify-content: center; padding: 0; }
.sh-side.rail .sh-section-head { justify-content: center; padding: 14px 0 6px; }
.sh-side.rail .sh-sub { margin: 2px 0 8px; padding: 4px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.sh-side.rail .sh-side-scroll { margin: 0 -4px; padding: 0 4px; }
.sh-side.rail .sh-user { flex-direction: column; gap: 6px; padding: 4px 0 0; }

/* Sidebar tooltips: drawn by main.js as one fixed element (.sh-tip) so the scroll areas can't clip them
   and nested labels (user box + Log out) never show two at once. The generic CSS tooltip is off in here. */
.sh-side [data-tip]:hover::after, .sh-side [data-tip]:focus-visible::after { content: none; display: none; }
.sh-tip {
  position: fixed; z-index: 95; max-width: min(260px, calc(100vw - 16px)); padding: 5px 9px; border-radius: 7px;
  background: #11253a; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); pointer-events: none;
  color: var(--pearl); font: 500 11.5px/1.35 var(--sans); white-space: nowrap; animation: fade .12s ease both;
}
.sh-tip[hidden] { display: none; }
.sh-tip.wide { width: max-content; white-space: normal; }
.sh-tip small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }

/* phones: the rail is always on; the expand button slides the full sidebar over the page */
@media (max-width: 760px) {
  .sh-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; }
  .sh-side.rail { --side-w: 60px; padding-inline: 7px; }
  .sh-side.mobile-open { --side-w: min(288px, 86vw); box-shadow: 30px 0 80px rgba(0, 0, 0, .6); }
  .sh-main { margin-left: 60px; }
  .sh-scrim.on { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(1, 3, 6, .6); backdrop-filter: blur(2px); animation: fade .15s ease both; }
}

/* ---------- command palette ---------- */
.overlay.sh-pal-overlay { place-items: start center; padding-top: min(13vh, 120px); }
.modal.sh-pal-modal {
  max-width: 700px; overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 28, 45, .96), rgba(5, 13, 22, .97));
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 160, 99, .08), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: sh-pal-in .2s var(--ease) both;
}
@keyframes sh-pal-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.modal.sh-pal-modal > .modal-head { display: none; }
.modal.sh-pal-modal > .modal-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.sh-pal { display: flex; flex-direction: column; min-height: 0; max-height: min(640px, calc(100vh - 180px)); }
.sh-pal-bar { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--bronze); }
.sh-pal-input { flex: 1; min-width: 0; height: 30px; border: 0; background: none; color: var(--ink); font-size: 16.5px; }
.sh-pal-input::placeholder { color: var(--faint); }
.sh-pal-input:focus, .sh-pal-input:focus-visible { outline: none; }
.sh-pal-kbd { width: auto; padding: 0 7px; }
.sh-pal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; overscroll-behavior: contain; }
.sh-pal-group { padding: 12px 10px 6px; color: var(--faint); font-size: 9.5px; }
.sh-pal-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 11px; cursor: pointer; transition: background .1s; }
.sh-pal-row.active { background: rgba(159, 211, 224, .08); box-shadow: inset 0 0 0 1px rgba(159, 211, 224, .13); }
.sh-pal-thumb { width: 54px; height: 38px; flex: none; border-radius: 7px; border: 1px solid var(--line); }
.sh-pal-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(159, 211, 224, .06); color: var(--muted); border: 1px solid var(--line); }
.sh-pal-row.active .sh-pal-ico { color: var(--bronze-hi); border-color: rgba(201, 160, 99, .35); background: var(--bronze-dim); }
.sh-pal-code { width: 54px; flex: none; display: flex; align-items: center; gap: 7px; }
.sh-pal-code b { font: 500 12.5px var(--mono); color: var(--pearl); }
.sh-pal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-pal-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ink); }
.sh-pal-label .tagpill { flex: none; max-width: 48%; cursor: inherit; }
.sh-pal-label mark { background: none; color: var(--bronze-hi); text-decoration: underline; text-decoration-color: rgba(201, 160, 99, .55); text-underline-offset: 3px; }
.sh-pal-sub { font-size: 12px; color: var(--faint); }
.sh-pal-hint { flex: none; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity .1s; }
.sh-pal-row.active .sh-pal-hint { opacity: 1; }
.sh-pal-acts { display: flex; gap: 4px; flex: none; opacity: 0; transition: opacity .1s; }
.sh-pal-row.active .sh-pal-acts, .sh-pal-row:hover .sh-pal-acts { opacity: 1; }
.sh-pal-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 42px 20px; color: var(--muted); text-align: center; }
.sh-pal-empty .icon { color: var(--faint); }
.sh-pal-empty small { color: var(--faint); }
.sh-pal-note { display: flex; align-items: center; gap: 10px; padding: 12px 10px; color: var(--faint); font-size: 12px; }
.sh-pal-note .spinner { width: 14px; height: 14px; }
.sh-pal-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); background: rgba(2, 5, 9, .35); font-size: 11.5px; color: var(--faint); flex-wrap: wrap; }
.sh-pal-foot kbd { height: 18px; min-width: 18px; font-size: 10px; margin-right: 2px; }
.sh-pal-foot-el { display: none; color: var(--verdigris); }
.sh-pal-foot.el .sh-pal-foot-el { display: inline; }
@media (max-width: 600px) {
  .overlay.sh-pal-overlay { padding: 10px; }
  .sh-pal-foot { display: none; }
  .sh-pal-acts { opacity: 1; }
  .sh-pal-acts .btn.ghost { display: none; }
}

/* ---------- shortcuts sheet ---------- */
.sh-shortcuts { display: flex; flex-direction: column; gap: 18px; }
.sh-shortcuts .eyebrow { color: var(--bronze); margin-bottom: 6px; }
.sh-shortcuts dl { margin: 0; display: flex; flex-direction: column; }
.sh-shortcut { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(159, 211, 224, .07); }
.sh-shortcut dt { width: 92px; flex: none; }
.sh-shortcut dd { margin: 0; color: var(--muted); }
.sh-keys { display: inline-flex; gap: 4px; }