/* Hallmark · Workbench · command surfaces: Home, Incidents, Approvals, Capabilities, task timeline. */

/* Count chips: one pill for the Tasks summary and the Capabilities filters. A value is coloured only when it carries a
   state (running, waiting on a person, failing, ready); zero stays neutral. */
.task-summary-chip, .capability-filters button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 1.875rem; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-rule); border-radius: 999px; background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-xs); font-weight: 450; line-height: 1.2; white-space: nowrap; }
.task-summary-chip strong { color: var(--color-ink); font-size: var(--text-sm); font-weight: 560; }
.task-summary-chip:is([data-state="running"], [data-state="queued"]) strong { color: var(--color-accent); }
.task-summary-chip[data-state="awaiting_approval"] strong { color: var(--color-warning); }
.task-summary-chip:is([data-state="firing"], [data-state="failed"]) strong { color: var(--color-error); }
.task-summary-chip:is([data-state="configured"], [data-state="succeeded"]) strong { color: var(--color-success); }
.task-summary-chip:hover, .capability-filters button:hover { text-decoration: none; border-color: var(--color-rule-strong); background: var(--color-paper-2); color: var(--color-ink); }
.task-summary-chip[aria-pressed="true"], .capability-filters button[aria-pressed="true"] { background: var(--color-paper-3); border-color: var(--color-rule-strong); color: var(--color-ink); }
:is(.task-summary-chip, .capability-filters button):focus-visible { outline-offset: 2px; }

/* Home answers three questions before anything else: what needs me, what is Polo doing, are my services OK. Then the
   setup checklist (until it is complete), what a person can act on now, the composer and recent work. */
.product-home-head { margin-bottom: var(--space-5); }
.home-warning { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in oklab, var(--color-warning) 45%, var(--color-rule)); border-radius: var(--radius-md); background: var(--color-warning-soft); color: var(--color-ink); line-height: 1.5; }
.home-warning > svg { margin-top: .1875rem; color: var(--color-warning); }
.home-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.home-summary:empty { min-height: 8.5rem; }
.home-tile { display: grid; align-content: start; gap: var(--space-1); min-width: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); color: var(--color-muted); }
.home-tile:hover { text-decoration: none; border-color: var(--color-rule-strong); background: var(--color-paper-3); }
.home-tile:focus-visible { outline-offset: 2px; }
.home-tile-label { color: var(--color-body); font-size: var(--text-sm); font-weight: 500; }
.home-tile-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-top: var(--space-1); }
.home-tile-figure strong { color: var(--color-ink); font: 600 var(--text-title)/1.15 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home-tile-figure small { color: var(--color-body); font-size: var(--text-sm); }
.home-tile-note { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.home-tile[data-state="awaiting_approval"] .home-tile-figure strong { color: var(--color-warning); }
.home-tile[data-state="running"] .home-tile-figure strong { color: var(--color-info); }
.home-tile[data-state="firing"] .home-tile-figure strong { color: var(--color-error); }
.home-checklist { margin-bottom: var(--space-6); }

.home-attention { margin-bottom: var(--space-6); }
.home-attention > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.home-attention > header h2 { font-size: var(--text-lg); font-weight: 600; }
.home-attention > header p { color: var(--color-muted); font-size: var(--text-sm); }
.attention-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: var(--space-3); }
.attention-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.attention-mark { align-self: start; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-warning-soft); color: var(--color-warning); }
.attention-mark svg { width: .875rem; height: .875rem; }
.attention-card:is([data-kind="incident"], [data-kind="failed"], [data-kind="blocked"]) .attention-mark { color: var(--color-error); background: var(--color-error-soft); }
.attention-card[data-kind="question"] .attention-mark { color: var(--color-info); background: var(--color-info-soft); }
.attention-body { display: grid; gap: var(--space-1); min-width: 0; }
.attention-body strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 560; line-height: 1.4; overflow-wrap: anywhere; }
.attention-reason { color: var(--color-body); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.attention-card > button { justify-self: end; min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--text-sm); }

.product-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "assignment teammate" "recent teammate"; gap: var(--space-6); align-items: start; }
.product-home-grid:has(.assignment-panel[hidden]) { grid-template-areas: "recent teammate"; }
.assignment-panel { grid-area: assignment; }
.home-recent { grid-area: recent; background: var(--color-transparent); }
.home-recent .panel-header { min-height: 3.25rem; }
.home-recent .panel-header h2 { font-size: var(--text-md); font-weight: 600; }
.home-recent-list { list-style: none; margin: 0; padding: 0; }
.home-recent-list > li + li { border-top: 1px solid var(--color-rule); }
.home-recent-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 0; padding: var(--space-3) var(--space-5); border: 0; border-radius: 0; background: var(--color-transparent); color: var(--color-body); font-weight: 400; text-align: left; white-space: normal; }
.home-recent-row:hover { background: var(--color-paper-3); }
.home-recent-row:focus-visible { outline-offset: -2px; }
.home-recent-row > svg { color: var(--color-muted); }
.home-recent-main { display: grid; flex: 1; gap: .125rem; min-width: 0; }
.home-recent-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-ink); font-size: var(--text-body); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.home-recent-head .product-task-outcomes { font-size: inherit; }
.home-recent-title { color: var(--color-body); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.home-recent-meta { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.home-empty { padding: var(--space-6) var(--space-5); color: var(--color-muted); line-height: 1.6; }

/* Incidents. */
.incident-metric { position: relative; }
.incident-metric[data-state="firing"] > strong { color: var(--color-error); }
.incident-metric[data-state="configured"] > strong { color: var(--color-success); }
.incidents-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin-bottom: var(--space-4); }
.incidents-grid + .panel { margin-bottom: var(--space-4); }
.incident-source { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-rule); }
.incident-source:first-child { border-top: 0; }
.incident-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-error-soft); color: var(--color-error); }
.incident-main { display: grid; gap: .125rem; min-width: 0; }
.incident-main strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 560; overflow-wrap: anywhere; }
.incident-main small { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.incident-source > button { min-height: 1.875rem; padding-inline: var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.incident-source .button { min-height: 1.875rem; padding-inline: var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.badge[data-state="investigating"] { color: var(--color-accent); background: var(--color-accent-soft); }
.badge[data-state="healthy"] { color: var(--color-success); background: var(--color-success-soft); }
.badge[data-state="failing"], .badge[data-state="blocked"] { color: var(--color-error); background: var(--color-error-soft); }
.badge[data-state="paused"], .badge[data-state="closed"], .badge[data-state="pending"] { color: var(--color-muted); }
.incident-event { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-rule); }
.incident-event:first-child { border-top: 0; }
.operation-row-meta { color: var(--color-muted); font-size: var(--text-sm); }
.incident-probe-body { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
.uptime-spark { display: block; width: 100%; max-width: 20rem; height: 1.5rem; stroke: none; fill: var(--color-muted); }
.uptime-spark rect[data-health="healthy"] { fill: var(--color-success); }
.uptime-spark rect[data-health="failing"] { fill: var(--color-error); }
.uptime-spark rect[data-health="unknown"] { fill: var(--color-rule-strong); }
.incident-sample-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-body); }
.incident-sample-list li { display: flex; align-items: center; gap: var(--space-2); }
.incident-signal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-radius: var(--radius-md); font-size: var(--text-sm); }
.incident-signal > span:not(.badge) { flex: 1; min-width: 12rem; overflow-wrap: anywhere; }
.incident-signal button { min-height: 1.75rem; padding-inline: var(--space-2); font-size: var(--text-xs); }

/* Incidents: each incident as a story. An active incident is a card with four steps (Opened, Investigation, Fix,
   Recovery) that run across a wide card and stack once the card is narrower than 44rem; a recent incident leads with its
   outcome and tells the same steps as a short trail, one per line. A step's state is its marker colour and its text: done,
   active, waiting (on a person), failed, unverified (recovered without a verified fix, so grey: it ended without Polo's
   fix to credit), pending or neutral. Also the tool and fix pickers on Incidents, Automation and Intake. Rendered by
   product-incidents.js, product-monitors.js and product-automation.js. */
.incident-active-panel { margin-bottom: var(--space-4); }
.incident-cards > li.incident-card { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); container-type: inline-size; }
.incident-card:focus-visible { outline-offset: -2px; }
.incident-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
.incident-card-head h3 { color: var(--color-ink); font-size: var(--text-md); font-weight: 580; line-height: 1.35; overflow-wrap: anywhere; }
.incident-card-head small { display: block; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
/* The mark carries the incident's own state: red while it fails or fires, grey once its alert cleared. */
.incident-card[data-own="closed"] .incident-mark { background: var(--color-paper-3); color: var(--color-muted); }
.incident-card .incident-mark svg { width: .875rem; height: .875rem; }
.incident-card > .status { font-size: var(--text-xs); }
.badge[data-state="verifying"] { color: var(--color-accent); background: var(--color-accent-soft); }
.badge[data-state="unverified"] { color: var(--color-warning); background: var(--color-warning-soft); }
/* A monitor whose checks stopped landing: its health is only as current as its last check. */
.badge[data-state="stale"] { color: var(--color-warning); background: var(--color-warning-soft); }
/* An incident card states its own state (failing, firing, cleared by the provider), then what it waits on now. */
.incident-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }

.incident-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.incident-step { position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); min-width: 0; }
.incident-step-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-rule-strong); border-radius: 50%; background: var(--color-paper-2); color: var(--color-muted); }
.incident-step-mark svg { width: .8125rem; height: .8125rem; }
/* The connector runs from a marker to the next step's marker across the column gap. */
.incident-steps:not(.incident-trail) > .incident-step:not(:last-child)::after { content: ""; position: absolute; top: .875rem; left: 2.25rem; right: calc(.5rem - var(--space-4)); height: 1px; background: var(--color-rule-strong); }
.incident-steps:not(.incident-trail) > .incident-step[data-state="done"]:not(:last-child)::after { background: color-mix(in oklab, var(--color-success) 55%, var(--color-rule)); }
.incident-step[data-state="done"] .incident-step-mark { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.incident-step[data-state="active"] .incident-step-mark { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.incident-step[data-state="waiting"] .incident-step-mark { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning); box-shadow: 0 0 0 3px var(--color-warning-soft); }
.incident-step[data-state="unverified"] .incident-step-mark { border-color: var(--color-rule-strong); background: var(--color-paper-3); color: var(--color-body); }
.incident-step[data-state="failed"] .incident-step-mark { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-error); }
.incident-step[data-state="pending"] .incident-step-mark { border-style: dashed; background: var(--color-transparent); }
.incident-step-body { display: grid; gap: .125rem; align-content: start; min-width: 0; }
.incident-step-label { color: var(--color-muted); font: 500 var(--text-xs)/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.incident-step-status { color: var(--color-ink); font-size: var(--text-body); font-weight: 560; line-height: 1.45; overflow-wrap: anywhere; }
.incident-step:is([data-state="pending"], [data-state="neutral"], [data-state="unverified"]) .incident-step-status { color: var(--color-body); font-weight: 500; }
.incident-step[data-state="waiting"] .incident-step-status { color: var(--color-warning); }
.incident-step[data-state="failed"] .incident-step-status { color: var(--color-error); }
.incident-step[data-state="done"][data-step="recovery"] .incident-step-status { color: var(--color-success); }
.incident-step-detail { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.incident-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.incident-step-actions > button { min-height: 1.875rem; padding-inline: var(--space-3); font-size: var(--text-xs); }
.incident-task-link, .incident-card-actions > button { font-size: var(--text-xs); font-weight: 540; }
.incident-stability { display: grid; gap: var(--space-1); margin-top: var(--space-1); color: var(--color-body); font-size: var(--text-xs); }
.incident-meter { width: 100%; max-width: 12rem; height: .375rem; border: 0; border-radius: 999px; background: var(--color-paper-3); appearance: none; }
.incident-meter::-webkit-meter-bar { height: .375rem; border: 0; border-radius: 999px; background: var(--color-paper-3); }
.incident-meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--color-accent); }
.incident-meter::-moz-meter-bar { border-radius: 999px; background: var(--color-accent); }

/* The exact operations a remediation step proposed or ran, each with its own state. */
.incident-ops { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.incident-op { display: grid; gap: .125rem; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-left: 2px solid var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper); }
.incident-op[data-state="waiting"] { border-left-color: var(--color-warning); }
.incident-op[data-state="active"] { border-left-color: var(--color-accent); }
.incident-op[data-state="done"] { border-left-color: var(--color-success); }
.incident-op[data-state="failed"] { border-left-color: var(--color-error); }
.incident-op-name { color: var(--color-ink); font-size: var(--text-sm); font-weight: 540; line-height: 1.4; overflow-wrap: anywhere; }
.incident-op-state { color: var(--color-body); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.incident-op[data-state="waiting"] .incident-op-state { color: var(--color-warning); }
.incident-op[data-state="done"] .incident-op-state { color: var(--color-success); }
.incident-op[data-state="failed"] .incident-op-state { color: var(--color-error); }
.incident-op-rule, .incident-op-gate { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.incident-op .incident-approve { justify-self: start; min-height: 1.875rem; margin-top: var(--space-1); padding-inline: var(--space-3); font-size: var(--text-xs); }

/* A recent incident: the outcome sentence (green only when a verified fix came first), then the story as a trail, one step
   per line. */
.incident-outcome { margin: 0; color: var(--color-body); font-size: var(--text-body); font-weight: 560; line-height: 1.45; overflow-wrap: anywhere; }
.incident-outcome[data-outcome="recovered_after_remediation"] { color: var(--color-success); }
.incident-recent[data-outcome="recovered_after_remediation"] .incident-mark { background: var(--color-success-soft); color: var(--color-success); }
.incident-recent:not([data-outcome="recovered_after_remediation"]) .incident-mark { background: var(--color-paper-3); color: var(--color-muted); }
.incident-trail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.incident-trail > .incident-step { grid-template-columns: 1.375rem minmax(0, 1fr); grid-template-rows: none; align-items: start; gap: 0 var(--space-2); padding-bottom: var(--space-2); }
.incident-trail > .incident-step:last-child { padding-bottom: 0; }
.incident-trail > .incident-step:not(:last-child)::after { content: ""; position: absolute; top: 1.5rem; bottom: .125rem; left: .68rem; width: 1px; background: var(--color-rule-strong); }
.incident-trail .incident-step-mark { width: 1.375rem; height: 1.375rem; }
.incident-trail .incident-step-mark svg { width: .6875rem; height: .6875rem; }
.incident-trail .incident-step-body { display: block; padding-top: .0625rem; }
.incident-trail .incident-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.incident-trail .incident-step-status { color: var(--color-body); font-size: var(--text-sm); font-weight: 500; line-height: 1.45; }
.incident-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.incident-cards > .incident-more { padding: var(--space-2) var(--space-5) var(--space-3); }

/* The tool and fix pickers: one granted resource per row, named in plain words; the whole row is the tap target. */
.product-grants .grant-choice { align-items: flex-start; line-height: 1.45; }
.grant-choice input { flex: 0 0 auto; width: 1rem; height: 1rem; min-height: 1rem; margin: .15rem 0 0; accent-color: var(--color-primary); }
.grant-choice > span { min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.grant-choice:has(input:disabled) > span { color: var(--color-muted); }
:is(#product-monitor-form, #product-automation-form) .product-grants > .form-stack { gap: var(--space-3); }
:is(#product-monitor-form, #product-automation-form) .product-grants legend { color: var(--color-ink); font-size: var(--text-body); font-weight: 620; }
@media (pointer: coarse) {
  .product-grants .grant-choice { min-height: 2.5rem; }
}
.remediation-grants > .field-help a { font-weight: 540; }
.remediation-withdrawn { color: var(--color-warning); }

@container (max-width: 44rem) {
  .incident-steps:not(.incident-trail) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .incident-steps:not(.incident-trail) > .incident-step { grid-template-columns: 1.75rem minmax(0, 1fr); grid-template-rows: none; column-gap: var(--space-3); padding-bottom: var(--space-3); }
  .incident-steps:not(.incident-trail) > .incident-step:last-child { padding-bottom: 0; }
  .incident-steps:not(.incident-trail) > .incident-step:not(:last-child)::after { top: 2rem; bottom: .25rem; left: .84rem; right: auto; width: 1px; height: auto; }
  .incident-steps:not(.incident-trail) .incident-step-body { padding-top: .2rem; }
}
@media (max-width: 760px) {
  .incident-cards > li.incident-card { padding: var(--space-4); }
  .incident-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .incident-card-head > .badge { grid-column: 2; justify-self: start; }
  .incident-card-head > .incident-badges { grid-column: 2; justify-content: flex-start; }
}
@media (pointer: coarse) {
  .incident-step-actions > button, .incident-op .incident-approve, .incident-cards > .incident-more button { min-height: 2.5rem; }
  .incident-task-link { display: inline-flex; align-items: center; min-height: 2.5rem; }
}

/* Monitors on Incidents (product-monitors.js) and recurring tasks on Automation (product-automation.js): one row per rule
   with its lead sentence, its status line, what Polo does when it runs, and its actions. */
.task-list > li:is(.monitor-row, .automation-rule) { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-4) var(--space-5); overflow-wrap: anywhere; }
:is(.monitor-row, .automation-rule) h3 { font-size: var(--text-md); font-weight: 580; }
.monitor-lead, .automation-rule-lead { margin: 0; color: var(--color-body); font-size: var(--text-body); line-height: 1.5; }
.monitor-lead code { color: var(--color-ink); font: var(--text-sm)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.monitor-status, .automation-rule-meta { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.monitor-plan { display: grid; gap: var(--space-2); margin-top: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-paper); }
.monitor-plan > p { margin: 0; color: var(--color-ink); font-size: var(--text-sm); font-weight: 540; }
:is(.monitor-plan, .automation-rule) .operation-facts { font-size: var(--text-sm); }
/* The monitor's investigation actions lead; the actions that manage it sit apart, to the right on a wide row. */
.monitor-actions, .monitor-manage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
:is(.monitor-actions, .monitor-manage, .automation-rule > .controls) > :is(button, .button) { min-height: 2rem; padding-inline: var(--space-3); font-size: var(--text-sm); }
.monitor-row > .status:empty { display: none; }
.incident-monitors-panel .panel-header > button { flex: 0 0 auto; min-height: 2rem; padding-inline: var(--space-3); font-size: var(--text-sm); }
.incident-monitors-panel .panel-header h2:focus-visible { outline-offset: 4px; }
/* Background jobs that are not running stop monitors and recurring tasks alike: a warning, said where each is managed. */
.incident-scheduler, .automation-worker[data-state="warning"] { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-soft); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }
.incident-scheduler { margin: var(--space-3) var(--space-5) 0; }
.automation-worker { margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.automation-worker:empty { display: none; }
.automation-worker[data-state="running"]::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: var(--space-2); border-radius: 50%; background: var(--color-success); vertical-align: .05em; }
.automation-elsewhere { margin: 0 0 var(--space-4); color: var(--color-body); font-size: var(--text-sm); }
.automation-elsewhere a { font-weight: 540; }
.automation-grid:has(> #product-automation-setup[hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  .monitor-manage { margin-left: auto; }
}
@media (max-width: 760px) {
  .task-list > li:is(.monitor-row, .automation-rule) { padding: var(--space-4); }
  .incident-scheduler { margin-inline: var(--space-4); }
}
@media (pointer: coarse) {
  :is(.monitor-actions, .monitor-manage, .automation-rule > .controls) > :is(button, .button), .incident-monitors-panel .panel-header > button { min-height: 2.5rem; }
  .automation-elsewhere a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .incident-source > :is(button, .button) { min-height: 2.5rem; }
}

/* Approvals: changes waiting for the viewer, then for another approver, questions, and the outcome-first history. A
   decision card leads with the change in plain words and why Polo asks; the change card below holds the exact review
   that must be opened before Approve enables. */
.approvals-section { margin-bottom: var(--space-5); }
.approvals-summary { margin: calc(-1 * var(--space-2)) 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-body); font-size: var(--text-body); }
.approvals-summary[data-state="pending"] { border-color: var(--color-warning); background: linear-gradient(90deg, var(--color-warning-soft), var(--color-paper-2)); color: var(--color-ink); }
.approvals-summary:empty { display: none; }
.approvals-summary:has(+ .approvals-empty-help:not([hidden])) { margin-bottom: 0; padding-bottom: var(--space-1); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--color-ink); font-weight: 560; }
.approvals-empty-help { margin: 0 0 var(--space-5); padding: 0 var(--space-4) var(--space-3); border: 1px solid var(--color-rule); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-paper-2); color: var(--color-muted); }
.approval-list { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); }
.approval-list .empty-state { padding: var(--space-2) 0; }
.approval-card { display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: 1px solid var(--color-rule-strong); border-left: 3px solid var(--color-warning); border-radius: var(--radius-lg); background: var(--color-paper); }
.approval-card:not([data-waiting="you"]) { border-left-color: var(--color-rule-strong); }
.approval-head { display: grid; gap: var(--space-1); min-width: 0; }
.approval-title { color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.approval-why { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.approval-blocker { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-soft); color: var(--color-ink); font-size: var(--text-body); line-height: 1.5; }
.approval-request { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-body); line-height: 1.5; }
.approval-request dt { color: var(--color-muted); }
.approval-request dd { margin: 0; color: var(--color-body); overflow-wrap: anywhere; }
/* The decision card's title already names the change, so the change card's own heading and badge are not repeated; once a
   plan expired, the blocker line above replaces the change card's notes about who may approve it. */
.approval-card .operation-card > header, .approval-card[data-plan="expired"] .operation-card > :is(.approval-gate, .job-error) { display: none; }
.approval-card .operation-card { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.approval-invite { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-info-soft); color: var(--color-ink); font-size: var(--text-body); line-height: 1.5; }
.approval-reject { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-error); border-radius: var(--radius-md); background: var(--color-error-soft); }
.approval-reject label { display: grid; gap: var(--space-2); }
.approval-reject label span { color: var(--color-ink); font-size: var(--text-sm); font-weight: 560; }
.approval-reject textarea { width: 100%; min-height: 3.5rem; resize: vertical; font: inherit; font-size: var(--text-body); }
.approval-rows { list-style: none; margin: 0; padding: 0; }
.approval-rows > li > .empty-state { padding: var(--space-4) var(--space-5); }
.approval-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-rule); }
.approval-history-row:first-child { border-top: 0; }
.approval-mark { width: .625rem; height: .625rem; margin-top: .375rem; border-radius: 50%; background: var(--color-rule-strong); }
.approval-mark[data-state="verified"] { background: var(--color-success); }
.approval-mark[data-state="failed"] { background: var(--color-error); }
.approval-mark[data-state="running"] { background: var(--color-info); }
.approval-mark:is([data-state="awaiting_approval"], [data-state="unknown"]) { background: var(--color-warning); }
.approval-history-main { display: grid; gap: .125rem; min-width: 0; }
.approval-outcome { color: var(--color-ink); font-size: var(--text-body); font-weight: 560; overflow-wrap: anywhere; }
.approval-history-row[data-outcome="failed"] .approval-outcome { color: var(--color-error); }
.approval-history-title { color: var(--color-body); font-size: var(--text-body); overflow-wrap: anywhere; }
.approval-decision, .approval-history-main small { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.approval-history-row > .button { min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
/* A change bundle's lifecycle: generated, tested offline, accepted by Polo's review, then published or applied, or not. */
.artifact-lifecycle { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.4; }
.artifact-lifecycle li { display: inline-flex; align-items: baseline; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.artifact-lifecycle li::before { content: ""; width: .5rem; height: .5rem; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; }
.artifact-lifecycle li[data-state="done"] { color: var(--color-success); }
.artifact-lifecycle li[data-state="done"]::before { background: currentColor; }
.artifact-lifecycle li[data-state="waiting"] { color: var(--color-warning); }
.artifact-lifecycle li[data-state="failed"] { color: var(--color-error); }
.artifact-lifecycle li[data-state="unknown"]::before { border-style: dashed; }
/* Follow-through that is on but cannot deliver, or whose last notice failed. */
.badge[data-state="not_delivering"] { color: var(--color-warning); background: var(--color-warning-soft); }
.badge[data-state="expired"] { color: var(--color-muted); background: var(--color-paper-3); }

/* Capabilities: maturity and workspace tiles, two pill filter groups, then one card per area of idea.md §4. A card's
   state line pairs this workspace's connection state with the area's maturity on the brief's five-step ladder (the
   lowest level any built family has reached); each built family carries its own level and the disclosure lists
   capability ids and evidence. Planned areas sit on the page background. Rendered by product-capabilities.js. */
.capability-intro { max-width: 80ch; margin: calc(-1 * var(--space-2)) 0 var(--space-6); color: var(--color-body); font-size: var(--text-md); line-height: 1.6; }
.capability-intro:empty { display: none; }
.capability-section { margin-bottom: var(--space-7); }
.capability-section-title { margin-bottom: var(--space-3); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; }
.capability-summary { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.capability-tile-group { display: grid; gap: var(--space-2); min-width: 0; }
.capability-tile-title { color: var(--color-muted); font-size: var(--text-sm); font-weight: 560; }
.capability-tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.capability-tile-row[data-group="maturity"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.capability-tile-note { max-width: 96ch; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; }
.capability-tile { display: grid; gap: var(--space-1); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); }
.capability-tile strong { color: var(--color-ink); font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.capability-tile[data-empty="true"] strong { color: var(--color-muted); }
.capability-tile[data-tile="connected"][data-empty="false"] strong { color: var(--color-success); }
.capability-tile[data-tile="registered"][data-empty="false"] strong { color: var(--color-info); }
.capability-tile[data-tile="setup"][data-empty="false"] strong { color: var(--color-warning); }
.capability-tile small { font-size: var(--text-xs); line-height: 1.5; }
.capability-notice { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-soft); color: var(--color-ink); font-size: var(--text-body); }
.capability-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.capability-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.capability-filter-label { color: var(--color-muted); font-size: var(--text-sm); }
.capability-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--space-3); }
.capability-grid > li:not(.capability-card) { grid-column: 1 / -1; }
.capability-grid .empty-state { padding: var(--space-6) var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); text-align: center; }
.capability-card { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.capability-card[data-state="planned"] { background: var(--color-paper); }
.capability-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "number state" "title title"; align-items: center; column-gap: var(--space-3); row-gap: var(--space-2); }
.capability-number { grid-area: number; color: var(--color-muted); font: 400 var(--text-xs)/1 var(--font-mono); }
.capability-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-2); min-width: 0; margin: 0; }
.capability-separator { color: var(--color-muted); font-size: var(--text-xs); }
.capability-maturity { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-body); font-size: var(--text-xs); line-height: 1.35; white-space: nowrap; }
.capability-maturity[data-level="local"] { color: var(--color-ink); }
.capability-meter { display: inline-flex; gap: 2px; }
.capability-meter i { width: .4375rem; height: .4375rem; border-radius: 1px; background: var(--color-rule-strong); }
.capability-meter[data-level="planned"] i:nth-child(-n+1), .capability-meter[data-level="implemented"] i:nth-child(-n+2),
.capability-meter[data-level="local"] i:nth-child(-n+3), .capability-meter[data-level="provider"] i:nth-child(-n+4),
.capability-meter[data-level="pilot"] i { background: var(--color-body); }
.badge[data-state="registered"] { color: var(--color-info); background: var(--color-info-soft); }
.badge[data-state="checking"] { color: var(--color-muted); }
.capability-head h2 { grid-area: title; font-size: var(--text-md); font-weight: 580; line-height: 1.35; }
.capability-label { color: var(--color-muted); font-size: var(--text-xs); }
.capability-summary-text { color: var(--color-body); font-size: var(--text-body); line-height: 1.6; }
.capability-summary-text .capability-label { margin-right: var(--space-1); }
.capability-card[data-state="planned"] .capability-summary-text { color: var(--color-muted); }
.capability-card > p.capability-label { margin-bottom: calc(-1 * var(--space-2)); }
.capability-does { margin: 0; padding-left: 1rem; display: grid; gap: var(--space-1); color: var(--color-body); font-size: var(--text-sm); line-height: 1.55; }
.capability-does li::marker { color: var(--color-muted); }
.capability-level { display: inline-block; padding: 0 var(--space-1); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; white-space: nowrap; vertical-align: .08em; }
.capability-level[data-level="local"] { color: var(--color-body); }
.capability-needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.capability-needs-label { color: var(--color-muted); font-size: var(--text-xs); }
.capability-need { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.625rem; max-width: 100%; padding: .125rem var(--space-2); border: 1px solid var(--color-rule-strong); border-radius: 999px; color: var(--color-body); font-size: var(--text-xs); overflow-wrap: anywhere; }
.capability-need svg { flex: none; width: .75rem; height: .75rem; color: var(--color-muted); }
.capability-need[data-connected="true"] { border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-rule)); color: var(--color-success); }
.capability-need[data-connected="true"][data-kind="registered"] { border-style: dashed; border-color: color-mix(in oklab, var(--color-info) 50%, var(--color-rule)); color: var(--color-info); }
.capability-need[data-connected="paused"] { border-style: dashed; color: var(--color-muted); }
.capability-need[data-connected="true"] svg { color: inherit; }
/* A registration Polo has reached reads connected; one whose latest request, refresh or sync failed reads failing. */
.capability-need[data-connected="true"][data-state="connected"] { border-style: solid; border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-rule)); color: var(--color-success); }
.capability-need[data-connected="failing"] { border-color: color-mix(in oklab, var(--color-error) 45%, var(--color-rule)); color: var(--color-error); }
.capability-need[data-connected="failing"] svg { color: inherit; }
.capability-need:hover { text-decoration: none; border-color: var(--color-muted); color: var(--color-ink); }
.capability-planned { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.capability-evidence { padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.capability-evidence > summary, .capability-built > summary { font-size: var(--text-sm); }
.capability-built[open] > summary { margin-bottom: var(--space-2); }
.capability-evidence-count { color: var(--color-muted); }
.capability-evidence-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.capability-evidence-list > li { display: grid; gap: var(--space-2); min-width: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.capability-evidence-list > li:first-child { padding-top: 0; border-top: 0; }
.capability-evidence-name { color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }
.capability-evidence-name strong { font-weight: 520; }
.capability-ids { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.capability-ids code { padding: .0625rem var(--space-1); border-radius: var(--radius-sm); background: var(--color-paper-3); color: var(--color-body); font: 400 var(--text-xs)/1.5 var(--font-mono); }
.capability-facts { margin: 0; display: grid; gap: var(--space-1); font-size: var(--text-xs); line-height: 1.55; }
.capability-facts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-2); }
.capability-facts dt { color: var(--color-muted); }
.capability-facts dd { margin: 0; color: var(--color-body); overflow-wrap: anywhere; }
@media (max-width: 1150px) {
  .capability-tile-row[data-group="maturity"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .capability-summary { gap: var(--space-3); }
  .capability-tile-row, .capability-tile-row[data-group="maturity"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .capability-tile-row[data-group="maturity"] > .capability-tile:last-child { grid-column: 1 / -1; }
  .capability-tile { padding: var(--space-3); font-size: var(--text-xs); }
  .capability-tile strong { font-size: var(--text-lg); }
  .capability-filters { gap: var(--space-3); }
  .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .capability-card { padding: var(--space-4); }
  .capability-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (pointer: coarse) {
  .capability-evidence > summary, .capability-built > summary { padding-block: var(--space-2); }
}

/* Task inspector timeline. */
.product-task-timeline .timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline-step { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0 var(--space-3); }
.timeline-step::before { content: ""; position: absolute; left: .84rem; top: 1.9rem; bottom: 0; width: 1px; background: var(--color-rule); }
.timeline-step:last-child::before { display: none; }
.timeline-marker { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--color-rule-strong); background: var(--color-paper-2); color: var(--color-muted); }
.timeline-marker svg { width: .8125rem; height: .8125rem; }
.timeline-step[data-outcome="failed"] .timeline-marker { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-soft); }
.timeline-step[data-outcome="verified"] .timeline-marker, .timeline-step[data-outcome="verify"] .timeline-marker { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-soft); }
.timeline-step[data-outcome="change"] .timeline-marker { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-soft); }
.timeline-step[data-outcome="edit"] .timeline-marker { color: var(--color-accent); border-color: var(--color-accent); }
.timeline-body { display: grid; gap: .125rem; min-width: 0; padding-top: .2rem; }
.timeline-body strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 520; line-height: 1.45; overflow-wrap: anywhere; }
.timeline-step[data-outcome="failed"] .timeline-body strong { color: var(--color-error); }
.timeline-body small { color: var(--color-muted); font-size: var(--text-xs); }
.timeline-more { justify-self: start; margin-top: var(--space-1); }

/* Tasks: status summary chips above the queue (the shared count chip above). The row keeps its height while the
   counts load so the filters below do not jump. */
.task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 1.875rem; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* Shared page chrome tweaks for the new pages. */
.page-head .controls .button.primary { min-height: 2.125rem; }
.product-incidents .metric-grid, .product-approvals .metric-grid { margin-bottom: var(--space-5); }

@media (max-width: 1150px) {
  .product-home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "assignment" "recent" "teammate"; }
  .product-home-grid:has(.assignment-panel[hidden]) { grid-template-areas: "recent" "teammate"; }
  .incidents-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .home-summary { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); }
  .home-tile { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .home-tile-figure { margin-top: 0; justify-content: flex-end; }
  .home-tile-figure strong { font-size: var(--text-lg); }
  .home-tile-note { grid-column: 1 / -1; }
  .attention-list { gap: var(--space-2); }
  .attention-card { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .attention-card > button { grid-column: 2; justify-self: start; min-height: 2.5rem; }
  .home-recent-row { padding-inline: var(--space-4); }
  .incident-source { grid-template-columns: minmax(0, 1fr); }
  .incident-source > .badge { justify-self: start; }
  .approval-list { padding: var(--space-3); }
  .approval-card { padding: var(--space-4); }
  .approval-request { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .approval-request dd + dt { margin-top: var(--space-2); }
  .approval-history-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--space-4); }
  .approval-history-row > .button { grid-column: 2; justify-self: start; }
}
@media (pointer: coarse) {
  .attention-card > button, .task-summary-chip, .capability-filters button, .capability-need { min-height: 2.5rem; }
  .approval-history-row > .button { min-height: 2.5rem; }
  .approval-why a { display: inline-block; padding-block: .625rem; }
}

/* Task reports: the report card, rendered Markdown, citations and the evidence row a citation reveals. */
.product-task-reports { scroll-margin-top: 1rem; }
.product-report-card .report-details[open] > :not(summary) { margin-top: var(--space-2); }
.report-content { display: grid; gap: var(--space-2); min-width: 0; }
.report-content > pre { margin: 0; max-height: 32rem; }
.report-markdown { display: grid; gap: var(--space-2); min-width: 0; color: var(--color-body); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.report-markdown :is(h5, h6) { margin: var(--space-1) 0 0; color: var(--color-ink); }
.report-markdown h5 { font-size: var(--text-body); font-weight: 600; }
.report-markdown h6 { font-size: var(--text-sm); font-weight: 600; }
.report-markdown p, .report-markdown blockquote, .report-markdown pre { margin: 0; }
.report-markdown :is(ul, ol) { margin: 0; padding-left: 1.25rem; display: grid; gap: .25rem; }
.report-markdown li > :is(ul, ol) { margin-top: .25rem; }
.report-markdown blockquote { padding: var(--space-1) var(--space-3); border-left: 2px solid var(--color-rule-strong); color: var(--color-muted); }
.report-markdown hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--color-rule); }
.report-markdown table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--text-xs); }
.report-markdown :is(th, td) { padding: .25rem var(--space-2); border: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.report-markdown th { background: var(--color-paper-2); color: var(--color-ink); font-weight: 560; }
.report-markdown code { padding: 0 .2em; border-radius: var(--radius-sm); background: var(--color-paper-3); font-size: .85em; }
.report-markdown pre { max-height: 24rem; }
.report-markdown pre code { padding: 0; background: var(--color-transparent); font-size: inherit; }
.report-link code { color: var(--color-muted); }
.report-citations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.report-citations li { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-body); }
.report-citations .report-citation { justify-self: start; min-height: 1.75rem; padding-inline: var(--space-2); font-size: var(--text-xs); text-align: left; white-space: normal; overflow-wrap: anywhere; }
.timeline-report { justify-self: start; min-height: 1.5rem; margin-top: .125rem; padding-inline: var(--space-1); font-size: var(--text-xs); }
.product-evidence { scroll-margin-block: 5rem; border-radius: var(--radius-md); }
.product-evidence:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.product-evidence.evidence-target { animation: evidence-target 2.4s ease-out; }
@keyframes evidence-target {
  from { background: var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft); }
  to { background: var(--color-transparent); box-shadow: none; }
}

/* Knowledge: a runbook names the service it covers. */
.product-knowledge-service { color: var(--color-accent); background: var(--color-accent-soft); text-transform: none; }

/* Agents: one card per agent that answers, in order, what it is for, what it can do, which changes wait for an approval
   and what it never does (the rules Polo enforces apart from the instructions it is only told), then its model and limits. */
.agent-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: var(--space-4); }
.agent-grid > li:not(.agent-card) { grid-column: 1 / -1; border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-lg); }
.agent-grid .empty-state { max-width: 44rem; margin: 0 auto; padding: var(--space-7) var(--space-5); text-align: center; }
.agent-card { display: grid; gap: var(--space-5); align-content: start; min-width: 0; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.agent-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
.agent-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-brand); }
.agent-mark svg { width: 1rem; height: 1rem; }
.agent-name { display: grid; gap: var(--space-1); min-width: 0; }
.agent-name h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.agent-meta { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.agent-specialty { color: var(--color-accent); }
.agent-head > button { min-height: 2rem; padding-inline: var(--space-3); font-size: var(--text-sm); }
.agent-role { margin: calc(-1 * var(--space-2)) 0 0; color: var(--color-ink); font-size: var(--text-body); line-height: 1.6; overflow-wrap: anywhere; }
.agent-instructions { margin-top: calc(-1 * var(--space-4)); }
.agent-instructions > summary { font-size: var(--text-sm); }
.agent-instructions > p { margin: var(--space-2) 0 0; color: var(--color-body); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.agent-section { display: grid; gap: var(--space-2); min-width: 0; }
.agent-section h3 { color: var(--color-muted); font: 500 var(--text-xs)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.agent-tools, .agent-approvals, .agent-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.agent-tools li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-body); line-height: 1.5; }
.agent-tools strong { color: var(--color-muted); font-weight: 500; }
.agent-tools span { color: var(--color-body); overflow-wrap: anywhere; }
.agent-approvals li { position: relative; padding-left: var(--space-4); color: var(--color-body); font-size: var(--text-body); line-height: 1.5; overflow-wrap: anywhere; }
.agent-approvals li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-warning); }
.agent-none { margin: 0; color: var(--color-muted); font-size: var(--text-body); line-height: 1.6; }
.agent-section-note { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.agent-rules + .agent-section-note { margin-top: var(--space-2); }
.agent-rule { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: var(--space-2); color: var(--color-body); font-size: var(--text-body); line-height: 1.5; }
.agent-rule > span { overflow-wrap: anywhere; }
.agent-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.agent-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: .2rem .55rem; border: 1px solid var(--color-rule-strong); border-radius: 999px; color: var(--color-body); font-size: var(--text-sm); }
.agent-chip svg { width: .8rem; height: .8rem; color: var(--color-muted); }
.agent-chip[data-kind="read_only"] { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-soft); }
.agent-chip[data-kind="read_only"] svg { color: currentColor; }
.agent-chip[data-kind="approval"] { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-soft); }
.agent-chip[data-kind="approval"] svg { color: currentColor; }
.agent-abilities { display: grid; gap: var(--space-4); }
.agent-abilities[open] > summary { margin-bottom: var(--space-1); }
.agent-limits + .agent-abilities { margin-top: calc(-1 * var(--space-3)); }
.agent-rule svg { width: .875rem; height: .875rem; margin-top: .2em; color: var(--color-muted); }
.agent-rule[data-kind="read_only"], .agent-rule[data-kind="read_only"] svg { color: var(--color-success); }
/* Forbidden actions are prompt instructions, not enforced limits: lighter than the rules Polo enforces. */
.agent-rule[data-kind="instruction"] { color: var(--color-muted); }
.agent-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.agent-facts > div, .agent-limits dl > div { display: grid; align-content: start; gap: .125rem; min-width: 0; }
.agent-facts dt, .agent-limits dt { color: var(--color-muted); font-size: var(--text-xs); }
.agent-facts dd, .agent-limits dd { margin: 0; color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.agent-facts dd[data-state="unavailable"] { color: var(--color-warning); }
.agent-limits { margin-top: calc(-1 * var(--space-3)); }
.agent-limits > summary { font-size: var(--text-sm); }
.agent-limits dl { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; }
.agent-limits dd { color: var(--color-body); }

/* Agent builder inside the profile dialog: a template row, then one titled section per decision (about, model and budget,
   what it never does, the tools it may use). */
.agent-builder-section { display: grid; gap: var(--space-4); min-width: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-rule); }
.agent-builder-section > h3 { color: var(--color-ink); font-size: var(--text-md); font-weight: 600; }
.agent-builder-section > h3 + .field-help { margin-top: calc(-1 * var(--space-2)); }
.agent-builder-section > label + .field-help, .agent-builder-section > .form-columns + .field-help { margin-top: calc(-1 * var(--space-2)); }
.agent-templates, .agent-guardrails-fields { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.agent-templates { background: var(--color-paper); }
.agent-templates legend, .agent-guardrails-fields legend { padding-inline: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); }
.agent-templates > .field-help, .agent-guardrails-fields > .field-help { margin-top: calc(-1 * var(--space-1)); }
.agent-template-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.agent-template-row button { justify-content: flex-start; align-items: flex-start; gap: var(--space-2); min-height: 0; padding: var(--space-2) var(--space-3); text-align: left; white-space: normal; font-weight: 500; background: var(--color-paper-2); }
.agent-template-row button > svg { width: .875rem; height: .875rem; flex: 0 0 auto; margin-top: .2rem; color: var(--color-muted); }
.agent-template-row button > span { display: grid; gap: .125rem; min-width: 0; color: var(--color-ink); }
.agent-template-row button small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; line-height: 1.5; }
.agent-template-row button[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-accent-soft); }
.agent-template-row button[aria-pressed="true"] > svg { color: var(--color-brand); }
.agent-template-row button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.agent-guardrails-fields .inline-checkbox { font-weight: 500; }
.agent-guardrails-fields textarea, #product-profile-form textarea[name="instructions"] { resize: vertical; }
.product-grants label[data-read-only-locked] { color: var(--color-muted); }
.product-grants label[data-read-only-locked] input { cursor: not-allowed; }

@media (max-width: 760px) {
  .agent-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .agent-card { gap: var(--space-4); padding: var(--space-4); }
  .agent-head { grid-template-columns: auto minmax(0, 1fr); }
  .agent-head > button { grid-column: 2; justify-self: start; }
  .agent-role { margin-top: 0; }
  .agent-instructions { margin-top: calc(-1 * var(--space-3)); }
  .agent-facts { grid-template-columns: minmax(0, 1fr); }
  .agent-tools li { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
  .agent-template-row { grid-template-columns: minmax(0, 1fr); }
  .agent-templates, .agent-guardrails-fields { padding-inline: var(--space-3); }
}
@media (pointer: coarse) {
  .agent-head > button { min-height: 2.5rem; }
  .agent-instructions > summary, .agent-limits > summary { line-height: 2.5rem; }
}

/* Approval rules (Settings): one rule per environment row, then the standing approvals; both tables scroll on narrow
   screens instead of widening the page. The approval notes shared with the change card come first. */
.approval-gate { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); }
.approval-gate[data-gate="role"] { color: var(--color-body); }
/* The change card's "Approved by a standing approval: …" line (product-review.js renders it from preauthorizedText). */
.approval-preauthorized { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-body); font-size: var(--text-sm); overflow-wrap: anywhere; }
#product-approval-policy-panel { min-width: 0; }
/* Positioned so the header's visually hidden label is clipped with the table instead of widening the page. */
.approval-policy-scroll { position: relative; overflow-x: auto; }
.approval-policy-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--text-sm); }
.approval-policy-table th, .approval-policy-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-rule); text-align: left; vertical-align: middle; }
.approval-policy-table th { border-top: 0; color: var(--color-muted); font-weight: 560; line-height: 1.35; vertical-align: bottom; }
.approval-policy-table input[type="text"], .approval-policy-table input[type="number"], .approval-policy-table select { width: 100%; min-width: 7rem; min-height: 2.5rem; font-size: var(--text-sm); }
.approval-policy-table input[type="number"] { max-width: 8rem; }
.approval-policy-table input[type="checkbox"] { width: 1.125rem; height: 1.125rem; min-height: 1.125rem; margin: 0; accent-color: var(--color-primary); }
.approval-policy-table .approval-policy-flag { min-width: 12rem; text-align: center; }
.approval-policy-table select[name="approver_roles"] { min-width: 12.5rem; }
.approval-policy-table button { min-height: 2.5rem; padding-inline: var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
.approval-policy-table .empty-state { padding: var(--space-3) 0; }
.approval-policy-catchall { color: var(--color-ink); font-weight: 560; white-space: nowrap; }
@media (max-width: 760px) {
  .approval-policy-table th, .approval-policy-table td { padding-inline: var(--space-2); }
  .approval-policy-table input[type="text"], .approval-policy-table input[type="number"], .approval-policy-table select { min-width: 6rem; }
}

/* Team (Settings): each member's or invitation's detail line under its name. */
.product-team-detail { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.account-role-help { margin-top: var(--space-2); max-width: 64ch; }

/* Standing approvals (Settings → Approval rules). The table reuses the approval-rules table and its scroll container; the
   add form wraps its fields into as many columns as fit. */
.preauthorizations-intro, .preauthorization-empty { max-width: 80ch; }
.preauthorization-empty { padding: var(--space-2) 0; }
.preauthorization-table td { vertical-align: top; overflow-wrap: anywhere; }
.preauthorization-table td small { display: block; margin-top: .125rem; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.45; }
.preauthorization-table td.preauthorization-change { min-width: 10rem; }
.preauthorization-table td.preauthorization-arguments { min-width: 13rem; max-width: 22rem; }
.preauthorization-table td.preauthorization-reason { min-width: 10rem; max-width: 18rem; }
.preauthorization-table td.preauthorization-expiry { min-width: 7.5rem; }
.preauthorization-table td.preauthorization-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.preauthorization-table td.preauthorization-environment { white-space: nowrap; }
.preauthorization-table details { margin-top: var(--space-1); }
.preauthorization-table details > summary { cursor: pointer; color: var(--color-muted); }
.preauthorization-table pre { margin: var(--space-1) 0 0; padding: var(--space-2); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); font: var(--text-xs)/1.45 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; }
.preauthorization-table .preauthorization-state { margin-left: var(--space-2); }
.preauthorization-table .preauthorization-state:is([data-state="expired"], [data-state="inactive"]) { color: var(--color-muted); background: var(--color-paper-3); }
.preauthorization-table .preauthorization-state[data-state="limit_reached"] { color: var(--color-warning); background: var(--color-warning-soft); }
.preauthorization-table tr[data-state="expired"] > td:not(.preauthorization-actions), .preauthorization-table tr[data-state="inactive"] > td:not(.preauthorization-actions) { color: var(--color-muted); }
.preauthorization-form { padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.preauthorization-form h3 { color: var(--color-ink); font-size: var(--text-md); font-weight: 600; }
.preauthorization-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
.preauthorization-form select, .preauthorization-form input { width: 100%; min-width: 0; }
.preauthorization-form textarea { width: 100%; min-height: 12rem; resize: vertical; font: var(--text-sm)/1.5 var(--font-mono); }
.preauthorization-builder { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: var(--space-3); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-md); }
.preauthorization-builder legend { padding-inline: var(--space-1); color: var(--color-ink); font-size: var(--text-sm); font-weight: 560; }
.preauthorization-builder > button { justify-self: start; }
@media (max-width: 760px) {
  .preauthorization-form { padding: var(--space-3); }
  .preauthorization-table td.preauthorization-arguments { min-width: 12rem; }
}

/* The setup checklist (Home until it is complete; in full on "What Polo can do") and the connection guide dialog it
   opens. One row per step with a numbered mark (green once done), the live detail and the action that completes it;
   Home's compact version explains only the next step. Rendered by product-pilot.js. */
.pilot-checklist { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.pilot-checklist[data-complete="true"] { border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-rule)); }
.pilot-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2) var(--space-3); }
.pilot-head h2 { font-size: var(--text-md); font-weight: 600; }
.pilot-head p { grid-column: 1 / -1; max-width: 72ch; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.pilot-progress { color: var(--color-warning); font-size: var(--text-sm); font-weight: 560; font-variant-numeric: tabular-nums; }
.pilot-progress[data-state="done"] { color: var(--color-success); }
.pilot-steps { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; }
.pilot-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark body actions"; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-rule); }
.pilot-step:first-child { border-top: 0; }
.pilot-mark { grid-area: mark; align-self: start; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-rule-strong); border-radius: 50%; background: var(--color-paper); color: var(--color-muted); font: 500 var(--text-xs)/1 var(--font-mono); }
.pilot-mark svg { width: .8125rem; height: .8125rem; }
.pilot-step[data-state="done"] .pilot-mark { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.pilot-step[data-state="needs"] .pilot-mark { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning); }
.pilot-body { grid-area: body; display: grid; gap: .125rem; min-width: 0; }
.pilot-body strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 560; line-height: 1.4; }
.pilot-body small { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; overflow-wrap: anywhere; }
.pilot-step[data-state="done"] .pilot-body small { color: var(--color-body); }
.pilot-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); max-width: 26rem; }
.pilot-actions:empty { display: none; }
.pilot-actions > a.button, .pilot-actions > button { min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--text-sm); font-weight: 540; }
.pilot-review { font-size: var(--text-sm); font-weight: 540; }
.pilot-step[data-state="unknown"] .pilot-mark { border-style: dashed; }
.pilot-compact .pilot-step { padding-block: var(--space-2); }
.pilot-compact .pilot-step:not([data-state="done"]) .pilot-body strong { color: var(--color-ink); }
.pilot-compact .pilot-step[data-state="done"] .pilot-body strong { color: var(--color-muted); font-weight: 450; }
a.capability-badge { cursor: pointer; }
a.capability-badge:hover { text-decoration: none; border-color: var(--color-warning); color: var(--color-ink); }
.capability-need-names { color: var(--color-body); font-weight: 500; }
.capability-need[data-connected="true"] .capability-need-names { color: inherit; }

/* The connection guide dialog: lead, the areas it makes ready, copyable blocks, then the hand-over to the form. */
.pilot-wizard { width: min(46rem, calc(100% - 1.5rem)); }
.pilot-wizard .panel-body { gap: var(--space-4); }
.pilot-lead { color: var(--color-body); font-size: var(--text-body); line-height: 1.6; }
.pilot-unlocks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pilot-chip { display: inline-flex; align-items: center; min-height: 1.625rem; padding: .125rem var(--space-2); border: 1px solid color-mix(in oklab, var(--color-success) 45%, var(--color-rule)); border-radius: 999px; color: var(--color-success); font-size: var(--text-xs); }
.pilot-block { display: grid; gap: var(--space-2); min-width: 0; }
.pilot-block h3 { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.pilot-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pilot-block-head h3 { flex: 1 1 auto; }
.pilot-block-head .status { font-size: var(--text-xs); }
.pilot-block-head .text-button { min-height: 1.75rem; padding-inline: var(--space-2); font-size: var(--text-xs); }
.pilot-code { margin: 0; max-height: 20rem; font-size: var(--text-xs); line-height: 1.5; }
.pilot-block ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); color: var(--color-body); font-size: var(--text-sm); line-height: 1.55; }
.pilot-block ul li::marker { color: var(--color-muted); }
.pilot-wizard .actions { position: sticky; bottom: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); }

@media (max-width: 760px) {
  .pilot-checklist { padding: var(--space-4); }
  .pilot-step { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark body" "mark actions"; row-gap: var(--space-2); }
  .pilot-actions { justify-content: flex-start; max-width: none; }
}
@media (pointer: coarse) {
  .pilot-actions > a.button, .pilot-actions > button, .pilot-block-head .text-button { min-height: 2.5rem; }
}

/* Spend: the unpriced-usage tile joins the four cost tiles in one row on wide screens; below 1051px the grid keeps its
   two columns. The task inspector's cost headline and the outcome counts beside a task's status. Rendered by
   product-spend.js and product-review.js. */
@media (min-width: 1051px) {
  .product-spend-metrics:has(> .metric:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.task-cost-headline { margin: 0 0 var(--space-2); color: var(--color-ink); font: 500 var(--text-sm)/1.45 var(--font-mono); overflow-wrap: anywhere; }
.product-task-outcomes { font-size: .75rem; overflow-wrap: anywhere; }
.incident-story > summary { font-size: var(--text-sm); }
.incident-story[open] > summary { margin-bottom: var(--space-2); }
/* Usage & cost: one compact row per task, its "Open task" button beside the figures instead of under them. */
#product-spend-tasks > .product-spend-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); row-gap: var(--space-1); align-items: center; }
#product-spend-tasks > .product-spend-row > :not(button) { grid-column: 1; }
#product-spend-tasks > .product-spend-row > button { grid-column: 2; grid-row: 1 / span 4; justify-self: end; }
/* Connections: a denser catalog, four tiles a row on wide screens; descriptions stay whole. */
.connection-catalog .connection-card { gap: var(--space-2); padding: var(--space-4); }
.connection-catalog .connection-card p { line-height: 1.5; }
.connection-catalog .connection-group { margin-bottom: var(--space-5); }
@media (min-width: 1280px) { .connection-catalog .connection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }