/* Dashboard 2, tuned for the boat rather than the brochure.
 *
 * Loaded after the panel's own styles, which arrived with the page from
 * boatlink.fi and are left exactly as they came - everything here is an
 * override, so re-extracting the panel from a newer landing page cannot lose
 * these decisions or silently fight them.
 *
 * Three things it changes:
 *
 *   1. The picture chooser is gone. Three renders of three fictional boats made
 *      sense on a landing page selling to all three; above one real vessel's
 *      name they are a costume rail.
 *
 *   2. Nothing is said twice. Speed, battery, temperature, wind and runtime
 *      each appeared in two or three places at once - the rail, the row under
 *      the boat, and the strip along the bottom. Measurements live in the strip
 *      now; the rail keeps the state of the link, which is not a measurement.
 *
 *   3. It fits a landscape tablet. The panel was drawn for a tall desktop
 *      window: a 390px stage, a 620px minimum body, and eight tiles wrapped
 *      into two rows. On a tablet held sideways that is a page you scroll to
 *      operate, which is the one thing a control panel must not be.
 */

/* ---- 1. the costume rail ---------------------------------------------- */

.blrc-vessel-select { display: none !important; }

/* The stage reserved room at the bottom for the chooser that sat over it. */
#blrc-view-lights .blrc-yachtstage { padding-bottom: 0 !important; }

/* ---- 2. one home per number ------------------------------------------- */

/* Speed, battery, temperature, cloud and wind - every one of them also in the
   strip along the bottom, forty pixels lower. */
.blrc-mainmetrics { display: none !important; }

/* ---- 3. landscape ------------------------------------------------------ */

@media (min-width: 900px) {
	/* Eight tiles, one row: at this width the two-row grid put half the strip
	   below the fold on exactly the screens with room for it. */
	.blrc-bottom { grid-template-columns: repeat(8, 1fr); }
}

/* Below 1180 the panel already rearranges itself, and it does it well: the body
   becomes rail + viewhost and the controls move inside the view, which keeps
   the three-column reading without a third body column. An earlier version of
   this file forced .blrc-body to three columns here and laid the controls over
   the vessel - so this only narrows what is already there. Structure is the
   panel's business; density is ours. */
@media (min-width: 760px) and (max-width: 1180px) {
	.blrc-view { grid-template-columns: minmax(0, 1fr) 265px; }
	.blrc-bottom { grid-template-columns: repeat(4, 1fr); }
}

/* ---- compact: a short, wide screen -------------------------------------
 *
 * data-compact is set by the app, not by a media query, and that is not a
 * shortcut. The panel sizes its own frame to its content, so inside it the
 * viewport height IS the content height: `max-height` there is a question about
 * how tall the panel asked to be, never about the screen it is on. Only the
 * page around it can see a tablet on a chart table.
 *
 * Written as descendant selectors rather than nested rules - nesting is fine in
 * this year's browsers and not in the iPad someone actually has on the boat.
 */

:root[data-compact="1"] .blrc-body { min-height: 0; }

/* The vessel takes whatever the control column's height leaves over, instead
   of a fixed 390px - the two columns were never the same height, and the
   difference sat under the boat as a dead band. Not a vh: inside a frame sized
   to its own content, 34vh is 34% of whatever the panel just asked to be. */
:root[data-compact="1"] .blrc-main { display: flex; flex-direction: column; }
:root[data-compact="1"] #blrc-view-lights .blrc-yachtstage,
:root[data-compact="1"] .blrc-yachtstage {
	flex: 1 1 auto;
	height: auto !important;
	min-height: 200px;
	max-height: 300px;
}

/* The landing page gave this section 78px of air above and below, to separate
   it from the sections either side. In an application there are no sections
   either side. */
:root[data-compact="1"] #remote.blrc-section {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* The top bar spent two rows: brand on one, the day/night and language
   toggles centered on their own beneath. One row carries all of it at this
   width, and the row it gives back is what lifts the bottom strip onto the
   screen. */
:root[data-compact="1"] .blrc-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 22px;
	min-height: 0;
}
:root[data-compact="1"] .blrc-brand { flex: 0 0 auto; }
:root[data-compact="1"] .blrc-theme { order: 2; margin-left: auto; }
:root[data-compact="1"] .blrc-langs { order: 3; }
:root[data-compact="1"] .blrc-session { order: 4; margin-left: 8px; }
:root[data-compact="1"] .blrc-sidebar { padding: 14px 16px; }
:root[data-compact="1"] .blrc-controls { padding: 14px 16px 12px; }
:root[data-compact="1"] .blrc-main { padding-top: 14px; padding-bottom: 6px; }
:root[data-compact="1"] .blrc-bottom { padding-bottom: 12px; }
:root[data-compact="1"] .blrc-section { padding: 0; }
:root[data-compact="1"] .blrc-frame { border-width: 6px; }

/* The vessel name was set as a hero; here it shares its line with the weather
   and the boat beneath it. */
:root[data-compact="1"] .blrc-mainhead h3 { font-size: clamp(24px, 3.2vw, 34px); }
:root[data-compact="1"] .blrc-mainhead { margin-bottom: 4px; }
:root[data-compact="1"] .blrc-kicker { margin-bottom: 2px; }

/* Control cards: 34px of "POIS" per card is why only three fitted. Four fit
   now, and the fourth is usually the heater - the one worth reaching in
   February. */
:root[data-compact="1"] .blrc-control { padding: 8px 12px; }
:root[data-compact="1"] .blrc-state { font-size: 18px; line-height: 1.15; }
:root[data-compact="1"] .blrc-control-list { gap: 6px; }
:root[data-compact="1"] .blrc-control-top { margin-bottom: 1px; }
:root[data-compact="1"] .blrc-control-head { margin-bottom: 8px; }

/* Tiles lose the airiness that only reads as generous on a large screen. */
:root[data-compact="1"] .blrc-bottommetric { padding: 7px 10px; }
:root[data-compact="1"] .blrc-bottommetric strong { font-size: 18px; }
:root[data-compact="1"] .blrc-bottommetric small { font-size: 8px; }

/* The rail's own list, which had room to spare either way. */
:root[data-compact="1"] .blrc-nav button { padding-top: 9px; padding-bottom: 9px; }
:root[data-compact="1"] .blrc-side-status { gap: 10px; }

/* ---- the vessel, blended rather than framed ----------------------------
 *
 * The render is a rectangle of night sea, and its edges showed as a hard
 * photo-frame against the stage's own gradient. A radial mask fades the
 * picture out before its edges arrive, so the boat sits in the dark instead
 * of on a card. The size allowances below undo the landing page's - it kept
 * 92px clear for the picture chooser this file removed.
 */
#blrc-view-lights .blrc-yacht {
	-webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 50%, #000 46%, transparent 86%);
	mask-image: radial-gradient(ellipse 72% 64% at 50% 50%, #000 46%, transparent 86%);
	max-height: 98% !important;
	max-width: 99% !important;
	top: 50% !important;
}

/* On a tall screen the stage takes more of the room the chooser gave back,
   and the strip below runs two rows of four, each tile with air to breathe -
   the height is there, it was just being spent on nothing. */
@media (min-width: 1180px) {
	:root:not([data-compact="1"]) #blrc-view-lights .blrc-yachtstage { height: 470px; }
	:root:not([data-compact="1"]) .blrc-bottom { grid-template-columns: repeat(4, 1fr); gap: 10px; }
	:root:not([data-compact="1"]) .blrc-bottommetric { padding: 14px 16px; }
	:root:not([data-compact="1"]) .blrc-bottommetric strong { font-size: 24px; }
}

/* Compact keeps its single row, a little taller than it was. */
:root[data-compact="1"] .blrc-bottommetric { padding: 10px 12px; }
:root[data-compact="1"] .blrc-bottommetric strong { font-size: 20px; }

/* ---- systems view: eight cells that stop hiding things ------------------ */

/* A cell whose system has an open alert wears it. Not the accent gold - the
   severity red the rest of the platform uses for the same meaning. */
.blrc-system-grid button.bl-alerting {
	border-color: rgba(226, 114, 106, .55) !important;
	box-shadow: inset 3px 0 0 rgba(226, 114, 106, .8);
}

/* A cell whose sensor has gone quiet dims and dates itself, instead of
   showing a confident number from yesterday. */
.blrc-system-grid button.bl-stale { opacity: .55; }
.blrc-system-grid button.bl-stale em { color: #d9a44e; }

/* The detail card's reading rows and alert links. */
.bl-sys-rows { display: grid; gap: 4px; margin-top: 10px; }
.bl-sys-rows > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	color: var(--rc-muted);
	border-bottom: 1px dashed var(--rc-line);
	padding-bottom: 3px;
}
.bl-sys-rows b { color: var(--rc-text); font-weight: 600; white-space: nowrap; }

.bl-sys-alerts { display: grid; gap: 6px; margin-top: 10px; }
.bl-sys-alert {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	color: #e2726a;
	background: rgba(226, 114, 106, .1);
	border: 1px solid rgba(226, 114, 106, .35);
	border-radius: 8px;
	padding: 6px 9px;
	cursor: pointer;
}
.bl-sys-alert:hover { background: rgba(226, 114, 106, .18); }

/* A system with many readings must not grow the page. The detail card's lists
   are the only unbounded thing on the panel: eight quiet devices or a long
   power inventory made the right column taller than the screen, and in full
   screen - where the frame IS the viewport - that surfaced as the one thing a
   mounted panel must never have, a page scroll. The lists scroll inside the
   card instead; fixed pixels, not vh, because inside a self-sized frame vh is
   whatever the content just became. */
.bl-sys-rows {
	max-height: 176px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--rc-line) transparent;
}
.bl-sys-rows::-webkit-scrollbar { width: 5px; }
.bl-sys-rows::-webkit-scrollbar-thumb { background: var(--rc-line); border-radius: 3px; }

.bl-sys-alerts {
	max-height: 132px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--rc-line) transparent;
}

/* The relay drawer has the same disease when all ten channels unfold. */
.blrc-relaydrawer > div {
	max-height: 190px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--rc-line) transparent;
}

/* Nine systems in two columns made this the tallest view in the panel. On a
   short wide screen the grid runs four across instead - the cells were built
   for a brochure's 150px minimum, which the numbers never needed. */
:root[data-compact="1"] .blrc-system-grid { grid-template-columns: repeat(4, 1fr); }
:root[data-compact="1"] .blrc-system-grid button { min-height: 108px; padding: 12px 14px; }
:root[data-compact="1"] .blrc-system-grid button small { margin-top: 8px; }
:root[data-compact="1"] .blrc-system-grid button strong { margin-top: 5px; font-size: 17px; }

/* ---- the journeys view, made an instrument ----------------------------- */

/* The brochure opened every view with a kicker, a headline and a subtitle
   selling the feature to a prospect. The reader here owns the boat: each
   view now opens with its tab's name alone (the bridge writes it into the
   h3), and the only subtitle kept is the lights view's, which is data -
   harbour, mode, when the boat last spoke - not copy. */
.blrc-mainhead .blrc-kicker { display: none !important; }
.blrc-mainhead .blrc-sub { display: none !important; }
#blrc-view-lights .blrc-mainhead .blrc-sub { display: block !important; }

/* Real water under real routes: Leaflet fills the frame the promo drew its
   decorative grid in. The decoration hides only when the map is actually
   there (.has-map), so the SVG fallback still has its stage. */
.blrc-tripmap-real {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #0a141d;
}

.blrc-trip-map.has-map > svg,
.blrc-trip-map.has-map .blrc-mapgrid,
.blrc-trip-map.has-map .blrc-mapcity,
.blrc-trip-map.has-map .blrc-trip-boat { display: none !important; }
.blrc-trip-map.has-map:before,
.blrc-trip-map.has-map:after { content: none !important; }

/* The summary card reads over the map. */
.blrc-trip-map .blrc-trip-summary { z-index: 2; }

/* The headline's freed height goes to the water. */
#blrc-view-journeys .blrc-trip-map { height: 460px; }
:root[data-compact="1"] #blrc-view-journeys .blrc-trip-map { height: 360px; }

/* The panel's night, applied to somebody else's daylight tiles - same
   recipe as the main app's map: dimmed, not inverted. */
.blrc-tripmap-real .leaflet-tile-pane {
	filter: brightness(0.52) saturate(0.55) contrast(1.12);
}

.blrc-tripmap-real.leaflet-container {
	background: #0a141d;
}

/* The panel styles its decorative route svg as "the" svg of the frame -
   position inset 0, width 100% - and that descendant rule also catches
   Leaflet's overlay svg, whose parent pane is a zero-size anchor: 100% of
   nothing drew the route at 0x0. Hand Leaflet's svg back its own
   geometry. */
.blrc-tripmap-real svg {
	position: absolute;
	inset: auto;
	width: auto;
	height: auto;
}

.blrc-tripmap-real .leaflet-bar,
.blrc-tripmap-real .leaflet-control-attribution {
	background: rgba(10, 20, 29, 0.88) !important;
	color: var(--rc-muted, #8a99a8) !important;
	border: 1px solid var(--rc-border, rgba(226, 170, 75, 0.18)) !important;
	box-shadow: none !important;
}

.blrc-tripmap-real .leaflet-control-attribution {
	font-size: 9px;
	padding: 2px 6px;
}

.blrc-tripmap-real .leaflet-bar a {
	background: transparent;
	color: var(--rc-text, #e8eef2);
	border-bottom-color: var(--rc-border, rgba(226, 170, 75, 0.18));
}

.blrc-tripmap-real .leaflet-bar a:hover { background: rgba(226, 170, 75, 0.12); }
.blrc-tripmap-real .leaflet-control-attribution a { color: var(--rc-muted, #8a99a8); }

/* Harbour names at the ends of the line, in the panel's own lettering,
   shadowed to stay legible over whatever tile they land on. */
.bl-tripcity {
	position: absolute;
	transform: translate(-50%, -150%);
	font: 800 8px ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.13em;
	color: var(--rc-text, #e8eef2);
	white-space: nowrap;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.bl-tripcity.dn { transform: translate(-50%, 60%); }
.bl-tripcity small {
	display: block;
	margin-top: 3px;
	color: var(--rc-muted, #8a99a8);
	font-weight: 700;
}

/* The promo's course arrow, restored over real water: the same blue
   glyph, halfway along, pointed the way she was going. */
.bl-tripdir {
	display: block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	color: var(--rc-blue, #48b8f4);
	font-size: 21px;
	filter: drop-shadow(0 0 8px rgba(72, 184, 244, 0.5)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
	pointer-events: none;
}

/* An unfinished passage ends in the boat, still moving. */
.bl-trippulse {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--rc-gold, #e2aa4b);
	border: 2px solid rgba(6, 16, 25, 0.9);
	animation: bl-trip-pulse 2.4s ease-out infinite;
}

@keyframes bl-trip-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(226, 170, 75, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(226, 170, 75, 0); }
	100% { box-shadow: 0 0 0 0 rgba(226, 170, 75, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bl-trippulse { animation: none; }
}

/* ---- the boat's name in the top bar ------------------------------------ */

/* Set by the bridge next to the brand; the divider <i> is the panel's own. */
.blrc-brand #blTopBoat {
	font: 500 clamp(15px, 1.6vw, 24px)/1 Georgia, serif;
	letter-spacing: 0.1em;
	color: var(--rc-text, #e8eef2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Compact hides the brand's subtitle and divider to save the row; the name
   is the one thing worth keeping - it becomes the whole identity. */
:root[data-compact="1"] .blrc-brand #blTopBoat { display: block; font-size: 15px; }

/* ---- full screen meets the glass ----------------------------------------
   Set by the bridge while the frame is the whole screen: a screen has no
   corners to round and no margin to admire, so the frame's border, every
   radius and the section's padding go flat - the panel touches the edges. */
:root[data-bl-full="1"] .blrc-section,
:root[data-bl-full="1"] #remote.blrc-section { padding: 0 !important; }
:root[data-bl-full="1"] .shell { max-width: none; padding: 0; margin: 0; }
:root[data-bl-full="1"] .blrc-frame { border-width: 0; border-radius: 0; }
:root[data-bl-full="1"] .blrc-panel { border-radius: 0; }

/* And it FILLS the screen, structurally: the panel becomes a real
   full-height column and the body absorbs whatever the fixed rows leave
   over - the remainder that used to sit under it as a black band. The
   vessel may grow into the room. The bridge's zoom stays underneath as
   the safety net for a screen genuinely too small for the content. */

/* Pinned rather than merely tall: iOS gives an iframe the height it feels
   like and lets the page rubber-band past it, which is the black to the
   right and the spill over the edge. Fixed to the viewport, there is
   nothing left to stretch and nowhere to scroll to. */
:root[data-bl-full="1"], :root[data-bl-full="1"] body { height: 100%; width: 100%; }
:root[data-bl-full="1"] body {
	position: fixed;
	inset: 0;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
}
:root[data-bl-full="1"] .blrc-section,
:root[data-bl-full="1"] .shell,
:root[data-bl-full="1"] .blrc-frame { height: 100%; width: 100%; max-width: none; }
/* By id and !important: the panel's own sheet sizes it, and a plain class
   rule here lost - which is why it kept its content height inside a
   screen-sized frame and spilled past the glass. */
:root[data-bl-full="1"] #blrcPanel {
	height: 100% !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}
:root[data-bl-full="1"] .blrc-topbar { flex: 0 0 auto; }
:root[data-bl-full="1"] .blrc-body { flex: 1 1 auto; min-height: 0; }
:root[data-bl-full="1"] .blrc-bottom { flex: 0 0 auto; }

/* Every column inside the body is a scrollless full-height column too, so
   a long list shrinks its own share instead of pushing the strip off the
   glass. */
:root[data-bl-full="1"] .blrc-view,
:root[data-bl-full="1"] .blrc-main,
:root[data-bl-full="1"] .blrc-sidebar,
:root[data-bl-full="1"] .blrc-controls { min-height: 0; height: 100%; }
:root[data-bl-full="1"] .blrc-main { display: flex; flex-direction: column; }
:root[data-bl-full="1"] .blrc-viewhost { min-height: 0; }

/* The stage takes the room the rest leaves, whatever that is - no fixed
   height, no cap, no floor that could push the page taller than the
   screen. */
:root[data-bl-full="1"] .blrc-yachtstage {
	flex: 1 1 auto;
	height: auto !important;
	min-height: 0;
	max-height: none;
	padding-bottom: 0 !important;
}

/* Full screen is read across a cabin, not leaned into - and it has room
   to spare, because the vessel stage absorbs whatever is left. So the
   numbers are set larger and the containers that hold them are given
   proper padding, rather than the panel spending its extra height on
   empty water. */
:root[data-bl-full="1"] .blrc-control { padding: 12px 15px; }
:root[data-bl-full="1"] .blrc-control-list { gap: 10px; }
:root[data-bl-full="1"] .blrc-control-name { font-size: 15px; }
:root[data-bl-full="1"] .blrc-state { font-size: 22px; line-height: 1.2; }
:root[data-bl-full="1"] .blrc-control-head { font-size: 11px; letter-spacing: .16em; }
:root[data-bl-full="1"] .blrc-nav button { padding-top: 13px; padding-bottom: 13px; font-size: 13px; }
:root[data-bl-full="1"] .blrc-side-status { gap: 12px; }
:root[data-bl-full="1"] .blrc-side-status small { font-size: 9.5px; }
:root[data-bl-full="1"] .blrc-side-status b { font-size: 14px; }
:root[data-bl-full="1"] .blrc-mainhead h3 { font-size: clamp(30px, 3.4vw, 46px); }
:root[data-bl-full="1"] .blrc-sub { font-size: 13.5px; }
:root[data-bl-full="1"] .blrc-sidebar { padding: 16px 18px; }
:root[data-bl-full="1"] .blrc-controls { padding: 16px 18px 14px; }
:root[data-bl-full="1"] .blrc-main { padding-top: 16px; padding-bottom: 10px; }

/* Systems, alerts and journeys hold data too - their cells grow with
   everything else. */
:root[data-bl-full="1"] .blrc-system-grid button { padding: 14px 16px; }
:root[data-bl-full="1"] .blrc-system-grid strong { font-size: 26px; }
:root[data-bl-full="1"] .blrc-system-grid small { font-size: 10px; }
:root[data-bl-full="1"] .blrc-system-grid em { font-size: 11.5px; }
:root[data-bl-full="1"] .bl-sys-rows > div { font-size: 13.5px; }
:root[data-bl-full="1"] .blrc-alert-feed article { padding: 14px 16px; }
:root[data-bl-full="1"] .blrc-alert-feed h4 { font-size: 16px; }
:root[data-bl-full="1"] .blrc-trip-list button span { font-size: 13.5px; }

/* The strip runs two rows of four in full screen: eight cards across a
   tablet were a row of thumbnails, and the height they need was going
   spare above them. Taller cards, bigger numbers. */
:root[data-bl-full="1"] .blrc-bottom {
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 10px;
	padding-bottom: 14px;
}
:root[data-bl-full="1"] .blrc-bottommetric { padding: 12px 16px; }
:root[data-bl-full="1"] .blrc-bottommetric small { font-size: 10.5px; letter-spacing: .16em; }
:root[data-bl-full="1"] .blrc-bottommetric strong { font-size: 30px; line-height: 1.1; }
:root[data-bl-full="1"] .blrc-bottommetric span { font-size: 12.5px; }

/* A screen with no height to spare - a phone laid sideways - keeps the
   single row rather than losing the boat to the strip. */
@media (max-height: 480px) {
	:root[data-bl-full="1"] .blrc-bottom { grid-template-columns: repeat(8, 1fr) !important; }
	:root[data-bl-full="1"] .blrc-bottommetric { padding: 7px 10px; }
	:root[data-bl-full="1"] .blrc-bottommetric strong { font-size: 20px; }
}

/* ---- late reads amber, fresh beats blue -------------------------------- */

/* A card whose source is not current wears it on the number - amber for
   any stale source, the pills' red for one that is expected and long
   unheard. The systems page may excuse the silence; the number's age is
   not excusable. */
.blrc-bottommetric.bl-late strong { color: #f59e0b; }
.blrc-bottommetric.bl-silent strong { color: #ef4444; }
.blrc-system-grid button.bl-stale strong { color: #f59e0b; }

/* One blue beat when a shown value changes - the data page's own
   heartbeat (bl-value-fresh), in the panel's blue. Only a from-frame:
   the animation settles back to whatever colour the value normally
   wears, amber included. */
@keyframes bl-card-fresh {
	0% { color: var(--rc-blue, #48b8f4); text-shadow: 0 0 12px rgba(72, 184, 244, 0.45); }
}

.bl-beat { animation: bl-card-fresh 1.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
	.bl-beat { animation: none; }
}