/* ==========================================================================
   tour.css — page-only layout for tour.html ("See it work").
   Sandbox build, Sept 27, 2026. Tokens only: every colour is a var(--…)
   from site.css (or the .paper's own --p-* set). No colour literals.

   CONTENTS
    1  Hero + "one school day" log card
    2  Role tabs: tab bar, panel head, panel foot, next-role button
    3  Story steps (phones in a row)
    4  Out of Service callout (driver panel)
    5  Status card + shop note (mechanic panel)
    6  In the shop row (mechanic panel)
    7  "What arrives when" list + composites (supervisor, business office)
    8  Alert mocks (text message, email)
    9  Night and Day pair
   10  Try it yourself (click-to-start demos)
   11  No signal
   12  Phone sizing: content-box frames never wider than their column
   ========================================================================== */


/* 1. HERO ---------------------------------------------------------------- */
.tour-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.tour-hero .day-card{max-width:480px;justify-self:end;width:100%}
.tour-hero h1{margin-top:16px;font-size:clamp(2.2rem, 1.45rem + 2.7vw, 3.45rem)}
.tour-hero .btn-row{margin-top:28px}
.tour-hero .device-note{margin-top:26px}
@media (max-width: 1020px){ .tour-hero-grid{grid-template-columns:1fr} .tour-hero .day-card{justify-self:start;max-width:560px} }

.day-card{
  position:relative;border-radius:var(--r-xl);padding:clamp(20px, 2.4vw, 28px);
  background-color:var(--surface-2);background-image:var(--sheen);
  box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong);
}
.day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px dashed var(--line-strong)}
.day-head .label{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.day-head .label .ic{width:18px;height:18px}
.day-list{list-style:none;display:grid}
.day-list li{
  position:relative;display:grid;grid-template-columns:4.9rem 36px minmax(0,1fr);gap:0 14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line-hair);
}
.day-list li:last-child{border-bottom:0;padding-bottom:0}
.day-time{padding-top:9px;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.day-ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--accent);background:var(--accent-tint)}
.day-ic .ic{width:18px;height:18px}
.day-ic.is-go{color:var(--go);background:var(--go-tint)}
.day-ic.is-stop{color:var(--stop);background:var(--stop-tint)}
.day-ic.is-quiet{color:var(--ink-2);background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong)}
.day-txt{min-width:0;padding-top:1px}
.day-txt b{display:block;font-size:var(--fs-small);line-height:1.35}
.day-txt span{display:block;margin-top:2px;font-size:var(--fs-meta);line-height:1.4;color:var(--ink-3)}
@media (max-width: 380px){
  .day-list li{grid-template-columns:4.4rem 32px minmax(0,1fr);gap:0 10px}
  .day-ic{width:32px;height:32px}
}


/* 2. ROLE TABS ------------------------------------------------------------ */
.tour-tabbar{display:flex;justify-content:center;margin-bottom:clamp(8px, 1vw, 16px)}
.tour-tabbar .tabs{margin:0 auto}

.panel-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:24px 56px;align-items:end;
  padding-bottom:clamp(24px, 3vw, 36px);margin-bottom:clamp(28px, 3.5vw, 48px);border-bottom:1px solid var(--line-hair);
}
.panel-head .label{display:inline-flex;align-items:center;gap:8px}
.panel-head .label .ic{width:18px;height:18px;color:var(--accent)}
.panel-head h3{
  margin-top:12px;font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);font-weight:800;line-height:1.1;
  letter-spacing:var(--tr-display);text-wrap:balance;
}
.panel-head .lead{margin-top:14px;max-width:640px}
.panel-aside{max-width:360px;display:grid;gap:10px;justify-items:start}
.panel-aside .quote p{font-size:1.1rem;line-height:1.4}
.panel-aside .quote footer{margin-top:10px;font-size:var(--fs-meta)}
@media (max-width: 1020px){
  .panel-head{grid-template-columns:1fr;align-items:start}
  .panel-aside{max-width:560px}
}

.panel-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  margin-top:clamp(36px, 4.5vw, 64px);padding-top:24px;border-top:1px solid var(--line-hair);
}
.panel-foot .meta{max-width:720px;line-height:1.55}
.panel-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.tour-next{flex:none}
.tour-next .ic{width:18px;height:18px}
.no-js .tour-next{display:none}


/* 3. STORY STEPS ---------------------------------------------------------- */
.tour-steps{gap:clamp(24px, 2.6vw, 36px)}
.tour-steps .step{display:flex;flex-direction:column}
.step-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-top .step-n{margin:0;flex:none}
.step-top .step-time{margin:0}
.tour-steps h4{font-family:var(--font-display);font-size:1.2rem;font-weight:750;line-height:1.25;letter-spacing:-.01em}
.tour-steps .step-txt p{margin-top:8px;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
.tour-steps .step-visual{margin-top:auto;padding-top:24px;display:flex;justify-content:center;align-items:flex-end}
.tour-steps .step-visual > *{width:100%}

/* Three-step rows turn sideways on tablets: words left, screen right. */
@media (max-width: 1020px) and (min-width: 601px){
  .tour-steps.is-3{grid-template-columns:1fr;gap:48px}
  .tour-steps.is-3 .step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:32px;align-items:center}
  .tour-steps.is-3 .step-visual{margin-top:0;padding-top:0}
}


/* 4. OUT OF SERVICE CALLOUT (driver panel) --------------------------------- */
.tour-oos{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(28px, 5vw, 72px);align-items:center;
  margin-top:clamp(40px, 5vw, 72px);padding:clamp(34px, 4vw, 52px) clamp(20px, 4vw, 52px) clamp(24px, 3vw, 40px);
  border-radius:var(--r-xl);
}
.tour-oos h4{margin-top:14px;font-family:var(--font-display);font-size:clamp(1.35rem, 1.15rem + .8vw, 1.75rem);font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--on-oos)}
.tour-oos p{margin-top:12px;max-width:560px}
.tour-oos .fine{margin-top:16px}
.tour-oos .device{width:228px}
@media (max-width: 600px){
  .tour-oos{grid-template-columns:1fr}
  .tour-oos .device{width:100%}
}


/* 5. STATUS CARD + SHOP NOTE (mechanic panel) ------------------------------ */
.status-card{width:100%;max-width:320px;margin:0 auto;display:grid;gap:16px;padding:20px}
.status-card .chips{display:grid;gap:8px;justify-items:start}
.shop-note{
  padding:14px 16px 14px 18px;border-radius:var(--r-md);
  background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--line-hair);
}
.shop-note .label{display:flex;align-items:center;gap:6px}
.shop-note .label .ic{width:14px;height:14px}
.shop-note p{margin-top:6px;font-weight:700;color:var(--ink-strong);line-height:1.4}
.shop-ack{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--fs-meta);color:var(--ink-2)}
.shop-ack .ic{width:16px;height:16px;color:var(--go);stroke-width:2.6}


/* 6. IN THE SHOP ROW (mechanic panel) -------------------------------------
   Oct 22, 2026: the two-pane shop-tablet picture is gone (the live mechanic app has no such view).
   The row now shows the open-defects list on a phone, laid out like the Out of Service callout. */
.tour-shop{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(28px, 5vw, 72px);align-items:center;
  margin-top:clamp(48px, 6vw, 88px);
}
.tour-shop h4{margin-top:14px;font-family:var(--font-display);font-size:clamp(1.35rem, 1.15rem + .8vw, 1.75rem);font-weight:800;line-height:1.15;letter-spacing:-.015em}
.tour-shop .body-2{margin-top:12px;max-width:560px}
.tour-shop .feature-list{margin-top:20px;font-size:var(--fs-small)}
.tour-shop > .device{width:260px}
@media (max-width: 600px){
  .tour-shop{grid-template-columns:1fr}
  .tour-shop > .device{width:100%}
}


/* 7. "WHAT ARRIVES WHEN" + COMPOSITES --------------------------------------- */
.tour-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px, 5vw, 80px);align-items:center}
@media (max-width: 1020px){ .tour-split{grid-template-columns:1fr} }

.when-list{list-style:none;display:grid}
.when-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 18px;padding:20px 0;border-top:1px solid var(--line-hair)}
.when-list li:first-child{border-top:0;padding-top:0}
.when-list li:last-child{padding-bottom:0}
.when-list .icon-well{margin:0}
.when-list .step-time{margin-bottom:4px}
.when-list h4{font-family:var(--font-display);font-size:1.15rem;font-weight:750;line-height:1.3;letter-spacing:-.01em}
.when-list p{margin-top:6px;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}

/* Supervisor: alerts laid over the monthly report */
.composite{display:grid;justify-items:center;gap:0}
.composite .alert-stack{position:relative;z-index:2;justify-self:start;width:min(100%, 390px);margin-bottom:-26px;display:grid;gap:10px}
.composite .paper-stack{width:100%;max-width:470px;justify-self:end}
@media (max-width: 1020px){
  .composite .alert-stack{justify-self:center}
  .composite .paper-stack{justify-self:center}
}

/* Business office: the phone in front of the mileage report */
.composite-pair{display:flex;align-items:center;justify-content:center}
.composite-pair > .device{flex:0 0 214px;margin:0;z-index:2}
.composite-pair > .paper-stack{flex:1 1 auto;min-width:0;max-width:420px;margin-left:-10px;z-index:1}
@media (max-width: 560px){
  .composite-pair{flex-direction:column;align-items:stretch}
  .composite-pair > .device{flex:none;width:100%}
  .composite-pair > .paper-stack{margin:18px 0 0;max-width:none}
}
.paper-mileage .paper-table td:not(:first-child),.paper-mileage .paper-table th:not(:first-child){text-align:right}


/* 8. ALERT MOCKS --------------------------------------------------------- */
.alert-card{
  border-radius:var(--r-lg);padding:14px 16px 15px;
  background:var(--surface-3);box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong);
  font-size:var(--fs-small);line-height:1.45;color:var(--ink);
}
.alert-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.alert-app{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.alert-app .ic{width:15px;height:15px}
.alert-when{font-size:var(--fs-meta);color:var(--ink-3)}
.alert-from{margin-top:6px;font-weight:800;color:var(--ink-strong)}
.alert-body{margin-top:2px;color:var(--ink-2)}
.alert-subject{display:flex;align-items:center;gap:7px;margin-top:6px;font-weight:800;color:var(--ink-strong)}
.alert-subject .ic{width:17px;height:17px;color:var(--warn)}
.alert-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin-top:8px;font-size:var(--fs-meta)}
.alert-rows dt{color:var(--ink-3)}
.alert-rows dd{margin:0;color:var(--ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
.alert-card.is-mail{margin-left:clamp(0px, 3vw, 28px)}


/* 9. NIGHT AND DAY --------------------------------------------------------- */
.nd-pair{display:grid;grid-template-columns:repeat(2, minmax(0, 320px));justify-content:center;gap:clamp(14px, 5vw, 72px)}
.nd-pair > figure{margin:0;display:flex;flex-direction:column;align-items:center}
.nd-cap{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 14px 8px 11px;border-radius:var(--r-pill);
  font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.nd-cap .ic{width:17px;height:17px;color:var(--ink-2)}
.nd-cap span{font-weight:600;color:var(--ink-3)}
.nd-points{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(12px, 2vw, 24px);margin-top:clamp(40px, 5vw, 64px)}
.nd-points li{display:flex;gap:14px;align-items:flex-start}
.nd-points .icon-well{margin:0}
.nd-points b{display:block}
.nd-points span{display:block;margin-top:4px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
@media (max-width: 1020px){ .nd-points{grid-template-columns:1fr} }
/* Phones: side by side, each screen was drawn at under half size. Here the two phones overlap
   instead, Night in front on the left and Day behind it, lower and to the right, so each is
   drawn about a third bigger and the green button stays in view on both. */
@media (max-width: 560px){
  .nd-pair{grid-template-columns:minmax(0,1fr);grid-template-areas:"pair";gap:0}
  .nd-pair > figure{grid-area:pair;width:62%}
  .nd-pair > figure:first-child{justify-self:start;align-items:flex-start;position:relative;z-index:2}
  .nd-pair > figure + figure{justify-self:end;align-items:flex-end;margin-top:64px;position:relative;z-index:1}
}
@media (max-width: 460px){
  .nd-cap{padding:7px 10px;font-size:var(--fs-label)}
  .nd-cap span{display:none}
}


/* 10. TRY IT YOURSELF ------------------------------------------------------
   Not on the page in Release 1 (the section returns in Release 2). Kept so it comes back as is. */
.try-grid{max-width:980px;margin:0 auto}
.try-card{display:flex;flex-direction:column}
.try-card .device{margin:4px 0 22px}
.try-card .device-phone{max-width:300px}
.try-card h3{margin-top:auto}
.try-card .body-2{margin-top:8px}
.try-card .try-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px}
.try-cover{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;
  padding:24px 14px 30px;text-align:center;
  background:linear-gradient(180deg, transparent 46%, var(--bg) 74%);
}
html[data-theme="light"] .try-cover{background:linear-gradient(180deg, transparent 46%, var(--surface-2) 74%)}
.try-cover .btn{white-space:normal;max-width:100%;box-shadow:var(--sh-fill), var(--sh-3)}
.try-cover .try-hint{font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;color:var(--on-accent)}
.try-card.is-playing .try-cover{display:none}
.try-card.is-playing .try-screen > img{visibility:hidden}
.try-note{max-width:760px;margin:clamp(24px, 3vw, 36px) auto 0}


/* 11. NO SIGNAL ------------------------------------------------------------ */
.signal-flow{list-style:none;display:grid;gap:12px;margin-top:28px}
.signal-flow li{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 16px;align-items:start;
  padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
}
.signal-flow .icon-well{grid-row:1 / span 2;margin:0}
.signal-flow b{font-size:var(--fs-body);line-height:1.3;padding-top:2px}
.signal-flow li > span:last-child{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.signal-need{display:flex;gap:12px;align-items:flex-start;margin-top:20px}


/* 12. PHONE SIZING ---------------------------------------------------------
   site.css frames are content-box (the bezel padding sits outside width:100%).
   Inside a column, take the padding back so a frame never spills past its column. */
.tour-steps .device-phone,.tour-oos .device-phone,.tour-shop .device-phone,.nd-pair .device-phone,.signal-phone .device-phone,.try-card .device-phone{margin-left:auto;margin-right:auto}
.tour-steps .device-phone.is-xs,.tour-oos .device-phone.is-xs,.composite-pair .device-phone.is-xs{width:calc(100% - 14px)}
.tour-steps .device-phone.is-sm{width:calc(100% - 16px)}
.nd-pair .device-phone,.signal-phone .device-phone,.try-card .device-phone{width:calc(100% - 20px)}
@media (max-width: 460px){
  .nd-pair .device-phone{padding:6px;width:calc(100% - 12px);border-radius:30px}
  .nd-pair .device-screen{border-radius:25px}
}

/* site.css sets iframe{max-width:100%}, which clamps a 360 px screen to its (smaller) frame before
   it is scaled, leaving a dark strip. On this page, let every device iframe keep its own width. */
.device-screen > iframe{max-width:none}

/* The frame's speaker slot sits over the top of the screen, where the app's header text is. On this
   page, tuck it into the bezel so it never covers "Your District" (most visible on Day screens). */
.device-phone::before{top:3px;height:4px}
.device-phone.is-sm::before,.device-phone.is-xs::before{top:2px;height:3px}