/* Daylight Drive: structure. Layout, spacing, sizing and the shapes that carry meaning (the
   leave diamond, the arrive circle). Colours, type and finish are in daylight-drive-look.css.
   Borders set their width and style here; the look sets their colour.
   Everything is scoped to the app's root element, which stands in for :root and body. */
#daylight-drive{
  &, *{box-sizing:border-box}
  &{
    margin:0;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:max(24px,env(safe-area-inset-bottom,0px));
    padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  .wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-block:16px}
  /* The result's verdict and cards stack with the same gap as the boxes above them; only when
     shown, as display would otherwise override its hidden attribute. */
  #result:not([hidden]){display:flex;flex-direction:column;gap:16px}
  header{display:flex;align-items:center;justify-content:space-between;gap:12px}
  h1{margin:0;display:flex;align-items:center;gap:10px}
  h2{margin:0}
  .card{border:1px solid;padding:16px;display:flex;flex-direction:column;gap:14px}
  label{display:block;margin-bottom:4px}
  input,select{width:100%;border:1px solid;padding:11px 12px;min-height:46px}
  input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid;outline-offset:1px}
  button{cursor:pointer}
  .btn{border:0;padding:13px 16px;min-height:48px}
  .btn:disabled{opacity:.6;cursor:progress}
  .ghost{border:1px solid;min-height:46px;min-width:46px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .icon-btn{border:0;padding:8px;display:inline-flex}
  .row{display:flex;gap:8px;align-items:flex-end}
  .row > .grow{flex:1;min-width:0}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:380px){.grid2{grid-template-columns:1fr}}
  .field{position:relative}
  .suggest{position:absolute;left:0;right:0;top:100%;z-index:20;margin:4px 0 0;padding:4px;list-style:none;border:1px solid}
  .suggest li{padding:10px;cursor:pointer}
  .suggest li small{display:block}
  .row.between{justify-content:space-between;align-items:center}
  .stops{display:flex;flex-direction:column;gap:12px;margin-left:10px;padding-left:14px;border-left:2px dashed}
  .stops:empty{display:none}
  .stop{display:flex;flex-direction:column;gap:4px}
  .stop-head{display:flex;align-items:center;justify-content:space-between}
  .stop-head label{margin:0}
  .stop-head .icon-btn{padding:4px}
  .stop-grid{display:grid;grid-template-columns:1fr 112px;gap:8px}
  .stop-grid > *{min-width:0}
  .sched td:first-child{width:55%}
  .sched tr.leg td,.sched tr.pause td{border-bottom-style:dashed}
  .sched tr.leg td:first-child,.sched tr.pause td:first-child{padding-left:22px;position:relative}
  .sched tr.leg td:first-child::before,.sched tr.pause td:first-child::before{content:"";position:absolute;left:8px;top:0;bottom:0;border-left:3px solid}
  .sched tr.pause td:first-child::before{border-left-style:dotted}
  .sched small{display:block}
  .toggle{display:inline-flex;border:1px solid;overflow:hidden}
  .toggle button{border:0;padding:6px 10px;min-height:34px}
  .jchart{display:grid;grid-template-columns:88px 1fr;gap:8px}
  .jchart > *{min-width:0}
  .jlabels,.jtracks{display:flex;flex-direction:column;gap:8px}
  .jlabel{height:40px;overflow:hidden}
  .jlabel b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jlabel small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jtracks{position:relative}
  .jrow{position:relative;height:40px}
  .jrow .track{height:20px}
  .jlines{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none;z-index:1}
  .jlines .halo{stroke-width:6;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .jlines .drive{stroke-width:3;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .stay{position:absolute;top:7px;height:6px;z-index:1}
  .mk{position:absolute;top:10px;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid;z-index:2;box-sizing:border-box}
  .mk.arrive{border-radius:50%}
  .mk.leave{border-radius:2px;transform:rotate(45deg)}
  .mk-t{position:absolute;top:22px;z-index:3;white-space:nowrap}
  .mk-t.l{margin-left:4px;padding:0 3px} .mk-t.r{transform:translateX(-100%);margin-left:-4px;padding:0 3px}
  .axis.inner{margin-left:0}
  .checks{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
  .checks legend{padding:0;margin-bottom:6px}
  .check{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:36px;cursor:pointer}
  .check input{width:20px;height:20px;min-height:0;margin:0}
  .slide{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px}
  .slide label{margin:0}
  .slide input[type=range]{grid-column:1 / -1;padding:0;border:0;min-height:36px}
  .mk-sw{border:0} .mk-sw.leave{transform:rotate(45deg) scale(.85)} .mk-sw.arrive{border-radius:50%}
  .line-sw{border:0;height:3px} .stay-sw{border:0;height:6px}
  .hint{margin:0}
  .err{padding:10px 12px;margin:0}
  /* verdict */
  .verdict{padding:16px;display:flex;flex-direction:column;gap:6px}
  .verdict.ok,.verdict.bad{border:1px solid}
  .t{white-space:nowrap}
  .facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
  .facts dd{margin:0}
  /* timeline */
  .tl{display:flex;flex-direction:column;gap:6px}
  .tl-row{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center}
  .tl-row > span{overflow:hidden;text-overflow:ellipsis}
  .track{position:relative;height:22px;overflow:hidden;border:1px solid}
  .band{display:flex;height:100%}
  .band i{flex:1}
  .win{position:absolute;top:2px;bottom:2px}
  .now{position:absolute;top:-2px;bottom:-2px;width:2px}
  .axis{position:relative;height:16px;margin-left:84px}
  .axis b{position:absolute;transform:translateX(-50%)}
  .legend{display:flex;flex-wrap:wrap;gap:12px}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .sw{width:12px;height:12px;display:inline-block;border:1px solid}
  .map{width:100%;border:1px solid;display:block;aspect-ratio:2/1;object-fit:cover}
  table{width:100%;border-collapse:collapse}
  th,td{text-align:left;padding:6px 4px;border-bottom:1px solid}
  .tbl{overflow-x:auto}
  @media (prefers-reduced-motion:no-preference){.btn,.ghost{transition:transform .08s} .btn:active,.ghost:active{transform:scale(.98)}}
}