/* Copyright 2026 by John A Kline.  See LICENSE for your rights.
   The Gauges page's cards (scripts/gauge_cards.js): a native dialog over
   the page, a full-screen sheet on a phone, in the Solar Array panel
   card's grammar (css/solar-array.css).  Charts are drawn at the width
   they have, so their type is 11 px.

   Each measure is drawn in its Graphs page color (css/graphs.css, linked
   beside this file), so a line means the same thing on both pages; but
   temperature, which crosses the normal bands, is the site's --tp-hi, the
   Graphs red being 2.64:1 on the dark band.

   THE FILLS are grounds for the lines over them, which clear WCAG 3 and
   APCA Lc 30 on each and on the card, in both themes: the normal band the
   Solar Array card's band, the records a paler step of it, the dew point's
   spread a pale step of its own color. */

:root {
  --gk-band: #bccddc;
  --gk-env: #e4ebf1;
  --gk-spread: #d3ebe6;
  --gk-humid: #c0504d;
  --gk-dry: #a07a0c;
  --gk-wind: #3378a0;
  /* the Army's heat flags, the same in both themes: signals, not palette */
  --gk-flag-1: #ffffff;
  --gk-flag-2: #1e9e3e;
  --gk-flag-3: #f2c500;
  --gk-flag-4: #d62828;
  --gk-flag-5: #000000;
}
.theme-dark {
  --gk-band: #3a4d78;
  --gk-env: #1f2a4f;
  --gk-spread: #1b3a42;
  --gk-humid: #e0705a;
  --gk-dry: #e0c060;
  --gk-wind: #6aa9d6;
}

/* ---- on the page: the whole instrument opens its card ------------------ */
.ldp-card.gc-opens { cursor: pointer; }
/* The line under the page head saying the gauges open is the site's
   .tp-opens (css/tempestas.css); only its place under the head is here.
   With scripting off it is hidden and the <noscript> line takes its place. */
.ldpanel > .tp-opens, .ldpanel > noscript > .tp-noscript { margin: -.5rem 0 1.125rem; }
@media (max-width: 600px) {
  .ldpanel > .tp-opens, .ldpanel > noscript > .tp-noscript { margin: -.25rem 0 1.5rem; }
}
.ldp-card.gc-opens .gc-draw:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 4px; border-radius: 50%; }

/* ---- the card ------------------------------------------------------------
   Its frame -- dialog.gcard, its head, nav, body, the Now row, the words
   beside it and its sections -- is the site's, in css/tempestas.css
   (1.35): the Solar Array page's card and the tree card wear it too.
   What is here is the gauge cards' own. */
.gcard-gauge { container-type: inline-size; }
.gcard-gauge .ldp-legend { color: var(--gp-legend); }

.gcard-chart { display: block; max-width: 100%; height: auto; }
.gcard-chart text { font: 11px 'Open Sans', arial, sans-serif; fill: var(--tp-muted); }
.gcard-chart text.note { fill: var(--tp-ink); font-weight: 600;
  paint-order: stroke; stroke: var(--tp-surface); stroke-width: 3px; stroke-linejoin: round; }
.gcard-chart .grid { stroke: var(--tp-hair); stroke-width: 1; }
.gcard-chart .tick { stroke: var(--tp-muted); }
.gcard-chart .band { fill: var(--gk-band); }
.gcard-chart .env { fill: var(--gk-env); }
.gcard-chart .median { fill: none; stroke: var(--tp-accent); stroke-width: 1.2; }
.gcard-chart .yday { fill: none; stroke: var(--tp-faint); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; }
.gcard-chart .trace { fill: none; stroke: var(--tp-hi); stroke-width: 2.5; stroke-linejoin: round; }
.gcard-chart .trace.dew { stroke: var(--g-dew); }
.gcard-chart .trace.hum { stroke: var(--g-hum); }
.gcard-chart .trace.press { stroke: var(--g-press); }
.gcard-chart .fcast { fill: none; stroke: var(--tp-hi); stroke-width: 1.8; stroke-dasharray: 6 4; }
.gcard-chart .fcast.dew { stroke: var(--g-dew); }
.gcard-chart .trace.feel { stroke: var(--g-sun); }
.gcard-chart .trace.shade { stroke: var(--g-press); }
.gcard-chart .trace.wind { stroke: var(--g-wind); }
/* the Army's heat category each hour: the flag, outlined in ink so the
   white shows on the light card and the black on the dark */
.gcard-key .sw.flag, .gcard-rule i.flag { outline: .0625rem solid var(--tp-ink); outline-offset: -.0625rem; }
.gcard-rule.heat .cells { align-items: center; }
.gcard-rule i.under, .gcard-key .sw.under { height: 4px; background: var(--tp-hair); }
.gcard-key .sw.flag.f1, .gcard-rule i.flag.f1 { background: var(--gk-flag-1); }
.gcard-key .sw.flag.f2, .gcard-rule i.flag.f2 { background: var(--gk-flag-2); }
.gcard-key .sw.flag.f3, .gcard-rule i.flag.f3 { background: var(--gk-flag-3); }
.gcard-key .sw.flag.f4, .gcard-rule i.flag.f4 { background: var(--gk-flag-4); }
.gcard-key .sw.flag.f5, .gcard-rule i.flag.f5 { background: var(--gk-flag-5); }
.gcard-chart .spread { fill: var(--gk-spread); }
.gcard-chart .midnight { stroke: var(--tp-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.gcard-chart .nowdot { fill: var(--tp-ink); stroke: var(--tp-surface); stroke-width: 2; }
.gcard-chart .fcdot { fill: var(--tp-surface); stroke: var(--tp-hi); stroke-width: 2; }
.gcard-chart .day { fill: var(--tp-muted); }
.gcard-chart .day.hot { fill: var(--tp-hi); }
.gcard-chart .day.cold { fill: var(--tp-lo); }
.gcard-chart .day.today { fill: var(--tp-accent); }
.gcard-chart .cross { stroke: var(--tp-ink-3); stroke-width: 1; }
.gcard-chart .hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.gcard-read { min-height: 1.4em; font-size: .85rem; color: var(--tp-ink-2); margin: .2rem 0 0; }
.gcard-read b { color: var(--tp-ink); }
.gcard-key { list-style: none; padding: 0; display: flex; gap: .3rem 1rem; flex-wrap: wrap; align-items: center;
  font-size: .78rem; color: var(--tp-muted); margin: .35rem 0 0; }
.gcard-key .sw { display: inline-block; width: 18px; height: 10px; vertical-align: middle; margin-right: .35em; }
.gcard-key .sw.trace { height: 0; border-top: 3px solid var(--tp-hi); }
.gcard-key .sw.trace.dew { border-top-color: var(--g-dew); }
.gcard-key .sw.trace.hum { border-top-color: var(--g-hum); }
.gcard-key .sw.fcast { height: 0; border-top: 2px dashed var(--tp-hi); }
.gcard-key .sw.trace.feel { border-top-color: var(--g-sun); }
.gcard-key .sw.trace.shade { border-top-color: var(--g-press); }
.gcard-key .sw.trace.wind { border-top-color: var(--g-wind); }
.gcard-key .sw.humid { background: var(--gk-humid); }
.gcard-key .sw.dry { background: var(--gk-dry); }
.gcard-key .sw.wind { background: var(--gk-wind); }
.gcard-key .sw.spread { background: var(--gk-spread); outline: .0625rem solid var(--tp-hair); }
.gcard-key .sw.today { width: 4px; background: var(--tp-accent); }
.gcard-key .sw.median { height: 0; border-top: 1.5px solid var(--tp-accent); }
.gcard-key .sw.yday { height: 0; border-top: 2px dotted var(--tp-faint); }
.gcard-key .sw.band { background: var(--gk-band); }
.gcard-key .sw.env { background: var(--gk-env); outline: .0625rem solid var(--tp-hair); }
.gcard-key .sw.day { width: 4px; background: var(--tp-muted); }
.gcard-key .sw.hot { width: 4px; background: var(--tp-hi); }
.gcard-key .sw.cold { width: 4px; background: var(--tp-lo); }
/* the wind hour by hour: the page's own dial parts, small */
.gcard-chart .dbar { fill: var(--g-wind); }
.gcard-chart .nbar { fill: none; stroke: var(--tp-muted); stroke-width: 1.2; stroke-dasharray: 3 2; }
.gcard-chart .mface { fill: var(--gp-face); stroke: var(--gp-rim); stroke-width: 1; }
.gcard-chart .marm { stroke: var(--gp-needle); stroke-width: 2; stroke-linecap: round; }
.gcard-chart .mhub { fill: var(--gp-needle); }
.gcard-chart .mhub.still { fill: var(--gp-muted); }
.gcard-key .sw.dbar { background: var(--g-wind); }
.gcard-key .sw.nbar { border: .0625rem dashed var(--tp-muted); box-sizing: border-box; }
.gcard-key .sw.marm { height: 0; border-top: 2px solid var(--gp-needle); }

/* the rose: its periods, today's player, and the page's own drawing */
.gcard-seg { display: inline-flex; flex-wrap: wrap; border: .0625rem solid var(--tp-control-line);
  border-radius: var(--tp-control-r); overflow: hidden; }
.gcard-seg button { font: inherit; font-size: .82rem; font-weight: 600; padding: .35em .9em; border: 0;
  background: var(--tp-control-face); color: var(--tp-control-ink); cursor: pointer; }
.gcard-seg button + button { border-left: .0625rem solid var(--tp-control-line); }
.gcard-seg button:hover { background: var(--tp-control-hover); }
.gcard-seg button[aria-pressed="true"] { background: var(--tp-control-on); color: var(--tp-control-on-ink); }
.gcard-player { display: flex; gap: .75rem; align-items: center; margin: .7rem 0 0; font-size: .85rem; color: var(--tp-ink-2); }
/* hidden, the player keeps its room: a card that changed height as a period
   was chosen moved under a Safari reader, who has no scroll anchoring */
.gcard-player[hidden] { display: flex; visibility: hidden; }
.gcard-player button { font: inherit; font-size: .82rem; font-weight: 600; padding: .35em .9em; min-width: 7.5em;
  border: .0625rem solid var(--tp-control-line); border-radius: var(--tp-control-r);
  background: var(--tp-control-face); color: var(--tp-control-ink); cursor: pointer; }
.gcard-player input { flex: 1 1 auto; max-width: 20rem; accent-color: var(--tp-accent); }
/* square before the drawing arrives, so a redraw never changes its height:
   Safari clamps a scrolled card while a replaced SVG has no size yet */
.gcard-rose .gcard-aside { min-height: 3.2em; }
.gcard-roseplot { max-width: 22rem; margin: .8rem auto 0; aspect-ratio: 1; }
.gcard-roseplot svg { display: block; width: 100%; height: 100%; }
.gcard-roseplot text { font-family: 'Open Sans', arial, sans-serif; font-size: 13px; }

/* rain: every year raced, the chance of rain, five minutes at a time */
.gcard-chart .yr { fill: none; stroke: var(--tp-faint); stroke-width: 1.2; }
.gcard-chart .yr.part { stroke-dasharray: 2 3; }
.gcard-chart text.part { fill: var(--tp-faint); }
.gcard-chart .meanline { fill: none; stroke: var(--tp-ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.gcard-chart .trace.rain { stroke: var(--g-rain); stroke-width: 3; }
.gcard-chart .pop { fill: var(--g-rain); }
.gcard-chart .rbar { fill: var(--g-rain); }
.gcard-chart .rbar.now { fill: var(--tp-accent); }
.gcard-key .sw.trace.rain { border-top-color: var(--g-rain); }
.gcard-key .sw.yr { height: 0; border-top: 1.5px solid var(--tp-faint); }
.gcard-key .sw.meanline { height: 0; border-top: 2px dashed var(--tp-ink); }

/* the sun: UV and radiation over the normal day, the clear sky, the roof */
.gcard-chart .trace.uv { stroke: var(--g-uv); }
.gcard-chart .trace.sun { stroke: var(--g-sun); }
.gcard-chart .trace.roof { stroke: var(--g-sun); }
.gcard-chart .highest { fill: none; stroke: var(--tp-muted); stroke-width: 1; stroke-dasharray: 2 2; }
.gcard-chart .clearsky { fill: none; stroke: var(--tp-ink-3); stroke-width: 1.4; stroke-dasharray: 6 3; }
.gcard-key .sw.trace.uv { border-top-color: var(--g-uv); }
.gcard-chart .fcast.uv { stroke: var(--g-uv); }
.gcard-key .sw.fcast.uv { border-top-color: var(--g-uv); }
.gcard-key .sw.trace.sun { border-top-color: var(--g-sun); }
.gcard-key .sw.highest { height: 0; border-top: 1.5px dashed var(--tp-muted); }
.gcard-key .sw.clearsky { height: 0; border-top: 2px dashed var(--tp-ink-3); }
/* sunshine: each ten minutes under the day's chart, on its axis (L 44,
   R 10), as tall as its minutes of sunshine; and each day's hours of it
   over the hours possible */
.gcard-rule.sunm .cells { grid-template-columns: repeat(144, 1fr); gap: 0; align-items: end; height: 16px;
  margin-left: 44px; }
.gcard-rule.sunm i { border-radius: 0; background: var(--g-sun); }
.gcard-rule.sunm i:not([class]) { background: none; }
.gcard-rule.sunm i.none { height: 16px; box-sizing: border-box; background: none; }
.gcard-rule.sunm i.m0, .gcard-key .sw.sunm.m0 { height: 2px; background: var(--tp-muted); }
.gcard-rule.sunm i.m1 { height: 10%; }
.gcard-rule.sunm i.m2 { height: 20%; }
.gcard-rule.sunm i.m3 { height: 30%; }
.gcard-rule.sunm i.m4 { height: 40%; }
.gcard-rule.sunm i.m5 { height: 50%; }
.gcard-rule.sunm i.m6 { height: 60%; }
.gcard-rule.sunm i.m7 { height: 70%; }
.gcard-rule.sunm i.m8 { height: 80%; }
.gcard-rule.sunm i.m9 { height: 90%; }
.gcard-rule.sunm i.m10 { height: 100%; }
.gcard-key .sw.sunm { background: var(--g-sun); vertical-align: bottom; }
.gcard-key .sw.sunm.m5 { height: 5px; }
.gcard-key .sw.sunm.none { background: none; border: .0625rem dashed var(--tp-hair-divider); box-sizing: border-box; }
.gcard-chart .sunbar { fill: var(--g-sun); }
.gcard-chart .possible { fill: var(--gk-env); stroke: var(--tp-muted); stroke-width: 1; }
.gcard-chart .possible.gap { stroke-dasharray: 3 2; }
.gcard-key .sw.sunbar { width: 4px; background: var(--g-sun); }
.gcard-key .sw.possible { width: 8px; background: var(--gk-env); outline: .0625rem solid var(--tp-muted); }
.gcard-key .sw.possible.gap { outline: .0625rem dashed var(--tp-muted); }

/* air quality: the Graphs page's category bands (css/graphs.css), and its line */
.gcard-chart .aqib.good { fill: var(--g-aqi-good); }
.gcard-chart .aqib.mod { fill: var(--g-aqi-mod); }
.gcard-chart .aqib.usg { fill: var(--g-aqi-usg); }
.gcard-chart .aqib.unh { fill: var(--g-aqi-unh); }
.gcard-chart .aqib.vunh { fill: var(--g-aqi-vunh); }
.gcard-chart .aqib.haz { fill: var(--g-aqi-haz); }
.gcard-chart .trace.aqi { stroke: var(--tp-ink-3); }
.gcard-chart .aqibar.good { fill: var(--g-aqi-good-ink); }
.gcard-chart .aqibar.mod { fill: var(--g-aqi-mod-ink); }
.gcard-chart .aqibar.usg { fill: var(--g-aqi-usg-ink); }
.gcard-chart .aqibar.unh { fill: var(--g-aqi-unh-ink); }
.gcard-chart .aqibar.vunh { fill: var(--g-aqi-vunh-ink); }
.gcard-chart .aqibar.haz { fill: var(--g-aqi-haz-ink); }
.gcard-key .sw.trace.aqi { border-top-color: var(--tp-ink-3); }
.gcard-key .sw.aqib { outline: .0625rem solid var(--tp-hair); }
.gcard-key .sw.aqib.good { background: var(--g-aqi-good); }
.gcard-key .sw.aqib.mod { background: var(--g-aqi-mod); }
.gcard-key .sw.aqib.usg { background: var(--g-aqi-usg); }
.gcard-key .sw.aqib.unh { background: var(--g-aqi-unh); }
.gcard-key .sw.aqib.vunh { background: var(--g-aqi-vunh); }
.gcard-key .sw.aqib.haz { background: var(--g-aqi-haz); }
/* the nearest official monitor's NowCast, hour by hour: the accent clears
   Lc 54 or more on every category's band, in both themes */
.gcard-chart .airnow { fill: none; stroke: var(--tp-accent); stroke-width: 2; stroke-dasharray: 5 3; stroke-linejoin: round; }
.gcard-key .sw.airnow { height: 0; border-top: 2px dashed var(--tp-accent); }
.gcard-airnow, .gcard-ref { font-size: .95rem; color: var(--tp-ink); margin: 0; line-height: 1.5; }
/* an AirNow category in aqi_card.js's header ground and ink for it */
.gcard-aqchip { display: inline-block; padding: 0 .45em; border-radius: .25rem; font-weight: 600; font-size: .9em;
  line-height: 1.5; outline: .0625rem solid var(--tp-hair); outline-offset: -.0625rem; }
.gcard-aqforecast td:nth-child(2), .gcard-aqforecast td:last-child { text-align: left; }
.gcard-aside a { color: var(--tp-link); }

/* the sky: the cloud base worked out here, and the layers the airports
   reported, the first airport's large and the others' small; a ceiling
   (broken, overcast, obscured) filled, a few or scattered open; the first
   airport's hours without a report shaded, since they are not a clear sky */
.gcard-chart .trace.cbase { stroke: var(--tp-accent); }
.gcard-key .sw.trace.cbase { border-top-color: var(--tp-accent); }
.gcard-chart .sky-none { fill: var(--gk-env); }
.gcard-key .sw.sky-none { background: var(--gk-env); outline: .0625rem solid var(--tp-hair); }
.gcard-chart .sky-a { fill: var(--tp-surface); stroke: var(--tp-hi); stroke-width: 1.5; }
.gcard-chart .sky-b { fill: var(--tp-surface); stroke: var(--tp-ink-3); stroke-width: 1; }
.gcard-chart .sky-a.ceiling { fill: var(--tp-hi); }
.gcard-chart .sky-b.ceiling { fill: var(--tp-ink-3); }
.gcard-key .sw.sky-a { width: 10px; height: 10px; background: var(--tp-hi); }
.gcard-key .sw.sky-b { width: 6px; height: 6px; background: var(--tp-ink-3); }
/* the report as sent, then read */
.gcard-metar { margin: 0 0 .6rem; padding: .6rem .8rem; border: .0625rem solid var(--tp-hair); border-radius: .5rem;
  background: var(--tp-tint); color: var(--tp-ink); font: .9rem/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  overflow-wrap: anywhere; }
.gcard-years.gcard-decode { margin-top: 0; width: 100%; }
.gcard-years.gcard-decode th, .gcard-years.gcard-decode td { text-align: left; vertical-align: top; }
.gcard-years.gcard-decode th { width: 9rem; }

/* which effect ruled each hour: 24 cells under the chart's plot */
.gcard-sub { margin: .8rem 0 .3rem; font-size: .8rem; color: var(--tp-muted); }
.gcard-rule .cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-left: 40px; margin-right: 10px; }
.gcard-rule i { display: block; height: 14px; border-radius: 2px; }
.gcard-rule i.humid { background: var(--gk-humid); }
.gcard-rule i.dry { background: var(--gk-dry); }
.gcard-rule i.wind { background: var(--gk-wind); }
.gcard-rule i.none { background: none; border: .0625rem dashed var(--tp-hair-divider); }
/* the Dew point card's hours in the dial's words: its rim's colors, exactly
   (css/gauges-panel.css .gc-rim.s-dp*, held equal by the tests); a hairline
   keeps the palest cell off the page, and a forecast hour is drawn short */
.gcard-rule.dew .cells { grid-template-columns: repeat(33, 1fr); gap: 1px; align-items: center; }
.gcard-rule.dew i { outline: .0625rem solid var(--tp-hair); outline-offset: -.0625rem; }
.gcard-rule.dew i.fc { height: 7px; }
.gcard-rule.dew i.none { outline: 0; }
.gcard-key .sw.dewfc { height: 5px; background: var(--tp-muted); }
.gcard-rule i.s-dpw-1, .gcard-key .sw.s-dpw-1 { background: #E6D2AA; }
.gcard-rule i.s-dpw-2, .gcard-key .sw.s-dpw-2 { background: #DBC49C; }
.gcard-rule i.s-dpw-3, .gcard-key .sw.s-dpw-3 { background: #99CCCC; }
.gcard-rule i.s-dpw-4, .gcard-key .sw.s-dpw-4 { background: #66B3B3; }
.gcard-rule i.s-dpw-5, .gcard-key .sw.s-dpw-5 { background: #409999; }
.gcard-rule i.s-dpw-6, .gcard-key .sw.s-dpw-6 { background: #006666; }
.gcard-rule i.s-dpw-7, .gcard-key .sw.s-dpw-7 { background: #004040; }
.gcard-rule i.s-dpi-1, .gcard-key .sw.s-dpi-1 { background: #E6D2AA; }
.gcard-rule i.s-dpi-2, .gcard-key .sw.s-dpi-2 { background: #66B3B3; }
.gcard-rule i.s-dpi-3, .gcard-key .sw.s-dpi-3 { background: #006666; }
.gcard-rule i.s-dpc-1, .gcard-key .sw.s-dpc-1 { background: #DBC49C; }
.gcard-rule i.s-dpc-2, .gcard-key .sw.s-dpc-2 { background: #99CCCC; }
.gcard-rule i.s-dpc-3, .gcard-key .sw.s-dpc-3 { background: #66B3B3; }
.gcard-rule i.s-dpc-4, .gcard-key .sw.s-dpc-4 { background: #409999; }
.gcard-rule i.s-dpc-5, .gcard-key .sw.s-dpc-5 { background: #006666; }
.gcard-rule i.s-dpc-6, .gcard-key .sw.s-dpc-6 { background: #004040; }
.gcard-aside { font-size: .88rem; color: var(--tp-ink-2); margin: .6rem 0 0; }
.gcard-aside b { color: var(--tp-ink); }
.gcard-note { font-size: .85rem; color: var(--tp-muted); margin: .4rem 0 0; }

.gcard-facts { display: grid; grid-template-columns: repeat(3, 1fr); border: .0625rem solid var(--tp-hair); border-radius: .5rem; }
.gcard-facts > div { padding: .7rem .9rem; border-left: .0625rem solid var(--tp-hair-divider); }
.gcard-facts > div:first-child { border-left: 0; }
.gcard-facts .k { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-accent); }
.gcard-facts .v { font-size: 1.5rem; font-weight: 700; }
.gcard-facts .s { font-size: .8rem; color: var(--tp-muted); }
.gcard-years { border-collapse: collapse; margin-top: .9rem; font-size: .88rem; }
.gcard-years caption { text-align: left; font-size: .8rem; color: var(--tp-muted); padding-bottom: .3rem; }
.gcard-years th, .gcard-years td { padding: .25rem 1.4rem .25rem 0; text-align: right;
  border-bottom: .0625rem solid var(--tp-hair-divider); }
.gcard-years th:first-child { text-align: left; }
.gcard-years thead th { color: var(--tp-muted); font-weight: 600; }
.gcard-years tbody th { font-weight: 600; color: var(--tp-ink-2); }
.gcard-years tr.now th, .gcard-years tr.now td { color: var(--tp-accent); font-weight: 700; }

@media (max-width: 600px){.gcard-gauge{width:100%; max-width:220px; margin:0 auto}}
@media (max-width: 600px){.gcard-key,.gcard-note,.gcard-facts .k,.gcard-facts .s,.gcard-years caption{font-size:var(--tp-phone-label)}}
@media (max-width: 600px){.gcard-read,.gcard-aside,.gcard-years,.gcard-airnow,.gcard-ref,.gcard-metar{font-size:var(--tp-phone-body)}}
@media (max-width: 600px){.gcard-facts{grid-template-columns:1fr}}
@media (max-width: 600px){.gcard-facts > div{border-left:0}}
@media (max-width: 600px){.gcard-facts > div + div{border-top:.0625rem solid var(--tp-hair-divider)}}
@media (max-width: 600px){.gcard-facts .v{font-size:22px}}
@media (max-width: 600px){.gcard-seg button,.gcard-player button{font-size:var(--tp-phone-label); min-height:44px}}
@media (max-width: 600px){.gcard-player{font-size:var(--tp-phone-label); flex-wrap:wrap}}
@media (max-width: 600px){.gcard-player input{min-height:44px}}
@media (max-width: 600px){.gcard-roseplot{max-width:320px}}
@media (max-width: 600px){.gcard-sub{font-size:var(--tp-phone-label)}}
