/* Ported from Phase 1 prototype/template.html (ARCHITECTURE s6: no inline
   styles anywhere the CSP touches - this file is the extraction). Brand
   tokens come from /t/assets/tokens.css, loaded before this file. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* [hidden] is a UA-stylesheet default (display:none), which any author rule
   of equal-or-higher specificity overrides regardless of source order -
   .tabbar{display:flex} and .chip{display:inline-flex} below did exactly
   that, so the tab bar and member chip stayed visible on the signed-out
   screen. Found live by a fresh review lens against the real deployment. */
[hidden]{display:none!important;}
/* Copy keys arrive with GET /api/v1/config; until they have been applied the
   shell would flash its default wording (the first tenant's). The class is
   removed by the client script; the animation is the failsafe if it never runs. */
.copy-pending .stage{visibility:hidden;animation:copy-reveal 0s 2.5s forwards;}
@keyframes copy-reveal{to{visibility:visible;}}
body{
  background:var(--ground);
  color:var(--offwhite);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,.display{
  font-weight:700;
  letter-spacing:0.01em;
  margin:0;
}
a{color:inherit;}
button{font:inherit;color:inherit;}

.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.phone{
  width:100%;
  max-width:390px;
  height:100vh;
  height:100dvh;
  background:var(--ground);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
@media (min-width:430px){
  .stage{padding:36px 20px;}
  .phone{
    width:390px;
    height:844px;
    border:1px solid var(--line);
    border-radius:40px;
    box-shadow:var(--phone-shadow, 0 30px 80px rgba(0,0,0,.55)), 0 0 0 8px var(--phone-frame, #000);
  }
}

.appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.appbar .mark{height:26px;width:auto;display:block;}
/* F1: the mark is a control now. The button is a transparent wrapper so the
   mark looks exactly as it did, with a real focus ring for keyboard use. */
.appbar .mark-btn{background:none;border:0;padding:0;margin:0;display:block;cursor:pointer;border-radius:4px;}
.appbar .mark-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

.proto-chip{
  flex:0 0 auto;
  text-align:center;
  font-size:10px;
  letter-spacing:.03em;
  color:var(--tan-dim);
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:5px 10px;
}

.screens{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.screen{display:none;flex-direction:column;gap:14px;padding:16px 16px 28px;min-height:100%;}
.screen.active{display:flex;}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tan);}
.h1{font-size:24px;line-height:1.2;}
.h2{font-size:18px;line-height:1.3;}
.sub{font-size:13px;color:var(--tan-dim);line-height:1.5;}

.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;}
.card-title{font-size:15px;font-weight:700;margin:0 0 6px;}
.card-body{font-size:13.5px;line-height:1.55;color:var(--offwhite);}
.card-meta{font-size:11.5px;color:var(--tan-dim);margin-top:8px;}
.card-body-lead{font-size:16px;font-weight:700;margin:4px 0 4px;}
.card-body-spaced{margin-top:6px;}
.card-title-tight{margin-bottom:2px;}
.prefs-list{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--tan-dim);line-height:1.7;}
/* F3: the preference list is editable by the member now, so each line carries
   its own remove control. */
.prefs-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.prefs-list .pref-remove{background:none;border:0;color:var(--tan-dim);font-size:16px;line-height:1;padding:4px 6px;cursor:pointer;border-radius:6px;}
.prefs-list .pref-remove:hover,.prefs-list .pref-remove:focus-visible{color:var(--offwhite);outline:1px solid var(--line);}
/* The app is dark. Without this the browser paints form controls with its
   light UA theme, so a text input renders as a white box in a black card.
   Visible in a headless screen grab and on a real phone alike. */
/* A light tenant sets --color-scheme: light in its tokens.css; the fallback
   keeps every tenant that does not set it exactly as it was. */
:root{color-scheme:var(--color-scheme, dark);}
.input{
  /* appearance:none, or the browser's own control background wins over this
     one and paints a white box inside a black card. */
  appearance:none;-webkit-appearance:none;
  background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--offwhite);
  padding:10px 12px;font-size:13.5px;flex:1 1 auto;min-width:0;
}
/* F2: a barber row opens that barber's card. */
.barber-row{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;}
.barber-row:focus-visible{outline:2px solid var(--tan-dim);outline-offset:2px;border-radius:8px;}
.barber-card{padding:12px 0 4px;border-bottom:1px solid var(--line);}
.barber-card:last-child{border-bottom:0;}
.barber-photo{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--tan-dim);margin-bottom:10px;}
.barber-bio{font-size:12.5px;line-height:1.6;color:var(--tan-dim);margin:0 0 8px;}
.barber-ig{font-size:12.5px;color:var(--tan);text-decoration:none;border-bottom:1px solid var(--line);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;
  letter-spacing:.02em;border:1px solid transparent;cursor:pointer;text-decoration:none;
}
.btn-primary{background:var(--tan);color:var(--ground);}
.btn-ghost{background:transparent;color:var(--offwhite);border-color:var(--line);}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none;}
/* Matches owner.css's own .btn-small (same fit, header-scale controls) -
   the member app's My account link (2026-09-07) is the first appbar
   button this stylesheet needs. */
.btn-small{padding:6px 12px;font-size:11.5px;}

.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:var(--tan-dim);color:var(--ground);
}
.chip-outline{background:transparent;border:1px solid var(--line);color:var(--tan-dim);}

details.note summary{cursor:pointer;font-size:13.5px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;}
details.note summary::-webkit-details-marker{display:none;}
details.note summary .caret{color:var(--tan);font-size:12px;transition:transform .15s;}
details.note[open] summary .caret{transform:rotate(90deg);}
details.note p{font-size:13px;color:var(--tan-dim);line-height:1.55;margin:10px 0 0;}

.list-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);}
.list-item:last-child{border-bottom:0;}
.list-item .name{font-size:13.5px;font-weight:700;}
.list-item .meta{font-size:11.5px;color:var(--tan-dim);margin-top:2px;}
.list-item .right{flex:0 0 auto;text-align:right;font-size:12.5px;color:var(--tan-dim);}

.avatar{width:34px;height:34px;border-radius:50%;background:var(--tan-dim);color:var(--ground);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.toggle{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;border:0;cursor:pointer;flex:0 0 auto;}
.toggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--tan-dim);transition:transform .15s, background .15s;}
.toggle.on{background:var(--tan-dim);}
.toggle.on .knob{transform:translateX(18px);background:var(--ground);}

.toast{
  position:absolute;left:16px;right:16px;bottom:14px;background:var(--tan);color:var(--ground);
  border-radius:999px;padding:9px 14px;font-size:12.5px;font-weight:700;text-align:center;
  box-shadow:0 8px 24px var(--shadow-ink, rgba(0,0,0,.4));opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s, transform .18s;z-index:5;
}
.toast.show{opacity:1;transform:translateY(0);}

.splash{background:linear-gradient(180deg, var(--card), var(--ground));border:1px solid var(--line);border-radius:22px;padding:22px 16px;text-align:center;}
.splash .lockup{max-width:210px;width:60%;height:auto;margin:0 auto 12px;display:block;}
.splash .h1{font-size:20px;}

.tabbar{display:flex;flex:0 0 auto;border-top:1px solid var(--line);background:var(--card);padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.tabbar button{flex:1 1 0;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--tan-dim);cursor:pointer;border-radius:8px;}
.tabbar button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;}
/* Real brand icons (tan-on-transparent, cropped for this dark tab bar -
   BRAND-SWAP.md) can't recolor via currentColor like the inline SVGs
   they sit beside, so the active/inactive distinction those SVGs get
   from `color` is done with opacity here instead. */
.tabbar button img.nav-icon{width:20px;height:20px;object-fit:contain;opacity:.6;}
.tabbar button span{font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.tabbar button.active{color:var(--tan);}
.tabbar button.active img.nav-icon{opacity:1;}

.signin{display:flex;flex-direction:column;gap:14px;padding:24px 20px;align-items:stretch;justify-content:center;flex:1 1 auto;}
.signin input{
  background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--offwhite);
  padding:12px 14px;font-size:14px;
}

::-webkit-scrollbar{width:0;height:0;}