:root {
  --ink: #0a0a0a;
  --bone: #f5f0e8;
  --cream: #faf7f2;
  --red: #c0392b;
  --red-light: #e8d5d3;
  --gold: #b8943f;
  /* Lifted gold for text over the hero photo -- see .portal-hero */
  --gold-hero: #e0bd6d;
  --gold-light: #f0e6c8;
  --gray: #888;
  --gray-light: #e8e4dc;
  --success: #2d6a4f;
  --success-bg: #d8f3dc;
  --warning: #7d5a00;
  --warning-bg: #fff3cd;
  --radius: 2px;
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);min-height:100vh;font-size:15px;}
html.modal-open,
body.modal-open{overflow:hidden;touch-action:none;}
body.modal-open{position:fixed;left:0;right:0;width:100%;}

/* ---- TOP NAV ---- */
.topnav{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:60px;background:var(--ink);position:sticky;top:0;z-index:100;}
/* font-weight is pinned because this is an <h1> on the artist dashboard. */
.topnav-brand{font-family:var(--font-display);font-size:1.3rem;font-weight:400;color:var(--bone);letter-spacing:.02em;}
#view-client ~ nav .topnav-brand, .client-mode .topnav-brand{display:none;}
.topnav-brand span{color:var(--gold);font-style:italic;}
.nav-toggle{display:flex;gap:4px;}
.nav-pill{padding:6px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:.2s;}
.nav-pill.active,.nav-pill:hover{background:var(--bone);color:var(--ink);}

/* ---- LAYOUT ---- */
.container{max-width:900px;margin:0 auto;padding:2rem 1.5rem;}
.page{display:none;}
.page.active{display:block;}

/* ---- SPINNER ---- */
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px;}

/* ---- CLIENT PORTAL TABS ---- */
.client-nav-tab{background:none;border:none;color:rgba(245,240,232,.5);font-family:var(--font-body);font-size:14px;padding:14px 20px;cursor:pointer;border-bottom:2px solid transparent;transition:.15s;letter-spacing:.02em;}
.client-nav-tab:hover{color:var(--bone);}
.client-nav-tab-active{color:var(--bone);border-bottom-color:var(--gold);}

/* ---- FAQ ---- */
#portal-faq-content a { color: inherit; }
#client-page-faq { color: var(--ink); }
.faq-shell{max-width:760px;margin:0 auto;padding:2.75rem 0 1rem;}
.faq-header{text-align:center;margin:0 auto 1.75rem;max-width:530px;}
.faq-eyebrow{margin:0 0 .55rem;color:var(--gold);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.faq-header h2{margin:0;font-family:var(--font-display);font-size:clamp(1.85rem,5vw,2.35rem);font-weight:400;line-height:1.15;}
.faq-header p:last-child{margin:.7rem 0 0;color:var(--gray);font-size:14px;line-height:1.65;}
.faq-list{border-top:1px solid var(--gray-light);}
.faq-item{border-bottom:1px solid var(--gray-light);background:#fff;transition:background .18s ease;}
.faq-item[open]{background:var(--gold-light);}
.faq-item summary{display:grid;grid-template-columns:38px 1fr 18px;align-items:center;gap:.75rem;padding:1.2rem 1.25rem;cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-number{color:var(--gold);font-size:11px;font-weight:500;letter-spacing:.08em;}
.faq-question{font-size:15px;font-weight:500;line-height:1.45;}
.faq-toggle{width:11px;height:11px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;}
.faq-item[open] .faq-toggle{transform:rotate(225deg) translate(-2px,-2px);}
.faq-answer{padding:0 3.6rem 1.3rem 4.7rem;color:#4d4a45;font-size:14px;line-height:1.75;}

@media(max-width:600px){
  .faq-shell{padding:2rem 0 .5rem;}
  .faq-header{margin-bottom:1.35rem;}
  .faq-item summary{grid-template-columns:28px 1fr 14px;padding:1rem;gap:.55rem;}
  .faq-answer{padding:0 1rem 1.1rem 3.3rem;}
}

/* ---- AFTERCARE ---- */
.care-shell{max-width:640px;margin:0 auto;padding:2.75rem 0 1rem;}
.care-header{text-align:center;margin:0 auto 1.75rem;}
.care-eyebrow{margin:0 0 .55rem;color:var(--gold);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.care-header h2{margin:0;font-family:var(--font-display);font-size:clamp(1.85rem,5vw,2.35rem);font-weight:400;line-height:1.15;}
.care-header p:last-child{margin:.7rem 0 0;color:var(--gray);font-size:14px;line-height:1.65;}
.care-body{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:1.75rem 1.6rem;}
.care-body p{margin:0 0 1rem;font-size:15px;line-height:1.75;}
.care-body p:last-child{margin-bottom:0;}
.care-list{margin:0 0 1rem;padding:0;list-style:none;}
.care-list:last-child{margin-bottom:0;}
.care-list li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:15px;line-height:1.7;}
.care-list li:last-child{margin-bottom:0;}
.care-list li::before{content:'';position:absolute;left:.35rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--gold);}

/* Hide the scrollbar on the tab strip -- it scrolls when four tabs don't fit. */
.client-nav-strip{scrollbar-width:none;-ms-overflow-style:none;}
.client-nav-strip::-webkit-scrollbar{display:none;}
.client-nav-tab{flex:0 0 auto;}

/* ---- PORTFOLIO GALLERY ---- */
.pf-shell{max-width:900px;margin:0 auto;padding:2.75rem 0 1rem;}
.pf-header{text-align:center;margin:0 auto 1.75rem;max-width:530px;}
.pf-eyebrow{margin:0 0 .55rem;color:var(--gold);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.pf-header h2{margin:0;font-family:var(--font-display);font-size:clamp(1.85rem,5vw,2.35rem);font-weight:400;line-height:1.15;}
.pf-header p:last-child{margin:.7rem 0 0;color:var(--gray);font-size:14px;line-height:1.65;}

/* Columns are packed in JS from the stored aspect ratios; this only lays them
   out side by side. Equal widths are what make that arithmetic valid. */
.pf-grid{display:flex;gap:10px;align-items:flex-start;}
.pf-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;}
.pf-tile{display:block;width:100%;padding:0;border:0;margin:0;background:var(--cream);
  border-radius:var(--radius);cursor:pointer;overflow:hidden;line-height:0;}
.pf-tile img{width:100%;height:auto;display:block;}
.pf-tile:hover img{opacity:.88;}
.pf-tile img{transition:opacity .15s;}

/* ---- PORTFOLIO: ARTIST UPLOAD ---- */
/* A label wrapping a hidden input: keyboard activation and a large tap target
   come free, with no key handling of our own. */
.pf-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:2.25rem 1.25rem;border:1.5px dashed var(--gray-light);border-radius:var(--radius);
  background:var(--cream);text-align:center;cursor:pointer;transition:.15s;}
.pf-drop:hover,.pf-drop-over{border-color:var(--ink);background:var(--bone);}
.pf-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.pf-drop-icon{font-size:26px;color:var(--gold);line-height:1;}
.pf-drop-title{font-size:15px;font-weight:500;}
.pf-drop-sub{font-size:12px;color:var(--gray);}
.pf-drop:focus-within{outline:2px solid var(--ink);outline-offset:2px;}

.pf-queue{margin-top:1rem;border-top:1px solid var(--gray-light);}
.pf-q-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--gray-light);font-size:13px;}
.pf-q-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.pf-q-state{color:var(--gray);flex-shrink:0;text-align:right;}
.pf-q-ok{color:var(--success);}
.pf-q-fail{color:var(--red);}

.pf-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;}
.pf-admin-item{display:flex;flex-direction:column;gap:.5rem;}
.pf-admin-thumb{background:var(--cream);border:1px solid var(--gray-light);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.pf-admin-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pf-admin-broken::after{content:'file missing';font-size:12px;color:var(--red);}
.pf-admin-broken img{display:none;}
.pf-admin-alt{font-size:13px;padding:7px 10px;}
.pf-admin-alt.pf-saved{border-color:var(--success);}
.pf-admin-actions{display:flex;gap:.35rem;}
.pf-admin-actions .btn{flex:1;justify-content:center;padding:6px 8px;}
.pf-admin-del{color:var(--red);border-color:var(--gray-light);}
.pf-admin-del:hover{background:var(--red-light);border-color:var(--red);}

/* ---- LIGHTBOX ---- */
/* Deliberately not using .modal: that forces a white card, 2rem padding, a
   480px cap, and a bottom sheet on mobile. */
#modal-lightbox.modal-bg{background:rgba(10,10,10,.97);padding:0;align-items:center;}
.lightbox{position:relative;width:100%;height:100vh;height:100dvh;
  display:flex;align-items:center;justify-content:center;}
.lightbox img{max-width:100vw;max-height:100vh;max-height:100dvh;
  width:auto;height:auto;object-fit:contain;}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;background:rgba(10,10,10,.55);color:var(--bone);
  border:1px solid rgba(245,240,232,.25);border-radius:50%;cursor:pointer;
  font-family:var(--font-body);line-height:1;transition:.15s;}
.lb-btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.lb-close{top:16px;right:16px;font-size:26px;padding-bottom:3px;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:30px;padding-bottom:4px;}
.lb-prev{left:16px;}
.lb-next{right:16px;}
.lb-meta{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.25rem 1.25rem;text-align:center;
  background:linear-gradient(to top,rgba(10,10,10,.75),transparent);pointer-events:none;}
.lb-caption{color:var(--bone);font-size:14px;line-height:1.5;margin-bottom:.35rem;}
.lb-counter{color:rgba(245,240,232,.55);font-size:12px;letter-spacing:.08em;}
#modal-lightbox :focus-visible{outline-color:var(--gold);}

/* ---- BOOKING REFERENCE PHOTOS ---- */
.ref-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:1.1rem 1rem;border:1.5px dashed var(--gray-light);border-radius:var(--radius);
  background:var(--cream);text-align:center;cursor:pointer;transition:.15s;}
.ref-drop:hover,.ref-drop-over{border-color:var(--ink);background:#fff;}
.ref-drop:focus-within{outline:2px solid var(--ink);outline-offset:2px;}
.ref-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ref-drop-icon{font-size:20px;color:var(--gold);line-height:1;}
.ref-drop-title{font-size:14px;font-weight:500;}
.ref-drop-sub{font-size:12px;color:var(--gray);}
.ref-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;}
.ref-list:empty{margin-top:0;}
.ref-item{position:relative;width:72px;height:72px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--gray-light);}
.ref-item img{width:100%;height:100%;object-fit:cover;display:block;}
.ref-remove{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;
  background:rgba(10,10,10,.72);color:#fff;font-size:15px;cursor:pointer;}
.ref-remove:hover{background:var(--red);}

/* Artist-side viewer inside the appointment modal */
.ref-view{display:flex;flex-wrap:wrap;gap:.4rem;}
.ref-view-item{width:64px;height:64px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--gray-light);display:block;}
.ref-view-item img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- CONSENT CHECKBOX ---- */
.consent-row{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1.25rem;
  padding:.875rem 1rem;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);}
.consent-row.consent-missing{border-color:var(--red);background:var(--red-light);}
.consent-check{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--ink);cursor:pointer;}
.consent-row label{font-size:14px;line-height:1.5;color:var(--ink);cursor:pointer;}

/* ---- PAYMENT CARDS ---- */
.payment-card{border:2px solid var(--gray-light);border-radius:var(--radius);padding:.875rem 1rem;cursor:pointer;transition:.15s;background:#fff;}
.payment-card:hover{border-color:var(--ink);}
.payment-card-active{border-color:var(--ink);background:var(--cream);}

/* ---- TABS ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--gray-light);margin-bottom:2rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:10px 16px;background:none;border:none;border-bottom:2px solid transparent;font-family:var(--font-body);font-size:14px;color:var(--gray);cursor:pointer;margin-bottom:-1px;transition:.15s;white-space:nowrap;flex-shrink:0;}
.tab.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:500;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---- HEADINGS ---- */
.page-title{font-family:var(--font-display);font-size:2rem;font-weight:400;margin-bottom:.25rem;}
.page-sub{color:var(--gray);font-size:14px;margin-bottom:2rem;}

/* ---- CARDS ---- */
.card{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem;}
.card-sm{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:.75rem;}

/* ---- SETTINGS ---- */
.settings-header-block{margin-bottom:1rem;}
.settings-header-copy{margin-top:.5rem;color:var(--gray);font-size:14px;line-height:1.7;max-width:640px;}
.settings-quicknav{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem;}
.settings-quicknav-link{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid var(--gray-light);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:.15s;}
.settings-quicknav-link:hover{border-color:var(--ink);background:var(--bone);}
.settings-divider{margin:0 0 1.5rem;padding:0 0 1rem;border-bottom:1px solid var(--gray-light);}
.settings-divider-kicker{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem;}
.settings-divider-title{font-family:var(--font-display);font-size:1.15rem;font-weight:400;line-height:1.2;}
.settings-divider-copy{margin-top:.45rem;color:var(--gray);font-size:13px;line-height:1.7;max-width:620px;}

/* ---- STATS ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);border-radius:var(--radius);margin-bottom:2rem;overflow:hidden;}
.stat{padding:1.5rem 1.25rem;color:var(--bone);border-right:1px solid rgba(255,255,255,.08);position:relative;}
.stat:last-child{border-right:none;}
.stat-l{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);opacity:.8;margin-bottom:.5rem;}
.stat-n{font-family:var(--font-display);font-size:2.4rem;font-weight:400;line-height:1;}

/* ---- FORMS ---- */
.form-group{margin-bottom:1.25rem;}
.form-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--gray);margin-bottom:6px;font-weight:500;}
.form-input{width:100%;padding:10px 14px;border:1px solid var(--gray-light);border-radius:var(--radius);font-family:var(--font-body);font-size:15px;background:#fff;color:var(--ink);transition:border .15s;outline:none;}
.form-input:focus{border-color:var(--ink);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
textarea.form-input{resize:vertical;min-height:80px;}
select.form-input{cursor:pointer;}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border:1px solid var(--ink);border-radius:var(--radius);font-family:var(--font-body);font-size:14px;cursor:pointer;transition:.15s;font-weight:500;}
.btn-primary{background:var(--ink);color:var(--bone);}
.btn-primary:hover{background:#222;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--gray-light);}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red);}
.btn-sm{padding:7px 14px;font-size:13px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-full{width:100%;justify-content:center;}

/* ---- FOCUS ---- */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.topnav :focus-visible,.portal-hero :focus-visible,.client-nav-tab:focus-visible,
.pin-screen :focus-visible,.stats :focus-visible{outline-color:var(--gold);}
.cal-day:focus-visible,.slot:focus-visible{outline-offset:1px;}

/* ---- BADGES ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.badge-green{background:var(--success-bg);color:var(--success);}
.badge-yellow{background:var(--warning-bg);color:var(--warning);}
.badge-red{background:var(--red-light);color:var(--red);}
.badge-gray{background:var(--gray-light);color:var(--gray);}

/* ---- CALENDAR ---- */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.cal-month{font-family:var(--font-display);font-size:1.3rem;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:1rem;}
.cal-hdr{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);padding:4px 0;}
.cal-day{text-align:center;padding:10px 4px;border-radius:var(--radius);font-size:13px;cursor:pointer;border:1px solid transparent;transition:.12s;color:var(--ink);}
.cal-day:hover:not(.cal-other):not(.cal-past){border-color:var(--ink);}
.cal-day.cal-other{color:var(--gray-light);}
.cal-day.cal-past{color:var(--gray-light);cursor:default;}
.cal-day.cal-today{font-weight:600;}
.cal-day.cal-open{background:var(--success-bg);color:var(--success);}
.cal-day.cal-partial{background:var(--warning-bg);color:var(--warning);}
.cal-day.cal-full{background:var(--red-light);color:var(--red);cursor:default;}
.cal-day.cal-selected{background:var(--ink)!important;color:var(--bone)!important;border-color:var(--ink)!important;}
.cal-day.cal-no-slots{color:var(--ink);border:1px solid transparent;}
.cal-day.cal-no-slots:hover{border-color:var(--gray-light);background:var(--bone);}
.cal-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray);}
.leg-dot{width:10px;height:10px;border-radius:50%;}

/* ---- CALENDAR EMPTY / ERROR STATE ---- */
.cal-empty{margin-top:1rem;padding:1.5rem 1.25rem;text-align:center;background:var(--cream);
  border:1px solid var(--gray-light);border-radius:var(--radius);}
.cal-empty-title{font-family:var(--font-display);font-size:1.15rem;font-weight:400;margin-bottom:.4rem;}
.cal-empty p{font-size:14px;color:var(--gray);line-height:1.6;margin:0 auto;max-width:380px;}
.cal-empty p a{color:var(--gold);}
.cal-empty .btn{margin-top:1rem;}
.cal-empty-error{background:var(--red-light);border-color:var(--red);}
.cal-empty-error .cal-empty-title{color:var(--red);}
.cal-empty-error p{color:#8c4034;}

/* ---- TIME SLOTS ---- */
.slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;}
.slot{padding:10px 6px;text-align:center;border:1px solid var(--gray-light);border-radius:var(--radius);font-size:13px;cursor:pointer;transition:.15s;background:#fff;}
.slot:hover:not(.slot-taken){border-color:var(--ink);background:var(--bone);}
.slot.slot-taken{background:var(--gray-light);color:var(--gray);cursor:not-allowed;}
.slot.slot-selected{background:var(--ink);color:var(--bone);border-color:var(--ink);}

/* ---- APPOINTMENT ROWS ---- */
.appt-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--gray-light);}
.appt-row:last-child{border-bottom:none;}
.appt-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--gold);flex-shrink:0;text-transform:uppercase;}
.appt-meta{flex:1;min-width:0;}
.appt-name{font-weight:500;font-size:14px;}
.appt-detail{font-size:12px;color:var(--gray);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appt-right{text-align:right;flex-shrink:0;}
.appt-time{font-size:13px;font-weight:500;}
.appt-actions{display:flex;gap:6px;margin-top:6px;justify-content:flex-end;}

/* ---- ALERTS ---- */
.alert{padding:12px 16px;border-radius:var(--radius);font-size:14px;margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
.alert-success{background:var(--success-bg);color:var(--success);}
.alert-error{background:var(--red-light);color:var(--red);}
.alert-info{background:var(--gold-light);color:var(--gold);}

/* ---- SETUP SCREEN ---- */
.setup-screen{max-width:560px;margin:4rem auto;padding:2rem;}
.setup-logo{font-family:var(--font-display);font-size:2.5rem;text-align:center;margin-bottom:.5rem;}
.setup-logo span{color:var(--gold);font-style:italic;}
.setup-sub{text-align:center;color:var(--gray);font-size:14px;margin-bottom:2rem;}
.setup-divider{text-align:center;color:var(--gray);font-size:12px;margin:1rem 0;position:relative;}
.setup-divider::before,.setup-divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--gray-light);}
.setup-divider::before{left:0;}
.setup-divider::after{right:0;}

/* ---- EMPTY STATES ---- */
.empty{text-align:center;padding:3rem 1rem;color:var(--gray);}
.empty-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.3;}
.empty-text{font-size:15px;}

/* ---- LOADING ---- */
.spinner{width:20px;height:20px;border:2px solid var(--gray-light);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-overlay{position:fixed;inset:0;background:rgba(250,247,242,.85);display:flex;align-items:center;justify-content:center;z-index:999;gap:12px;font-size:15px;}

/* ---- MODAL ---- */
.modal-bg{position:fixed;inset:0;background:rgba(10,10,10,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:1rem;}
.modal-bg.open{display:flex;}
#modal-cancel{z-index:300;}
#modal-reschedule{z-index:300;}
/* Above everything: a dialog can be raised from inside another modal. */
#modal-dialog{z-index:400;}
.dlg{max-width:420px;}
.dlg .modal-title{margin-bottom:.6rem;}
.dlg-msg{font-size:15px;line-height:1.6;color:var(--gray);margin:0;white-space:pre-line;}
.modal{background:#fff;border-radius:var(--radius);padding:2rem;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;}
.modal-title{font-family:var(--font-display);font-size:1.4rem;margin-bottom:1.25rem;}
.modal-footer{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem;}

/* ---- SETTINGS TOGGLE ---- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--gray-light);}
.toggle-label{font-size:14px;}
.toggle-sub{font-size:12px;color:var(--gray);}
.toggle{width:44px;height:24px;background:var(--gray-light);border-radius:12px;position:relative;cursor:pointer;border:none;transition:.2s;}
.toggle.on{background:var(--ink);}
.toggle::after{content:'';position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s;}
.toggle.on::after{left:23px;}

/* ---- CLIENT PORTAL HERO ---- */
/* Full-bleed block; it sits outside .container so it needs no negative margins.
   The old -1.5rem side pull overflowed the viewport and clipped the bio on mobile.

   The scrim is top-weighted (62% -> 30%) rather than even, because the photo's
   bright amber sits in the upper middle, exactly where the name does. Measured
   against the brightest pixel under each line, that puts bone text at 6.8-8.1:1.
   var(--ink) stays underneath as the fallback if the image ever fails to load. */
.portal-hero{
  background:
    linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.30)),
    url('assets/hero-ink.jpg') center/cover no-repeat,
    var(--ink);
  color:var(--bone);padding:3.5rem 2rem 3rem;margin:0;text-align:center;}
.portal-hero-title{font-family:var(--font-display);font-size:2.7rem;font-weight:400;margin-bottom:.5rem;
  text-shadow:0 2px 20px rgba(0,0,0,.7);}
/* --gold is a warm mid-tone and so is the photo, so darkening the background
   barely separates them -- the brand gold measured 2.7:1 here. --gold-hero is
   lifted purely for text sitting on the image; --gold is untouched elsewhere. */
.portal-hero-title em{color:var(--gold-hero);}
.portal-hero-sub{font-size:15px;color:rgba(245,240,232,.92);text-shadow:0 1px 12px rgba(0,0,0,.75);}
.portal-hero-bio{font-size:15px;line-height:1.75;color:rgba(245,240,232,.75);margin:0 0 .75rem;}

/* ---- SITE FOOTER ---- */
/* Dark block to bookend the hero and close off the page below the calendar. */
.site-footer{background:var(--ink);color:var(--bone);margin-top:3rem;padding:3rem 1.5rem 2.25rem;}
.site-footer-inner{max-width:900px;margin:0 auto;text-align:center;}
.site-footer-brand{font-family:var(--font-display);font-size:1.6rem;font-weight:400;letter-spacing:.02em;}
.site-footer-brand span{color:var(--gold);font-style:italic;}
.site-footer-tagline{margin:.5rem 0 0;font-size:14px;color:rgba(245,240,232,.6);}
.site-footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.75rem;
  margin:1.75rem 0 0;padding:1.5rem 0 0;border-top:1px solid rgba(255,255,255,.1);}
.site-footer-links a,.site-footer-links button{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:6px 2px;background:none;border:none;font-family:var(--font-body);font-size:14px;
  color:var(--bone);text-decoration:none;cursor:pointer;letter-spacing:.02em;opacity:.85;transition:.15s;}
.site-footer-links a:hover,.site-footer-links button:hover{opacity:1;color:var(--gold);}
.site-footer-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem 1.25rem;
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:rgba(245,240,232,.4);letter-spacing:.03em;}
.site-footer-artist{color:inherit;text-decoration:none;border-bottom:1px solid rgba(245,240,232,.25);}
.site-footer-artist:hover{color:var(--gold);border-bottom-color:var(--gold);}

/* ---- RESPONSIVE ---- */
@media(max-width:600px){
  /* ---- BASE ---- */
  html,body{overflow-x:hidden;max-width:100vw;}
  .container{padding:1rem .75rem;overflow-x:hidden;}

  /* ---- FORMS ---- */
  .form-row{grid-template-columns:1fr;}
  .form-input,.form-label{font-size:16px;} /* prevents iOS zoom on focus */
  .slots-grid{grid-template-columns:repeat(3,1fr);}
  .slot{min-height:44px;display:flex;align-items:center;justify-content:center;} /* 44px min tap target */

  /* ---- STATS BANNER ---- */
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:.875rem 1rem;}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.08);}
  .stat:nth-last-child(-n+2){border-bottom:none;}
  .stat-n{font-size:1.6rem;}
  .stat-l{font-size:10px;}

  /* ---- NAV ---- */
  .topnav{padding:0 .75rem;height:52px;}
  .topnav-brand{font-size:1rem;}
  .nav-toggle .btn{padding:6px 10px;font-size:13px;}

  /* ---- CARDS ---- */
  .card{padding:.875rem;}
  .card-sm{padding:.75rem;}
  .settings-quicknav{gap:.45rem;}
  .settings-quicknav-link{font-size:11px;padding:6px 10px;}
  .settings-divider{margin-bottom:1.15rem;padding-bottom:.85rem;}
  .settings-divider-title{font-size:1.02rem;}
  .settings-header-copy,.settings-divider-copy{font-size:13px;}

  /* ---- APPOINTMENT ROWS ---- */
  /* Stack: avatar+name on left, time+badge+action on right — no wrapping */
  .appt-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.625rem;padding:.875rem 0;}
  .appt-avatar{width:36px;height:36px;font-size:12px;}
  .appt-meta .appt-name{font-size:14px;}
  .appt-meta .appt-detail{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
  .appt-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
  .appt-time{font-size:12px;}
  .appt-actions{margin-top:0;justify-content:flex-end;}
  .appt-actions .btn{padding:5px 10px;font-size:12px;}

  /* ---- CALENDAR ---- */
  /* 44px min tap target; flex centering keeps the artist's two-line cells aligned */
  .cal-day{min-height:44px;padding:4px 2px;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .cal-hdr{font-size:9px;padding:4px 2px;}
  .cal-month{font-size:1rem;}
  .cal-nav button{padding:6px 12px;font-size:13px;}

  /* ---- DAY PANEL ---- */
  #day-panel{position:fixed;bottom:0;left:0;right:0;z-index:150;border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);max-height:70vh;overflow-y:auto;}

  /* ---- MODALS ---- */
  .modal-bg{align-items:flex-end;padding:0;}
  .modal{border-radius:16px 16px 0 0;margin:0;width:100%;max-width:100%;max-height:90vh;overflow-y:auto;padding:1.25rem 1rem;}
  .modal-footer{flex-wrap:wrap;gap:.5rem;}
  .modal-footer .btn{flex:1;justify-content:center;min-width:120px;}

  /* ---- SETTINGS TABS ---- */
  .toggle-row{flex-wrap:wrap;gap:.5rem;}
  h2.page-title{font-size:1.5rem;}
  .page-sub{font-size:13px;}

  /* ---- PORTAL ---- */
  .portal-hero{padding:1.5rem 1rem;}
  .portal-hero-title{font-size:1.8rem;}

  /* ---- PORTFOLIO ADMIN ---- */
  .pf-admin-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;}
  .pf-admin-actions .btn{min-height:44px;padding:6px 4px;} /* touch target */
  .pf-drop{padding:1.75rem 1rem;}

  /* ---- PORTFOLIO ---- */
  .pf-shell{padding:2rem 0 .5rem;}
  .pf-header{margin-bottom:1.35rem;}
  .pf-grid{gap:8px;}
  .pf-col{gap:8px;}

  /* The base .modal-bg bottom-anchors sheets at this width; the lightbox is a
     full-screen viewer, not a sheet, so it re-centres itself. */
  #modal-lightbox.modal-bg{align-items:center;}
  .lb-close{top:12px;right:12px;}
  .lb-prev{left:8px;}
  .lb-next{right:8px;}

  /* ---- FOOTER ---- */
  .site-footer{margin-top:2rem;padding:2.25rem 1rem 1.75rem;}
  .site-footer-brand{font-size:1.35rem;}
  .site-footer-links{flex-direction:column;gap:0;}
  .site-footer-meta{flex-direction:column;gap:.5rem;}

  /* ---- AVAILABILITY GRID ---- */
  #day-availability-config > div > #day-times-0,
  #day-times-1,#day-times-2,#day-times-3,#day-times-4,#day-times-5,#day-times-6{
    grid-template-columns:repeat(3,1fr)!important;
  }

  /* ---- BUTTONS ---- */
  .btn{min-height:44px;}    /* minimum touch target */
  .btn-sm{min-height:44px;font-size:13px;}

  /* ---- SECTION HEADINGS IN SETTINGS ---- */
  .tab-panel h2{font-size:1.1rem;}

  /* ---- CLIENT BOOKING STEPS ---- */
  #cb-step-1, #cb-step-2{padding:.75rem;}

  /* ---- MISC ---- */
  .slot-time{font-size:13px;}
  .empty{padding:2rem 1rem;}
}

/* Bottom sheet slide-up animation for modals on mobile */
@media(max-width:600px){
  @keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .modal-bg.open .modal{animation:slideUp .25s ease;}
}

/* ---- REDUCED MOTION ---- */
/* Honour the OS "reduce motion" setting: drop transitions, the bottom-sheet
   slide-up, and smooth scrolling. The spinner keeps turning at a slower pace
   rather than freezing, since a stopped spinner reads as a hung page. */
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .spinner{animation:spin 1.8s linear infinite!important;}
  .modal-bg.open .modal{animation:none!important;}
}

/* ---- CONFIG NOTICE ---- */
.config-notice{background:var(--warning-bg);border:1px solid #f0c040;border-radius:var(--radius);padding:1rem 1.25rem;font-size:13px;color:var(--warning);margin-bottom:1.5rem;line-height:1.6;}
.config-notice code{background:rgba(0,0,0,.08);padding:1px 5px;border-radius:2px;font-size:12px;font-family:monospace;}

/* ---- PASSWORD LOGIN SCREEN ---- */
.pin-screen{position:fixed;inset:0;background:var(--ink);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;}
.pin-box{width:100%;max-width:360px;}
.pin-logo{font-family:var(--font-display);font-size:1.8rem;color:var(--bone);margin-bottom:.25rem;text-align:center;}
.pin-logo em{color:var(--gold);}
.pin-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:2rem;text-align:center;}
.pin-error{color:var(--red);font-size:13px;min-height:18px;margin-bottom:.75rem;text-align:center;}
.pin-lockout{color:rgba(255,255,255,.5);font-size:13px;margin-top:.75rem;text-align:center;}
.pin-lockout strong{color:var(--gold);}
.pw-input-wrap{position:relative;margin-bottom:1rem;}
.pw-input-wrap input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);color:var(--bone);font-size:15px;font-family:var(--font-body);padding:12px 44px 12px 14px;width:100%;outline:none;transition:.15s;}
.pw-input-wrap input::placeholder{color:rgba(255,255,255,.3);}
.pw-input-wrap input:focus{border-color:var(--gold);}
.pw-input-wrap input:disabled{opacity:.4;}
.pw-show-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);padding:4px;line-height:1;}
.pw-show-btn:hover{color:rgba(255,255,255,.8);}