/**
 * Right-side trays — the shared design language for Settings / Activity /
 * Help / Parking Lot, transcribed from the redesign reference captures
 * (docs/design-reference/extracted/drawer-*.html). Every measurement below
 * comes from an inline style on those captures; nothing here is invented.
 *
 * Geometry, per the reference: a scrim over the page content at
 * rgba(0,0,0,0.5) with the panel flush right, running the full height of the
 * content area. In the prototype the tray's containing block is the shell's
 * content region — the header and the module nav sit ABOVE the scrim, which
 * is why they stay bright behind an open tray. The app reproduces that with
 * --chrome-height (the nav's bottom edge in the viewport, republished on
 * scroll by chrome_height_controller), so the tray starts exactly where the
 * prototype's does and the header stays clickable.
 *
 * Panel widths are the reference's, and README.md's binding measurements:
 * 620px for Settings, 460px for the rest.
 *
 * Typography note (README.md §1): the trays run SMALLER than the app's 18px
 * body default, so every rule below states its own size rather than
 * inheriting. Literal pixel sizes from the captures are written
 * calc(Npx * var(--text-scale)) — identical to the reference at the default
 * text size, while keeping Settings -> text size working. That is the
 * convention modules/hub.css established.
 */

/* ── Scrim and panel ────────────────────────────────────────────── */

.drawer-backdrop,
.parking-lot-backdrop {
  position: fixed;
  top: var(--chrome-height, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-enter) var(--ease-out);
}

.drawer-backdrop.open,
.parking-lot-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.settings-drawer,
.activity-drawer,
.help-drawer,
.parking-lot-sidebar {
  position: fixed;
  top: var(--chrome-height, 0px);
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100%;
  background: var(--bg-primary);
  /* No box-shadow while closed: the panel is parked just off-screen at
     translateX(100%), and a permanent 60px-blur shadow bleeds back into the
     viewport as a gray smudge down the screen's right edge. The shadow (and
     the panel's visibility) exist only while open; visibility flips after
     the slide-out transition so the close animation still shows. */
  box-shadow: none;
  visibility: hidden;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform var(--motion-enter) var(--ease-out), visibility 0s linear var(--motion-enter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* README.md §1, binding: the Settings panel is the wide one. */
.settings-drawer { width: 620px; }

.settings-drawer.open,
.activity-drawer.open,
.help-drawer.open,
.parking-lot-sidebar.open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
  visibility: visible;
  transition: transform var(--motion-enter) var(--ease-out);
}

/* ── Tray header ────────────────────────────────────────────────── */

.drawer-content-header,
.parking-lot-header {
  flex-shrink: 0;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

/* The square teal glyph tile that opens every tray header. */
.drawer-head-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--teal-light);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(17px * var(--text-scale));
}

.drawer-head-text {
  flex: 1;
  min-width: 0;
}

.drawer-head-title {
  display: block;
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(21px * var(--text-scale));
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy-primary);
}

.drawer-head-sub {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 2px;
}

.drawer-close-btn,
.parking-lot-close {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: calc(15px * var(--text-scale));
  line-height: 1;
  transition: color var(--transition-fast);
}

.drawer-close-btn:hover,
.parking-lot-close:hover { color: var(--navy-primary); }

/* ── Tray body and footer ───────────────────────────────────────── */

.drawer-body,
.parking-lot-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Scroll chaining: without this, flicking past the end of a tray's list
     scrolls the page underneath the scrim instead of stopping. */
  overscroll-behavior: contain;
  padding: 1.25rem 1.4rem;
}

/* The page does not scroll while a tray is open (DrawerA11y). Same lock the
   People map's fullscreen dialog uses. */
body.drawer-locked { overflow: hidden; }

.drawer-foot {
  flex-shrink: 0;
  padding: 1rem 1.4rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* display:flex above would beat the UA's [hidden] rule; the Help tray hides
   its footer while the bot chat is open. */
.drawer-foot[hidden] { display: none; }

/* Pushes whatever follows to the far end of a footer / meta row. */
.drawer-spacer { flex: 1; }

/* ── Tray vocabulary shared by every tray body ──────────────────── */

/* Section eyebrow: "Today", "Also here", "How much of it". */
.tray-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

/* Introductory paragraph under a tab. */
.tray-lead {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
}

/* A labelled row with its control on the right — the Settings body is
   built entirely out of these. */
.tray-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.tray-row-label {
  flex: 1 1 220px;
  min-width: 0;
}

.tray-row-title {
  display: block;
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--text-scale));
  color: var(--text-dark);
}

.tray-row-hint {
  display: block;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 2px;
}

.tray-row-value {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
}

/* ── Tray buttons ───────────────────────────────────────────────── */

.tray-btn {
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.2;
  padding: 0.5rem 1rem;
  font-size: calc(13px + var(--text-bump));
  text-decoration: none;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}

.tray-btn--primary {
  background: var(--teal-fill);
  color: var(--text-on-accent);
  border: none;
}

.tray-btn:disabled,
.tray-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.tray-btn:not(:disabled):hover { color: var(--navy-primary); }
.tray-btn--primary:not(:disabled):hover {
  background: var(--teal-fill-hover);
  color: var(--text-on-accent);
}

/* Bare icon button (tray-row dismiss, item clear). */
.tray-icon-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.tray-icon-btn:hover { color: var(--navy-primary); }

/* Segmented choice (text size, theme, pacing, cadence). */
.tray-seg {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.tray-seg-btn {
  min-height: var(--tap);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tray-seg-btn.active,
.tray-seg-btn[aria-pressed="true"] {
  border-color: var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
}

/* button_to wraps each control in a form; keep the row layout intact. */
.tray-seg form,
.drawer-foot form,
.tray-row-value form { margin: 0; display: inline-flex; }

/* A soft chip-link ("Also here" tiles). */
.tray-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.tray-tile:hover {
  border-color: var(--teal-accent);
  color: var(--teal-ink);
}

/* ── Ask 100x Bot: the Help tray's inline chat ──────────────────── */

/* The chat replaces the tray body, so it owns the space between the header
   and the bottom of the panel: messages scroll, composer stays put. The
   app-wide chat CSS (modules/roadmap.css) is written for a page — a fixed
   400px message well, page-scale type, a card border. Everything below is
   the tray's version of those same elements. */

.help-chat-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* The frame is parked hidden until the member asks; an author rule beats the
   UA [hidden] rule, so say it explicitly. */
.help-chat-pane[hidden] { display: none; }

.help-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.help-chat-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.4rem;
  border-bottom: 1px solid var(--border-light);
}

.help-chat-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: calc(12.5px * var(--text-scale));
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.help-chat-back:hover { color: var(--navy-primary); }

.help-chat-bar-label {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: calc(15px * var(--text-scale));
  color: var(--navy-primary);
}

.help-chat .chat-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.help-chat .chat-messages {
  height: auto;
  flex: 1;
  min-height: 0;
  padding: 1rem 1.4rem;
  gap: 0.75rem;
}

.help-chat .message {
  max-width: 92%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.6;
}

.help-chat .message :is(h1, h2, h3, h4, h5, h6) {
  font-size: calc(15px * var(--text-scale));
}

/* Tighter than the app's default between paragraphs; :not(:last-child) so the
   shared `.message > :last-child` reset (modules/roadmap.css) still wins on the
   closing block and the bubble keeps its own padding. */
.help-chat .message p:not(:last-child) { margin-bottom: 0.5rem; }
.help-chat .message ul,
.help-chat .message ol { margin: 0.3rem 0 0.3rem 1.1rem; }

.help-chat .chat-input-container {
  padding: 0.75rem 1.4rem;
  gap: 0.5rem;
}

.help-chat .chat-input {
  padding: 0.5rem 0.7rem;
  /* 16px floor -- below it iOS Safari zooms the page on focus (see
     .chat-input in modules/roadmap.css). */
  font-size: calc(16px * var(--text-scale));
  line-height: 1.5;
  max-height: 7rem;
}

.help-chat .send-btn {
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
}

.help-chat .send-btn i {
  width: auto;
  height: auto;
  font-size: calc(15px * var(--text-scale));
}

/* The standing reminder of what this bot is, under the composer. */
.help-chat-note {
  flex-shrink: 0;
  margin: 0;
  padding: 0.6rem 1.4rem 0.9rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: calc(12.5px * var(--text-scale));
  line-height: 1.5;
  color: var(--text-muted);
}

.help-chat-empty {
  flex: 1;
  padding: 1.25rem 1.4rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Danger block (Settings -> Your data) ───────────────────────── */

.tray-danger {
  margin-top: 1.25rem;
  border-left: 4px solid var(--status-danger);
  padding: 1rem 1.15rem;
}

.tray-danger-title {
  font-family: var(--font-heading);
  font-size: calc(16.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin-bottom: 0.3rem;
}

.tray-danger-copy {
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

/* ── Section heading inside a pane ──────────────────────────────── */

.tray-section-title {
  font-family: var(--font-heading);
  font-size: calc(17px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin: 0 0 0.25rem;
}

/* ── Progressive disclosure row (Settings -> AI memory -> Sync) ──
   A <details> that reads as one more tray row until it is opened. The
   summary is the row; the chevron is the only added chrome. Everything is
   tap-driven (no hover-only reveal) and the summary clears 44px. */

.tray-disclosure {
  border-bottom: 1px solid var(--border-light);
}

.tray-disclosure-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--tap);
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.tray-disclosure-summary::-webkit-details-marker { display: none; }
.tray-disclosure-summary::marker { content: ""; }

.tray-disclosure-summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

.tray-disclosure-summary .tray-row-label { flex: 1 1 auto; }

.tray-disclosure-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.tray-disclosure[open] > .tray-disclosure-summary .tray-disclosure-chevron {
  transform: rotate(180deg);
}

.tray-disclosure[open] > .tray-disclosure-summary { border-bottom: 1px solid var(--border-light); }

.tray-disclosure-body { padding: 0.9rem 0 1rem; }

/* ── The AI memory tab ──────────────────────────────────────────── */

/* The summary is the point of the tab, so it leads: a readable measure at
   tray scale, no card chrome (components.css already flattens it). */
.memory-hero {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.memory-hero .tray-lead { max-width: 60ch; }

#settingsPaneMemory .memory-summary { max-width: 60ch; }

#settingsPaneMemory .memory-category-header {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
  text-transform: none;
  margin-bottom: 0.35rem;
}

#settingsPaneMemory .memory-items {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.7;
}

#settingsPaneMemory .memory-item { margin-bottom: 0.35rem; }

/* One label column, so every remembered fact starts on the same line. */
#settingsPaneMemory .memory-item-label {
  flex: 0 0 auto;
  min-width: 9.5rem;
}
#settingsPaneMemory .memory-category { margin-bottom: 0.9rem; }

/* The paste-ready export lands here on demand; give it room when it does. */
#memoryExportSlot:not(:empty) { padding: 0.9rem 0; }

/* A destructive row kept quiet: same tray row, danger only on the button. */
/* Separated by space, not another rule — the block above it already ends in
   one, and two hairlines 20px apart read as a mistake. */
.tray-row--danger {
  margin-top: 1.6rem;
  border-bottom: none;
  padding-top: 0;
}

.tray-row--danger .tray-btn { color: var(--status-danger); }
.tray-row--danger .tray-btn:not(:disabled):hover {
  color: var(--status-danger);
  border-color: var(--status-danger);
}

/* The memory-sync partials predate the tray, which is square everywhere. */
.settings-drawer .memory-export,
.settings-drawer .memory-sync-review-group { border-radius: 0; }

/* ── iPad: every tray text field clears the 16px zoom threshold ──
   (docs/design/2026-08-11-motion-and-polish-spec.md). The memory-sync
   partials predate the tray and set sub-16px sizes in components.css. */

.settings-drawer .tray-input,
.settings-drawer .memory-import-textarea,
.settings-drawer .memory-sync-review-input {
  font-size: max(16px, calc(15px * var(--text-scale)));
  font-family: var(--font-body);
}

.settings-drawer .memory-import-textarea,
.settings-drawer .memory-sync-review-input {
  border-radius: 0;
  background: var(--bg-secondary);
  color: var(--text-dark);
}

.settings-drawer .memory-import-textarea:focus,
.settings-drawer .memory-sync-review-input:focus {
  border-color: var(--teal-accent);
}

/* Checkboxes in the review list are their own tap target. */
.settings-drawer .memory-sync-review-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--teal-accent);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .settings-drawer,
  .activity-drawer,
  .help-drawer,
  .parking-lot-sidebar {
    width: 100%;
  }
}

/* ── My assessments inside Settings › Your data ─────────────────────────────
   The assessment cards were born in the wide export modal and ride the
   page-level type variables; inside the 620px tray they inherited page-size
   text and read gigantic (owner, 2026-08-12). Scope them to the drawer's own
   scale so they sit in the tray's rhythm. */
#settingsPaneData .user-assessment-card { padding: 0.75rem 0.9rem; }

#settingsPaneData .user-assessment-title {
  font-size: calc(15px * var(--text-scale));
}

#settingsPaneData .user-assessment-preview {
  font-size: calc(13px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 2px;
}

/* The Foundation Assessment's peer raters, listed rather than run together in
   a sentence: who was asked, how you know them, and whether they have scored
   you yet (owner, 2026-08-15 — the row said only "Nobody invited yet"). */
.tray-peer-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.tray-peer-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  line-height: 1.5;
}

.tray-peer-name {
  color: var(--text-dark);
  font-weight: 500;
}

.tray-peer-role {
  color: var(--text-muted);
  text-transform: capitalize;
}

.tray-peer-state {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: calc(11.5px * var(--text-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.tray-peer-state.is-scored {
  color: var(--teal-ink);
}