/* Keymaker (DMI Integration & Automation Platform) — enterprise UI (LOCAL_POC L-09). Zero-dependency,
   no build step. A clean, professional design system: tokens, app shell,
   role-aware nav, cards, data tables, badges, forms, the Journey Designer
   canvas + properties panel, and consistent loading/empty/error/success states.
   Desktop-first, responsive to tablet; visible focus + accessible contrast. */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --brand: #3b4ce2;
  --brand-ink: #ffffff;
  --brand-weak: #eef1fe;
  --ok: #0f8a5f;
  --ok-weak: #e5f6ee;
  --warn: #b7791f;
  --warn-weak: #fdf4e3;
  --err: #c53030;
  --err-weak: #fdecec;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-2: 0 6px 24px rgba(15,23,42,.12);
  --topbar-h: 56px;
  --nav-w: 236px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--bg); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The `hidden` attribute must win over component `display:` rules (e.g. the
   login overlay and shell both use display:grid). Without this, a hidden
   element with an explicit display still paints — which left the "Sign in"
   overlay floating over every page. Making [hidden] authoritative fixes it. */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: .86em; }
.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
  background: var(--brand); color: #fff; padding: .5rem .8rem; border-radius: 6px; z-index: 1000;
}

/* Visible focus everywhere (a11y) */
:focus-visible { outline: 3px solid rgba(59,76,226,.45); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); padding: .5rem .9rem; border-radius: var(--radius-sm); font-weight: 550;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.06); background: var(--brand); }
.btn.go { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.go:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--err); border-color: var(--err-weak); }
.btn.tiny { padding: .25rem .55rem; font-size: .8rem; }
.help-btn { border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.help-btn:hover { background: var(--surface-2); color: var(--ink); }
.btn.full { width: 100%; }
.icon-btn {
  font: inherit; cursor: pointer; border: none; background: transparent; color: var(--ink-2);
  width: 36px; height: 36px; border-radius: 8px; font-size: 1.1rem;
}
.icon-btn:hover { background: var(--surface-2); }

/* ---------- Login ---------- */
.login-screen {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 70% -10%, #e8ecff, var(--bg));
  padding: 1rem;
}
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-2); padding: 2rem; width: min(440px, 100%);
}
.login-users { display: grid; gap: .5rem; margin: 1rem 0; }
.login-user {
  display: flex; align-items: center; gap: .75rem; text-align: left; width: 100%;
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.login-user:hover { border-color: var(--brand); background: var(--brand-weak); }
.login-user .avatar { background: var(--brand); color: #fff; }
.login-user .lu-meta { display: flex; flex-direction: column; }
.login-user .lu-name { font-weight: 600; }
.login-note { font-size: .82rem; margin-top: 1rem; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.brand-mark { color: var(--brand); font-size: 1.1rem; }
.brand-name { letter-spacing: -.01em; }
.brand-lg { font-size: 1.1rem; margin-bottom: .5rem; }
.brand-subtitle { font-size: .8rem; margin: -.25rem 0 1rem; }

/* ---------- Shell layout ---------- */
.shell { min-height: 100%; display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "top top" "nav main"; }
.shell.nav-collapsed { grid-template-columns: 0 1fr; }
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 .75rem; position: sticky; top: 0; z-index: 20;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: .6rem; }
.topbar-center { flex: 1; max-width: 560px; }
.search { position: relative; display: flex; align-items: center; }
.search-ico { position: absolute; left: .6rem; color: var(--ink-3); }
.search input {
  width: 100%; padding: .5rem .7rem .5rem 1.9rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2); font: inherit; color: var(--ink);
}
.search input:focus { background: var(--surface); border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(59,76,226,.18); }

.env-context { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.env-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-weak); }
.env-context select { border: none; background: transparent; font: inherit; color: var(--ink); font-weight: 550; }

.usermenu { position: relative; }
.user-btn { display: flex; align-items: center; gap: .55rem; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: .25rem .5rem; cursor: pointer; font: inherit; }
.user-btn:hover { background: var(--surface-2); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.user-name { font-weight: 600; font-size: .85rem; }
.user-role { font-size: .72rem; color: var(--ink-2); text-transform: capitalize; }
.caret { color: var(--ink-3); font-size: .7rem; }
.popover { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: .8rem; z-index: 30; }
.popover-head { margin: 0 0 .5rem; }
.popover-row { font-size: .8rem; color: var(--ink-2); margin: .3rem 0; }
.user-switch { display: grid; gap: .3rem; margin-bottom: .6rem; }
.user-switch button { text-align: left; }
.user-switch button[aria-current="true"] { border-color: var(--brand); background: var(--brand-weak); }

/* ---------- Side navigation ---------- */
.sidenav { grid-area: nav; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.shell.nav-collapsed .sidenav { display: none; }
.nav-list { list-style: none; margin: .6rem 0 0; padding: 0 .5rem; display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 8px; color: var(--ink-2); cursor: pointer; font-weight: 550; width: 100%; border: none; background: transparent; font: inherit; text-align: left; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--brand-weak); color: var(--brand); }
.nav-item .nav-ico { width: 20px; text-align: center; opacity: .9; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: .8rem .9rem .25rem; }
.sidenav-footer { padding: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; border-top: 1px solid var(--line); }

/* ---------- Main / breadcrumbs ---------- */
.main { grid-area: main; overflow: auto; }
.breadcrumbs { padding: .8rem 1.5rem 0; }
.breadcrumbs ol { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; font-size: .82rem; color: var(--ink-2); }
.breadcrumbs li::after { content: "/"; margin-left: .4rem; color: var(--ink-3); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs li:last-child { color: var(--ink); font-weight: 550; }
.view { padding: 1rem 1.5rem 3rem; max-width: 1200px; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head .ph-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.page-head p { color: var(--ink-2); max-width: 70ch; }

/* ---------- Cards / grid ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.1rem 1.2rem; }
.card + .card { margin-top: 1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
/* L-10 troubleshooting triage panel: a verdict-colored left accent so the
   what/where/why/next summary reads at a glance. Pairs a tinted background with
   its own text color (both from theme tokens) so it is readable in any theme. */
.card.triage { border-left: 4px solid var(--line-2); }
.card.triage.succeeded { border-left-color: var(--ok); background: var(--ok-weak); color: var(--ink); }
.card.triage.failed { border-left-color: var(--err); background: var(--err-weak); color: var(--ink); }
.card.triage.running { border-left-color: var(--warn); background: var(--warn-weak); color: var(--ink); }
.linkrow { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; }
.linkrow a { font-weight: 550; }
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-1); }
.stat .stat-label { color: var(--ink-2); font-size: .8rem; }
.stat .stat-value { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.stat .stat-sub { color: var(--ink-3); font-size: .78rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
thead th { text-align: left; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: .6rem .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.row-click { cursor: pointer; }

/* ---------- Badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.badge.succeeded, .badge.ok, .badge.available, .badge.healthy { background: var(--ok-weak); color: var(--ok); border-color: transparent; }
.badge.failed, .badge.error, .badge.unavailable, .badge.bad { background: var(--err-weak); color: var(--err); border-color: transparent; }
.badge.running, .badge.pending, .badge.warming_up { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
/* KEYMAKER V2 — connector classification badges (text-labelled; never colour-only). */
.badge.fully_executable { background: var(--ok-weak); color: var(--ok); border-color: transparent; }
.badge.executable_limited { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.badge.preview { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.badge.deferred { background: var(--surface-2); color: var(--ink-3, var(--ink-2)); border-color: var(--line); opacity: .85; }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.pill.ok { color: var(--ok); } .pill.bad { color: var(--err); }
.tag { display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 6px; background: var(--brand-weak); color: var(--brand); margin: 0 .25rem .25rem 0; }
.role-chip { text-transform: capitalize; }

/* ---------- Forms ---------- */
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 600; padding: 0 .4rem; color: var(--ink); font-size: .9rem; }
.field { margin-bottom: .8rem; }
.field > label { display: block; font-weight: 550; margin-bottom: .25rem; font-size: .85rem; }
.field .meta { color: var(--ink-3); font-weight: 400; font-size: .78rem; }
input[type=text], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,76,226,.18); }
input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-weak); }
.row { display: flex; gap: .8rem; } .row .field { flex: 1; } .row .field.grow { flex: 2; }
.field-error { color: var(--err); font-size: .78rem; margin-top: .2rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }

/* ---------- Designer: canvas + properties ---------- */
.designer { display: grid; grid-template-columns: 220px 1fr 320px; gap: 1rem; align-items: start; }
.palette, .properties { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1rem; }
.palette h3, .properties h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.palette-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border: 1px dashed var(--line-2); border-radius: 8px; margin-bottom: .5rem; cursor: pointer; background: var(--surface-2); }
.palette-item:hover { border-color: var(--brand); color: var(--brand); }
.palette-item .node-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: .8rem; }
.canvas { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.2rem; min-height: 420px; }
.flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
.node {
  width: 100%; max-width: 440px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); padding: .7rem .9rem; cursor: pointer; box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: .7rem; transition: border-color .12s, box-shadow .12s;
}
.node:hover { border-color: var(--brand); }
.node.selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,76,226,.2); }
.node .node-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.node .node-body { flex: 1; min-width: 0; }
.node .node-title { font-weight: 600; }
.node .node-sub { color: var(--ink-2); font-size: .8rem; }
.node .node-status { font-size: .72rem; }
.node-ico.trigger { background: #7c3aed; } .node-ico.action { background: #2563eb; }
.node-ico.transform { background: #0891b2; } .node-ico.condition { background: #b7791f; }
.node-ico.wait { background: #64748b; } .node-ico.connector { background: #0f8a5f; } .node-ico.stop { background: #334155; }
.node-ico.foreach { background: #7c2d92; } .node-ico.child { background: #be5a1f; }
.node.nested { border-left: 3px solid var(--line-2); }
.branch-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 0 .5rem; align-self: center; flex: none; }
.cf-detail { font-size: .8rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: .1rem .45rem; }
.connector-line { width: 2px; height: 22px; background: var(--line-2); }
.node-valid { color: var(--ok); } .node-invalid { color: var(--err); }
.properties .prop-empty { color: var(--ink-3); font-size: .85rem; }
.help-text { font-size: .8rem; color: var(--ink-2); background: var(--surface-2); border-left: 3px solid var(--brand); padding: .5rem .7rem; border-radius: 0 6px 6px 0; margin-top: .6rem; }

/* ---------- States: loading / empty / error / success ---------- */
.state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-2); }
.state .state-ico { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .7; }
.state.error { color: var(--err); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, #eef2f7 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 6px; height: 14px; margin: .5rem 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { white-space: pre-wrap; font-family: var(--mono); font-size: .82rem; padding: .7rem .8rem; border-radius: var(--radius-sm); margin-top: .8rem; border: 1px solid var(--line); background: var(--surface-2); }
.status.ok { background: var(--ok-weak); border-color: transparent; color: #0b6b4a; }
.status.err { background: var(--err-weak); border-color: transparent; color: #9b2525; }
.status.warn { background: var(--warn-weak); border-color: transparent; color: #8a5a12; }
.status:empty { display: none; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 1.2rem; right: 1.2rem; background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-2); z-index: 50; max-width: 380px; font-size: .88rem; }
.toast.ok { background: #0b6b4a; } .toast.err { background: #9b2525; } .toast.warn { background: #8a5a12; }

/* ---------- Misc ---------- */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: .35rem .8rem; font-size: .88rem; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; }
/* Scheduler closure pass §14 — health banner key/value grid (themed). */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem .9rem; font-size: .88rem; }
.kv-grid .kv { display: flex; flex-direction: column; gap: .1rem; grid-template-columns: none; }
.kv-k { color: var(--ink-2); font-size: .78rem; }
.kv-v { color: var(--ink); font-weight: 600; }
.inline-ico { opacity: .7; }
.notice { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; background: var(--surface-2); font-size: .85rem; }
.notice.warn { border-color: #f0d9a8; background: var(--warn-weak); }

/* ---------- Responsive (tablet) ---------- */
@media (max-width: 1080px) {
  .designer { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 0 1fr; }
  .sidenav { position: fixed; top: var(--topbar-h); bottom: 0; width: var(--nav-w); z-index: 40; box-shadow: var(--shadow-2); }
  .shell:not(.nav-open) .sidenav { display: none; }
  .topbar-center { display: none; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}

/* ---- Prebuilt Journey Catalogue (Registry v2, Step 2 Phase 5) ------------ */
.cat-filters { padding: .75rem 1rem; }
.cat-filter-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.cat-filter-row .field { margin: 0; }
.cat-filter-row .field.grow { flex: 1 1 260px; min-width: 220px; }
.cat-filter-row select, .cat-filter-row input[type="search"] { min-width: 140px; }
.cat-purpose { font-size: .82rem; margin-top: .15rem; max-width: 48ch; white-space: normal; }
.cat-detail .card-head { align-items: flex-start; }
.cat-meta { border-top: 1px solid var(--line); padding-top: .85rem; margin-top: .85rem; }
.cat-meta:first-of-type { border-top: 0; }
.cat-meta h3 { margin: 0 0 .4rem; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.cat-meta p { margin: 0; color: var(--ink-2); }
tr.row-click.selected > td { background: var(--brand-weak); }

/* ===== KEYMAKER V2 §7.9 — tile-first IA ===== */
.tile-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 1rem; }
.tile-controls .ctrl { display: inline-flex; align-items: center; gap: .35rem; }
.tile-controls .count { margin-left: auto; }
.search-input { flex: 1 1 320px; min-width: 220px; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: .9rem; }
.search-input:focus { outline: 2px solid var(--accent, #4f7cff); outline-offset: 1px; }
.select { padding: .4rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: .85rem; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.tile-grid.inner { grid-column: 1 / -1; margin: .2rem 0 .6rem; }
.group-expand { grid-column: 1 / -1; padding: .3rem .3rem .3rem 1rem; border-left: 2px solid var(--line); }
.tile { background: var(--surface-1, var(--surface-2)); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; cursor: pointer; transition: border-color .12s, transform .12s; }
.tile:hover, .tile:focus { border-color: var(--accent, #4f7cff); transform: translateY(-1px); outline: none; }
.tile:focus-visible { outline: 2px solid var(--accent, #4f7cff); outline-offset: 2px; }
.group-tile { background: var(--surface-2); }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.tile-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0; }
.flow-hint { font-size: .78rem; color: var(--ink-2); margin: .2rem 0; font-family: var(--mono, monospace); }
.icon-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.icon-label svg { flex: 0 0 auto; color: var(--accent, #4f7cff); }
.icon-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.demo { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
@media (max-width: 640px) { .tile-grid { grid-template-columns: 1fr; } .tile-controls .count { margin-left: 0; } }