/* ===========================================================================
   The builder shell: top bar, More menu, the rig panel, the one sheet, the
   mount rings on the bike and the first-visit coach mark. Tokens only.

   Desktop (> 900px with a real pointer): the panel is a column on the left,
   a sheet replaces it in the same column, the bike takes the rest.
   Phone: the panel and every sheet are the same bottom sheet, with three
   heights (peek, half, full) and one close control. src/ui/detents.js moves
   them; src/ui/framing.js keeps the bike in whatever space they leave.
   =========================================================================== */

/* ---- top bar ------------------------------------------------------------------ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + 4px);
  padding-top: env(safe-area-inset-top);
  z-index: 30; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.wordmark, .tb-btn {
  background: var(--e1-bg); backdrop-filter: var(--glass-filter-1); -webkit-backdrop-filter: var(--glass-filter-1);
  border: 1px solid var(--e1-brd);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--target); padding: 0 var(--s-3); margin-left: calc(-1 * var(--s-2));
  border-radius: var(--r-pill);
  font-size: var(--fs-title3); font-weight: 700; letter-spacing: 0.1em; color: var(--ink-1);
}
.wordmark:hover { background: var(--e4-bg); }
.wordmark svg { color: var(--accent); }
.tb-right { display: flex; align-items: center; gap: var(--s-2); }
.tb-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--target); min-width: var(--target); padding: 0 var(--s-3);
  border-radius: var(--r-pill); color: var(--ink-1);
  font-size: var(--fs-caption); font-weight: 600;
  transition: background var(--d-micro) var(--ease-out);
}
.tb-btn:hover, .tb-btn[aria-expanded="true"] { background: var(--e4-bg); }
.tb-face { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill-2); overflow: hidden; font-size: var(--fs-label); font-weight: 700; }
.tb-face img { width: 100%; height: 100%; object-fit: cover; }

/* the More menu: labelled rows, never mystery icons */
.tb-menu {
  position: fixed; top: calc(var(--topbar-h) - 4px); right: var(--gutter); z-index: 40;
  min-width: 248px; padding: var(--s-2);
  transform-origin: top right;
  animation: pop-in var(--d-control) var(--ease-out);
}
.tb-menu .mi {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: var(--target); padding: 0 var(--s-3); border-radius: var(--r-chip);
  font-size: var(--fs-body); color: var(--ink-1); text-align: left;
}
.tb-menu .mi:hover, .tb-menu .mi:focus-visible { background: var(--fill-2); }
.tb-menu .mi svg { color: var(--ink-2); flex: none; }
.tb-menu .mi-k { flex: 1; }
.tb-menu .mi-v { color: var(--ink-3); font-size: var(--fs-caption); }
.tb-menu .mi .seg { margin-left: auto; }
.tb-menu hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-1) var(--s-2); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- panel + sheet: shared frame -------------------------------------------------- */
.panel, .sheet {
  position: fixed; z-index: 20;
  display: flex; flex-direction: column;
  border-radius: var(--r-panel); overflow: hidden;
}
.sheet-top { flex: none; }
.sheet-head {
  flex: none; display: flex; align-items: center; gap: var(--s-2);
  min-height: 60px; padding: var(--s-3) var(--s-3) var(--s-2) var(--s-5);
}
.sheet-title { flex: 1; min-width: 0; font-size: var(--fs-title2); font-weight: 650; letter-spacing: var(--tr-title); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.sheet-back, .sheet-close {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--target); min-width: var(--target); padding: 0 var(--s-3); justify-content: center;
  border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 600;
  background: var(--fill-1);
}
.sheet-back { padding: 0; margin-left: calc(-1 * var(--s-2)); background: transparent; }
.sheet-back:hover, .sheet-close:hover { background: var(--fill-2); color: var(--ink-1); }
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--s-5) var(--s-6);
  scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent;
}
.sheet-foot {
  flex: none; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
}
.sheet-foot:empty { display: none; }
.sheet-foot .row { display: flex; gap: var(--s-2); }
.sheet-foot .row > * { flex: 1; }
.sheet-grip { display: none; }

.panel > .sheet-inner, .sheet > .sheet-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* ---- desktop: a column on the left ----------------------------------------------- */
@media (min-width: 901px) {
  .panel, .sheet {
    top: var(--topbar-h); left: var(--gutter); bottom: var(--gutter);
    width: var(--panel-w);
  }
  .sheet { width: var(--sheet-w, var(--sheet-detail-w)); opacity: 0; transform: translateX(-16px); pointer-events: none;
    transition: opacity var(--d-sheet-out) var(--ease-in), transform var(--d-sheet-out) var(--ease-in); }
  .sheet.open { opacity: 1; transform: none; pointer-events: auto;
    transition: opacity var(--d-sheet) var(--ease-out), transform var(--d-sheet) var(--ease-out); }
  .panel { transition: opacity var(--d-sheet) var(--ease-out), transform var(--d-sheet) var(--ease-out); }
  #ui-root.sheet-open .panel { opacity: 0; transform: translateX(-16px); pointer-events: none; visibility: hidden;
    transition: opacity var(--d-sheet-out) var(--ease-in), transform var(--d-sheet-out) var(--ease-in), visibility 0s var(--d-sheet-out); }
}

/* ---- tablet: a narrower column --------------------------------------------------- */
@media (min-width: 561px) and (max-width: 900px) and (min-height: 481px), (min-width: 561px) and (max-width: 900px) and (pointer: fine) {
  .panel, .sheet { top: var(--topbar-h); left: var(--s-3); bottom: var(--s-3); width: min(380px, 46vw); }
  .sheet { opacity: 0; pointer-events: none; transition: opacity var(--d-sheet-out) var(--ease-in); }
  .sheet.open { opacity: 1; pointer-events: auto; transition: opacity var(--d-sheet) var(--ease-out); }
  #ui-root.sheet-open .panel { visibility: hidden; }
}

/* ---- phone: one bottom sheet with three heights -------------------------------------
   The element is always the FULL height; --hide pushes it below the viewport.
   The inner column is cut to the settled visible height so its footer sits
   on screen and the body scrolls above it, never under it.                    */
@media (max-width: 560px), (pointer: coarse) and (max-height: 480px) {
  .topbar { height: 56px; padding-left: var(--s-4); padding-right: var(--s-2); }
  .panel, .sheet {
    left: 0; right: 0; bottom: 0; top: auto;
    height: var(--sheet-full, 86vh);
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    border-bottom: 0;
    transform: translateY(var(--hide, 0px));
    transition: transform var(--d-sheet) var(--ease-out);
    will-change: transform;
  }
  .panel > .sheet-inner, .sheet > .sheet-inner {
    display: flex; flex-direction: column; min-height: 0; flex: none;
    height: calc(100% - var(--hide-settled, 0px));
  }
  .sheet { transform: translateY(calc(var(--sheet-full, 86vh) + 24px)); visibility: hidden;
    transition: transform var(--d-sheet-out) var(--ease-in), visibility 0s var(--d-sheet-out); }
  .sheet.open { transform: translateY(var(--hide, 0px)); visibility: visible;
    transition: transform var(--d-sheet) var(--ease-out); }
  #ui-root.sheet-open .panel { transform: translateY(calc(var(--sheet-full, 86vh) + 24px)); }
  .sheet-grip {
    display: block; position: relative; flex: none; height: 20px; width: 100%;
    cursor: grab; touch-action: none;
  }
  .sheet-grip::before {
    content: ''; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px;
    transform: translateX(-50%); border-radius: 3px; background: var(--ink-4);
  }
  .sheet-top { touch-action: none; }
  .sheet-head { min-height: 52px; padding: 0 var(--s-2) var(--s-2) var(--s-4); }
  .sheet-body { padding: 0 var(--s-4) var(--s-5); }
  .sheet-foot { padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); }
}

/* ---- mount rings on the bike ----------------------------------------------------------- */
.mounts { position: fixed; inset: 0; z-index: 10; }
.mount-ring {
  position: absolute; left: 0; top: 0; width: var(--target); height: var(--target);
  margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: auto;
  transition: opacity var(--d-control) var(--ease-out);
}
.mount-ring::before {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink-1); background: var(--shade-soft);
  box-shadow: 0 0 0 2px var(--shade);
  animation: ring-pulse 1600ms var(--ease-inout) infinite;
}
.mount-ring::after {
  content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-1);
}
.mount-ring:hover::before, .mount-ring:focus-visible::before { border-color: var(--accent); animation: none; transform: scale(1.3); }
.mount-ring.taken::before { border-style: dashed; opacity: 0.7; }
.mount-ring .mount-tip {
  position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: var(--s-1) var(--s-2); border-radius: var(--r-chip);
  background: var(--e4-bg); border: 1px solid var(--e4-brd);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-1);
  opacity: 0; pointer-events: none; transition: opacity var(--d-micro) var(--ease-out);
}
.mount-ring:hover .mount-tip, .mount-ring:focus-visible .mount-tip, .mounts.labelled .mount-tip { opacity: 1; }
@keyframes ring-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mount-ring::before { animation: none; transform: scale(1.09); } }

/* ---- the one line on an empty bike, and the first-visit coach mark ------------------------ */
.coach {
  position: fixed; left: 50%; z-index: 15; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-1); white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--d-sheet) var(--ease-out);
}
.coach.gone { opacity: 0; }

/* the start screen owns the whole view while it is open */
#ui-root.menu-open > .panel, #ui-root.menu-open > .topbar, #ui-root.menu-open > .mounts,
#ui-root.menu-open > .coach, #ui-root.menu-open > .sheet:not(.open) { visibility: hidden; }
@media (min-width: 561px) { .panel.is-empty { bottom: auto; } }

/* ---- the account sheet ------------------------------------------------------------ */
.ac-card { display: flex; flex-direction: column; gap: var(--s-3); max-width: 420px; }
.ac-card.is-busy { opacity: 0.7; pointer-events: none; }
.ac-who { font-size: var(--fs-title3); font-weight: 600; }
.ac-note { font-size: var(--fs-body); color: var(--ink-2); }
.ac-notice { padding: var(--s-2) var(--s-3); border-radius: var(--r-control); font-size: var(--fs-caption); }
.ac-notice.is-ok { background: var(--fill-2); color: var(--ok); }
.ac-notice.is-bad { background: var(--bad-soft); color: var(--bad); }
.ac-google { background: var(--plate); color: var(--ink-on-plate); }
.ac-google:hover { background: var(--plate); opacity: 0.92; }
.ac-google svg { flex: none; }
.ac-or { text-align: center; font-size: var(--fs-caption); color: var(--ink-3); }
.ac-form { display: flex; flex-direction: column; gap: var(--s-3); }
.ac-field { display: flex; flex-direction: column; gap: var(--s-1); }
.ac-field-label { font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.ac-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }