/* NFR-1406: severity is always shown by text plus colour, never colour alone. Colour tokens are
   declared in index.html's inline <style>, not here - every colour below is a var() reference. */

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
}

header, footer {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

header h1 {
  margin: 0;
  font-size: 1.4rem;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

header .brand-logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}

header .brand-name {
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-meta {
  order: 1;
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  flex: 1 1 auto;
}

header button {
  margin-left: auto;
}

footer {
  border-top: 1px solid var(--border);
  border-bottom: none;
  color: var(--muted);
  font-size: 0.85rem;
}

nav a {
  color: var(--fg);
  text-decoration: none;
}

nav a:hover, nav a:focus {
  text-decoration: underline;
}

main a {
  color: var(--link);
}

main a:visited {
  color: var(--link-visited);
}

main a:hover, main a:focus {
  text-decoration: underline;
}

/* The view is at least one screen tall, so the footer starts below the fold and cannot be pushed down (layout shift) as a route's content loads. */
main {
  flex: 1 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  width: 100%;
  max-width: 110rem;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

th {
  white-space: nowrap;
}

.table-scroll {
  overflow-x: auto;
}

.usage-table-scroll { max-width: 100%; }
.usage-table-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.usage-table-scroll table { min-width: 62rem; }
.usage-table-scroll th, .usage-table-scroll td { vertical-align: top; overflow-wrap: anywhere; }
.usage-table-scroll td.num { white-space: nowrap; }
.usage-meta { display: block; color: var(--muted); font-weight: 400; margin-top: 0.2rem; overflow-wrap: anywhere; }
.usage-source { margin-top: 1.5rem; }
.usage-source > p { overflow-wrap: anywhere; }

.num {
  text-align: right;
}

.endpoint {
  white-space: nowrap;
}

.provider {
  white-space: nowrap;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.issue-events {
  margin-top: 1.5rem;
}

.issue-events-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.issue-events-table {
  table-layout: fixed;
  min-width: 36rem;
}

.issue-events-table caption {
  text-align: left;
  color: var(--muted);
  padding: 0.5rem 0;
}

.issue-events-table th:first-child,
.issue-events-table td:first-child {
  width: 50%;
}

.issue-event-message {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

input, select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.repository {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: normal;
}

.timestamp {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.severity {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: 0.8rem;
}

.severity-critical { background: var(--critical); color: var(--on-severity); }
.severity-high { background: var(--high); color: var(--on-severity); }
.severity-medium { background: var(--medium); color: var(--on-severity); }
.severity-low { background: var(--low); color: var(--on-severity); }
.severity-info { background: var(--info); color: var(--on-severity); }

.stale {
  color: var(--medium);
}

.sparkline {
  display: block;
}

button {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

button:hover {
  border-color: var(--fg);
}

input[aria-invalid="true"] {
  border-color: var(--critical);
}

/* Uptime panel (FR-2209). Status is shown by pattern and text as well as colour:
   up is solid, down is hatched, no data is a dashed outline. */
.uptime-env { margin-top: 1rem; }

/* The chart is drawn at the plot's measured width, so its text stays 1:1 and the svg fills the card. */
.uptime-plot { overflow-x: auto; }

.uptime-plot:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.uptime-svg { width: 100%; height: auto; display: block; }

.uptime-ttfb { stroke: var(--info); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.uptime-axis { stroke: var(--muted); stroke-width: 1; }

.uptime-grid { stroke: var(--border); stroke-width: 1; }

.uptime-tick { fill: var(--muted); font-size: 12px; }

.uptime-tick-y { text-anchor: end; }

.uptime-tick-x { text-anchor: middle; }
.uptime-tick-x.uptime-tick-end { text-anchor: end; }

.uptime-band-up { fill: var(--low); stroke: var(--low); }

.uptime-band-down { stroke: var(--critical); stroke-width: 1; }

.uptime-band-no-data { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; }

.uptime-hatch-bg { fill: var(--card); }

.uptime-hatch-line { stroke: var(--critical); stroke-width: 3; }

.uptime-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.uptime-swatch {
  display: inline-block;
  width: 1.5rem;
  height: 0.75rem;
  vertical-align: middle;
  border: 1px solid var(--muted);
}

.uptime-swatch-ttfb { height: 0; border: 0; border-top: 2px solid var(--info); }

.uptime-swatch-up { background: var(--low); border-color: var(--low); }

.uptime-swatch-down {
  background: repeating-linear-gradient(45deg, var(--critical) 0 2px, var(--card) 2px 5px);
  border-color: var(--critical);
}

.uptime-swatch-no-data { background: none; border: 2px dashed var(--muted); }

.uptime-data { margin-top: 1rem; }
#capacity-readings { margin-top: 1rem; }

.uptime-data summary,
.uptime-row-chart summary { cursor: pointer; }

details > summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.uptime-table-scroll { overflow-x: auto; max-height: 24rem; overflow-y: auto; }

.uptime-table-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Forced colours: system colours replace the theme, so up, down and no data stay apart by fill, hatch and dash. */
@media (forced-colors: active) {
  .uptime-svg,
  .uptime-swatch { forced-color-adjust: none; }

  .uptime-ttfb,
  .uptime-swatch-ttfb { stroke: Highlight; border-top-color: Highlight; }

  .uptime-axis,
  .uptime-grid { stroke: GrayText; }

  .uptime-tick { fill: CanvasText; }

  .uptime-band-up { fill: CanvasText; stroke: CanvasText; }

  .uptime-band-down { stroke: CanvasText; }

  .uptime-band-no-data { stroke: GrayText; }

  .uptime-hatch-bg { fill: Canvas; }

  .uptime-hatch-line { stroke: CanvasText; }

  .uptime-swatch { border-color: CanvasText; }

  .uptime-swatch-up { background: CanvasText; }

  .uptime-swatch-down { background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 5px); }

  .uptime-swatch-no-data { background: none; border-color: GrayText; }
}

/* Support and delivery (Asana). Text and numbers accompany every bar; long titles wrap. */
#support-board-heading { margin-bottom: 0.25rem; }
#support-board > [role="status"] { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.support-env { min-width: 0; }
.support-env-slot + .support-env-slot { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1.25rem; }
.support-env-heading { margin: 0 0 0.75rem; font-size: 1rem; }
.support-stats, .support-distributions, .support-months { display: grid; gap: 0.65rem; }
.support-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.support-stat { min-width: 0; display: flex; flex-direction: column; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 0.4rem; }
.support-stat-value { font-size: 1.5rem; line-height: 1.1; }
.support-stat-label { margin-top: 0.2rem; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.support-activity { margin-top: 1.1rem; }
.support-activity h4, .support-distribution h4, .support-ticket-section h4, .support-delivery h4 { margin: 0 0 0.5rem; }
.support-coverage, .support-empty { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0; overflow-wrap: anywhere; }
.support-months { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin-top: 0.75rem; }
.support-month { min-width: 0; border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.55rem 0.65rem; }
.support-month-unknown { border-style: dashed; }
.support-month > strong { display: block; font-size: 0.85rem; margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.support-month-series { display: grid; gap: 0.15rem; font-size: 0.8rem; }
.support-month-series + .support-month-series { margin-top: 0.35rem; }
.support-month-series progress, .support-bars progress { display: block; width: 100%; height: 0.65rem; accent-color: var(--info); }
.support-month-resolved progress { accent-color: var(--low); }
.support-month-missing { color: var(--muted); font-style: italic; }
.support-distributions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.1rem 0; }
.support-distribution { min-width: 0; border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.75rem; }
.support-bars { list-style: none; margin: 0; padding: 0; }
.support-bars li + li { margin-top: 0.55rem; }
.support-bar-heading { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; overflow-wrap: anywhere; }
.support-bar-heading strong { white-space: nowrap; }
.support-ticket-section { margin: 1.1rem 0; }
.support-ticket-list, .support-release-list { display: grid; gap: 0.5rem; list-style-position: inside; padding: 0; margin: 0.4rem 0 1rem; }
.support-ticket, .support-release { min-width: 0; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 0.4rem; overflow-wrap: anywhere; }
.support-ticket-meta { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.support-title { display: inline; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.support-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.support-contents { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.support-table-scroll { overflow-x: auto; max-width: 100%; margin: 0.5rem 0 1rem; }
.support-table-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.support-table caption { text-align: left; font-weight: 600; padding: 0.25rem 0; }
.support-activity-data, .support-breakdown, .support-delivery, .support-security, .support-explanation { margin-top: 0.65rem; }
.support-activity-data > summary, .support-breakdown > summary, .support-delivery > summary, .support-security > summary, .support-explanation > summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.support-delivery, .support-security, .support-explanation { border-top: 1px solid var(--border); padding-top: 0.7rem; }
.support-delivery > .support-distribution { margin-top: 0.75rem; }
.support-delivery h4 { margin-top: 1rem; }

@media (max-width: 42rem) {
  .support-distributions { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .support-stat, .support-distribution, .support-month, .support-ticket, .support-release { border-color: CanvasText; }
  .support-month-series progress, .support-bars progress { accent-color: Highlight; }
}

/* Edge firewall card */
.edge-env { margin: 0 0 1.25rem; }
.edge-state { font-weight: 600; }
.edge-table-scroll { overflow-x: auto; max-width: 100%; margin: 0.5rem 0 1rem; }
.edge-table-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.edge-table caption { text-align: left; font-weight: 600; padding: 0.25rem 0; }
.edge-path, .edge-reason { max-width: 20rem; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 30rem) {
  .edge-path, .edge-reason { max-width: 9rem; }
}

/* Dashboard tiles: issues links and service status. Status is a word plus a distinct dot shape, never colour alone. */

/* Fixed column counts (not auto-fill) so CSS knows which tiles sit in the last column and can keep their detail on screen. */
.service-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-tile {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.service-tile:hover, .service-tile:focus-within { border-color: var(--fg); }

.service-tile-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.15rem 0.5rem;
  padding: 0.6rem 2.25rem 0.6rem 0.75rem;
  color: var(--fg);
  text-decoration: none;
}

/* Beats the global `main a:visited` and `main a:hover` rules: a tile keeps its text colour and never underlines. */
main .service-tile .service-tile-link, main .service-tile .service-tile-link:visited,
main .service-tile .service-tile-link:hover, main .service-tile .service-tile-link:focus {
  color: var(--fg);
  text-decoration: none;
}

.service-tile-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.tile-name { font-weight: 600; overflow-wrap: anywhere; }
.tile-word { grid-column: 2; color: var(--fg); overflow-wrap: anywhere; }

.tile-more {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--muted);
  border-radius: 50%;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.tile-more:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* No gap between tile and detail, so the pointer can move onto the detail without closing it (WCAG 1.4.13). */
.tile-detail {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  /* At most two tiles wide, so a left-aligned detail never leaves the grid on its right. */
  width: min(22rem, calc(200% + 0.75rem));
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--fg);
  border-radius: 0.5rem;
}

.tile-detail[hidden] { display: none; }

/* The last column aligns its detail to the right edge, so it grows back over the grid instead of off the screen. */
.service-tile:nth-child(2n) .tile-detail { left: auto; right: 0; }

@media (min-width: 40rem) {
  .service-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-tile:nth-child(2n) .tile-detail { left: 0; right: auto; }
  .service-tile:nth-child(3n) .tile-detail { left: auto; right: 0; }
}

/* One column: the detail is a full-width block under its tile. */
@media (max-width: 30rem) {
  .service-tiles { grid-template-columns: minmax(0, 1fr); }
  .service-tile .tile-detail, .service-tile:nth-child(n) .tile-detail { position: static; width: auto; }
}
.tile-detail ul { margin: 0; padding-left: 1.1rem; }
.tile-detail li { overflow-wrap: anywhere; }

/* Source links ("Open in <Provider>"): underlined so they are not told apart by colour alone, with a visible focus ring. */
.tile-links { margin-top: 0.5rem; list-style: none; padding-left: 0; }
.tile-detail ul.tile-links { padding-left: 0; }
.tile-links li, .source-links li, .issue-event-links li { padding: 0.125rem 0; }
.source-links li, a.source-link { overflow-wrap: anywhere; }
.source-links, .issue-event-links { margin: 0 0 1rem; padding-left: 1.1rem; }
.issue-event-links { margin: 0.25rem 0 0; }
main a.source-link, main a.source-link:visited { color: var(--link); text-decoration: underline; }
main a.source-link:hover { text-decoration-thickness: 2px; }
a.source-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.tile-dot {
  display: inline-block;
  box-sizing: border-box;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
}

.tile-dot-working { background: var(--low); border-color: var(--low); }
.tile-dot-partial { background: linear-gradient(90deg, var(--medium) 50%, transparent 50%); border-color: var(--medium); }
.tile-dot-stale { border-color: var(--medium); }
.tile-dot-failed { background: var(--critical); border-color: var(--critical); border-radius: 0; }
.tile-dot-off { border-color: var(--muted); }
.tile-dot-unknown { border-style: dashed; border-color: var(--muted); }
.tile-dot-checking { border-style: dotted; border-color: var(--muted); }

details.detail-section > summary { cursor: pointer; }
details.detail-section > summary h2 { display: inline; }
details.detail-section > summary h3 { display: inline; }
details.detail-section > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Programmatic focus on a heading (route and section reveals) keeps working for assistive technology but draws no ring;
   interactive elements keep their focus-visible rings. */
[tabindex="-1"]:focus { outline: none; }

/* Overview top: the Platform health summary of linked status tiles, then Uptime beside the platform findings card (FR-2670, FR-2671).
   Status is a word plus a distinct dot shape, never colour alone; the whole tile is one link with a stretched overlay. */
.platform-health { min-width: 0; }
.platform-health > h2 { margin: 0 0 0.75rem; }
.hero-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.hero-tile {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 0.95rem 0.8rem;
  background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--muted); border-radius: 0.5rem; overflow-wrap: anywhere;
}
.hero-tile[data-level="green"] { border-top-color: var(--low); }
.hero-tile[data-level="amber"] { border-top-color: var(--medium); }
.hero-tile[data-level="red"] { border-top-color: var(--critical); }
.hero-tile-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.1rem 0.5rem;
  color: var(--fg); text-decoration: none;
}
main .hero-tile .hero-tile-link, main .hero-tile .hero-tile-link:visited, main .hero-tile .hero-tile-link:hover, main .hero-tile .hero-tile-link:focus {
  color: var(--fg); text-decoration: none;
}
.hero-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.hero-tile-link:focus-visible { outline: none; }
.hero-tile:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.hero-tile:has(.hero-tile-link:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
@supports selector(:has(a)) {
  .hero-tile:focus-within { outline: none; }
  .hero-tile:has(.hero-tile-link:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
}
h2[tabindex="-1"]:focus-visible, h3[tabindex="-1"]:focus-visible { outline: none; box-shadow: -0.5rem 0 0 -0.25rem var(--link); border-left: 3px solid var(--link); padding-left: 0.5rem; }
.hero-tile:hover { border-color: var(--muted); }
.hero-tile .rag-dot { align-self: center; }
.hero-tile-label { grid-column: 2 / -1; color: var(--muted); font-size: 0.85rem; line-height: 1.25; }
.hero-tile-value { grid-column: 1 / 3; margin-top: 0.15rem; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.hero-tile-level { grid-column: 3; justify-self: end; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.hero-spark { display: block; width: 100%; height: 2rem; overflow: visible; }
.hero-spark-line { fill: none; stroke: var(--info); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.85; }
.hero-spark-bar { fill: var(--muted); opacity: 0.8; }
.hero-tile[data-level="red"] .hero-spark-bar { fill: var(--critical); opacity: 0.75; }
.hero-spark-gap { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.hero-spark-base { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-tile-trend { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.hero-tile[data-key="uptime"] .hero-tile-trend { min-height: 1.35em; }
.issues-count-link { display: inline-flex; align-items: baseline; gap: 0.35rem; margin: -0.25rem -0.6rem; padding: 0.25rem 0.6rem; border-radius: 0.3rem; color: inherit; text-decoration: none; }
main a.issues-count-link, main a.issues-count-link:visited { color: inherit; text-decoration: none; }
main a.issues-count-link:hover, main a.issues-count-link:focus { text-decoration: none; }
.issues-count-link:hover .severity { text-decoration: underline; text-underline-offset: 0.2em; }
.issues-count-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.overview-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.overview-top > .card { margin-bottom: 0; min-width: 0; }
.overview-top > .card > h2:first-child { margin-top: 0; }
.overview-top > .issues-card { align-self: start; }
@media (min-width: 64rem) {
  .overview-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow screens: compact tiles two to a row, with Uptime across the full width, so the summary fits about one screen. */
@media (max-width: 30rem) {
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .hero-tile[data-key="uptime"] { grid-column: 1 / -1; }
  .hero-tile { padding: 0.6rem 0.65rem 0.55rem; gap: 0.35rem; }
  .hero-tile-value { grid-column: 1 / -1; font-size: 1.4rem; }
  .hero-tile-level { grid-column: 2 / -1; justify-self: start; font-size: 0.8rem; }
  .hero-spark { height: 1.5rem; }
  .hero-tile-trend { font-size: 0.75rem; }
  /* The uptime trend wraps to two lines once its data lands; reserve them so the tile does not resize. */
  .hero-tile[data-key="uptime"] .hero-tile-trend { min-height: calc(2 * 1.35em); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-tile { transition: border-color 0.15s ease-out; }
}

@media (forced-colors: active) {
  .hero-tile { border-color: CanvasText; }
  .hero-tile:focus-within { outline-color: Highlight; }
  .hero-tile:has(.hero-tile-link:focus-visible) { outline-color: Highlight; }
  .hero-tile .hero-spark-bar, .hero-tile[data-level="red"] .hero-spark-bar { fill: CanvasText; }
  h2[tabindex="-1"]:focus-visible, h3[tabindex="-1"]:focus-visible { border-left-color: Highlight; }
  .hero-spark { forced-color-adjust: none; }
  .hero-spark-line, .hero-spark-bar { stroke: CanvasText; fill: none; }
  .hero-spark-bar { fill: CanvasText; stroke: none; opacity: 1; }
  .hero-spark-gap { stroke: GrayText; }
  .hero-spark-base { stroke: GrayText; }
  .hero-tile .rag-dot { forced-color-adjust: none; border-color: CanvasText; }
}

.issues-card { display: flex; flex-direction: column; gap: 0.5rem; }
.issues-card:focus-within { border-color: var(--fg); }
.issues-card h2 { margin: 0; }
.issues-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.issues-top-link { display: grid; grid-template-columns: 5.5rem 8.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.2rem 0.75rem; min-width: 0; text-decoration: none; }
.issues-top-link:has(.issues-top-env) { grid-template-columns: 5.5rem 8.5rem 7rem minmax(0, 1fr) auto; }
.issues-top-link .severity { justify-self: start; text-align: center; min-width: 4.75rem; box-sizing: border-box; }
.issues-top-title { min-width: 0; overflow-wrap: anywhere; text-decoration: none; text-align: left; }
.issues-top-link:hover .issues-top-title, .issues-top-link:focus-visible .issues-top-title { text-decoration: underline; text-underline-offset: 0.2em; }
.issues-top-age { justify-self: end; }
@media (max-width: 30rem) {
  .issues-top-link { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
  .issues-top-link .severity { min-width: 0; }
  /* Narrow: the chip, then the title on its own line, then "kind · age" on one muted line. */
  .issues-top-link .severity { order: 1; }
  .issues-top-title { order: 2; flex: 1 1 100%; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
  .issues-top-link .finding-kind, .issues-top-env { order: 3; }
  .issues-top-age { order: 4; margin-left: -0.4rem; }
  .issues-top-age::before { content: "\00b7\00a0"; }
}
.issues-top-age, .issues-top-env, .issues-top-empty, .issues-top-link .finding-kind { color: var(--muted); font-size: 0.8rem; }
.issues-top-age { white-space: nowrap; }
.issues-top-empty { margin: 0; }
.issues-card-more { color: var(--link); text-decoration: underline; }
.github-issue-summary { display: block; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.github-coverage { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.5rem; overflow-wrap: anywhere; }
.github-coverage h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.github-coverage > summary { cursor: pointer; font-size: 0.85rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.github-coverage > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.github-coverage[open] > summary { margin-bottom: 0.35rem; }
.github-coverage ul { margin: 0; padding-left: 1.25rem; }
.github-coverage li + li { margin-top: 0.3rem; }
.issues-top-link:focus-visible, .issues-card-more:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.issues-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.issues-row-env { flex: 1 0 100%; font-weight: 600; overflow-wrap: anywhere; }
/* One compact pill per count: the number and the severity word as text, with a coloured left accent (NFR-1406: never colour alone). */
.issues-count { display: inline-flex; align-items: baseline; gap: 0.35rem; box-sizing: border-box; min-height: 2rem; padding: 0.25rem 0.6rem; border-radius: 0.3rem; border-left: 4px solid var(--accent, var(--border)); background: var(--border); color: var(--fg); }
.issues-count[data-severity="critical"] { --accent: var(--critical); }
.issues-count[data-severity="high"] { --accent: var(--high); }
.issues-count[data-severity="medium"] { --accent: var(--medium); }
.issues-count[data-severity="low"] { --accent: var(--low); }
.issues-count[data-severity="info"] { --accent: var(--info); }
.issues-count-value { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.issues-count .severity { background: transparent; color: inherit; padding: 0; font-weight: 400; font-size: 0.85rem; }
/* A zero count is muted and flat (no fill, no box), so colour only draws the eye when something is there. */
.issues-count[data-zero="true"] { background: transparent; border-left-color: transparent; color: var(--muted); }
.issues-count[data-zero="true"] .issues-count-value { font-weight: 400; }

.metric-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

/* No orphan tile: a last tile alone in its row fills it (2+2+1 when narrow); wider, six columns give 3 across, and the
   one or two left over share the last row (five tiles are 3+2 at equal widths). */
.metric-tile:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 30rem) {
  .metric-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .metric-tile { grid-column: span 2; }
  .metric-tile:last-child:nth-child(3n + 1) { grid-column: span 6; }
  .metric-tile:nth-child(3n + 1):nth-last-child(2), .metric-tile:last-child:nth-child(3n + 2) { grid-column: span 3; }
}

.metric-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.1rem 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.metric-label { color: var(--muted); font-size: 0.8rem; }
.metric-value, .metric-note { grid-column: 2; }
.metric-value { font-weight: 600; overflow-wrap: anywhere; }
.metric-note { color: var(--muted); font-size: 0.8rem; }

.rag-dot {
  display: inline-block;
  box-sizing: border-box;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
}

.rag-dot-green { background: var(--low); border-color: var(--low); }
.rag-dot-amber { background: var(--medium); border-color: var(--medium); border-radius: 0; transform: rotate(45deg) scale(0.85); }
.rag-dot-red { background: var(--critical); border-color: var(--critical); border-radius: 0; }
.rag-dot-grey { border-style: dashed; border-color: var(--muted); }
/* Uptime summary tile before its read settles: a dotted ring, with no level word (FR-2671). */
.rag-dot-checking { border-style: dotted; border-color: var(--muted); }
/* No limit: a consumption number with nothing to grade, so the dot is kept for alignment but not drawn. */
.rag-dot-none { visibility: hidden; }

.capacity-percent { grid-column: 2; font-size: 1.25rem; font-weight: 700; }
.capacity-line { grid-column: 2; font-size: 0.85rem; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .service-tile, .issues-card { transition: border-color 0.15s ease-out; }
}

@media (forced-colors: active) {
  .service-tile, .issues-card, .metric-tile, .capacity-tile, .tile-detail { border-color: CanvasText; }
  .rag-dot { forced-color-adjust: none; border-color: CanvasText; }
  .rag-dot-none { border-color: transparent; }
  .tile-dot { forced-color-adjust: none; border-color: CanvasText; }
  .tile-more { border-color: CanvasText; }
}

.issue-filter { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.5rem 0; padding: 0.5rem 0.75rem; }
.issue-filter legend { font-weight: 600; }
.issues-retention, .issues-result { color: var(--muted); margin: 0.25rem 0; }