:root{--ink:#193632;--muted:#687b75;--dark:#133a36;--line:#dae7e2;--bg:#f1f7f5;--lime:#d1f06d;--white:#fff}*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit}.wrap{max-width:1160px;margin:auto;padding-left:22px;padding-right:22px}.header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:22px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:1.1rem;font-weight:900;line-height:1.1}.brand small{display:block;margin-top:5px;color:#7b9288;font-size:.7rem;letter-spacing:.16em}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--dark);color:var(--lime);font-size:1.6rem}.header nav{display:flex;align-items:center;gap:21px;color:#536b62;font-size:.88rem;font-weight:750}.header nav a{text-decoration:none}.header nav a:hover,.nav-link:hover{text-decoration:underline}.header nav form{margin:0}.nav-link{border:0;background:none;padding:0;color:inherit;font-weight:750}.eyebrow{color:#4e9475;font-size:.75rem;font-weight:900;letter-spacing:.15em}h1{font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.06;letter-spacing:-.055em;margin:11px 0 13px}h2{font-size:1.45rem;line-height:1.2;letter-spacing:-.025em;margin:7px 0 8px}p{margin:0 0 15px}.muted{color:var(--muted)}.intro{font-size:1.1rem;color:#62766e;margin-bottom:29px}.customer-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.76fr);gap:28px;align-items:start;margin:24px 0 60px}.queue-main{padding-top:27px}.queue-board{border-radius:24px;overflow:hidden;box-shadow:0 20px 40px #133a3614}.queue-primary{background:var(--dark);color:white;padding:32px 37px 30px}.queue-primary span,.queue-secondary span{font-size:.83rem;font-weight:900;letter-spacing:.13em}.queue-primary strong{display:block;color:var(--lime);font-size:clamp(5.5rem,13vw,9.5rem);font-variant-numeric:tabular-nums;line-height:1.07;letter-spacing:-.07em;margin:3px 0 10px}.queue-primary small{color:#b6cfc6;font-size:.9rem}.queue-secondary{display:grid;grid-template-columns:1fr 1fr;background:white}.queue-secondary>div{padding:26px 31px}.queue-secondary>div+div{border-left:1px solid var(--line)}.queue-secondary span{display:block;color:#6d8277}.queue-secondary strong{display:block;font-size:2.6rem;line-height:1.15;margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.live-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#38644e;font-size:.84rem;font-weight:700;padding:17px 3px}.live-dot{background:#3bac72;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #d5f3de}.live-line .muted{font-weight:500}.panel{background:white;border:1px solid var(--line);box-shadow:0 12px 35px #18463809;border-radius:19px;padding:25px}.form label{display:block;font-size:.88rem;font-weight:800;color:#38524b;margin:20px 0 0}.form input:not([type=checkbox]){display:block;width:100%;border:1px solid #c9d9d2;border-radius:10px;padding:12px 13px;min-height:49px;margin-top:8px;color:var(--ink);background:white}.form input:focus-visible,.button:focus-visible,.small-button:focus-visible,a:focus-visible{outline:3px solid #8fcdac;outline-offset:2px}.availability{display:inline-block;background:#f4e4de;color:#944c34;border-radius:30px;padding:5px 11px;font-size:.78rem;font-weight:850}.availability.is-open{background:#dff4e4;color:#29734e}.button{border:0;border-radius:11px;background:var(--dark);color:white;font-size:.98rem;font-weight:850;padding:13px 17px;min-height:48px}.button:not(:disabled):hover{background:#21574e}.button:disabled{opacity:.45;cursor:not-allowed}.form .button{width:100%;display:flex;justify-content:space-between;margin-top:23px}.fine{font-size:.78rem;color:#788981;line-height:1.5;margin:17px 0 0}.notice{padding:12px 15px;border-radius:11px;font-size:.9rem;margin-bottom:15px}.notice.success{background:#dff5e6;border:1px solid #a5ddba;color:#245c3e}.notice.error{background:#fff0e8;border:1px solid #efc5b4;color:#8c442e}.ticket{background:var(--lime);border-radius:18px;padding:23px;margin-bottom:15px}.ticket strong{display:block;color:var(--dark);font-size:4.5rem;line-height:1.1;letter-spacing:-.05em}.ticket span{display:block;font-weight:850}.ticket small{display:block;margin-top:7px;color:#486b3f}.footer{border-top:1px solid var(--line);color:#8a9d94;font-size:.8rem;padding-top:22px;padding-bottom:30px;margin-top:40px}.narrow{max-width:560px}.setup,.login{padding-top:45px}.narrow-hours{max-width:910px;margin:32px auto 70px}.admin-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:27px 0}.admin-head h1{margin-bottom:4px}.summary-chip{background:#e3f0ea;color:#2a6951;border-radius:12px;padding:12px 18px;font-size:.85rem;white-space:nowrap}.summary-chip strong{display:block;font-size:1.6rem}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.stat{background:white;border:1px solid var(--line);border-radius:14px;padding:18px}.stat span{font-size:.83rem;color:var(--muted);display:block}.stat strong{font-size:2rem;line-height:1.1;display:block;margin-top:9px;font-variant-numeric:tabular-nums}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:16px;align-items:start}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.panel-title h2{margin:0}.panel-title .button{font-size:.82rem;min-height:40px;padding:9px 12px}.empty{color:#8a9c93;padding:16px 0}.token-row{display:flex;gap:14px;align-items:center;padding:16px 0;border-top:1px solid #e6efea}.token-number{font-size:1.35rem;font-weight:900;color:var(--dark);min-width:54px}.token-person{flex:1;min-width:90px}.token-person strong,.token-person a,.token-person small{display:block}.token-person a{font-size:.86rem;color:#386a55}.token-person small{font-size:.76rem;color:#82978a}.token-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:end}.small-button{border:1px solid var(--dark);background:var(--dark);color:white;border-radius:8px;font-size:.8rem;font-weight:800;padding:7px 9px;white-space:nowrap}.small-button.ghost{background:white;color:#865243;border-color:#d3b3a9}.closed-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-top:1px solid #e6efea;font-size:.9rem}.badge{font-size:.72rem;border-radius:30px;padding:4px 8px;font-weight:900}.badge.done{background:#ddf3e5;color:#27714b}.badge.cancel{background:#f5e7e2;color:#965139}.under-note{font-size:.8rem;color:#81958a;margin:18px 0 30px}.hours-form{margin-top:22px}.hours-heading,.hours-row{display:grid;grid-template-columns:1.1fr .4fr 1fr 1fr;align-items:center;gap:13px}.hours-heading{font-size:.78rem;color:#788d81;margin:26px 0 4px}.hours-row{border-top:1px solid #e7eee9;padding:11px 0}.hours-row>strong{font-size:.92rem}.hours-row label{margin:0}.hours-row input[type=time]{margin:0;min-width:0}.hours-row .checkbox{display:flex;justify-content:center}.hours-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--dark)}.hours-form>.button{width:auto;padding-left:24px;padding-right:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:830px){.customer-layout,.dashboard-grid{grid-template-columns:1fr}.queue-main{padding-top:4px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:560px){.wrap{padding-left:16px;padding-right:16px}.header{align-items:flex-start}.header nav{gap:11px;font-size:.76rem;flex-wrap:wrap;justify-content:flex-end}.brand{font-size:.93rem}.brand-icon{width:36px;height:36px}.brand small{font-size:.58rem}.customer-layout{margin-top:15px;gap:8px}.intro{font-size:1rem;margin-bottom:18px}.queue-primary{padding:23px}.queue-primary strong{font-size:6.2rem}.queue-secondary>div{padding:17px}.queue-secondary span{font-size:.68rem}.queue-secondary strong{font-size:2rem}.panel{padding:18px}.admin-head{display:block}.summary-chip{display:inline-block;margin-top:12px}.stats{gap:8px}.stat{padding:13px}.stat strong{font-size:1.6rem}.panel-title{align-items:flex-start}.panel-title .button{max-width:150px}.token-row{flex-wrap:wrap}.token-person{flex:1}.token-actions{width:100%;justify-content:flex-end}.hours-heading,.hours-row{grid-template-columns:1.05fr .45fr 1fr 1fr;gap:6px}.hours-row input[type=time]{font-size:.78rem;padding:8px 2px}.hours-row>strong{font-size:.8rem}}
/* Compact dashboard counters: one row on phones. */
@media(max-width:560px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.stat{min-width:0;padding:12px 5px;text-align:center}.stat span{font-size:clamp(.56rem,2.35vw,.75rem);white-space:nowrap;letter-spacing:-.02em}.stat strong{font-size:clamp(1.1rem,5vw,1.6rem);overflow-wrap:anywhere}}

/* Smaller, simpler dashboard heading. */
.admin-head{margin:16px 0;gap:12px}
.admin-head h1{font-size:1.65rem;line-height:1.2;letter-spacing:-.025em;margin:5px 0 6px}
.admin-head p{font-size:.85rem;line-height:1.45;margin:0;max-width:58ch}
@media(max-width:560px){.admin-head h1{font-size:1.4rem}.admin-head p{font-size:.78rem}}

/* Navigation in one row below the shop name. */
.header{flex-direction:column;align-items:stretch;gap:16px}
.header nav{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:clamp(12px,4vw,24px);width:100%;font-size:.85rem;white-space:nowrap}
.header nav a,.header nav form{flex:0 0 auto}
@media(max-width:560px){.header{gap:14px;padding-bottom:16px}.header nav{font-size:.78rem;gap:clamp(10px,4vw,20px)}}

/* Shop name and next token share the top row. */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.brand-row .brand{min-width:0}
.header-issue{flex:0 0 auto;margin:0;padding:8px 12px;font-size:.72rem}
.header-issue strong{font-size:1.35rem;line-height:1.2}
@media(max-width:560px){.brand-row .brand{font-size:.85rem;gap:8px}.header-issue{margin:0;padding:7px 9px;font-size:.65rem}.header-issue strong{font-size:1.2rem}}

/* Align each token, customer and actions in a single row. */
.token-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px}
.token-number{min-width:0}
.token-person{min-width:0;overflow-wrap:anywhere}
.token-actions{width:auto;align-items:center}
.token-actions form{margin:0}
@media(max-width:560px){
.token-row{grid-template-columns:34px minmax(0,1fr) 82px;gap:9px;padding:14px 0}
.token-number{font-size:1.15rem}
.token-person strong{font-size:.86rem;line-height:1.3}
.token-person a{font-size:.8rem;margin-top:3px}
.token-person small{font-size:.68rem;line-height:1.4;margin-top:3px}
.token-actions{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;width:auto}
.token-actions form,.token-actions .small-button{width:100%}
.token-actions .small-button{font-size:.72rem;padding:9px 5px;min-height:36px;text-align:center}
}

/* Compact customer board and accessible modal forms. */
.customer-simple{max-width:560px;margin:24px auto 55px}
.customer-simple h1{font-size:clamp(1.65rem,5vw,2.2rem);margin:7px 0}
.customer-simple .intro{font-size:.9rem;margin-bottom:16px}
.customer-simple .queue-primary{padding:24px}
.customer-simple .queue-primary strong{font-size:clamp(5rem,18vw,7rem);margin:0}
.customer-simple .queue-primary small{font-size:.8rem}
.customer-simple .ticket{margin:18px 0}
.customer-simple .ticket strong{font-size:3.4rem}
.empty-ticket{margin-top:18px}
.empty-ticket p{margin:5px 0 12px}
.header-find{border:1px solid var(--dark);border-radius:9px;background:white;color:var(--dark);font-size:.76rem;font-weight:800;padding:9px 10px;white-space:nowrap;cursor:pointer}
.customer-dialog{border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 80px #102b2866;max-width:min(430px,calc(100% - 28px));width:100%;max-height:min(90vh,720px);overflow:auto;padding:23px;color:var(--ink);background:white}
.customer-dialog::backdrop{background:#0c2926a8}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dialog-head h2{margin:3px 0 10px}
.dialog-close{border:0;background:#e9f1ed;color:var(--dark);border-radius:9px;min-width:36px;height:36px;font-size:1.5rem;line-height:1;cursor:pointer}
.customer-dialog .muted{font-size:.84rem;margin:0 0 12px}
.customer-dialog .form label{margin-top:13px}
.customer-dialog .form input:not([type=checkbox]){min-height:44px}
.customer-dialog .form .button{justify-content:center;margin-top:16px}
.customer-dialog .fine{font-size:.71rem;margin-top:14px}
@media(max-width:560px){.customer-simple{margin:16px auto 45px}.customer-simple .queue-primary{padding:20px}.customer-simple .queue-primary strong{font-size:5.5rem}.customer-dialog{padding:18px}.header-find{font-size:.7rem;padding:8px}.brand-row .brand{font-size:.78rem}.brand small{font-size:.52rem}}

/* Fit the five admin links on a narrow phone. */
@media(max-width:560px){.header nav{gap:clamp(5px,1.5vw,10px);font-size:.69rem}}

/* Keep the customer’s two key numbers above the fold on phones. */
.header-live{padding:0;margin:0;gap:8px;line-height:1.25;font-size:.75rem}
.customer-simple{margin-top:10px}
.customer-simple h1{font-size:1.55rem;margin:3px 0 10px}
.customer-simple .intro{display:none}
.customer-simple .queue-primary{padding:15px 20px}
.customer-simple .queue-primary strong{font-size:4.5rem;line-height:1;margin:4px 0}
.customer-simple .ticket{padding:15px 20px;margin:12px 0}
.customer-simple .ticket strong{font-size:3rem}
.customer-simple .empty-ticket{padding:17px;margin-top:12px}
.admin-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-title-row h1{margin:0}
.admin-new-token{font-size:.8rem;min-height:38px;padding:8px 12px;white-space:nowrap;text-decoration:none}
@media(max-width:560px){
.header{padding-top:12px;padding-bottom:10px;gap:7px}
.customer-simple{margin:8px auto 26px}
.customer-simple h1{font-size:1.4rem;margin:2px 0 9px}
.customer-simple .queue-primary{padding:15px}
.customer-simple .queue-primary strong{font-size:4rem;margin:4px 0}
.customer-simple .ticket{padding:14px 16px;margin:11px 0}
.customer-simple .ticket strong{font-size:2.7rem}
.customer-simple .ticket small{font-size:.72rem}
.admin-title-row h1{font-size:1.35rem}
.admin-new-token{font-size:.74rem;padding:7px 9px;min-height:34px}
}

/* An obvious alternative beneath the registration button. */
.dialog-or{text-align:center;color:var(--muted);font-size:.78rem;margin:10px 0 6px}
.dialog-find-link{display:block;width:100%;border:1px solid var(--dark);border-radius:11px;padding:10px 14px;min-height:44px;text-align:center;text-decoration:none;color:var(--dark);font-weight:800;font-size:.88rem}
.dialog-find-link:hover{background:#e9f1ed}
.dialog-find-link:focus-visible{outline:3px solid #8fcdac;outline-offset:2px}

/* Make a failed lookup visible before the live queue. */
.result-error{background:#fff0ee;border:2px solid #df6a61;border-radius:14px;color:#8d2424;padding:18px;margin:0 0 16px;box-shadow:0 8px 25px #8d242414}
.result-error strong{display:block;font-size:1.25rem;line-height:1.2}
.result-error p{font-size:.89rem;margin:7px 0 12px;line-height:1.45}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}
.result-actions .small-button{min-height:39px;padding:8px 11px}
@media(max-width:560px){.result-error{padding:14px;margin-bottom:12px}.result-error strong{font-size:1.15rem}}