/* Sign maker and sign pages. Load after /assets/ui.css (tokens and shared components). */
/* maker */
.maker{display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:32px; align-items:start; padding-bottom:48px}
.preview{position:sticky; top:24px; display:flex; flex-direction:column; align-items:center; gap:12px}
.desk{background:var(--panel); padding:32px; width:100%; display:flex; justify-content:center}
.maker-cta{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%}
.maker-cta .btn{width:100%}
.preview .hint{align-self:flex-start}
.preview #makerMsg{align-self:flex-start; min-height:1.2em}
.linkbtn{border:0; background:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer}
/* sized so the sign and the Make it live / Print buttons fit in one screen */
.desk .sheet{width:min(100%,520px,calc((100vh - 230px) * 8.5 / 11)); min-width:min(100%,260px); box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 32px -12px rgba(0,0,0,.25)}
.desk .sheet.land{width:min(100%,680px)}

/* the sign itself; every size is in cqi so the print matches the preview */
.sheet{position:relative; aspect-ratio:8.5/11; container-type:inline-size; background:#fff; color:#111; font-family:var(--sans); overflow:hidden}
.sheet.a4{aspect-ratio:210/297}
.sheet.land{aspect-ratio:11/8.5}
.sheet.land.a4{aspect-ratio:297/210}
.sheet .in{position:absolute; inset:0; display:flex; flex-direction:column; padding:7cqi}
.s-biz{font-size:3.2cqi; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center; min-height:1em}
.s-main{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:2.4cqi}
.s-head .nw{white-space:nowrap}
.s-head{font-weight:800; line-height:1.02; letter-spacing:-.025em; overflow-wrap:normal; word-break:normal; max-width:100%}
.s-sub{font-size:5.2cqi; font-weight:500}
.s-time{font-family:var(--mono); font-size:13cqi; font-weight:700; line-height:1; letter-spacing:-.03em}
.s-note{font-size:3.8cqi; line-height:1.35; white-space:pre-line; max-width:92%}
.s-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:4cqi; min-height:4cqi}
.s-qr{display:flex; align-items:center; gap:3cqi}
.s-qr svg{width:24cqi; height:24cqi; display:block}
.s-qr .cap{font-size:3cqi; font-weight:600; max-width:30cqi; text-align:left; line-height:1.25}
.s-made{font-size:1.9cqi; color:#777; margin-left:auto; white-space:nowrap}
.land .in{padding:5.5cqi}
.land .s-head{line-height:1}
.land .s-qr svg{width:19cqi; height:19cqi}

.st-bold .s-head{text-transform:uppercase}
.st-clean .in::before{content:""; position:absolute; inset:3.2cqi; border:.7cqi solid var(--accent,#111); border-radius:2.4cqi; pointer-events:none}
.st-clean .s-head{font-weight:700}
.st-notice .s-biz{background:var(--accent,#111); color:#fff; margin:-7cqi -7cqi 0; padding:4cqi 7cqi; font-size:3.6cqi}
.land.st-notice .s-biz{margin:-5.5cqi -5.5cqi 0; padding:3cqi 5.5cqi}
.st-notice .s-head{text-transform:uppercase}
.st-clock .s-clock{width:44cqi; height:44cqi}
.land.st-clock .s-clock{width:30cqi; height:30cqi}
.st-clock .s-head{text-transform:uppercase}
.st-hours .s-main{justify-content:flex-start; padding-top:4cqi}
.st-hours .s-head{text-transform:uppercase}
.st-hours .s-note{font-size:5cqi; width:86%; max-width:none; display:grid; grid-template-columns:auto auto; justify-content:space-between; column-gap:6cqi; row-gap:2.2cqi; text-align:left; white-space:normal; margin-top:4cqi}
.st-hours .s-note .full{grid-column:1/-1; text-align:center}
.st-hours .s-note .t{font-family:var(--mono); text-align:right}
.s-arrow{font-size:30cqi; line-height:.8; font-weight:800}

/* sections under the maker */
.variants{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.variant{background:var(--panel); padding:20px; display:flex; flex-direction:column; gap:10px}
.variant b{font-size:16px}
.variant p{font-size:14px; color:var(--gray); white-space:pre-line}
.variant .btn{align-self:flex-start}
.tips{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; max-width:760px}
.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.fact{background:var(--panel); padding:20px}
.fact .k{font-size:13px; color:var(--gray)}
.fact .v{font-size:22px; font-weight:500; letter-spacing:-.02em; margin-top:6px}
.fact .d{font-size:13px; color:var(--gray); margin-top:4px}
.check{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; max-width:760px}
.links{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px 24px; padding:0; margin:0; list-style:none}
.links a{text-decoration:none; color:#3f3f46; font-size:14px}
.links a:hover{text-decoration:underline; color:var(--ink)}
.links .when{font-family:var(--mono); font-size:12px; color:var(--gray); margin-left:6px}
.hubgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
@media (max-width:600px){ .hubgrid{grid-template-columns:1fr 1fr; gap:12px} .tile .thumb{padding:14px 16px} .tile b{font-size:13px} }
.tile{display:flex; flex-direction:column; gap:12px; text-decoration:none}
.tile .thumb{transition:background .3s var(--ease)}
.tile:hover .thumb{background:#e7e7e7}
.tile .sheet{width:100%; pointer-events:none}
.tile .thumb{background:var(--panel); padding:24px 40px}
.tile b{font-size:14px; font-weight:500}

@media (max-width:860px){
  .maker{grid-template-columns:1fr}
  .preview{position:static; order:-1}
  .desk{padding:16px}
}

#printRoot{display:none}
@media print{
  body>*:not(#printRoot){display:none !important}
  body.print-approved #printRoot{display:block}
  body:not(.print-approved)::after{content:"Printing requires Pro. Return to the maker and choose Print with Pro.";display:block;padding:32px;color:#111;background:#fff;font-size:18px}
  #printRoot .sheet{width:100%; height:100vh; aspect-ratio:auto; box-shadow:none}
  html,body{background:#fff}
}

.ex{margin:0; display:flex; flex-direction:column; gap:10px}
.ex img{width:min(100%,280px); height:auto; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px -12px rgba(0,0,0,.25)}

/* brand kit on the sign */
.s-logo{max-height:10cqi; max-width:50cqi; display:block; margin:0 auto; object-fit:contain}
.has-logo.st-notice .s-biz{background:none; color:inherit; border-bottom:1.2cqi solid var(--accent,#111); padding-bottom:3cqi}
.sheet.f-serif{font-family:Georgia,"Times New Roman",serif}
.sheet.f-rounded{font-family:ui-rounded,"SF Pro Rounded","Nunito","Arial Rounded MT Bold",system-ui,sans-serif}
.sheet.f-mono{font-family:var(--mono)}
.sheet.f-serif .s-head{letter-spacing:-.01em; font-weight:700}