/* Walkthrough (patients and practices): menu, words, picture and Previous/Next all fit in one window. */
/* Tablet and up: the step list and Previous/Next share a left column that stays in view. */
@media(min-width:761px){
  .practice-tour .walkthrough{grid-template-columns:var(--steps-w,200px) minmax(0,1fr);gap:40px;align-items:start}
  .practice-tour .steps-column{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
  .practice-tour .tour-steps{position:static;gap:2px}
  .practice-tour .tour-steps button{padding:9px 12px}
  .practice-tour .steps-column .step-navigation{flex-wrap:wrap;gap:8px 0;padding:14px 0 0}
  .practice-tour .steps-column .step-navigation button{font-size:14px}
  .practice-tour .steps-column #step-position{order:3;width:100%;text-align:center}
}
/* Wide screens: on the patients page the phone picture sits beside the words. */
@media(min-width:1000px){
  html .practice-tour:not(.has-roles) .walkthrough .tour-content{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:40px}
  .practice-tour:not(.has-roles) .tour-content .step-copy{grid-column:1;grid-row:1;padding-top:0;scroll-margin-top:16px}
  .practice-tour:not(.has-roles) .tour-content #step-benefits{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .practice-tour:not(.has-roles) .tour-content figure,.practice-tour:not(.has-roles) .tour-content #workflow-demo{grid-column:2;grid-row:1/3;margin:0}
  .practice-tour:not(.has-roles) .tour-content .screen-preview{height:calc(100vh - 80px);max-height:736px;width:auto;max-width:none}
  .practice-tour:not(.has-roles) .tour-content #workflow-demo{width:480px;margin:0}
  .practice-tour:not(.has-roles) .tour-content.demo-step figure{display:none}
}
/* Below the wide layout the step menu scrolls inside its column, not the page. */
.practice-tour .steps-column{min-width:0}
/* Practices: the role choice sits above its step list, the role's story beside it. */
@media(min-width:761px){
  .practice-tour.has-roles{--steps-w:240px}
  .has-roles #role-view{display:grid;grid-template-columns:var(--steps-w) minmax(0,1fr);column-gap:40px;align-items:start}
  .has-roles #role-view>.role-picker{grid-column:1;position:static;flex-direction:column;align-items:stretch;gap:10px;padding:32px 0 0;border-bottom:0}
  .has-roles #role-view>.role-picker select{min-width:0;width:100%}
  .has-roles #role-view>.role-picker p{min-width:0}
  .has-roles .role-head{grid-column:2}
  .has-roles #role-view>.walkthrough{grid-column:1/-1}
  .has-roles .steps-column .tour-steps{align-self:stretch}
}
/* Phone: the steps are an accordion. The chosen step's words and picture open under its name. */
.practice-tour .walkthrough.is-accordion{display:flex;flex-direction:column;gap:0}
.walkthrough.is-accordion .steps-column,.walkthrough.is-accordion .tour-steps{display:contents}
.walkthrough.is-accordion .step-navigation{display:none}
.walkthrough.is-accordion .tour-steps button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 12px;border:0;border-left:2px solid transparent;border-bottom:1px solid var(--line);white-space:normal;font-size:15px;color:var(--ink-muted);background:transparent}
.walkthrough.is-accordion .tour-steps button[aria-expanded=true]{border-left-color:var(--sage);background:var(--green-soft);color:var(--ink-strong)}
.walkthrough.is-accordion .tour-steps button::after{content:'';flex:none;width:8px;height:8px;margin-left:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.walkthrough.is-accordion .tour-steps button[aria-expanded=true]::after{transform:rotate(-135deg) translateY(-3px)}
.walkthrough.is-accordion.step-closed .tour-content{display:none}
.walkthrough.is-accordion .tour-content{padding:14px 0 26px;border-bottom:1px solid var(--line)}
/* The patients phone picture is a whole screen tall; on a phone it shows smaller so the words stay near it. */
.practice-tour:not(.has-roles) .walkthrough.is-accordion .screen-preview{zoom:.7;margin-inline:auto}
.walkthrough.is-accordion .tour-content.demo-step figure{display:none}