/* Dashivo demo (/demo/), the "Account portal" device (assets/demo/demo-web.js). The portal draws itself with its own
   stylesheets inside the frame (build.py copies them from site/cloud as /assets/demo/portal-*.css); this file adds only
   what the demo needs on top: the frame in the site's window, the demo's floating notes, and the parts the portal's
   scripts draw at run time (the Clips library and map, Files, Events, Miles), in the portal's own tokens. It is loaded
   by the demo page and again inside the frame; every rule is scoped (.dmo-app.is-web outside, body.dw-on inside), so
   neither side is touched by the other's rules. No grey text: the frame's secondary lines are full ink. */

/* ---- outside: the frame in the site's browser window ------------------------------------------------------------ */
.dmo-app.is-web { background: #f6f6f3; }
.dmo-app.is-web .dmo-wf { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.dmo-app.is-web .dmo-nojs { margin: 40px; color: #0a0a0b; font: 600 15px/1.5 system-ui, sans-serif; }

/* ---- inside the frame ------------------------------------------------------------------------------------------- */
body.dw-on { --muted: var(--text); --faint: var(--text); overflow-x: clip; }

/* the demo's notes: the portal's own floating note, one at a time */
.dw-notes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; pointer-events: none; }
.dw-on .dw-note { pointer-events: auto; transition: opacity .3s; }
.dw-on .dw-note.is-out { opacity: 0; }
.dw-on .dw-note > .ic { color: #ffff06; }

/* sample pictures for clip tiles (the site's own sample footage) */
.dw-on .dw-pic { background: #050506 center / cover no-repeat; }
.dw-on .dw-pic-day { background-image: url("clip-day-land-st-v6.webp"); }
.dw-on .dw-pic-night { background-image: url("clip-night-land-st-v6.webp"); }
.dw-on .dw-pic-cabin { background-image: url("clip-cabin-land-st-v6.webp"); }

/* ---- Clips (clips-core.js draws this in the portal): a toolbar, the days of trips, the map beside them ----------- */
.dw-on .dw-clips { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.dw-on .dw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dw-on .dw-sp { flex: 1 1 auto; }
.dw-on .dw-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.dw-on .dw-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: none; color: var(--text); font: 600 15px/1 var(--font); cursor: pointer; }
.dw-on .dw-seg button .ic { width: 18px; height: 18px; }
.dw-on .dw-seg button[aria-pressed="true"] { background: var(--black); color: var(--yellow); }
.dw-on .dw-cbody { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 36%); gap: 18px; min-height: 0; }
.dw-on .dw-cbody.is-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.dw-on .dw-days { min-height: 0; overflow-y: auto; padding-right: 4px; }
.dw-on .dw-day { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; font: 700 18px/1.2 var(--font); letter-spacing: -.01em; }
.dw-on .dw-day span { font: 500 13px/1.2 var(--font); color: var(--text); }
.dw-on .dw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; padding: 0; list-style: none; }
.dw-on .dw-tile { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: 500 14px/1.35 var(--font); cursor: pointer; }
.dw-on .dw-tile b { margin-top: 6px; font-weight: 700; font-size: 15px; }
.dw-on .dw-tpic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px solid transparent; overflow: hidden; }
.dw-on .dw-route { background: #050506; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 14px 14px; }
.dw-on .dw-route svg { width: 86%; height: 86%; }
.dw-on .dw-tpic .hv-play { position: absolute; width: 42px; height: 42px; fill: #ffff06; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.dw-on .dw-tile.is-sel .dw-tpic, .dw-on .dw-tile:hover .dw-tpic { border-color: var(--d-y, #0a0a0b); }
.dw-on .dw-tdev { display: flex; align-items: center; gap: 6px; }
.dw-on .dw-tdev .ic { width: 15px; height: 15px; }
.dw-on .dw-tdev .chip { margin-left: auto; }
.dw-on .dw-map { position: relative; min-height: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.dw-on .dw-mapsvg { display: block; width: 100%; height: 100%; overflow: hidden; }
.dw-on .dw-land { fill: #ece9e1; }
.dw-on .dw-park { fill: #cfe3c3; }
.dw-on .dw-water { fill: #a9cbe6; }
.dw-on .dw-streets path { stroke: #fff; stroke-width: 5; vector-effect: non-scaling-stroke; fill: none; }
.dw-on .dw-main path { stroke: #f4d27a; stroke-width: 9; vector-effect: non-scaling-stroke; fill: none; }
:root[data-theme="dark"] .dw-on .dw-land { fill: #141518; }
:root[data-theme="dark"] .dw-on .dw-park { fill: #13291b; }
:root[data-theme="dark"] .dw-on .dw-water { fill: #0e2233; }
:root[data-theme="dark"] .dw-on .dw-streets path { stroke: #2b2c31; }
:root[data-theme="dark"] .dw-on .dw-main path { stroke: #4a4433; }
.dw-on .dw-mapcap { position: absolute; left: 12px; right: 110px; bottom: 12px; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: #050506; color: #fff; font: 500 14px/1.2 var(--font); }
.dw-on .dw-mapcap i { width: 22px; height: 8px; border-radius: 4px; background: #ffff06; flex: none; }
.dw-on .dw-mapcap b { font-weight: 700; }
.dw-on .dw-playb { position: absolute; right: 12px; bottom: 12px; }
.dw-on .dw-player { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(5, 5, 6, .72); }
.dw-on .dw-pbox { width: min(980px, 100%); padding: 18px; border-radius: 20px; background: var(--card); color: var(--text); border: 1px solid var(--line); }
:root[data-theme="dark"] .dw-on .dw-pbox { border-radius: 0; }
.dw-on .dw-phead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.dw-on .dw-phead b { font: 700 18px/1.2 var(--font); }
.dw-on .dw-pbox video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #050506; }
.dw-on .dw-pbox .hint { margin: 10px 0 0; }

/* ---- Files, Events, Miles (drawn by their scripts in the portal) ------------------------------------------------- */
.dw-on .dw-files { display: flex; flex-direction: column; gap: 16px; }
.dw-on .dw-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dw-on .dw-folder { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-items: center; width: 100%; margin: 0; padding: 20px; color: var(--text); text-align: left; font: 500 14px/1.35 var(--font); cursor: pointer; }
.dw-on .dw-folder .ic { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--yellow); color: #0a0a0b; }
.dw-on .dw-folder b { font: 700 16px/1.2 var(--font); }
.dw-on .dw-events { display: flex; flex-direction: column; gap: 16px; }
.dw-on .dw-evlist { margin: 0; padding: 0; list-style: none; }
.dw-on .dw-evlist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.dw-on .dw-evlist li:first-child { border-top: 0; }
.dw-on .dw-evt { display: flex; flex-direction: column; gap: 2px; }
.dw-on .dw-evt b { font: 700 16px/1.2 var(--font); }
.dw-on .dw-evt small { font-size: 13.5px; }
.dw-on .dw-evlist time { font: 500 14px/1.2 var(--font); white-space: nowrap; }
.dw-on .dw-miles { display: flex; flex-direction: column; gap: 16px; }
.dw-on .dw-range { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 14px/1 var(--font); }
.dw-on .dw-range .ic { width: 16px; height: 16px; }
.dw-on .dw-mgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.dw-on .dw-mtable td { vertical-align: middle; }
.dw-on .dw-table { display: table; width: 100%; }
.dw-on .chip.dw-chip { background: none; }
.dw-on .dw-kv { display: grid; gap: 14px; margin: 16px 0; }
.dw-on .dw-kv div { display: grid; gap: 2px; }
.dw-on .dw-kv dt { font: 600 13px/1.2 var(--font); }
.dw-on .dw-kv dd { display: grid; gap: 2px; margin: 0; }
.dw-on .dw-kv b { font: 700 24px/1.15 var(--font); letter-spacing: -.02em; }
.dw-on .dw-kv span { font: 500 13.5px/1.35 var(--font); }

/* ---- the portal's phone layout at the frame's width ------------------------------------------------------------ */
@media (max-width: 900px) {
  .dw-on .dw-cbody, .dw-on .dw-cbody.is-map, .dw-on .dw-mgrid { grid-template-columns: minmax(0, 1fr); }
  .dw-on .dw-map { min-height: 280px; }
  .dw-on .dw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-on .dw-fgrid { grid-template-columns: minmax(0, 1fr); }
  .dw-on .dw-evlist li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .dw-on .dw-evlist time, .dw-on .dw-evlist .chip { display: none; }
  .dw-on .dw-mtable { font-size: 13px; }
  .dw-notes { bottom: 76px; }
}
.dw-on h1[tabindex="-1"]:focus { outline: none; }