/* The customer hub (public/hub.js) and the pre-publish checklist (public/checklist.js), 2026-11-01. */

/* ---------- hub view: full width, no preview stage */
body[data-view="hubView"] .app{grid-template-columns:1fr}
body[data-view="hubView"] .stage{display:none}
body[data-view="hubView"] .panel{border-right:0;border-bottom:0;background:var(--bg);padding:40px 32px 72px}
body[data-view="hubView"] .panel > .error,
body[data-view="hubView"] .panel > .notice{max-width:1100px;margin-left:auto;margin-right:auto}
@media (max-width:900px){body[data-view="hubView"] .panel{padding:26px 16px 48px}}

.hub{max-width:1100px;margin:0 auto}
.hub-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hub-head h1{font-size:1.9rem;line-height:1.1;letter-spacing:-.03em;font-weight:700;display:flex;align-items:center;gap:10px}
.hub-count{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:.9rem;font-weight:600;letter-spacing:0}
.hub-sub{color:var(--muted);margin-top:6px;font-size:.95rem;overflow-wrap:anywhere}
.hub-new{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:320px}
.hub-new .primary{white-space:nowrap}
.hub-full{font-size:.82rem;color:var(--warn);text-align:right;line-height:1.35}

.hub-toast{margin:-8px 0 18px;padding:11px 14px;border-radius:12px;font-size:.9rem;background:#E7F5EF;color:var(--ok);border:1px solid #C6E8DA}
.hub-toast.bad{background:#FDECEA;color:var(--bad);border-color:#F6CFCB}

/* ---------- cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px}
.hub-card{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:visible;box-shadow:0 1px 2px rgba(14,21,37,.04),0 8px 28px rgba(14,21,37,.05);transition:box-shadow .25s,border-color .25s,transform .25s}
.hub-card:hover{border-color:#D3DBE7;box-shadow:0 1px 2px rgba(14,21,37,.05),0 16px 40px rgba(14,21,37,.09)}
.hub-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:17px 17px 0 0;background:linear-gradient(180deg,#EEF2F8,#E3E9F2);border-bottom:1px solid var(--line);cursor:pointer}
.hub-thumb iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:#fff;opacity:0;transition:opacity .4s ease}
.hub-thumb.loaded iframe{opacity:1}
.hub-thumb-cover{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(14,21,37,.06));transition:background .25s}
.hub-thumb:hover .hub-thumb-cover{background:linear-gradient(180deg,rgba(47,107,255,.04),rgba(47,107,255,.10))}

.hub-body{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1;min-width:0}
.hub-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hub-name{font-size:1.08rem;font-weight:600;letter-spacing:-.015em;min-width:0;flex:1}
.hub-rename{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:0;background:none;padding:2px 6px;margin:-2px -6px;border-radius:8px;cursor:text;font:inherit;text-align:left}
.hub-rename span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hub-rename svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.hub-rename:hover{background:var(--bg)}
.hub-rename:hover svg,.hub-rename:focus-visible svg{opacity:1}
.hub-rename:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media (hover:none){.hub-rename svg{opacity:.7}}
.hub-name-input{font:inherit;font-size:1rem!important;font-weight:600;padding:5px 9px!important;margin:-4px 0}

.hub-more{position:relative;flex:none}
.hub-dots{display:grid;place-items:center;width:36px;height:36px;margin:-4px -6px 0 0;border:0;border-radius:10px;background:none;cursor:pointer}
.hub-dots svg{width:18px;height:18px;fill:var(--muted)}
.hub-dots:hover,.hub-dots[aria-expanded="true"]{background:var(--bg)}
.hub-dots:focus-visible{outline:2px solid var(--blue)}
.hub-menu{position:absolute;right:-6px;top:calc(100% + 4px);min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(14,21,37,.14);padding:5px;z-index:15}
.hub-menu [role=menuitem]{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--ink);text-decoration:none}
.hub-menu [role=menuitem]:hover,.hub-menu [role=menuitem]:focus-visible{background:var(--bg);outline:0}
.hub-menu .danger{color:var(--bad)}
.hub-menu .danger:hover,.hub-menu .danger:focus-visible{background:#FDECEA}

.hub-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-width:0}
.hub-pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--muted);white-space:nowrap}
.hub-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.hub-pill.live{background:#E7F5EF;color:var(--ok)}
.hub-pill.live::before{box-shadow:0 0 0 3px rgba(18,128,92,.18)}
.hub-pill.warn{background:#FFF3E5;color:var(--warn);white-space:normal}
.hub-pill.bad{background:#FDECEA;color:var(--bad)}
.hub-pill.info{background:var(--blue-soft);color:var(--blue-deep)}
.hub-addr{font-size:.85rem;color:var(--blue-deep);text-decoration:none;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.hub-addr:hover{text-decoration:underline}
.hub-edited{font-size:.82rem;color:var(--muted)}
p.hub-edited{margin-top:-4px}

.hub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:2px 0 0}
.hub-stats div{background:var(--bg);border-radius:12px;padding:9px 11px}
.hub-stats dt{font-size:.72rem;color:var(--muted);line-height:1.25}
.hub-stats dd{margin:2px 0 0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.hub-plan{font-size:.86rem;font-weight:500}
.hub-note{font-size:.83rem;color:var(--muted);background:var(--bg);border-radius:10px;padding:8px 11px;line-height:1.4}

/* add-on switches */
.hub-addons{border:1px solid var(--line);border-radius:12px;padding:10px 12px 8px;margin:0;display:grid;gap:4px}
.hub-addons legend{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 4px;margin:0 0 0 -4px}
.hub-switch{display:flex;align-items:center;gap:10px;font-size:.88rem;cursor:pointer;padding:3px 0;position:relative}
.hub-switch input{position:absolute;opacity:0;width:36px;height:22px;margin:0;cursor:pointer}
.hub-switch small{color:var(--muted);font-size:.8rem}
.hub-track{flex:none;position:relative;width:36px;height:22px;border-radius:999px;background:#D5DCE7;transition:background .2s}
.hub-track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(14,21,37,.25);transition:transform .2s}
.hub-switch input:checked+.hub-track{background:var(--blue-deep)}
.hub-switch input:checked+.hub-track::after{transform:translateX(14px)}
.hub-switch input:focus-visible+.hub-track{outline:2px solid var(--blue);outline-offset:2px}
.hub-addons:disabled .hub-switch{opacity:.55;cursor:default}
.hub-working{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--blue-deep);margin-top:4px}
.hub-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue-soft);border-top-color:var(--blue);animation:spin 1s linear infinite}

/* AI front desk push: the draft strip, the live switch when it's off, and the "on" line */
.hub-desk{display:grid;gap:10px;padding:12px 13px;border-radius:14px;border:1.5px solid transparent;
  background:radial-gradient(120% 140% at 100% 0%,#EEF3FF 0%,#fff 60%) padding-box,linear-gradient(135deg,var(--blue),#7A5CFF 55%,#9DB8FF) border-box;
  box-shadow:0 8px 24px rgba(47,107,255,.12)}
.hub-desk-t{font-size:.88rem;line-height:1.45;color:var(--ink)}
.hub-desk-t b{display:block;font-weight:600;font-size:.92rem}
.hub-desk-t>span{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.hub-desk-acts{display:flex;flex-wrap:wrap;gap:8px}
.hub-desk-acts button{flex:1 1 auto;min-height:38px;padding:7px 12px;border-radius:10px;font-size:.88rem}
.hub-desk-switch{align-items:flex-start;margin:2px -6px 4px;padding:10px 10px;border-radius:12px;border:1.5px solid transparent;
  background:linear-gradient(135deg,#F3F6FF,#fff) padding-box,linear-gradient(135deg,var(--blue),#7A5CFF 55%,#9DB8FF) border-box}
.hub-desk-switch .hub-track{margin-top:1px}
.hub-desk-switch input{top:10px;left:10px}
.hub-desk-sw-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.hub-desk-sw-t>span{font-weight:600}
.hub-desk-sw-t>span small{font-weight:500;color:var(--blue-deep)}
.hub-desk-sw-t>small{font-size:.8rem;color:var(--muted);line-height:1.4}
.hub-desk-on{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ok);font-weight:500;margin-top:-4px}
.hub-desk-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(18,128,92,.18)}

.hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.hub-actions .primary{min-height:40px;padding:8px 20px;border-radius:10px;font-size:.92rem}
.hub-actions .ghost{padding:8px 14px}

/* loading skeleton */
.hub-skel .hub-thumb{cursor:default}
.hub-skel .hub-thumb,.hub-skel i{background:linear-gradient(90deg,#EDF1F6 25%,#F6F8FB 50%,#EDF1F6 75%);background-size:200% 100%;animation:hubShimmer 1.3s ease-in-out infinite}
.hub-skel i{display:block;height:13px;border-radius:7px}
.hub-skel i:nth-child(1){width:55%;height:17px}
.hub-skel i:nth-child(2){width:30%}
.hub-skel i:nth-child(3){width:75%;margin-bottom:18px}
@keyframes hubShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.hub-skel .hub-thumb,.hub-skel i,.hub-spin{animation:none}}

/* error / empty */
.hub-empty{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:40px 24px;text-align:center}
.hub-empty h2{font-size:1.2rem;letter-spacing:-.02em}
.hub-empty p{color:var(--muted);margin:6px 0 18px}

/* ---------- confirm dialog (add-ons, delete) */
.hub-dlg{border:0;border-radius:18px;padding:0;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);color:var(--ink);box-shadow:0 30px 80px rgba(14,21,37,.3)}
.hub-dlg::backdrop{background:rgba(14,21,37,.45);backdrop-filter:blur(2px)}
.hub-dlg-form{padding:24px 24px 20px}
.hub-dlg h2{font-size:1.2rem;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.hub-dlg-body{margin-top:10px;display:grid;gap:10px;font-size:.92rem}
.hub-dlg-body p{line-height:1.5}
.hub-dlg-price{background:var(--bg);border-radius:10px;padding:10px 12px}
.hub-consequences{padding:12px 14px 12px 32px;border-radius:12px;background:#FDF3F2;border:1px solid #F6D5D1;display:grid;gap:6px;line-height:1.45}
.hub-consequences li::marker{color:var(--bad)}
.hub-type{margin:16px 0 0}
.hub-type b{font-weight:600;overflow-wrap:anywhere}
.hub-dlg-err{color:var(--bad);font-size:.88rem;margin-top:10px}
.hub-dlg-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:20px}
.hub-dlg-actions .ghost{padding:10px 16px}
.hub-dlg-actions .primary{padding:10px 18px;border-radius:10px}
.primary.danger{background:var(--bad)}
.primary.danger:hover{background:#A82C22}
.primary.danger:disabled{background:#E3A9A3;opacity:1}

/* ---------- pre-publish checklist (inside the publish form) */
.cl{margin:16px 0 4px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px 14px 10px}
.cl-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.cl-head h3{font-size:.98rem;letter-spacing:-.01em}
.cl-sum{font-size:.82rem;color:var(--muted)}
.cl-ring{flex:none;width:36px;height:36px;transform:rotate(-90deg)}
.cl-ring circle{fill:none;stroke-width:4}
.cl-ring-bg{stroke:var(--bg)}
.cl-ring-fg{stroke:var(--ok);stroke-linecap:round;transition:stroke-dasharray .4s ease}
.cl-loading .cl-ring-fg{stroke:transparent}
.cl-list{list-style:none;padding:0;margin:0;display:grid}
.cl-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.86rem}
.cl-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-top:1px}
.cl-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cl-item.ok .cl-ic{background:#E7F5EF;color:var(--ok)}
.cl-item.warn .cl-ic{background:#FFF3E5;color:var(--warn)}
.cl-item.tip .cl-ic{background:var(--blue-soft);color:var(--blue-deep)}
.cl-text{flex:1;min-width:0;line-height:1.35}
.cl-text b{font-weight:500}
.cl-item.ok .cl-text b{color:var(--muted);font-weight:400}
.cl-text small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.cl-fix{flex:none;font-size:.84rem;padding:2px 0}
.cl-fix:hover{text-decoration:underline}
.cl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-rules{display:flex;align-items:flex-start;gap:10px;margin:8px 0 4px;padding:11px 12px;border-radius:12px;background:#FFF6EC;border:1px solid #F3D9B8;cursor:pointer;font-size:.86rem;line-height:1.4}
.cl-rules input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--blue)}
.cl-rules small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.cl-rules b{font-weight:600}
.cl-rules.on{background:#E7F5EF;border-color:#C6E8DA}
.cl-paynote{font-size:.82rem;color:var(--warn);margin-top:8px}
/* builder.css resets every margin to 0, which un-centres a modal dialog */
.hub-dlg{margin:auto}
.hub-dlg button:focus-visible,.hub-dlg input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:560px){
  .hub-head{align-items:flex-start;margin-bottom:20px}
  .hub-head h1{font-size:1.6rem}
  .hub-new{align-items:flex-start;max-width:none}
  .hub-full{text-align:left}
  .hub-dlg-form{padding:20px 18px 18px}
  .hub-dlg-actions .primary{flex:1}
}

/* design pass (2026-11-01): a shimmer while a thumbnail loads, instead of a flat grey box */
.hub-thumb:not(.loaded){background:linear-gradient(90deg,#EDF1F6 25%,#F6F8FB 50%,#EDF1F6 75%);background-size:200% 100%;animation:hubShimmer 1.3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hub-thumb:not(.loaded){animation:none}}
.hub-card:focus-within{border-color:#D3DBE7}
.hub-thumb:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}