/* CALLSHEET — "the call sheet is paper."
   Warm paper ground, ink type, hairline rules, one cobalt accent
   (budget: ≤3 blue moments per viewport). Instrument Sans for UI,
   IBM Plex Mono caps as the system's small caps. Per design handoff. */

:root{
  --paper:#F4F2ED;
  --sheet:#FFFFFF;
  --ink:#16150F;
  --ink-64:rgba(22,21,15,.64);
  --ink-44:rgba(22,21,15,.44);
  --hairline:rgba(22,21,15,.16);
  --outline:rgba(22,21,15,.3);
  --cobalt:#1C40D8;
  --cobalt-bright:#3D5CFF;   /* on ink backgrounds */
  --cobalt-tint:rgba(28,64,216,.08);
  --ink-hover:#33312A;
  --fill-7:rgba(22,21,15,.07);
  --r-input:10px;
  --r-card:16px;
  --r-modal:20px;
  --sh-sm:0 1px 2px rgba(22,21,15,.05),0 4px 16px rgba(22,21,15,.05);
  --sh-md:0 2px 4px rgba(22,21,15,.05),0 16px 44px rgba(22,21,15,.10);
  --sh-lg:0 4px 8px rgba(22,21,15,.06),0 28px 80px rgba(22,21,15,.22);
  --body:"Instrument Sans",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .ticker-live i{animation:none}
  *{transition:none!important}
}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.muted{color:var(--ink-44)}
.link{color:var(--ink);border-bottom:1px solid var(--outline)}
.link:hover{border-color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
::selection{background:var(--cobalt);color:#fff}

/* ---------- ticker: 38px solid-ink strip ---------- */
.ticker{
  background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;
  height:auto;min-height:38px;display:flex;align-items:center;
  /* the native app and the installed PWA run full-bleed under the status
     bar, so the topmost element carries the inset. Zero in a browser tab,
     where the chrome already covers it. */
  padding-top:env(safe-area-inset-top);
}
.ticker-live{
  flex:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  padding:0 1.1rem;color:var(--paper);display:flex;align-items:center;gap:.45rem;
  position:relative;z-index:2;background:var(--ink);
}
.ticker-live i{font-style:normal;color:var(--cobalt-bright);animation:live 1.6s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.3}}
.ticker-track{
  display:inline-flex;gap:2rem;align-items:center;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  animation:tick 44s linear infinite;
}
.ticker a{color:var(--paper);opacity:.92}
.ticker a:hover{opacity:1}
.ticker .tick-dot{color:var(--cobalt-bright);font-size:.5rem}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- nav: sticky white pill ---------- */
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  position:sticky;top:10px;z-index:40;
  max-width:1060px;margin:.9rem auto;padding:8px 8px 8px 20px;
  background:rgba(255,255,255,.92);border:1px solid var(--hairline);border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-sm);
}
/* Pages without a ticker (everything but the landing page) put the nav at
   the top, so it takes the status-bar inset instead. Where a ticker
   precedes it, the ticker has already absorbed it. */
.nav{margin-top:calc(.9rem + env(safe-area-inset-top))}
.ticker + .nav{margin-top:.9rem}
@media(max-width:1100px){.nav{margin-left:1rem;margin-right:1rem}}
/* flex:1 so the link list still ends hard against the account control —
   the auth slot is a third child of the bar now (see injectAuthUI), and
   without this space-between would strand the links mid-bar */
.nav nav{display:flex;flex:1;gap:clamp(.7rem,2vw,1.5rem);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav nav a{font-size:.9rem;font-weight:500;color:var(--ink-64);transition:color .15s}
.nav nav a:hover{color:var(--ink)}
.nav nav a[aria-current]{color:var(--ink)}
.nav nav a.btn{color:#fff}
@media(max-width:700px){
  /* two rows: wordmark and the account control hold the top line, the
     links wrap freely underneath */
  .nav{
    position:static;display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:.6rem;border-radius:22px;padding:.9rem 1.1rem;
  }
  .nav .wordmark{grid-column:1;grid-row:1}
  .nav > #auth-slot{grid-column:2;grid-row:1;justify-self:end}
  /* one row, spread across the bar: with the short labels (fitNavLabels)
     they fit, so nothing is left widowed on a line of its own. Scrolls
     rather than wrapping on anything narrower than we designed for. */
  .nav nav{
    grid-column:1 / -1;grid-row:2;
    flex-wrap:nowrap;justify-content:space-between;gap:.5rem;
    overflow-x:auto;scrollbar-width:none;
  }
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{
    font-size:.82rem;white-space:nowrap;
    /* 44 on BOTH axes: "Crew" is only 32px of text, and a 32px-wide target
       is as easy to miss as a 22px-tall one. They still fit — 5 links need
       260px of the 288 the bar has. */
    display:flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;
  }
}

.wordmark{font-weight:700;font-size:1.125rem;letter-spacing:-.02em;color:var(--ink)}
.wordmark span{color:var(--cobalt)}

/* ---------- buttons: ink pills ---------- */
.btn{
  display:inline-block;background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-family:var(--body);font-size:.875rem;font-weight:600;letter-spacing:.01em;
  padding:.8rem 1.6rem;border-radius:999px;cursor:pointer;
  transition:background .18s,transform .18s,box-shadow .18s,border-color .18s;
}
.btn:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--outline)}
.btn-ghost:hover{background:var(--sheet);border-color:var(--ink)}
.btn-small{padding:.55rem 1.25rem;font-size:.875rem}
.btn.full{width:100%;text-align:center;margin-top:1.2rem}

/* ---------- hero ---------- */
.hero{padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(1.5rem,4vw,3rem);max-width:1160px;margin:0 auto}
.sheet-head-row{
  display:flex;justify-content:space-between;gap:.6rem 1.4rem;flex-wrap:wrap;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline);
  padding:.55rem 0;margin-bottom:clamp(1.6rem,4vw,2.6rem);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-64);
}
.sheet-head-row .loc{color:var(--cobalt)}
.hero-grid{display:grid;grid-template-columns:1.05fr .9fr;gap:56px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:2.2rem}}
.hero h1{
  font-weight:600;font-size:clamp(2.5rem,5.4vw,4.75rem);line-height:.99;
  letter-spacing:-.028em;margin-bottom:1.1rem;
}
.hl{color:var(--cobalt)}
.lede{max-width:54ch;font-size:1.09rem;line-height:1.55;color:var(--ink-64);margin-bottom:1.5rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
@media(max-width:680px){.hero-actions .btn{width:100%;text-align:center}}
.launch-line{color:var(--ink-44)}

/* the hero call-sheet document mock */
.hero-doc-wrap{position:relative}
.hero-doc-wrap::before{
  content:"";position:absolute;inset:0;background:var(--sheet);
  border:1px solid var(--hairline);border-radius:var(--r-card);
  transform:rotate(1.1deg);box-shadow:var(--sh-sm);
}
/* the tilted sheet behind grows ~h·sin(1.1°) wider than its box; on a
   phone that put its corner past the viewport and got sliced. Inset it. */
@media(max-width:700px){
  .hero-doc-wrap::before{inset:0 10px;transform:rotate(.7deg)}
}

/* ---------- shared document styles (hero mock, builder preview) ---------- */
.csd{
  position:relative;background:var(--sheet);color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(1.1rem,2.4vw,1.7rem);box-shadow:var(--sh-md);
  font-size:.85rem;line-height:1.45;
}
.csd table{width:100%;border-collapse:collapse}
.csd td{border-bottom:1px solid var(--hairline);padding:.4rem .5rem .4rem 0;vertical-align:top}
.csd tr:last-child td{border-bottom:none}
.csd-th td,.csd-label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-44);font-weight:500;
}
.csd-label{margin-bottom:.3rem}
.csd-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:.7rem}
.csd-title{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.csd-top-right{text-align:right;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-64)}
.csd-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-64);padding:.5rem 0;border-bottom:1px solid var(--hairline)}
.csd-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--hairline)}
.csd-grid3 strong{font-size:1.05rem;font-weight:700}
.csd-beats{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-64);padding:.55rem 0;border-bottom:1px solid var(--hairline);
  display:flex;gap:1.1rem;flex-wrap:wrap;
}
.csd-well{
  background:var(--paper);border-radius:var(--r-input);padding:.6rem .8rem;margin:.7rem 0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-64);
}
.csd-block{padding:.7rem 0;border-bottom:1px solid var(--hairline)}
.csd-block:last-of-type{border-bottom:none}
.csd-loc-title{font-weight:600;font-size:.95rem;margin:.15rem 0}
.csd-time{width:4.2rem;font-weight:700;white-space:nowrap;text-align:right}
.csd-foot{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;
  border-top:1px solid var(--ink);margin-top:.9rem;padding-top:.7rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-44);
}
.csd-chip{
  border:1px solid var(--cobalt);color:var(--cobalt);border-radius:999px;
  padding:.2rem .6rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
}

/* ---------- sections ---------- */
.section{max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 64px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.section-title{font-weight:600;font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:-.02em}
.section-meta{display:flex;gap:1.2rem;align-items:baseline;flex-wrap:wrap}

/* status strip */
.status-strip{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:1.6rem clamp(1rem,4vw,3rem);margin:0 auto 64px;max-width:1160px;
  display:flex;gap:1rem 1.6rem;align-items:center;flex-wrap:wrap;
}
.status-flow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.status-arrow{font-family:var(--mono);font-size:.7rem;color:var(--ink-44)}

/* how it works */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-top:1.4rem}
@media(max-width:960px){.how-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr}}
.how-grid article{border-top:1px solid var(--ink);padding-top:1rem}
.how-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--cobalt);display:block;margin-bottom:.6rem}
.how-grid h3{font-weight:600;font-size:1.06rem;margin-bottom:.4rem}
.how-grid p{font-size:.875rem;color:var(--ink-64)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  padding:18px 18px 14px;transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.65rem}
.card-role{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cobalt);background:var(--cobalt-tint);border-radius:999px;padding:.3rem .7rem;font-weight:500;
}
.card-date{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-44)}
.card-body{flex:1}
.card h3{font-weight:600;font-size:1.155rem;line-height:1.28;letter-spacing:-.01em;margin-bottom:.4rem}
.card p{font-size:.875rem;line-height:1.5;color:var(--ink-64)}
.card-meta{
  display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.65rem;
  font-size:.845rem;font-weight:500;color:var(--ink-64);
}
.card-meta span+span::before{content:"·";margin-right:.45rem;color:var(--ink-44)}
.card-foot{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  border-top:1px solid var(--hairline);margin-top:.8rem;padding-top:.75rem;
}
.card-apps{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-44)}
.card-apply{
  font-family:var(--body);font-size:.845rem;font-weight:600;cursor:pointer;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;padding:.5rem 1.15rem;
  transition:background .18s;
}
.card-apply:hover{background:var(--ink-hover)}
.card-apply.applied{background:var(--cobalt-tint);border-color:transparent;color:var(--cobalt);cursor:default}
.card-hot{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt),var(--sh-md)}

/* ---------- pages ---------- */
.page{max-width:1160px;margin:0 auto;padding:1.6rem clamp(1rem,4vw,3rem) 4rem}
.page-wide{max-width:1400px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.page-head h1{font-weight:600;font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-.024em}
.page-head-actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}

/* ---------- filter chips + selects ---------- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.filters button{
  font-family:var(--body);font-size:.815rem;font-weight:500;padding:.48rem 1rem;
  border:1px solid var(--outline);background:transparent;color:var(--ink);
  border-radius:999px;cursor:pointer;transition:all .15s;
}
.filters button:hover{background:var(--sheet);border-color:var(--ink)}
.filters button.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* ---------- board bar: the row that replaced thirteen controls ----------
   Both selects are .city-picker on purpose: same pill, same caret, and
   .active-select still wins because both are (0,1,0). Never add a
   `.bar-controls > select` face rule — (0,1,1) would outrank it and the
   active fill would silently stop rendering. */
.board-bar{margin-bottom:1.15rem}
.bar-controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.board-bar > .mono{display:block;margin-top:.55rem}
.board-bar > .mono:empty{display:none}
.board-empty-acts{display:flex;gap:.6rem;flex-wrap:wrap}

.city-picker{
  font-family:var(--body);font-size:.845rem;font-weight:500;
  padding:.5rem 2.1rem .5rem 1rem;background-color:var(--sheet);color:var(--ink);
  border:1px solid var(--outline);border-radius:999px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316150F' stroke-opacity='.55' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;
}
.city-picker:hover{border-color:var(--ink)}
.active-select{border-color:var(--ink);background-color:var(--ink);color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F4F2ED' stroke-opacity='.8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E")}

/* ---------- auth ---------- */
.nav-signin{
  font-family:var(--body);font-size:.875rem;font-weight:600;background:var(--ink);
  color:#fff;border:1px solid var(--ink);border-radius:999px;padding:.56rem 1.25rem;cursor:pointer;
}
.nav-signin:hover{background:var(--ink-hover)}
.acct{position:relative}
.acct-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--ink);color:var(--paper);font-family:var(--body);
  font-weight:600;font-size:.72rem;letter-spacing:.03em;cursor:pointer;
}
.acct-btn:hover{background:var(--ink-hover)}
.acct-menu{
  position:absolute;right:0;top:calc(100% + .7rem);min-width:230px;z-index:60;
  background:var(--sheet);border:1px solid var(--hairline);border-radius:14px;
  padding:.4rem;display:flex;flex-direction:column;box-shadow:var(--sh-md);
}
.acct-head{padding:.6rem .8rem .5rem;border-bottom:1px solid var(--hairline);margin-bottom:.3rem}
.acct-head strong{font-size:.9rem;font-weight:600;display:block}
.acct-head span{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-44)}
.acct-menu a,.acct-menu button{
  padding:.5rem .8rem;border-radius:9px;font-family:var(--body);font-size:.875rem;
  color:var(--ink);text-align:left;background:none;border:none;cursor:pointer;
}
.acct-menu a:hover,.acct-menu button:hover{background:var(--paper)}
.acct-menu .acct-signout{color:var(--ink-64);border-top:1px solid var(--hairline);border-radius:0 0 9px 9px;margin-top:.3rem;padding-top:.6rem}

.auth-overlay{
  position:fixed;inset:0;background:rgba(22,21,15,.42);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.auth-modal{
  background:var(--sheet);border-radius:var(--r-modal);
  max-width:400px;width:100%;padding:26px 28px 24px;display:flex;flex-direction:column;gap:.85rem;
  box-shadow:var(--sh-lg);
}
.auth-modal p{color:var(--ink-64);font-size:.9rem}
.auth-head{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--ink);padding-bottom:.6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-64);
}
.auth-head button{background:none;border:none;font-size:1.1rem;cursor:pointer;line-height:1;color:var(--ink-44)}
.auth-head button:hover{color:var(--ink)}
.auth-title{font-size:1.5rem;font-weight:600;letter-spacing:-.015em}
.auth-provider{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-size:.95rem;font-weight:600;
  padding:.85rem 1rem;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s;
}
.auth-apple{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.auth-apple:hover{background:var(--ink-hover)}
.auth-google{background:var(--sheet);color:var(--ink);border:1px solid var(--outline)}
.auth-google:hover{border-color:var(--ink)}
.auth-note{text-align:center;color:var(--ink-44)!important;font-family:var(--mono);font-size:.6rem!important;letter-spacing:.09em;text-transform:uppercase;line-height:1.7}
.auth-error{color:#B3261E;font-size:.8rem}

/* ---------- status pills ---------- */
.status{
  font-family:var(--body);font-size:.78rem;font-weight:600;
  padding:.32rem .8rem;border-radius:999px;border:1px solid transparent;white-space:nowrap;
}
.status-sent{border-color:var(--outline);color:var(--ink)}
.status-viewed{background:var(--fill-7);color:var(--ink)}
.status-shortlisted{border-color:var(--cobalt);color:var(--cobalt)}
.status-booked{background:var(--cobalt);color:#fff}
.status-passed{border-color:var(--hairline);color:var(--ink-44)}

/* ---------- applications ---------- */
.apps-account{margin-bottom:1.3rem;color:var(--ink-64)}
.apps-note{margin-top:1.5rem;color:var(--ink-44)}
.linkish{
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--ink);background:none;border:none;cursor:pointer;padding:0;
  border-bottom:1px solid var(--outline);
}
.linkish:hover{border-color:var(--ink)}
.apps-empty{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:2rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;grid-column:1/-1;
}
.apps-empty p{color:var(--ink-64)}

.applicants-title{font-weight:600;font-size:1.4rem;letter-spacing:-.015em;margin:2rem 0 1rem}
.applicant-rows{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--sh-sm);overflow:hidden}
.applicant-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--hairline);
}
.applicant-row:last-child{border-bottom:none}
.applicant-status{
  padding:.4rem .8rem;border:1px solid var(--outline);background:var(--sheet);
  color:var(--ink);border-radius:999px;cursor:pointer;font-family:var(--body);font-size:.82rem;
}

/* ---------- join ---------- */
.join{padding:0 clamp(1rem,4vw,3rem) 64px;max-width:1160px;margin:0 auto}
.sheet-dark{
  background:var(--ink);color:var(--paper);border-radius:calc(var(--r-card) + 4px);
  padding:clamp(1.8rem,4vw,3rem);text-align:center;
}
.sheet-dark h2{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;margin-bottom:.6rem}
.sheet-dark p{max-width:52ch;margin:0 auto;color:rgba(244,242,237,.64)}
.sheet-dark .sheet-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid rgba(244,242,237,.2);padding-bottom:.7rem;margin-bottom:1.4rem;color:rgba(244,242,237,.5)}
.join-providers{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem;justify-content:center}
.join-providers .auth-provider{min-width:14rem}
.join-providers .auth-apple{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.join-providers .auth-google{background:transparent;color:var(--paper);border-color:rgba(244,242,237,.4)}
.join-providers .auth-google:hover{border-color:var(--paper)}
.join-done{margin:1rem 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cobalt-bright)}
.sheet-dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);margin-top:.6rem}
.sheet-dark .btn:hover{background:#fff;border-color:#fff}

/* ---------- chips (profile editor) ---------- */
.chips-title{font-weight:600;font-size:1.15rem;letter-spacing:-.01em;margin:1.7rem 0 .3rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.chip{
  font-family:var(--body);font-size:.8rem;font-weight:500;padding:.45rem 1rem;
  border:1px solid var(--outline);background:var(--sheet);color:var(--ink);
  border-radius:999px;cursor:pointer;transition:all .15s;
}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip-sm{padding:.3rem .75rem;font-size:.75rem}
.own-actions{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.add-skill{display:flex;gap:.5rem;margin-top:.9rem}
.add-skill input{flex:1;max-width:20rem}
.notify-row{
  display:flex;gap:.55rem;align-items:center;cursor:pointer;
  font-size:.875rem;color:var(--ink-64);margin-top:1.4rem;
}
.notify-row input{accent-color:var(--ink)}

/* ---------- delete account ---------- */
.delete-account{border-top:1px solid var(--hairline);margin-top:2.2rem;padding-top:.4rem}
.delete-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 .5rem}
.delete-row input{
  font-family:var(--body);font-size:.9rem;padding:.62rem .8rem;max-width:16rem;
  border:1px solid var(--hairline);background:var(--sheet);color:var(--ink);border-radius:var(--r-input);
}
.delete-row input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(28,64,216,.12)}
.delete-account .btn:disabled{opacity:.4;cursor:not-allowed}
#delete-account-btn:not(:disabled){border-color:#B3261E;color:#B3261E}
#delete-account-btn:not(:disabled):hover{background:#B3261E;color:#fff}

/* ---------- forms ---------- */
.post-form{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:1.4rem;margin-bottom:1.5rem;
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.form-grid label{
  display:flex;flex-direction:column;gap:.35rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-44);
}
.form-grid input,.form-grid select,.form-grid textarea,.add-skill input,
.cs-row input,.cs-row textarea,.msg-compose input,.msg-group-form input{
  font-family:var(--body);font-size:.9rem;padding:.62rem .8rem;
  border:1px solid var(--hairline);background:var(--sheet);color:var(--ink);
  border-radius:var(--r-input);transition:border-color .15s,box-shadow .15s;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.add-skill input:focus,
.cs-row input:focus,.cs-row textarea:focus,.msg-compose input:focus,.msg-group-form input:focus{
  outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(28,64,216,.12);
}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:var(--ink-44)}
.span2{grid-column:1/-1}
.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}

/* ---------- profile (sample) ---------- */
.demo-note{margin-bottom:1.2rem;color:var(--ink-44)}
.profile{display:grid;grid-template-columns:310px 1fr;gap:14px;align-items:start}
@media(max-width:820px){.profile{grid-template-columns:1fr}}
.profile-side{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:1.4rem;position:sticky;top:5.2rem;
}
@media(max-width:820px){.profile-side{position:static}}
.avatar{
  width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.4rem;color:var(--paper);background:var(--ink);margin-bottom:1rem;
}
.profile-side h1{font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.role-line{color:var(--ink-64);margin:.4rem 0 1rem}
.side-block{margin-top:1.3rem}
.side-block h3{margin-bottom:.55rem;color:var(--ink-44);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:999px;
  padding:.28rem .7rem;font-size:.72rem;font-weight:500;color:var(--ink-64);
}
.links{list-style:none;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
#request-msg{margin-top:.6rem;color:var(--cobalt);font-size:.8rem}
.profile-main{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:1.4rem}
.profile-main .side-block:first-child{margin-top:0}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:520px){.work-grid{grid-template-columns:repeat(2,1fr)}}
.work{aspect-ratio:4/5;border-radius:var(--r-input);border:1px solid var(--hairline);background:var(--paper)}

/* ---------- calendar ---------- */
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem}
.cal-nav button{
  font-family:var(--body);border:1px solid var(--outline);background:var(--sheet);color:var(--ink);
  padding:.3rem .75rem;border-radius:999px;cursor:pointer;font-size:.8rem;
}
.cal-nav button:hover{border-color:var(--ink)}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:.6rem}
.calendar .dow{color:var(--ink-44);text-align:center;padding:.3rem 0;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em}
.calendar .day{
  background:var(--fill-7);border:1px solid transparent;border-radius:7px;
  aspect-ratio:1.15;display:flex;align-items:flex-start;justify-content:flex-end;
  padding:.3rem .4rem;font-size:.7rem;cursor:pointer;color:var(--ink-44);transition:border-color .15s;
}
.calendar .day:hover{border-color:var(--outline)}
.calendar .day.free{background:var(--sheet);border-color:var(--hairline);color:var(--ink)}
.calendar .day.blank{background:transparent;cursor:default}
.calendar .day.blank:hover{border-color:transparent}

/* ---------- crew directory ---------- */
.crew-head{display:flex;gap:.8rem;align-items:center;margin-bottom:.7rem}
.crew-head h3{margin-bottom:.05rem;font-size:1rem}
.crew-head > .mono,.crew-head > .status{margin-left:auto}
.avatar-sm{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.85rem;color:var(--paper);background:var(--ink);flex:none;
}
.crew-role{color:var(--ink-64);font-family:var(--body);font-size:.8rem;letter-spacing:0;text-transform:none;font-weight:500}
.crew-bio{margin-bottom:.7rem}
.crew-card .tags{margin-bottom:.2rem;padding-left:0}
.crew-card .card-apply{background:transparent;color:var(--ink);border-color:var(--outline)}
.crew-card .card-apply:hover{border-color:var(--ink);background:var(--sheet)}

/* ---------- messages ---------- */
.msg-layout{display:grid;grid-template-columns:290px 1fr;gap:14px;align-items:start;min-height:24rem}
@media(max-width:760px){.msg-layout{grid-template-columns:1fr}}
.msg-threads{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;
}
.msg-threads-head{display:flex;justify-content:space-between;align-items:center;padding:.7rem .8rem .7rem 1rem;border-bottom:1px solid var(--hairline)}
.msg-group-form{display:flex;flex-direction:column;gap:.55rem;padding:.9rem 1rem;border-bottom:1px solid var(--hairline)}
.group-members{display:flex;flex-direction:column;gap:.25rem;max-height:11rem;overflow-y:auto}
.group-member{font-size:.85rem;color:var(--ink-64);display:flex;gap:.5rem;align-items:center;cursor:pointer}
.group-member input{accent-color:var(--ink)}
.msg-group-tag{
  font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;color:var(--ink-44);
  background:var(--fill-7);border-radius:999px;padding:.12rem .5rem;vertical-align:middle;
}
.msg-threads > div > p{padding:1rem}
.msg-thread-item{
  display:flex;flex-direction:column;gap:.15rem;text-align:left;cursor:pointer;width:100%;
  background:none;border:none;border-bottom:1px solid var(--hairline);
  padding:.85rem 1rem;color:var(--ink);font-family:var(--body);font-size:.9rem;
}
.msg-thread-item:hover{background:var(--paper)}
.msg-thread-item.active{background:var(--paper);box-shadow:inset 2px 0 0 var(--ink)}
.msg-thread-item .muted{font-size:.78rem}
.msg-thread-item.unread strong{font-weight:700}
.msg-thread-item.unread .muted{color:var(--ink-64)}
.msg-unread-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--cobalt);vertical-align:middle;margin-left:.3rem;
}
/* unread count in the nav (account button + Messages menu link) */
.msg-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.05rem;height:1.05rem;padding:0 .3rem;border-radius:999px;
  background:var(--cobalt);color:#fff;font-family:var(--mono);
  font-size:.6rem;font-weight:500;letter-spacing:0;line-height:1;
}
.acct-badge{position:absolute;top:-4px;right:-4px;z-index:2;pointer-events:none}
.msg-thread{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-height:24rem;
}
.msg-thread-head{
  padding:.85rem 1.2rem;border-bottom:1px solid var(--hairline);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-64);
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
}
.msg-list{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;max-height:26rem}
.msg{max-width:78%;display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.msg p{
  background:var(--sheet);border:1px solid var(--hairline);border-radius:16px 16px 16px 6px;
  padding:.6rem .9rem;font-size:.86rem;
}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.mine p{background:var(--ink);border-color:var(--ink);color:var(--paper);border-radius:16px 16px 6px 16px}
.msg .mono{font-size:.55rem}
.msg-from{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-44);font-weight:500}
/* availability as a readable month (Shot 06) */
.avail-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:.5rem}
.avail-dow{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;color:var(--ink-44);
  text-align:center;padding-bottom:.2rem;
}
.avail-day{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;border-radius:6px;font-family:var(--mono);font-size:.56rem;
  background:var(--fill-7);color:var(--ink-44);
}
.avail-day.free{background:var(--ink);color:var(--paper)}
.avail-day.past{opacity:.35}
.avail-key{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.55rem}
.avail-key .avail-day{width:14px;height:14px;aspect-ratio:auto;flex:none}

/* a call sheet arriving in the thread — the moment the product exists for */
.msg.has-sheet{max-width:92%}
.msg-sheet{
  display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
  background:var(--sheet);border:1px solid var(--hairline);border-left:3px solid var(--cobalt);
  border-radius:var(--r-card);padding:.75rem .9rem;box-shadow:var(--sh-sm);color:var(--ink);
}
.msg-sheet-no{font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-44)}
.msg-sheet strong{font-size:.95rem;font-weight:600;line-height:1.25}
.msg-sheet .mono.muted{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.msg-sheet-go{
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-top:.35rem;
}
.msg.mine .msg-sheet{color:var(--ink)}

.msg-compose{display:flex;gap:.6rem;padding:.9rem 1.2rem;border-top:1px solid var(--hairline)}
.msg-compose input{flex:1;border-radius:999px}

/* ---------- call sheet builder ---------- */
/* minmax(0,…) on both tracks: a bare 1fr is min-content-floored, and the
   builder's widest row (6 fields) then forces the whole page 596px wide —
   sideways scrolling on every phone. */
.cs-layout{display:grid;grid-template-columns:minmax(320px,470px) minmax(0,1fr);gap:1.4rem;align-items:start}
@media(max-width:980px){.cs-layout{grid-template-columns:minmax(0,1fr)}}
.cs-form,.cs-preview-wrap{min-width:0}
.cs-form{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:1.4rem}
.cs-form .chips-title:first-child{margin-top:0}
/* Rows wrap: a crew row carries six fields and the builder column is at
   most 470px. Without wrapping, flex:1 with a 0 basis loses every pixel to
   its 9rem siblings and the Name box collapses to ~24px. */
.cs-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.5rem;align-items:flex-start}
.cs-row input,.cs-row textarea{flex:1 1 7rem;min-width:0;font-size:.85rem;padding:.55rem .7rem}
.cs-row .narrow{flex:1 1 5.5rem}
/* the two time columns are the point of the sheet — they get labels, not
   just placement (browsers ignore placeholder on input[type=time]) */
.cs-timefield{flex:0 1 5.5rem;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.cs-row .cs-timefield input{flex:none;width:100%}
.cs-flabel{font-family:var(--mono);font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-44)}
.cs-del{flex:none;width:2rem;height:2.2rem;border:none;background:none;color:var(--ink-44);font-size:1rem;cursor:pointer;border-radius:8px}
.cs-del:hover{color:#B3261E;background:var(--paper)}
.cs-import-row,.cs-weather-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 .6rem}

/* multi-day: one decision, sitting with the shoot date it belongs to */
.cs-days{display:flex;flex-direction:column;gap:.5rem}
.cs-days-check{
  flex-direction:row!important;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-64);
}
.cs-days-check input{accent-color:var(--ink);width:auto;min-height:0}
.cs-days-detail{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cs-days-detail input[type="number"]{width:4.5rem;flex:none}
.cs-days-hint{margin:0}
#cs-contacts,#cs-locations,#cs-schedule,#cs-crew{margin-top:.6rem}
.cs-preview-wrap{position:sticky;top:5.2rem}
@media(max-width:980px){.cs-preview-wrap{position:static}}

@media print{
  body{background:#fff}
  .ticker,.nav,footer,.no-print,.cs-form,
  .csd-dayof-strip,#notice-host,.install-hint,#profile-nudge{display:none!important}
  .page{padding:0;max-width:none;margin:0}
  .cs-layout{display:block}
  .cs-preview-wrap{position:static}
  .csd{box-shadow:none;border:none;border-radius:0;padding:0}

  /* the paper document: readable at arm's length on set, in the dark,
     at 6am. Nothing below ~10pt; the general call is the biggest thing
     on the page (production convention, not decoration). */
  .csd{font-size:10.5pt;line-height:1.4;color:#000}
  .csd-title{font-size:16pt}
  .csd-grid3 strong{font-size:20pt;line-height:1}
  .csd-time{font-size:12pt}
  .csd-th td,.csd-label,.csd-sub,.csd-beats,.csd-top-right,.csd-foot{font-size:8.5pt;color:#333}
  .csd-loc-title{font-size:11.5pt}

  /* a crew member's row must never be split across two pages */
  .csd tr,.csd-block,.csd-well,.csd-grid3{break-inside:avoid;page-break-inside:avoid}
  .csd table{break-inside:auto}
  .csd-foot{break-before:avoid}

  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
}
@page{margin:1.4cm}

/* ---------- legal pages ---------- */
.legal{max-width:52rem}
.legal-draft{margin-bottom:1.6rem}
.legal-block{border-top:1px solid var(--hairline);padding:1.1rem 0 .4rem}
.legal-block h2{font-weight:600;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:.5rem}
.legal-block p{font-size:.9rem;line-height:1.6;color:var(--ink-64);margin-bottom:.7rem}
.legal-block strong{color:var(--ink)}

/* ---------- install hint ---------- */
.install-hint{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;
  max-width:22rem;margin-left:auto;
  background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-lg);padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.55rem;
}
.install-hint p{font-size:.875rem;color:var(--ink-64)}
.install-actions{display:flex;gap:.9rem;align-items:center}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--ink);margin-top:2rem;
  padding:1.1rem clamp(1rem,4vw,3rem);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-44);
}
footer .wordmark{font-size:1rem;text-transform:none;letter-spacing:-.02em}

/* M1.0: current page underlined in ink (cobalt budget stays with the wordmark) */
.nav nav a[aria-current]{border-bottom:2px solid var(--ink);padding-bottom:2px}
.crew-name-link{color:inherit;text-decoration:none}
.crew-name-link:hover{text-decoration:underline}

/* M2.2: day-of view strip */
.csd-dayof-strip{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);padding:1rem 1.2rem;margin-bottom:1rem}
.csd-your-call{display:flex;align-items:baseline;gap:.6rem;margin:.4rem 0 .7rem;flex-wrap:wrap}
.csd-dayof-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.csd-rev{font-size:.72rem}

/* M1.2: in-brand notices (replace native alert/confirm) */
#notice-host{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:.5rem;width:min(92vw,440px)}
.notice-card{background:var(--sheet);border:1px solid var(--hairline);border-radius:16px;padding:.8rem 1rem;box-shadow:0 10px 30px rgba(22,21,15,.14)}
.notice-label{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-64);margin-bottom:.3rem}
.notice-card p{margin:0 0 .55rem;font-size:.9rem}
.notice-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.notice-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.msg-failed{opacity:.45}

/* M2.3: poster's cockpit — applicant cards */
.applicant-group{margin-bottom:1.1rem}
.applicant-group-head{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-64);margin:0 0 .45rem}
.applicant-card{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);padding:.85rem 1rem;margin-bottom:.55rem}
.applicant-who{display:flex;align-items:center;gap:.65rem}
.applicant-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.applicant-name span{font-size:.72rem}
.applicant-state{font-size:.62rem;letter-spacing:.08em;padding:.2rem .45rem;border-radius:999px;border:1px solid var(--hairline);white-space:nowrap}
.applicant-state.st-booked{background:var(--ink);color:#fff;border-color:var(--ink)}
.applicant-state.st-shortlisted{border-color:var(--cobalt);color:var(--cobalt)}
.applicant-state.st-passed{opacity:.5}
.applicant-tags{margin:.5rem 0 0}
.applicant-acts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.applicant-acts .chip{min-height:38px}
.chip-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.my-call-sheet{font-size:.72rem;margin-top:.25rem}
.my-call-row{align-items:flex-start}

/* M2.5: availability */
.crew-avail{font-size:.72rem;color:var(--ink-64);margin:.35rem 0 0}
.crew-avail.avail-now{color:var(--cobalt)}
.avail-grid{margin-top:.4rem}
.avail-label{display:block;font-size:.7rem;margin-bottom:.4rem}

/* M1.3: quick profile — the two-minute bar */
.quick-profile-backdrop{position:fixed;inset:0;background:rgba(22,21,15,.45);z-index:400;display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.quick-profile{background:var(--sheet);border:1px solid var(--hairline);border-radius:20px;padding:1.4rem;width:min(94vw,520px);max-height:90vh;overflow-y:auto}
.quick-profile h2{margin:.2rem 0 .3rem;font-size:1.3rem}
.quick-profile > p{margin:0 0 .9rem;font-size:.85rem}
.quick-profile label{display:block;margin-bottom:.7rem;font-size:.8rem}
.quick-profile input{width:100%;margin-top:.25rem;font-size:16px}
.qp-label{display:block;margin:.2rem 0 .45rem;font-size:.7rem}
.quick-profile .chips{max-height:34vh;overflow-y:auto}
.qp-actions{margin-top:1rem;align-items:center}
.profile-nudge{margin-bottom:1rem}

/* M3.4: admin metrics */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-bottom:1.4rem}
.admin-stat{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card);padding:.8rem .9rem;display:flex;flex-direction:column;gap:.15rem}
.admin-stat-label{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-64)}
.admin-stat strong{font-size:1.7rem;font-weight:700;line-height:1.1}
.admin-stat span{font-size:.62rem}
.admin-table{width:100%;border-collapse:collapse;margin-bottom:1.4rem;background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r-card)}
.admin-table td{border-bottom:1px solid var(--hairline);padding:.5rem .7rem;font-size:.85rem;vertical-align:top}
.admin-table tr:last-child td{border-bottom:none}

/* ---------- M1.1: touch & mobile ----------
   Applies on touch devices and narrow screens only — desktop density is
   unchanged (the design system is final). */
@media (pointer: coarse), (max-width: 700px){
  /* iOS zooms the whole page when a focused field is under 16px.
     This rule is (0,0,1) and was silently outranked by the (0,1,1) field
     rules at .form-grid input / .cs-row input, so every field it was
     written for computed to 14.4px and iOS zoomed anyway. Named at equal
     specificity so it actually applies. */
  .form-grid input, .form-grid select, .form-grid textarea, .add-skill input,
  .cs-row input, .cs-row textarea, .msg-compose input, .msg-group-form input,
  input, select, textarea{font-size:16px}

  /* every interactive target reaches the 44px minimum */
  .btn, .chip, .card-apply, .acct-btn, .auth-provider, .nav-signin,
  .filters button, .msg-thread-item, .cs-del, .acct-signout,
  select, input[type="date"], input[type="time"], input[type="number"],
  /* The static fields carry NO type attribute, so input[type="text"] never
     reaches them — input:not([type]) is the load-bearing token here. The
     typed entries are for fields added later. Deliberately NOT
     ".form-grid input": that is (0,1,1), the same as
     .cs-days-check input{min-height:0}, and would win on source order and
     inflate the multi-day checkbox into a 44px sliver. */
  input:not([type]), input[type="text"], input[type="email"], input[type="url"],
  input[type="tel"], input[type="search"], input[type="password"],
  .cs-days-check, .group-member{min-height:44px}
  .chip, .chip-sm{display:inline-flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem}
  .filters button{padding-left:1rem;padding-right:1rem}
  /* the avatar is 36x36: min-height alone makes it 36x44, and
     border-radius:50% then paints a vertical ellipse */
  .cs-del, .acct-btn{min-width:44px}
  /* .applicant-acts .chip at :762 is (0,2,0) and outranks .chip — a media
     query adds no specificity. Restated here at equal specificity so
     source order wins; :762 keeps 38px for desktop row density. */
  .applicant-acts .chip{min-height:44px}
  /* the quick-profile fields have no field styling of their own and the
     reset stripped their UA padding — 44px alone pins the text left */
  .quick-profile input{padding:.62rem .8rem}
  /* 44px rows turn an 11rem scroller into a peephole */
  .group-members{max-height:15rem}

  /* the three account-menu anchors carry no class, so the list above
     reaches the signout button and stops one item short. Flex because
     min-height alone top-aligns the label; explicit gap because the
     Messages item is "Messages <span class=msg-badge>" and flex drops the
     whitespace text node. */
  .acct-menu a{min-height:44px;display:flex;align-items:center;gap:.35rem}

  /* the modal's only in-card dismissal is a bare glyph, 13x18. It fails on
     WIDTH too, so grow the hit area with an overlay rather than the box —
     closest("#auth-close") still matches a tap on a pseudo-element. */
  .auth-head button{position:relative}
  .auth-head button::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;
  }

  /* standalone action links: .link's underline is a border-bottom on the
     BOX, so growing the box strands the rule 12-15px under the text.
     Overlay instead — nothing moves. Scoped, never bare .linkish, because
     #signout sits inside prose. */
  .section-head .link, .card-body > a.mono.link, .install-actions .linkish,
  .empty-action{position:relative}
  .section-head .link::after, .card-body > a.mono.link::after,
  .install-actions .linkish::after, .empty-action::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;min-width:44px;
  }
  .install-actions{min-height:44px}

  /* "day-of view" / "edit" on your own call: 14-16px tall, "edit" ~32px
     wide. No overlay here — .own-actions wraps directly beneath and would
     lose ~14px of its taps to it. Real box, hairline moved onto the text. */
  .my-call-sheet .link{
    display:inline-flex;align-items:center;justify-content:center;
    vertical-align:middle;min-height:44px;min-width:44px;padding:0 .35rem;
    border-bottom:none;text-decoration:underline;
    text-decoration-color:var(--outline);text-underline-offset:.22em;
  }

  /* a member's name is the card title AND the only route into their
     profile. Padding with equal negative margin grows the hit box into
     whitespace the row already has, so no card gets taller. inline-block,
     not inline-flex — long names must still wrap inside the h3. */
  /* z-index because the negative margin makes the grown hit box overlap
     the line beneath (the role line), which paints later and would
     otherwise steal the lower half of the target. Measured: without it,
     taps 20px below centre land on .crew-role. No background, so nothing
     moves or repaints — only hit order changes. */
  .crew-name-link,
  .card-body > h3 > a{
    display:inline-block;min-width:44px;padding-block:.8rem;margin-block:-.8rem;
    position:relative;z-index:1;
  }

  /* the wordmark is a sibling of <nav>, so the 44px nav-link rule never
     reached it. Padding, not flex: flex would split "callsheet" from its
     <span>.</span> into two items and shift the cobalt period. */
  .nav .wordmark{display:block;padding-top:.55rem;padding-bottom:.55rem}

  /* the ticker's open calls are real navigation */
  .ticker{min-height:44px}
  .ticker a{display:inline-flex;align-items:center;min-height:44px}

  /* the composer must clear the home indicator, and the installed PWA
     must not paint under the notch */
  body{padding-bottom:env(safe-area-inset-bottom)}
  .nav{padding-left:max(20px, env(safe-area-inset-left))}
  #notice-host{bottom:calc(1rem + env(safe-area-inset-bottom))}
  .install-hint{bottom:calc(1rem + env(safe-area-inset-bottom))}

  /* the empty board's exits are the only way forward when there is nothing
     to tap — full width rather than two half-width pills */
  .board-empty-acts{align-self:stretch}
  .board-empty-acts .btn{flex:1 1 auto;text-align:center}

  /* thumb-reachable: actions stack full width rather than crowding */
  .card-foot .own-actions{flex-wrap:wrap;gap:.4rem}
  .page-head-actions{width:100%;flex-wrap:wrap}
  .page-head-actions .btn{flex:1 1 auto;text-align:center}
}

/* Builder rows on a phone: six fields cannot share 360px. Stack them full
   width, keep the two time fields paired (they read as a range), and give
   the delete button a word so it isn't an orphaned × under a stack.
   Width-only — a coarse-pointer tablet keeps the desktop row. */
@media (max-width:700px){
  .cs-row{flex-wrap:wrap;align-items:center;padding-bottom:.55rem;margin-bottom:.55rem;border-bottom:1px solid var(--hairline)}
  .cs-row:last-child{border-bottom:none;margin-bottom:.2rem}
  .cs-row input,.cs-row textarea,.cs-row .narrow{flex:1 1 100%}
  .cs-timefield{flex:1 1 calc(50% - .3rem)}
  .cs-del{margin-left:auto;width:auto;min-width:0;padding:0 .55rem;display:inline-flex;align-items:center;gap:.3rem;
          font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase}
  .cs-del::after{content:"Remove"}
}

/* ---------- the native app shell ----------
   Built to the iOS screens in the design bundle ("Callsheet App Store"):
   a compact top bar (wordmark · account) and a bottom tab bar
   BOARD · CREW · POST · INBOX · SHEETS in the mono label system. The
   class is baked into the bundle by native/sync.mjs, so none of this
   ever applies on the web. */
.native .ticker{display:none}
.native footer{display:none}

/* the wrapping link list is the website tell — the tabs replace it */
.native header.nav nav{display:none}
.native header.nav{
  position:sticky;top:0;z-index:40;margin:0;border:none;border-radius:0;
  border-bottom:1px solid var(--hairline);
  padding:calc(env(safe-area-inset-top) + .55rem) 1.1rem .55rem;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.94);
}
.native .page,.native .hero,.native .section{padding-top:1rem}

.native body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:.4rem .2rem;text-decoration:none;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-44);
}
.tabbar a[aria-current]{color:var(--ink)}
/* the active mark echoes the web nav's underline rather than inventing one */
.tabbar a[aria-current]::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2px;background:var(--ink);
}
.tabbar .msg-badge{position:absolute;top:8px;right:50%;margin-right:-26px}

/* Shot 01: the city sits beside the wordmark, quiet enough not to
   compete with it */
.native header.nav{gap:.6rem}
.native .nav-city{
  flex:0 1 auto;min-width:0;margin-left:auto;
  /* 44px, not 36 — this control scopes the whole board. Keeping an
     explicit min-height (rather than letting select{min-height:44px}
     apply) also keeps this rule winning on font-size, so the Shot 01 top
     bar keeps its .8rem pill instead of jumping to 16px. */
  font-size:.8rem;padding:.35rem 1.6rem .35rem .6rem;min-height:44px;
  background-position:right .5rem center;
}
.native header.nav > #auth-slot{margin-left:0}
.native header.nav.detail .nav-city{display:none}

/* detail screens: back control + mono context label (Shots 02/03/05) */
.native header.nav.detail .wordmark,
.native header.nav.detail > #auth-slot{display:none}
.native header.nav.detail{justify-content:flex-start;gap:.2rem}
.nav-back{
  display:none;flex:none;width:44px;height:44px;margin-left:-.7rem;
  border:none;background:none;color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;
}
.nav-context{
  display:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-64);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.native header.nav.detail .nav-back,
.native header.nav.detail .nav-context{display:block}
.native header.nav.detail .nav-back{display:flex;align-items:center;justify-content:center}

/* messages is master-detail in the app: the list IS the inbox, a thread
   is a screen you go into */
.native.native-detail .msg-threads,
.native body.native-detail .msg-threads{display:none}
.native body.native-detail .msg-layout{grid-template-columns:1fr}
.native body.native-detail .page-head{display:none}
.native .msg-thread{min-height:auto}
.native .msg-list{max-height:none}
/* the detail header already names the thread — don't say it twice */
.native body.native-detail .msg-thread-head > span{display:none}
.native body.native-detail .msg-thread-head{justify-content:flex-end}
.native body.native-detail .msg-thread-head:not(:has(.chip)){display:none}

/* NOTE: composer-above-keyboard needs a real device to tune — see
   notes/mobile-audit.md; not guessed at here. */

/* Tier 2: pre-send sanity warnings on the call sheet */
.cs-warnings{background:var(--sheet);border:1px solid var(--hairline);border-left:3px solid var(--cobalt);border-radius:var(--r-card);padding:.8rem 1rem;margin-bottom:.9rem}
.cs-warn-label{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-64);margin-bottom:.4rem}
.cs-warnings ul{margin:0;padding-left:1.1rem}
.cs-warnings li{font-size:.85rem;line-height:1.45;margin-bottom:.2rem}