/* The sun report page (sun-report.html, sun-report.js). The app's own palette (styles.css :root): cream paper, navy
   ink, hairline borders, flat at rest; orange only where there is real sun - the hours a spot gets, the sunlight it
   receives. What the buildings take away is a quiet hatched slate. */

.sr-page { width: 100%; max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; flex: 1; font-variant-numeric: tabular-nums; }
.sr-page ::selection { background: #FFE2BF; color: var(--shade-900); }
.sr-page input { caret-color: var(--sun-500); }
/* the hidden attribute wins over the flex and grid displays below (the floor row, the floor picker...) */
.sr-page [hidden] { display: none !important; }
.sr-title { margin: 0 0 10px; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--shade-900); }
.sr-lead { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.sr-h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--shade-900); }
.sr-small { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sr-intro { margin-bottom: 20px; }
/* early access: one free report per account - a quiet note under the intro, not a banner */
.sr-early { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 14px 0 0; max-width: 640px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.sr-early-tag { flex: none; padding: 2px 9px; border-radius: 999px; background: #FDF0DF; border: 1px solid #F5D9B3;
  color: #9C5C1E; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* buttons */
.sr-btn { font: inherit; font-size: 14px; font-weight: 600; border-radius: 10px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--card-border); background: white; color: var(--shade-900); }
.sr-btn:focus-visible, .sr-tab:focus-visible, .sr-chip:focus-visible, .sr-seg-btn:focus-visible,
.sr-search-input:focus-visible, .sr-name input:focus-visible, .sr-floor-pick select:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
.sr-btn-primary { background: var(--shade-900); border-color: var(--shade-900); color: white; padding: 12px 20px; font-size: 15px; }
.sr-btn-primary:hover:not(:disabled) { background: var(--shade-700); }
.sr-btn-primary:disabled { opacity: 0.45; cursor: default; }
.sr-btn-ghost:hover { border-color: var(--shade-700); }
.sr-btn-text { border-color: transparent; background: none; color: var(--muted); font-weight: 400; padding: 6px 8px; }
.sr-btn-text:hover { color: #B03A2E; }
.sr-back { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; }
.sr-btn-primary { display: inline-flex; align-items: center; gap: 8px; transition: background 150ms ease; }
.sr-btn-primary.is-busy { opacity: 1; cursor: progress; background: var(--shade-700); }
.sr-btn-primary.is-busy .sr-sunspin { color: var(--sun-300); }

/* search */
.sr-search { position: relative; display: flex; gap: 8px; margin-bottom: 12px; }
.sr-search-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--card-border); background: white; color: var(--ink); }
.sr-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: white; border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 10px 28px rgba(18, 42, 56, 0.14); }
.sr-suggest li { padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.sr-suggest li:hover, .sr-suggest li:focus, .sr-suggest li.is-active { background: var(--cream); outline: none; }

/* map */
.sr-map-wrap { position: relative; }
.sr-map { height: 440px; border-radius: 16px; overflow: hidden; border: 1px solid var(--card-border); background: #F5EFE1; }
.sr-map-hint { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
/* a click picks a spot, so the pointer is a crosshair rather than MapLibre's hand; dragging still grabs the map */
.sr-map .maplibregl-canvas-container.maplibregl-interactive { cursor: crosshair; }
.sr-map .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.sr-marker { width: 22px; height: 22px; border-radius: 50%; background: var(--sun-500); border: 3px solid white;
  box-shadow: 0 0 0 6px rgba(242, 153, 74, 0.25); }
/* Everything the map stands up in 3D (roof numbers, the address, the picked spot) is one overlay over the canvas,
   placed by sun-report.js at its own height; nothing in it takes the pointer, so the map stays fully usable. */
.sr-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.sr-roof-num { position: absolute; left: 0; top: 0; padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: #3D4F5A; background: rgba(251, 247, 239, 0.88); letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(18, 42, 56, 0.12); }
.sr-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sr-pin > * { position: absolute; }
/* a pin above the ground hangs from a thin stalk to the point it stands on */
.sr-pin-stalk { left: -1px; top: 0; width: 2px; height: var(--stalk, 0px); border-radius: 1px;
  transform-origin: 1px 0; transform: rotate(var(--stalk-turn, 0deg));   /* towards its ground point, see setStalk() */
  background: linear-gradient(rgba(18, 42, 56, 0.55), rgba(18, 42, 56, 0.15)); }
.sr-pin-spot .sr-marker { left: -11px; top: -11px; }
.sr-address .sr-address-ring { left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--shade-900); background: rgba(255, 255, 255, 0.85); box-sizing: border-box; }
.sr-address .sr-address-num { left: 50%; top: -34px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
  background: var(--shade-900); color: white; font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(18, 42, 56, 0.25); }
.sr-map .maplibregl-ctrl-group { border-radius: 10px; box-shadow: none; border: 1px solid var(--card-border); }

/* the picked spot */
.sr-spot { margin-top: 16px; padding: 18px; border: 1px solid var(--card-border); border-radius: 16px; background: white; }
.sr-spot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sr-spot-kind { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cream); color: var(--shade-900); }
.sr-spot-kind:empty { display: none; }
.sr-spot-where { font-size: 16px; font-weight: 600; color: var(--shade-900); }
.sr-spot-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.sr-floor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.sr-floor-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--cream); border: 1px solid var(--card-border); }
.sr-seg-btn { font: inherit; font-size: 14px; border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.sr-seg-btn.is-on { background: var(--shade-900); color: white; }
.sr-floor-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sr-floor-pick select { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--card-border); background: white; }
.sr-name { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-name input { font: inherit; font-size: 15px; font-weight: 400; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--card-border); color: var(--ink); max-width: 420px; }
.sr-make { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.sr-credits { font-size: 13px; color: var(--muted); }
.sr-make-msg { margin: 10px 0 0; font-size: 14px; color: var(--ink); }
.sr-make-msg:empty { display: none; }

/* my reports */
.sr-mine { margin-top: 28px; }
.sr-mine-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sr-mine-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 12px; background: white; }
.sr-mine-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-mine-title { font-weight: 600; color: var(--shade-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-mine-meta { font-size: 13px; color: var(--muted); }
.sr-st-done .sr-mine-meta { color: var(--ink); }
.sr-mine-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-mine-empty { padding: 14px; color: var(--muted); font-size: 14px; border: 1px dashed var(--card-border); border-radius: 12px; }

/* one report */
.sr-view-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px; }
.sr-view-actions { display: flex; gap: 8px; }
.sr-view-head { margin-bottom: 18px; }
.sr-view-sub { margin: 0; font-size: 15px; color: var(--muted); }
.sr-wait { padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: white; color: var(--ink); }
.sr-card { padding: 20px; border: 1px solid var(--card-border); border-radius: 16px; background: white; margin-bottom: 16px; }

.sr-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: var(--cream); border: 1px solid var(--card-border); margin-bottom: 16px; }
.sr-tab { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none; padding: 7px 16px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.sr-tab.is-on { background: var(--shade-900); color: white; }

.sr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sr-kpi-span { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--cream); }
.sr-kpi-value { font-size: 24px; font-weight: 700; color: var(--shade-900); }
.sr-kpi-value small { font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-kpi:first-of-type .sr-kpi-value { color: var(--sun-500); }
.sr-kpi-label { font-size: 13px; color: var(--muted); }

.sr-plot { position: relative; padding-left: 40px; outline: none; touch-action: pan-y; cursor: crosshair; }
.sr-plot:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 6px; border-radius: 10px; }
.sr-axis { position: absolute; left: 0; right: 0; top: 0; height: 200px; pointer-events: none; }
.sr-axis-line { position: absolute; left: 40px; right: 0; border-top: 1px dashed #E9E2D3; }
.sr-axis-line em { position: absolute; right: calc(100% + 8px); top: -8px; font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.sr-chart { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 222px; align-items: end; }
.sr-bar { display: flex; flex-direction: column; height: 100%; gap: 6px; transition: opacity 160ms ease; }
.sr-bar.is-out { opacity: 0.35; }
.sr-bar-stack { flex: 0 0 200px; display: flex; flex-direction: column; justify-content: flex-end; transform-origin: 50% 100%; transition: opacity 150ms ease; }
.sr-bar-got { display: block; background: var(--sun-500); border-radius: 0 0 4px 4px; transition: filter 150ms ease; }
.sr-bar-lost { display: block; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(135deg, #CBCFD4 0 4px, #E3E6E9 4px 8px); }
.sr-bar-lost[style^="height:0"] + .sr-bar-got { border-radius: 4px; }
.sr-bar-label { text-align: center; font-size: 12px; color: var(--muted); transition: color 150ms ease; }
.sr-plot.is-reading .sr-bar:not(.is-hot) .sr-bar-stack { opacity: 0.55; }
.sr-bar.is-hot .sr-bar-got { filter: saturate(1.15) brightness(1.04); }
.sr-bar.is-hot .sr-bar-label { color: var(--shade-900); font-weight: 700; }
/* the year rising into place, once, when a report opens for the first time */
.sr-chart.is-rising .sr-bar-stack { animation: sr-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes sr-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sr-guide-v, .sr-guide-h { position: absolute; pointer-events: none; opacity: 0; transition: opacity 120ms ease; }
.sr-guide-v { left: 0; top: 0; width: 0; border-left: 1px solid var(--shade-900); }
.sr-guide-h { left: 40px; right: 0; top: 0; height: 0; border-top: 1px dashed var(--shade-900); }
.sr-guide-tag { position: absolute; right: calc(100% + 4px); top: -10px; padding: 1px 6px; border-radius: 6px; background: var(--shade-900);
  color: white; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sr-plot.is-reading .sr-guide-v, .sr-plot.is-reading .sr-guide-h { opacity: 1; }
.sr-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.sr-leg { display: inline-flex; align-items: center; gap: 6px; }
.sr-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sr-leg-got { background: var(--sun-500); }
.sr-leg-lost { background: repeating-linear-gradient(135deg, #CBCFD4 0 3px, #E3E6E9 3px 6px); }

/* the month range: two range inputs over one track */
.sr-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.sr-range-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-range-slider { position: relative; flex: 1; min-width: 220px; height: 28px; }
.sr-range-slider::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 3px; border-radius: 3px; background: var(--card-border); }
.sr-range-fill { position: absolute; top: 13px; height: 3px; border-radius: 3px; background: var(--shade-900); pointer-events: none; }
.sr-range-slider input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sr-range-slider input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
  background: white; border: 2px solid var(--shade-900); cursor: pointer; }
.sr-range-slider input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: white; border: 2px solid var(--shade-900); cursor: pointer; }
.sr-range-quick { display: flex; gap: 6px; }
.sr-chip { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--card-border); background: white; cursor: pointer; color: var(--ink); }
.sr-chip:hover { border-color: var(--shade-700); }
.sr-metric-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* skyline panorama */
.sr-sky-wrap { width: 100%; outline: none; touch-action: pan-y; cursor: crosshair; }
.sr-sky-wrap svg { display: block; width: 100%; height: auto; }
.sr-sky-scroll { width: 100%; }
.sr-readout { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--cream); font-size: 13px; color: var(--ink); }
.sr-readout .sr-tip-head { margin-bottom: 4px; }
.sr-sky-wrap:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 6px; border-radius: 10px; }
.sr-sky-vline { stroke: var(--shade-900); stroke-width: 1.2; }
.sr-sky-hline { stroke: var(--shade-900); stroke-width: 1; stroke-dasharray: 4 4; }
.sr-sky-dot { stroke: white; stroke-width: 2; }
.sr-sky-dot-june { fill: var(--sun-500); } .sr-sky-dot-march { fill: #F7C08A; } .sr-sky-dot-december { fill: #D8C1A8; }
.sr-sky-dot.is-shaded { fill: #55606B; }
.sr-sky { width: 100%; height: auto; display: block; }
.sr-sky-bg { fill: #FFF8EC; }
.sr-sky-grid { stroke: var(--card-border); stroke-width: 1; }
.sr-sky-tick { font-size: 10px; fill: var(--muted); }
.sr-sky-dir { font-size: 12px; font-weight: 600; fill: var(--shade-900); }
.sr-sky-buildings { fill: #55606B; fill-opacity: 0.9; }
.sr-sunpath { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 5; opacity: 0.9; }
.sr-ref-tick { stroke: white; stroke-width: 1; }
.sr-ref-tick-june { fill: var(--sun-500); } .sr-ref-tick-march { fill: #EDB27A; } .sr-ref-tick-december { fill: #C9AE90; }
.sr-active-lit { fill: none; stroke: var(--sun-500); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.sr-active-hidden { fill: none; stroke: #55606B; stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linecap: round; opacity: 0.85; }
.sr-hour { fill: white; stroke: #55606B; stroke-width: 1.6; }
.sr-hour.is-lit { stroke: var(--sun-500); }
.sr-hour-label { font-size: 10px; font-weight: 700; fill: var(--shade-900); paint-order: stroke; stroke: #FFF8EC; stroke-width: 3px; }
.sr-disc-glow { fill: url(#srSunGlow); }
.sr-disc { fill: var(--sun-500); stroke: white; stroke-width: 2.5; }
.sr-disc.is-hidden { fill: #FFF8EC; stroke: #55606B; stroke-width: 2.5; stroke-dasharray: 3 2.5; }
.sr-disc-drop { stroke: var(--shade-900); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; }
.sr-disc-time rect, .sr-sky-timetag rect { fill: var(--shade-900); }
.sr-disc-time text, .sr-sky-timetag text { font-size: 11px; font-weight: 700; fill: white; }
.sr-sky-timetag rect { fill: white; stroke: var(--card-border); }
.sr-sky-timetag text { fill: var(--shade-900); }
.sr-sky-buildings { transition: none; }
.sr-sunpath-june { stroke: var(--sun-500); }
.sr-sunpath-march { stroke: #F7C08A; }
.sr-sunpath-december { stroke: #D8C1A8; }
.sr-sky-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sr-sky-key span { display: inline-flex; align-items: center; gap: 6px; }
.sr-sky-key i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.sr-key-june, .sr-key-march, .sr-key-december { height: 0 !important; border-top: 2px dotted; border-radius: 0 !important; }
.sr-key-june { border-color: var(--sun-500); } .sr-key-march { border-color: #EDB27A; } .sr-key-december { border-color: #C9AE90; }
.sr-key-active { background: var(--sun-500); height: 4px !important; }
.sr-key-hidden { height: 0 !important; border-top: 2px dashed #55606B; border-radius: 0 !important; }
.sr-sky-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.sr-play { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px 8px 12px;
  border-radius: 999px; border: 0; background: var(--shade-900); color: white; cursor: pointer; transition: background 150ms ease; }
.sr-play:hover { background: var(--shade-700); }
.sr-play:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
.sr-play[aria-pressed="true"] { background: var(--sun-500); color: var(--shade-900); }
.sr-dayslider { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.sr-dayslider-label { font-size: 13px; font-weight: 700; color: var(--shade-900); }
.sr-dayslider input { width: 100%; accent-color: var(--shade-900); }
.sr-dayslider-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.sr-sky-now { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.sr-sky-now b { color: var(--shade-900); }
.sr-tip-time { font-weight: 800; color: var(--shade-900); margin-right: 4px; }
.sr-sw-active { background: var(--sun-500); }

/* typical days */
.sr-days { position: relative; display: flex; flex-direction: column; gap: 6px; outline: none; touch-action: pan-y; cursor: crosshair; }
.sr-days:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 6px; border-radius: 10px; }
.sr-days-guide { position: absolute; left: 0; top: -4px; bottom: 18px; width: 0; border-left: 1px solid var(--shade-900); pointer-events: none; opacity: 0; transition: opacity 120ms ease; }
.sr-days.is-reading .sr-days-guide { opacity: 1; }
.sr-days-time { position: absolute; bottom: -18px; left: 0; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px;
  background: var(--shade-900); color: white; font-size: 11px; font-weight: 700; }
.sr-day { transition: opacity 120ms ease; }
.sr-days.is-reading .sr-day[data-i]:not(.is-hot) { opacity: 0.55; }
.sr-day.is-hot .sr-day-month { color: var(--shade-900); font-weight: 700; }
.sr-day { display: grid; grid-template-columns: 44px 1fr 64px; align-items: center; gap: 10px; }
.sr-day-month { font-size: 13px; color: var(--muted); }
.sr-day-strip { position: relative; height: 14px; border-radius: 7px; background: #55606B; overflow: hidden; }
.sr-day-light { position: absolute; top: 0; bottom: 0; background: #E3E6E9; }
.sr-day-sun { position: absolute; top: 0; bottom: 0; background: var(--sun-500); }
.sr-day-total { font-size: 13px; color: var(--ink); text-align: right; }
.sr-day-axis { margin-top: 2px; }
.sr-day-ticks { position: relative; height: 14px; font-size: 11px; color: var(--muted); }
.sr-day-ticks span { position: absolute; transform: translateX(-50%); }

#srViewBody { position: relative; }
.sr-tip { position: absolute; left: 0; top: 0; z-index: 30; min-width: 190px; max-width: 280px; padding: 10px 12px; border-radius: 12px;
  background: white; border: 1px solid var(--card-border); box-shadow: 0 10px 28px rgba(18, 42, 56, 0.16); pointer-events: none;
  font-size: 13px; color: var(--ink); transition: transform 90ms ease-out; }
.sr-tip-head { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--shade-900); }
.sr-tip-head small { font-weight: 600; color: var(--muted); }
.sr-tip-line { margin: 0 0 6px; color: var(--muted); }
.sr-tip-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.sr-tip-row span { flex: 1; color: var(--muted); }
.sr-tip-row b { font-weight: 700; color: var(--shade-900); white-space: nowrap; }
.sr-tip-row b small { font-weight: 600; color: var(--muted); }
.sr-tip-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sr-sw-got, .sr-sw-june { background: var(--sun-500); }
.sr-sw-lost { background: repeating-linear-gradient(135deg, #CBCFD4 0 3px, #E3E6E9 3px 6px); }
.sr-sw-march { background: #F7C08A; }
.sr-sw-december { background: #D8C1A8; }
.sr-sw-shade { background: #E3E6E9; border: 1px solid #CBCFD4; }
.sr-sw-night { background: #55606B; }

/* a report being made: the bar follows the worker's real step, the steps tick off */
.sr-making { max-width: 560px; }
.sr-progress { position: relative; height: 8px; margin: 18px 0 16px; border-radius: 999px; background: var(--cream); border: 1px solid var(--card-border); overflow: hidden; }
.sr-progress.is-compact { height: 5px; margin: 8px 0 2px; max-width: 320px; }
.sr-progress-fill { position: absolute; inset: 0; background: var(--shade-900); border-radius: inherit;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sr-progress-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat; animation: sr-sheen 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes sr-sheen { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.sr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sr-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); transition: color 200ms ease; }
.sr-step-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid var(--card-border); background: white; color: var(--muted); }
.sr-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--card-border); }
.sr-step.is-now { color: var(--shade-900); font-weight: 600; }
.sr-step.is-now .sr-step-icon { border-color: transparent; background: #FFF4E6; color: var(--sun-500); }
.sr-step.is-done .sr-step-icon { border-color: transparent; background: var(--shade-900); color: white; }
.sr-making-ahead { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.sr-sunspin { animation: sr-spin 6s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }

.sr-notes ul { margin: 6px 0 12px; padding-left: 18px; }
.sr-notes li { font-size: 14px; line-height: 1.55; margin-bottom: 6px; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sr-chart.is-rising .sr-bar-stack, .sr-sunspin, .sr-progress-fill::after { animation: none; }
  .sr-play, .sr-day, .sr-bar-stack { transition: none; }
  .sr-tip { transition: none; }
}

@media (max-width: 640px) {
  .sr-sky-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .sr-sky-scroll svg { width: 720px; max-width: none; }
  .sr-sky-wrap { touch-action: pan-x pan-y; }
  .sr-plot { padding-left: 32px; }
  .sr-axis-line, .sr-guide-h { left: 32px; }
  .sr-axis { height: 160px; }
  .sr-bar-stack { flex-basis: 160px; }
  .sr-chart { height: 182px; }
  .sr-title { font-size: 22px; }
  .sr-map { height: 360px; }
  .sr-tabs { display: flex; width: 100%; }
  .sr-tab { flex: 1; padding: 7px 6px; font-size: 13px; }
  .sr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sr-kpi { padding: 10px; }
  .sr-kpi-value { font-size: 18px; }
  .sr-kpi-label { font-size: 12px; line-height: 1.3; }
  .sr-chart { gap: 3px; }
  .sr-mine-item { flex-wrap: wrap; row-gap: 10px; }
  /* the name and summary get the whole first row; the date and the buttons go under them */
  .sr-mine-main { flex-basis: 100%; }
  .sr-mine-date { flex: 1; }
  .sr-day { grid-template-columns: 36px 1fr 52px; gap: 8px; }
}

@media print {
  header, footer, .sr-pick, .sr-view-top, .sr-range, .sr-tabs, .sr-tip, .sr-sky-controls, .cookie-consent-banner, .auth-floater { display: none !important; }
  .sr-page { padding: 0; max-width: none; }
  .sr-card { break-inside: avoid; border-color: var(--card-border); }
}

/* --- selection (a click) versus reading (a hover) ------------------------------------------------------------- */
/* angles only on request ("Show sun angles") */
.sr-sky-wrap:not(.shows-angles) .sr-angles text { display: none; }
.sr-angles-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sr-angles-toggle input { accent-color: var(--shade-900); margin: 0; }
.sr-clear { margin-left: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--shade-900); background: none; border: 0;
  padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sr-clear:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; border-radius: 4px; }
/* the selected month: its label in navy with a small navy mark under it, nothing else dimmed */
.sr-bar.is-pinned .sr-bar-label { color: var(--shade-900); font-weight: 800; position: relative; }
.sr-bar.is-pinned .sr-bar-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 3px; margin-left: -7px;
  border-radius: 2px; background: var(--shade-900); }
.sr-bar.is-pinned .sr-bar-stack { box-shadow: 0 0 0 2px var(--shade-900); border-radius: 4px; }
.sr-day.is-pinned .sr-day-month { color: var(--shade-900); font-weight: 800; }
.sr-day.is-pinned .sr-day-strip { box-shadow: 0 0 0 2px var(--shade-900); }
.sr-days.is-guided .sr-days-guide { opacity: 1; }
.sr-days.is-hover-guide .sr-days-guide { border-left-style: dashed; }
/* the longest and the shortest day's sun at the same clock time */
.sr-ref-now circle { stroke: white; stroke-width: 2; }
.sr-ref-now-june circle { fill: var(--sun-500); }
.sr-ref-now-december circle { fill: #C9AE90; }
.sr-ref-now.is-shaded circle { fill: #55606B; }
.sr-ref-now text { font-size: 11px; font-weight: 700; fill: var(--shade-900); paint-order: stroke; stroke: #FFF8EC; stroke-width: 3px; }

/* --- the person's own reports on the picker map ------------------------------------------------------------------ */
.sr-mine-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sr-mine-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sr-check input { accent-color: var(--shade-900); margin: 0; }
.sr-btn-small { padding: 6px 12px; font-size: 13px; }
.sr-report-pin { pointer-events: auto; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.sr-report-pin .sr-report-pin-tag { left: 50%; bottom: 0; transform: translate(-50%, -4px); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px; border-radius: 999px; background: white; border: 1.5px solid var(--shade-900); color: var(--shade-900);
  font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 6px rgba(18, 42, 56, 0.2); transition: background 150ms ease, color 150ms ease; }
.sr-report-pin .sr-report-pin-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--sun-500); box-shadow: 0 0 0 2px #FFE7C8; }
.sr-report-pin:hover .sr-report-pin-tag, .sr-report-pin.is-open .sr-report-pin-tag { background: var(--shade-900); color: white; }
.sr-report-pin:focus-visible { outline: none; }
.sr-report-pin:focus-visible .sr-report-pin-tag { outline: 2px solid var(--sun-500); outline-offset: 2px; }
.sr-pin-card { position: absolute; left: 0; top: 0; z-index: 3; width: 230px; padding: 12px 14px 14px; border-radius: 14px; pointer-events: auto;
  background: white; border: 1px solid var(--card-border); box-shadow: 0 10px 28px rgba(18, 42, 56, 0.18); }
.sr-pin-card-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: none;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sr-pin-card-x:hover { background: var(--cream); color: var(--shade-900); }
.sr-pin-card-title { margin: 0 26px 2px 0; font-size: 14px; font-weight: 700; color: var(--shade-900); line-height: 1.3; }
.sr-pin-card-kind { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.sr-pin-card-sun { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.sr-pin-card-sun b { color: var(--sun-500); }
.sr-pin-card-open { width: 100%; justify-content: center; padding: 9px 14px; font-size: 14px; }

/* --- the shadow map at the top of a report: 3D, turns and tilts around the spot, never pans --------------------- */
.sr-shade { position: relative; height: 340px; margin-top: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border);
  outline: none; background: #F4EEE2; touch-action: none; }
.sr-shade:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 3px; }
.sr-shade .sr-shade-map { position: absolute; inset: 0; }  /* over maplibre-gl.css's position: relative */
.sr-shade .maplibregl-canvas { cursor: grab; touch-action: none; }
.sr-shade.is-dragging .maplibregl-canvas { cursor: grabbing; }
.sr-shade .maplibregl-ctrl-group { border-radius: 10px; box-shadow: none; border: 1px solid var(--card-border); }
.sr-shade-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sr-shade-line line { stroke: #55606B; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; opacity: 0.8; }
.sr-shade-line line.is-lit { stroke: var(--sun-500); stroke-dasharray: none; opacity: 0.95; }
.sr-shade-sun, .sr-shade-spot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.sr-shade-sun::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  background: #FFF8EC; border: 2.5px dashed #55606B; }
.sr-shade-sun.is-lit::before { background: var(--sun-500); border: 2.5px solid white; box-shadow: 0 0 0 10px rgba(255, 196, 92, 0.28), 0 0 24px 10px rgba(255, 196, 92, 0.35); }
.sr-shade-spot i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  background: #55606B; border: 2.5px solid white; box-shadow: 0 0 0 6px rgba(18, 42, 56, 0.12); }
.sr-shade-spot.is-lit i { background: var(--sun-500); box-shadow: 0 0 0 6px rgba(245, 154, 35, 0.22); }
.sr-shade-msg { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted);
  background: #F4EEE2; pointer-events: none; }
.sr-shade-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.sr-shade-now { flex: 1 1 240px; margin: 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sr-shade-now b { color: var(--shade-900); }
.sr-shade-dot { width: 10px; height: 10px; border-radius: 50%; background: #55606B; flex: none; }
.sr-shade-dot.is-lit { background: var(--sun-500); box-shadow: 0 0 0 3px #FFE7C8; }
.sr-shade-sliders { flex: 2 1 420px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 22px; }
.sr-shade-time { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--shade-900); }
.sr-shade-time > span:first-child { min-width: 36px; }
.sr-shade-track { flex: 1; position: relative; display: block; padding-bottom: 14px; }
.sr-shade-track input { width: 100%; margin: 0; accent-color: var(--shade-900); }
/* the months under the date slider, each letter over its own middle */
.sr-shade-months { position: absolute; left: 8px; right: 8px; bottom: 0; height: 12px; }
.sr-shade-months i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); line-height: 12px; }
.sr-shade-day { align-items: flex-start; }
.sr-shade-day > span:first-child { padding-top: 3px; }
.sr-shade-time input { flex: 1; accent-color: var(--shade-900); }
@media (max-width: 600px) { .sr-shade { height: 280px; } }
@media print { .sr-shade-controls .sr-shade-time, .sr-shade .maplibregl-ctrl { display: none; } }

/* --- the skyline's photo view -------------------------------------------------------------------------------------- */
.sr-sky-view { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 12px; }
.sr-sky-photo-hint { margin: 0; font-size: 13px; color: var(--muted); }
/* the floor switch's look, under its own class: the page wires every .sr-seg-btn to the floor */
.sr-view-btn { font: inherit; font-size: 14px; border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.sr-view-btn.is-on { background: var(--shade-900); color: white; }
.sr-view-btn:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
.sr-sky-wrap.is-photo .sr-sky-scroll svg { width: 100%; max-width: 100%; }
/* on a wide screen the photo (720 x ~566, a camera's proportions) would stand ~820 px tall at full width: kept to
   about the height of a laptop's view instead, centred; a phone is narrower than this anyway */
.sr-sky-wrap.is-photo .sr-sky-scroll svg { max-width: 640px; display: block; margin: 0 auto; }
.sr-sky-wrap.is-photo { cursor: grab; touch-action: pan-y; }
/* on a phone the panorama's box scrolls sideways; in the photo nothing does, and a sideways swipe must reach the
   drag that turns the camera - left to the box, the browser took it as a scroll and cancelled the drag at once */
.sr-sky-wrap.is-photo .sr-sky-scroll, .sr-sky-wrap.is-photo .sr-sky-scroll svg { overflow-x: hidden; touch-action: pan-y; }
.sr-sky-wrap.is-photo:active { cursor: grabbing; }
.sr-sky-ground { fill: #EFE6D6; }
.sr-sky-wrap.is-photo .sr-sky-grid { fill: none; }
.sr-sky-dirtick { stroke: var(--shade-900); stroke-width: 1; opacity: 0.5; }
.sr-sky-topdot { fill: white; stroke: var(--shade-900); stroke-width: 1.6; }

/* --- the picker map's "retrieving detailed information" note ------------------------------------------------------ */
.sr-map-status { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 70px); padding: 7px 12px 7px 10px; border-radius: 999px; background: white; border: 1px solid var(--card-border);
  font-size: 13px; font-weight: 600; color: var(--shade-900); pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease; }
.sr-map-status.is-on { opacity: 1; transform: none; }
.sr-map-status svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .sr-map-status { transition: none; } }

/* --- the sample report: its button, and the note at its top ------------------------------------------------------- */
.sr-intro .sr-see-sample { margin-top: 14px; }
.sr-link { font: inherit; font-size: 14px; font-weight: 600; color: var(--shade-900); background: none; border: 0; padding: 4px 2px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sr-link:hover { color: var(--sun-500); }
.sr-link:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; border-radius: 4px; }
.sr-sample-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 14px 18px; margin-bottom: 16px; border-radius: 16px; background: #FFF4E2; border: 1px solid #F6D7A8; }
.sr-sample-note p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--shade-900); }
@media print { .sr-sample-note { display: none; } }

/* the sources line at the foot of a report, with its link to how it's calculated (the terms) */
.sr-method { margin: 4px 2px 0; }
.sr-method a { color: var(--shade-900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sr-method a:hover { color: var(--sun-500); }

/* the picker map's Map / Aerial photo switch, bottom left */
.sr-view-switch { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: inline-flex; padding: 3px; border-radius: 999px;
  background: white; border: 1px solid var(--card-border); }
.sr-view-switch button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; padding: 6px 12px; border-radius: 999px;
  color: var(--ink); cursor: pointer; }
.sr-view-switch button.is-on { background: var(--shade-900); color: white; }
.sr-view-switch button:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
.sr-map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-width: calc(100% - 210px); }   /* clear of the switch */

/* the picked spot can be dragged */
.sr-pin-spot .sr-marker { pointer-events: auto; cursor: grab; touch-action: none; }
.sr-pin-spot.is-dragging .sr-marker { cursor: grabbing; transform: scale(1.15); }
.sr-pin-spot .sr-marker::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }   /* a bigger target for a finger */

/* the best way to place panels (bestPanelHtml() in sun-report.js): a compass and a side view, the yield beside them */
.sr-best-main { display: flex; gap: 20px; align-items: center; }
.sr-best-svg { flex: 0 0 290px; width: 290px; height: 156px; }   /* the dial carries the aerial photo: big enough to read */
.sr-best-svg text { font-size: 10px; font-weight: 600; fill: var(--muted); text-anchor: middle; }
.sr-best-svg .sr-best-deg { text-anchor: start; fill: var(--shade-900); font-size: 12px; }
.sr-best-dial { fill: var(--cream); stroke: var(--card-border); }
.sr-best-arrow { fill: var(--sun-500); fill-opacity: 0.9; stroke: white; stroke-width: 1.5; stroke-linejoin: round; }
/* over the aerial photo: a white rim round it, the spot itself as a navy dot ringed in white */
.sr-best-rim { fill: none; stroke: white; stroke-width: 2; }
/* the small 3D view (placeBestMap()) over the dial: the svg's circle at cx 78, cy 75, r 62 of its 290 x 156; it fades
   in once MapLibre has drawn, the flat photo under it until then */
.sr-best-fig { position: relative; flex: 0 0 290px; width: 290px; height: 156px; }
.sr-best-fig .sr-best-svg { display: block; }
.sr-best-3d { position: absolute; left: 16px; top: 13px; width: 124px; height: 124px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px white; z-index: 1; pointer-events: none; }
.sr-best-3d-map { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; }
.sr-best-3d-map.is-ready { opacity: 1; }
.sr-best-spot { fill: var(--shade-900); stroke: white; stroke-width: 1.5; }
.sr-best-ground { stroke: var(--muted); stroke-width: 1.5; }
.sr-best-panel { stroke: var(--shade-900); stroke-width: 5; stroke-linecap: round; }
.sr-best-angle { fill: none; stroke: var(--sun-500); stroke-width: 1.5; }
.sr-best-info { flex: 1; min-width: 0; }
.sr-best-head { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--shade-900); }
.sr-best-kpis { margin-bottom: 10px; }
.sr-best-line { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.sr-best-sub { margin: 18px 0 4px; font-size: 14px; font-weight: 600; color: var(--shade-900); }
.sr-best-vertical { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.sr-best-vdir { font-weight: 600; color: var(--shade-900); min-width: 2.2em; }
.sr-best-vbar { height: 10px; border-radius: 5px; background: var(--cream); overflow: hidden; }
.sr-best-vbar i { display: block; height: 100%; border-radius: 5px; background: var(--sun-500); }

/* your own placement (sun-report.js mineHtml()): the building's directions as chips, a direction and a tilt slider,
   then yours against the best as two bars; on the dial a navy arrow under the best one's orange, in the side view a
   dashed slate line beside the best tilt */
.sr-mine { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--card-border); }
.sr-mine-roof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 2px; }
.sr-mine-roof:empty { display: none; }
.sr-mine-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.sr-mine-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 12px 0 14px; }
.sr-mine-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; }
.sr-mine-name { font-size: 13px; font-weight: 600; color: var(--shade-900); }
.sr-mine-val { grid-column: 1 / -1; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-mine-field input:disabled { opacity: 0.45; }
/* the best tilt for the direction set: a dashed slate mark across the tilt's track (24px thumb, as styles.css .lumo-range)
   that moves as the direction does, over the track (clicks pass through); and a pill beside the tilt's value that sets it */
.sr-mine-range { position: relative; display: block; }
.sr-mine-range .lumo-range { width: 100%; }
.sr-mine-optmark { position: absolute; z-index: 1; top: 50%; left: calc(12px + (100% - 24px) * var(--f, 0)); width: 2px; height: 24px;
  margin: -12px 0 0 -1px; background: repeating-linear-gradient(to bottom, var(--muted) 0 4px, transparent 4px 7px); pointer-events: none;
  transition: left 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.sr-mine-val-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sr-mine-opt-use { padding: 3px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--shade-900);
  background: white; border: 1px solid var(--card-border); border-radius: 999px; cursor: pointer; }
.sr-mine-opt-use:hover { border-color: var(--shade-700); }
.sr-mine-opt-use:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
@media (pointer: coarse) { .sr-mine-opt-use { min-height: 44px; padding: 8px 14px; } }
.sr-range-plain::-webkit-slider-runnable-track { background: #EDE6D6; }
.sr-range-plain::-moz-range-track { background: #EDE6D6; }
.sr-mine-bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 84px; align-items: center; gap: 10px; margin-bottom: 6px; }
.sr-mine-bar-name { font-size: 13px; font-weight: 600; color: var(--shade-900); }
.sr-mine-track { height: 10px; border-radius: 5px; background: var(--cream); overflow: hidden; }
.sr-mine-track i { display: block; height: 100%; border-radius: 5px; transition: width 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.sr-mine-bar.is-yours .sr-mine-track i { background: var(--sun-500); }
.sr-mine-bar.is-best .sr-mine-track i { background: var(--shade-900); opacity: 0.35; }
.sr-mine-bar-val { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sr-mine-bar-val small { font-weight: 400; color: var(--muted); }
.sr-mine-result .sr-best-line { margin-top: 8px; }
.sr-mine-arrow { fill: var(--shade-900); stroke: white; stroke-width: 1.5; stroke-linejoin: round; }
.sr-mine-tilt { stroke: var(--muted); stroke-width: 3; stroke-dasharray: 5 4; stroke-linecap: round; }
@media (max-width: 640px) {
  .sr-mine-sliders { grid-template-columns: 1fr; }
  .sr-mine-bar { grid-template-columns: 76px minmax(0, 1fr) 76px; }
}
@media (prefers-reduced-motion: reduce) { .sr-mine-track i, .sr-mine-optmark { transition: none; } }
.sr-best-vval { text-align: right; color: var(--ink); }
.sr-best-vval small { color: var(--muted); }
@media (max-width: 640px) {
  .sr-best-main { flex-direction: column; align-items: stretch; gap: 12px; }
  .sr-best-fig { align-self: center; }
  .sr-best-head { font-size: 16px; }
}

/* the small map beside the skyline (beamSvg() / drawBeam() in sun-report.js): the buildings from above, north up,
   and a beam from the spot the way the panorama or photo looks; fixed, nothing to zoom or drag */
.sr-sky-row { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.sr-sky-row .sr-sky-wrap { flex: 1; min-width: 0; }
.sr-beam { flex: 0 0 168px; width: 168px; }
.sr-beam-svg { display: block; width: 100%; height: auto; }
.sr-beam-ground { fill: #F4EFE6; }
.sr-beam-rim { fill: none; stroke: var(--card-border); stroke-width: 1.5; }
.sr-beam-b { fill: #8C99A3; stroke: #6F7D88; stroke-width: 0.4; }
.sr-beam-ray { fill: rgba(242, 153, 74, 0.32); stroke: var(--sun-500); stroke-width: 1; }
.sr-beam-axis { stroke: var(--sun-500); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sr-beam-spot { fill: var(--shade-900); stroke: white; stroke-width: 1.5; }
.sr-beam-sun { fill: var(--sun-500); stroke: white; stroke-width: 1.5; }
.sr-beam-sun.is-hidden { fill: white; stroke: #6F7D88; }
.sr-beam-n { font-size: 11px; font-weight: 700; fill: var(--shade-900); text-anchor: middle; paint-order: stroke; stroke: #F4EFE6; stroke-width: 3; }
@media (max-width: 640px) {
  /* no room beside it: an inset in the view's top right corner */
  .sr-beam { position: absolute; top: 6px; right: 6px; width: 92px; z-index: 2; pointer-events: none;
    border-radius: 50%; box-shadow: 0 2px 8px rgba(18, 42, 56, 0.18); }
}
@media print { .sr-beam { display: none; } }

/* the Solar panels tab's setup (setupHtml() in sun-report.js): panels and watts, the savings' assumptions folded */
.sr-setup { margin: 0 0 16px; }
.sr-setup-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.sr-setup-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.sr-setup-field input { width: 120px; font: inherit; font-size: 15px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--card-border); background: white; color: var(--ink); }
.sr-setup-field input:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 1px; }
.sr-setup-kwp { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--shade-900); }
.sr-setup-more { margin-top: 10px; }
.sr-setup-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--shade-700); }
.sr-setup-more .sr-setup-row { margin-top: 10px; align-items: flex-start; }
.sr-setup-price { display: flex; flex-direction: column; gap: 4px; max-width: 260px; }
.sr-setup-src { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.sr-setup-reset { font: inherit; font-size: 12px; padding: 0; border: 0; background: none; color: var(--sun-500); text-decoration: underline; cursor: pointer; text-align: left; }
.sr-best-setup { font-weight: 600; }
@media (max-width: 640px) {
  .sr-setup-field { flex: 1 1 130px; }
  .sr-setup-field input { width: 100%; }
  .sr-setup-price { max-width: none; flex: 1 1 100%; }
}

/* the free basic report (renderBasic() in sun-report.js): today only, the rest of the full report locked */
.sr-make-basic { margin-left: 8px; }
.sr-free-basic { display: block; margin-top: 6px; }
.sr-tag-basic { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--cream); border: 1px solid var(--card-border);
  font-size: 11px; font-weight: 600; color: var(--shade-700); }
.sr-basic-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 14px 16px;
  border-radius: 14px; background: #FFF4E6; border: 1px solid #F5D9B5; }
.sr-basic-note p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.sr-basic-note .sr-make-msg { flex-basis: 100%; }
.sr-basic-note .sr-make-msg:empty { display: none; }
.sr-basic-error { color: #B03A2E !important; flex-basis: 100% !important; }
.sr-today-sun { margin: 4px 0 6px; font-size: 18px; font-weight: 700; color: var(--sun-500); }
.sr-today-year { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--card-border); font-size: 15px; font-weight: 600; color: var(--shade-900); }
.sr-basic-sky .sr-sky-hint { display: none; }
/* the year's sliders in a basic report: shown, greyed and locked, to say the full report has them */
.is-locked input[type="range"] { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }
.is-locked .sr-shade-months { opacity: 0.5; }
.sr-dayslider-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-slider-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--cream); font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.sr-dayslider-head .sr-slider-lock { margin-left: 0; }
.sr-slider-lock.is-icon { padding: 2px 5px; margin-left: 4px; }
.sr-locked { position: relative; }
.sr-locked-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sr-locked-tag { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--cream); font-size: 12px; font-weight: 600; color: var(--muted); }
.sr-locked-body { opacity: 0.55; filter: grayscale(1); pointer-events: none; user-select: none; }
.sr-locked-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.sr-locked-bars i { flex: 1; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(135deg, #C9CFD4 0 6px, #DCE0E3 6px 12px); }
.sr-locked-lines i { display: block; height: 12px; margin: 10px 0; border-radius: 6px; background: #DCE0E3; }
.sr-locked-lines i:nth-child(2) { width: 75%; } .sr-locked-lines i:nth-child(3) { width: 55%; }
.sr-locked-strips i { display: block; height: 10px; margin: 8px 0; border-radius: 5px; background: linear-gradient(90deg, #DCE0E3 0 20%, #C9CFD4 20% 70%, #DCE0E3 70%); }
.sr-locked-cta { display: flex; justify-content: center; margin-top: 14px; }
@media (max-width: 640px) {
  .sr-make-basic { margin-left: 0; margin-top: 8px; }
  .sr-locked-bars { height: 90px; gap: 4px; }
}

/* --- The purpose and the verdict (sun-report.js verdictHtml()) ------------------------------------------------- */
.sr-purpose-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.sr-purpose-select { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--card-border);
  background: white; color: var(--ink); max-width: 100%; }
.sr-purpose-select:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
.sr-verdict { border-color: #F5D9B3; background: linear-gradient(180deg, #FFF8EE 0%, white 70%); }
.sr-verdict--cool, .sr-verdict.sr-level-1, .sr-verdict.sr-level-2 { border-color: var(--card-border); background: white; }
.sr-verdict-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sr-verdict-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sr-verdict-purpose { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sr-verdict-for { font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-verdict-word { margin: 6px 0 8px; font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--sun-500); }
.sr-verdict.sr-level-1 .sr-verdict-word, .sr-verdict.sr-level-2 .sr-verdict-word,
.sr-verdict--cool .sr-verdict-word { color: var(--shade-900); }
.sr-verdict-line { margin: 0 0 6px; max-width: 720px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.sr-verdict-kpis { margin: 14px 0 12px; }
.sr-verdict-caveat { margin: 0; }
@media (max-width: 560px) {
  .sr-verdict-kpis { grid-template-columns: 1fr; }
  .sr-verdict-word { font-size: 24px; }
}

/* flowers and vegetables: the growing season month by month, and what grows in that light */
.sr-plants-card .sr-best-sub:first-of-type { margin-top: 12px; }
.sr-plants-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.sr-pm { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px;
  background: var(--cream); font-size: 12px; text-align: center; }
.sr-pm b { font-weight: 600; color: var(--shade-900); text-transform: capitalize; }
.sr-pm i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--shade-900); }
.sr-pm em { font-style: normal; color: var(--muted); }
.sr-pm--full { background: #FDF0DF; }
/* the muted grey is 4.49:1 on that tint: a step darker clears 4.5:1 */
.sr-pm--full em { color: #5E6D76; }
.sr-pm--full i { color: var(--sun-500); }
.sr-pm--shade { background: #EEF1F3; }
.sr-plants-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.sr-plants-lists p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink); }
@media (max-width: 560px) {
  .sr-plants-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-plants-lists { grid-template-columns: 1fr; }
}

/* a section the purpose puts away: one quiet line, opened with a tap */
.sr-fold { margin-bottom: 16px; border: 1px solid var(--card-border); border-radius: 16px; background: white; }
.sr-fold > .sr-card { border: 0; margin: 0; padding-top: 4px; }
.sr-fold-sum { list-style: none; cursor: pointer; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--shade-900);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sr-fold-sum::-webkit-details-marker { display: none; }
.sr-fold-sum::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--muted); }
.sr-fold[open] > .sr-fold-sum::after { content: '\2212'; }
.sr-fold-sum:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; border-radius: 16px; }
.sr-fold[open] > .sr-card > .sr-h3:first-child { display: none; }
.sr-purpose-hint { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }

/* a balcony's spot: an arrow out from its wall, the way it looks out (sun-report.js: --facing from the spot check,
   --bearing from the map) */
.sr-pin-spot .sr-facing { display: none; }
.sr-pin-spot.is-balcony .sr-facing { display: block; left: 0; top: 0; width: 0; height: 0;
  transform: rotate(calc(var(--facing, 0deg) - var(--bearing, 0deg))); }
.sr-pin-spot.is-balcony .sr-facing::before { content: ""; position: absolute; left: -2px; top: -34px; width: 4px; height: 20px;
  border-radius: 2px; background: var(--shade-900); }
.sr-pin-spot.is-balcony .sr-facing::after { content: ""; position: absolute; left: -7px; top: -44px; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--shade-900); }
.sr-floor-row .sr-purpose-hint:empty { display: none; }

/* zoomed out too far to pick a spot (sun-report.js updatePickable()): a tap zooms in there, so the pointer is the
   browser's own magnifying glass, and a note on the map says why */
.sr-map.sr-map--far .maplibregl-canvas-container.maplibregl-interactive { cursor: zoom-in; }
.sr-map--far .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.sr-map-zoom { position: absolute; left: 50%; bottom: 64px; z-index: 3; padding: 8px 14px; border-radius: 999px;
  background: rgba(18, 42, 56, 0.86); color: white; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity 200ms ease, transform 200ms ease; }
.sr-map-zoom.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .sr-map-zoom { transition: none; } }

/* The picker on a wide screen: the map and the picked spot's panel side by side, both in view, so choosing a balcony
   or its floor shows on the map at once. Until a spot is picked the map has the whole width. */
@media (min-width: 900px) {
  .sr-workspace:has(> .sr-spot:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px;
    align-items: start; }
  .sr-workspace:has(> .sr-spot:not([hidden])) .sr-map { height: clamp(440px, calc(100vh - 220px), 680px); }
  .sr-workspace > .sr-spot { margin-top: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .sr-workspace > .sr-spot .sr-floor-row, .sr-workspace > .sr-spot .sr-purpose-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sr-workspace > .sr-spot .sr-purpose-select, .sr-workspace > .sr-spot .sr-name input { width: 100%; max-width: none; }
  .sr-workspace > .sr-spot .sr-make { flex-direction: column; align-items: stretch; }
  .sr-workspace > .sr-spot .sr-make .sr-btn { justify-content: center; }
}
@media (min-width: 900px) {
  /* with the panel beside it the map would be narrow in the 980 px page: the picker widens while a spot is open */
  .sr-page:has(#srPick:not([hidden]) .sr-workspace > .sr-spot:not([hidden])) { max-width: 1280px; }
}

/* Phone and tablet (sun-report.js placeFloorRow()): the ground or a roof / a balcony, and the floor, float at the top of
   the map, clear of its zoom buttons, so the spot can be watched moving while choosing */
.sr-floor-row.sr-floor-float { position: absolute; left: 10px; right: 58px; top: 10px; z-index: 4; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; pointer-events: none; }
/* only the buttons float, each with its own white and shadow; the map shows between them */
.sr-floor-float > .sr-seg, .sr-floor-float > .sr-floor-pick { pointer-events: auto; background: white;
  border: 1px solid var(--card-border); box-shadow: 0 2px 10px rgba(18, 42, 56, 0.18); }
.sr-floor-float > .sr-floor-pick { padding: 3px 4px 3px 12px; border-radius: 999px; }
.sr-floor-float .sr-floor-pick select { border: 0; background: var(--cream); border-radius: 999px; }
.sr-floor-float .sr-floor-label, .sr-floor-float .sr-purpose-hint { display: none; }
.sr-floor-float .sr-seg { padding: 2px; }
.sr-floor-float .sr-seg-btn { font-size: 13px; padding: 6px 11px; }
.sr-floor-float .sr-floor-pick { gap: 6px; font-size: 13px; font-weight: 600; color: var(--shade-900); }
.sr-floor-float .sr-floor-pick select { padding: 5px 8px; font-size: 13px; }
/* the map's own note ("Retrieving...") steps below the bar while both show */
.sr-map-wrap:has(> .sr-floor-float:not([hidden])) .sr-map-status { top: 66px; }

/* --- Who and what (sun-report.js renderAsk(), verdictHtml()) --------------------------------------------------- */
.sr-ask { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.sr-ask-block { display: flex; flex-direction: column; gap: 8px; }
.sr-ask-optional { font-weight: 400; }
/* who: one of seven, so the homepage's "Sort by" picker (styles.css .sort-picker) rather than chips; on a phone its
   menu is a bottom sheet (sun-report.js openWho()) */
.sr-who { max-width: 420px; }
.sr-who .sort-picker-text.is-empty { font-weight: 400; color: var(--muted); }
.sr-who-menu { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.sr-who-group { margin: 0; padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sr-who-menu > [role="group"]:first-of-type .sr-who-group { padding-top: 5px; }
.sr-who-sep { height: 1px; margin: 5px 10px; background: var(--card-border); }
.sr-who-none { color: var(--muted); }
.sr-who-sheet-title { display: none; }
.sr-who-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(18, 42, 56, 0.32); }
.sr-who-backdrop[hidden] { display: none; }
/* the phone's sheet: from the bottom edge, its rows thumb-sized, above the app's tab bar */
.sr-who-menu.is-sheet { position: fixed; z-index: 310; left: 0; right: 0; top: auto; bottom: 0; max-height: 82vh;
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(22, 48, 63, 0.16); animation: sr-sheet-up 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.sr-who-menu.is-sheet::before { content: ''; display: block; width: 36px; height: 4px; margin: 0 auto 6px;
  border-radius: 999px; background: var(--card-border); }
.sr-who-menu.is-sheet .sr-who-sheet-title { display: block; margin: 4px 10px 2px; font-size: 16px; font-weight: 600; color: var(--shade-900); }
.sr-who-menu.is-sheet .sort-option { min-height: 48px; font-size: 15px; }
@keyframes sr-sheet-up { from { transform: translateY(100%); } }
html.sr-sheet-open, html.sr-sheet-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sr-who-menu.is-sheet { animation: none; } }
/* a finger needs 44px: the picker's questions on a touch screen */
@media (pointer: coarse) {
  .sr-who .sort-picker-btn { min-height: 44px; }
  #srWhat .sr-ichip, .sr-mine-roof .sr-ichip { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  #srWhat .sr-chip-row { gap: 8px; }
}
.sr-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-ichip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--card-border); background: white; color: var(--ink); cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease; }
.sr-ichip:hover { border-color: var(--shade-700); }
/* navy like the switcher's icons; Sun Bright only once picked (an engaged choice, as a switched-on toggle) */
.sr-ichip-icon { flex: none; margin-left: -2px; color: var(--shade-900); }
.sr-ichip.is-on .sr-ichip-icon { color: var(--sun-500); }
.sr-ilabel .sr-ichip-icon, .sr-h3--icon .sr-ichip-icon, .sr-fold-sum .sr-ichip-icon { color: var(--shade-900); }
/* the same icons where the report names an interest, and on the section an interest is about */
.sr-ilabel { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sr-ilabel .sr-ichip-icon { width: 14px; height: 14px; margin-left: 0; }
.sr-vb-name .sr-ilabel { gap: 5px; }
.sr-h3--icon { display: flex; align-items: center; gap: 8px; }
.sr-h3--icon .sr-ichip-icon, .sr-fold-sum .sr-ichip-icon { width: 18px; height: 18px; }
.sr-fold-sum .sr-ilabel { gap: 8px; white-space: normal; }
.sr-ichip.is-on { background: var(--shade-900); border-color: var(--shade-900); color: white; }
.sr-ichip:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; }
/* the order the interests were picked in: the first leads the verdict */
.sr-ichip-n { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 700; background: var(--sun-500); color: white; }

/* the report: its interests (owner: chips to change them) and one verdict block per interest */
.sr-verdict-head { align-items: flex-start; }
.sr-verdict-what { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 70%; }
.sr-verdict-what-label { font-size: 12px; color: var(--muted); }
.sr-verdict-what .sr-chip-row { justify-content: flex-end; }
.sr-verdict-what .sr-ichip { font-size: 12.5px; padding: 4px 10px; }
#srViewWhat.is-busy { opacity: 0.55; pointer-events: none; }
.sr-verdict-what-hint { max-width: 360px; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: right; }
.sr-verdict-what-hint.is-done { font-weight: 600; color: var(--shade-900); }
@media (max-width: 640px) { .sr-verdict-what-hint { text-align: left; } }
.sr-vb + .sr-vb { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.sr-vb-name { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sr-vb-word { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--sun-500); }
.sr-vb.sr-level-1 .sr-vb-word, .sr-vb.sr-level-2 .sr-vb-word, .sr-vb--cool .sr-vb-word { color: var(--shade-900); }
/* the hours a word judged ("Afternoon & evening, Apr–Sep"), after the interest's name: quieter than the name */
.sr-vb-when { font-weight: 600; letter-spacing: 0.02em; }
.sr-vb-and { font-weight: 400; }
/* every interest after the first: its word, one line and a link down to its section - not a second full verdict */
.sr-vb--short .sr-vb-word { margin-bottom: 2px; font-size: 17px; }
.sr-vb--short .sr-verdict-line { margin-bottom: 4px; }
.sr-vb-jump { display: inline-block; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--shade-900);
  text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.sr-vb-jump:hover { text-decoration-color: currentColor; }
.sr-vb-jump:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .sr-vb-jump { padding: 12px 0; } }
/* the panel placement's "see this direction from the spot": a link-looking button, as the verdict's links */
.sr-best-look { display: inline-block; margin-top: 4px; padding: 4px 0; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--shade-900); background: none; border: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--muted); text-underline-offset: 3px; }
.sr-best-look:hover { text-decoration-color: currentColor; }
.sr-best-look:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .sr-best-look { padding: 12px 0; } }
/* where a verdict's link lands: clear of the sticky header (and the app's back bar) */
#srViewBody .sr-card[id], #srViewBody .sr-fold { scroll-margin-top: 76px; }
@media (max-width: 640px) {
  .sr-verdict-what { align-items: flex-start; max-width: none; }
  .sr-verdict-what .sr-chip-row { justify-content: flex-start; }
}