/* /start (YVM-65): the glossy Create your board page, after glass.css. A glass form in five steps beside a sticky
   live preview; one column on a phone, preview after the form. Colours only through the brand tokens. The board
   owner's screens are in the signed-in shell (shell.css, YVM-163). */
.sg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;padding-block:1rem 4rem}
.form{padding:clamp(1.25rem,3.5vw,2.75rem)}
.form h1{font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1}
.intro{margin-top:.75rem;color:var(--color-muted)}
fieldset{border:0;margin:2.2rem 0 0;padding:0;min-width:0}
legend{font:800 1.35rem/1.2 var(--font-display);letter-spacing:-.02em;color:var(--color-white);padding:0;margin-bottom:.4rem;display:flex;gap:.7rem;align-items:center}
legend .n{font:600 .875rem/1 var(--font-sans);color:var(--color-night);background:linear-gradient(135deg,var(--color-white),var(--color-seafoam));border-radius:999px;width:1.8rem;height:1.8rem;display:grid;place-items:center}
label{display:block;font-weight:600;color:var(--color-white);margin:1rem 0 .4rem}
.hint{font-size:.875rem;color:var(--color-muted);margin-top:.35rem}
.hint.small{font-size:.75rem}
input[type=text],input[type=email],input[type=password]{width:100%;font:400 1rem var(--font-sans);color:var(--color-white);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:.85rem 1rem}
input[aria-invalid=true]{border-color:var(--color-danger)}
.addr{display:flex;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.06);overflow:hidden}
/* YVM-131: the prefix is a label for the input, so a click anywhere in the box focuses it; it shrinks, the input grows,
   and on a phone the prefix is just "…/" so the input keeps most of the box (the full address is in the hint). */
.addr .addr-pre{display:flex;align-items:center;align-self:stretch;margin:0;padding:.85rem .1rem .85rem 1rem;font-weight:400;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;max-width:70%;cursor:text}
.addr .addr-full{overflow:hidden;text-overflow:ellipsis}
.addr .addr-short{display:none}
.addr input{flex:1 1 0;width:auto;border:0;background:transparent;padding-left:0;min-width:0}
@media (max-width:480px){.addr .addr-full{display:none}.addr .addr-short{display:inline}}
.addr:focus-within{outline:3px solid var(--color-focus);outline-offset:2px}
.addr input:focus-visible{outline:0}
.st-free{color:var(--color-mint);font-size:.875rem;margin-top:.4rem}
#st-slug-free:empty{display:none}
.st-error{margin:.4rem 0 0;color:var(--color-danger);font-weight:600;font-size:.875rem}
/* YVM-140: a step or field that must be filled says so; a card group with a problem gets the error border. */
.req{font:600 .75rem/1 var(--font-sans);letter-spacing:0;color:var(--color-night);background:var(--color-seafoam);border-radius:999px;padding:.25rem .55rem;margin-left:.15rem}
label .req{margin-left:.4rem;vertical-align:1px}
.req-step{margin:.1rem 0 0;font-size:.875rem;color:var(--color-muted)}
.req-step .req{margin:0 .4rem 0 0}
.seg[aria-invalid=true] .opt{border-color:var(--color-danger)}
.st-errors{margin-top:1.5rem;padding:1rem 1.25rem;border-radius:18px;border:1px solid var(--color-danger);background:var(--tint-danger-08)}
.st-errors h2{font-size:1.15rem}
.st-errors ul{margin:.4rem 0 0;padding-left:1.2rem}
.st-errors a{color:var(--color-danger)}
/* The safeguarding switch (YVM-64) and the confirm box. */
.switch-row{display:flex;gap:.8rem;align-items:center;margin-top:1.4rem}
.switch-row label{margin:0}
.switch{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:2.9rem;height:1.7rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);position:relative;cursor:pointer}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--color-white);transition:left .15s}
.switch:checked{background:linear-gradient(135deg,var(--color-lilac),var(--color-mint));border-color:transparent}
.switch:checked::after{left:calc(100% - 1.2rem - 3px);background:var(--color-night)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;color:var(--color-text);margin-top:1.4rem}
.check input{width:1.3rem;height:1.3rem;margin:.15rem 0 0;flex:none;accent-color:var(--color-violet)}
/* Where on the map: three cards; the third also stands for the whole UK. */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:.6rem}
.seg label{margin:0}
.opt-wrap{position:relative}
.seg input{position:absolute;opacity:0}
.opt{display:block;height:100%;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:1rem;cursor:pointer;background:rgba(255,255,255,.04);font-weight:400;color:var(--color-muted)}
.opt b{display:block;color:var(--color-white);font:800 1.1rem var(--font-display);letter-spacing:-.02em;margin-bottom:.2rem}
.opt svg{display:block;margin-bottom:.6rem}
.seg input:checked + .opt,.seg:has(#st-area-uk:checked) .opt-country{border-color:var(--color-violet);background:linear-gradient(160deg,var(--tint-violet-20),var(--tint-aqua-08));box-shadow:0 0 0 1px var(--color-violet) inset}
.seg input:focus-visible + .opt{outline:3px solid var(--color-focus);outline-offset:2px}
.uk-choice{display:none;grid-column:1/-1;font-weight:600;cursor:pointer;padding:.6rem .9rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;justify-self:end;background:rgba(255,255,255,.04)}
.seg .uk-choice input{position:static;opacity:1;accent-color:var(--color-violet);margin:0 .4rem 0 0;vertical-align:-2px}
.seg:has(#st-area-country:checked) .uk-choice,.seg:has(#st-area-uk:checked) .uk-choice{display:block}
.seg:has(#st-area-uk:focus-visible) .uk-choice{outline:3px solid var(--color-focus);outline-offset:2px}
@media (max-width:640px){.seg{grid-template-columns:minmax(0,1fr)}.uk-choice{justify-self:start}}
.area-combo{position:relative}
.area-list{list-style:none;margin:.3rem 0 0;padding:.3rem;position:absolute;left:0;right:0;z-index:5;max-height:16rem;overflow-y:auto;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:var(--color-night);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.area-list li{padding:.55rem .8rem;border-radius:10px;cursor:pointer}
.area-list li[aria-selected=true]{background:var(--tint-violet-25);outline:2px solid var(--color-focus);outline-offset:-2px}
/* Logos: two drop boxes; the file inputs stay real, visible controls. */
.logos{display:grid;grid-template-columns:.8fr 1.2fr;gap:1rem;margin-top:.6rem}
.drop{border:1.5px dashed rgba(255,255,255,.28);border-radius:18px;padding:1.1rem;background:rgba(255,255,255,.03);min-width:0}
.drop label{margin:0}
.drop .ph{display:grid;place-items:center;margin-bottom:.8rem;border-radius:14px;background:rgba(255,255,255,.92);color:var(--color-slate);font:800 1.1rem var(--font-display);overflow:hidden}
.drop.icon .ph{width:76px;height:76px}
.drop.wide .ph{height:76px}
.drop canvas{max-width:100%;max-height:100%}
.drop.icon canvas{width:76px;height:76px}
.drop.wide canvas{width:100%;height:76px;object-fit:contain}
.drop small{display:block;color:var(--color-muted);margin-top:.25rem;line-height:1.45}
.drop .uses{margin-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap}
.drop .uses span{font-size:.75rem;border-radius:999px;padding:.2rem .55rem;background:var(--tint-violet-20);color:var(--color-white)}
.drop input[type=file]{margin-top:.8rem;width:100%;font:400 .875rem var(--font-sans);color:var(--color-muted)}
.drop input[type=file]::file-selector-button{font:600 .875rem var(--font-sans);color:var(--color-night);background:linear-gradient(135deg,var(--color-white),var(--color-seafoam));border:0;border-radius:999px;padding:.5rem .9rem;margin-right:.6rem;cursor:pointer}
/* YVM-252: the chosen logo file and its Remove button. */
.drop .chosen{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 0;font-size:.875rem;color:var(--color-white);overflow-wrap:anywhere}
.drop .chosen[hidden]{display:none}
.drop .remove{font:600 .875rem var(--font-sans);color:var(--color-white);background:transparent;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:.35rem .9rem;cursor:pointer}
.drop .remove:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.initials{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,var(--color-violet),var(--color-aqua));color:var(--color-night);font:800 1.4rem/1 var(--font-display);letter-spacing:-.02em}
.initials.mini{width:16px;height:16px;border-radius:4px;font-size:.5rem}
/* Plan and payment: the price, and a placeholder until card payment (YVM-69) lands. */
.paybox{border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:.4rem 1.1rem;background:rgba(255,255,255,.04);margin-top:.6rem}
.line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.line:last-child{border-bottom:0}.line b{color:var(--color-white);white-space:nowrap}.line b .offer-price{white-space:normal}.tot b{font:800 1.4rem var(--font-display)}
.plan-cap{margin:.6rem 0 0;font-size:.8125rem;color:var(--color-muted)}
.tot small{display:block;font-size:.8125rem;color:var(--color-muted);font-weight:400}
.cardsoon{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;border:1.5px dashed rgba(255,255,255,.28);border-radius:14px;padding:.95rem 1rem;color:var(--color-muted)}
.cardsoon b{color:var(--color-white)}
.submit{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.submit .hint{margin:0}
.signin{margin-top:1.25rem}
/* The live preview. */
.preview{position:sticky;top:1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;min-width:0}
.pc{padding:1.2rem;min-width:0}
.pc h2{font:600 .875rem var(--font-sans);color:var(--color-muted);margin-bottom:.6rem;letter-spacing:0}
.ukmap-preview{position:relative}
.ukmap-preview .ukmap{display:block;width:100%;height:auto;max-height:27rem;border-radius:16px}
.ukmap-label{position:absolute;left:1rem;top:1rem;z-index:2;margin:0;background:rgba(255,255,255,.92);color:var(--color-night);font:800 .95rem var(--font-display);border-radius:12px;padding:.45rem .7rem;box-shadow:0 10px 20px -10px rgba(0,0,0,.5);max-width:calc(100% - 2rem)}
.ukmap-label[data-preview=none]{position:static;margin-bottom:.6rem;background:rgba(255,255,255,.06);color:var(--color-muted);font:400 .875rem var(--font-sans);box-shadow:none}
.tabs{display:flex}
.tab{display:flex;align-items:center;gap:.5rem;background:var(--color-tab);color:var(--color-night);border-radius:12px 12px 0 0;padding:.55rem .9rem;font-size:.85rem;max-width:100%;min-width:0}
.tab span[data-preview-tab]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab canvas{width:16px;height:16px;border-radius:4px}
.browser{background:var(--color-white);border-radius:0 12px 12px 12px;overflow:hidden;color:var(--color-night)}
.bh{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.9rem 1rem;border-bottom:1px solid var(--color-tab)}
.bh .logo,.bh .logo-name{display:flex;align-items:center;gap:.55rem;font:800 1.05rem var(--font-display);letter-spacing:-.02em;min-width:0}
.bh .logo canvas[data-logo-canvas=logo]{height:30px;width:auto;max-width:12rem}
.bh .logo-name canvas,.bh .initials{width:30px;height:30px;border-radius:8px;font-size:.8rem;flex:none}
.bh small{font-size:.75rem;color:var(--color-slate);white-space:nowrap}
.bbody{padding:1.1rem 1rem 1.3rem;background:linear-gradient(160deg,var(--color-paper-lilac),var(--color-paper-mint))}
.bbody b{display:block;font:800 1.35rem/1.1 var(--font-display);letter-spacing:-.02em}
.bbody span{font-size:.85rem;color:var(--color-slate);overflow-wrap:anywhere}
[hidden]{display:none!important}
@media (max-width:900px){.sg,.logos{grid-template-columns:minmax(0,1fr)}.preview{position:static}}
/* /start/pay (YVM-69): step 5 on its own, with Stripe's embedded checkout in a glass panel (YVM-141: its own ground is
   --color-panel-bottom, Billing::BRANDING). */
.pay{max-width:44rem;margin:1rem auto 4rem}
.checkout{margin-top:1.2rem;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,.06)),var(--color-panel-bottom);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);padding:1rem;min-height:12rem;overflow:hidden}
/* YVM-250: the gift code field on the pay step. */
.gift{margin-top:1rem}.gift .btn{margin-top:.6rem}
/* YVM-258: the five steps, one page each: the step list, who it's for, the skins and Back / Skip for now. */
/* YVM-278: the step bar is one row of chevrons that never wraps or scrolls: each step after the first overlaps the
   one before by its point. Done: a tick on violet; now: number and full name on white; next: number on slate. The
   short names (.st-short) show only where the bar has room. Solid fills, so each chevron's text contrast is fixed. */
.st-steps{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:nowrap;max-width:100%;font:600 .8125rem/1.2 var(--font-sans);white-space:nowrap}
.st-steps li{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:.3rem;padding:.45rem .7rem .45rem 1rem;margin-left:-.35rem;color:var(--color-white);background:var(--color-slate);clip-path:polygon(0 0,calc(100% - .55rem) 0,100% 50%,calc(100% - .55rem) 100%,0 100%,.55rem 50%)}
.st-steps li:first-child{margin-left:0;padding-left:.75rem;border-radius:999px 0 0 999px;clip-path:polygon(0 0,calc(100% - .55rem) 0,100% 50%,calc(100% - .55rem) 100%,0 100%)}
.st-steps li:last-child{padding-right:.75rem;border-radius:0 999px 999px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,.55rem 50%)}
.st-steps li.done{color:var(--color-night);background:var(--color-violet)}
.st-steps li.now{flex:0 0 auto;color:var(--color-night);background:var(--color-white)}
.st-steps .st-mark{display:inline-flex;align-items:center;justify-content:center;min-width:.75rem}
.st-steps .st-tick{display:block}
.st-steps .st-short{display:none;overflow:hidden;text-overflow:ellipsis}
@media (min-width:40rem){.st-steps .st-short{display:inline}}
.sectors,.skins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.6rem}
.sector,.skin{margin:0;font-weight:400;display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--tint-violet-75);border-radius:.9rem;padding:.75rem;min-width:0;overflow-wrap:anywhere;cursor:pointer}
.sector b{display:block;color:var(--color-white)}
.sector span{color:var(--color-muted);font-size:.875rem}
.sector input,.skin input{margin-top:.2rem;flex:none}
.opt-tag{font:600 .75rem/1 var(--font-sans);color:var(--color-muted)}
.swatch{vertical-align:middle;margin-left:.25rem}
.btn.ghost{background:transparent;color:var(--color-white);box-shadow:inset 0 0 0 1px var(--color-white)}
.bbody p{font-size:.875rem;color:var(--color-muted);margin:.4rem 0}
@media (max-width:640px){.sectors,.skins{grid-template-columns:minmax(0,1fr)}}
.paybox dt{color:var(--color-muted)}.paybox dd{margin:0;font-weight:600;overflow-wrap:anywhere;text-align:right}