/* WO-484 — SkyWatch (views/skywatch/): the SkyDesk sidebar view and the standalone page share this sheet.
   SDS tokens only. Phone (360 px): cards stack, a resource row wraps its bars under its name, tables scroll
   sideways inside their own box. A state is an icon and a word; colour never speaks alone. */
.skywatch { display: grid; gap: var(--sds-space-4); min-inline-size: 0; }
.skywatch .sds-page-header__right { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sds-space-3); }
.skywatch .sds-button .sky-icon { margin-inline-end: var(--sds-space-1); }
.skywatch-list { display: grid; gap: var(--sds-space-3); margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.skywatch-muted { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skywatch-reason { margin: 0; color: var(--sds-color-text); font-size: var(--sds-type-footnote); line-height: var(--sds-line-body); overflow-wrap: anywhere; }
.skywatch-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.skywatch-value--missing { color: var(--sds-color-muted); font-weight: var(--sds-weight-regular); white-space: normal; }
.skywatch-read time { font-variant-numeric: tabular-nums; }
.skywatch-id { font-family: var(--sds-font-mono); overflow-wrap: anywhere; }

/* Pages: Home, a company each, Docker, Findings. Long company names wrap inside their pill. */
.skywatch-nav__list { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); }
.skywatch-nav .sds-filter-pill { max-inline-size: 100%; block-size: auto; white-space: normal; text-align: start; }

/* A state: icon and word, toned. */
.skywatch-state-line { margin: 0; }
.skywatch-state { display: inline-flex; align-items: flex-start; gap: var(--sds-space-1); max-inline-size: 100%; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); line-height: var(--sds-line-tight); overflow-wrap: anywhere; }
.skywatch-state .sky-icon { margin-block-start: calc(var(--sds-space-1) / 2); }
/* A reason standing in for the word: the icon keeps the tone, the sentence reads as text. */
.skywatch-state--sentence > span { color: var(--sds-color-text); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-regular); line-height: var(--sds-line-body); }
.skywatch-state--success { color: var(--sds-color-success); }
.skywatch-state--warning { color: var(--sds-color-warning); }
.skywatch-state--danger { color: var(--sds-color-danger); }
.skywatch-state--info { color: var(--sds-color-info); }
.skywatch-state--unknown { color: var(--sds-color-unknown); }

/* Sections and cards. */
.skywatch-section { display: grid; gap: var(--sds-space-3); min-inline-size: 0; }
.skywatch .skywatch-section__title { margin: 0; font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); overflow-wrap: anywhere; }
.skywatch .skywatch-subtitle { margin: 0; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); }
.skywatch-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; gap: var(--sds-space-3); }
.skywatch-card { display: grid; align-content: start; gap: var(--sds-space-2); min-inline-size: 0; }
.skywatch .skywatch-card__title { margin: 0; font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); line-height: var(--sds-line-tight); }
.skywatch-link { display: inline; margin: 0; padding: 0; border: 0; border-radius: var(--sds-radius-small); background: none; color: inherit; font: inherit; text-align: start; text-decoration: underline dotted var(--sds-color-subtle); text-underline-offset: var(--sds-space-1); cursor: pointer; overflow-wrap: anywhere; }
.skywatch-link:hover { color: var(--sds-color-action); }
.skywatch-link:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
/* Stale: the last values stay, greyed; the word "Stale" and its time say why. */
.skywatch-card--stale .skywatch-value, .skywatch-card--stale .skywatch-headline__values { color: var(--sds-color-muted); }
.skywatch-card__findings { display: grid; gap: var(--sds-space-1); margin: 0; padding-block-start: var(--sds-space-2); border-block-start: var(--sds-hairline-width) solid var(--sds-color-hairline); font-size: var(--sds-type-body); }
.skywatch-card__top { display: grid; gap: var(--sds-space-1); }
.skywatch-card__top .skywatch-state { font-size: var(--sds-type-footnote); }
.skywatch-card__cost { display: grid; gap: var(--sds-space-2); padding-block-start: var(--sds-space-2); border-block-start: var(--sds-hairline-width) solid var(--sds-color-hairline); }
.skywatch-headline { gap: var(--sds-space-1); padding-block-start: var(--sds-space-2); border-block-start: var(--sds-hairline-width) solid var(--sds-color-hairline); }
.skywatch-headline__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sds-space-1) var(--sds-space-3); font-size: var(--sds-type-footnote); }
.skywatch-headline__name { display: inline-flex; align-items: center; gap: var(--sds-space-1); min-inline-size: 0; font-weight: var(--sds-weight-medium); overflow-wrap: anywhere; }
.skywatch-headline__values { display: inline-flex; flex-wrap: wrap; gap: var(--sds-space-1) var(--sds-space-3); }
.skywatch-pair { white-space: nowrap; }

/* Figures: a label over a value. */
.skywatch-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-2) var(--sds-space-4); margin: 0; }
.skywatch-figure { display: grid; align-content: start; gap: var(--sds-space-1); min-inline-size: 0; }
.skywatch-figure dt { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skywatch-figure dd { display: grid; gap: var(--sds-space-1); margin: 0; font-size: var(--sds-type-body); font-weight: var(--sds-weight-semibold); }
.skywatch-figure__note { display: block; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-regular); overflow-wrap: anywhere; }
.skywatch-figures--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skywatch-figures--tiles .skywatch-figure dd { font-size: var(--sds-type-title); line-height: var(--sds-line-tight); }
.skywatch-figures--tiles .skywatch-value--missing { font-size: var(--sds-type-headline); }
.skywatch-figures--inline { display: flex; flex-wrap: wrap; gap: var(--sds-space-2) var(--sds-space-5); }

/* Charts: inline SVG, drawn sizes only. */
.skywatch-meter { display: block; inline-size: 100%; block-size: var(--sds-space-2); border-radius: var(--sds-radius-small); overflow: hidden; }
.skywatch-meter__track { fill: var(--sds-color-fill-gray); }
.skywatch-meter__fill { fill: var(--sds-color-chart-1); }
.skywatch-meter__peak { fill: var(--sds-color-text); }
.skywatch-sizing { display: grid; gap: var(--sds-space-2); }
.skywatch-sizing__row { display: grid; grid-template-columns: minmax(4rem, auto) minmax(4rem, 1fr) minmax(0, 2fr); align-items: center; gap: var(--sds-space-2) var(--sds-space-3); font-size: var(--sds-type-footnote); }
.skywatch-sizing__row .skywatch-value { white-space: normal; }
.skywatch-sizing__label { color: var(--sds-color-muted); }
.skywatch-spark { display: grid; gap: var(--sds-space-1); margin: 0; min-inline-size: 0; }
.skywatch-spark__chart { display: block; inline-size: 100%; block-size: var(--sds-space-16); border-block-end: var(--sds-hairline-width) solid var(--sds-color-hairline); }
.skywatch-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.skywatch-line--cpu { stroke: var(--sds-color-chart-1); }
.skywatch-line--memory { stroke: var(--sds-color-chart-3); }
.skywatch-line--gpu { stroke: var(--sds-color-chart-5); }
.skywatch-legend { display: flex; flex-wrap: wrap; gap: var(--sds-space-1) var(--sds-space-4); margin: 0; padding: 0; list-style: none; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skywatch-legend li { display: inline-flex; align-items: center; gap: var(--sds-space-1); }
.skywatch-swatch { display: inline-block; inline-size: var(--sds-space-3); block-size: var(--sds-space-1); border-radius: var(--sds-radius-small); }
.skywatch-swatch--cpu { background: var(--sds-color-chart-1); }
.skywatch-swatch--memory { background: var(--sds-color-chart-3); }
.skywatch-swatch--gpu { background: var(--sds-color-chart-5); }
.skywatch-daily { display: grid; gap: var(--sds-space-1); margin: 0; }
.skywatch-daily__chart { display: block; inline-size: 100%; block-size: var(--sds-space-16); }
.skywatch-daily__bar { fill: var(--sds-color-chart-5); }
.skywatch-daily__none { fill: var(--sds-color-border); }

/* Company page: a project, then a row per resource. */
.skywatch-project { display: grid; gap: var(--sds-space-3); min-inline-size: 0; }
.skywatch-project__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sds-space-1) var(--sds-space-3); }
.skywatch .skywatch-project__title { margin: 0; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); overflow-wrap: anywhere; }
.skywatch-resources { gap: 0; }
.skywatch-resource { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--sds-space-3) var(--sds-space-5); padding-block: var(--sds-space-4); border-block-start: var(--sds-hairline-width) solid var(--sds-color-hairline); min-inline-size: 0; }
.skywatch-resource:focus { outline: none; }
.skywatch-resource.is-target { margin-inline: calc(var(--sds-space-3) * -1); padding-inline: var(--sds-space-3); border-radius: var(--sds-radius-row); background: var(--sds-color-selection-wash); }
.skywatch-resource__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-1) var(--sds-space-3); grid-column: 1 / -1; }
.skywatch-resource__name { display: inline-flex; align-items: center; gap: var(--sds-space-2); min-inline-size: 0; font-size: var(--sds-type-body); overflow-wrap: anywhere; }
.skywatch-resource__meta { flex-basis: 100%; }
.skywatch-resource__now { display: grid; gap: var(--sds-space-1); grid-column: 1 / -1; }
.skywatch-resource > .skywatch-figures, .skywatch-resource__cost { grid-column: 1 / -1; }
.skywatch-resource__cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sds-space-1) var(--sds-space-4); margin: 0; font-size: var(--sds-type-footnote); }
.skywatch-resource__cost .skywatch-figure__note { flex-basis: 100%; }

/* Cost tables and Docker tables scroll sideways inside their own box. */
.skywatch-breakdown { display: grid; gap: var(--sds-space-2); min-inline-size: 0; }
.skywatch-table td { font-size: var(--sds-type-body); }
.skywatch-table td:first-child { min-inline-size: 10rem; }
.skywatch-table--containers td { white-space: nowrap; }
.sds .skywatch-table .skywatch-group th { background: none; color: var(--sds-color-text); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.skywatch-table tbody + tbody .skywatch-group th { border-block-start: var(--sds-border-width) solid var(--sds-color-border); }
.sds .skywatch-table tbody:not(:last-child) tr:last-child td { border-block-end: var(--sds-border-width) solid var(--sds-color-border); }
.skywatch-more { margin: 0; }
.skywatch-docker-disk { display: grid; gap: var(--sds-space-1); margin: 0; font-size: var(--sds-type-body); }

/* Findings. */
.skywatch-findings { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.skywatch-finding { display: grid; align-content: start; gap: var(--sds-space-2); min-inline-size: 0; }
.skywatch-finding p { margin: 0; }
.skywatch-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-1) var(--sds-space-3); }
.skywatch .skywatch-finding__title { margin: 0; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); overflow-wrap: anywhere; }
.skywatch-finding__detail, .skywatch-finding__action { font-size: var(--sds-type-body); line-height: var(--sds-line-body); overflow-wrap: anywhere; }
.skywatch-finding__estimate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); font-size: var(--sds-type-body); font-weight: var(--sds-weight-semibold); }
.skywatch-finding__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sds-space-2); }
.skywatch-filters { display: grid; gap: var(--sds-space-2); }
.skywatch-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2) var(--sds-space-3); }
.skywatch-filter .sds-filter-pill { max-inline-size: 100%; block-size: auto; white-space: normal; text-align: start; }

/* WO-520: new findings (the Skynet desk). The word "New" with its icon says it; the outline only repeats it. */
.skywatch-finding--new { box-shadow: inset 0 0 0 var(--sds-border-width) var(--sds-color-info); }
.skywatch-finding__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); }
.skywatch-new-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sds-space-2) var(--sds-space-3); }
.skywatch-nav__new { font-weight: var(--sds-weight-semibold); }

/* WO-520: the Notifications tab. Fields stack at phone width; the quiet hours sit side by side when there is room. */
.skywatch-notify { display: grid; gap: var(--sds-space-3); min-inline-size: 0; }
.skywatch-notify__field { min-inline-size: 0; }
.skywatch-notify__group { display: grid; gap: var(--sds-space-3); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.skywatch-notify__group > legend { padding: 0; margin-block-end: var(--sds-space-2); }
.skywatch-notify__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--sds-space-3); }
.skywatch-switch { align-items: center; flex-wrap: wrap; max-inline-size: 100%; }
.skywatch-switch__label { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.skywatch-switch__word { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.skywatch-notify__rules { gap: 0; }
.skywatch-notify__rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sds-space-1) var(--sds-space-3); padding-block: var(--sds-space-2); border-block-start: var(--sds-hairline-width) solid var(--sds-color-hairline); }
.skywatch-notify__rule .skywatch-switch { flex: 1 1 16rem; }
.skywatch-notify__note { flex-basis: 100%; }
.skywatch-notify__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2) var(--sds-space-3); }
.skywatch-notify__result:empty { display: none; }
.skywatch-notify .sds-error { display: flex; align-items: flex-start; gap: var(--sds-space-1); }

.skywatch-loading { display: grid; gap: var(--sds-space-4); }
.skywatch-loading .sds-card { display: grid; gap: var(--sds-space-2); }
.skywatch-skeleton--tall { min-block-size: var(--sds-space-8); }

@media (max-width: 960px) {
  .skywatch-figures--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .skywatch .sds-page-header__right { inline-size: 100%; }
  .skywatch-card, .skywatch-project, .sds-card.skywatch-section { padding: var(--sds-space-4); }
  /* A resource row wraps: its chart and its bars sit under its name, one after the other. */
  .skywatch-resource { grid-template-columns: minmax(0, 1fr); }
  .skywatch-sizing__row { grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr); }
  .skywatch-sizing__row .skywatch-value { grid-column: 1 / -1; }
  .skywatch-figures--tiles .skywatch-figure dd { font-size: var(--sds-type-headline); }
  .skywatch-table td:first-child { min-inline-size: 7rem; }
}

/* The standalone page (skywatch.html): a plain bar with the name, then the view. */
.skywatch-page { min-block-size: 100vh; margin: 0; background: var(--sds-color-bg); color: var(--sds-color-text); }
.skywatch-page__bar { position: sticky; inset-block-start: 0; z-index: var(--sds-z-header); display: flex; align-items: center; gap: var(--sds-space-3); padding: var(--sds-space-3) var(--sds-layout-gutter); border-block-end: var(--sds-hairline-width) solid var(--sds-color-hairline); background: var(--sds-color-chrome-toolbar); }
.skywatch-page__name { display: inline-flex; align-items: center; gap: var(--sds-space-2); color: var(--sds-color-text); font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); text-decoration: none; }
.skywatch-page__name .sky-icon { color: var(--sds-color-accent); }
.skywatch-page__grow { flex: 1; }
.skywatch-page__main { max-inline-size: var(--sds-layout-content); margin: 0 auto; padding: var(--sds-space-5) var(--sds-layout-gutter) var(--sds-space-12); }
.skywatch-page__main:focus { outline: none; }
@media (max-width: 640px) {
  .skywatch-page__bar { flex-wrap: wrap; padding-inline: var(--sds-space-4); }
  .skywatch-page__main { padding: var(--sds-space-4) var(--sds-space-4) var(--sds-space-10); }
  #skywatch-who { display: none; }
}