/* App layout on top of the engine page's colour tokens (blueskies.engine.page.STYLE). */
body{padding:0 16px 24px}
/* Top bar: brand, the four places (the current one bold with a bar under it), then Settings and Sign out,
   quieter, at the right. On a phone the places drop to their own line and scroll sideways rather than wrap. */
.top{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;
  max-width:1040px;margin:0 auto;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:18px}
.brand{font-weight:800;color:var(--fg);text-decoration:none;font-size:1.05rem}
nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
nav a{color:var(--fg)}
nav.places{gap:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
nav.places a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.places a:hover{color:var(--fg)}
nav.places a[aria-current]{color:var(--fg);font-weight:600;border-bottom-color:var(--fg)}
.account{display:flex;gap:14px;align-items:center;margin-left:auto;font-size:.9rem}
.account a,.account button.link{color:var(--muted);text-decoration:none}
.account a:hover,.account button.link:hover{color:var(--fg);text-decoration:underline}
.account a[aria-current]{color:var(--fg);font-weight:600}
@media (max-width:599px){nav.places{order:3;flex-basis:100%}}
form.inline{display:inline;margin:0}
a{color:var(--fg)}
button{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--fg);background:var(--fg);
  color:var(--bg);cursor:pointer}
button.link{background:none;border:0;padding:0;color:var(--fg);text-decoration:underline}
button.quiet{background:var(--card);color:var(--fg);border-color:var(--line)}
input,select{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);
  color:var(--fg);width:100%;max-width:100%}
label{display:block;font-weight:600;margin:10px 0 4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.card.narrow{max-width:460px;margin-inline:auto}
.card form button{margin-top:12px}
.error{color:var(--nogo);font-weight:600}
.field-error{color:var(--nogo);font-size:.85rem;margin:2px 0 0}
/* Home page */
.notice{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
h1.today{font-size:1.2rem;margin:0 0 12px}
h1.today .sub{font-weight:400;font-size:.9rem;margin-left:6px}
.blocks{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.home-block{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--none);
  border-radius:12px;padding:14px 16px;min-width:0}
.home-block.v-go{border-left-color:var(--go)}.home-block.v-marginal{border-left-color:var(--marg)}
.home-block.v-later{border-left-color:var(--marg)}.home-block.v-nogo{border-left-color:var(--nogo)}
.home-block h2{font-size:1rem;margin:0}
.ident{color:var(--muted);font-weight:600;font-size:.8rem;margin-left:4px}
.verdict{font-size:1.6rem;font-weight:800;margin:4px 0 0;line-height:1.2}
.verdict.later{color:var(--marg)}.verdict-day{color:var(--fg)}
.reason{color:var(--muted);margin:2px 0 0;font-size:.9rem}
.tl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin:12px 0 24px}
.tl .cell{height:26px;border-radius:4px;background:var(--none);position:relative}
.tl .cell.go{background:var(--go)}.tl .cell.tent{background:var(--tent)}.tl .cell.marginal{background:var(--marg)}.tl .cell.nogo{background:var(--nogo)}
.tl .cell.past{background:var(--soft)}.tl .cell.dark{background:var(--line)}
.tl .cell.now{outline:2px solid var(--fg);outline-offset:1px}
.tl .cell span{position:absolute;top:28px;left:0;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* Cells are buttons (tap for why): undo the global button look */
.tl .cell{font:inherit;padding:0;border:0;margin:0;color:var(--bg);cursor:pointer;display:flex;align-items:center;
  justify-content:center;min-width:0}
.tl .cell b{font-size:.85rem;font-weight:800;line-height:1;pointer-events:none}
.tl .cell b.many{font-size:.68rem;letter-spacing:-.04em}
/* The tapped hour: a small pointer below the hour labels, aimed at the line it explains (the white outline means now) */
.tl .cell.sel::after{content:"";position:absolute;top:36px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--fg);pointer-events:none}
.tl .cell:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.tl-why{margin:-2px 0 12px;font-size:.85rem;color:var(--fg);min-height:2.6em}
.tl-why .f-go{color:var(--go)}.tl-why .f-marginal{color:var(--marg)}.tl-why .f-nogo{color:var(--nogo);font-weight:600}
/* Scenarios: one light-tinted row per scenario, coloured by its best slot */
.chips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.chip{--c:var(--muted);border-left:4px solid var(--c);border-radius:3px;padding:5px 10px;font-size:.85rem;
  max-width:100%;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--card))}
.chip.go{--c:var(--go)}.chip.marginal,.chip.later{--c:var(--marg)}.chip.nogo{--c:var(--nogo)}
.chip.none{--c:var(--muted);background:var(--soft)}
.chip a{color:inherit;text-decoration:none}
.chip b{color:var(--fg)}
.chip .times{color:inherit}
.chip.none .times{color:var(--muted)}
.chip.flagged{border-left-style:dashed}
.chip .flag{display:block;font-size:.75rem;color:var(--muted)}
.chip .note{color:var(--muted);cursor:help;vertical-align:-2px;margin-left:2px}
.chip .note:hover,.chip .note:focus{color:var(--fg)}
.chip details.trip>summary{list-style:none;cursor:pointer}
.chip details.trip>summary::-webkit-details-marker{display:none}
.chip details.trip>summary:focus-visible{outline:2px solid var(--c);outline-offset:2px;border-radius:2px}
.trip-panel{margin:8px 0 4px}
.trip-panel img{display:block;width:100%;max-width:520px;height:auto;aspect-ratio:340/180;border-radius:6px;border:1px solid var(--line)}
.trip-note{margin:6px 0 0;font-size:.8rem;color:var(--muted)}
.trip-panel .evidence{display:inline-block;margin-top:6px;font-size:.75rem;color:var(--muted);text-decoration:underline}
/* The day's 2-hour map slots: one row on a wide screen, two by two on a phone; each map over its two hours */
/* (.map-slots and .map-slot: the engine report styles, shared through STYLE, already use .slots and .slot) */
.tl.map-slots{grid-auto-columns:minmax(0,1fr);gap:8px;margin:12px 0 4px}
/* The frame holds a map's square before it loads (area-maps.mjs shimmers it with .sk until then); the image and,
   without JavaScript, its <noscript> copy sit on top of it */
.map-frame{display:block;position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--soft)}
.map-frame img{position:absolute;inset:0;display:block;width:100%;height:100%}
.map-frame img[data-src]{opacity:0}
.map-frame.failed::before{content:"Map not available";position:absolute;inset:0;display:grid;place-items:center;
  padding:8px;text-align:center;font-size:.8rem;color:var(--muted)}
.map-slot .pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:4px 0 22px}
@media (max-width:600px){.tl.map-slots{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}
.area-legend[hidden]{display:none}
.area-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 10px;padding:0;font-size:.8rem;color:var(--muted)}
.area-legend li::before{content:"";display:inline-block;width:.8em;height:.8em;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--c)}
.area-legend .go{--c:var(--go)}.area-legend .tent{--c:var(--tent)}.area-legend .marginal{--c:var(--marg)}.area-legend .nogo{--c:var(--nogo)}.area-legend .none{--c:var(--none)}
.age{color:var(--muted);font-size:.8rem;margin:10px 0 0}
.who{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
/* Evidence */
.crumb{margin:0 0 8px}
.ev-title{font-size:1.15rem;margin:0 0 12px}
.ev-h{font-size:.95rem;margin:14px 0 6px}
.verdict-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.limits{margin:0;padding-left:18px;columns:2 220px;font-size:.88rem}
.src{color:var(--muted);font-size:.8rem}
.src.scenario{color:var(--marg);font-weight:600}
.warn{color:var(--marg);font-weight:600}
.evidence-body details.row{display:block}
/* Settings */
.hint{color:var(--muted);font-size:.85rem;margin:2px 0 6px}
.grid{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.field.has-error input{border-color:var(--nogo)}
.check{display:flex;gap:8px;align-items:center;font-weight:600}
.check input{width:auto}
.homes,.results{list-style:none;padding:0;margin:8px 0}
.homes li,.results li{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--soft)}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row-actions button{padding:4px 10px}
.search-row{display:flex;gap:8px}
.search-row button{flex:none;margin:0}
fieldset.choice{border:0;padding:0;margin:10px 0}
fieldset.choice legend{font-weight:600;margin-bottom:4px}
button.danger{color:var(--nogo);border-color:var(--nogo)}
/* Drag to reorder */
.grip{display:flex;gap:10px;align-items:center;min-width:0}
.handle{cursor:grab;touch-action:none;user-select:none;color:var(--muted);font-size:1.2rem;padding:4px 6px;
  border-radius:6px;line-height:1}
.handle:hover{background:var(--soft)}
.sortable li.dragging{opacity:.6;background:var(--soft);border-radius:8px}
.sortable li.dragging .handle{cursor:grabbing}
/* Settings tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 14px;overflow-x:auto}
.tab{padding:8px 14px;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;
  white-space:nowrap;font-weight:600}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);border-bottom-color:var(--fg)}
/* Icon buttons and handles */
button.handle{background:none;border:0;color:var(--muted);font-size:1.2rem;padding:4px 6px;line-height:1}
button.handle:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid transparent;color:var(--muted);
  padding:6px;border-radius:8px}
.icon-btn:hover{border-color:var(--line);background:var(--soft)}
.icon-btn.danger:hover{color:var(--nogo)}
.icon-btn span{font-size:.9rem}
.icon-btn.danger{border-color:transparent;color:var(--muted)}
.icon-btn.danger:hover,.icon-btn.danger:focus-visible{color:var(--nogo);border-color:var(--line);background:var(--soft)}
/* Confirm dialog */
dialog.modal{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--card);color:var(--fg);
  width:min(360px,calc(100vw - 32px));box-shadow:0 12px 40px rgba(0,0,0,.25)}
dialog.modal::backdrop{background:rgba(15,23,32,.45)}
.modal-title{font-weight:700;font-size:1.05rem;margin:0 0 18px;overflow-wrap:anywhere}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
.modal-actions button{margin:0}
button.danger-solid{background:var(--nogo);border-color:var(--nogo);color:#fff}
.brand:hover,.brand:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* One list of days; today's heading stands out */
.day-section{margin:0 0 22px}
.day-title{font-size:1rem;margin:0 0 8px;color:var(--muted);font-weight:700}
.day-section.today .day-title{font-size:1.25rem;color:var(--fg);font-weight:800}
.home-once{font-weight:600}
.home-block .home-name+.verdict{margin-top:4px}
textarea{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
.sub-line{display:block;color:var(--muted);font-size:.85rem}
.surface-row{display:flex;gap:12px;align-items:center}
.surface-row input[type=text],.surface-row input:not([type]){max-width:9em}
.surface-row .check{margin:0;font-weight:400}
input:disabled{opacity:.5}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Airfield page */
table.runways{min-width:0;width:auto;font-size:.9rem}
button.toggle{background:var(--card);color:var(--fg);border:1px solid var(--line)}
button.toggle.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.notes{list-style:none;padding:0;margin:0}
.notes li{border-bottom:1px solid var(--soft);padding:8px 0}
.note-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
/* Homes tab: aircraft under each home airfield */
.home-group{display:block!important;padding:10px 0}
.home-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.planes{margin:6px 0 0 28px}
/* Airfield type-ahead */
.lookup{list-style:none;margin:4px 0 0;padding:4px 0;border:1px solid var(--line);border-radius:8px;background:var(--card);
  box-shadow:0 6px 18px rgba(0,0,0,.12);max-width:100%}
.lookup li{padding:8px 12px;cursor:pointer}
.lookup li[aria-selected="true"],.lookup li[role="option"]:hover{background:var(--soft)}
.lookup .lookup-note{color:var(--muted);cursor:default;font-size:.88rem}
.search-row{position:relative;flex-wrap:wrap}
.search-row .lookup{flex-basis:100%}
nav.tabs{flex-wrap:nowrap;gap:0;scrollbar-width:none}
nav.tabs .tab{padding:8px 11px}
.planes li{flex-wrap:nowrap}
.planes .grip{min-width:0;flex:1}
@media (min-width:600px){nav.tabs{flex-wrap:wrap;overflow-x:visible}}
@media (max-width:420px){nav.tabs .tab{padding:8px 7px;font-size:.88rem}}
/* Been there? / Would you go? */
.relation{display:grid;gap:8px}
.relation>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.seg-label{font-weight:600;min-width:7.5em}
.segs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.segs form{display:inline}
button.seg{border:0;border-right:1px solid var(--line);border-radius:0;background:var(--card);color:var(--fg);padding:6px 12px}
.segs form:last-child button.seg{border-right:0}
button.seg.on{background:var(--fg);color:var(--bg)}
.rel-label{margin:0;font-weight:700}
/* Opening hours */
.hours-row{border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:8px 10px}
.hours-row legend{font-weight:600;font-size:.85rem;color:var(--muted)}
.hours-row .days{display:flex;flex-wrap:wrap;gap:4px 10px}
.hours-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.hours-line .check{margin:0}
input.short,select{width:auto;max-width:10em}
/* Logbook */
.logbook-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.logbook-head .ev-title{margin:0}
.segs a.seg{padding:6px 14px;text-decoration:none;color:var(--fg);background:var(--card);border-right:1px solid var(--line)}
.segs a.seg:last-child{border-right:0}
.segs a.seg.on{background:var(--fg);color:var(--bg)}
.segs a.seg:focus-visible{outline:2px solid var(--fg);outline-offset:-3px}
.totals{margin:0 0 14px;font-weight:600;font-variant-numeric:tabular-nums}
.trip-card{padding:12px 16px}
.trip-title{font-size:1rem;margin:0;overflow-wrap:anywhere}
.trip-sub{color:var(--muted);font-size:.85rem;margin:2px 0 6px}
.legs{list-style:none;margin:0;padding:0}
.leg{display:grid;grid-template-columns:6.6em minmax(0,1fr) auto;gap:4px 10px;padding:6px 0;border-top:1px dashed var(--line);
  font-size:.9rem}
.leg:first-child{border-top:0}
.leg-time,.leg-dur{font-variant-numeric:tabular-nums;color:var(--muted)}
.leg-dur{text-align:right;color:var(--fg)}
.leg-what{overflow-wrap:anywhere}
.leg-people{color:var(--muted)}
.leg-remarks{display:block;white-space:pre-line;color:var(--muted);font-size:.85rem}
.leg-what .note{display:inline-block}
.tag{display:inline-block;font-size:.75rem;padding:0 7px;border:1px solid var(--line);border-radius:9px;color:var(--muted);
  font-style:normal}
.leg.passenger{color:var(--muted)}
.leg.passenger .leg-route,.leg.passenger .leg-dur{color:var(--muted);font-style:italic}
.logbook-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.logbook-table{font-size:.82rem;min-width:720px}
.logbook-table th,.logbook-table td{white-space:nowrap}
.logbook-table td.remarks{white-space:normal;min-width:20em}
.logbook-table .num{text-align:right;font-variant-numeric:tabular-nums}
.logbook-table tr.trip-band td{background:var(--soft);padding-top:8px;border-bottom:1px solid var(--line);white-space:normal}
.logbook-table .band-sub{color:var(--muted);font-weight:400}
.logbook-table tr.passenger td{color:var(--muted);font-style:italic}
.paging{display:flex;justify-content:space-between;gap:12px;margin:6px 0 14px}
.paging a:only-child{margin-left:auto}
/* Airfields page: tab counts, rating rows */
.tab .n{color:var(--muted);font-weight:400;margin-left:2px;font-variant-numeric:tabular-nums}
main{min-width:0}
nav.tabs{max-width:100%}
.rated .what{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.rated .meta{display:block;color:var(--muted);font-size:.85rem}
.rate-actions{display:flex;flex-wrap:wrap;gap:6px}
.rate-actions form{margin:0}
.card .rate-actions button{padding:5px 10px;font-size:.88rem;margin:0}
.rated li{scroll-margin-top:12px}
/* Would you go? has five choices once been: separate buttons that wrap, rather than one segmented strip */
.segs.wants{border:0;border-radius:0;overflow:visible;flex-wrap:wrap;gap:6px}
.segs.wants button.seg,.segs.wants form:last-child button.seg{border:1px solid var(--line);border-radius:8px}

/* Today page placeholders while each home's forecast loads (today.mjs). Grey edge: never a verdict colour. */
.home-block.loading,.home-block.failed,.home-block.v-fetching{border-left-color:var(--line)}
.sk{margin:0;border-radius:6px;background:var(--soft);position:relative;overflow:hidden}
.sk-verdict{height:1.6rem;width:55%;margin-top:6px}
.sk-maps{aspect-ratio:4/1.2;margin:12px 0 24px}
.sk-line{height:2.1rem;margin-top:6px}.sk-line.short{width:70%}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);
  animation:sk-sweep 1.4s ease-in-out infinite}
@keyframes sk-sweep{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}.sk{opacity:.8}}
.home-block.failed .loading-word{color:var(--fg)}
.home-block .retry{margin-top:8px}