/* Decolla (by The Cloud Platform) - portal wizard.
   Clean professional SaaS palette (slate + blue). No framework, no build. */
:root {
  /* The Cloud Platform brand blues (TCP Colours.docx) */
  --tcp-deep: #2578BC;   /* primary */
  --tcp-mid:  #33AAE1;
  --tcp-light:#6DC8EA;
  --bg: #f3f7fb;
  --panel: #ffffff;
  --ink: #12202e;
  --ink-soft: #5b6b80;
  --line: #e2e8f2;
  --accent: #2578BC;
  --accent-ink: #ffffff;
  --accent-soft: #e4f1fb;
  --green: #16a34a; --green-bg: #e9f8ef;
  --blue: #2578BC;  --blue-bg: #e4f1fb;
  --amber: #b45309; --amber-bg: #fdf1e0;
  --purple: #7c3aed; --purple-bg: #f1ebfe;
  --grey: #64748b;  --grey-bg: #eef2f7;
  --red: #dc2626;   --red-bg: #fdeaea;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16,32,46,.06), 0 8px 24px rgba(16,32,46,.06);
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; min-height: 100vh;
}

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.4rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: .8rem; }
.logo-img { height: 42px; width: auto; display: block; }
.product {
  font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: var(--tcp-deep);
  padding-left: .8rem; border-left: 1px solid var(--line);
}
.product span { font-weight: 500; color: var(--ink-soft); }
@media (max-width: 560px) { .product { display: none; } }
.env {
  font-size: .72rem; color: var(--ink-soft); background: var(--grey-bg);
  border: 1px solid var(--line); padding: .3rem .6rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.env.prod { color: #065f46; background: var(--green-bg); border-color: #bfe7cd; }

/* stepper */
.stepper {
  display: flex; gap: .3rem; padding: .9rem 1.4rem; max-width: 980px; margin: 0 auto; width: 100%;
  overflow-x: auto;
}
.step {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem;
  color: var(--ink-soft); font-size: .86rem; white-space: nowrap; border-radius: 8px;
}
.step .dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grey-bg); color: var(--ink-soft); font-size: .74rem; font-weight: 700;
  border: 1px solid var(--line);
}
.step.active { color: var(--ink); font-weight: 650; }
.step.active .dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.step.done .dot { background: var(--green); color: #fff; border-color: var(--green); }
.step .bar { width: 26px; height: 2px; background: var(--line); }

/* stage */
.stage { flex: 1; max-width: 980px; margin: 0 auto; width: 100%; padding: .6rem 1.4rem 2rem; }
.loading { color: var(--ink-soft); padding: 3rem; text-align: center; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem 1.6rem; margin-bottom: 1rem;
}
.panel h2 { margin: 0 0 .3rem; font-size: 1.3rem; letter-spacing: -.01em; }
.panel .lede { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.hr { height: 1px; background: var(--line); margin: 1.2rem 0; border: 0; }

/* forms */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink); }
.field .hint { font-size: .72rem; color: var(--ink-soft); font-weight: 400; }
.field input, .field select {
  width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field .other-input { margin-top: .4rem; }
.muted { color: var(--ink-soft); font-weight: 400; }

/* Discover platform tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.1rem .8rem; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); transition: .12s;
}
.tile:hover { border-color: var(--tcp-light); background: var(--accent-soft); }
.tile.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(37,120,188,.12); }
.tile .ti { font-size: 1.8rem; line-height: 1; }
.group-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 700; margin: 1.3rem 0 .6rem; }

/* buttons */
.btn {
  font: inherit; font-weight: 600; padding: .55rem 1.05rem; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); transition: .12s;
}
.btn:hover { border-color: #c7d2e2; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #1e5f97; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.small { padding: .35rem .7rem; font-size: .82rem; }

/* connect stub */
.stub { text-align: center; padding: 2.4rem 1rem; }
.stub .big { font-size: 2.6rem; }
.stub h3 { margin: .6rem 0 .3rem; }
.stub p { color: var(--ink-soft); max-width: 460px; margin: .3rem auto 1.3rem; line-height: 1.55; }
.soon { display:inline-block; font-size:.7rem; font-weight:700; color:var(--amber); background:var(--amber-bg); padding:.2rem .5rem; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; }

/* catalogue pick */
.toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1rem; }
.toolbar .spacer { flex: 1; }
.counter { font-size:.85rem; color:var(--ink-soft); }
.counter b { color: var(--ink); }
.section { border:1px solid var(--line); border-radius:10px; margin-bottom:.7rem; overflow:hidden; }
.section > summary {
  list-style:none; cursor:pointer; padding:.7rem .9rem; display:flex; align-items:center; gap:.6rem;
  background:#fbfcfe; font-weight:650;
}
.section > summary::-webkit-details-marker { display:none; }
.section > summary .chev { color: var(--ink-soft); transition:.15s; }
.section[open] > summary .chev { transform: rotate(90deg); }
.section .sec-count { margin-left:auto; font-size:.78rem; color:var(--ink-soft); font-weight:500; }
.items { padding:.3rem .5rem .6rem; }
.item {
  display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem; border-radius:8px;
}
.item:hover { background: #f7f9fd; }
.item input { width:17px; height:17px; accent-color: var(--accent); }
.item .lab { flex:1; font-size:.9rem; }
.item.added { background: var(--green-bg); }
.item.skipped { opacity:.55; }
.item.skipped .lab { text-decoration: line-through; }

/* badges */
.badge { font-size:.68rem; font-weight:700; padding:.13rem .45rem; border-radius:999px; white-space:nowrap; }
.badge.tier { background: var(--grey-bg); color: var(--grey); }
.rev-auto { background: var(--green-bg); color: var(--green); }
.rev-reverse { background: var(--amber-bg); color: var(--amber); }
.rev-irreversible { background: var(--red-bg); color: var(--red); }

/* conditional banner */
.banner {
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:.8rem 1rem; border-radius:10px;
  background: var(--blue-bg); border:1px solid #cfe0ff; margin-bottom:1rem; font-size:.88rem;
}
.banner .pill { font-weight:700; }
.banner .g { color: var(--green); }
.banner .s { color: var(--amber); }
.banner .n { color: var(--ink-soft); }

/* plan */
.chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.1rem; }
.chip {
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; min-width:88px;
  text-align:center; box-shadow: var(--shadow);
}
.chip .n { font-size:1.5rem; font-weight:750; line-height:1; }
.chip .l { font-size:.72rem; color:var(--ink-soft); margin-top:.25rem; text-transform:uppercase; letter-spacing:.04em; }
.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.tbl th, .tbl td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.tbl tr:hover td { background:#fafcff; }
.st { font-size:.7rem; font-weight:700; padding:.13rem .45rem; border-radius:999px; }
.st-READY { background:var(--green-bg); color:var(--green); }
.st-GENERALISE { background:var(--blue-bg); color:var(--blue); }
.st-MANUAL { background:var(--amber-bg); color:var(--amber); }
.st-LICENCE-GROUP { background:var(--purple-bg); color:var(--purple); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.8rem; color:var(--ink-soft); }
.warn-list, .skip-list { list-style:none; padding:0; margin:.4rem 0 0; }
.warn-list li, .skip-list li { padding:.4rem .6rem; border-radius:8px; margin-bottom:.35rem; font-size:.84rem; }
.warn-list li { background: var(--amber-bg); color:#7c4a12; }
.skip-list li { background: var(--grey-bg); color: var(--ink-soft); }
.subhead { font-weight:700; margin:1.3rem 0 .3rem; font-size:.95rem; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }

/* footer */
.footbar {
  position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line);
  padding: .8rem 1.4rem; display: flex; align-items: center; justify-content: space-between;
}
.foot-status { font-size:.82rem; color: var(--ink-soft); }
.foot-actions { display:flex; gap:.6rem; }
.err { color: var(--red); }