/* ==========================================================================
   Tenderco Review Overlay — portal skin (Spring design system)
   Tokens copied from the Tenderco "Spring" design system (portal/portal.css).
   Dark-on-light, same product as /__portal/. All tcr-* class names are
   stable — review-ui.js depends on them.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Spring palette */
  --field:#A6DB5E;--field-d:#8CC544;--field-l:#BEE585;--field-ink:#4C6B2A;
  --cream:#F2EFE4;--cream-2:#EAE6D8;--white:#FFFFFF;
  --char:#1C1C1A;--char-soft:#3A3A36;--char-mut:#5F5D56;--ink-on-dark:#B8B5AC;
  --neutral-dot:#CFCCC2;--error:#B43E2A;
  --rule-on-field:rgba(28,28,26,.16);
  --line-12:rgba(28,28,26,.12);--line-18:rgba(28,28,26,.18);--line-30:rgba(28,28,26,.30);--line-35:rgba(28,28,26,.35);--line-50:rgba(28,28,26,.50);

  --font:Figtree,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-field:28px;--r-panel:22px;--r-nav:20px;--r-card:16px;--r-pill:999px;
  --shadow-nav:0 1px 3px rgba(0,0,0,.05);
  --shadow-hover-dark:0 4px 12px rgba(28,28,26,.18);
  --shadow-hover-light:0 4px 12px rgba(28,28,26,.10);
  --shadow-menu:0 14px 36px rgba(0,0,0,.16);
  --shadow-canvas:0 8px 28px rgba(28,28,26,.10);
  --focus-ring:0 0 0 3px rgba(28,28,26,.08);
  --ease:cubic-bezier(.22,1,.36,1);

  /* Review chrome geometry — TOOLBAR_H in review-ui.js must match --toolbar-h */
  --toolbar-h:52px;
  --dock-h:56px;
  /* Vertical space the floating header pill occupies: 12px gutter + bar +
     12px gutter. review-ui.js reads #tcr-main's offset rather than this. */
  --chrome-top:calc(var(--toolbar-h) + 24px);
  --panel-w:360px;
  --dock-band:calc(var(--dock-h) + 24px);
}

/* ---- Shell page base ---- */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--cream-2);
}

/* ---- Header bar (52px white bar; review-shell.html parity) ---- */
#tcr-toolbar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  height: var(--toolbar-h);
  z-index: 2147483648;
  background: var(--white);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  font-family: var(--font);
  box-sizing: border-box;
}
body.tcr-chrome-hidden #tcr-toolbar { display: none; }

/* ---- Chrome veils ----
   The framed site is one tall iframe in a scrolling document, so without
   these it would slide underneath the floating header and the footer dock.
   Two fixed cream bands sit directly behind that chrome: the site border
   visibly ends before the footer instead of running under it. */
.tcr-veil {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--cream-2);
  pointer-events: none;
}
/* Both veils are children of #tcr-root (a stacking context at 2147483600),
   so these values only rank them against their siblings: above the tint
   (2147483620), below the dock (2147483644) and every drawer. */
.tcr-veil-top { top: 0; height: var(--chrome-top); z-index: 2147483630; }
.tcr-veil-bottom { bottom: 0; height: var(--dock-band); z-index: 2147483630; }
body.tcr-chrome-hidden .tcr-veil { display: none; }

/* ---- Client identity: logo tile + two-line name ---- */
.tcr-client {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-width: 0;
}
.tcr-client-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--field);
  color: var(--char);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  flex: none;
}
.tcr-client-name {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--char);
  white-space: nowrap;
}

/* ---- Segmented pill groups (Site | Portal, Live | Draft) ---- */
.tcr-tab-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--cream);
  border-radius: var(--r-pill);
  flex: none;
}
.tcr-tab-btn {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--char-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
}
.tcr-tab-btn:hover { color: var(--char); }
.tcr-tab-btn.tcr-active {
  background: var(--white);
  color: var(--char);
  font-weight: 700;
  box-shadow: var(--shadow-nav);
}
.tcr-tab-btn:disabled {
  opacity: .4;
  cursor: default;
}
.tcr-tab-btn:disabled:hover { color: var(--char-soft); }

/* ---- "≡ Pages" button ---- */
.tcr-nav-btn {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--char-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  flex: none;
}
.tcr-nav-btn:hover { color: var(--char); }
.tcr-nav-btn.tcr-active { background: var(--char); color: var(--cream); }

/* ---- Device breakpoint icon buttons ---- */
.tcr-bp-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--cream);
  border-radius: var(--r-pill);
  flex: none;
}
.tcr-bp-btn {
  height: 28px;
  min-width: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--char-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tcr-bp-btn:hover { color: var(--char); }
.tcr-bp-btn.tcr-active {
  background: var(--white);
  color: var(--char);
  box-shadow: var(--shadow-nav);
}
/* Device toggle pinned to the header's right side (the Live/Draft slot). */
.tcr-bp-right {
  margin-left: auto;
}

/* ---- Icon button (comments) ---- */
.tcr-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--line-18);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--char-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tcr-icon-btn:hover { border-color: var(--line-50); color: var(--char); }
.tcr-icon-btn.tcr-active { background: var(--char); color: var(--cream); border-color: var(--char); }

/* ---- Address pill (green dot + current page URL) ---- */
.tcr-url-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  min-width: 0;
  max-width: 440px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--r-pill);
  box-sizing: border-box;
}
.tcr-url-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-dot);
  flex: none;
  transition: background .2s ease;
}
.tcr-url-dot.tcr-on { background: var(--field-d); }
.tcr-address {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--char-soft);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.tcr-address:focus { text-align: left; color: var(--char); }
@media (max-width: 560px) {
  .tcr-url-pill { max-width: none; }
  .tcr-address { font-size: 11px; }
}

/* ---- Main scroll area (below fixed toolbar) ---- */
#tcr-main {
  position: relative;
  /* The header is a floating pill (12px gutter above and below it), so the
     canvas starts at --chrome-top, not at the bare toolbar height. */
  margin-top: var(--chrome-top);
  min-height: calc(100vh - var(--chrome-top));
  transition: margin-left 0.25s var(--ease), margin-right 0.25s var(--ease);
}
/* Push drawer: the Pages drawer owns a left column and the canvas shifts
   right so the site never hides underneath it. */
body.tcr-nav-open #tcr-main {
  margin-left: 292px; /* 280px drawer + 12px gutter */
}
body.tcr-chrome-hidden #tcr-main { margin-top: 0; min-height: 100vh; }
/* Feedback drawer pushes the canvas left, mirroring the Pages drawer. Only
   one of the two is ever open (setNavOpen / setPanelOpen are exclusive). */
body.tcr-panel-open #tcr-main {
  margin-right: calc(var(--panel-w) + 24px); /* drawer column + its 12px inset + a 12px gutter */
}

/* ---- Framed canvas: centred white card on the cream backdrop ---- */
#tcr-frame-wrap {
  display: flex;
  justify-content: center;
  background: var(--cream-2);
  /* 12px sides = the same inset as the header pill and the footer dock, so at
     full width the site border runs flush with both. The bottom pad keeps the
     frame clear of the dock when the page is scrolled to the end. */
  padding: 4px 12px calc(var(--dock-h) + 40px);
  box-sizing: border-box;
  min-height: calc(100vh - var(--chrome-top));
}

/* ---- iframe (the framed review canvas) ---- */
#tcr-frame {
  display: block;
  border: none;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-canvas);
  transition: width 0.2s var(--ease);
}

/* ---- Tap-capture layer (sits over iframe; pointer-events only in review mode) ---- */
#tcr-capture {
  position: absolute;
  pointer-events: none;
  cursor: crosshair;
  z-index: 100;
}
#tcr-capture.tcr-capture-active {
  pointer-events: all;
}

/* ---- Pins layer (absolute, scrolls with the page) ---- */
#tcr-pins {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 200;
}

/* ---- Fixed UI root (panel, composer, dock, toast, tint) ---- */
#tcr-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2147483600;
  font-family: var(--font);
}
#tcr-root * { box-sizing: border-box; font-family: inherit; }
.tcr-icon-btn, .tcr-composer, .tcr-panel, .tcr-pin, .tcr-dock { pointer-events: auto; }

/* ---- Tint overlay (shown in review mode) ---- */
.tcr-tint {
  position: fixed;
  inset: 0;
  z-index: 2147483620;
  background: rgba(28, 28, 26, 0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tcr-tint.tcr-on { opacity: 1; }

/* ---- Pins (green #A6DB5E circles, charcoal number; white = sent) ---- */
.tcr-pin {
  position: absolute;
  pointer-events: auto;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background: var(--field);
  color: var(--char);
  box-shadow: 0 0 0 3px var(--white), var(--shadow-hover-dark);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s var(--ease);
}
.tcr-pin::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.tcr-pin.tcr-pin-done { background: var(--white); box-shadow: 0 0 0 3px var(--field), var(--shadow-hover-dark); }
.tcr-pin:hover { transform: scale(1.1); }
.tcr-pin:active { transform: scale(1.18); }

/* ---- Note composer card (avatar + NEW NOTE + Cancel / Add note) ---- */
.tcr-composer {
  position: fixed;
  /* Above the top chrome veil — a note taken near the top of the page must
     not open underneath the header band. */
  z-index: 2147483645;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-menu);
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 12px;
  max-width: calc(100vw - 16px);
}
.tcr-composer.tcr-open { display: flex; }
.tcr-composer-head { display: flex; align-items: center; gap: 8px; }
.tcr-av {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--field);
  color: var(--char);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}
.tcr-composer-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--char-mut);
}
.tcr-composer textarea {
  width: 100%;
  border: 1.5px solid var(--line-18);
  border-radius: var(--r-card);
  background: var(--cream);
  color: var(--char);
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.tcr-composer textarea:hover { border-color: var(--line-35); }
.tcr-composer textarea:focus {
  background: var(--white);
  border-color: var(--char);
  box-shadow: var(--focus-ring);
}
.tcr-composer-row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Buttons ---- */
.tcr-btn {
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid var(--line-30);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--char);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tcr-btn:hover { transform: translateY(-1px); border-color: var(--line-50); }
.tcr-btn:active { transform: translateY(1px); box-shadow: none; }
.tcr-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.tcr-btn-primary { background: var(--char); color: var(--white); border-color: var(--char); }
.tcr-btn-primary:hover { box-shadow: var(--shadow-hover-dark); border-color: var(--char); }
.tcr-btn-danger { background: var(--field); color: var(--char); border-color: transparent; }
.tcr-btn-danger:hover { box-shadow: var(--shadow-hover-light); border-color: transparent; }
.tcr-btn-field { background: var(--field); color: var(--char); border-color: transparent; }
.tcr-btn-field:hover { box-shadow: var(--shadow-hover-light); border-color: transparent; }
.tcr-btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.tcr-btn-edit { background: var(--cream); color: var(--char-soft); border-color: transparent; }
.tcr-btn-edit:hover { color: var(--char); border-color: transparent; }
.tcr-btn-delete { background: transparent; color: var(--error); border-color: rgba(180,62,42,.35); }
.tcr-btn-delete:hover { border-color: var(--error); }

/* ---- Footer dock (the only charcoal block; review controls live here) ---- */
.tcr-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2147483644;
  min-height: var(--dock-h);
  background: var(--char);
  border-radius: var(--r-nav);
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream);
  box-shadow: var(--shadow-menu);
  box-sizing: border-box;
  font-size: 14px;
}
body.tcr-chrome-hidden .tcr-dock { display: none; }
.tcr-rv-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 16px 6px 0;
  border: none;
  border-right: 1px solid rgba(242,239,228,.16);
  border-radius: 0;
  background: none;
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex: none;
}
.tcr-rv-toggle .tcr-switch {
  width: 26px;
  height: 16px;
  border-radius: var(--r-pill);
  background: rgba(242,239,228,.28);
  position: relative;
  flex: none;
}
.tcr-rv-toggle .tcr-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  transition: left .15s var(--ease);
}
/* Review mode in progress: the switch track turns Spring green so the
   indicator reads as "on" at a glance, not just by knob position. */
.tcr-rv-toggle.tcr-on .tcr-switch { background: var(--field-d); }
.tcr-rv-toggle.tcr-on .tcr-switch::after { left: 12px; }
.tcr-wm {
  font-weight: 800;
  letter-spacing: -.055em;
  font-size: 18px;
  color: var(--cream);
  flex: none;
}
.tcr-dock-mid {
  color: var(--ink-on-dark);
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 8px;
}
.tcr-dock .tcr-btn { flex: none; }

/* ---- Panel (feedback drawer — slides up from the footer) ---- */
.tcr-panel {
  position: fixed;
  top: calc(var(--chrome-top) + 12px);
  right: 12px;
  bottom: calc(var(--dock-h) + 28px);
  z-index: 2147483647;
  width: min(var(--panel-w), calc(100vw - 24px));
  background: var(--white);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-menu);
  display: none;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.tcr-panel.tcr-open { display: flex; }
.tcr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cream-2);
  flex-shrink: 0;
}
.tcr-panel-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--char-mut);
}
.tcr-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  color: var(--char-soft);
  font-size: 15px;
  cursor: pointer;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tcr-panel-close:hover { color: var(--char); background: var(--cream-2); }
.tcr-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.tcr-panel-foot {
  padding: 14px;
  border-top: 1px solid var(--cream-2);
  background: var(--cream);
  flex-shrink: 0;
}
.tcr-submit { width: 100%; height: 48px; font-size: 15px; }

/* ---- Panel items (note cards) ---- */
.tcr-item {
  background: var(--cream);
  border-radius: var(--r-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tcr-item-done { opacity: .6; }
.tcr-item-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--char-mut); }
.tcr-item-num {
  width: 24px;
  height: 24px;
  background: var(--field);
  color: var(--char);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tcr-item-page {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.tcr-item-bp {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-18);
  background: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--char-mut);
  flex-shrink: 0;
}
.tcr-item-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--char-mut);
  flex-shrink: 0;
}
/* Status is NEVER a filled pill (brand rule): dot + mono label. */
.tcr-item-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--field-d);
  flex: none;
}
.tcr-item-done .tcr-item-status::before { background: var(--char); }
.tcr-item-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--char-soft); word-break: break-word; }
.tcr-item-actions { display: flex; gap: 6px; }

.tcr-empty { color: var(--char-mut); font-size: 14px; text-align: center; padding: 32px 16px; line-height: 1.6; }

/* ---- Send-to-Tenderco summary screen ---- */
.tcr-summary {
  position: fixed;
  top: calc(var(--chrome-top) + 12px);
  right: 12px;
  bottom: calc(var(--dock-h) + 28px);
  z-index: 2147483647;
  width: min(420px, calc(100vw - 24px));
  background: var(--white);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-menu);
  display: none;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
.tcr-summary.tcr-open { display: flex; }
.tcr-sum-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.tcr-sum-group {
  background: var(--cream);
  border-radius: var(--r-card);
  overflow: hidden;
}
.tcr-sum-head {
  padding: 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tcr-sum-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--cream-2);
}
.tcr-sum-note-main { flex: 1; min-width: 0; }
.tcr-sum-el {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--char-mut);
  overflow-wrap: anywhere;
}
.tcr-sum-empty { padding: 4px 12px; font-size: 13px; color: var(--char-mut); }
.tcr-sum-hint { margin: 0 0 12px; font-size: 13px; color: var(--char-mut); line-height: 1.5; }

/* ---- Toast (floats above the dock) ---- */
.tcr-toast {
  position: fixed;
  bottom: calc(var(--dock-h) + 28px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 2147483646;
  background: var(--char);
  color: var(--cream);
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tcr-toast.tcr-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tcr-toast.tcr-err { background: var(--error); color: var(--white); }

/* ---- Pages drawer (sitemap-driven page list) ---- */
.tcr-nav {
  position: fixed;
  top: calc(var(--chrome-top) + 12px);
  left: 12px;
  bottom: calc(var(--dock-h) + 28px);
  z-index: 2147483646;
  width: 256px;
  background: var(--white);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-menu);
  display: none;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
.tcr-nav.tcr-open { display: flex; }
.tcr-nav-head-actions { display: flex; align-items: center; gap: 8px; }
.tcr-nav-refresh {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  color: var(--char-soft);
  font-size: 15px;
  cursor: pointer;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tcr-nav-refresh:hover { color: var(--char); background: var(--cream-2); }
.tcr-nav-refresh:disabled { opacity: .5; cursor: default; }
.tcr-nav-refresh.tcr-spin { animation: tcr-rotate .8s linear infinite; }
@keyframes tcr-rotate { to { transform: rotate(360deg); } }

.tcr-nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
}
.tcr-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--r-card);
  background: transparent;
  font-size: 14px;
  color: var(--char-soft);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tcr-nav-item:hover { background: var(--cream); color: var(--char); }
.tcr-nav-item.tcr-active { background: var(--cream); color: var(--char); font-weight: 700; }
.tcr-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcr-nav-open {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--char-mut);
  flex-shrink: 0;
}

.tcr-nav-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--cream-2);
  background: var(--cream);
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--char-mut);
}
.tcr-nav-foot p { margin: 0; }
.tcr-nav-stale { color: var(--error); }

/* ---- Focus rings (portal :focus-visible) ---- */
#tcr-root :focus-visible,
#tcr-toolbar :focus-visible,
.tcr-nav :focus-visible {
  outline: 2.5px solid var(--char);
  outline-offset: 2px;
}

@media (max-width: 920px) {
  /* The phone IS the device — hide breakpoint buttons, wrap the bar. */
  .tcr-bp-group { display: none; }
  #tcr-toolbar { overflow-x: auto; scrollbar-width: none; }
  #tcr-toolbar::-webkit-scrollbar { display: none; }
}

@media (max-width: 700px) {
  .tcr-client-name { display: none; }
  .tcr-dock { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .tcr-dock-mid { order: 3; flex-basis: 100%; margin: 0; }
  .tcr-dock .tcr-btn { margin-left: auto; }
}

@media (prefers-reduced-motion:reduce){
  #tcr-root *, #tcr-toolbar *, .tcr-nav * { animation: none !important; transition: none !important; }
}