/* The Deck: a dark hero over a tight bento of tiles. Integrations, AI Agents and what each one manages.
   One column grid at twelve parts; a tile says how wide it wants to be with a span class. */

.deck { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.deck > * { grid-column: span 12; min-width: 0; }
.deck > .span-3 { grid-column: span 3; }
.deck > .span-4 { grid-column: span 4; }
.deck > .span-5 { grid-column: span 5; }
.deck > .span-6 { grid-column: span 6; }
.deck > .span-7 { grid-column: span 7; }
.deck > .span-8 { grid-column: span 8; }
.deck > .card { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--r-2xl); }

/* ---------- The row above the deck: tabs on the left, actions on the right ---------- */
.deck-top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.deck-top .right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.deck-top .right > form { display: flex; }
.deck-top .seg { flex: none; }
.deck-tabs.subnav { gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--sh-xs); }
.deck-tabs.subnav a { min-height: 32px; padding: 0 13px; border-radius: 9px; }
.deck-tabs.subnav a.on { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.deck-tabs.subnav a.on .tab-count, .deck-tabs.subnav a.on .pill { background: var(--stage-fill-hover); color: var(--on-brand); }
.deck-tabs.subnav .tab-count { margin-left: 0; }
.deck-note { margin-bottom: 14px; }

/* ---------- The more menu ---------- */
.more { position: relative; }
.more > summary {
  display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--panel); color: var(--ink-3); list-style: none; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--panel-3); color: var(--ink); }
.more > summary svg { width: 17px; height: 17px; }
.more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; min-width: 200px; padding: 6px;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--sh-pop);
}
.more-menu form { display: contents; }
.more-menu a, .more-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--ink-2); font-size: var(--fs-s); font-weight: 500; text-align: left; cursor: pointer;
}
.more-menu a:hover, .more-menu button:hover:not(:disabled) { background: var(--panel-3); color: var(--ink); }
.more-menu button:disabled { opacity: .5; cursor: not-allowed; }
.more-menu svg { width: 15px; height: 15px; color: var(--ink-4); }
.more-menu .bad, .more-menu .bad svg { color: var(--bad); }

/* ---------- Tiles ---------- */
.tile { position: relative; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--panel); box-shadow: var(--sh-card); }
.tile.clip { overflow: hidden; }
.tile.tap { display: block; width: 100%; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .tile.tap:hover { border-color: var(--brand-line); box-shadow: var(--sh-hover); color: inherit; transform: translateY(-2px); }
}
.tile.tint { border-color: color-mix(in srgb, var(--tone) 26%, transparent); background: color-mix(in srgb, var(--tone) 7%, var(--panel)); }
.tile.tint.ok { --tone: var(--ok); }
.tile.tint.warn { --tone: var(--warn); }
.tile.tint.bad { --tone: var(--bad); }
.tile.tint.info { --tone: var(--brand-text); }
.tile-go { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; color: var(--ink-4); transition: color .2s ease, transform .2s ease; }
.tile-go svg { width: 18px; height: 18px; }
.tile.tap:hover .tile-go { color: var(--brand-text); transform: translateX(2px); }
.tile-buy { height: 100%; }
.tile-buy > span:not(.tile-go) { display: block; }
.tile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tile-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: var(--fs-s); font-weight: 500; color: var(--ink-3); }
.tile-label a { font-weight: 500; }
.tile-big { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; color: var(--ink); }
.tile-big.mid { font-size: 28px; }
.tile-big small, .deck-word small { margin-left: 2px; font-size: .5em; font-weight: 500; opacity: .7; }
.tile-sub { margin: 4px 0 0; font-size: var(--fs-s); color: var(--ink-4); }
.tile-name { display: block; font-size: var(--fs-l); font-weight: 600; letter-spacing: var(--tr-snug); color: var(--ink); overflow-wrap: anywhere; }
.tile-next { display: flex; flex-direction: column; height: 100%; }
.tile-next .tile-sub { flex: 1; }
.tile-next .btn { align-self: flex-start; margin-top: 14px; }
.tile-clear { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.tile-clear svg { width: 20px; height: 20px; }
.tile-quiet { margin: 0; padding: 22px 0; text-align: center; font-size: var(--fs-s); color: var(--ink-4); }

.tile-trend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tile-spark { margin-top: 10px; }

.tile-rows { display: grid; }
.tile-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 10px 0;
  border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink-2); font: inherit; font-size: var(--fs-s); text-align: left;
}
.tile-row:first-child { border-top: 0; padding-top: 0; }
.tile-row:last-child { padding-bottom: 0; }
.tile-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-row .grow.wrap { overflow: visible; white-space: normal; }
.tile-row .meta { flex: none; font-size: var(--fs-xs); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.tile-row b { font-weight: 600; color: var(--ink); }
.tile-row small { display: block; font-size: var(--fs-xs); color: var(--ink-4); overflow-wrap: anywhere; white-space: normal; }
button.tile-row { cursor: pointer; }
button.tile-row:hover .grow, a.tile-row:hover .grow { color: var(--brand-text); }
.tile-row .act { display: flex; align-items: center; gap: 8px; flex: none; }
.tile-row.wraps { flex-wrap: wrap; }

.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.info { background: var(--brand-text); }

/* A record type with its share of the linked records. */
.tile-types { display: grid; gap: 13px; }
.tile-type { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tile-type-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: var(--fs-s); font-weight: 500; }
.tile-type-h .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-type-h .meta { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tile-type:hover .grow { color: var(--brand-text); }
.tile-bar { display: block; height: 6px; border-radius: var(--r-full); background: var(--panel-3); overflow: hidden; }
.tile-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--rtc, var(--brand)); }
.tile-add { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--brand-text); font-size: var(--fs-s); font-weight: 500; cursor: pointer; }
.tile-add svg { width: 15px; height: 15px; }
.more > summary.tile-add { display: inline-flex; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--brand-text); }
.tile-types .more-menu { right: auto; left: 0; }

.tile-meter + .tile-meter { margin-top: 14px; }
.tile-meter-h { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: var(--fs-s); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile-meter-h span { color: var(--ink-4); }

.tile-level { display: inline-flex; gap: 3px; flex: none; }
.tile-level i { width: 18px; height: 6px; border-radius: 2px; background: var(--panel-3); }
.tile-level i.on { background: var(--rtc, var(--brand)); }

/* A setting or an action with its reason next to it. */
.tile-do { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.tile-do:first-child { border-top: 0; padding-top: 0; }
.tile-do:last-child { padding-bottom: 0; }
.tile-do > div:first-child { flex: 1; min-width: 0; }
.tile-do-lead { display: flex; align-items: center; gap: 12px; }
.tile-do-lead > div { min-width: 0; }
.tile-do b { display: block; font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.tile-do .why { display: block; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); overflow-wrap: anywhere; }
.tile-do .why .pill { margin-right: 6px; }
.tile-do form { flex: none; }
.tile-do .act { display: flex; align-items: center; gap: 8px; flex: none; }
.tile-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.tile-two .tile-do { padding: 0; border: 0; }
.tile-two .field { margin-bottom: 0; }
.tile .field:last-child { margin-bottom: 0; }

/* ---------- A card for one integration or agent, in the list ---------- */
.deck-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.deck-card-head .brandmark { width: 92px; height: 26px; padding: 0 7px; }
.deck-card-head .pills { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.deck-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.deck-card-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Charts ---------- */
.deck-ring-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; }
.deck-ring { position: relative; width: 148px; height: 148px; }
.deck-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.deck-ring circle { fill: none; stroke-width: 9; stroke: var(--panel-3); }
.deck-ring circle.on { stroke: var(--brand); stroke-linecap: round; }
.deck-ring div { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 20px; text-align: center; }
.deck-ring b { font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.deck-ring span { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-4); }

.deck-area { display: block; width: calc(100% + 44px); max-width: none; height: 84px; margin: 12px -22px -22px; }
.deck-area .fill { fill: var(--brand-soft); }
.deck-area .line { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- The hero ---------- */
.deck-hero {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 286px; overflow: hidden; padding: 26px 28px;
  border-radius: var(--r-2xl); background: var(--stage-bg); box-shadow: inset 0 0 0 1px var(--stage-rim), var(--sh-card); color: var(--stage-ink);
}
.deck-hero::before, .deck-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.deck-hero::before {
  opacity: .75;
  background:
    radial-gradient(70% 120% at 100% 0%, var(--stage-glow-1), transparent 62%),
    radial-gradient(50% 90% at 0% 100%, var(--stage-glow-2), transparent 70%);
}
.deck-hero::after {
  opacity: .22; background-size: 34px 34px; mask-image: var(--stage-mask);
  background-image: linear-gradient(var(--stage-grid) 1px, transparent 1px), linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);
}
.deck-hero > * { position: relative; z-index: 1; }
.deck-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: var(--fs-s); color: var(--stage-muted); }
.deck-hero-top .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-status { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 4px 11px; border-radius: var(--r-full); background: var(--stage-fill); color: var(--stage-ink); font-size: var(--fs-xs); font-weight: 600; }
.deck-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--stage-flow); }
.deck-status.ok i { background: var(--stage-ok); }
.deck-status.warn i { background: var(--warn); }
.deck-status.bad i { background: var(--stage-bad); }
.deck-pair { display: flex; align-items: center; margin: auto 0; padding: 18px 0; }
.deck-pair .brandmark { width: 168px; height: 50px; padding: 0 16px; border: 0; border-radius: 14px; }
.deck-plate { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 168px; height: 50px; border-radius: 14px; background: var(--stage-fill); color: var(--stage-ink); font-size: var(--fs-s); font-weight: 600; }
.deck-plate svg { width: 16px; height: 16px; }
.deck-slot { border: 1px dashed color-mix(in srgb, var(--stage-ink) 32%, transparent); background: none; color: var(--stage-muted); line-height: 1.15; text-align: center; }
.deck-beam { position: relative; flex: 1; min-width: 20px; height: 2px; margin-inline: 2px; overflow: hidden; background: color-mix(in srgb, var(--stage-flow) 30%, transparent); }
.deck-beam.off { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stage-flow) 40%, transparent) 0 4px, transparent 4px 10px); }
.deck-beam.live::before, .deck-beam.live.both::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26%; background: linear-gradient(90deg, transparent, var(--stage-flow), transparent); }
.deck-beam.live::before { animation: deck-run 2.8s linear infinite; }
.deck-beam.live.both::after { animation: deck-back 2.8s linear infinite; }
@keyframes deck-run { from { left: -26%; } to { left: 100%; } }
@keyframes deck-back { from { left: 100%; } to { left: -26%; } }
.deck-hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.deck-word { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: var(--tr-tight); color: var(--stage-ink); }
.deck-hero-foot p { margin: 5px 0 0; font-size: var(--fs-m); color: var(--stage-muted); }
.deck-hero-foot form { flex: none; }

/* One figure with its trend behind it. */
.deck-hero.stat .deck-hero-foot { margin-top: auto; }
.deck-hero.stat .deck-word { font-size: 56px; }
.deck-hero.stat.flat { min-height: 0; }
.deck-hero .deck-area { position: absolute; inset: auto 0 0; z-index: 0; width: 100%; height: 58%; margin: 0; }
.deck-hero .deck-area .fill { fill: color-mix(in srgb, var(--stage-flow) 16%, transparent); }
.deck-hero .deck-area .line { stroke: var(--stage-flow); }
.btn.on-stage { flex: none; border: 0; background: var(--paper); color: var(--paper-ink); box-shadow: none; }
.btn.on-stage:hover:not(:disabled) { border: 0; background: var(--paper); color: var(--paper-ink); opacity: .9; }
.deck-hero .btn.primary { border-color: transparent; background: var(--stage-action); color: var(--on-brand); }
.deck-hero .btn.primary:hover:not(:disabled) { border-color: transparent; background: var(--stage-action-hover); color: var(--on-brand); }

/* The list's summary: the same surface, one row of figures. */
.deck-band { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; height: auto; min-height: 0; padding: 26px 28px; }
.deck-band .deck-word { font-size: 34px; }
.deck-band b { display: block; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-tight); color: var(--stage-ink); font-variant-numeric: tabular-nums; }
.deck-band span { font-size: var(--fs-s); color: var(--stage-muted); }
.deck-band > .deck-band-actions { display: flex; align-items: center; gap: 8px; align-self: start; }
.deck-band-actions .btn span { color: inherit; font-size: inherit; }

/* An account with nothing yet: what it takes to start, in the same tiles. */
.deck-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.deck-steps li { position: relative; min-height: 26px; padding-left: 38px; counter-increment: step; }
.deck-steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-size: var(--fs-xs); font-weight: 600;
}
.deck-steps b { display: block; font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.deck-steps span { display: block; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }

.deck-section { margin: 26px 0 12px; }
.deck-section h3 { font-size: var(--fs-m); font-weight: 600; }
.deck-section p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-4); }
.deck-filter { margin: 14px 0; padding: 0; }
.deck-pager { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-l); }

/* The conflicts and the sheet keep their own cards, in the same rounding as the tiles. */
.mpanel > .card { border-radius: var(--r-2xl); }
.mpanel > .card > .card-foot { border-radius: 0 0 var(--r-2xl) var(--r-2xl); }

@media (max-width: 1240px) {
  .deck > .span-3, .deck > .span-4, .deck > .span-5, .deck > .span-6, .deck > .span-7 { grid-column: span 6; }
  .deck > .span-8 { grid-column: span 12; }
  .deck-start > .span-4, .deck-overview > .span-4 { grid-column: span 12; }
  .deck-hero { min-height: 260px; }
}

@media (max-width: 760px) {
  .deck > .span-3, .deck > .span-4, .deck > .span-5, .deck > .span-6, .deck > .span-7, .deck > .span-8 { grid-column: span 12; }
  .deck-top { align-items: stretch; }
  .deck-top .right { justify-content: flex-end; margin-left: 0; width: 100%; }
  .deck-top .right .btn { flex: 1; }
  .deck-tabs.subnav { width: 100%; }
  .deck-tabs.subnav a { flex: 1 0 auto; justify-content: center; }
  .deck-tabs.subnav .pill { display: none; }
  .deck-top .right { flex-wrap: wrap; }
  .deck-hero.stat { min-height: 200px; }
  .deck-hero.stat .deck-word { font-size: 40px; }
  .tile { padding: 18px; }
  .deck-area { width: calc(100% + 36px); margin: 12px -18px -18px; }
  .deck-hero { min-height: 0; padding: 20px; }
  .deck-pair { padding: 22px 0; }
  .deck-pair .brandmark, .deck-plate { width: clamp(104px, 34vw, 150px); height: 42px; padding: 0 10px; }
  .deck-slot svg { display: none; }
  .deck-hero-foot { flex-direction: column; align-items: stretch; }
  .deck-word { font-size: 30px; }
  .deck-hero-foot .btn { width: 100%; }
  .deck-hero-foot form { width: 100%; }
  .deck-band { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px; }
  .deck-band > :first-child { grid-column: 1 / -1; padding-right: 92px; }
  .deck-band > .deck-band-actions { position: absolute; top: 16px; right: 16px; }
  .deck-band-actions .btn { width: 36px; padding: 0; }
  .deck-band-actions .btn span { display: none; }
  .deck-band .deck-word { font-size: 28px; }
  .deck-band b { font-size: 24px; }
  .deck-band span { font-size: var(--fs-xs); }
  .tile-two { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tile-do { flex-wrap: wrap; gap: 10px; }
}

/* ---------- Overview ---------- */
.deck-ring circle.on.ok { stroke: var(--ok); }
.deck-ring circle.on.warn { stroke: var(--warn); }
.deck-quiet .deck-hero.stat { min-height: 220px; }
.deck-quiet .deck-hero.stat .deck-word { font-size: 40px; }
.tile-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tile-logos .brandmark { width: 62px; height: 24px; padding: 0 6px; }
.tile-segments { display: flex; gap: 3px; margin-top: 14px; }
.tile-segments i { flex: 1; height: 6px; border-radius: 2px; background: var(--brand-text); }
.tile-segments i.ok { background: var(--ok); }
.tile-segments i.warn { background: var(--warn); }
.tile-segments i.bad { background: var(--bad); }
.tile-segments + .tile-sub { margin-top: 8px; }

@media (max-width: 1240px) {
  .deck-overview > .tile-needs { grid-column: span 12; }
}

@media (max-width: 380px) {
  .tile-row .tile-level { display: none; }
}