/* Console-only components, loaded after design.css. Built from the design tokens. */

:root{--red-s:#fbefeb}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn,.field input,.field select{min-height:40px}

/* Error box: like .lg-sent but always visible. */
.lg-err{margin-top:1.4rem;background:var(--red-s);color:var(--vink);border-radius:20px;padding:1rem 1.4rem}
.lg-err b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.lg-err p{margin-top:.3rem;font-size:14px}

/* Six digit code input. */
.lg-code input{font:500 24px var(--mono);letter-spacing:.4em;text-align:center}

/* Narrow single-column pages (verify, reset, two-factor) reuse .lg-main. */
.page{max-width:32rem;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.page .lg-main{flex:1}
.page .lg-form{max-width:100%}

/* QR box for two-factor enrolment. */
.qr{display:grid;gap:.8rem;justify-items:center;margin:1.4rem 0;padding:1.2rem;background:#fff;border:1px solid var(--line);border-radius:16px}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.qr code{font:500 13px var(--mono);word-break:break-all;color:var(--ink2);text-align:center}

/* Operator layout. */
.ops-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.5rem;border-bottom:1px solid var(--line);background:#fff}
.ops-nav{display:flex;flex-wrap:wrap;gap:.3rem}
.ops-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 .8rem;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink2)}
.ops-nav a:hover{background:var(--cream)}
.ops-nav a[aria-current]{background:var(--ink);color:#fff}
.ops-main{padding:1.5rem;max-width:80rem;margin:0 auto}
.ops-main h1{font-size:1.6rem;font-weight:500;letter-spacing:-.02em;margin-bottom:1rem}
.ops-filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem;font-size:14px}
.ops-filters a{display:inline-flex;align-items:center;min-height:40px;padding:0 .8rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink2)}
.ops-filters a[aria-current]{border-color:var(--ink);color:var(--ink)}

.ops-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:13px}
.ops-table th{text-align:left;font-weight:600;color:var(--mute);padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.ops-table td{padding:.6rem .8rem;border-bottom:1px solid var(--line2);font-family:var(--mono);vertical-align:top;word-break:break-word}
.ops-table tr:last-child td{border-bottom:0}
.ops-table form{display:inline}
.ops-table .btn{width:auto;padding:0 .8rem;font-size:13px}

.panel-table td{font-family:var(--sans);font-size:14px}
.panel-table .btn{min-height:34px;height:34px;padding:0 .85rem;font-size:13.5px;margin:0 .4rem .3rem 0}

/* State pills. */
.st-running,.st-failed,.st-queued,.st-stuck{display:inline-block;padding:.15rem .6rem;border-radius:999px;font:500 12px var(--sans)}
.st-running{background:var(--mint);color:var(--ok)}
.st-failed{background:var(--red-s);color:var(--red)}
.st-queued{background:var(--cream);color:var(--ink2)}
.st-stuck{background:#fdf0e6;color:var(--warn)}

.ops-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
.ops-cells>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;font-size:14px;color:var(--ink2)}
.ops-cells b{display:block;color:var(--ink);font-size:16px;margin-bottom:.4rem}

/* Operator forms and headings. */
.ops-main h2{font-size:1.1rem;font-weight:600;margin:1.6rem 0 .6rem}
.ops-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;align-items:end;margin-bottom:1.6rem}
.ops-table input[type=text]{min-height:34px;padding:0 .5rem;border:1px solid var(--line);border-radius:8px;font:13px var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Signup wizard (from the approved design, real theme screenshots instead of mocks). */
.su-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.5rem;height:72px;max-width:96rem;margin:0 auto}
.su-bar .alt{font-size:15px;color:var(--ink2)}
.su-bar .alt a{font-weight:650;color:var(--ink);border-bottom:2px solid var(--ink);margin-left:.3rem}
.su{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;max-width:96rem;margin:0 auto;min-height:calc(100vh - 72px)}
@media (max-width:1000px){.su{grid-template-columns:minmax(0,1fr)}}
.su-main{padding:2rem 1.5rem 4rem;display:flex;justify-content:center}
.su-in{width:100%;max-width:34rem}
.su-prog{padding:0;display:flex;gap:.5rem;margin-bottom:2.6rem}
.su-prog li{flex:1;font-size:12.5px;font-weight:600;color:var(--mute);display:grid;gap:.5rem}
.su-prog li::before{content:"";height:5px;border-radius:99px;background:var(--line)}
.su-prog li.done::before{background:var(--ink)}
.su-prog li.on::before{background:var(--red)}
.su-prog li.on{color:var(--ink)}
.su-prog li{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){.su-prog{gap:.35rem}.su-prog li{font-size:11px}.su-claim input{font-size:18px}.su-claim span{font-size:15px}}
.su-step[hidden]{display:none}
.su-step h1{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:750;line-height:1;letter-spacing:-.05em}
.su-step h1 .serif{color:var(--red);font-size:1.07em;letter-spacing:-.025em}
.su-step>p.lead{margin-top:1rem;font-size:1.1rem}
.su-form{margin-top:2rem}
.su-claim{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:0 1rem 0 0;transition:border-color .15s}
.su-claim:focus-within{border-color:var(--ink)}
.su-claim input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 20px var(--sans);padding:1rem 0 1rem 1.1rem;color:var(--ink)}
.su-claim span{color:var(--mute);font-weight:500;font-size:17px}
.su-err{display:none;margin-top:.6rem;color:#b4321c;font-size:14px;font-weight:550}
.su-err.on{display:block}
.su-actions{display:flex;gap:.8rem;align-items:center;margin-top:2rem}
.su-actions .btn--ink{flex:1}
.su-back{border:0;background:none;font:600 15px var(--sans);color:var(--ink2);cursor:pointer;padding:.6rem .4rem}
.su-back:hover{color:var(--red)}
.su-note{margin-top:1rem;font-size:14px;color:var(--mute)}

/* template picker */
.su-tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
@media (max-width:520px){.su-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}}
.su-t{cursor:pointer;display:block}
.su-t input{position:absolute;opacity:0;pointer-events:none}
.su-tc{aspect-ratio:4/3.1;overflow:hidden;border-radius:16px;position:relative;outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s}
.su-tc img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.su-tc.plain{display:grid;place-items:center;background:var(--cream);font:650 15px var(--sans);color:var(--ink2)}
.su-t.sel .su-tc{outline-color:var(--red)}
.su-t input:focus-visible+.su-tc{outline-color:var(--ink)}
.su-t b{display:flex;justify-content:space-between;margin-top:.55rem;font-size:14px;font-weight:650}
.su-t small{display:block;font-size:12.5px;color:var(--mute);font-weight:400}

/* plan picker */
.su-plans{display:grid;gap:.8rem;margin-top:1.4rem}
.su-p{display:flex;gap:1rem;align-items:flex-start;border:1.5px solid var(--line);border-radius:20px;padding:1.2rem 1.3rem;cursor:pointer;background:#fff;transition:border-color .15s}
.su-p input{margin-top:.35rem;accent-color:var(--red);width:18px;height:18px}
.su-p.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.su-p h3{font-size:19px;font-weight:700;letter-spacing:-.03em;display:flex;gap:.6rem;align-items:center}
.su-p p{font-size:14.5px;color:var(--ink2);margin-top:.25rem}
.su-p .pr{margin-left:auto;text-align:right;font:750 28px/1 var(--sans);letter-spacing:-.05em;white-space:nowrap}
.su-p .pr small{display:block;font:400 13px var(--sans);letter-spacing:0;color:var(--mute);margin-top:.2rem}
.su-trial{display:flex;gap:.8rem;align-items:center;margin-top:1.2rem;background:var(--mint);border-radius:16px;padding:.9rem 1.1rem;font-size:14.5px}
.su-trial i{font-style:normal;font-size:20px}
.su-step .toggle{margin-top:1.6rem}

/* account */
.su-google{width:100%;gap:.7rem;margin-bottom:1.2rem}
.su-google svg{width:20px;height:20px}
.su-or{display:flex;align-items:center;gap:1rem;color:var(--mute);font-size:13.5px;margin-bottom:1.2rem}
.su-or::before,.su-or::after{content:"";flex:1;height:1px;background:var(--line)}
.su-legal{font-size:13px;color:var(--mute);margin-top:1rem}
.su-legal a{text-decoration:underline}

/* done */
.su-check{margin-top:2rem;display:grid;gap:.4rem;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:.8rem 1.3rem}
.su-check li{display:flex;gap:.9rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:15.5px}
.su-check li:last-child{border:0}
.su-check .st{flex:none;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--red);animation:spin .8s linear infinite}
.su-check li.ok .st{animation:none;border:0;background:#2f8f57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.su-check li.wait{color:var(--mute)}
.su-check li.wait .st{animation:none;border-color:var(--line)}
.su-check small{display:block;color:var(--mute);font-size:13px}
@keyframes spin{to{transform:rotate(360deg)}}
.su-link{margin-top:1.6rem;background:var(--ink);color:#fff;border-radius:22px;padding:1.4rem 1.5rem;display:none}
.su-link.on{display:block}
.su-link h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.su-link p{font-size:14px;color:#c7c7cc;margin-top:.3rem}
.su-link .u{display:flex;gap:.6rem;align-items:center;margin-top:1rem;background:#26262b;border-radius:14px;padding:.4rem .4rem .4rem 1rem;font:500 13.5px ui-monospace,Menlo,monospace;overflow:hidden}
.su-link .u span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-link .u button{flex:none;border:0;border-radius:10px;background:#fff;color:var(--ink);font:650 13.5px var(--sans);padding:.6rem .9rem;cursor:pointer}
.su-link .warn{margin-top:.9rem;color:#ffd9a0;font-size:13.5px}

/* preview */
.su-prev{background:radial-gradient(60% 80% at 15% 20%,#ffb59e 0,transparent 60%),radial-gradient(50% 70% at 85% 10%,#cdb8ff 0,transparent 60%),radial-gradient(60% 70% at 70% 100%,#ffd38a 0,transparent 60%),#ffe7dc;padding:2.4rem 2rem;border-radius:36px 0 0 36px;display:flex;flex-direction:column;justify-content:center;gap:1.6rem}
.su-prev-in{position:sticky;top:2rem;max-width:34rem;width:100%;margin:0 auto}
@media (max-width:1000px){.su-prev{border-radius:36px 36px 0 0;padding:2rem 1rem}}
.su-prev h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(13,13,15,.55);margin-bottom:1rem}
.su-prev .browser img{display:block;width:100%;aspect-ratio:4/3.3;object-fit:cover;object-position:top;border-radius:0 0 8px 8px}
.su-sum{margin-top:1.2rem;background:#fff;border-radius:20px;box-shadow:var(--sh);padding:1.1rem 1.3rem;display:grid;gap:.3rem;font-size:14.5px}
.su-sum div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.su-sum div:last-child{border:0}
.su-sum span{color:var(--mute)}
.su-sum b{font-weight:650;text-align:right}
@media (max-width:520px){.su-bar .alt .hm{display:none}}

/* Card entry: Stripe Elements mounts here. */
.card-box{border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1rem;background:#fff;transition:border-color .15s}
.card-box:focus-within{border-color:var(--ink)}
.su-sel{width:100%;min-height:44px;margin-top:.4rem;padding:0 .8rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:500 16px var(--sans);color:var(--ink)}
.su-name-msg{margin-top:.6rem;font-size:14px;font-weight:550;color:var(--mute)}
.su-name-msg.ok{color:var(--ok)}
.su-name-msg.bad{color:#b4321c}

/* Account panel. */
.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.5rem;border-bottom:1px solid var(--line);background:#fff}
.panel-tabs{display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem 1.5rem 0;max-width:80rem;margin:0 auto}
.panel-tabs a,.panel-tabs span{display:inline-flex;align-items:center;min-height:40px;padding:0 .9rem;border-radius:8px 8px 0 0;font-size:14px;font-weight:550;color:var(--ink2);border-bottom:2px solid transparent}
.panel-tabs a:hover{background:var(--cream)}
.panel-tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.panel-tabs .soon{color:var(--mute);cursor:default}
.panel-main{padding:1.5rem;max-width:80rem;margin:0 auto}
.panel-main h1{font-size:1.6rem;font-weight:500;letter-spacing:-.02em;margin-bottom:1rem}

/* Site status pills (the running, failed, queued and stuck pills are above). */
.st-trial,.st-active,.st-setup,.st-pastdue,.st-suspended,.st-cancelling{display:inline-block;padding:.15rem .6rem;border-radius:999px;font:500 12px var(--sans)}
.st-trial{background:#eef0ff;color:#4a3fb0}
.st-active{background:var(--mint);color:var(--ok)}
.st-setup{background:var(--cream);color:var(--ink2)}
.st-pastdue,.st-cancelling{background:#fdf0e6;color:var(--warn)}
.st-suspended{background:var(--red-s);color:var(--red)}
.su-actions .btn--red{flex:1}
.su-fail[hidden]{display:none}

/* Sites table: stacked cards below 720px. */
@media (max-width:720px){
  .panel-tabs{flex-wrap:nowrap;overflow-x:auto}
  .panel-tabs a{flex:none;white-space:nowrap}
  .panel-table,.panel-table tbody,.panel-table tr,.panel-table td{display:block;width:100%}
  .panel-table{border:0;background:none}
  .panel-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .panel-table tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:.8rem;padding:.4rem .9rem}
  .panel-table td{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--line2);text-align:right;word-break:normal;overflow-wrap:anywhere}
  .panel-table td::before{content:attr(data-label);flex:none;color:var(--mute);font-weight:600;text-align:left}
  .panel-table td.ps-site{font-weight:600;font-size:15px}
  .panel-table td.ps-site::before{content:none}
  .panel-table td.ps-acts{flex-wrap:wrap;justify-content:flex-start;gap:.5rem;border-bottom:0;padding-top:.7rem}
  .panel-table td.ps-acts::before{content:none}
}

/* Own domain page. */
.dm-rec{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.6rem 0 1rem;font-size:14px}
.dm-rec dt{color:var(--mute);font-weight:600}
.dm-rec dd{margin:0;overflow-wrap:anywhere}
.panel-table .ps-acts form{display:inline}
/* Move in and ops move checklist. */
.field input[type=file]{max-width:100%;min-width:0}
.ops-steps{list-style:none;margin:0;padding:0}
.ops-steps li{padding:.15rem 0}
.ops-steps form{display:flex;align-items:center;gap:.5rem}
.ops-steps form button{margin-left:auto}