/* The migration wizard's visual system.
 *
 * Fluent/Fabric light theme. Every token is prefixed `--fx-` and every one of them is
 * declared under `[data-theme="fabric"]`, never on a bare `:root`. That is deliberate
 * defence, not style: `console.html` is a self-contained dark page that owns `--bg`,
 * `--ink`, `--ok`, `--line` and `--accent` inline, and an unprefixed light palette in a
 * sibling file is one stray <link> away from turning the operator console into
 * unreadable white-on-white.
 *
 * No @import, no CDN font, no external image. Corporate TLS interception is a live
 * constraint in this repo — see the truststore import in api/app.py — so everything the
 * page needs arrives from the same origin that served it.
 */

[data-theme="fabric"] {
  /* surfaces */
  --fx-canvas:#f5f5f5;
  --fx-surface:#ffffff;
  --fx-surface-alt:#faf9f8;
  --fx-surface-sunken:#f3f2f1;
  --fx-border:#e1dfdd;
  --fx-border-strong:#c8c6c4;
  --fx-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.06);

  /* ink */
  --fx-ink:#242424;
  --fx-ink-2:#424242;
  --fx-ink-muted:#616161;
  --fx-ink-subtle:#8a8886;
  --fx-ink-disabled:#a19f9d;

  /* the dark command bar */
  --fx-bar:#1b1a19;
  --fx-bar-ink:#ffffff;
  --fx-bar-ink-muted:#c8c6c4;
  --fx-bar-divider:#484644;
  --fx-avatar:#0d7d7d;
  --fx-waffle:#f2812a;

  /* teal primary */
  --fx-teal:#0d7d7d;
  --fx-teal-hover:#0a6464;
  --fx-teal-tint:#e6f4f4;
  --fx-teal-track:#cfe9e9;

  /* blue upload accent */
  --fx-blue:#0f6cbd;
  --fx-blue-tint:#eff6fc;
  --fx-blue-dash:#7fa8d9;

  /* status */
  --fx-green:#107c10; --fx-green-tint:#dff6dd; --fx-green-border:#9fd89f;
  --fx-amber:#f7a600; --fx-amber-tint:#fff4ce; --fx-amber-border:#f3ce7a;
  --fx-amber-ink:#7a4d00;   /* amber tint fails contrast with --fx-ink */
  --fx-red:#c50f1f;   --fx-red-tint:#fde7e9;   --fx-red-border:#eeacb2;
  --fx-grey:#8a8886;  --fx-grey-tint:#f3f2f1;  --fx-grey-border:#d2d0ce;

  /* the four completion phase cards */
  --fx-phase-1:#0f6cbd; --fx-phase-2:#0d7d7d;
  --fx-phase-3:#f2812a; --fx-phase-4:#f7a600;

  /* the deployment log */
  --fx-term-bg:#0c0c0c; --fx-term-ink:#cccccc; --fx-term-dim:#767676;
  --fx-term-actor:#3b78ff; --fx-term-ok:#16c60c; --fx-term-bad:#e74856;

  /* an unavailable control — this repo's signature pattern */
  --fx-gap-ink:#8a8886; --fx-gap-border:#c8c6c4;

  --fx-radius:6px;
  --fx-rail:270px;
  --fx-bar-h:48px;
}

* { box-sizing:border-box; }

html, body { height:100%; margin:0; }

body {
  background:var(--fx-canvas); color:var(--fx-ink-2);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}

code, .mono {
  font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace; font-size:12px;
}

/* ------------------------------------------------------------------ command bar */
#bar {
  flex:0 0 auto; height:var(--fx-bar-h); background:var(--fx-bar);
  color:var(--fx-bar-ink); display:flex; align-items:center; gap:12px;
  padding:0 16px;
}
#bar .waffle {
  display:grid; grid-template-columns:repeat(3,4px); gap:2px; margin-right:4px;
}
#bar .waffle i { width:4px; height:4px; background:var(--fx-waffle); border-radius:1px; }
#bar .product { font-weight:600; font-size:15px; letter-spacing:.1px; }
#bar .rule { width:1px; height:20px; background:var(--fx-bar-divider); }
#bar .workload { color:var(--fx-bar-ink-muted); font-size:14px; }
#bar .spacer { flex:1; }
#bar a.barlink {
  color:var(--fx-bar-ink-muted); text-decoration:none; font-size:12.5px;
  padding:4px 8px; border-radius:4px;
}
#bar a.barlink:hover { background:#ffffff1a; color:#fff; }
#bar .avatar {
  width:30px; height:30px; border-radius:50%; background:var(--fx-avatar);
  color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600;
  cursor:pointer; border:0;
}

/* ------------------------------------------------------------------ shell */
#shell {
  flex:1; display:grid; grid-template-columns:var(--fx-rail) minmax(0,1fr);
  min-height:0;
}

#rail {
  background:var(--fx-surface); border-right:1px solid var(--fx-border);
  overflow-y:auto; padding:8px 0;
}
#rail .item {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 16px; border:0; background:none; cursor:pointer; font:inherit;
  color:var(--fx-ink-2); border-left:3px solid transparent;
}
#rail .item:hover { background:var(--fx-surface-alt); }
#rail .item[aria-current="true"] {
  background:var(--fx-teal-tint); border-left-color:var(--fx-teal);
  color:var(--fx-teal); font-weight:600;
}
#rail .item[data-state="pending"] { color:var(--fx-ink-disabled); }
#rail .item .mark { width:16px; text-align:center; flex:0 0 16px; }
#rail .group {
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fx-ink-subtle); padding:18px 16px 6px;
}
#rail hr { border:0; border-top:1px solid var(--fx-border); margin:8px 0 0; }

#main { display:flex; flex-direction:column; min-width:0; min-height:0; }

/* ------------------------------------------------------------------ page head */
#head {
  flex:0 0 auto; background:var(--fx-surface);
  border-bottom:1px solid var(--fx-border); padding:18px 28px 14px;
}
#head h1 { margin:0; font-size:26px; font-weight:600; color:var(--fx-ink); }
#head p { margin:4px 0 0; color:var(--fx-ink-muted); }

/* ------------------------------------------------------------------ stepper */
#stepper {
  flex:0 0 auto; display:flex; align-items:flex-start; padding:20px 28px 4px;
  gap:0;
}
#stepper .stop { display:flex; flex-direction:column; align-items:center; gap:6px; }
#stepper .bead {
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:600; background:var(--fx-grey-border); color:#fff;
  border:2px solid transparent;
}
#stepper .stop[data-state="done"]    .bead { background:var(--fx-green); }
#stepper .stop[data-state="caveat"]  .bead { background:var(--fx-green);
                                             border-color:var(--fx-amber); }
#stepper .stop[data-state="active"]  .bead { background:var(--fx-teal); }
#stepper .stop[data-state="blocked"] .bead { background:var(--fx-amber);
                                             color:var(--fx-amber-ink); }
#stepper .stop[data-state="failed"]  .bead,
#stepper .stop[data-state="stopped"] .bead { background:var(--fx-red); }
#stepper .label {
  font-size:11.5px; color:var(--fx-ink-subtle); white-space:nowrap; max-width:132px;
  overflow:hidden; text-overflow:ellipsis;
}
#stepper .stop[data-state="active"] .label { color:var(--fx-teal); font-weight:600; }
#stepper .link { flex:1; height:2px; background:var(--fx-grey-border); margin-top:15px; }
#stepper .link[data-passed="true"] { background:var(--fx-green); }

/* ------------------------------------------------------------------ content */
#content { flex:1; overflow-y:auto; padding:18px 28px 28px; min-height:0; }

.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.card {
  background:var(--fx-surface); border:1px solid var(--fx-border);
  border-radius:var(--fx-radius); box-shadow:var(--fx-shadow); padding:18px 20px;
}
.card > h2 { margin:0 0 2px; font-size:19px; font-weight:600; color:var(--fx-ink); }
.card > h2 + p { margin:0 0 14px; color:var(--fx-ink-muted); font-size:13px; }
.card.flush { padding:0; overflow:hidden; }

/* a card whose top border names a completion phase */
.card.phase { border-top:4px solid var(--fx-grey); }
.card.phase.p1 { border-top-color:var(--fx-phase-1); }
.card.phase.p2 { border-top-color:var(--fx-phase-2); }
.card.phase.p3 { border-top-color:var(--fx-phase-3); }
.card.phase.p4 { border-top-color:var(--fx-phase-4); }
.card.phase h3 { margin:0 0 10px; font-size:14.5px; color:var(--fx-ink); }

/* ------------------------------------------------------------------ bits */
.tick { display:flex; gap:8px; padding:3px 0; font-size:13px; }
.tick .m { flex:0 0 14px; }
.tick.ok    .m { color:var(--fx-green); }
.tick.bad   .m { color:var(--fx-red); }
.tick.warn  .m { color:var(--fx-amber-ink); }
.tick.idle  .m,
.tick.idle       { color:var(--fx-ink-disabled); }
.tick .meta { margin-left:auto; color:var(--fx-ink-subtle); font-size:12px; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:13px; }
.kv dt { color:var(--fx-ink-subtle); }
.kv dd { margin:0; color:var(--fx-ink-2); word-break:break-word; }

.pill {
  display:inline-flex; align-items:center; gap:5px; padding:1px 9px; border-radius:11px;
  font-size:11.5px; font-weight:600; border:1px solid var(--fx-grey-border);
  background:var(--fx-grey-tint); color:var(--fx-ink-muted);
}
.pill.ok      { background:var(--fx-green-tint); border-color:var(--fx-green-border);
                color:var(--fx-green); }
.pill.warn    { background:var(--fx-amber-tint); border-color:var(--fx-amber-border);
                color:var(--fx-amber-ink); }
.pill.bad     { background:var(--fx-red-tint); border-color:var(--fx-red-border);
                color:var(--fx-red); }
.pill.busy    { background:var(--fx-teal-tint); border-color:var(--fx-teal);
                color:var(--fx-teal); }

.dot { width:8px; height:8px; border-radius:50%; background:var(--fx-grey); flex:0 0 8px; }
.dot.ok { background:var(--fx-green); } .dot.bad { background:var(--fx-red); }
.dot.warn { background:var(--fx-amber); }
.dot.busy { background:var(--fx-teal); animation:fxpulse 1.6s ease-in-out infinite; }
@keyframes fxpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.note {
  background:var(--fx-surface-sunken); border-left:3px solid var(--fx-border-strong);
  padding:10px 12px; border-radius:0 4px 4px 0; font-size:13px; margin:12px 0 0;
  color:var(--fx-ink-2);
}
.note.warn { background:var(--fx-amber-tint); border-left-color:var(--fx-amber); }
.note.bad  { background:var(--fx-red-tint);   border-left-color:var(--fx-red); }
.note.info { background:var(--fx-blue-tint);  border-left-color:var(--fx-blue); }

/* ------------------------------------------------------------------ buttons */
.btn {
  font:inherit; font-size:13px; padding:7px 16px; border-radius:4px; cursor:pointer;
  background:var(--fx-surface); color:var(--fx-ink-2);
  border:1px solid var(--fx-border-strong);
}
.btn:hover:not(:disabled) { background:var(--fx-surface-alt); }
.btn.primary {
  background:var(--fx-teal); border-color:var(--fx-teal); color:#fff; font-weight:600;
}
.btn.primary:hover:not(:disabled) { background:var(--fx-teal-hover); }
.btn.blue { background:var(--fx-blue); border-color:var(--fx-blue); color:#fff; }
.btn.bad  { color:var(--fx-red); border-color:var(--fx-red-border); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
/* An unbuilt endpoint. Dashed so it reads as "not here" rather than "not yet allowed". */
.btn.gap {
  border-style:dashed; color:var(--fx-gap-ink); border-color:var(--fx-gap-border);
  background:var(--fx-surface); cursor:not-allowed;
}
.btn.link {
  border:0; background:none; color:var(--fx-blue); padding:2px 4px;
  text-decoration:none; display:inline-block;
}
.btn.link:hover:not(:disabled) { text-decoration:underline; background:none; }

/* ------------------------------------------------------------------ forms */
label.field { display:block; margin:0 0 12px; }
label.field > span { display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; }
label.field .hint { display:block; font-weight:400; color:var(--fx-ink-subtle);
                    font-size:12px; margin-top:3px; }
input[type=text], input[type=email], textarea, select {
  width:100%; font:inherit; font-size:13px; padding:7px 9px; color:var(--fx-ink);
  background:var(--fx-surface); border:1px solid var(--fx-border-strong);
  border-radius:4px;
}
textarea { min-height:76px; resize:vertical; }
input:focus, textarea:focus, select:focus {
  outline:2px solid var(--fx-teal); outline-offset:-1px; border-color:var(--fx-teal);
}
.counter { float:right; font-weight:400; color:var(--fx-ink-subtle); font-size:11.5px; }
.counter.over { color:var(--fx-red); font-weight:600; }

/* ------------------------------------------------------------------ dropzone */
.drop {
  border:2px dashed var(--fx-blue-dash); background:var(--fx-blue-tint);
  border-radius:var(--fx-radius); padding:34px 20px; text-align:center; cursor:pointer;
  display:block;
}
.drop.over { background:#e2effa; border-color:var(--fx-blue); }
.drop .arrow { font-size:26px; color:var(--fx-blue); line-height:1; }
.drop .lead { font-weight:600; color:var(--fx-ink); margin-top:8px; }
.drop .or { color:var(--fx-ink-muted); font-size:12.5px; margin:6px 0; }
.picked {
  display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 12px;
  background:var(--fx-green-tint); border:1px solid var(--fx-green-border);
  border-radius:4px; font-size:13px; color:var(--fx-green);
}
.picked .rm { margin-left:auto; }

/* ------------------------------------------------------------------ tables */
table.grid-t { width:100%; border-collapse:collapse; font-size:13px; }
table.grid-t th {
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--fx-ink-subtle); padding:9px 14px; background:var(--fx-surface-alt);
  border-bottom:1px solid var(--fx-border); font-weight:600;
}
table.grid-t td { padding:9px 14px; border-bottom:1px solid var(--fx-border); }
table.grid-t tr:last-child td { border-bottom:0; }

/* ------------------------------------------------------------------ deployment */
.bar-track {
  height:10px; background:var(--fx-teal-track); border-radius:5px; overflow:hidden;
}
.bar-fill { height:100%; background:var(--fx-teal); transition:width .4s ease; }
.bar-fill.unknown {
  width:100%;
  background:linear-gradient(90deg,var(--fx-teal-track),var(--fx-teal),var(--fx-teal-track));
  background-size:200% 100%; animation:fxslide 1.6s linear infinite;
}
@keyframes fxslide { from{background-position:200% 0} to{background-position:-200% 0} }
.bar-line { display:flex; margin-top:8px; font-size:13px; color:var(--fx-ink-muted); }
.bar-line b { margin-left:auto; color:var(--fx-teal); }

.step-card { border:1px solid var(--fx-border); border-radius:var(--fx-radius);
             overflow:hidden; background:var(--fx-surface); }
.step-card > .hd {
  padding:10px 14px; font-weight:600; font-size:13.5px; display:flex; gap:8px;
  background:var(--fx-grey-tint); color:var(--fx-ink-muted);
  border-bottom:1px solid var(--fx-border);
}
.step-card[data-state="done"]    > .hd { background:var(--fx-green-tint);
                                         color:var(--fx-green); }
.step-card[data-state="running"] > .hd { background:var(--fx-amber-tint);
                                         color:var(--fx-amber-ink); }
.step-card[data-state="failed"]  > .hd,
.step-card[data-state="stopped"] > .hd { background:var(--fx-red-tint);
                                         color:var(--fx-red); }
.step-card > .bd { padding:12px 14px; }
.step-card .how {
  font-family:ui-monospace,Consolas,monospace; font-size:11.5px;
  color:var(--fx-ink-subtle); background:var(--fx-surface-sunken); padding:4px 7px;
  border-radius:3px; margin-bottom:9px; word-break:break-all;
}
.step-card .foot { margin-top:9px; font-size:12.5px; }
.step-card[data-state="done"]    .foot { color:var(--fx-green); }
.step-card[data-state="running"] .foot { color:var(--fx-amber-ink); }
.step-card[data-state="failed"]  .foot,
.step-card[data-state="stopped"] .foot { color:var(--fx-red); }

.log {
  background:var(--fx-term-bg); color:var(--fx-term-ink); border-radius:4px;
  padding:12px 14px; font-family:ui-monospace,Consolas,monospace; font-size:11.5px;
  line-height:1.7; max-height:280px; overflow:auto;
}
.log .t { color:var(--fx-term-dim); }
.log .a { color:var(--fx-term-actor); }
.log .e { color:var(--fx-term-ok); }
.log .e.bad { color:var(--fx-term-bad); }
.log .d { color:var(--fx-term-ink); }

/* ------------------------------------------------------------------ gate */
.gate {
  border:1px solid var(--fx-amber-border); border-left:4px solid var(--fx-amber);
  background:var(--fx-surface); border-radius:var(--fx-radius); padding:18px 20px;
  margin-bottom:18px; box-shadow:var(--fx-shadow);
}
.gate h2 { margin:0 0 2px; font-size:18px; color:var(--fx-ink); }
.gate .why { color:var(--fx-ink-muted); font-size:13px; margin:0 0 14px; }
.gate .dev {
  background:var(--fx-amber-tint); border:1px solid var(--fx-amber-border);
  border-radius:4px; padding:10px 12px; margin:0 0 10px; font-size:13px;
}
.gate .dev dt { font-weight:600; color:var(--fx-amber-ink); }
.gate .acts { display:flex; gap:8px; align-items:center; margin-top:14px; }
.gate .acts .spacer { flex:1; }
.gate .blockers { font-size:12.5px; color:var(--fx-ink-muted); margin-top:10px; }
label.check { display:flex; gap:8px; align-items:flex-start; font-size:13px;
              background:var(--fx-amber-tint); border:1px solid var(--fx-amber-border);
              padding:9px 11px; border-radius:4px; margin:10px 0; }

/* ------------------------------------------------------------------ banner */
.banner {
  display:flex; gap:16px; align-items:center; border-radius:var(--fx-radius);
  padding:20px 22px; margin-bottom:18px; border:1px solid var(--fx-green-border);
  background:var(--fx-green-tint);
}
.banner .seal {
  width:52px; height:52px; border-radius:50%; background:var(--fx-green); color:#fff;
  display:grid; place-items:center; font-size:26px; flex:0 0 52px;
}
.banner h2 { margin:0; font-size:22px; color:var(--fx-green); }
.banner p { margin:3px 0 0; font-size:13px; color:var(--fx-ink-2); }
.banner.bad { background:var(--fx-red-tint); border-color:var(--fx-red-border); }
.banner.bad .seal { background:var(--fx-red); } .banner.bad h2 { color:var(--fx-red); }
.banner.busy { background:var(--fx-teal-tint); border-color:var(--fx-teal); }
.banner.busy .seal { background:var(--fx-teal); } .banner.busy h2 { color:var(--fx-teal); }

/* ------------------------------------------------------------------ footer */
#foot {
  flex:0 0 auto; background:var(--fx-surface); border-top:1px solid var(--fx-border);
  padding:12px 28px; display:flex; align-items:center; gap:10px;
}
#foot .status { display:flex; align-items:center; gap:8px; font-size:12.5px;
                color:var(--fx-ink-muted); }
#foot .spacer { flex:1; }

/* ------------------------------------------------------------------ modal + toast */
#veil {
  position:fixed; inset:0; background:#00000059; display:none; place-items:center;
  z-index:50; padding:20px;
}
#veil.on { display:grid; }
.modal {
  background:var(--fx-surface); border-radius:var(--fx-radius); padding:22px 24px;
  width:min(560px,100%); max-height:82vh; overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.modal h3 { margin:0 0 10px; font-size:18px; color:var(--fx-ink); }
.modal .acts { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

#toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:60;
         display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast {
  background:var(--fx-bar); color:#fff; padding:10px 16px; border-radius:4px;
  font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,.25); max-width:560px;
}
.toast.ok  { background:var(--fx-green); }
.toast.bad { background:var(--fx-red); }

.empty { color:var(--fx-ink-disabled); font-size:13px; padding:10px 0; }

/* One breakpoint, at 900px rather than 1180px: a 1080p display at 125% Windows
 * scaling reports 1038 CSS pixels, which is the common case that would otherwise
 * collapse a desktop layout. */
@media (max-width:900px) {
  #shell { grid-template-columns:1fr; }
  #rail {
    display:flex; overflow-x:auto; border-right:0;
    border-bottom:1px solid var(--fx-border); padding:0;
  }
  #rail .group, #rail hr { display:none; }
  #rail .item { border-left:0; border-bottom:3px solid transparent; white-space:nowrap; }
  #rail .item[aria-current="true"] { border-bottom-color:var(--fx-teal); }
  #stepper .label { display:none; }
  #head, #content, #foot { padding-left:16px; padding-right:16px; }
}