/* ── Rama: the bar above the stage, the profile panel, and the dialogs ── */

/* ── Stage bar ───────────────────────────────────────────────── */
.stagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: 10px var(--space-6);
}
.stagebar__org { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-4); min-width: 0; }
.org-title { overflow: hidden; font-size: var(--text-lg); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.org-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: 0.8rem; list-style: none; }
.org-stats b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.stagebar__tools { display: flex; align-items: center; gap: var(--space-2); }

.seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}
.seg__btn:hover { color: var(--text-primary); }
.seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg--sm .seg__btn { min-height: 28px; padding: 0 10px; font-size: 0.8rem; }

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 var(--space-6) 8px;
  padding: 8px 12px;
  border: 1px solid rgb(251 191 36 / 30%);
  border-radius: 10px;
  background: rgb(251 191 36 / 7%);
  color: #fde68a;
  font-size: 0.82rem;
}
.notice .ico { flex: none; }

.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-bright);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(110 231 183 / 40%);
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { text-decoration-color: currentColor; }
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text-primary); }
.btn .ico, .nav-link .ico { flex: none; }

/* ── Header extras (site controls inside the kit's contract) ─── */
.nav-kbd, .header-menu kbd, .palette__field kbd, .keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text-muted);
  font: 600 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.header-menu kbd { margin-left: auto; }
.menu-wrap { position: relative; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.menu--wide { min-width: 300px; }
.header-menu small { display: block; color: var(--text-muted); font-size: 0.75rem; white-space: normal; }
.header-menu [data-handoff] { min-height: 52px; }
.caret { margin-left: -2px; font-size: 0.7em; opacity: 0.7; }
#meBtn.is-set .ico { color: var(--accent-bright); }
@media (max-width: 700px) {
  .menu-wrap .nav-label, #searchBtn .nav-label, #meBtn .nav-label, .nav-kbd { display: none; }
}

/* ── The profile panel ───────────────────────────────────────── */
.panel {
  position: relative;
  z-index: 2;
  flex: none;
  width: 392px;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, rgb(10 14 34), rgb(4 7 20));
  animation: panel-in 320ms var(--ease-out) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateX(24px); } }
.panel__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.panel__hero {
  --hue: 158;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 36px 24px 22px;
  overflow: hidden;
  text-align: center;
}
.panel__hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 40%, hsl(var(--hue) 80% 55% / 0.22), transparent 70%);
  pointer-events: none;
}
.panel__hero > * { position: relative; }
.panel__hero .avatar { margin-bottom: 12px; }
.panel__close { position: absolute; top: 10px; right: 10px; }
.panel__name { font-size: 1.45rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.panel__said { color: var(--text-muted); font-size: 0.82rem; }
.panel__title { color: var(--text-secondary); font-size: 0.95rem; }
.panel__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; color: var(--text-muted); font-size: 0.8rem; }
.panel__meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
.panel__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }

.panel__section { padding: 18px 24px; border-top: 1px solid var(--border-subtle); }
.panel__section h3 { margin-bottom: 10px; color: var(--text-muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.panel__row { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--text-secondary); font-size: 0.88rem; }
.panel__row > .ico { flex: none; color: var(--text-muted); }
.panel__row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.panel__row a, .panel__dd a { color: var(--accent-bright); text-decoration: none; }
.panel__row a:hover, .panel__dd a:hover { text-decoration: underline; }
.panel__dd a .ico { margin-left: 4px; vertical-align: -1px; }
.panel__dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 0.86rem; }
.panel__dt { color: var(--text-muted); }
.panel__dd { color: var(--text-primary); overflow-wrap: anywhere; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 24px 28px; border-top: 1px solid var(--border-subtle); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
}
.chip--tag { border-color: rgb(52 211 153 / 25%); background: rgb(52 211 153 / 8%); color: #a7f3d0; }
.chip--person { cursor: pointer; }
.chip--person:hover { border-color: hsl(var(--hue, 158) 70% 60% / 0.6); color: var(--text-primary); }
.chip--more { border-style: dashed; cursor: pointer; }

.teams { display: grid; gap: 8px; list-style: none; font-size: 0.88rem; }
.teams li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.teams__pct { margin-left: auto; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.teams small { flex-basis: 100%; padding-left: 18px; color: var(--text-muted); font-size: 0.76rem; }

.prose { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }
.prose p + p, .prose ul { margin-top: 8px; }
.prose ul { padding-left: 18px; }
.prose a { color: var(--accent-bright); }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); font-size: 0.82em; }

/* ── Dialogs ─────────────────────────────────────────────────── */
.dialog__spacer { flex: 1; }
.dialog__footer { justify-content: flex-start; }

.dialog--palette { width: min(620px, calc(100% - 32px)); margin-top: 12vh; }
.dialog--palette::backdrop { background: rgb(2 4 12 / 70%); backdrop-filter: blur(6px); }
.palette__field { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.palette__field .ico { color: var(--accent-bright); }
.palette__input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: 1.05rem; outline: none; }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__results, .who__results { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; list-style: none; }
.who__results { max-height: 300px; margin-top: 10px; padding: 0; }
.palette__hint { padding: 8px 18px 12px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.75rem; }
.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.result[aria-selected="true"] { background: rgb(52 211 153 / 14%); box-shadow: inset 0 0 0 2px var(--accent); } /* the 2px accent ring is the 3:1 marker */
.result:hover { background: var(--surface-2); }
.result__text { display: grid; min-width: 0; }
.result__name { overflow: hidden; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.result__title { overflow: hidden; color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; text-overflow: ellipsis; }
.result__why { margin-left: 6px; color: var(--accent-bright); }
.result__crumb { max-width: 180px; overflow: hidden; color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; text-overflow: ellipsis; }
.result--none { display: block; color: var(--text-muted); cursor: default; }
.result--none:hover { background: none; }

.dialog--editor { width: min(980px, calc(100% - 32px)); height: min(860px, calc(100dvh - 32px)); }
.dialog--editor .dialog__header { flex-wrap: wrap; }
.dialog--editor .dialog__header h2 { flex: 1 1 auto; min-width: 9ch; }
.editor__tools { flex-wrap: wrap; justify-content: flex-end; }
.dialog--editor[open] { display: flex; flex-direction: column; }
.editor__tools { display: flex; align-items: center; gap: var(--space-2); }
.editor__body { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: var(--space-4) var(--space-6); }
.editor__text {
  flex: 1;
  min-height: 240px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgb(0 0 0 / 35%);
  color: #e2e8f0;
  font: 0.84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  resize: none;
}
.editor__issues { max-height: 132px; overflow-y: auto; font-size: 0.82rem; }
.issue { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; color: #fde68a; }
.issue .ico { flex: none; margin-top: 2px; }
.issue--ok { color: var(--accent-bright); }
.issue--error { color: #fda4af; }

.help p { margin-bottom: var(--space-4); color: var(--text-secondary); }
.help strong { color: var(--text-primary); }
.help a { color: var(--accent-bright); }
.help code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); white-space: nowrap; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; margin-bottom: var(--space-6); }
.keys div { display: flex; align-items: center; gap: 10px; }
.keys dt { display: flex; gap: 4px; min-width: 64px; }
.keys dd { color: var(--text-secondary); font-size: 0.86rem; }

body.is-dropping .workspace { outline: 2px dashed var(--accent); outline-offset: -8px; }

/* ── Phones: the panel becomes a sheet from the bottom ───────── */
@media (max-width: 900px) {
  .panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    width: auto;
    height: var(--sheet-h);
    border-top: 1px solid var(--border-strong);
    border-left: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -24px 60px -20px rgb(0 0 0 / 80%);
    animation-name: sheet-in;
    /* Over the chart on a phone, so the sheet earns a blur here and nowhere else. */
    background: linear-gradient(180deg, rgb(10 14 34 / 90%), rgb(4 7 20 / 96%));
    backdrop-filter: blur(16px);
  }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
  /* Room for the beacon kit's bottom-left button under the last row. */
  .panel__scroll { padding-bottom: 72px; }
  .stagebar { padding: 8px var(--space-4); }
  .panel__dl { grid-template-columns: 120px minmax(0, 1fr); }
  /* Room to scroll the focused card above the sheet, so the sheet never covers it (WCAG 2.4.11). */
  :root { --sheet-h: min(70dvh, 560px, calc(100dvh - 300px)); }
  body.has-panel .chart { padding-bottom: calc(var(--sheet-h) + 48px); }
}
@media (max-width: 700px) {
  /* Title and tools on one line, the numbers on one scrolling line under them. */
  .stagebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 8px var(--space-4); }
  .stagebar__org { display: contents; }
  .org-title { grid-column: 1; grid-row: 1; align-self: center; font-size: var(--text-base); }
  .stagebar__tools { grid-column: 2; grid-row: 1; }
  .org-stats { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .seg__btn { padding: 0 9px; }
  /* Icon only on a phone; the label stays in the accessibility tree. */
  .stagebar__tools .seg__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #handWrap { display: none; }
  .result__crumb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}