/* How it works (info/organizers.php): the role switch in the night hero, then per role how to start and three still pictures of
   its dashboard with sample data (assets/how/). Loads after info.css. Everything is scoped to .di-tour. */

/* WoodMart reads this page as one with a sidebar and adds its phone "show sidebar" button (a white square on the left edge), as on
   /dashboard/ (partners.css): nothing here uses a sidebar. */
body.di-page-organizers :is(.wd-sidebar-opener,.wd-sidebar){display:none!important}

/* ---------- The switch (night hero): a segmented control, three ways ---------- */
.devt .tour-tabs{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;max-width:100%;margin-top:36px;padding:4px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(16,8,26,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.devt .tour-tabs[hidden]{display:none}
.devt .tour-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;color:rgba(255,255,255,.86);font:600 16px/1 var(--sans);white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.devt .tour-tabs button:hover{color:#fff}
.devt .tour-tabs button:active{transform:scale(.97)}
.devt .tour-tabs button[aria-selected="true"]{background:#fff;color:#1E1030;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.devt .tour-tabs button[aria-selected="true"] .pd-sw-i{color:var(--accent)}
.devt .tour-tabs .pd-sw-i{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- A role's tab: its sections spaced as info.css spaces a page's (one tab shows at a time; without JS they stack) ---------- */
.di-tour .tour[hidden]{display:none}
.devt .tour>.di-sec{padding-block:64px 8px}
.devt .tour>.di-sec:first-child{padding-top:0}
.di-tour:not(.is-js) .tour+.tour{padding-top:64px}
.devt .tour-cta{margin-top:36px}

/* ---------- The pictures: three per role, one a row on computers (the caption beside a picture big enough to read), a
   phone-layout picture with the caption under it on phones; a Sample data tag on each ---------- */
.devt .di-pics{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.devt .di-pic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:36px;align-items:center;margin:0}
.devt .di-pic-frame{position:relative;display:block;overflow:hidden;border:1px solid rgba(81,42,116,.2);border-radius:20px;background:#E6E6FA;box-shadow:0 30px 50px -36px rgba(42,21,64,.75)}
.devt .di-pic.is-dark .di-pic-frame{background:#0B0B0C}
.devt .di-pic-frame :is(picture,img){display:block;width:100%;height:auto}
.devt .di-pic-tag{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:999px;background:var(--bolt);color:#1E1030;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.devt .di-pic figcaption{display:grid;gap:4px;order:-1}
.devt .di-pic figcaption b{color:var(--ink);font:700 21px/1.1 var(--display);font-stretch:75%}
.devt .di-pic figcaption span{color:var(--ink-3);font:400 15px/1.45 var(--sans)}

@media (max-width:959px){.devt .di-pics{gap:36px}.devt .di-pic{grid-template-columns:minmax(0,1fr);gap:14px}.devt .di-pic figcaption{order:0}}
@media (max-width:767.98px){
	.devt .tour>.di-sec{padding-top:48px}
	.devt .tour>.di-sec:first-child{padding-top:0}
	.devt .tour-tabs{display:grid;width:100%}
	.devt .tour-tabs button{height:48px;padding:0 8px;font-size:14px}
}
@media (max-width:420px){.devt .tour-tabs .pd-sw-i{display:none}} /* the three labels need the room */