/* The Guide (docs/plans/studio-guide-2026-11-09/PLAN.md, package P0; views/guide.js, views/guidestate.js): the coin
   page's right column while RELIEF_GUIDE is on (.journey.guide-on). Desktop: beside the viewer, sticky at the top right;
   the page's other rail flows under the viewer. A phone (860 px and less): a bottom sheet with the status and the one
   action, pulled up for the rest; it replaces the dock. Present and Examine both show it. The Studio's own tokens and
   fonts (studio.css); dark by default as the rest of the Studio. Nothing here applies with the flag off. */

/* ---- the panel */
.journey .guide { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.journey .guide:not(.has-guide):has(> #j-error:empty) { display: none; }
.journey .guide #j-error:empty { display: none; }
.journey .gd-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.journey .gd-body:empty { display: none; }
.journey .gd-slot { margin: 0; min-width: 0; }
.journey .gd-slot + .gd-slot { border-top: 1px solid var(--rule); padding-top: 12px; }
.journey .gd-status + .gd-action { border-top: 0; padding-top: 0; }
.journey .gd-handle { display: none; }

/* ---- Status: four words, a dot for its tone, the progress */
.journey .gd-t { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.journey .gd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.journey .gd-status.tone-act .gd-dot { background: var(--accent); }
.journey .gd-status.tone-warn .gd-dot { background: var(--bad); }
.journey .gd-status.tone-done .gd-dot { background: var(--ok); }
.journey .gd-status.tone-wait .gd-dot { background: var(--focus); animation: gd-pulse 1.6s ease-in-out infinite; }
@keyframes gd-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .journey .gd-status.tone-wait .gd-dot { animation: none; } }
.journey .gd-prog { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--ink2); font-variant-numeric: tabular-nums; }
.journey .gd-bar { display: block; height: 4px; margin-top: 8px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--muted) 25%, transparent); }
.journey .gd-bar i { display: block; height: 100%; background: var(--focus); }
.journey .gd-why { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); }

/* ---- Action: one button; a quiet one (Cancel scan, Make report) is plain */
.journey .gd-go { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 16px;
  border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; }
.journey .gd-go.primary, .journey .gd-c.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.journey .gd-go.primary:hover:not(:disabled), .journey .gd-c.primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, #000); border-color: color-mix(in srgb, var(--accent) 86%, #000); }
.journey .gd-go.danger { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ---- Question: the ask, the system's answer, the choices */
.journey .gd-ask { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.journey .gd-prop { margin: -2px 0 10px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.journey .gd-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.journey .gd-c { flex: 1 1 auto; min-height: 38px; }
.journey .gd-skip { margin-top: 8px; font-size: 13px; }
.journey .gd-ask-row .gd-go { flex: 1 1 40%; width: auto; }
.journey .gd-weight { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.journey .gd-w { display: flex; gap: 6px; flex: 1 1 170px; min-width: 0; }
.journey .gd-w input { flex: 1 1 auto; min-width: 0; width: 6em; }
.journey .gd-weight .gd-c { flex: 0 0 auto; }
.journey .gd-grams:empty, .journey .gd-weight #w-msg:empty { display: none; }
.journey .gd-weight .ws-bad { color: var(--bad); }

/* ---- Facts: six lines at most */
.journey .gd-facts dl { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.journey .gd-fact { display: contents; }
.journey .gd-fact dt { font-size: 12.5px; letter-spacing: .02em; color: var(--muted); padding-top: 1px; }
.journey .gd-fact dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.journey .gd-fact.tone-warn .gd-v { color: var(--warn); }
.journey .gd-note { font-size: 12.5px; color: var(--muted); }
.journey .gd-note.gd-ai { display: inline-block; padding: 0 5px; border: 1px solid var(--rule); border-radius: 6px; font-size: 11px;
  font-weight: 600; letter-spacing: .05em; color: var(--ink2); }

/* ---- Outcomes */
.journey .gd-out-row { display: flex; flex-wrap: wrap; gap: 8px; }
.journey .gd-o { flex: 1 1 calc(50% - 8px); min-height: 38px; }
.journey .gd-o:disabled { opacity: .55; cursor: default; }
.journey .gd-link { margin-top: 12px; }
.journey .gd-url { width: 100%; box-sizing: border-box; margin: 0 0 8px; font-family: var(--mono); font-size: 13px; }

/* ---- Fix something, More */
.journey .gd-links { display: flex; gap: 18px; align-items: center; }
.journey .gd-l { font-size: 13.5px; }
.journey .gd-fixes { border-top: 1px solid var(--rule); padding-top: 10px; }
.journey .gd-fixes[hidden] { display: none; }
.journey .gd-did { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--ink2); }
.journey .gd-fix-list { display: grid; gap: 6px; }
.journey .gd-fx { text-align: left; background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.journey .gd-fx:hover:not(:disabled) { background: var(--soft); }

/* ---- the page with the Guide: the right column, sticky; the old rail under the viewer; no corner control, no dock */
.journey.guide-on:has(.guide.has-guide) :is(#cs-box, #j-dock, #coin-control) { display: none !important; }
@media (min-width: 861px) {
  .journey.guide-on .j-grid.ws-top { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .journey.guide-on .ws-top > .stage-wrap { grid-column: 1; grid-row: 1; position: relative; top: auto; }
  .journey.guide-on .ws-top > .rail-wrap { grid-column: 1; grid-row: 2; }
  .journey.guide-on .ws-top > .guide { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky;
    top: calc(var(--bar-h, 58px) + 12px); max-height: calc(100vh - var(--bar-h, 58px) - 24px); overflow-y: auto; }
  /* Present: the coin and the Guide, nothing else of the rail; the top bar is hidden there */
  .journey.guide-on.mode-present .ws-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 22px;
    align-items: start; padding: 0 20px; }
  .journey.guide-on.mode-present .ws-top > .rail-wrap { display: none; }
  .journey.guide-on.mode-present .ws-top > .guide { top: 12px; max-height: calc(100vh - 24px); }
  .journey.guide-on.mode-present .stage-box { width: min(100%, calc(100vh - 170px)); }
}
/* Present is dark whatever the theme (its page is near-black): the Guide keeps to it */
.journey.guide-on.mode-present .guide { --panel: #15171b; --ink: #f2f2f2; --ink2: #b9bfc8; --muted: #8d929a; --rule: #2a2d33;
  --soft: #20242a; --accent: #e0574f; --ok: #48b07a; --warn: #e0b64a; --bad: #e0574f; --focus: #6aa8ef; color-scheme: dark; }

/* ---- a phone: a bottom sheet, the status and the action; its handle pulls up the rest */
@media (max-width: 860px) {
  .journey.guide-on { padding-bottom: 168px; }
  .journey.guide-on .ws-top > .guide { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; max-height: 78vh;
    overflow-y: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 4px 16px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
  .journey .gd-handle { display: flex; justify-content: center; width: 100%; height: 22px; padding: 0; margin: 0 0 2px;
    background: transparent; border: 0; cursor: pointer; }
  .journey .gd-handle span { width: 40px; height: 4px; margin-top: 8px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 60%, transparent); }
  .journey .guide:not(.open) .gd-facts, .journey .guide:not(.open) .gd-out, .journey .guide:not(.open) .gd-links,
  .journey .guide:not(.open) .gd-fixes, .journey .guide:not(.open) .gd-q:not(.gd-lead) { display: none !important; }
  .journey .guide .gd-t { font-size: 16px; }
}