/* The summary donut card, shared. DESIGN.md, "Summary donut cards".
   Markup comes from _summary_donut.html; this file is its only styling, so a
   page that takes the pattern loads nothing of its own.

   Built for /owners/properties on 2026-09-21 and lifted out of
   owners-properties.css the same day, when the owner asked for it on tenants,
   applicants, documents and payments too.

   Height follows content and the cards in a row SHARE it: the row stretches
   them and .ow-sd-action sits on margin-top:auto, so a card with less to say
   ends level with the others instead of leaving a ragged bottom edge. That is
   the only reason a card is ever taller than its own content, and it is why
   this file sets no minimum height anywhere. */

.ow .ow-sd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; align-items: stretch; }
.ow .ow-sd-row[data-cards="1"] { grid-template-columns: minmax(0, 420px); }
.ow .ow-sd-row[data-cards="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ow .ow-sd { --ow-card-pad-x: 16px; --ow-card-pad-y: 16px; display: flex; flex-direction: column; min-width: 0; padding: var(--ow-card-pad-y) var(--ow-card-pad-x); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }

/* The band, and the hint sign pinned to its far right so a row of cards puts
   the icon in one place whatever else each band carries. */
.ow .ow-sd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
/* owners-card-bands.css sets flex-wrap:wrap through an :is(..., #ow-card-band)
   guard, so it carries an id's specificity and beats a plain class rule. The
   band has to stay one line: a wrapped title puts the hint sign under it and
   two cards in a row then disagree about where the sign is. */
.ow .ow-sd-head:is(.ow-sd-head, #ow-sd-head) { flex-wrap: nowrap; }
.ow .ow-sd-head h2 { min-width: 0; }
.ow .ow-sd-head h2 { margin: 0; font-size: 1.125rem; line-height: 26px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ow .ow-sd-side { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.ow .ow-sd-meta { font-size: .875rem; line-height: 20px; font-weight: 500; white-space: nowrap; }
/* owners-card-bands.css paints the band and whitens its text; the icon it ships
   is grey by default, so it takes the band's own ink here. */
.ow .ow-sd-head[data-card-band="lead"] .ow-info-i[data-tip] { color: rgba(255, 255, 255, .85); }
.ow .ow-sd-head[data-card-band="lead"] .ow-info-i[data-tip]:hover,
.ow .ow-sd-head[data-card-band="lead"] .ow-info-i[data-tip][aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .22); }
.ow .ow-sd-head[data-card-band="lead"] .ow-info-i[data-tip]:focus-visible { outline-color: #fff; }

/* The ring. r=52 on a 124 box, so the 15px stroke clears the viewBox on both
   sides. Segment lengths come from SD_ARC in the macro; keep that constant and
   this radius in step or a segment overshoots its own track. */
.ow .ow-sd-chart { display: flex; align-items: center; gap: 14px; }
.ow .ow-sd-ring { position: relative; flex: 0 0 auto; width: 124px; height: 124px; }
.ow .ow-sd-donut { display: block; width: 124px; height: 124px; transform: rotate(-90deg); }
.ow .ow-sd-donut circle { fill: none; stroke-width: 15; }
.ow .ow-sd-donut .ow-sd-track { stroke: var(--surface-alt); }
/* The bright fill inside its darker edge: narrower on purpose, so the edge
   shows top and bottom and the shape reads on a white card. */
.ow .ow-sd-donut circle.ow-sd-inset { stroke-width: 11; }
.ow .ow-sd-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 0 12px; }
.ow .ow-sd-v { font-size: 1.25rem; line-height: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ow .ow-sd-lbl { font-size: 12px; line-height: 16px; color: var(--text-muted); }

/* The key beside the ring. A zero row stays, quietly: the reader needs to see
   that the bucket exists and is empty, not guess why a colour is missing. */
.ow .ow-sd-keys { display: grid; gap: 8px; flex: 1 1 auto; min-width: 0; }
.ow .ow-sd-key { display: flex; align-items: center; gap: 8px; font-size: .9375rem; line-height: 22px; }
.ow .ow-sd-name { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.ow .ow-sd-key strong { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ow .ow-sd-key.is-empty { color: var(--text-muted); }
.ow .ow-sd-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ow .ow-sd-dot-alert { background: var(--mark-alert); }
.ow .ow-sd-dot-good  { background: var(--mark-good); }
.ow .ow-sd-dot-info  { background: var(--mark-info); }
.ow .ow-sd-dot-busy  { background: var(--mark-busy); }
.ow .ow-sd-dot-quiet { background: var(--mark-quiet); }
/* Same reason as the arc: an 8px bright yellow disc is invisible on white, so
   it carries its edge as a ring rather than being darkened into a brown. */
.ow .ow-sd-dot-warn  { background: var(--mark-warn); box-shadow: inset 0 0 0 1.5px var(--mark-warn-edge); }

.ow .ow-sd-action { display: flex; margin-top: auto; padding-top: 14px; }
.ow .ow-sd-action .product-btn { width: 100%; }
.ow .ow-sd-none { margin: 0; font-size: .875rem; line-height: 23px; color: var(--text-muted); }

@container ow-layout (max-width: 1180px) {
  .ow .ow-sd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ow-layout (max-width: 620px) {
  .ow .ow-sd-row, .ow .ow-sd-row[data-cards="1"], .ow .ow-sd-row[data-cards="2"] { grid-template-columns: minmax(0, 1fr); } }