/* nodash — Traffic tab. A dark sea chart regardless of the app theme, so it carries its own
   palette. Everything is sized in em off #traffic-frame's font-size, which follows the
   frame's width (16px at 1920 px), so the layout scales as one picture. */

#traffic-wrap{container-type:inline-size}
#traffic-frame{
  --night:#0b1626; --plate:rgba(11,22,38,.94); --plate-lite:rgba(11,22,38,.76); --rule:rgba(233,238,245,.14); --hair:rgba(233,238,245,.08);
  --foam:#e9eef5; --mist:#8ea0bc; --ember:#e8a25a;
  --sky:#8cc0ff; --mil:#f5a623; --sea:#37d3c4; --bus:#c792ea; --red:#ff5c5c;
  --band:.32em; --gap:1.1em;
  position:relative;width:100%;height:max(560px,calc(100vh - var(--tf-off,150px)));overflow:hidden;
  background:var(--night);color:var(--foam);font-family:Mulish,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  /* 16px at a 1920 px frame, 32px at 3840: the whole layout is in em, so 1080p and 4K are the same picture */
  font-size:clamp(9px,.833cqw,40px);
}
/* Fullscreen: the frame fills the screen and scales off the viewport (cqw would measure the page, not the screen) */
#traffic-frame.tf-full,#traffic-frame:fullscreen{position:fixed;inset:0;width:100vw;height:100vh;z-index:3000;font-size:calc(100vw / 120)}
#traffic-frame *{box-sizing:border-box}
#tf-map{position:absolute;inset:0;z-index:0;background:var(--night)}  /* own stacking context: Leaflet panes (up to z 700) stay below the plates */
#tf-map.base-sat .leaflet-tile-pane{filter:saturate(.85) brightness(.78)}
/* "Dark" is Kartverket's grey topo, inverted like the sea chart (CARTO's dark tiles now answer "API key required") */
#tf-map.base-map .leaflet-tile-pane{filter:invert(1) brightness(.9) contrast(.95)}
/* Opening effect (see startIntro): panels, chart frame and labels are held back while the map flies in, then fade in. */
.tf-plate{transition:opacity .9s ease}
#tf-neat{transition:opacity 1s ease}
.leaflet-tooltip.gev-tag{transition:opacity .8s ease}
#traffic-frame.tf-intro-panels .tf-plate{opacity:0}
#traffic-frame.tf-intro #tf-neat,#traffic-frame.tf-intro .gev-quay span,#traffic-frame.tf-intro .leaflet-overlay-pane{opacity:0}
/* Leaflet stretches vector layers while a zoom runs, so vectors and crossing lines turn into fat bars for the whole flight:
   they are held back until the map has landed, then fade in at their real width */
.leaflet-overlay-pane{transition:opacity 1s ease}
/* Leaflet sets a tooltip's opacity inline, which beats any stylesheet rule: !important is the only way to hold the labels back */
#traffic-frame.tf-intro .leaflet-tooltip.gev-tag{opacity:0 !important}
.gev-quay span{transition:opacity .8s ease}
@media (prefers-reduced-motion: reduce){.tf-plate,#tf-neat,.leaflet-tooltip.gev-tag,.gev-quay span{transition:none}}
/* The sea chart is a paper chart. Dimming it left a pale grey sea that swallowed the vessels and their vectors (tried
   first, looked muddy); inverting it is how chart plotters make a night mode: dark sea, light linework, hues kept. */
#tf-map.base-chart .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.86) contrast(.9) saturate(.68)}
/* Leaflet's container sets its own fixed 12px font, which silently defeated every em below it (labels, attribution):
   take the frame's size instead so labels and controls scale with the picture, 1080p to 4K */
#tf-map.leaflet-container{font-family:inherit;font-size:1em}
#tf-map .leaflet-bar a{width:2em;height:2em;line-height:2em;font-size:1.2em}
#tf-neat{position:absolute;inset:0;z-index:450;pointer-events:none;width:100%;height:100%}
#tf-neat text{font:700 .72em Mulish;fill:var(--foam);paint-order:stroke;stroke:var(--night);stroke-width:.25em}

.tf-plate{position:absolute;z-index:500;background:var(--plate);border:1px solid var(--rule)}
.tf-plate h2{font:700 .95em/1.2 Mulish;margin:0 0 .5em;color:var(--foam);display:flex;align-items:baseline}
/* Hierarchy: the title and the departures are the two panels with weight. Everything else is quiet: a hairline border,
   and a small muted heading instead of a bold bright one, so the eye goes to "when is the next ferry" first. */
#tf-side .tf-plate,#tf-side2 .tf-plate,#tf-left .tf-plate{border-color:var(--hair)}
#tf-side .tf-plate h2,#tf-side2 .tf-plate h2,#tf-left .tf-plate h2{font:600 .8em Mulish;color:var(--mist);margin-bottom:.4em}
#tf-side .tf-plate h2 small,#tf-side2 .tf-plate h2 small,#tf-left .tf-plate h2 small{font-size:.95em}
.tf-plate h2 small{font:400 .84em Mulish;color:var(--mist);margin-left:.5em}

#tf-cartouche{top:calc(var(--band) + var(--gap));left:calc(var(--band) + var(--gap));padding:1em 1.25em 1.1em;width:25em}
#tf-title{font:800 2.7em/.95 Mulish,sans-serif;letter-spacing:-.02em;margin:0;color:var(--foam)}
#tf-sub{font:400 .95em/1.35 Mulish;color:var(--mist);margin:.55em 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:.35em}
.tf-chip{display:inline-flex;align-items:center;gap:.5em;font:700 .8em Mulish;padding:.22em .75em .22em .6em;border:1px solid var(--rule);border-radius:2em;color:var(--foam)}
.tf-chip i{width:.62em;height:.62em;border-radius:50%;background:var(--mist);flex:none}
.tf-chip-t{font-weight:400;color:var(--mist)}
.tf-chip.live i{background:var(--sea);box-shadow:0 0 0 .2em rgba(55,211,196,.2)}
.tf-chip.delayed,.tf-chip.stale{border-color:rgba(245,166,35,.5)}
.tf-chip.delayed i,.tf-chip.stale i{background:var(--mil)}
.tf-chip.down{border-color:rgba(255,92,92,.55);color:var(--red)}
.tf-chip.down i{background:var(--red)}
.tf-issues{color:var(--mil);font-size:.85em}
#tf-sub .warn{color:var(--mil);font-weight:700}
#tf-weather{font:700 1em/1.35 Mulish;margin:.2em 0 0;color:var(--foam)}
#tf-legend{display:flex;flex-wrap:wrap;gap:.35em 1.1em;margin:.8em 0 0;padding:.7em 0 0;border-top:1px solid var(--hair);
  list-style:none;font:400 .88em Mulish;color:var(--mist)}
#tf-legend li{display:flex;align-items:center;gap:.4em}
#tf-legend b{font-weight:700;color:var(--foam)}
#tf-legend svg{width:1em;height:1em;flex:none}
#tf-style{display:flex;gap:.3em;margin-top:.8em;flex-wrap:wrap}
#tf-style button{border:1px solid var(--rule);background:transparent;color:var(--mist);font:700 .75em Mulish;padding:.3em .7em;cursor:pointer}
#tf-style button.active{color:var(--night);background:var(--foam);border-color:var(--foam)}
#tf-style button:hover:not(.active){color:var(--foam)}
#tf-style button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

#tf-left{position:absolute;z-index:500;left:calc(var(--band) + var(--gap));width:25em;display:flex;flex-direction:column;gap:var(--gap);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
#tf-left .tf-plate{position:static;flex:none;padding:.8em 1.1em .6em;background:var(--plate-lite)}
.tf-ledger{display:flex;flex-direction:column}
.tf-ledger > div{border-top:1px solid var(--hair);padding:.34em 0}
.tf-ledger > div:first-child{border-top:0;padding-top:0}
.tf-rd{display:flex;align-items:baseline;gap:.6em;font-size:.85em}
.tf-rd b{flex:none}
.tf-rd span{flex:1;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-rd i{flex:none;font-style:normal;color:var(--mist)}
.tf-rd.closed i{color:var(--red);font-weight:700}
.tf-inc-top{display:flex;align-items:baseline;gap:.6em;font-size:.8em;flex-wrap:wrap}
.tf-inc-top b{flex:none}
.tf-inc-top em{font-style:normal;color:var(--sea);font-weight:700;flex:none}
.tf-inc-area{flex:1 1 auto;min-width:0;text-align:right;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-inc-when{flex:none;margin-left:auto;white-space:nowrap;color:var(--mist)}
.tf-inc-text{font-size:.85em;line-height:1.4;margin-top:.15em}
.tf-inc-text.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tf-inc-top u{text-decoration:none;flex:none;color:var(--mist);border:1px solid var(--rule);border-radius:2em;padding:0 .55em;font-size:.92em}
.tf-inc-last{font-size:.8em;line-height:1.35;color:var(--mist);margin-top:.3em;padding-left:.6em;border-left:2px solid var(--rule);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tf-inc-last b{color:var(--foam)}
.tf-cr-now b{font-size:1em}
.tf-cr-now div{font-size:.85em;color:var(--mist);margin-top:.1em}
.tf-cr-next{display:flex;align-items:baseline;gap:.6em;font-size:.85em}
.tf-cr-next b{flex:none;width:3.6em}
.tf-cr-next span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-cr-next i{flex:none;font-style:normal;color:var(--mist)}

#tf-departures{left:calc(var(--band) + var(--gap));bottom:calc(var(--band) + var(--gap));width:25em;padding:1em 1.25em .8em 1.1em;border-left:.22em solid var(--foam)}
.tf-dep-next{display:flex;align-items:baseline;gap:.9em;padding-bottom:.6em}
.tf-dep-next .t{font:800 3em/1 Mulish,sans-serif;letter-spacing:-.02em}
.tf-dep-next .d{display:flex;flex-direction:column;gap:.15em}
.tf-dep-next .to{font:700 1.15em Mulish}
.tf-dep-next .in{font:400 .9em Mulish;color:var(--mist)}
.tf-count{font-weight:800;font-size:1.12em;color:var(--foam)}
.tf-dep-row{display:flex;align-items:baseline;gap:.9em;border-top:1px solid var(--hair);padding:.4em 0}
.tf-dep-row .t{font:800 1.3em/1 Mulish,sans-serif;flex:none;width:3.6em}
.tf-dep-row .to{font:400 .9em Mulish;color:var(--mist);flex:1}
.tf-live{color:var(--sea)}
/* departures timeline: one tick per departure along the next few hours; the next one is the tall tick */
.tf-tl{position:relative;height:1.9em;margin:.3em 0 .4em}
.tf-tl-axis{position:absolute;left:0;right:0;top:.75em;height:1px;background:var(--rule)}
.tf-tl-dep{position:absolute;top:.3em;width:.17em;height:.9em;margin-left:-.085em;background:var(--mist);border-radius:.1em}
.tf-tl-dep.live{background:var(--sea)}
.tf-tl.bus .tf-tl-dep{background:var(--bus)}
.tf-tl-dep.first{top:.05em;height:1.4em;width:.26em;margin-left:-.13em;background:var(--foam)}
.tf-tl-dep.first.live{background:var(--sea)}
.tf-tl.bus .tf-tl-dep.first{background:var(--bus)}
.tf-tl-h{position:absolute;top:1.3em;transform:translateX(-50%);font-size:.62em;color:var(--mist)}
.tf-tl-h::before{content:'';position:absolute;left:50%;top:-.6em;width:1px;height:.45em;background:var(--rule)}
/* several quays: a labelled board each, the next departure a little smaller */
.tf-dep-quay{display:flex;align-items:center;gap:.5em;font:700 .85em Mulish;color:var(--foam);margin:.7em 0 .3em}
.tf-dep-quay::before{content:'';width:.55em;height:.55em;border-radius:50%;background:var(--sea);flex:none}
.tf-dep-quay.bus::before{background:var(--bus)}
.tf-dep-quay:first-child{margin-top:0}
.tf-dep-multi .tf-dep-next{padding-bottom:.3em}
.tf-dep-multi .tf-dep-next .t{font-size:2.2em}
.tf-dep-multi .tf-dep-row{padding:.25em 0}
/* three boards: the next departure shrinks a step further */
.tf-dep-compact .tf-dep-next .t{font-size:1.6em}
.tf-dep-compact .tf-dep-row .t{font-size:1.1em}
.tf-dep-compact .tf-dep-quay{margin:.5em 0 .2em}
.tf-line{color:var(--bus);font-weight:800}
.tf-dep-next .d{min-width:0}
.tf-dep-next .to,.tf-dep-row .to{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#tf-side{position:absolute;z-index:500;top:calc(var(--band) + var(--gap));right:calc(var(--band) + var(--gap));width:23em;display:flex;flex-direction:column;gap:var(--gap);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
#tf-side .tf-plate,#tf-side2 .tf-plate{position:static;flex:none;padding:.8em 1.1em .5em;background:var(--plate-lite)}
#tf-side .tf-plate,#tf-side2 .tf-plate,#tf-left .tf-plate{text-shadow:0 0 .2em rgba(11,22,38,.9)}
.tf-row{display:grid;grid-template-columns:1em 8.6em 1fr auto;align-items:baseline;gap:.55em;border-top:1px solid var(--hair);padding:.3em 0;font-size:.85em}
.tf-row:first-child{border-top:0;padding-top:0}
.tf-row svg{width:.85em;height:.85em;align-self:center}
.tf-row .id{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-row .sub{color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-row .v{text-align:right;white-space:nowrap}
.tf-row.mil .id{color:var(--mil)}
.tf-row[data-k]{cursor:pointer;transition:background .12s}
.tf-row.hi{background:rgba(233,238,245,.09)}
.tf-row:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
/* the ring that finds a vessel on the map from its row (and the other way round) */
.leaflet-marker-icon.gev-hi::after{content:'';position:absolute;inset:-.5em;border:.14em solid var(--foam);border-radius:50%;box-shadow:0 0 .9em rgba(233,238,245,.55);pointer-events:none}
.leaflet-marker-icon.gev-hi svg{filter:drop-shadow(0 0 .35em #fff)}
/* the card a marker opens, in the page's own plate style (the default was Leaflet's white box) */
#tf-map .tf-popup .leaflet-popup-content-wrapper{background:var(--plate);color:var(--foam);border:1px solid var(--rule);border-radius:0;box-shadow:0 .3em 1.2em rgba(0,0,0,.55)}
#tf-map .tf-popup .leaflet-popup-content{margin:.85em 1.1em;font:400 .85em/1.4 Mulish;min-width:13em}
#tf-map .tf-popup .leaflet-popup-tip{background:var(--plate);border:1px solid var(--rule)}
.tf-card-t{display:block;font-size:1.2em;line-height:1.2}
.tf-card-s{color:var(--mist);margin:.15em 0 .55em}
.tf-card dl{display:grid;grid-template-columns:auto 1fr;gap:.2em 1em;margin:0}
.tf-card dt{color:var(--mist);font-weight:400}
.tf-card dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tf-card-n{margin-top:.55em;color:var(--mil);font-size:.95em}
.tf-empty{color:var(--mist);font-size:.85em}

/* "back to <place>" — only shown once the view has been moved */
#tf-home{position:absolute;z-index:600;left:50%;bottom:calc(var(--band) + var(--gap));transform:translateX(-50%);
  background:var(--foam);color:var(--night);border:0;font:700 .85em Mulish;padding:.45em 1em;cursor:pointer;display:none}
#tf-home.show{display:block}

/* markers — position and rotation are animated from JS, so no CSS transition here */
.gev-plane,.gev-ferry,.gev-bus{display:flex;align-items:center;justify-content:center}
.gev-plane svg,.gev-ferry svg,.gev-bus svg{filter:drop-shadow(0 0 .12em #000)}
/* no position: here. Leaflet's marker icon is already position:absolute (the containing block for the parts below);
   overriding it with relative made icons flow down the pane and pick up a growing vertical offset. */
.gev-quay{}
.gev-quay i{position:absolute;inset:0;border-radius:50%;background:var(--foam);border:.12em solid var(--night);box-shadow:0 0 .15em rgba(0,0,0,.7)}
.gev-quay span{position:absolute;left:1.05em;top:50%;transform:translateY(-50%);white-space:nowrap;font:700 .72em Mulish;color:var(--foam);
  text-shadow:0 0 .22em var(--night),0 0 .22em var(--night),0 0 .4em var(--night)}
.gev-home{}  /* same: never override the marker icon's position:absolute */
.gev-home i{position:absolute;inset:0;border-radius:50%;background:var(--foam,#e9eef5);border:.12em solid #0b1626}
.gev-home b{position:absolute;inset:0;border-radius:50%;border:.1em solid #e9eef5;opacity:.9;animation:gev-ping 1.8s cubic-bezier(.2,.6,.3,1) 1 both}
@keyframes gev-ping{to{transform:scale(7);opacity:0}}
@media (prefers-reduced-motion: reduce){.gev-home b{animation:none;display:none}}
#tf-map .leaflet-control-attribution{background:var(--plate)!important;color:var(--mist)!important;font:400 .6em Mulish!important;
  margin:0 calc(var(--band) + var(--gap)) calc(var(--band) + var(--gap)) 0!important}
#tf-map .leaflet-control-attribution a{color:var(--mist)!important}
#tf-map .leaflet-control-zoom{margin-bottom:calc(var(--band) + var(--gap));margin-left:0;border:1px solid var(--rule)}
#tf-map .leaflet-bar a{background:var(--plate);color:var(--foam);border-bottom-color:var(--rule)}

.leaflet-tooltip.gev-tag{background:transparent;border:0;padding:0;box-shadow:none;opacity:1;font-size:inherit}
.leaflet-tooltip.gev-tag:before{display:none}
.gt-box{background:var(--plate);color:var(--foam);border-left:.16em solid var(--sky);padding:.12em .4em .16em}
.leaflet-tooltip-left .gt-box{border-left:0;border-right:.16em solid var(--sky);text-align:right}
.gt-name{font:700 .78em/1.25 Mulish;display:block;white-space:nowrap}
.gt-sub{font:400 .64em/1.25 Mulish;color:var(--mist);display:block;white-space:nowrap}

/* narrow windows: the map, the title and the ferry board only */
@media (max-width:899px){#traffic-frame:not(.tf-portrait) #tf-side,#traffic-frame:not(.tf-portrait) #tf-left{display:none}}

/* ---- Portrait (a tall wall, or any window taller than wide) ----------------------------------------------------------
   JS puts .tf-portrait on the frame when it is clearly taller than wide (applyShape). The map takes the top part, the
   panels sit under it in three columns (left+departures | aircraft, vessels, buses | incidents, which JS moves into
   #tf-side2), and the type is sized off the WIDTH for three columns instead of two overlays: 1080 px wide = 14 px,
   not the 9 px floor of the landscape rule. Nothing scrolls; the columns fit themselves (fitColumn). */
#tf-side2{display:none}
#traffic-frame.tf-portrait{--tf-map-h:54%;--tf-col:23.5em;font-size:clamp(9px,1.316cqw,40px)}
#traffic-frame.tf-portrait.tf-full,#traffic-frame.tf-portrait:fullscreen{font-size:calc(100vw / 76)}
.tf-portrait #tf-map,.tf-portrait #tf-neat{bottom:auto;height:var(--tf-map-h)}
.tf-portrait #tf-left,.tf-portrait #tf-departures{width:var(--tf-col)}
/* the ferry board is the point of the page: first in its column, the rest (roads, cruise ships) under it, no gap */
.tf-portrait #tf-departures{top:calc(var(--tf-map-h) + var(--gap));bottom:auto}
.tf-portrait #tf-side,.tf-portrait #tf-side2{position:absolute;z-index:500;display:flex;flex-direction:column;gap:var(--gap);width:var(--tf-col);
  top:calc(var(--tf-map-h) + var(--gap));bottom:calc(var(--band) + var(--gap));overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.tf-portrait #tf-side{left:calc(var(--band) + var(--gap) * 2 + var(--tf-col));right:auto}
.tf-portrait #tf-side2{right:calc(var(--band) + var(--gap))}
.tf-portrait #tf-home{bottom:calc(100% - var(--tf-map-h) + var(--gap))}
/* too narrow even for three columns (a phone): the map, the title and the departures only */
@media (max-width:699px){#traffic-frame.tf-portrait #tf-side,#traffic-frame.tf-portrait #tf-side2,#traffic-frame.tf-portrait #tf-left{display:none}}

/* ---- Ferry disruptions and weather warnings ------------------------------------------------------------------------
   The disruption is the loudest thing on the page when there is one: a banner at the top of the departures panel, its bar
   red (severe) or amber (normal), and a chip in the title block. Red/amber only ever mean this. A slight notice is quiet. */
#tf-disrupt:empty,#tf-alerts:empty{display:none}
#tf-disrupt{margin:0 0 .8em}
.tf-dis{margin:0 0 .5em;padding:.55em .8em .6em;border-left:.3em solid var(--mist);background:rgba(142,160,188,.10)}
.tf-dis.warn{border-left-color:var(--mil);background:rgba(245,166,35,.16)}
.tf-dis.severe{border-left-color:var(--red);background:rgba(255,92,92,.20)}
.tf-dis-h{display:flex;flex-wrap:wrap;gap:.2em .7em;align-items:baseline}
.tf-dis-h b{font:800 .82em Mulish;text-transform:uppercase;letter-spacing:.05em;color:var(--mist)}
.tf-dis.warn .tf-dis-h b{color:var(--mil)}
.tf-dis.severe .tf-dis-h b{color:var(--red)}
.tf-dis-h span{font:700 .95em Mulish;color:var(--foam)}
.tf-dis p{margin:.25em 0 0;font-size:.9em;line-height:1.35;color:var(--foam);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tf-dis small{display:block;margin-top:.3em;color:var(--mist);font-size:.78em}
#tf-departures[data-dis=warn]{border-left-color:var(--mil)}
#tf-departures[data-dis=severe]{border-left-color:var(--red)}
#tf-alerts{list-style:none;margin:.6em 0 0;padding:0;display:flex;flex-direction:column;gap:.3em}
#tf-alerts li{display:flex;flex-wrap:wrap;gap:.1em .55em;align-items:baseline;padding:.3em .65em;border-left:.25em solid var(--mil);background:rgba(245,166,35,.11);font:700 .82em/1.3 Mulish}
#tf-alerts li b{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.85em;color:var(--mil)}
#tf-alerts li.l3{border-left-color:#ff8c42;background:rgba(255,140,66,.15)}
#tf-alerts li.l3 b{color:#ff8c42}
#tf-alerts li.l4{border-left-color:var(--red);background:rgba(255,92,92,.18)}
#tf-alerts li.l4 b{color:var(--red)}
#tf-alerts small{color:var(--mist);font-weight:400;font-size:.9em}
#tf-disrupt.tight .tf-dis p{-webkit-line-clamp:2}
#tf-disrupt.tight .tf-dis{padding:.4em .7em .45em}
.tf-dis-more{font:700 .8em Mulish;color:var(--mist);padding:0 0 .2em .9em}

/* ---- Portrait lower area: instruments and colour instead of a wall of text ------------------------------------------
   Each panel carries a section colour (a bar on top and a square in the heading), the numbers get size, vessels and aircraft get
   a bar under the row, incidents become short cards with a stripe by category. Portrait only: landscape keeps its plain lists. */
#tf-cond,#tf-sunBlock{display:none}
.tf-portrait #tf-cond,.tf-portrait #tf-sunBlock{display:block}
#tf-cond,#tf-sunBlock{--acc:var(--ember)}
#tf-airBlock{--acc:var(--sky)}
#tf-seaBlock{--acc:var(--sea)}
#tf-busBlock{--acc:var(--bus)}
#tf-incidentBlock{--acc:#7d8fb3}
#tf-roadBlock{--acc:var(--sea)}
#tf-cruiseBlock{--acc:var(--sky)}
.tf-portrait #tf-side .tf-plate,.tf-portrait #tf-side2 .tf-plate,.tf-portrait #tf-left .tf-plate{
  background:linear-gradient(180deg,rgba(26,46,74,.82),rgba(12,24,42,.9));border:1px solid var(--hair);border-top:.2em solid var(--acc,var(--mist))}
.tf-portrait #tf-side .tf-plate h2,.tf-portrait #tf-side2 .tf-plate h2,.tf-portrait #tf-left .tf-plate h2{font:800 .74em Mulish;letter-spacing:.09em;text-transform:uppercase;color:var(--foam);display:flex;align-items:center}
.tf-portrait #tf-side .tf-plate h2::before,.tf-portrait #tf-side2 .tf-plate h2::before,.tf-portrait #tf-left .tf-plate h2::before{content:'';width:.55em;height:.55em;margin-right:.6em;background:var(--acc,var(--mist));border-radius:.12em;flex:none}
.tf-portrait #tf-side .tf-plate h2 small,.tf-portrait #tf-side2 .tf-plate h2 small,.tf-portrait #tf-left .tf-plate h2 small{margin-left:auto;font:600 1em Mulish;letter-spacing:0;text-transform:none;color:var(--mist)}

/* departures: a bar under the next departure that fills over the last 30 minutes */
.tf-portrait .tf-dep-next{position:relative;padding-bottom:1em}
.tf-portrait .tf-dep-next::before,.tf-portrait .tf-dep-next::after{content:'';position:absolute;left:0;bottom:.35em;height:.24em;border-radius:1em}
.tf-portrait .tf-dep-next::before{right:0;background:var(--hair)}
.tf-portrait .tf-dep-next::after{width:calc(var(--p,0) * 100%);background:var(--sea)}

/* conditions */
.tf-cond-top{display:grid;grid-template-columns:9.8em 1fr;gap:1em;align-items:center}
.tf-wind svg{width:100%;height:auto;display:block}
.tf-wind .rim{fill:rgba(8,16,30,.55);stroke:var(--hair);stroke-width:1}
.tf-wind .mj{stroke:var(--foam);stroke-width:1.7;opacity:.8}
.tf-wind .mn{stroke:var(--mist);stroke-width:1;opacity:.5}
.tf-wind text{font:700 9px Mulish;fill:var(--mist);text-anchor:middle}
.tf-wind text.n{fill:var(--ember)}
.tf-wind text.kn{font:800 34px Mulish;fill:var(--foam)}
.tf-wind text.u{font:700 10px Mulish;fill:var(--mist)}
.w-cap{display:block;text-align:center;font:700 .78em/1.25 Mulish;color:var(--foam);margin-top:.3em}
.tf-sts{display:flex;flex-direction:column;gap:.7em}
.tf-st{display:grid;grid-template-columns:1fr auto;gap:.15em .5em;align-items:baseline}
.tf-st .k{font:800 .68em Mulish;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.tf-st b{font:800 1.7em/1 Mulish;color:var(--foam);text-align:right}
.tf-st b i{font:700 .5em Mulish;font-style:normal;color:var(--mist);margin-left:.2em}
.tf-st .bar{grid-column:1/-1;height:.3em;background:var(--hair);border-radius:1em;overflow:hidden}
.tf-st .bar span{display:block;height:100%;background:var(--sea);border-radius:1em}
.tf-st .bar.warn span{background:var(--mil)}
.tf-st .bar.bad span{background:var(--red)}
.tf-fc{display:block;width:100%;height:auto;margin-top:.9em}
.tf-fc text{font:700 8px Mulish;fill:var(--mist)}
.tf-fc text.tv{fill:var(--foam);font-weight:800}
.tf-fc .tline{fill:none;stroke:var(--ember);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tf-fc .fill{fill:rgba(232,162,90,.14)}
.tf-fc .base{stroke:var(--hair);stroke-width:1}

/* daylight */
.tf-sunarc{display:block;width:100%;height:auto}
.tf-sunarc .path{fill:none;stroke:var(--rule);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.tf-sunarc .done{fill:none;stroke:var(--ember);stroke-width:3;stroke-linecap:round}
.tf-sunarc .hz{stroke:var(--rule);stroke-width:1}
.tf-sunarc .sun{fill:var(--ember);stroke:var(--night);stroke-width:2}
.tf-sunarc .sun.down{fill:var(--mist);opacity:.7}
.tf-sunrow{display:grid;grid-template-columns:auto 1fr auto;gap:.6em;align-items:end;margin-top:.2em}
.tf-sunrow small{display:block;font:800 .62em Mulish;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.tf-sunrow b{font:800 1.25em/1.1 Mulish;color:var(--foam)}
.tf-sunrow .mid{text-align:center;font:600 .8em/1.3 Mulish;color:var(--mist)}
.tf-sunrow .mid b{font-size:1em;color:var(--foam)}

/* vessels and aircraft: a bar under each row (speed out of 25 kn; altitude out of 40 000 ft) */
.tf-portrait #tf-seaList .tf-row,.tf-portrait #tf-airList .tf-row{position:relative;padding-bottom:.65em;border-top:0}
.tf-portrait #tf-seaList .tf-row::after,.tf-portrait #tf-airList .tf-row::after{content:'';position:absolute;left:1.6em;bottom:.2em;height:.22em;border-radius:1em;
  width:max(.5em,calc((100% - 1.6em) * var(--sp,0)));background:var(--sea);opacity:.9}
.tf-portrait #tf-airList .tf-row::after{background:var(--sky)}
.tf-portrait #tf-seaList .tf-row .id,.tf-portrait #tf-airList .tf-row .id{font-size:1.06em}
.tf-portrait #tf-seaList .tf-row .v,.tf-portrait #tf-airList .tf-row .v{font-weight:800;color:var(--foam)}

/* incidents: a short card, a stripe by category, no thread of updates */
.tf-portrait #tf-incidentList > div{border-top:0;border-left:.28em solid var(--mist);padding:.4em 0 .45em .8em;margin:0 0 .45em;background:rgba(255,255,255,.035)}
.tf-portrait #tf-incidentList > div:first-child{padding-top:.4em}
.tf-portrait #tf-incidentList .c-traffic{border-left-color:var(--sky)}
.tf-portrait #tf-incidentList .c-order{border-left-color:var(--bus)}
.tf-portrait #tf-incidentList .c-rescue{border-left-color:var(--sea)}
.tf-portrait #tf-incidentList .c-accident{border-left-color:var(--mil)}
.tf-portrait .tf-inc-top b{font-size:1.05em}
.tf-portrait .tf-inc-last,.tf-portrait .tf-inc-top u{display:none}
.tf-portrait .tf-inc-text,.tf-portrait .tf-inc-text.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--foam)}

/* roads: status chips instead of rows */
.tf-portrait #tf-roadList{flex-direction:row;flex-wrap:wrap;gap:.4em}
.tf-portrait #tf-roadList > div,.tf-portrait #tf-roadList > div:first-child{border:1px solid var(--hair);border-radius:2em;padding:.22em .7em;background:rgba(255,255,255,.04)}
.tf-portrait .tf-rd span{display:none}
.tf-portrait .tf-rd i{color:var(--foam);display:inline-flex;align-items:center;gap:.4em}
.tf-portrait .tf-rd i::before{content:'';width:.55em;height:.55em;border-radius:50%;background:var(--sea)}
.tf-portrait .tf-rd.closed i::before{background:var(--red)}

/* ferry lines */
#tf-linesBlock{display:none;--acc:var(--sea)}
.tf-portrait #tf-linesBlock{display:block}
.tf-ln{display:block;width:100%;height:auto;margin:0 0 .35em}
.tf-ln .track{stroke-width:3;stroke-linecap:round}
.tf-ln .quay{fill:var(--night);stroke:var(--foam);stroke-width:2}
.tf-ln .boat{fill:var(--sea);stroke:var(--night);stroke-width:1.2;stroke-linejoin:round}
.tf-ln .moor{fill:none;stroke:var(--mist);stroke-width:2}
.tf-ln text{font:700 9px Mulish;fill:var(--mist)}
.tf-ln text.bn{fill:var(--foam);font-weight:800;text-anchor:middle;font-size:8.5px}
.tf-ln text.qn{fill:var(--foam);font-weight:700}

/* road rows: a closure that has not begun is amber, not "open" */
.tf-rd.soon i{color:var(--mil);font-weight:700}
.tf-rd.works i{color:var(--mist)}
.tf-portrait .tf-rd.soon i::before{background:var(--mil)}
.tf-portrait .tf-rd.works i::before{background:var(--mist)}
.tf-portrait #tf-roadList > .tf-rd.soon span,.tf-portrait #tf-roadList > .tf-rd.closed span{display:inline;max-width:9em}
.tf-portrait #tf-roadList > .tf-rd{flex-wrap:wrap}
#tf-alerts li.road b{color:#ff8c42}