/* WO-357 — SkyFin (views/skyfin/): the SkyDesk sidebar view and the standalone page share this sheet.
   SDS tokens only. Phone: tiles two by two, tables become cards. Colour always sits beside a word. */
.skyfin { display: grid; gap: var(--sds-space-4); min-inline-size: 0; }
.skyfin .sds-page-header__right { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sds-space-3); }
.skyfin-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sds-space-3); }
.skyfin-month { display: grid; gap: var(--sds-space-1); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skyfin-month .sds-input { min-block-size: var(--sds-size-control); }
.skyfin-glyph { display: block; inline-size: var(--sds-size-icon); block-size: var(--sds-size-icon); }

.skyfin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sds-space-3); }
.skyfin-tile { display: grid; align-content: start; gap: var(--sds-space-1); }
.skyfin .skyfin-tile__label { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-medium); }
.skyfin .skyfin-tile__value { margin: 0; font-size: var(--sds-type-title); font-weight: var(--sds-weight-semibold); line-height: var(--sds-line-tight); font-variant-numeric: tabular-nums; }
.skyfin-tile__line, .skyfin-tile__note { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skyfin-tile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); margin: var(--sds-space-1) 0 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skyfin-value { font-variant-numeric: tabular-nums; }
.skyfin-mix, .skyfin-mix__part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-1); }
.skyfin-mix { gap: var(--sds-space-2); }
.skyfin-value--missing { color: var(--sds-color-muted); font-weight: var(--sds-weight-regular); font-style: italic; }
.skyfin-tile__value .skyfin-value--missing { font-size: var(--sds-type-headline); }
.skyfin-skeleton--tall { min-block-size: var(--sds-space-8); }
.skyfin-loading { display: grid; gap: var(--sds-space-4); }
.skyfin-loading .sds-card { display: grid; gap: var(--sds-space-2); }

.skyfin-section { display: grid; gap: var(--sds-space-3); }
.skyfin .skyfin-section__title { margin: 0; font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); }
.skyfin-muted { margin: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skyfin-list { display: grid; gap: var(--sds-space-2); margin: 0; padding: 0; list-style: none; }

.skyfin-week { 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); }
.skyfin .skyfin-week__title { display: flex; justify-content: space-between; gap: var(--sds-space-3); margin: 0; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); }
.skyfin-week__total { font-variant-numeric: tabular-nums; }
.skyfin-renewal { display: grid; grid-template-columns: minmax(4rem, auto) minmax(0, 2fr) minmax(0, 1fr) minmax(6rem, auto) auto; align-items: center; gap: var(--sds-space-3); font-size: var(--sds-type-body); }
.skyfin-renewal__date { font-weight: var(--sds-weight-semibold); font-variant-numeric: tabular-nums; }
.skyfin-renewal__company { color: var(--sds-color-muted); }
.skyfin-renewal__amount { text-align: end; }
.skyfin-renewal__chips, .skyfin-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sds-space-1); }

.skyfin-legend { display: flex; flex-wrap: wrap; gap: var(--sds-space-2) var(--sds-space-4); margin: 0; padding: 0; list-style: none; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.skyfin-legend li, .skyfin-part dt { display: inline-flex; align-items: center; gap: var(--sds-space-1); }
.skyfin-swatch { display: inline-block; inline-size: var(--sds-space-3); block-size: var(--sds-space-3); border-radius: var(--sds-radius-small); }
.skyfin-seg--ai_subscriptions { fill: var(--sds-color-chart-1); background: var(--sds-color-chart-1); }
.skyfin-seg--ai_apis { fill: var(--sds-color-chart-3); background: var(--sds-color-chart-3); }
.skyfin-seg--cloud { fill: var(--sds-color-chart-5); background: var(--sds-color-chart-5); }
.skyfin-seg--other_saas { fill: var(--sds-color-chart-6); background: var(--sds-color-chart-6); }
.skyfin-company { display: grid; gap: var(--sds-space-2); padding-block: var(--sds-space-2); border-block-start: var(--sds-hairline-width) solid var(--sds-color-hairline); }
.skyfin-company__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sds-space-2); }
.skyfin-bar { display: block; inline-size: 100%; block-size: var(--sds-space-4); border-radius: var(--sds-radius-small); overflow: hidden; }
.skyfin-bar__track { fill: var(--sds-color-fill-gray); }
.skyfin-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sds-space-2) var(--sds-space-4); margin: 0; font-size: var(--sds-type-footnote); }
.skyfin-part { display: grid; align-content: start; gap: var(--sds-space-1); min-inline-size: 0; }
.skyfin-part dt { color: var(--sds-color-muted); }
.skyfin-part dd { display: grid; gap: var(--sds-space-1); margin: 0; }
.skyfin-part__note { display: block; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-regular); }
.skyfin-daily { display: grid; gap: var(--sds-space-1); margin: var(--sds-space-2) 0 0; }
.skyfin-daily__chart { display: block; inline-size: 100%; block-size: var(--sds-space-16); }
.skyfin-daily__bar { fill: var(--sds-color-chart-5); }
.skyfin-daily__none { fill: var(--sds-color-border); }

.skyfin-table td { font-size: var(--sds-type-body); }
.skyfin-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--sds-weight-strong); cursor: pointer; }
.skyfin-sort:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
.skyfin-credits li { font-size: var(--sds-type-body); }
.skyfin-gaps li { font-size: var(--sds-type-body); line-height: var(--sds-line-body); }
.skyfin-gap__fix { color: var(--sds-color-muted); }

/* WO-361: a number opens its lines. The opener is a plain button that reads as the number it wraps. */
.skyfin-open { display: inline-flex; align-items: baseline; gap: var(--sds-space-2); max-inline-size: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--sds-radius-small); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.skyfin-open .skyfin-value { text-decoration: underline dotted var(--sds-color-subtle); text-underline-offset: var(--sds-space-1); }
.skyfin-open:hover .skyfin-value, .skyfin-open:hover strong { color: var(--sds-color-action); }
.skyfin-open:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); }
.skyfin-open--row { display: flex; flex-wrap: wrap; justify-content: space-between; inline-size: 100%; }
.skyfin-open--cell { display: inline-flex; }
.skyfin .skyfin-subtitle { display: flex; justify-content: space-between; gap: var(--sds-space-3); margin: 0; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); }
.skyfin-project { display: grid; gap: var(--sds-space-1); min-inline-size: 0; }
.skyfin-project__id { display: block; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-regular); overflow-wrap: anywhere; }
.skyfin-projects td:not(:first-child), .skyfin-lines td:nth-child(n + 3) { font-variant-numeric: tabular-nums; }
.skyfin-table .skyfin-value { white-space: nowrap; }
/* Smaller items: rows under a cent each, folded into one line that opens. */
.skyfin-small { display: grid; gap: var(--sds-space-2); }
.skyfin-small__summary { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); cursor: pointer; }
.skyfin-small__summary:focus-visible { outline: var(--sds-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-focus-offset); border-radius: var(--sds-radius-small); }
.skyfin-small[open] > .skyfin-small__summary { margin-block-end: var(--sds-space-2); }
/* The drawer's body (views/skyfin/index.mjs skyfinDetail). */
.skyfin-detail { gap: var(--sds-space-4); }
.skyfin-detail__segment { 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); }
.skyfin-detail__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sds-space-1) var(--sds-space-3); padding-block: var(--sds-space-2); border-block-end: var(--sds-hairline-width) solid var(--sds-color-hairline); font-size: var(--sds-type-body); }
.skyfin-detail__what { display: grid; gap: var(--sds-space-1); min-inline-size: 0; }
.skyfin-detail__amount { text-align: end; font-variant-numeric: tabular-nums; }
.skyfin-detail__row .skyfin-chips { grid-column: 1 / -1; }

@media (max-width: 960px) {
  .skyfin-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skyfin-renewal { grid-template-columns: minmax(4rem, auto) minmax(0, 1fr) auto; }
  .skyfin-renewal__company { grid-column: 2; }
  .skyfin-renewal__chips { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
  .skyfin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-2); }
  .skyfin-tile { padding: var(--sds-space-3); }
  .skyfin .skyfin-tile__value { font-size: var(--sds-type-headline); }
  .skyfin .skyfin-tile__label { font-size: var(--sds-type-footnote); }
  .skyfin .sds-page-header__right, .skyfin-controls { inline-size: 100%; }
  /* Tables become cards: each row is a card, each cell names itself. */
  .skyfin .sds-table-wrap { border: 0; overflow: visible; }
  .skyfin-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .skyfin-table, .skyfin-table tbody, .skyfin-table tr, .skyfin-table td { display: block; inline-size: 100%; }
  .skyfin-table tr { margin-block-end: var(--sds-space-2); padding: var(--sds-space-3); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); }
  .skyfin .skyfin-table td { display: grid; grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr); gap: var(--sds-space-2); padding: var(--sds-space-1) 0; border: 0; white-space: normal; }
  .skyfin-table td::before { content: attr(data-label); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
}

/* The standalone page (skyfin.html): the lockup header, light and dark, then the view. */
.skyfin-page { min-block-size: 100vh; margin: 0; background: var(--sds-color-bg); color: var(--sds-color-text); }
.skyfin-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); }
.skyfin-page__grow { flex: 1; }
.skyfin-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); }
.skyfin-page__main:focus { outline: none; }
.skyfin-lockup { display: inline-grid; place-items: center; }
.skyfin-lockup img { grid-area: 1 / 1; block-size: var(--sds-space-10); inline-size: auto; }
.skyfin-lockup--light { display: none; }
.sds[data-sds-theme="light"] .skyfin-lockup--dark { display: none; }
.sds[data-sds-theme="light"] .skyfin-lockup--light { display: block; }
@media (prefers-color-scheme: light) {
  .sds[data-sds-theme="system"] .skyfin-lockup--dark { display: none; }
  .sds[data-sds-theme="system"] .skyfin-lockup--light { display: block; }
}
@media (max-width: 640px) {
  .skyfin-page__bar { flex-wrap: wrap; padding-inline: var(--sds-space-4); }
  .skyfin-page__main { padding: var(--sds-space-4) var(--sds-space-4) var(--sds-space-10); }
  .skyfin-lockup img { block-size: var(--sds-space-8); }
  #skyfin-who { display: none; }
}