/* Instant BeautyCall salon portal. Colours and the Georgia display face are the apps' own
 * BCColor/BCFont values (ios-client Theme/Theme.swift) so the portal and the apps look like one
 * product. Light only, as both apps are -- they pin .preferredColorScheme(.light). */
:root {
  --noir900: #0A0A0A; --noir600: #2A2A28; --noir500: #3D3D3A; --noir400: #6B6B66;
  --noir200: #D4D4D0; --noir100: #EDEDEB; --noir50: #F7F7F5;
  --gold600: #A8841F; --gold500: #C9A227; --gold100: #F5EDD6; --gold50: #FBF8F0;
  --cream: #F8F5ED; --ivory: #FFFEF9;
  --emerald: #047857; --emeraldBg: #ECFDF5;
  --amber: #92400E; --amberBg: #FFFBEB;
  --rose: #9F1239; --roseBg: #FFF1F2;
  --display: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }

/* The hidden attribute is a UA-stylesheet rule and loses to ANY class that sets display.
   It has now cost two screens: a dead "Watch the film" button on the marketing page, and
   the offers form showing its day and hour pickers while both were switched off. Every
   show/hide in this file goes through [hidden], so this has to win. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--cream); color: var(--noir900);
  font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: var(--gold600); }
:focus-visible { outline: 2px solid var(--gold500); outline-offset: 2px; border-radius: 3px; }

/* ---- shell --------------------------------------------------------------- */
.shell { display: flex; align-items: flex-start; }
.rail {
  width: 236px; flex: 0 0 236px; border-right: 1px solid var(--noir100);
  min-height: 100vh; padding: 26px 0 40px; position: sticky; top: 0; background: var(--ivory);
}
.brand { padding: 0 22px 24px; }
.brand .mark { color: var(--gold500); letter-spacing: .3em; font-size: 14px; }
.brand .name { font-family: var(--display); font-size: 21px; line-height: 1.15; margin-top: 2px; }
.brand .sub { font-size: 11px; color: var(--noir400); letter-spacing: .09em; text-transform: uppercase; margin-top: 6px; }
.nav { display: flex; flex-direction: column; }
.nav button {
  text-align: left; background: none; border: 0; border-left: 2px solid transparent;
  padding: 10px 22px; color: var(--noir500); font-size: 14.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.nav button:hover { color: var(--noir900); background: var(--noir50); }
.nav button[aria-current="true"] { color: var(--noir900); font-weight: 600; border-left-color: var(--gold500); background: var(--noir50); }
.nav .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); flex: 0 0 auto; }
.whoami { margin: 24px 22px 0; padding-top: 16px; border-top: 1px solid var(--noir100); font-size: 13px; color: var(--noir400); }
.whoami strong { display: block; color: var(--noir900); font-size: 14px; }
.whoami button { background: none; border: 0; padding: 6px 0 0; color: var(--gold600); font-size: 13px; }
main { flex: 1; min-width: 0; padding: 32px 30px 70px; max-width: 1060px; }

/* ---- type / furniture ---------------------------------------------------- */
.eyebrow { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--noir400); font-weight: 600; }
h1.title { font-family: var(--display); font-size: clamp(26px, 4vw, 34px); margin: 7px 0 0; }
.lede { color: var(--noir500); margin: 9px 0 0; max-width: 62ch; }
.section { margin-top: 32px; }
.section > h2 {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--noir400);
  font-weight: 600; padding-bottom: 9px; border-bottom: 1px solid var(--noir100); margin-bottom: 15px;
}
.card { background: var(--ivory); border: 1px solid var(--noir100); border-radius: 4px; padding: 20px 22px; }
.card + .card { margin-top: 12px; }
.card h3 { font-size: 16px; }
.card p { margin: 7px 0 0; color: var(--noir500); font-size: 14px; }
.muted { color: var(--noir400); }
.hint { font-size: 12.5px; color: var(--noir400); margin-top: 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.spread { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap; }

.btn { background: var(--noir900); color: var(--cream); border: 1px solid var(--noir900);
       padding: 10px 18px; border-radius: 3px; font-size: 14.5px; font-weight: 500; }
.btn:hover { background: var(--noir600); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.gold { background: var(--gold600); border-color: var(--gold600); }
.btn.gold:hover { background: #8E6F1A; }
.btn.ghost { background: none; color: var(--noir900); border-color: var(--noir200); }
.btn.ghost:hover { background: var(--noir50); }
.btn.danger { background: none; color: var(--rose); border-color: #E7C3CC; }
.btn.sm { padding: 6px 12px; font-size: 13.5px; }
.btn.wide { width: 100%; }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--noir500); margin-bottom: 5px; }
input, textarea, select {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--noir200);
  border-radius: 3px; background: #FFF; color: var(--noir900);
}
input:focus, textarea:focus, select:focus { border-color: var(--gold500); outline: none; }
.field { margin-bottom: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
.opt { font-weight: 400; color: var(--noir400); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
        letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
.pill.good { background: var(--emeraldBg); color: var(--emerald); }
.pill.warn { background: var(--amberBg); color: var(--amber); }
.pill.crit { background: var(--roseBg); color: var(--rose); }
.pill.quiet { background: var(--noir100); color: var(--noir500); }

/* ---- offers, blocks, member actions -------------------------------------- */
/* A column of cards with air between them. The dashboard's .tiles grid is for
   numbers; this is for things with a heading and a sentence. */
.stack { display: grid; gap: 12px; }
.row.between { justify-content: space-between; align-items: flex-start; width: 100%; }

/* Day-of-week and similar pickers. A label wrapping its own checkbox, so the
   whole pill is the hit target rather than the 13px box inside it. */
.choices { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 15px; }
.choice { display: inline-flex; align-items: center; gap: 7px; margin: 0;
          padding: 7px 12px; border: 1px solid var(--noir200); border-radius: 99px;
          font-size: 13.5px; cursor: pointer; background: var(--ivory); }
.choice input { width: auto; margin: 0; flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--gold600); background: var(--gold100); }

/* The per-stylist strip on the today view: a name, what they are doing, and
   nothing about what they earned (D9). */
.crew { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--noir100); }
.crew:first-child { border-top: 0; }
.crew .meta { flex: 1 1 auto; min-width: 0; }
.crew .meta strong { display: block; font-size: 14.5px; color: var(--noir900); }
.crew .meta span { font-size: 12.5px; color: var(--noir400); }
.appt { font-size: 12.5px; color: var(--noir500); padding: 3px 0 3px 46px; }

/* ---- the one modal ------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(10,10,10,.42); display: flex;
         align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.sheet { position: relative; background: var(--ivory); border: 1px solid var(--noir100);
         border-radius: 5px; padding: 24px 26px; width: 100%; max-width: 460px;
         max-height: 86vh; overflow-y: auto; }
.sheet h3 { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--noir900); }
.sheet h3:focus { outline: none; }
.sheet-x { position: absolute; top: 10px; right: 12px; background: none; border: 0;
           font-size: 22px; line-height: 1; color: var(--noir400); padding: 4px 8px; cursor: pointer; }
.sheet-x:hover { color: var(--noir900); }
@media (max-width: 560px) { .scrim { align-items: flex-end; padding: 0; }
  .sheet { max-width: none; border-radius: 5px 5px 0 0; max-height: 92vh; } }

/* ---- tiles --------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
.tile { background: var(--ivory); border: 1px solid var(--noir100); border-radius: 4px; padding: 15px 16px; }
.tile .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--noir400); font-weight: 600; }
.tile .v { font-family: var(--display); font-size: 28px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile .d { font-size: 12.5px; margin-top: 3px; font-variant-numeric: tabular-nums; display: block; }
.d.up { color: var(--emerald); } .d.down { color: var(--rose); } .d.flat { color: var(--noir400); }
.tile .caveat { font-size: 11.5px; color: var(--amber); margin-top: 6px; display: block; }
.segmented { display: inline-flex; border: 1px solid var(--noir200); border-radius: 3px; overflow: hidden; background: #FFF; }
.segmented button { background: none; border: 0; padding: 6px 14px; font-size: 13.5px; color: var(--noir500); }
.segmented button[aria-pressed="true"] { background: var(--noir900); color: var(--cream); font-weight: 500; }

/* ---- money --------------------------------------------------------------- */
.seatcard { border-color: var(--gold500); background: linear-gradient(180deg, var(--gold50), var(--ivory)); }
dl.money { margin: 14px 0 0; }
dl.money > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0;
                 font-variant-numeric: tabular-nums; font-size: 14px; }
dl.money > div + div { border-top: 1px dotted var(--noir200); }
dl.money > div.total { border-top: 1px solid var(--noir900); margin-top: 4px; padding-top: 10px; font-weight: 700; font-size: 16px; }
dl.money dt { color: var(--noir500); } dl.money dd { margin: 0; }
dl.money .mut { color: var(--noir400); }

/* ---- tables -------------------------------------------------------------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
     color: var(--noir400); font-weight: 600; padding: 0 10px 8px 0; border-bottom: 1px solid var(--noir100); white-space: nowrap; }
td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--noir50); vertical-align: middle; }
td.num, th.num { font-variant-numeric: tabular-nums; }
.who { display: flex; align-items: center; gap: 10px; }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--gold100); color: var(--gold600);
      display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }

/* ---- the logo ------------------------------------------------------------ */
.shot { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
        border: 1px solid var(--noir100); background: var(--noir50); margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop { border: 1px dashed var(--gold500); border-radius: 4px; padding: 26px; text-align: center; background: var(--gold50); }
.drop.over { background: var(--gold100); }

/* ---- gates --------------------------------------------------------------- */
.centered { max-width: 440px; margin: 0 auto; padding: 6vh 0; }
.centered.wide { max-width: 640px; }
.doc { max-height: 280px; overflow-y: auto; border: 1px solid var(--noir100); border-radius: 3px;
       padding: 15px 17px; background: #FFF; font-size: 13.5px; color: var(--noir500); white-space: pre-wrap; }
.doc h4 { color: var(--noir900); font-size: 13.5px; margin: 13px 0 4px; }
.check { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; color: var(--noir500); }
.check input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--noir200);
        border-top-color: var(--gold600); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(10px);
         background: var(--noir900); color: var(--cream); padding: 11px 17px; border-radius: 3px;
         font-size: 14px; max-width: calc(100% - 32px); opacity: 0; pointer-events: none;
         transition: opacity .18s, transform .18s; z-index: 50; }
#toast.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; flex: none; min-height: 0; border-right: 0;
          border-bottom: 1px solid var(--noir100); padding: 16px 0 0; position: static; }
  .brand { padding: 0 16px 12px; }
  .nav { flex-direction: row; overflow-x: auto; padding: 0 8px; }
  .nav button { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 9px 12px; }
  .nav button[aria-current="true"] { border-bottom-color: var(--gold500); background: none; }
  .whoami { margin: 0; padding: 12px 16px; border-top: 1px solid var(--noir100);
            display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .whoami strong { display: inline; }
  main { padding: 22px 16px 60px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---- pricing ------------------------------------------------------------- */
/* The base input reads as money, so the dollar sign sits outside the field rather than inside
   the value -- a "$" typed into a number input is silently dropped and the owner can't see why.
   Width in rem, not ch: `ch` is the width of a ZERO, the digits here are proportional, and a
   number input also reserves room for its spinners -- 7.5ch clipped "245.00" to "245". The
   spinners go, because nobody steps a price a dollar at a time. */
.price { width: 6.5rem; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.price::-webkit-outer-spin-button, .price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Its own class, not .row: .row wraps, and at phone width that put the "$" on a line of its
   own above the box. A currency symbol and its field are one thing and never wrap apart. */
.moneyin { display: flex; align-items: center; flex-wrap: nowrap; }
.cur { color: var(--noir400); margin-right: 3px; }
/* The three tier prices. Tabular figures so the columns line up down a long menu.
   No per-tier colour: the first draft set the Classic price to --noir100, which is #EDEDEB --
   a DARK-theme token, invisible on this cream surface. The row already reads left to right. */
.tiers { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- address ------------------------------------------------------------- */
/* City takes the room; state and ZIP are fixed-width because they are. On a phone they stack,
   because three fields across a 320px screen gives each of them four usable characters. */
.addr3 { display: grid; grid-template-columns: 1fr 5.5rem 7rem; gap: 0 15px; }
@media (max-width: 520px) { .addr3 { grid-template-columns: 1fr; } }
/* Right-aligned money in a two-column table, with the total set apart. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { border-top: 1px solid var(--noir200); font-weight: 600; }

/* ---- setup flow ----------------------------------------------------------- */
/* A bar above the real screen, never a modal: the step IS the screen the owner will keep using,
   so anything covering it would have to reproduce it. */
.setupbar {
  background: var(--gold50); border: 1px solid var(--gold100); border-left: 3px solid var(--gold500);
  border-radius: 3px; padding: 14px 16px; margin-bottom: 20px;
}
.setupbar .t { font-family: var(--display); font-size: 18px; margin-top: 2px; }
/* The text takes the room and the buttons keep theirs, so the two sit side by side on a desktop
   and stack on a phone without either being told a width in pixels. */
.setupbar .says { flex: 1 1 260px; min-width: 0; }
.setupbar .acts { flex: 0 0 auto; }
.setupbar .foot { margin-top: 13px; align-items: center; }
.pips { display: flex; gap: 5px; }
.pip { height: 3px; width: 34px; border-radius: 2px; background: var(--noir200); }
.pip.ok { background: var(--gold500); }
.pip.on { background: var(--noir600); }
/* A button that reads as a link -- used for "finish later" and for each outstanding item. */
.linky {
  background: none; border: 0; padding: 0; font: inherit; color: var(--gold600);
  text-decoration: underline; cursor: pointer;
}
.linky:hover { color: var(--noir900); }
.setupcard { border-left: 3px solid var(--gold500); margin-bottom: 20px; }
.todo { margin: 12px 0 0; padding-left: 19px; }
.todo li { margin: 5px 0; }