/* Signature Nails usability layer. Business logic remains in auth.js. */
:root { --ink:#392631; --muted:#705962; --rose:#964c62; --rose-dark:#703044; --cream:#fffaf8; --line:#ead8d9; --surface:#fff; --soft:#f9eff0; }
html,body {height:auto;min-height:100%;width:100%;overflow:auto;overscroll-behavior:auto;background:#fffaf8;color:var(--ink)}
body {margin:0}
.layout {display:block;width:100%;height:auto;min-height:100dvh;overflow:visible;padding:0;background:var(--cream)}
.layout>.description {display:none}
.phone {display:block;position:relative;width:100%;height:auto;min-height:100dvh;max-width:none;margin:0;border-radius:0;box-shadow:none;overflow:visible;aspect-ratio:auto;background:#fffaf8}
.poster,.hotspot,.home-contact-panel {display:none!important}
#demo-mode-banner {z-index:50!important;position:sticky!important;top:0!important;font-size:12px!important;line-height:1.4}
#demo-mode-banner[hidden] {display:none!important}
.site-header {max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}
.brand {display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 23px Georgia,serif;white-space:nowrap}
.brand-mark {display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f3d9df;color:#7a3d50;font-size:22px}
.site-nav {display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.site-nav button,.site-button {border:1px solid transparent;background:transparent;color:var(--ink);padding:12px 16px;border-radius:14px;font-size:14px;font-weight:700;text-decoration:none}
.site-nav .nav-accent,.site-button.primary-action {background:var(--rose-dark);color:#fff;border-color:var(--rose-dark)}
.site-nav button:hover,.site-button:hover {background:#f4e4e8}
.site-nav .nav-accent:hover,.site-button.primary-action:hover {background:#512133;color:#fff}
.owner-shortcut {position:static;z-index:1;border-radius:14px;border:1px solid #d6b5bd;box-shadow:none;padding:12px 15px;font-size:13px}
.hero {max-width:1240px;margin:30px auto 0;padding:32px 24px 40px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-eyebrow {text-transform:uppercase;letter-spacing:.22em;font-weight:700;color:var(--rose);font-size:12px}
.hero h1 {font:normal clamp(40px,6vw,78px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:15px 0 20px;color:var(--ink)}
.hero h1 em {color:#934d64;font-style:normal}
.hero p {color:var(--muted);font-size:17px;line-height:1.7;max-width:580px}
.hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.site-button {display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:#fff;border-color:#decbd0;cursor:pointer}
.hero-note {font-size:12px!important;line-height:1.55!important}
.hero-art {min-height:420px;border-radius:32px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 25% 18%,#fbe6ed 0%,transparent 40%),linear-gradient(140deg,#ecd1db,#f8e7df 60%,#efcbcc);box-shadow:0 28px 55px #763e5420}
.hero-art::before,.hero-art::after {content:"";position:absolute;border:2px solid #ffffffa3;border-radius:48% 52% 54% 46%;width:300px;height:300px;transform:rotate(-28deg);left:-110px;bottom:-125px}
.hero-art::after {left:auto;bottom:auto;right:-120px;top:-110px;width:340px;height:340px}
.hero-art-inner {z-index:1;text-align:center;border:1px solid #ffffffb0;background:#fff9f4b9;backdrop-filter:blur(7px);padding:40px 30px;border-radius:150px 150px 28px 28px;width:72%;box-shadow:0 14px 34px #8f5c5e18}
.hero-art .star {font:normal 52px Georgia,serif;color:#ab7287;display:block}
.hero-art strong {font:normal 39px Georgia,serif;display:block;color:#6e354b;margin:16px 0}
.hero-art small {text-transform:uppercase;letter-spacing:.23em;font-weight:700;font-size:11px;color:#835a69}
.site-section {max-width:1240px;margin:auto;padding:40px 24px}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-heading h2 {font:normal clamp(29px,3.5vw,45px)/1.2 Georgia,serif;margin:0}
.section-heading p {color:var(--muted);margin:8px 0 0}
.service-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-tile {border:1px solid var(--line);border-radius:20px;background:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:172px}
.service-tile strong {font:normal 24px Georgia,serif;color:#563445}
.service-tile p {font-size:14px;color:var(--muted);line-height:1.5;margin:8px 0}
.service-tile button {background:transparent;border:0;color:#814459;text-decoration:underline;padding:0;align-self:flex-start;font-weight:700;cursor:pointer}
.site-footer {background:#503142;color:#fff6f5;padding:30px 24px;margin-top:20px}
.site-footer-inner {max-width:1192px;margin:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.site-footer p {color:#f4dcdf;font-size:13px}
.overlay {z-index:100;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain}
.dialog {width:min(100%,640px);max-height:calc(100dvh - 30px);padding:30px;background:var(--surface);border-radius:24px}
.overlay.dashboard-view .dialog {width:min(100%,1160px)}
.dialog h2 {font-size:clamp(27px,3vw,39px);color:#513044}
.dialog h3 {color:#503142}
.dialog .primary {max-width:none}
.dialog .back {min-height:40px}
.dialog .field {font-size:14px}
.dialog .note {font-size:13px}
.dialog button {white-space:normal}
.dialog .close {position:sticky;float:right;top:0;z-index:4}
.dialog [hidden] {display:none!important}
.ui-toolbar {display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:20px 0}
.ui-toolbar .primary {width:auto;margin:0}
.ui-muted {color:var(--muted);font-size:14px;line-height:1.5}
.ui-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0}
.ui-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.ui-stat,.ui-card {border:1px solid var(--line);border-radius:18px;background:#fff;padding:18px}
.ui-stat strong {font-size:30px;color:#682f48;display:block}
.ui-stat span {display:block;font-size:13px;color:var(--muted)}
.ui-card h3 {margin:0 0 9px;font-size:17px}
.ui-card p {color:var(--muted);font-size:14px;line-height:1.5}
.ui-card button {border:0;background:transparent;color:var(--rose-dark);text-decoration:underline;font-weight:700;padding:8px 0;cursor:pointer}
.ui-list {display:grid;gap:8px}
.ui-row {padding:14px;border:1px solid var(--line);border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ui-row span,.ui-row small {display:block;color:var(--muted);font-size:13px;margin-top:5px}
.ui-chip {display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:6px 9px;background:#f4e5eb;color:#803f52}
.ui-chip.confirmed,.ui-chip.completed {background:#e3f3ea;color:#286348}
.ui-chip.declined,.ui-chip.cancelled {background:#f8e5e5;color:#952e45}
.ui-chip.requested {background:#fff2db;color:#81571b}
.ui-actions {display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.ui-actions button {width:auto;margin:0}
.booking-progress {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:22px 0}
.booking-progress div {border-top:4px solid #e9d5dc;padding:10px 0;color:#745b66;font-size:12px}
.booking-progress .current {border-color:#9c5270;color:#612b44;font-weight:700}
.booking-progress .complete {border-color:#b37b92}
.booking-pane {padding:6px 0 10px}
.booking-actions {display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.booking-actions button {width:auto;margin:0;min-width:120px}
.booking-price {border:1px solid #ead6dd;background:#fbf2f4;border-radius:13px;padding:14px;margin-top:15px;color:#5f3b4d}
.booking-summary {border:1px solid var(--line);border-radius:16px;padding:16px;margin:15px 0}
.booking-summary div {display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.booking-summary div:last-child {border:0}
.booking-summary span {color:var(--muted)}
.ui-error {color:#9f213e;font-size:14px;margin-top:10px;font-weight:700}
.ui-success {color:#216746;font-size:14px;margin-top:10px;font-weight:700}
.calendar-controls {display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:15px 0}
.calendar-controls label {font-size:13px;color:var(--ink);font-weight:600;flex:1;min-width:140px}
.calendar-controls input,.calendar-controls select {display:block;width:100%;min-height:42px;border:1px solid #d8c4cc;border-radius:10px;padding:9px;background:#fff;margin-top:5px}
.calendar-week,.calendar-month {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;overflow-x:auto}
.calendar-cell {border:1px solid var(--line);border-radius:12px;min-height:126px;padding:10px;min-width:90px;background:#fff}
.calendar-cell.today {background:#fbf1f5;border-color:#c38ca2}
.calendar-cell .day-label {font-size:12px;font-weight:800;color:#6e3950}
.calendar-entry {width:100%;display:block;text-align:left;background:#f6eaf0;border:0;border-radius:8px;padding:7px;margin-top:7px;color:#5c3046;font-size:12px;white-space:normal;cursor:pointer}
.calendar-entry.confirmed {background:#ddf0e6;color:#245c41}
.calendar-entry.cancelled,.calendar-entry.declined {background:#f5e8e8;color:#87515a}
.calendar-day {overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.calendar-day-head,.calendar-day-body {display:grid;grid-template-columns:65px repeat(var(--cols),minmax(145px,1fr));min-width:450px}
.calendar-day-head {position:sticky;top:0;background:#faeef2;z-index:2;border-bottom:1px solid var(--line)}
.calendar-day-head>* {padding:12px 8px;font-size:13px;font-weight:800;text-align:center;border-right:1px solid var(--line)}
.calendar-day-body {height:780px;position:relative}
.calendar-time {position:relative;background:#faf6f8;border-right:1px solid var(--line)}
.calendar-time span {position:absolute;top:var(--top);left:6px;font-size:11px;color:var(--muted)}
.calendar-lane {position:relative;border-right:1px solid var(--line);background:repeating-linear-gradient(to bottom,#fff 0px,#fff 59px,#f0e3e7 59px,#f0e3e7 60px)}
.calendar-block {position:absolute;left:4px;right:4px;top:var(--top);min-height:36px;height:var(--height);background:#f4e1e9;border-left:4px solid #ad7186;border-radius:8px;padding:7px;text-align:left;overflow:auto;font-size:11px;cursor:pointer;color:#512c3f}
.calendar-block.confirmed {background:#e3f4ea;border-color:#49916f}
.calendar-block.cancelled,.calendar-block.declined {background:#f8e9eb;border-color:#bf8a91}
.calendar-block strong {display:block;font-size:12px}
.ui-modal-section {max-width:640px}
.dialog .ui-modal-section h2 {margin-bottom:15px}
@media (max-width:850px) {
 .hero {grid-template-columns:1fr;gap:16px}
 .hero-art {min-height:250px}
 .hero-art-inner {padding:20px;max-width:270px}
 .hero-art strong {font-size:29px}
 .service-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .ui-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px) {
 .site-header {padding:13px 16px;align-items:flex-start;flex-direction:column;gap:8px}
 .brand {font-size:21px}
 .site-nav {gap:4px;width:100%}
 .site-nav button,.owner-shortcut {padding:9px 11px;min-height:43px;font-size:13px}
 .hero {margin:0;padding:28px 18px;gap:20px}
 .hero h1 {font-size:43px}
 .hero p {font-size:15px}
 .hero-art {min-height:220px;border-radius:20px}
 .hero-art-inner {padding:20px 16px}
 .site-section {padding:28px 18px}
 .service-grid {grid-template-columns:1fr}
 .service-tile {min-height:125px}
 .dialog {width:100%;max-height:calc(100dvh - 12px);padding:17px;border-radius:17px}
 .overlay {padding:6px}
 .ui-grid,.ui-stats {grid-template-columns:1fr 1fr}
 .ui-grid .ui-card {padding:13px}
 .ui-row {flex-direction:column;align-items:stretch}
 .booking-progress div {font-size:11px}
 .calendar-week,.calendar-month {gap:4px}
 .calendar-cell {padding:6px;min-width:94px}
 .section-heading {align-items:start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce) { * {scroll-behavior:auto!important;animation:none!important;transition:none!important} }
:focus-visible {outline:3px solid #78334e;outline-offset:3px}

/* Welcome artwork is the primary entrance; the upgraded application is one tap away. */
body.welcome-mode {overflow:hidden;height:100dvh}
body.welcome-mode .layout,body.welcome-mode .phone {height:100dvh;min-height:0;overflow:hidden}
body.welcome-mode .phone>.poster {display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
body.welcome-mode .phone>.hotspot {display:block!important;position:absolute}
body.welcome-mode .phone>.home-contact-panel {display:flex!important}
body.welcome-mode .phone>#site-shell {display:none!important}
body:not(.welcome-mode) .phone>#welcome-explore {display:none!important}
body:not(.welcome-mode) .phone>.poster,
body:not(.welcome-mode) .phone>.hotspot,
body:not(.welcome-mode) .phone>.home-contact-panel {display:none!important}
#welcome-explore {position:absolute;z-index:5;left:15%;bottom:1.4%;width:70%;min-height:43px;padding:9px 14px;border:1px solid #f9e6e6;border-radius:999px;background:linear-gradient(120deg,#8a4356,#623046);color:#fff;font-size:14px;font-weight:800;box-shadow:0 5px 16px #4a233e50}
#welcome-explore:hover {background:#512336}
#welcome-explore:focus-visible {outline:3px solid #432035;outline-offset:3px}
body.welcome-mode .phone>.hotspot:focus-visible {outline:3px solid #4f2136;outline-offset:2px}
body.welcome-mode #legacy-owner-shortcut {z-index:6}
#return-welcome {border:1px solid #decbd0;background:#fff;color:#682f48}
@media(min-width:900px) {body.welcome-mode .phone {width:min(100%,510px);height:calc(100dvh - 50px);margin:0 auto;top:25px;box-shadow:0 14px 65px #8c42464a;border-radius:25px}body.welcome-mode .layout {background:radial-gradient(circle at 15% 30%,#f8e5e9,#efcbd1 65%,#f8eee9)}}
@media(max-height:600px){#welcome-explore {min-height:32px;font-size:12px;bottom:.6%;padding:5px 10px}}

/* Operational agenda and request approval controls */
.ops-section{margin:22px 0;padding:17px;border:1px solid var(--line);border-radius:18px;background:#fff}
.ops-section-heading,.ops-request-header,.ops-appointment-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ops-section-heading h3{margin:0 0 12px}.ops-request-list,.ops-agenda{display:grid;gap:12px}
.ops-request,.ops-appointment{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.ops-request-header p,.ops-appointment p{margin:6px 0;color:var(--muted);font-size:14px}
.ops-request .field{display:block;max-width:420px;margin:12px 0}
.ops-row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:13px}
.ops-row-actions .site-button{min-height:44px;cursor:pointer}
.ops-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.ops-tabs button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 18px;min-height:45px;font-weight:700;cursor:pointer}
.ops-tabs button.active{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.ops-tabs button:disabled{opacity:.5;cursor:not-allowed}
.ops-appointment-top>div{display:flex;flex-direction:column;gap:4px}
.ops-appointment h3{font:normal 22px Georgia,serif;margin:14px 0 6px}
.ops-time{font-size:22px;font-weight:700;color:var(--rose-dark)}
.ops-action-panel{padding:15px;background:var(--soft);border-radius:12px;margin:12px 0}
.ops-action-panel[hidden]{display:none}
.ops-empty{border:1px dashed var(--line);border-radius:16px;text-align:center;padding:30px;color:var(--muted)}
@media(max-width:600px){.ops-section,.ops-request,.ops-appointment{padding:13px}.ops-section-heading{align-items:flex-start}.ops-row-actions .site-button{flex:1 1 140px}.ops-tabs button{flex:1;padding:12px 8px}}

/* Read-only launch readiness view */
.readiness-list{display:grid;gap:12px;margin:20px 0}.readiness-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}.readiness-item p{margin:6px 0;color:var(--muted);font-size:14px}.readiness-item button{flex-shrink:0}@media(max-width:600px){.readiness-item{align-items:flex-start;flex-direction:column}.readiness-item button{width:100%}}

/* Planning-phase testing interface; intentionally separate from branded welcome artwork. */
.demo-guide{max-width:920px;margin:auto}.demo-guide-heading h2{margin:10px 0}.demo-guide-heading p{line-height:1.65;color:var(--muted)}
.demo-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-dark);font-weight:800}
.demo-live-status,.demo-safety{padding:14px 17px;border-radius:14px;margin:15px 0;border:1px solid var(--line);background:var(--soft);line-height:1.55;font-size:14px}
.demo-safety{background:#fff9f4}.demo-role-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}
.demo-role-tabs button{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 17px;min-height:44px;color:var(--ink);font-weight:700}
.demo-role-tabs button.is-selected{background:var(--rose-dark);border-color:var(--rose-dark);color:#fff}
.demo-guide-access{color:var(--muted);font-size:14px;line-height:1.5}
.demo-list-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.demo-list-header h3{margin:13px 0}.demo-list-header span{font-weight:700;color:var(--rose-dark)}
.demo-checklist{display:grid;gap:12px;margin:18px 0}
.demo-check-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff}
.demo-check-item label{display:flex;align-items:flex-start;gap:12px;flex:1;cursor:pointer}
.demo-check-item label input{width:22px;height:22px;flex:none;margin:2px 0;accent-color:var(--rose-dark)}
.demo-check-item strong,.demo-check-item small{display:block}
.demo-check-item small{font-size:13px;line-height:1.5;color:var(--muted);margin-top:5px}
.demo-check-item .site-button{flex:none}.demo-guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
@media(max-width:600px){.demo-check-item{align-items:stretch;flex-direction:column}.demo-check-item .site-button{width:100%}.demo-role-tabs button{flex:1 1 40%}}