/* The client workflow shares the Manage palette; site chrome and the Halo ring keep their own look. */
:root { color-scheme: light dark; }
.wiz, .status { --page: #ececf0; --surface: #fff; --soft: #f4f4f7; --ink: #0c0c0e; --muted: #686872; --line: rgba(12,12,14,.12); --blue: #1264ff; --tint: #e7edfa; --text: 'Hanken Grotesk', sans-serif; --display: 'Poppins', sans-serif; --grad: #1264ff; --grad-deep: #1264ff; background: var(--page); color: var(--ink); font-family: var(--text); }
.wiz { box-shadow: none; border-radius: 22px; }
.wiz-top, .wiz-foot { background: var(--surface); }
.wiz-q { background: var(--surface); margin: 20px; border-radius: 22px; padding: 30px; }
.wiz-prev { background: var(--page); color: var(--ink); }
.wiz-q h2, .status h1 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.18; }
.wiz :is(.btn, .field, .pick, .drop), .status :is(.btn, .field) { border-radius: 12px; }
.wiz .btn, .status .btn { min-height: 40px; padding: 12px 18px; font: 500 14px/1.25 var(--display); background: var(--blue); color: #fff; box-shadow: none; }
.wiz .btn.ghost, .status .btn.ghost { background: var(--soft); color: var(--ink); box-shadow: none; }
.wiz :is(input, textarea, select), .status :is(input, textarea, select) { color: var(--ink); accent-color: var(--blue); }
.wiz .field, .status .field { font: 400 17px/1.4 var(--text); padding: 14px 16px; border: 0; background: var(--soft); }
.wiz .pick { background: var(--soft); }
.wiz .pick b { font-size: 21px; }
.wiz .pick:has(input:checked), .wiz .chip:has(input:checked) span { background: #0c0c0e; color: #fff; box-shadow: none; }
.wiz .pick:hover { background: var(--tint); }
.wiz .pick:has(input:checked) small { color: #e4e4e9; }
.wiz .pick:has(input:checked)::after { display: none; }
.wiz .wiz-ring .a, .status .st-ring .a { stroke: #1264ff; }
.wiz :focus, .status :focus { outline: none; box-shadow: none; }
.wiz :focus-visible, .status :focus-visible { background-color: var(--tint); }
.status { min-height: 100vh; padding-bottom: 60px; }
.status .wrap { gap: 20px; align-items: start; }
.status .st-left, .status .st-right { min-width: 0; padding: 30px; background: var(--surface); border-radius: 22px; }
.status .lead, .status .st-cap, .status .st-eta, .status .st-tabs, .status .stages small { color: var(--muted); }
.status .st-ring .t { stroke: var(--soft); }
.status .stages li { color: var(--muted); }
.status .stages li.done, .status .stages li.now, .status .label { color: var(--ink); }
.status .stages .c { border-color: var(--line); }
.status .stages .done .c, .status .stages .now .c { background: var(--blue); color: #fff; }
.status .st-tabs span, .status .frame .bar { background: var(--soft); color: var(--ink); }
.status .frame { border: 1px solid var(--line); box-shadow: none; border-radius: 12px; }
.status .st-actions form { padding: 24px 0 0; border-top: 1px solid var(--line); }
.status .revision-panel h2 { font: 500 24px/1.2 var(--display); }
.status .revision-panel .label { display: block; margin: 18px 0 8px; }
.status .revision-panel textarea { width: 100%; min-height: 150px; resize: vertical; }
.status .revision-panel select, .status .revision-panel input { max-width: 100%; }
.status .err { color: #c02b49; }
@media (prefers-color-scheme: dark) {
 .wiz, .status { --page: #121212; --surface: #282828; --soft: #313131; --ink: #f5f5f7; --muted: #b4b4bf; --line: rgba(255,255,255,.12); --tint: #3b3b44; }
 .wiz .pick:has(input:checked), .wiz .chip:has(input:checked) span { background: #0c0c0e; }
}
@media (max-width: 700px) {
 .wiz { border-radius: 0; }
 .wiz-main { grid-template-columns: minmax(0,1fr); }
 .wiz-q { margin: 16px; padding: 20px; }
 .wiz-prev { display: none; }
 .status .wrap { width: calc(100% - 32px); grid-template-columns: minmax(0,1fr); }
 .status .st-left, .status .st-right { padding: 20px; }
 .status .btns { flex-direction: column; }
 .status .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wiz *, .status * { animation: none !important; transition: none !important; } }
.wiz .ccpay { color: var(--ink); font-family: var(--text); }
.wiz .ccpay :is(.ccpay-body,.ccpay-card,.ccpay-band,.ccpay-step,.ccpay-pay) { background: var(--surface); color: var(--ink); }
.wiz .ccpay :is(h2,.ccpay-wizh) { font-family: var(--display); color: var(--ink); }
.wiz .ccpay .ccpay-field :is(input,textarea,select) { background: var(--soft); color: var(--ink); border: 0; border-radius: 12px; font-family: var(--text); }
.wiz .ccpay .ccpay-field :is(input,textarea,select):focus { background: var(--tint); outline: none; box-shadow: none; }
.wiz .ccpay .ccpay-btn { background: var(--blue); color: #fff; border-radius: 12px; min-height: 40px; font-family: var(--display); box-shadow: none; }
.wiz .ccpay :is(.ccpay-field > span:first-child,.ccpay-check,.ccpay-wizback) { color: var(--ink); }
.status .revision-panel select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23787882' stroke-width='1.5'/%3E%3C/svg%3E"); background-position: right 18px center; background-repeat: no-repeat; }
.status .st-ring .pct small, .status .st-eta b { color: var(--ink); }
.status .stages li { border-color: var(--line); }
.status .stages li .c, .status .stages li.now .c { box-shadow: none; background: var(--soft); }
.status .stages li.done .c { background: var(--blue); }
.status .stages li.now .c::after { background: var(--blue); }
.status .live { background: var(--soft); color: var(--muted); }
.status .live b { color: var(--ink); }
.status .live::before { background: var(--blue); }

/* Build page: the site header sits on a near-black bar (the page under it is light). */
.is-status nav.top { background: #0c0c0e; }
/* Revision photos: the file picker in the same button style. */
.status input[type=file] { font: 400 14px/1.4 var(--text); color: var(--muted); max-width: 100%; }
.status input[type=file]::file-selector-button { margin-right: 12px; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--soft); color: var(--ink); font: 500 14px/1.25 var(--display); cursor: pointer; }
.status input[type=file]::file-selector-button:hover { background: #e9e9ee; }

/* Domain owner details: one focused screen, with visible labels and address autofill. */
.wiz .registrant-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.wiz .registrant-fields label { min-width: 0; font: 500 14px/1.4 var(--text); }
.wiz .registrant-fields .field { display: block; width: 100%; min-width: 0; margin-top: 6px; }
.wiz .dom-opt small { white-space: normal; }
@media (max-width: 700px) { .wiz .registrant-fields { grid-template-columns: minmax(0, 1fr); } }