/* Tropics — what the overview's preview and a storm's briefing share: the fact lists, the
   change and watch lists, the Layers control and its satellite transport, "Check a location",
   and the state vocabulary each product's availability is written in. Loaded by storms.html
   and storm.html after storm-overview.css / storm-detail.css. Token roles only. */

/* --- Facts, sections and lists shared by the preview and the briefing --------------- */

.tropics-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-bulletin);
}

.tropics-facts dt { color: var(--ink-2); font-weight: 600; }
.tropics-facts dd { margin: 0; }
.tropics-fact-value { display: block; color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tropics-fact-sub { display: block; color: var(--ink-2); font-size: var(--fs-small); }
.tropics-facts--tight { gap: 2px var(--sp-3); font-size: var(--fs-small); }

.tropics-preview-section {
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.tropics-preview-section h3 {
  margin: 0 0 var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-bulletin);
  font-weight: 750;
}

.tropics-preview-section h4 {
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 750;
}

.tropics-outlook { margin: 0; color: var(--ink); font-size: var(--fs-bulletin); line-height: 1.45; }

.tropics-change-list,
.tropics-ww-list,
.tropics-key-messages {
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: var(--fs-bulletin);
  line-height: 1.45;
}

.tropics-change-list { list-style: none; padding-left: 0; }
.tropics-change { padding: 2px 0; }
.tropics-change--forecast { color: var(--ink-2); }
.tropics-ww-list { list-style: none; padding-left: 0; }
.tropics-ww { padding: 2px 0; }
.tropics-ww-state { margin: 0; color: var(--ink-2); font-size: var(--fs-bulletin); }
.tropics-state--failed, .tropics-state--stale { color: var(--ink); font-weight: 650; }
.tropics-badge-line { margin: 0 0 var(--sp-2); }
.tropics-badge-line:empty { display: none; }
.tropics-tone--unavailable, .tropics-tone--aging { color: var(--ink); font-weight: 650; }
.tropics-tone--muted { color: var(--ink-2); }
.tropics-key-messages li { margin-bottom: var(--sp-1); }
.tropics-attribution { margin-top: var(--sp-4); }

.tropics-guidance-figure { margin-top: var(--sp-2); }
.tropics-guidance-figure .product-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  cursor: zoom-in;
  overflow: hidden;
}
.tropics-guidance-figure :is(picture, img) { display: block; width: 100%; height: auto; }
.tropics-policy { margin-bottom: var(--sp-2); }


/* --- Layers control (in the map head) ------------------------------------------------ */

.storm-overview-map-head { flex-wrap: wrap; }

.storm-overview-map-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.tropics-layers { position: relative; }

.tropics-layers-summary, .tropics-satellite-summary, .tropics-alerts-summary {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

:is(.tropics-layers-summary, .tropics-satellite-summary, .tropics-alerts-summary)::-webkit-details-marker { display: none; }
:is(.tropics-layers-summary, .tropics-satellite-summary, .tropics-alerts-summary)::marker { content: ""; }
.tropics-layers[open] .tropics-layers-summary { background: var(--enamel); color: var(--on-enamel); border-color: var(--enamel); }

.tropics-layers:not([open]) > .tropics-layers-body { display: none; }

.tropics-layers-body {
  position: absolute;
  right: 0;
  z-index: 6;
  width: min(24rem, calc(100vw - 2 * var(--gutter) - 2px));
  box-sizing: border-box;
  overflow-wrap: anywhere;
  max-height: min(70vh, 34rem);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(7 19 31 / 14%);
  color: var(--ink);
  font-size: var(--fs-small);
  text-align: left;
}

.tropics-layer-group { margin: 0 0 var(--sp-3); padding: 0; border: 0; }
.tropics-layer-group legend { padding: 0; margin-bottom: var(--sp-1); color: var(--ink-2); font-weight: 750; letter-spacing: 0.02em; }
.tropics-layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tropics-layer-line { display: flex; align-items: center; gap: var(--sp-2); }
.tropics-layer-line input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--enamel); }
.tropics-layer-line label { font-weight: 650; }
.tropics-layer.is-unavailable label { color: var(--ink-2); font-weight: 500; }
.tropics-layer-status { margin: 2px 0 0 1.7rem; color: var(--ink-2); font-size: var(--fs-micro); line-height: 1.4; }
.tropics-layer-legend { margin: 2px 0 0 1.7rem; color: var(--ink-2); font-size: var(--fs-micro); line-height: 1.4; }
.tropics-layer-option { margin-left: 1.7rem; min-height: 2rem; font-size: var(--fs-micro); }
.tropics-layers-note { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--fs-micro); line-height: 1.4; }

.tropics-linkbutton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 24px;
}

.tropics-layer .tropics-linkbutton { margin: 2px 0 0 1.7rem; }

.tropics-transport-wrap { margin: var(--sp-2) 0 0 1.7rem; }
.tropics-transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tropics-transport-button {
  min-width: 2.25rem;
  min-height: 2rem;
  padding: 0 var(--sp-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}
.tropics-transport-button[aria-pressed="true"] { background: var(--enamel); color: var(--on-enamel); border-color: var(--enamel); }
.tropics-scrub { flex: 1 1 8rem; min-width: 6rem; accent-color: var(--enamel); }
.tropics-transport-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* --- Check a location ----------------------------------------------------------------- */

.tropics-location-slot { display: contents; }

.tropics-location {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line);
}

.tropics-location-form { position: relative; display: grid; gap: var(--sp-2); }
.tropics-location-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-bulletin);
}
.tropics-location-results {
  list-style: none;
  margin: 0;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(7 19 31 / 12%);
  display: grid;
  gap: 2px;
}
.tropics-location-results[hidden] { display: none; }
.tropics-location-result {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
}
.tropics-location-result:hover, .tropics-location-result:focus-visible { background: var(--enamel-wash); }
.tropics-location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.tropics-location-actions .btn { min-height: 2.25rem; }
.tropics-saved { margin-top: var(--sp-2); }
.tropics-saved-list { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: 2px; }
.tropics-saved-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tropics-remove { font-size: var(--fs-micro); flex: none; }
.tropics-location-answer { margin-top: var(--sp-3); }
.tropics-location-title { margin: 0 0 var(--sp-1); font-size: var(--fs-bulletin); font-weight: 750; color: var(--ink); }

.storm-map-point {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #ffcf70;
  box-shadow: 0 0 0 3px rgb(7 19 31 / 55%);
}

/* The latitude and longitude of the grid drawn over a satellite frame (satellite-reference.mjs):
   numbers along the map's top and left edges, light on a dark halo because they sit on the
   imagery in either theme. Decoration only; the map's own controls and bars stay over them. */
.satellite-grid-labels { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.satellite-grid-label {
  position: absolute; padding: 0 2px; white-space: nowrap;
  color: var(--map-plate-text, #f7fbff); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1rem;
  text-shadow: 0 0 2px var(--map-plate, #07131f), 0 0 3px var(--map-plate, #07131f), 0 1px 1px var(--map-plate, #07131f);
}
.satellite-grid-label--lon { transform: translateX(-50%); }
.satellite-grid-label--lat { transform: translateY(-50%); }

/* Satellite settings use the toolbar; transport stays at the map edge. */
.tropics-satellite-settings { position: relative; }
.tropics-toolbar .tropics-satellite-settings,
.storm-detail-map-controls .tropics-satellite-settings { position: static; }
.storm-detail-map-controls { position: relative; }
.tropics-satellite-settings:not([open]) > .tropics-satellite-body { display: none; }
.tropics-satellite-body {
  position: absolute; z-index: 8; top: calc(100% + var(--sp-2)); right: 0;
  width: min(19rem, calc(100vw - 2rem)); padding: var(--sp-3);
  display: grid; gap: var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-surface); background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 24px rgb(7 19 31 / 14%);
  max-height: 65dvh; overflow-y: auto;
}
.tropics-satellite-body label { display: grid; gap: var(--sp-2); }
.tropics-satellite-body input[type="range"] { width: 100%; accent-color: var(--enamel); }
.tropics-satellite-edge {
  position: absolute; z-index: 3; left: var(--sp-3); right: 3.5rem; bottom: var(--tropics-edge-bottom, 2rem);
  max-width: 42rem; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-surface);
  background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgb(7 19 31 / 14%);
}
.tropics-satellite-edge[hidden] { display: none; }
.tropics-satellite-edge .tropics-transport-wrap { margin: 0; }
.tropics-satellite-edge .tropics-layer-status { margin: var(--sp-1) 0 0; font-size: .75rem; }
.tropics-satellite-edge .tropics-transport-button { min-height: 2.5rem; min-width: 2.5rem; }
.tropics-satellite-edge .tropics-scrub { min-height: 2.5rem; }
@media (max-width: 599px) {
  /* Two rows at any phone width: the frame steps either side of the scrubber, then play, the
     frame's time and Latest. Three rows at 320px left the map a strip (TW-12). */
  .tropics-satellite-edge .tropics-transport { gap: var(--sp-2) var(--sp-1); }
  .tropics-satellite-edge [data-step="previous"] { order: 0; }
  .tropics-satellite-edge .tropics-scrub { order: 1; flex: 1 1 calc(100% - 6rem); min-width: 0; }
  .tropics-satellite-edge [data-step="next"] { order: 2; }
  .tropics-satellite-edge [data-focus="satellite-play"] { order: 3; }
  .tropics-satellite-edge .tropics-transport-time { order: 4; flex: 1 1 0; min-width: 0; }
  .tropics-satellite-edge [data-focus="satellite-latest"] { order: 5; }
  /* A phone's map is too short for a bar over it: above the credits it reached the presets and
     the map's own controls, and below them it covered the credits (TW-12). It docks under the
     map instead, inside the frame, and the map gives up the room. */
  :is(.storm-overview-stage, .storm-detail-map-stage):has(> .tropics-satellite-edge:not([hidden])) { display: flex; flex-direction: column; }
  :is(.storm-overview-stage, .storm-detail-map-stage):has(> .tropics-satellite-edge:not([hidden])) > :is(.storm-overview-canvas, .storm-detail-map-canvas) {
    position: relative; inset: auto; flex: 1 1 auto; height: auto; min-height: 0;
  }
  /* The storm page's frame keeps the map its own 4:3 and grows by the bar. */
  .storm-detail-map-stage:has(> .tropics-satellite-edge:not([hidden])) { aspect-ratio: auto; }
  .storm-detail-map-stage:has(> .tropics-satellite-edge:not([hidden])) > .storm-detail-map-canvas { flex: none; aspect-ratio: 4 / 3; }
  .tropics-satellite-edge {
    position: relative; left: auto; right: auto; bottom: auto; flex: none; max-width: none;
    border-width: 1px 0 0; border-radius: 0; box-shadow: none;
  }
  /* The map's credits, moved under the docked bar by the controls module: whole, wrapped and
     underlined, on the page's surface rather than over the picture. */
  :is(.storm-overview-stage, .storm-detail-map-stage) > .maplibregl-ctrl-attrib.tropics-credits-docked {
    position: relative; flex: none; min-height: 0; max-width: none; margin: 0; padding: 2px var(--sp-2) var(--sp-1);
    border-radius: 0; background: var(--surface); color: var(--ink-2); font-size: var(--fs-micro); line-height: 1.35;
  }
  :is(.storm-overview-stage, .storm-detail-map-stage) > .tropics-credits-docked .maplibregl-ctrl-attrib-inner { display: block; white-space: normal; }
  :is(.storm-overview-stage, .storm-detail-map-stage) > .tropics-credits-docked .maplibregl-ctrl-attrib-button { display: none; }
  :is(.storm-overview-stage, .storm-detail-map-stage) > .tropics-credits-docked a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.15em; }
}

.tropics-satellite-settings[open] .tropics-satellite-summary { background: var(--enamel); color: var(--on-enamel); border-color: var(--enamel); }

/* NWS alerts (TW-5): a toolbar menu beside Satellite, and the list, chooser and detail in the panel. */
.tropics-alerts-settings { position: relative; }
.tropics-alerts-settings[hidden] { display: none; }
.tropics-toolbar .tropics-alerts-settings { position: static; }
.tropics-alerts-settings:not([open]) > .tropics-alerts-menu { display: none; }
.tropics-alerts-settings[open] .tropics-alerts-summary { background: var(--enamel); color: var(--on-enamel); border-color: var(--enamel); }
.tropics-alerts-menu {
  position: absolute; z-index: 8; top: calc(100% + var(--sp-2)); right: 0;
  width: min(22rem, calc(100vw - 2rem)); box-sizing: border-box; padding: var(--sp-3);
  display: grid; gap: var(--sp-2); border: 1px solid var(--line);
  border-radius: var(--radius-surface); background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 24px rgb(7 19 31 / 14%); max-height: 65dvh; overflow-y: auto;
  font-size: var(--fs-small); overflow-wrap: anywhere;
}
.tropics-alerts--sidebar { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--line); }
.tropics-alerts:not(.tropics-alerts--sidebar) { margin-top: var(--sp-4); }
.tropics-alerts-body { display: grid; gap: var(--sp-2); }
/* Each NWS group is a row that says it opens: bordered, its count beside a chevron that
   turns when it is open. */
.tropics-alert-group { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.tropics-alert-group > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 2.75rem; padding: var(--sp-1) var(--sp-3); color: var(--ink); font-size: var(--fs-small); font-weight: 700; line-height: 1.35;
}
.tropics-alert-group > summary::-webkit-details-marker { display: none; }
.tropics-alert-group > summary::after {
  content: ""; flex: none; width: 0.45rem; height: 0.45rem; margin: 0 2px 3px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg);
}
.tropics-alert-group[open] > summary { border-bottom: 1px solid var(--line); }
.tropics-alert-group[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.tropics-alert-group > :not(summary) { margin-inline: var(--sp-3); }
.tropics-alert-group > .tropics-alert-list { margin-block: var(--sp-2); }
.tropics-alert-group > .tropics-fine { margin-block: var(--sp-2); }
.tropics-alert-meta { display: block; margin-left: 1.5rem; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4; }
.tropics-alert-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: var(--sp-2); }
.tropics-alert-item { display: grid; gap: 2px; }
.tropics-alert-item > details > summary { cursor: pointer; list-style: none; }
.tropics-alert-item > details > summary::-webkit-details-marker { display: none; }
.tropics-alert-head { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.tropics-alert-segments { list-style: none; margin: var(--sp-1) 0 0 1.5rem; padding: 0; display: grid; gap: 0; }
.tropics-alert-item > .tropics-alert-open { margin-left: 1.5rem; }
.tropics-alert-open {
  min-height: 2.75rem; padding: var(--sp-1) 0; border: 0; background: none; color: var(--enamel);
  font: inherit; font-weight: 600; text-align: left; text-decoration: underline; cursor: pointer;
}
.tropics-alert-open:focus-visible, .tropics-alert-group > summary:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tropics-alert-flag { color: var(--ink-2); font-weight: 500; text-decoration: none; }
/* NWS's colour between the radar's two casings, so it reads on either theme; a watch is dashed. */
.tropics-alert-swatch {
  display: inline-block; flex: none; width: 1rem; height: 1rem; box-sizing: border-box;
  border: 2px solid var(--alert-color, #8fb0cf); border-radius: 3px;
  background: color-mix(in srgb, var(--alert-color, #8fb0cf) 35%, transparent);
  box-shadow: 0 0 0 1px #0b1520, inset 0 0 0 1px #f1f7fc;
}
.tropics-alert-swatch--watch { border-style: dashed; }
.tropics-alert-title { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-body); }
.tropics-alert-text { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; }
.tropics-alert-limit { border-left: 3px solid var(--line); padding-left: var(--sp-2); }

.tropics-alerts .tropics-layer-status { margin-left: 0; }
/* The list's scope (TW-8): one labelled choice, the same in each panel and the Alerts menu. */
.tropics-alerts-scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.tropics-alerts-scope select { min-height: 44px; min-width: 0; max-width: 100%; flex: 1 1 10rem; font: inherit; font-size: var(--fs-small); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 0 var(--sp-2); }
.tropics-alerts-scope select:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tropics-alert-outside { color: var(--ink-2); }
.tropics-alerts-body > .tropics-linkbutton { justify-self: start; min-height: 2.75rem; }

/* Published graphics (TW-6, and on the storm page since TW-7): one update's published graphics, each a thumbnail that opens the
   master full size, with Download PNG and Copy image link. The thumbnail is the smallest WebP
   rung; its box is reserved from the published size so nothing moves when it arrives. */
.tropics-graphics { display: grid; gap: var(--sp-2); }
.tropics-graphics h3 { margin: 0; }
.tropics-graphics-picker { display: grid; gap: 2px; margin: 0; }
.tropics-graphics-picker[hidden], .tropics-graphics-banner[hidden], .tropics-graphics-copy-out[hidden] { display: none; }
.tropics-graphics-picker label { font-size: var(--fs-small); font-weight: 700; }
.tropics-graphics-select { width: 100%; min-height: 44px; min-width: 0; max-width: 100%; font: inherit; font-size: var(--fs-small); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); padding: 0 var(--sp-2); }
.tropics-graphics-select:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tropics-graphics-banner { display: grid; gap: var(--sp-2); justify-items: start; border-left: 3px solid var(--enamel); padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); }
.tropics-graphics-banner p { margin: 0; font-size: var(--fs-small); }
.tropics-graphics-issuance { margin: 0; }
/* The graphics themselves (2026-10-08): a grid of cards whose thumbnails can be read, two
   across the storm panel and more where the column is wider (the storm page), replacing the
   72px rows. Each card is the thumbnail and name (one link, to the viewer or the PNG), the
   graphic's own note, so a model graphic always says it is not the forecast, and one row of
   actions. A graphic with no ladder (the social card) is a full-width row with no picture. */
.tropics-graphics-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--sp-2); }
.tropics-graphic-card {
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
  padding: var(--sp-1) var(--sp-1) 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface);
}
.tropics-graphic-view { display: flex; flex-direction: column; gap: var(--sp-1); min-height: 44px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.tropics-graphic-view:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* The name is the card's title, not a sentence's link: the global `li a` underline stays off
   until hover says it can be followed. */
.tropics-graphics-list > li.tropics-graphic-card > a.tropics-graphic-view { text-decoration: none; }
.tropics-graphic-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; box-sizing: border-box;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
}
.tropics-graphic-view:hover .tropics-graphic-thumb { border-color: var(--enamel); }
.tropics-graphic-view:hover .tropics-graphic-name { text-decoration: underline; text-underline-offset: 2px; }
.tropics-graphic-name { padding: 0 2px; color: var(--ink); font-size: var(--fs-small); font-weight: 750; line-height: 1.3; overflow-wrap: normal; }
.tropics-graphic-note { margin: 0; padding: 0 2px; color: var(--ink-2); font-size: var(--fs-micro); line-height: 1.4; }
.tropics-graphic-actions { display: flex; flex-wrap: wrap; margin: auto calc(-1 * var(--sp-1)) 0; border-top: 1px solid var(--line); }
.tropics-graphic-action {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-2);
  border: 0; border-radius: 0; background: none; color: var(--link); font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer;
}
.tropics-graphic-action + .tropics-graphic-action { border-left: 1px solid var(--line); }
.tropics-graphic-action:hover { background: var(--enamel-wash); }
.tropics-graphic-action:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.tropics-graphic-action::before { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.tropics-graphic-action--download { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v7.5M4.75 6.75 8 10l3.25-3.25M3 13.25h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tropics-graphic-action--copy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.75 9.25l2.5-2.5M7.25 4.75l1-1a2.47 2.47 0 0 1 3.5 3.5l-1 1M8.75 11.25l-1 1a2.47 2.47 0 0 1-3.5-3.5l1-1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tropics-graphic-action--share { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 10V2.75M5.25 5.5 8 2.75l2.75 2.75M3.5 8.5v4.75h9V8.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tropics-graphic-card--plain { grid-column: 1 / -1; padding: 0 var(--sp-2); gap: 0; }
.tropics-graphic-card--plain .tropics-graphic-view { justify-content: center; }
.tropics-graphic-card--plain .tropics-graphic-note { margin-bottom: var(--sp-2); }
.tropics-graphic-card--plain .tropics-graphic-actions { margin-inline: calc(-1 * var(--sp-2)); }
.tropics-graphics-copy-out { margin: 0; }
.tropics-graphics-copy-out label { display: grid; gap: 2px; font-size: var(--fs-small); font-weight: 700; }
.tropics-graphics-copy-out input { width: 100%; min-width: 0; font-size: var(--fs-micro); }
.tropics-graphics-status:empty { display: none; }
.tropics-graphics-share { display: grid; gap: var(--sp-2); justify-items: start; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.tropics-graphics-share p { margin: 0; }
/* The gallery's two buttons, styled here because the storm page does not load the workspace's
   stylesheet, where `.tropics-action` lives. */
.tropics-graphics .tropics-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.tropics-graphics .tropics-action:hover { background: var(--enamel-wash); }
.tropics-graphics .tropics-action:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }