/* The Well — chrome owned by the integrator: breadcrumb, status strip,
 * palette, cheatsheet, boot veil, lens toast. */

/* ---------- breadcrumb (top-left, rewrites during flight) ---------- */
/* z-index 60 keeps it above the reading room (.panel-host .reader, z-40) so the
   full-viewport room can't paint over — or swallow clicks on — the crumbs. The
   surface pill (rd-close treatment) keeps them legible over scrolled room text. */
#breadcrumb {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12.5px;
  color: var(--text-3);
  user-select: none;
}
#breadcrumb a {
  color: var(--text-2);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
  transition: color var(--t-micro) var(--glide), background var(--t-micro) var(--glide);
}
#breadcrumb a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
#breadcrumb a.crumb-here { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
#breadcrumb .crumb-sep { color: var(--text-3); opacity: 0.55; font-size: 11px; }
#breadcrumb .crumb-hue { width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--text-3)); }

/* ---------- status strip (top-right) ---------- */
/* Sits on a second row (top: 48px) so the search / + New action pills own the
   top-right corner; while reading it's hidden entirely (panel.css). */
#status {
  position: fixed;
  top: 48px;
  right: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--text-3);
  user-select: none;
}
#status b { color: var(--text-2); font-weight: 600; }
#status .status-open { color: var(--vision); }
#status .status-dot { opacity: 0.4; }
#status a { color: var(--text-2); text-decoration: none; }
#status a:hover { color: var(--text); }
#status .status-guide { color: var(--roadmap); }

/* The LOG toggle (H): the header's log count is the switch. Off = the curated
   as-is scene; on = the journal strip + every historical record join it, in the
   learning hue so the strip and the switch read as one thing. */
#status .status-log {
  all: unset;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-3);
  padding: 2px 8px;
  margin: -2px -6px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color var(--t-micro) var(--glide), background var(--t-micro) var(--glide),
    border-color var(--t-micro) var(--glide);
}
#status .status-log:hover { color: var(--text); border-color: var(--border); }
#status .status-log:focus-visible { outline: 2px solid var(--learning); outline-offset: 1px; }
#status .status-log[aria-pressed="true"] {
  color: var(--learning);
  background: color-mix(in srgb, var(--learning) 12%, transparent);
  border-color: color-mix(in srgb, var(--learning) 35%, transparent);
}
#status .status-log[aria-pressed="true"] b { color: var(--learning); }
#status .status-journal { color: var(--learning); }

/* Narrow viewports: cap both chrome rails and let them truncate / wrap so the
   breadcrumb (top-left) and status strip (top-right) can never collide. */
@media (max-width: 1080px) {
  #breadcrumb { max-width: 44vw; }
  #breadcrumb a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26vw;
  }
  #status {
    max-width: 46vw;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 3px;
    text-align: right;
  }
}

/* ---------- action pills (top-right): visible Search + New affordances ----------
   The palette was reachable only by "/" and ⌘K, so first-time visitors thought
   there was no search. These pills surface it (and a create entry). Offset left
   of the .rd-close seat (right: 62px) so they never overlap it while reading;
   z-index 45 clears the reading room's reader (z-40) so they stay clickable.
   Hidden while the palette or the editor own the screen. */
#well-actions {
  position: fixed;
  top: 12px;
  right: 62px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
body:has(.ed-overlay) #well-actions,
body:has(#palette-root:not([hidden])) #well-actions {
  display: none;
}
.well-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font: 12.5px/1 var(--sans);
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px -8px rgba(20, 30, 55, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color var(--t-micro) var(--glide), background var(--t-micro) var(--glide),
    border-color var(--t-micro) var(--glide);
}
.well-pill:hover {
  color: var(--text);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--text-3) 55%, var(--border));
}
.well-pill:active { transform: scale(0.97); }
.well-pill:focus-visible { outline: 2px solid var(--vision); outline-offset: 2px; }
.well-pill svg { color: var(--text-3); flex: none; }
.well-pill-plus { font-size: 15px; font-weight: 500; line-height: 1; margin: -1px 1px 0 -1px; }
.well-pill-kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
/* Narrow: drop the kbd hint, then the labels — icons alone still read. */
@media (max-width: 640px) {
  #well-actions .well-pill-kbd { display: none; }
}
@media (max-width: 460px) {
  #well-actions .well-pill-text { display: none; }
  .well-pill { padding: 8px; }
}

/* ---------- search palette ---------- */
#palette-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: rgba(7, 12, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#palette-root[hidden] { display: none; }

.palette {
  width: min(620px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: palette-in 200ms var(--glide);
}
@keyframes palette-in { from { opacity: 0; transform: translateY(-10px) scale(0.985); } }

.palette input {
  width: 100%;
  padding: 16px 18px;
  font: 16px/1.4 var(--sans);
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  border-bottom: 1px solid var(--border);
}
.palette input::placeholder { color: var(--text-3); }

.palette-hint {
  padding: 7px 18px;
  font-size: 11px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
}
.palette-hint b { color: var(--text-2); font-weight: 500; font-family: var(--mono); }

.palette-results { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.palette-group { padding: 8px 0 2px; }
.palette-group > .smallcaps { display: block; padding: 4px 18px; }
.palette-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  border-left: 2px solid color-mix(in srgb, var(--hue, #8a93a6) 55%, transparent);
  margin: 0 0 1px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-2);
}
.palette-row .palette-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 13.5px; }
.palette-row .palette-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.palette-row.selected, .palette-row:hover { background: color-mix(in srgb, var(--hue, #8a93a6) 10%, transparent); }
.palette-empty { padding: 22px 18px; color: var(--text-3); font-size: 13px; }

/* historical rows (answered/superseded/rejected/done…) read as history: dimmed
   and tagged, sunk below current matches — never hidden. */
.palette-row.is-historical { opacity: 0.5; }
.palette-row.is-historical:hover, .palette-row.is-historical.selected { opacity: 0.85; }
.palette-tag {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
/* the log mark: a record that lives in the LOG layer (opens with the log on) */
.palette-tag-log {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--learning);
  border-color: color-mix(in srgb, var(--learning) 40%, transparent);
  background: color-mix(in srgb, var(--learning) 10%, transparent);
}

/* lens toast — bottom center while a lens is active */
#lens-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12.5px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  gap: 10px;
  align-items: center;
  animation: palette-in 200ms var(--glide);
}
#lens-toast b { color: var(--text); }
#lens-toast .lens-esc { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }

/* ---------- cheatsheet (?) ---------- */
#cheatsheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 12, 22, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#cheatsheet[hidden] { display: none; }
.cheat-card {
  width: min(640px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 30px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  animation: palette-in 200ms var(--glide);
}
.cheat-card h2 { margin: 0 0 4px; font: 600 16px var(--sans); color: var(--text); }
.cheat-card .cheat-sub { margin: 0 0 18px; font-size: 12px; color: var(--text-3); }
.cheat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.cheat-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; color: var(--text-2); border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.cheat-row kbd {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 4px;
}

/* ---------- reading room: the world recedes ---------- */
body.room #viewport,
body.room #labels {
  opacity: 0.07;
  filter: blur(2px);
  transition: opacity 450ms var(--glide), filter 450ms var(--glide);
}
#viewport, #labels {
  transition: opacity 450ms var(--glide), filter 450ms var(--glide);
}
body.room #minimap-wrap { opacity: 0.18; transition: opacity 450ms var(--glide); }
/* while reading (panel or room), the close button owns the top-right corner —
   panel.css's `body.reading #status` fully hides the strip; don't fight it. */
body.room:not(.reading) #status { opacity: 0.35; }

/* ---------- boot veil ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, var(--bg-high) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  transition: opacity 600ms var(--glide);
}
#boot.boot-done { opacity: 0; pointer-events: none; }
.boot-word {
  position: relative;
  font: 600 15px var(--sans);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--text-2);
  animation: boot-breathe 2.2s ease-in-out infinite;
}
@keyframes boot-breathe { 50% { opacity: 0.55; } }
.boot-ripple {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid var(--vision);
  opacity: 0;
  animation: boot-ripple 1.8s var(--glide) infinite;
}
@keyframes boot-ripple {
  from { transform: scale(0.3); opacity: 0.5; }
  to { transform: scale(1.6); opacity: 0; }
}

#boot .boot-error {
  position: absolute;
  bottom: 18vh;
  font-size: 13px;
  color: var(--warn);
  max-width: 480px;
  text-align: center;
}

/* ---------- token login (shown in the boot veil when no valid token) ---------- */
#boot.needs-token .boot-word,
#boot.needs-token .boot-ripple { display: none; }

.well-login {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(348px, 84vw);
  padding: 30px 30px 26px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--vision);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  animation: room-rise 400ms var(--glide) both;
}
.login-title {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.login-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: -4px 0 2px;
}
.login-input {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 120ms var(--glide);
}
.login-input:focus { border-color: var(--vision); }
.login-go {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--vision) 24%, var(--surface));
  color: var(--text);
  cursor: pointer;
  transition: background 120ms var(--glide);
}
.login-go:hover { background: color-mix(in srgb, var(--vision) 36%, var(--surface)); }
.well-login.is-busy { opacity: 0.6; pointer-events: none; }
.login-err {
  font-size: 12.5px;
  color: var(--warn);
  min-height: 15px;
}