/* Shared CAT EAR material, controls, navigation and preferences. */
:root {
  --bg: #090a0d;
  --panel: #121318;
  --text: #f5f0e8;
  --muted: #a6a4a3;
  --signal: #e7c38c;
  --line: #e8dfd019;
  --surface: linear-gradient(145deg, #ffffff07, #ffffff01), #121318;
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
[hidden] {
  display: none !important;
}
html {
  scrollbar-gutter: stable;
}
html:has(dialog[open]) {
  overflow: hidden;
}
body {
  background: var(--bg);
}
button,
input,
select,
textarea {
  border-radius: 10px;
}
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
}
.brand-mark {
  border-radius: 10px 3px 10px 3px;
  border-color: #d7ae6e66;
  background: linear-gradient(135deg, #b4803730, #301f141c);
  color: #edd7b0;
}
.brand-meta {
  letter-spacing: 0.16em;
}
:where(.studio-form-actions, .ai-actions, .friend-auth-form, .ai-request-form)
  button[type="submit"],
.contact-pill,
.portal-topbar .portal-contact,
.project-links a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    translate 0.25s;
}
:where(.studio-form-actions, .ai-actions, .friend-auth-form, .ai-request-form)
  button[type="submit"]::after,
.contact-pill::after,
.project-links a::after {
  content: "";
  position: absolute;
  inset: -70% -50%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    #ffffff40 50%,
    transparent 60%
  );
  transform: translateX(-80%);
}
:where(.studio-form-actions, .ai-actions, .friend-auth-form, .ai-request-form)
  button[type="submit"]:not(:disabled):hover::after,
.contact-pill:hover::after,
.project-links a:hover::after {
  animation: cta-sweep 0.75s var(--ease);
}
:where(.studio-form-actions, .ai-actions, .friend-auth-form, .ai-request-form)
  button[type="submit"]:not(:disabled):active,
.contact-pill:active,
.project-links a:active {
  translate: 0 2px;
}
@keyframes cta-sweep {
  to {
    transform: translateX(80%);
  }
}
.site-frame :is(input, select, textarea) {
  border: 1px solid #c9c3b229;
  border-radius: 10px;
  background: #080a0e99;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.site-frame :is(input, select, textarea):focus {
  border-color: #e7c38c99;
  background: #121318;
  box-shadow: 0 0 0 3px #e7c38c10;
  outline: 0;
}
.site-frame :is(input, textarea)::placeholder {
  color: #77787f;
}
.site-frame button {
  min-height: 36px;
}
.site-frame button:disabled {
  opacity: 0.45;
}
.command-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #ffffff04;
  color: #c3b6a1;
  font-size: 11px;
  white-space: nowrap;
}
.command-trigger kbd {
  font: 9px var(--font-mono);
  color: #9d9280;
}
.command-trigger:hover {
  border-color: #c8a97266;
  background: #ffffff08;
}
.blur-glyph {
  display: inline-block !important;
  white-space: pre;
  color: inherit !important;
}
.portal-intro h1 > .blur-glyph {
  color: var(--text) !important;
}
.module-frame .contact-pill {
  min-height: 37px;
  padding: 8px 15px;
  border-color: #bd9b6344;
  border-radius: 24px;
  font-size: 10px;
}
.explorer-dock {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  align-items: end;
  gap: 7px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid #dac6a533;
  border-radius: 22px;
  background: linear-gradient(135deg, #26242aa8, #101116db);
  box-shadow:
    0 8px 30px #0007,
    inset 0 1px #ffffff12;
  backdrop-filter: blur(24px);
}
.dock-item {
  --dock-scale: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  width: calc(42px * var(--dock-scale));
  height: calc(42px * var(--dock-scale));
  border: 1px solid #ffffff0d;
  border-radius: 13px;
  background: #ffffff04;
  color: #b7b2ab;
  transition:
    width 0.16s ease,
    height 0.16s ease,
    background 0.2s,
    color 0.2s;
}
.dock-item svg {
  width: 20px;
  height: 20px;
}
.dock-item:hover,
.dock-item:focus-visible,
.dock-item[aria-current] {
  background: #e7c38c17;
  color: #e7c38c;
  border-color: #e7c38c40;
}
.dock-item[aria-current]::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--signal);
}
.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  translate: -50% 6px;
  padding: 6px 11px;
  background: #1a191e;
  border: 1px solid #d5bc9340;
  border-radius: 8px;
  color: #f2e5ce;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.2s,
    translate 0.2s;
}
.dock-item:is(:hover, :focus-visible) .dock-tooltip {
  opacity: 1;
  translate: -50% 0;
}
.dock-label {
  display: none;
}
.command-dialog {
  width: min(590px, calc(100% - 28px));
  max-width: none;
  padding: 0;
  border-radius: 20px;
  border: 1px solid #e7c38c44;
  color: var(--text);
  background: #121318;
  overflow: hidden;
  box-shadow: 0 50px 160px #000c;
}
:where(.command-dialog, .case-dialog, .journal-dialog)::backdrop {
  background: #030508bf;
  backdrop-filter: blur(12px);
}
.command-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 8px;
  color: #b4a58d;
}
.command-shell > header .mono {
  font-size: 10px;
}
.command-shell > header button {
  min-height: 28px;
  padding: 2px 8px;
  font: 10px var(--font-mono);
  color: #a39b91;
}
.command-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 20px 14px;
}
.command-search svg {
  width: 22px;
  height: 22px;
  color: var(--signal);
}
.command-search input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 13px 0;
  background: none !important;
  font-size: 17px;
  color: var(--text);
}
.command-results {
  max-height: min(55svh, 480px);
  overflow: auto;
  padding: 0 10px 10px;
}
.command-result {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
}
.command-result.is-current,
.command-result:hover,
.command-result:focus-visible {
  background: #e7c38c0b;
  border-color: #e7c38c29;
}
.command-result > svg {
  width: 23px;
  height: 23px;
  color: #c8af8a;
}
.command-result > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.command-result strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.command-result small {
  display: block;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: #8c8b91;
  margin-top: 3px;
}
.command-result > .mono {
  font-size: 9px;
  color: #95866e;
}
.command-empty {
  padding: 20px;
  font-size: 13px;
  color: var(--muted);
}
.command-shell > footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  color: #8b8379;
  font-size: 9px;
}
.command-shell > footer .mono {
  font-size: 8px;
}
.card-glow {
  background: conic-gradient(
    from var(--edge-angle, 0deg) at 50% 50%,
    transparent 0deg,
    transparent 200deg,
    rgba(var(--card-accent), 0.15) 250deg,
    rgba(var(--card-accent), 0.9) 290deg,
    transparent 340deg
  );
}
.h3-workspace {
  background:
    radial-gradient(ellipse at 80% 0, #755b2e12, transparent 50%), #090a0d;
}
.h3-workspace .topbar {
  background: #0b0d10db;
  backdrop-filter: blur(20px);
  border-color: #e7c38c22;
}
.h3-workspace .machine,
.h3-workspace .panel,
.h3-workspace .login-panel {
  border-radius: 18px;
  border-color: #e7c38c29;
  background: var(--surface);
  box-shadow: 0 18px 50px #0002;
}
.h3-workspace h1 {
  font-weight: 450;
  letter-spacing: -0.045em;
}
.h3-workspace input:focus,
.h3-workspace textarea:focus,
.h3-workspace select:focus {
  outline: 2px solid #e7c38c6b;
}
.h3-workspace button[type="submit"] {
  background: linear-gradient(145deg, #edcea0, #b98c51);
  color: #21190e;
  border-color: #e7c38c;
}
@media (max-width: 768px) {
  .explorer-dock {
    gap: 4px;
    min-height: 61px;
    padding: 7px;
    bottom: max(8px, env(safe-area-inset-bottom));
    border-radius: 18px;
  }
  .dock-item {
    width: 37px !important;
    height: 45px !important;
    gap: 4px;
    border-radius: 10px;
  }
  .dock-item svg {
    width: 17px;
    height: 17px;
  }
  .dock-label {
    display: block;
    font-size: 8px;
    line-height: 1;
  }
  .dock-tooltip {
    display: none;
  }
  .site-frame .media-toggle {
    bottom: 85px;
    right: 13px;
    padding: 8px 10px;
  }
  .command-search input {
    font-size: 16px;
  }
  .command-result {
    padding: 12px 10px;
  }
  .command-result small {
    max-width: 230px;
  }
  .command-shell > footer .mono {
    display: none;
  }
}
@media (max-width: 360px) {
  .dock-item {
    width: 33px !important;
  }
  .explorer-dock {
    gap: 3px;
  }
  .command-result small {
    max-width: 180px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blur-glyph {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .dock-item {
    transition: none !important;
  }
}
@media (max-width: 999px) {
  .portal-frame .explorer-dock {
    position: relative;
    bottom: auto;
    width: max-content;
    margin: -100px 0 28px;
  }
}
.portal-card {
  scroll-margin-block: 110px;
}
@media (max-width: 768px) {
  .site-frame .media-toggle {
    position: absolute;
    top: 84px;
    bottom: auto;
    z-index: 30;
  }
}