body{margin:0;background:#000}
[hidden]{display:none!important}
.frame{position:relative;height:100vh;height:100dvh;box-sizing:border-box;background:#000;color:#fff;display:flex;flex-direction:column;font-family:ui-monospace,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;font-size:16px;line-height:1.4}
.scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0}
.row>.k{flex-shrink:0}.row>.v{text-align:right;min-width:0;overflow-wrap:anywhere}
.row.nowrap{white-space:nowrap}
.row>.v.dom{word-break:keep-all;overflow-wrap:normal;hyphens:none}.v.dom .seg{white-space:nowrap}
.sect-head{padding:2px 0}
.rule{white-space:nowrap;overflow:hidden;padding:10px 0 6px}
.rule-foot{padding:0 12px}
.rule-named{display:flex;gap:8px;white-space:nowrap;overflow:hidden;padding:10px 0 6px}.rule-named>span:last-child{overflow:hidden}
.title{font-weight:700;padding:6px 0 2px}
.title-top{font-weight:700;padding:0 0 4px}
.note{padding:6px 0}.note-small{padding:6px 0;font-size:14px}
.foot{display:flex;font-size:12px;padding:0 4px calc(20px + env(safe-area-inset-bottom))}
.foot button{display:flex;align-items:center;justify-content:center;min-height:56px;color:#fff;background:#000;border:0;border-left:2px dotted #fff;font:inherit;font-size:12px;text-decoration:none;box-sizing:content-box;flex:1 0 auto;padding:0;white-space:nowrap}
.foot button:first-child{border-left:0}.foot button.on{font-weight:700}
.banner{background:#fff;color:#000;text-align:center;padding:8px;font-weight:700}
.btn{min-height:44px;padding:0;background:#000;color:#fff;border:0;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
.btn-small{min-height:44px;padding:0 4px;background:#000;color:#fff;border:0;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.full{position:absolute;inset:0;z-index:20;background:#000;display:flex;flex-direction:column;padding:12px 12px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box;padding-top:calc(12px + env(safe-area-inset-top))}
.mapbox{flex:1;position:relative;overflow:hidden;min-height:360px}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen-map{margin:-16px -16px -8px}
/* The Map screen (spec ruling 46, R3, R4, R7, A1; prototypes in docs/BRIEF_M1_M2_v3.md): one monospace font, no bold,
   13 px, letter-spacing 0.5 px; two left-justified top lines, the state plain and the action in brackets, no GPS status at right;
   a 2 px dotted rule above the map; [FULL SCREEN] inside the map panel at its top right. Tap targets stay 44 px (ruling 16). */
.screen-map{font-size:13px;letter-spacing:.5px}
.screen-map *{font-weight:400!important}
/* F1 (Andrew's iPhone check, 17 October 2026): a long press on the map (M10) also started iOS text selection over the
   Map screen (its Copy / Look Up / Translate bar and a blue tint). Nothing on the Map screen is selectable and it has no
   callout; the other screens keep their text selectable. The map page refuses the same inside its frame. */
.screen-map,.screen-map *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.screen-map .banner{font-size:13px}
.mapline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 14px;padding:0 16px;white-space:nowrap}
.mapstate{display:flex;gap:14px;align-items:center}
.mapact{min-height:44px;padding:0;background:none;border:0;color:#fff;font:inherit;letter-spacing:inherit;cursor:pointer}
.maprule{border-top:2px dotted #fff}
.mapfull{position:absolute;right:12px;top:0;z-index:2;font-size:12px}
.mapwrap.fs .mapfull{display:none}
/* R1 (Andrew ruling, 17 October 2026, spec ruling 51; prototype SE_Compact in docs/BRIEF_compact_map.md): under 700 px of
   viewport height (html.compact, map.js syncCompact) the Map screen's top two lines are 32 px apart and the footer is
   44 px with 15 px under it; R2 (Andrew ruling, 17 October 2026, spec ruling 52): the footer so on every screen, so it
   never moves when the tab changes. Text sizes, fonts and colours unchanged; the map page takes its own compact spacing
   from pwa:compact. With the viewport 700 px or more tall none of this applies. */
html.compact .mapline .mapact{min-height:32px}
html.compact .foot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
html.compact .foot button{min-height:44px}
.simbox{padding:6px 16px;display:flex;flex-direction:column;gap:2px}
.simlabel{display:flex;justify-content:space-between}
#sim-km{width:100%;height:44px;accent-color:#fff;color:#fff}
.simends{display:flex;justify-content:space-between}
.fullhead{display:flex;justify-content:space-between;align-items:center}
.mapwrap{flex:1;display:flex;flex-direction:column}
.mapwrap.fs{position:fixed;inset:0;z-index:20;background:#000;padding:12px 12px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box;padding-top:calc(12px + env(safe-area-inset-top))}
.mapwrap.fs .mapbox{border:1px dotted #fff;margin-top:6px}
.b{font-weight:700}
.ithead{display:flex;justify-content:space-between;padding:0 0 4px}
.day{border-top:3px dotted #fff;margin-top:22px;padding-top:16px}
.dayhead{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;margin:0 -8px 4px;font-weight:700}
.dayhead.today{background:#fff;color:#000}
.listhead{padding:8px 0 2px}
.tree{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
.tat{flex-shrink:0;text-align:right}
.tsub{padding:0 0 3px;white-space:nowrap}.tpre{display:inline-block;width:3ch;white-space:pre;vertical-align:top}.ttext{display:inline-block;width:calc(100% - 3ch);white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.alert{font-weight:800}
a{color:#fff}a:hover{color:#fff}
.note a,.row .v>a{display:inline-block;padding:11px 0;margin:-11px 0}
.row.ctl{align-items:center;gap:12px}
.date{min-height:44px;background:#000;color:#fff;border:1px dotted #fff;padding:0 8px;font-size:16px;font-family:inherit;text-align:right;color-scheme:dark}
.togs{display:flex;gap:12px}
.tog{min-height:44px;min-width:44px;padding:0;border:0;background:#000;color:#fff;font-size:16px;font-family:inherit;cursor:pointer}.tog.sel{font-weight:800}
.wxmap{position:relative;height:340px;margin:6px 0 8px;border:1px dotted #fff;flex-shrink:0}
.wxcmbox{position:absolute;inset:0}
.wxcm{position:absolute;inset:0}
.wxmapctl{position:absolute;left:4px;top:4px;z-index:2;display:flex;gap:4px}
.wxmapctl .btn-small{min-width:44px}
.cmsvg{--k:1;width:100%;height:100%;display:block;background:#000;touch-action:none;cursor:grab}
.cmsvg.panning{cursor:grabbing}
.cmsvg .cell{cursor:pointer}
.cmsvg .cell polygon{fill:none;stroke:none;pointer-events:all}
.cmsvg .cell.sel polygon{fill:#fff}
.cmsvg .cedge{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;pointer-events:none}
.cmsvg .selclip{fill:#000;stroke:none}
.cmsvg .cnum{fill:#fff;font-size:calc(17px * var(--k));font-weight:700;paint-order:stroke;stroke:#000;stroke-width:calc(3px * var(--k));stroke-linejoin:round;pointer-events:none}
.cmsvg .cnum.sel{fill:#000;stroke:#fff}
.cmsvg .croute,.cmsvg .croute-sel{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.cmsvg .croute-sel{stroke:#000}
.cmsvg .cnode{fill:#fff;stroke:#000;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.cmsvg .clabel{fill:#fff;font-size:calc(13px * var(--k));paint-order:stroke;stroke:#000;stroke-width:calc(3px * var(--k));stroke-linejoin:round;pointer-events:none}
.cmsvg .clabel.hid{display:none}
/* ruling 57 V1 (SONAR): a solid 2 px green outline and a faint green fill; the trail, dots, names and number stay white
   inside it, with their black edges (no inversion). CLASSIC keeps the white cell and the black inversion above. */
[data-palette="SONAR"] .cmsvg .cell.sel polygon{fill:rgba(65,255,0,0.22);stroke:#41FF00;stroke-width:2;vector-effect:non-scaling-stroke}
[data-palette="SONAR"] .cmsvg .croute-sel{stroke:#fff}
[data-palette="SONAR"] .cmsvg .cnum.sel{fill:#fff;stroke:#000}
.cmsvg .cnorth{pointer-events:none}
.cmsvg .cnorth line{stroke:#fff;stroke-width:1.5}
.cmsvg .cnorth polygon{fill:#fff;stroke:none}
.cmsvg .cnorth text{fill:#fff;font-size:12px;font-weight:600}
.wxfull{position:absolute;right:4px;bottom:4px}
.wxmap.fs{position:fixed;inset:0;z-index:20;height:auto;margin:0;border:0;background:#000;display:flex;flex-direction:column;padding:12px 12px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box;padding-top:calc(12px + env(safe-area-inset-top))}
.wxmap.fs .wxcmbox{position:relative;flex:1;border:1px dotted #fff;margin:6px 0}
.fullsel{display:flex;justify-content:space-between;white-space:nowrap}
.period{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pbtn{min-height:44px;border:0;background:#000;color:#fff;font-size:16px;font-family:inherit;cursor:pointer}.pbtn.sel{font-weight:800}
.left{text-align:left}.right{text-align:right}
/* backlog W1 (the W1 prototypes): one sideways scroller for the whole table; each hourly day a block that opens on 6am to
   6pm (13 rows of 38 px) and scrolls up and down inside itself; the day header, the cues and the hour column stay put */
.wxbox{overflow-x:auto;overflow-y:hidden;font-size:15px;flex-shrink:0}
.wxtable{width:max-content;min-width:100%}
.wxhead,.wxrow{display:grid;grid-template-columns:70px 60px 72px 66px 72px 56px 60px 60px;width:max-content;min-width:100%;align-items:center;height:38px;box-sizing:border-box}
.wxdaily .wxhead,.wxdaily .wxrow{grid-template-columns:80px 70px 72px 66px 72px 56px 60px 60px}
.wxhead{background:#000}
.wxrow{border-top:1px dotted #888}
.wxrows{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.wxdayhead{height:40px;display:flex;align-items:flex-end;padding-bottom:6px;box-sizing:border-box;border-top:2px dotted #fff;margin-top:10px;position:sticky;left:0}
.wxday:first-child .wxdayhead{margin-top:0}
.wxcue{height:26px;display:flex;align-items:center;color:#888;font-size:13px;position:sticky;left:0;width:max-content}
.wxnote{padding:12px 0;border-top:2px dotted #fff;margin-top:10px;line-height:1.4;font-size:15px}
.wxcell{padding:6px 4px;text-align:right;white-space:nowrap}
.wxfirst{position:sticky;left:0;background:#000;text-align:left}