/* Footer365 guided Microsoft 365 onboarding wizard. Self-contained; does not depend on Bootstrap. */

:root {
  color-scheme: light dark;
  --bg: #eef3f3;
  --surface: #ffffff;
  --surface-2: #f5f9f9;
  --surface-3: #eaf1f1;
  --border: #d7e1e2;
  --border-strong: #c3d0d1;
  --text: #14252b;
  --muted: #5a6f75;
  --faint: #86999e;
  --accent: #1668ff;
  --accent-hover: #0b52d6;
  --accent-soft: #eef4ff;
  --success: #15803d;
  --success-soft: #dcf2e3;
  --working: #b45309;
  --working-soft: #fcefd8;
  --spinner: #0d6efd;
  --danger: #b91c1c;
  --danger-soft: #fbe3e3;
  --shadow: 0 1px 2px rgba(16, 40, 44, .05), 0 10px 30px rgba(16, 40, 44, .07);
  --radius: 12px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}

/* Keyed on the data-bs-theme attribute rather than the OS preference, so the Light/Dark/System toggle can
   override it. The attribute is set before first paint by the inline script in each page's head. */
:root[data-bs-theme="dark"] {
    --bg: #0c1416;
    --surface: #15201f;
    --surface-2: #111b1c;
    --surface-3: #0e1718;
    --border: #26363a;
    --border-strong: #34474b;
    --text: #e7eff0;
    --muted: #93a6ab;
    --faint: #6d8288;
    --accent: #5b8dff;
    --accent-hover: #8fb2ff;
    --accent-soft: rgba(59, 130, 255, .18);
    --success: #4ade80;
    --success-soft: #10301d;
    --working: #fbbf24;
    --working-soft: #33280d;
    --danger: #f87171;
    --danger-soft: #3a1616;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .4);
    color-scheme: dark;
}

/* The browser draws native controls, such as stage 2's radios, from color-scheme. Left on "light dark" it follows the
   operating system, so a light page on a dark system showed dark radios; the chosen theme decides instead. */
:root[data-bs-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 750px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

.masthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; font-size: 1.05rem; }
/* The light/dark swap lives in auth.css, which every Auth page loads; only the size is set here. */
/* Size only: which variant is shown belongs to auth.css. This file loads after it, so setting display here won at
   equal specificity and put both wordmarks on screen at once. */
.brand-wordmark { height: 35px; width: auto; }

/* Sits opposite the logo, courtesy of the masthead's space-between. Quiet by design: the wizard's job is the
   consent, so the way out should be findable without competing with the primary action. */
.masthead-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--muted); text-decoration: none; }
.masthead-back:hover { color: var(--text); text-decoration: underline; }

.intro { margin-bottom: 1.5rem; }
.intro h1 { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5rem; text-wrap: balance; }
.intro p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.context {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center;
  margin-top: 1rem; padding: .7rem .9rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; font-size: .9rem;
}
.context .org { font-weight: 650; color: var(--text); }
.context .sep { color: var(--faint); }
.context .role { color: var(--muted); }
.context .lockline { display: flex; align-items: center; gap: .4rem; color: var(--muted); margin-left: auto; }

.wiz-alert {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: 1.5rem; padding: .8rem 1rem;
  background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: 10px; color: var(--danger); font-size: .95rem;
}

/* Same shape as .wiz-alert but amber: something to weigh before choosing, not something that has gone wrong.
   Sits inside a stage rather than above the wizard, so its margin runs the other way. */
.wiz-caution {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: .9rem 0 .2rem; padding: .8rem 1rem;
  background: var(--working-soft); border: 1px solid color-mix(in srgb, var(--working) 40%, transparent);
  border-radius: 10px; color: var(--working); font-size: .95rem;
}

.stages { display: flex; flex-direction: column; }
.stage { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding-bottom: 1.1rem; }
.rail { display: flex; flex-direction: column; align-items: center; }
.marker {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--muted);
  z-index: 1;
}
.connector { width: 2px; flex: 1 1 auto; background: var(--border); margin: 4px 0; min-height: 12px; }
.stage:last-child .connector { display: none; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.card-head { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.1rem; }
.card-head h2 { font-size: 1.08rem; margin: 0; letter-spacing: -.01em; flex: 1 1 auto; }
.badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .26rem .55rem; border-radius: 999px; white-space: nowrap;
}
.badge.locked { color: var(--faint); background: var(--surface-3); }
.badge.active { color: var(--accent); background: var(--accent-soft); }
.badge.working { color: var(--working); background: var(--working-soft); }
.badge.done { color: var(--success); background: var(--success-soft); }
.badge.error { color: var(--danger); background: var(--danger-soft); }

.card-body { padding: 0 1.1rem 1.1rem; }
.card-body p { margin: 0 0 .9rem; color: var(--muted); }
.card-body p strong { color: var(--text); font-weight: 620; }

.stage[data-state="locked"] .card { opacity: .55; }
.stage[data-state="locked"] .marker { border-style: dashed; }
.stage[data-state="active"] .card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stage[data-state="active"] .marker { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.stage[data-state="working"] .marker { border-color: var(--working); color: var(--working); background: var(--working-soft); }
.stage[data-state="done"] .marker { border-color: var(--success); background: var(--success); color: #fff; }
[data-bs-theme="dark"] .stage[data-state="done"] .marker { color: #04211d; }
.stage[data-state="done"] .connector { background: var(--success); }
.stage[data-state="error"] .marker { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.stage[data-state="error"] .card { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

/* A stage the Outlook add-in only does not need (CP-038): passed over rather than waiting, so it is drawn quieter than a
   locked one would suggest it is coming, with a dashed marker and a muted badge. One that is open but waits on nothing
   reads as an ordinary stage with a muted badge. */
.stage[data-state="skipped"] .marker { border-style: dashed; color: var(--faint); }
/* Its badge is long, so on a phone it drops under the heading rather than squeezing it a word to a line. */
.stage[data-state="skipped"] .card-head { flex-wrap: wrap; }
.badge.skipped, .badge.optional { color: var(--muted); background: var(--surface-3); }

/* CP-008: where signed mail goes next once mail flow is live. Blue for information, amber for a rule of the
   customer's own that skips signed mail, which they need to change. */
.badge.warn { color: var(--working); background: var(--working-soft); }
.route-note {
  margin: .9rem 0 0; padding: .75rem .95rem; border-radius: 10px; font-size: .93rem;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  overflow-wrap: anywhere;
}
.route-note.warn {
  background: var(--working-soft); border-color: color-mix(in srgb, var(--working) 40%, transparent);
  border-left: 3px solid var(--working);
}
.card-body .route-note p { margin: 0 0 .4rem; color: var(--text); }
.route-note code { font-family: var(--font-mono); font-size: .82rem; background: var(--surface-3); padding: .05rem .35rem; border-radius: 5px; }
.route-note a { color: var(--accent); font-weight: 600; font-size: .9rem; }

.locked-note { display: flex; align-items: center; gap: .5rem; color: var(--faint); font-size: .92rem; margin: 0; }
.done-note { display: flex; align-items: center; gap: .5rem; color: var(--success); font-weight: 550; margin: 0; }
.error-note { display: flex; align-items: center; gap: .5rem; color: var(--danger); font-weight: 620; margin: 0 0 .6rem; }

.substeps { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.substeps li { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .92rem; }

.step-ic { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); box-sizing: border-box; position: relative; }
.step-ic.is-pending { border-color: var(--border-strong); }
.step-ic.is-running { border-color: color-mix(in srgb, var(--spinner) 28%, transparent); border-top-color: var(--spinner); animation: spin .8s linear infinite; }
.step-ic.is-done { background: var(--success); border-color: var(--success); }
.step-ic.is-done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
[data-bs-theme="dark"] .step-ic.is-done::after { border-color: #04211d; }
/* A step Exchange refused: a cross, never the tick of a finished step. */
.step-ic.is-failed { background: var(--danger); border-color: var(--danger); }
.step-ic.is-failed::before, .step-ic.is-failed::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; background: #fff; border-radius: 1px; }
.step-ic.is-failed::before { transform: rotate(45deg); }
.step-ic.is-failed::after { transform: rotate(-45deg); }
[data-bs-theme="dark"] .step-ic.is-failed::before, [data-bs-theme="dark"] .step-ic.is-failed::after { background: #3a1616; }

details.perm { border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); margin-bottom: 1rem; }
details.perm > summary {
  cursor: pointer; list-style: none; padding: .6rem .8rem; font-size: .9rem; font-weight: 550;
  display: flex; align-items: center; gap: .5rem; color: var(--text);
}
details.perm > summary::-webkit-details-marker { display: none; }
details.perm > summary .chev { margin-left: auto; transition: transform .2s; color: var(--faint); }
details.perm[open] > summary .chev { transform: rotate(90deg); }
.perm-list { padding: .2rem .8rem .8rem; margin: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.perm-item { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; font-size: .88rem; }
.perm-item .dot { color: var(--accent); margin-top: .28rem; }
.perm-item code { font-family: var(--font-mono); font-size: .8rem; background: var(--surface-3); padding: .05rem .35rem; border-radius: 5px; color: var(--text); }
.perm-item .why { color: var(--muted); display: block; margin-top: .1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer; text-decoration: none;
  padding: .68rem 1.1rem; border-radius: 9px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
[data-bs-theme="dark"] .btn-primary { color: #04211d; }
.btn-primary:hover { background: var(--accent-hover); }
/* Colour and border only. A ghost button sits beside a primary one on the add-in stage, so it must inherit the
   base .btn metrics: restating padding or font-size here is what made that row ragged. */
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--text); border-color: var(--faint); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.ms-logo { width: 16px; height: 16px; flex: none; }
.btn-hint { font-size: .84rem; color: var(--faint); margin: .55rem 0 0; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.btn-row-end { justify-content: flex-end; margin-top: .8rem; }

/* Stage 2: the two ways of adding signatures, as radio cards. The radio itself stays visible and native, so the choice
   works by keyboard and screen reader exactly as a radio does; the card around it only shows which one is chosen. */
.modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; margin: 0 0 .4rem; }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
.mode {
  display: grid; gap: .45rem; align-content: start; padding: .8rem .9rem;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  color: var(--muted); font-size: .9rem; cursor: pointer;
}
.mode:hover { border-color: var(--faint); }
.mode:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.mode:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
/* A grid rather than a wrapping row, so on a phone the title wraps beside its radio instead of leaving the radio alone on
   a line, and the Recommended pill sits under the title. */
.mode-head { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; column-gap: .5rem; row-gap: .35rem; }
.mode-head .rec-pill { grid-column: 2; justify-self: start; }
.mode-head b { color: var(--text); font-size: .98rem; font-weight: 650; }
.mode-head input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
.mode ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .25rem; line-height: 1.45; }
.rec-pill {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px; color: var(--accent); background: var(--accent-soft);
}
.mode:has(input:checked) .rec-pill { background: var(--surface); }

/* Stage 6 with the add-in only: Exchange PowerShell the organisation runs itself. */
.ps-steps { padding: .2rem .8rem .8rem; }
.ps-steps .wiz-caution { margin-top: .2rem; }
.ps-steps .steps-ol { margin-top: .8rem; }
.ps-block {
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 7px;
  padding: .5rem .65rem; margin: .4rem 0 .5rem; white-space: pre-wrap; overflow-wrap: anywhere;
}

.work-line { display: flex; align-items: center; gap: .6rem; color: var(--muted); margin: .2rem 0 0; }
.spinner {
  display: inline-block;
  width: 14px; height: 14px; flex: none;
  border: 2px solid color-mix(in srgb, var(--spinner) 28%, transparent);
  border-top-color: var(--spinner);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Stage 5 guided deployment helpers */
.manifest-box { display: flex; gap: .5rem; align-items: stretch; margin: 0 0 1rem; }
.manifest-box input {
  flex: 1 1 auto; font-family: var(--font-mono); font-size: .82rem;
  padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-2); color: var(--text); min-width: 0;
}
.steps-ol { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); font-size: .92rem; display: flex; flex-direction: column; gap: .4rem; }
.steps-ol li { padding-left: .2rem; }
.steps-ol strong { color: var(--text); font-weight: 600; }

/* The manifest upload route, kept for tenants that block the Microsoft store. Closed by default so the
   catalogue route above reads as the one to follow. */
.fallback { margin: .9rem 0 0; font-size: .9rem; }
.fallback > summary {
  cursor: pointer; color: var(--muted); padding: .35rem 0;
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
.fallback > summary::-webkit-details-marker { display: none; }
.fallback > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.fallback[open] > summary::before { transform: rotate(90deg); }
.fallback > summary:hover { color: var(--text); }
.fallback > *:not(summary) { margin-top: .5rem; }

.done-panel {
  margin-top: .75rem; border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
  background: var(--success-soft); border-radius: var(--radius); padding: 1.4rem 1.25rem; text-align: center;
}
.done-panel .big-tick { width: 54px; height: 54px; color: var(--success); margin: 0 auto .6rem; display: block; }
.done-panel h2 { margin: 0 0 .35rem; font-size: 1.35rem; letter-spacing: -.01em; }
.done-panel p { margin: 0 auto; color: var(--muted); max-width: 46ch; }
.done-panel p.done-offer {
  margin-top: .9rem; padding: .7rem .9rem; max-width: 52ch; color: var(--text); font-size: .92rem;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 9px;
}
.done-panel p.done-offer a { color: var(--accent); font-weight: 600; }
.done-cta { margin-top: 1.1rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

form.inline { display: inline; margin: 0; }

/* Reseller application form (theme-aware via the tokens above) */
.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--text); }
.field label .muted { color: var(--faint); font-weight: 400; }
.field input, .field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem;
  padding: .62rem .75rem; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface-2); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 76px; }
/* The shared country picker's trigger (combo.js), drawn as the wizard's own fields are, since no Bootstrap is loaded. */
.field .cw-select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem; text-align: left;
  padding: .62rem .75rem; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.field .cw-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field-err { color: var(--danger); font-size: .82rem; margin: .3rem 0 0; }
.err-summary { color: var(--danger); font-size: .9rem; margin: 0 0 1rem; }
.err-summary ul { margin: 0; padding-left: 1.1rem; }
.err-summary:empty { display: none; }

.verified {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .95rem; border-radius: 11px; margin-bottom: 1.1rem;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.verified .tick { color: var(--accent); flex: none; margin-top: .1rem; }
.verified b { display: block; color: var(--text); }
.verified span { color: var(--muted); font-size: .88rem; }

.info-panel { display: flex; gap: .7rem; align-items: flex-start; }
.info-panel .ico { flex: none; margin-top: .15rem; color: var(--accent); }