/* Simple Modern Design Language — DevOps.

   ONE stylesheet shared in spirit by every product: calm and white-dominant,
   the system SF stack, hairline borders, gentle shadows, generous whitespace,
   and exactly ONE seat colour per product (DevOps blue). The token block below is
   identical in both product repositories apart from that accent ramp — if you
   change a value here, change it there.

   Light and dark are both first class: the palette follows the reader's system
   setting via prefers-color-scheme, and an explicit data-theme on <html> wins
   in either direction. Every token is defined on bare :root first, so nothing
   depends on a media query having matched. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;

  /* surfaces */
  --canvas: #f3f5f7;
  --sunken: #f3f5f7;
  --card: #ffffff;
  --side: #ffffff;
  --field: #ffffff;

  /* hairlines — the only borders this language draws */
  --hair: #dfe3e8;
  --hair-soft: #e8ebef;
  --ring: var(--accent);

  /* ink */
  --ink: #111418;
  --ink-2: #3d4550;
  /* Same failing grey as --ink-3 carried under a second name: the token was
     changed and the pages did not, because most quiet text reads --muted.
     Kept in step deliberately — two names for one ink must not drift. */
  --muted: #616a7b;

  /* interaction */
  --hover: #f3f5f7;
  --selected: var(--accent-soft);
  --btn2: #f8f9fb;

  /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef1f4;
  /* Measured against every light surface this token is painted on: at #6b7488 it
     failed WCAG AA (4.5:1) on five of six — surface-2 4.19, surface-3 3.93,
     good-soft 4.17, bad-soft 4.10, warn-soft 4.27. #616a7b clears all of them,
     worst case 4.57 on surface-3. Dark mode already passes and is untouched.
     Changed in all six siblings together: the family's own test asserts that
     nothing but the accent differs between products. */
  --ink-3: #616a7b;

  /* status — the same three hues in both products, used sparingly */
  --good: #08764f;  --good-soft: #e6f4ee;
  --bad: #b3261e;   --bad-soft: #fbeae8;
  --warn: #8a5a06;  --warn-soft: #fdf3e3;

  /* THE ONE THING A PRODUCT CHANGES — this application's seat colour, in the
     six variants the design language allows. tile fills shapes 16px and up;
     ink is coloured TEXT on light and clears 4.5:1; deep is that ink taken
     down until it clears 4.5:1 on soft, which is what a status pill needs;
     soft is a light tint of this same hue for selected rows; sidebar is the
     deep cut that paints the whole navigation rail, where white text clears
     14:1; dark is this hue lifted for a near-black surface — never a
     different hue.
     Simple Modern DevOps is blue. */
  --accent: #2563EB;
  --accent-ink: #2563EB;
  --accent-deep: #1F5CE4;
  --accent-soft: #DCE8FF;
  --accent-quiet: rgba(37, 99, 235, 0.10);
  --on-accent: #ffffff;
  /* The rail is the room: the same deep cut on a light canvas and a dark one,
     with the seat lit in the lifted variant because the rail IS near-black. */
  --app-sidebar: #17294C;
  --app-dark: #699AFC;
  --live: var(--accent-deep);
  --live-soft: var(--accent-soft);

  /* elevation, radii, type */
  --shadow-card: 0 0 0 1px var(--hair);
  --shadow-pop: 0 8px 24px rgba(17,19,24,.08);
  /* The shell declares these too, and loads after this file — so declaring a
     different value here meant this stylesheet's geometry never applied. Same
     values, stated once per product so the token is visible where it is used. */
  --radius: 8px;
  --radius-sm: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, "Helvetica Neue", sans-serif;

  /* v6 (DESIGN.md §3) */
  --line: #dfe3e8;
  --line-strong: #c3cad3;
  --line-soft: #e8ebef;
  --mark-quiet: #c8cfd8;
  --inset: #f3f5f7;
  --ink-4: #838c98;
  --ok: #08764f;
  --ok-soft: #e6f4ee;
  --danger: #b3261e;
  --danger-soft: #fbeae8;
  --info: #476780;
  --info-soft: #e9eff4;
  --off: #838c98;
  --off-soft: #eef1f4;
  --scrim: rgba(45,49,47,.40);
  --shadow-dlg: 0 18px 48px rgba(17,19,24,.14);
  --radius-lg: 10px;
  --radius-badge: 4px;
  --row: 44px;
  --row-dense: 40px;
  --row-two: 48px;
  --ctl: 32px;
  --ctl-dense: 28px;
  --ctl-lg: 36px;
  --w-fly-s: 400px;
  --w-fly-m: 480px;
  --w-fly-l: 640px;
  --pane: 380px;
  --pane-head: 44px;
  --pane-foot: 36px;
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fly: 180ms;
  --dur-scrim: 120ms;
  --dur-exit: 120ms;
  --dur-swap: 90ms;
  --dur-toast: 160ms;
  --z-menu: 900;
  --z-fly: 1000;
  --z-confirm: 1050;
  --z-toast: 1100;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #0c1016;
    --sunken: #10151d;
    --card: #151a23;
    --side: #151a23;
    --field: #10151d;

    --hair: #1f2630;
    --hair-soft: #1a2029;
    --ring: var(--accent);

    --ink: #edf0f6;
    --ink-2: #ccd4e2;
    --muted: #98a2b6;

    --hover: #1b212b;
    --selected: var(--accent-soft);
    --btn2: #1b212b;

    /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */
    --surface: #151a23;
    --surface-2: #1b212b;
    --surface-3: #222937;
    --ink-3: #98a2b6;

    --good: #5fc88c;  --good-soft: #12251c;
    --bad: #fc6474;   --bad-soft: #2c1417;
    --warn: #e3b341;  --warn-soft: #2a2311;

    /* The accent lifts for a dark canvas — the same hue, not a different one.
       Leaving --accent at its light value made every filled control muddy. */
    --accent: #699AFC;
    --accent-ink: #699AFC;
    --accent-deep: var(--accent-ink);
    --accent-soft: #14203C;
    --accent-quiet: rgba(105, 154, 252, 0.16);
    --on-accent: #17294C;
    --app-sidebar: #17294C;
    --app-dark: #699AFC;

    --shadow-card: 0 0 0 1px var(--hair);
    --shadow-pop: 0 8px 24px rgba(0,0,0,.45);
  
  /* v6 (DESIGN.md §3) */
  --line: #1f2630;
  --line-strong: #2c3542;
  --line-soft: #1a2029;
  --mark-quiet: #39424f;
  --inset: #10151d;
  --ink-4: #6b7688;
  --ok: #5fc88c;
  --ok-soft: #12251c;
  --danger: #fc6474;
  --danger-soft: #2c1417;
  --info: #8fa9be;
  --info-soft: #18222b;
  --off: #6b7688;
  --off-soft: #1b212b;
  --scrim: rgba(0,0,0,.55);
  --shadow-dlg: 0 18px 48px rgba(0,0,0,.6);
}
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0c1016;
  --sunken: #10151d;
  --card: #151a23;
  --side: #151a23;
  --field: #10151d;

  --hair: #1f2630;
  --hair-soft: #1a2029;
  --ring: var(--accent);

  --ink: #edf0f6;
  --ink-2: #ccd4e2;
  --muted: #98a2b6;

  --hover: #1b212b;
  --selected: var(--accent-soft);
  --btn2: #1b212b;

  /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */
  --surface: #151a23;
  --surface-2: #1b212b;
  --surface-3: #222937;
  --ink-3: #98a2b6;

  --good: #5fc88c;  --good-soft: #12251c;
  --bad: #fc6474;   --bad-soft: #2c1417;
  --warn: #e3b341;  --warn-soft: #2a2311;

  /* The accent lifts for a dark canvas — the same hue, not a different one.
     Leaving --accent at its light value made every filled control muddy. */
  --accent: #699AFC;
  --accent-ink: #699AFC;
  --accent-deep: var(--accent-ink);
  --accent-soft: #14203C;
  --accent-quiet: rgba(105, 154, 252, 0.16);
  --on-accent: #17294C;
  --app-sidebar: #17294C;
  --app-dark: #699AFC;

  --shadow-card: 0 0 0 1px var(--hair);
  --shadow-pop: 0 8px 24px rgba(0,0,0,.45);

  /* v6 (DESIGN.md §3) */
  --line: #1f2630;
  --line-strong: #2c3542;
  --line-soft: #1a2029;
  --mark-quiet: #39424f;
  --inset: #10151d;
  --ink-4: #6b7688;
  --ok: #5fc88c;
  --ok-soft: #12251c;
  --danger: #fc6474;
  --danger-soft: #2c1417;
  --info: #8fa9be;
  --info-soft: #18222b;
  --off: #6b7688;
  --off-soft: #1b212b;
  --scrim: rgba(0,0,0,.55);
  --shadow-dlg: 0 18px 48px rgba(0,0,0,.6);
}

html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: var(--smdl-text-body); line-height: var(--smdl-leading-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: normal; font-weight: var(--smdl-weight-semibold); line-height: var(--smdl-leading-heading); margin: 0; }
h1 { font-size: var(--smdl-text-heading); }
h2, h3, h4 { font-size: var(--smdl-text-section); }
b, strong { font-weight: var(--smdl-weight-semibold); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
code, .mono { font-family: var(--mono); font-size: var(--smdl-text-meta); }
code { background: var(--selected); border-radius: 5px; padding: 1px 5px; }

/* ---------------------------------------------------------------- shell -- */

/* The shell grid, corner switcher, top bar, sidebar and canvas all come from
   smdl-shell.css — the SAME file CORE serves, so the family is one chrome by
   construction. This stylesheet keeps only what the shell does not carry: the
   profile popover, the signed-out header, and this product's page furniture. */

.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--accent-quiet); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 680; letter-spacing: 0;
}

/* profile popover — mirrors CORE's, on this stylesheet's tokens */
.user-menu { position: relative; }
.user-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 260px; padding: 8px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-pop);
  z-index: 60;
}
.user-pop[hidden] { display: none; }
.user-pop-id { display: flex; align-items: center; gap: 11px; padding: 10px 10px 14px; }
.user-pop-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-pop-who b { font-size: var(--smdl-text-body); }
.user-pop-who small { color: var(--ink-3); font-size: var(--smdl-text-meta); overflow: hidden; text-overflow: ellipsis; }
.user-pop-appearance { padding: 2px 10px 16px; }
.user-pop-label { display: block; color: var(--ink-3); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); margin-bottom: 8px; }
/* The same segmented control as everywhere else — see .smdl-seg in the shared
   shell for why the radii are concentric and why the chosen segment is lifted
   rather than filled with the accent. This carried its own numbers (8 and 6,
   against CORE's 999 and 999 for the same control), which is how one product's
   theme switcher came to look like a different component from another's. */
.theme-seg {
  display: flex; width: 100%; padding: 3px; gap: 2px;
  border: 0; box-shadow: inset 0 0 0 1px var(--hair);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.theme-seg button {
  flex: 1; height: 28px; padding: 0; border: 0; border-radius: var(--radius-badge, 4px);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; color: var(--ink-2); font-family: var(--sans);
  font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); line-height: var(--smdl-leading-body); cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.theme-seg button:hover { color: var(--ink); }
.theme-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.theme-seg button[aria-pressed="true"] {
  background: var(--card); color: var(--ink); font-weight: var(--smdl-weight-semibold);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(16, 24, 40, .06);
}
.theme-seg button .ic { width: 15px; height: 15px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .theme-seg button { transition: none; } }
.user-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; font-family: var(--sans); font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium);
  color: var(--ink-2); padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
}
.user-pop-item .ic { font-size: 16px; opacity: 0.7; }
.user-pop-item:hover { background: var(--surface-2); color: var(--ink); }
.user-pop-item.danger-item:hover { color: var(--bad); background: var(--bad-soft); }
.user-pop form { margin: 0; }

/* the signed-out header (landing and error surfaces) */
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: var(--smdl-weight-semibold); letter-spacing: normal; color: var(--ink);
  padding: 5px 8px; border-radius: var(--radius-sm);
}
.brand:hover { background: var(--hover); }
.mark { width: 24px; height: 24px; flex: none; }
.plain-actions { margin-left: auto; display: flex; gap: 8px; }
.smdl-live-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* the page inside the shell canvas */
.page { max-width: 1180px; margin: 0 auto; padding: 0 4px 64px; }

/* A create or edit form is a single column of fields, and 760px is where that
   column stays comfortable to fill in -- a 1180px-wide input for a 200-character
   title helps nobody. The cap itself was right and was already in use, as an
   inline style repeated across ten templates. What was wrong is WHERE it sat:
   hard against the left of the 1180px measure, with 400px of nothing beside it
   on pages whose only content is that one card. It is centred in the measure
   now, and named, so the next form does not have to rediscover the number. */
.formpage { max-width: 760px; margin-inline: auto; }

/* --------------------------------------------------------------- pieces -- */
.crumbs { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: var(--smdl-text-meta);
  margin-bottom: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { opacity: .5; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 20px; }
.card + .card { margin-top: 16px; }
.card > h2 { font-size: var(--smdl-text-section); font-weight: var(--smdl-weight-semibold); }
.card > h2 + .cardsub { color: var(--muted); font-size: var(--smdl-text-meta); margin-top: 2px; }
.cardhead { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.cardhead h2 { font-size: var(--smdl-text-section); font-weight: var(--smdl-weight-semibold); }
/* Any h2 in a card is a card heading. Without this, one nested inside an
   intro block fell through to the browser's 32px default. */
.card h2 { font-size: var(--smdl-text-section); font-weight: var(--smdl-weight-semibold); }
.cardhead .actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.environment-release-label { color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); }
.environment-release-value { font-size: var(--smdl-text-body); font-weight: var(--smdl-weight-semibold); margin-top: 4px; overflow-wrap: anywhere; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* Design law: boxes that share a grid are spaced by the grid alone. The
   stacked-card margin above would knock side-by-side cards off level. */
.grid > .card { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.kpi { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 15px 16px; }
.kpi .n { font-size: var(--smdl-text-metric); line-height: var(--smdl-leading-heading); font-weight: var(--smdl-weight-semibold); letter-spacing: normal; }
.kpi .k { color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); margin-top: 2px; }

/* A BADGE, NOT A PILL. DevOps calls its status mark .pill rather than .chip,
   and it was the same 999px capsule at 600 weight -- the one fully round thing
   left on a page whose cards are 8px and whose controls are 6px. Same badge
   the rest of the family wears now: the shared badge radius, a shorter box,
   and the weight down to 500, because the tint carries the status. */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-badge); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); letter-spacing: normal;
  background: var(--selected); color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.live { background: var(--live-soft); color: var(--live); }
.pill.live::before { animation: pulse 1.4s ease-in-out infinite; }
.pill.wait { background: var(--selected); color: var(--muted); }
.pill.muted { background: var(--selected); color: var(--muted); }
.pill.plain::before { display: none; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.tag { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: var(--radius-badge, 4px);
  background: var(--selected); color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium);
  white-space: nowrap; }
.tag.lock { background: var(--accent-soft); color: var(--accent-deep); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--smdl-control-height); height: auto; padding: var(--smdl-control-pad) 13px; border: 1px solid var(--hair);
  border-radius: var(--ctl-radius, 9px); background: var(--card); color: var(--ink);
  font-family: var(--sans); font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-control);
  cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
/* A filled control carries text, so it takes the deeper step of the hue:
   the tile itself clears 4.5:1 against white in only four of the six
   products. --accent stays the graphical value. */
.btn-primary { background: var(--accent-deep); border-color: transparent; color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-deep); filter: brightness(1.06); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--hover); color: var(--ink); }
.btn-danger { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.btn-sm { min-height: var(--smdl-control-small); height: auto; padding: 6px 10px; font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px;
  border-radius: var(--radius-sm); font-size: var(--smdl-text-body); margin-bottom: 16px;
  border: 1px solid var(--hair); }
.banner.ok { background: var(--good-soft); border-color: transparent; color: var(--good); }
.banner.error { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.banner.info { background: var(--accent-quiet); border-color: transparent; color: var(--accent-deep); }
/* A blocking alert rendered identically to the informational notes beside it,
   so the one sentence that stops the page read as another aside. */
.banner-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

.tablewrap {
  width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
  margin: 0; padding: 0; border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch;
}
.tablewrap > table { min-width: 760px; }
/* The one table shape the family shares. DevOps had none of it: 29 bare
   tables, and not one `th scope` in 103 headers. */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--smdl-text-body); }
table.list th {
  text-align: left; font-size: var(--smdl-text-meta); text-transform: none; letter-spacing: normal;
  color: var(--muted); font-weight: var(--smdl-weight-medium); padding: 10px 12px;
  border-bottom: 1px solid var(--hair-soft); white-space: nowrap;
}
table.list td { padding: 12px 12px; border-top: 0; border-bottom: 1px solid var(--hair-soft);
  vertical-align: middle; }
table.list th:first-child, table.list td:first-child { padding-left: 12px; }
table.list th:last-child, table.list td:last-child { padding-right: 12px; }
table.list tbody tr > td:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
table.list tbody tr > td:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
table.list tr:last-child td { border-bottom: 0; }
table.list .ref { font-family: var(--mono); font-size: var(--smdl-text-meta); color: var(--muted);
  white-space: nowrap; }
table.list .subject { font-weight: var(--smdl-weight-medium); color: var(--ink); }
table.list .num { text-align: right; font-variant-numeric: tabular-nums; }
table.list .when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablewrap .rowmain, .tablewrap .rowsub { min-width: 0; overflow-wrap: anywhere; }
.tablewrap form { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--smdl-text-body); }
thead th { text-align: left; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); letter-spacing: normal;
  text-transform: none; color: var(--muted); padding: 0 12px 8px 0; white-space: nowrap; }
tbody td { padding: 12px 12px 12px 0; border-top: 1px solid var(--hair-soft); vertical-align: middle; }
tbody tr:hover td { background: color-mix(in srgb, var(--hover) 55%, transparent); }
tbody td:last-child, thead th:last-child { padding-right: 0; }
td .who2 { color: var(--muted); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rowmain { font-weight: var(--smdl-weight-semibold); }
.rowsub { color: var(--muted); font-size: var(--smdl-text-meta); margin-top: 1px; }
/* A row's edit panel, collapsed: it belongs to the row above it, so it
   carries no top border of its own. */
.editrow > td { border-top: 0; padding-top: 0; }
.editrow .editpanel summary { font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); }
.nowrap { white-space: nowrap; }
/* Used as text classes across the templates with no colour rule anywhere, so
   they rendered at full ink and the inline style= restatements piled up. */
.muted, .quiet { color: var(--muted); }
.sub, .hint { color: var(--muted); font-size: var(--smdl-text-meta); }
.note { border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--smdl-text-body);
  background: var(--selected); color: var(--ink-2); }
.note-warn { background: var(--warn-soft); color: var(--warn); }

/* A delivery list used to stop at its LIMIT with nothing admitting there was
   more, so the hundred-and-first record simply stopped existing. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 14px; }
.pager-count { color: var(--muted); font-size: var(--smdl-text-meta); }
.pager-links { display: flex; gap: 8px; }
.pager .btn.is-disabled { opacity: .5; pointer-events: none; }

/* Left, h2, one inset — the shape the other five products share. This was
   centred with an h3, so a DevOps empty state read as a different product's. */
.empty { text-align: left; padding: 34px 20px; color: var(--muted); }
.card:not(.card-flush) > .empty { padding: 14px 0 0; }
.empty h2, .empty h3 { font-size: var(--smdl-text-section); color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 60ch; margin: 0 0 16px; }
.empty p + p { margin-top: 12px; }

.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px 20px; }
.meta .k { color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); text-transform: none;
  letter-spacing: normal; }
.meta .v { font-size: var(--smdl-text-body); margin-top: 3px; word-break: break-word; }

/* run steps */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair-soft); }
.step:first-child { border-top: 0; }
.step .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none;
  background: var(--muted); opacity: .4; }
.step.good .dot { background: var(--good); opacity: 1; }
.step.bad .dot { background: var(--bad); opacity: 1; }
.step.live .dot { background: var(--live); opacity: 1; animation: pulse 1.4s ease-in-out infinite; }
.step .body { min-width: 0; flex: 1; }
.step .name { font-weight: var(--smdl-weight-semibold); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.step .when { color: var(--muted); font-size: var(--smdl-text-meta); margin-top: 2px; }
.logbox { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--selected);
  font-family: var(--mono); font-size: var(--smdl-text-meta); line-height: var(--smdl-leading-body); white-space: pre-wrap;
  overflow-x: auto; color: var(--ink-2); }

/* forms */
/* Two 320px tracks plus the 16px gap need 656px; a 620px cap made auto-fit
   drop to one column, so every authored field pair stacked. */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 656px; }
/* One field vocabulary, the same one the other five products use: the field
   IS the label, its own text is `.label`, and its note is `.help`. */
.field { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label,
.field > .label { display: block; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); color: var(--ink-2);
  margin-bottom: 5px; }
.field > legend.label { padding: 0; }
.field .help { display: block; font-size: var(--smdl-text-meta); color: var(--muted); margin-top: 5px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input:not([type]), input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="search"], select, textarea {
  width: 100%; font: inherit; font-size: var(--smdl-text-control); color: var(--ink); background: var(--field);
  border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 8px 11px; font-weight: var(--smdl-weight-regular); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 96px; resize: vertical; }
/* Leave the native affordance intact until the shared accessible-select
   enhancement is ready. This keeps the no-script control obvious without
   drawing a faux chevron from decorative gradients. */
select { appearance: auto; background-image: none; }
.check { display: flex; gap: 9px; align-items: flex-start; }
.check input { margin-top: 3px; accent-color: var(--accent); }
.inlineform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inlineform select, .inlineform input { width: auto; min-width: 180px; }

/* filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: var(--radius-sm); background: var(--card); box-shadow: 0 0 0 1px var(--ring);
  font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); color: var(--ink-2); text-transform: none; }
.filters a:hover { background: var(--hover); }
.filters a[aria-current="page"] { background: var(--accent-quiet); color: var(--accent-deep);
  box-shadow: 0 0 0 1px transparent; }

/* landing and standalone surfaces — the same header as a workspace, so a
   signed-out visitor is never dropped into unfamiliar chrome */
.plain { max-width: 660px; margin: 0 auto; padding: 72px 24px 96px; }
.plain-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.plain h1 { font-size: var(--smdl-text-heading); line-height: var(--smdl-leading-heading); letter-spacing: normal; font-weight: var(--smdl-weight-semibold);
  margin-bottom: 16px; }
.plain .lede { font-size: var(--smdl-text-body); line-height: var(--smdl-leading-body); color: var(--ink-2); margin-bottom: 28px; }
.plain .brandline { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--smdl-weight-semibold);
  letter-spacing: normal; }
.plain .brandline .mark { width: 24px; height: 24px; }
/* The wordmark's terminal full stop is the speaker's colour — the same rule
   the shared shell applies to it in the switcher. Without this the sign-in
   page, the landing page and every plain error page set it in body ink. */
.plain .brandline .bdot { color: var(--accent-ink); }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; height: 40px; padding: 0 19px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-control);
  border: 1px solid transparent; }
.cta.ghost { background: var(--card); color: var(--ink); border-color: var(--hair); }
.hint { margin-top: 26px; color: var(--muted); font-size: var(--smdl-text-meta); }
.featurelist { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: 44px; }
.featurelist h3 { font-size: var(--smdl-text-section); margin-bottom: 4px; }
.empty h3 { font-size: var(--smdl-text-section); }
.featurelist p { color: var(--muted); font-size: var(--smdl-text-body); }

@media (max-width: 900px) {
  .page { padding: 0 0 56px; }
}
@media (max-width: 640px) {
  .page { padding: 0 0 48px; }
  .plain { padding: 44px 18px 72px; }
  .plain h1 { font-size: var(--smdl-text-heading); }
  .card { padding: 16px 14px; }
  .hide-s { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Platform notifications: a quick triage panel in the shell and a full inbox
   in the canvas. The event store is in CORE; this product only renders the
   signed-in person's deliveries and sends read state back through its own
   authenticated server. */
.platform-notif { position: relative; }
.platform-notif-bell { position: relative; }
.platform-notif-badge {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--canvas); font-size: var(--smdl-text-meta); line-height: var(--smdl-leading-body);
  text-align: center; font-weight: var(--smdl-weight-medium);
}
.platform-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: min(390px, calc(100vw - 28px));
  display: flex; flex-direction: column; max-height: calc(100dvh - 80px);
  overflow: hidden; border-radius: var(--radius-lg); background: var(--card);
  box-shadow: 0 0 0 1px var(--hair), 0 20px 54px -18px rgba(8, 11, 16, .42);
}
.platform-notif-panel[hidden] { display: none; }
.platform-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--hair-soft);
}
.platform-notif-head, .platform-notif-tabs, .platform-notif-foot { flex: none; }
.platform-notif-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.platform-notif-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; }
.platform-notif-close:hover { background: var(--surface-2); }
.platform-notif-close .ic { font-size: 16px; }
.platform-notif-head strong { font-size: var(--smdl-text-body); }
.text-link {
  appearance: none; border: 0; padding: 4px; background: none; color: var(--accent-ink);
  font: inherit; font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); cursor: pointer;
}
.platform-notif-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--hair-soft); }
.platform-notif-tabs button {
  appearance: none; border: 0; border-radius: var(--radius-sm); padding: 6px 10px; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); cursor: pointer;
}
.platform-notif-tabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.platform-notif-list { min-height: 0; max-height: min(430px, 58vh); overflow-y: auto; }
.platform-notif-item {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-soft);
}
.platform-notif-item:hover { background: var(--surface-2); }
.platform-notif-item .notif-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; }
.platform-notif-item.is-unread .notif-dot { background: var(--accent); }
.platform-notif-copy { min-width: 0; }
.platform-notif-copy strong, .platform-notif-copy small { display: block; }
.platform-notif-copy strong { font-size: var(--smdl-text-body); font-weight: var(--smdl-weight-semibold); overflow-wrap: anywhere; }
.platform-notif-copy small { margin-top: 3px; color: var(--muted); font-size: var(--smdl-text-meta); line-height: var(--smdl-leading-body); overflow-wrap: anywhere; }
.platform-notif-source { color: var(--muted); font-size: var(--smdl-text-meta); text-transform: none; letter-spacing: normal; }
.platform-notif-empty { padding: 28px 16px; color: var(--muted); text-align: center; font-size: var(--smdl-text-body); }
.platform-notif-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; color: var(--accent-ink); text-decoration: none; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium);
}
.notification-feed { display: grid; gap: 0; }
.notification-feed .platform-notif-item { grid-template-columns: 8px minmax(0, 1fr) auto; padding: 15px 16px; }
.notification-feed .platform-notif-item:last-child { border-bottom: 0; }

@media (max-width: 640px) {
  .platform-notif-panel { position: fixed; top: 58px; right: 10px; left: 10px; width: auto; }
  .platform-notif-item, .notification-feed .platform-notif-item {
    grid-template-columns: 8px minmax(0, 1fr);
  }
  .platform-notif-source { grid-column: 2; }
}

/* --- Hosted repository browser + pipeline stages -------------------------- */
.repobar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.branchpick { display: flex; gap: 6px; flex-wrap: wrap; }
.tag.on { background: var(--accent-soft); color: var(--accent-deep); }
.cloneurl { font-size: var(--smdl-text-meta); color: var(--muted); padding: 4px 8px; border: 1px solid var(--hair);
  border-radius: var(--radius-sm); user-select: all; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.readme { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--selected);
  font-size: var(--smdl-text-body); line-height: var(--smdl-leading-body); overflow-x: auto; white-space: pre-wrap; }
.stageflow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.stagebox { border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 150px; }
.stagebox.gated { border-color: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.stagebox .stagename { font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-meta); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px; }
.stagebox ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: var(--smdl-text-meta); }
.stagebox li { margin: 2px 0; }
.stagearrow { align-self: center; color: var(--muted); }
.stagehead { margin: 14px 0 4px; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); letter-spacing: normal;
  text-transform: none; color: var(--muted); }
.steps > .stagehead:first-child { margin-top: 0; }
.editpanel { margin-top: 14px; border-top: 1px solid var(--hair); padding-top: 10px; }
.editpanel summary { cursor: pointer; color: var(--muted); font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); }
.editpanel form { margin-top: 12px; }
.tokenreveal { border-color: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

/* --- Getting started guide -------------------------------------------------- */
.guide-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.guide-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--hair); border-radius: var(--radius-sm); }
.guide-steps li.is-done { opacity: 0.62; }
.guide-steps li.is-done .g-body a { text-decoration: line-through; }
.guide-steps .g-mark { color: var(--muted); margin-top: 1px; }
.guide-steps li.is-done .g-mark { color: var(--good); }
.guide-steps .g-body { display: grid; gap: 1px; }
.guide-steps .g-body a { font-weight: var(--smdl-weight-semibold); font-size: var(--smdl-text-body); }
.guide-steps .g-body small { color: var(--muted); font-size: var(--smdl-text-meta); }

/* --- Project page: repository hero ---------------------------------------- */
.rh-kind { display: flex; align-items: center; gap: 8px; font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-meta); }
.rh-kind .tag { font-weight: var(--smdl-weight-medium); }
.rh-lede { color: var(--muted); font-size: var(--smdl-text-meta); margin: 8px 0 10px; max-width: 62ch; }
.rh-commit { display: grid; gap: 2px; margin-top: 10px; min-width: 0; }
.rh-commit code { font-size: var(--smdl-text-meta); color: var(--muted); }
.rh-commit .rh-msg { font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-meta); overflow-wrap: anywhere; }
.rh-commit .rh-when { color: var(--muted); font-size: var(--smdl-text-meta); }
.rh-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--hair); }
.rh-fact { display: grid; gap: 2px; min-width: 0; align-content: start; }
.rh-fact .k { color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); text-transform: none;
  letter-spacing: normal; }
.rh-fact .v { font-size: var(--smdl-text-body); overflow-wrap: anywhere; }
.rh-fact.rh-about { flex: 1 1 220px; max-width: 52ch; }
.clonebox { position: relative; max-width: 720px; }
.clonebox pre { padding: 12px 84px 12px 14px; border-radius: var(--radius-sm);
  background: var(--selected); font-size: var(--smdl-text-meta); line-height: var(--smdl-leading-body);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.clonebox .copybtn { position: absolute; top: 9px; right: 9px; }

/* --- Project page: strict card rows ---------------------------------------- */
/* Side-by-side cards share a row and stretch to the same height, so their top
   and bottom edges always line up. Unpaired cards render full width. */
.projrows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.projrow { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px;
  align-items: stretch; min-width: 0; }
.projrow > .card, .projrows > .card { min-width: 0; margin-top: 0; }
@media (max-width: 960px) {
  .projrow { grid-template-columns: minmax(0, 1fr); }
}
.stacklist { list-style: none; margin: 4px 0 0; padding: 0; }
.stacklist li { padding: 10px 0; display: grid; gap: 2px; min-width: 0; }
.stacklist li + li { border-top: 1px solid var(--hair); }
.stacklist .sl-top { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.stacklist .sl-when { margin-left: auto; color: var(--muted); font-size: var(--smdl-text-meta); white-space: nowrap; }
.stacklist .sl-top .rowmain { overflow-wrap: anywhere; }
.stacklist .sl-sub { color: var(--muted); font-size: var(--smdl-text-meta); overflow-wrap: anywhere; }
.stacklist a.sl-sub:hover { color: var(--ink); }

/* Meta values never overflow their column mid-word. */
.meta .v { min-width: 0; overflow-wrap: anywhere; }
.guide-steps .g-label { font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-meta); }

/* The shell emits banner-ok / banner-err; give them their tones (the old
   .ok/.error spellings stay for anything that still uses them). */
.banner { padding: 9px 13px; border-radius: var(--radius-sm); font-size: var(--smdl-text-body); }
.banner-ok { background: var(--good-soft); border-color: transparent; color: var(--good); }
.banner-err { background: var(--bad-soft); border-color: transparent; color: var(--bad); }

/* --- Multi-select: platforms on a project, in the same idiom as .filters ---- */
.checkgrid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; }
.checkchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-sm); background: var(--card); box-shadow: 0 0 0 1px var(--ring);
  font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); color: var(--ink-2); cursor: pointer; user-select: none; }
.field label.checkchip { display: inline-flex; margin: 0; }
.checkchip span { min-width: 0; overflow-wrap: anywhere; }
.checkchip:hover { background: var(--hover); }
.checkchip input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.checkchip:has(input:checked) { background: var(--accent-quiet); color: var(--accent-deep);
  box-shadow: 0 0 0 1px transparent; }
.checkchip:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

/* A row of tags that are also links — platform chips on a project. */
.chiprow { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chiprow a.tag:hover { background: var(--accent-soft); color: var(--accent-deep); }

/* --- Runners --------------------------------------------------------------- */
/* A runner's row carries several tags; they wrap rather than widening the table. */
td .tag + .tag { margin-left: 4px; }
/* A run step's command, shown under the step it belongs to. */
.step .when.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.runner-connection-card .runner-connection-copy { max-width: 72ch; color: var(--muted); line-height: 1.55; }
.runner-connection-card .runner-connection-copy + .btnrow { margin-top: 14px; }

/* --- Connections ---------------------------------------------------------- */
.eyebrow {
  display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--smdl-text-meta);
  font-weight: var(--smdl-weight-medium); letter-spacing: normal; line-height: var(--smdl-leading-body); text-transform: none;
}
.connections-intro {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: 28px; align-items: end;
}
/* The one heading that opts back up, explicitly. */
.connections-intro-copy h2 { max-width: 23ch; font-size: var(--smdl-text-section); line-height: var(--smdl-leading-heading); }
.connections-intro-copy p { max-width: 70ch; margin-top: 10px; color: var(--muted); }
.connections-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--sunken);
}
.connections-summary a { min-width: 0; padding: 13px 14px; }
.connections-summary a + a { border-left: 1px solid var(--hair); }
.connections-summary a:hover { background: var(--hover); }
.connections-summary strong, .connections-summary span { display: block; }
.connections-summary strong { color: var(--ink); font-size: var(--smdl-text-metric); line-height: var(--smdl-leading-heading); }
.connections-summary span {
  margin-top: 3px; overflow: hidden; color: var(--muted); font-size: var(--smdl-text-meta);
  text-overflow: ellipsis; white-space: nowrap;
}

.connection-icon {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--ctl-radius, 6px); background: var(--accent-quiet);
  color: var(--accent-deep); font-size: 17px;
}
.connection-help { max-width: 76ch; color: var(--muted); }
.connection-state {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin-top: 14px; padding: 15px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  background: var(--sunken);
}
.connection-state > i { color: var(--muted); font-size: 19px; }
.connection-state strong, .connection-state p { display: block; }
.connection-state p { margin-top: 2px; color: var(--muted); font-size: var(--smdl-text-meta); }
.connection-safety {
  display: flex; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair);
  color: var(--muted); font-size: var(--smdl-text-meta);
}
.connection-safety i { flex: none; margin-top: 2px; color: var(--good); font-size: 16px; }

.connection-section { margin-top: 16px; scroll-margin-top: 84px; }
.connection-token-table { margin-top: 14px; }
.connection-token-table form { margin: 0; }
.connection-repositories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-top: 14px; }
.connection-repositories article {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-width: 0; padding: 12px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  background: var(--sunken);
}
.connection-repositories article > div { min-width: 0; }
.connection-repo-url {
  display: block; margin-top: 3px; overflow: hidden; color: var(--muted);
  font-size: var(--smdl-text-meta); text-overflow: ellipsis; white-space: nowrap;
}
.connection-url-example { margin-top: 10px; color: var(--muted); font-size: var(--smdl-text-meta); overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .connections-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 720px) {
  .connections-summary { grid-template-columns: minmax(0, 1fr); }
  .connections-summary a { display: flex; gap: 9px; align-items: baseline; padding: 10px 12px; }
  .connections-summary a + a { border-top: 1px solid var(--hair); border-left: 0; }
  .connections-summary span { margin-top: 0; }
}
@media (max-width: 520px) {
  .connection-state { grid-template-columns: auto minmax(0, 1fr); }
  .connection-state > .btn { grid-column: 2; justify-self: start; }
}

/* --- Runner browser pairing and desktop delivery ------------------------- */
.pairing-plain { max-width: 760px; }
.pairing-hero { margin-top: clamp(52px, 10vh, 110px); }
.pairing-hero h1 { max-width: 18ch; margin-top: 8px; }
.pairing-hero .lede { max-width: 64ch; }
.pairing-code-form { max-width: 440px; margin-top: 26px; }
.pairing-code-form input {
  font-family: var(--mono); font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-regular); letter-spacing: .12em;
  text-align: center; text-transform: none;
}
.pairing-orgs { display: grid; gap: 10px; margin-top: 24px; }
.pairing-org {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-card);
}
.pairing-org:hover { border-color: var(--accent-soft); background: var(--hover); }
.pairing-org span, .pairing-org b, .pairing-org small { display: block; min-width: 0; }
.pairing-org small { margin-top: 3px; color: var(--muted); }
.pairing-card { max-width: 880px; margin-inline: auto; }
.pairing-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.pairing-summary h2 { margin-top: 4px; }
.pairing-form { margin-top: 22px; }
.pairing-projects { min-width: 0; margin: 0; padding: 0; border: 0; }
.pairing-projects legend { margin-bottom: 9px; color: var(--ink-2); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); }
.pairing-projects .checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.pairing-projects .checkchip {
  box-sizing: border-box; width: 100%; height: auto; min-height: 42px;
  justify-content: flex-start; padding: 9px 12px; line-height: 1.25;
}
.pairing-all { align-items: flex-start; margin-top: 14px; }
.pairing-all span, .pairing-all b, .pairing-all small { display: block; }
.pairing-all small { margin-top: 2px; color: var(--muted); font-weight: var(--smdl-weight-regular); }
.pairing-permission {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; margin-top: 20px;
  padding: 14px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  background: var(--sunken); color: var(--muted);
}
.pairing-permission > i { margin-top: 2px; color: var(--good); font-size: 18px; }
.pairing-permission p, .pairing-permission b, .pairing-permission span { display: block; margin: 0; }
.pairing-permission b { color: var(--ink); }
.pairing-permission span { margin-top: 3px; font-size: var(--smdl-text-meta); }
.pairing-actions { margin-top: 20px; }
.pairing-complete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.pairing-complete p { max-width: 64ch; margin-top: 6px; color: var(--muted); }
.pairing-status-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--good-soft); color: var(--good); font-size: 20px;
}
.desktop-runner-card { padding: clamp(20px, 2.7vw, 30px); }
.desktop-runner-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start;
}
.desktop-runner-head p { max-width: 74ch; margin-top: 7px; color: var(--muted); }
.desktop-release-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px;
}
.desktop-release-grid article {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
  min-width: 0; padding: 13px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  background: var(--sunken);
}
.desktop-release-grid article > .btn, .desktop-release-grid article > .tag { grid-column: 1 / -1; justify-self: start; }
.desktop-release-grid b, .desktop-release-grid span { display: block; min-width: 0; }
.desktop-release-grid article > div:nth-child(2) span { margin-top: 2px; color: var(--muted); font-size: var(--smdl-text-meta); }
.desktop-platform-icon {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ctl-radius, 6px); background: var(--accent-quiet); color: var(--accent-deep);
}
.desktop-runner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.desktop-build-details { margin-top: 20px; }

/* Chips must grow with project names rather than forcing one-line text into
   fixed-height boxes at the 1028px breakpoint called out in review. */
.checkgrid .checkchip { max-width: 100%; height: auto; min-height: 36px; padding-block: 7px; }

@media (max-width: 620px) {
  .pairing-summary { display: grid; }
  .pairing-projects .checkgrid { grid-template-columns: minmax(0, 1fr); }
  .pairing-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pairing-actions .btn { width: 100%; justify-content: center; }
  .desktop-runner-head { grid-template-columns: minmax(0, 1fr); }
  .desktop-release-grid { grid-template-columns: minmax(0, 1fr); }
  .desktop-runner-actions { display: grid; }
  .desktop-runner-actions .btn { width: 100%; justify-content: center; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .desktop-release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}