/* ==========================================================================
   base.css  ·  the shared look of every Bonafide Crew screen

   Used by the logged-in app (public/app/) AND the public pages
   (public/pages/). Follows the design board: an iOS look, light grey
   background, white rounded cards, system font, blue accent.

   Public pages set --brand to the business's own color (worker.js fills it
   in), so buttons there wear the business's color, not ours.

   Sections:  1 colors and sizes   2 reset   3 type   4 buttons
              5 form fields        6 cards and lists   7 small pieces
              8 sheets (panels that slide up)   9 toast   10 helpers
              11 the wallpaper picker
   ========================================================================== */


/* --- 1. Colors and sizes ----------------------------------------------------
   Every color is a named variable so the whole app can be re-tuned here.
   Text colors are checked against their background for contrast. */
:root {
  --bg:        #f2f2f7;   /* the grey behind everything */
  --card:      #ffffff;
  --ink:       #1d1d1f;   /* main text */
  --ink-2:     #6e6e73;   /* secondary text, still readable on white and grey */
  --ink-3:     #8e8e93;   /* hints and icons only, never body text */
  --line:      #e5e5ea;
  --line-2:    #d1d1d6;
  --fill:      #f2f2f7;   /* grey fill inside cards (fields, chips) */

  --blue:      #007aff;   --blue-dark: #0062cc;
  --green:     #34c759;   --green-ink: #248a3d;  /* -ink versions are for text */
  --orange:    #ff9500;   --orange-ink: #c93400;
  --red:       #ff3b30;   --red-ink:   #d70015;
  --purple:    #af52de;
  --teal:      #30b0c7;
  --gray:      #8e8e93;

  --brand:     var(--blue);   /* public pages override with the business color */

  /* Corners: 12px, the middle ground Daniel chose on 10 Oct 2026 (friendly
     but businesslike, like Apple's own apps). Buttons and boxes 10px. */
  --radius:    12px;
  --radius-sm: 10px;
  /* Crisp depth: a fine edge plus a soft low shadow, never a big glow. */
  /* Cards lift off the grey (Daniel, 11 Oct: "make them pop out more"). Per
     CLAUDE.md 6b: a fine edge, a tight shadow close under the card, a wide
     soft one further out, and light catching the top edge. */
  --shadow:    0 0 0 1px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.06),
               0 18px 36px -18px rgba(16, 24, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-lg: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 20px 40px -16px rgba(16, 24, 40, 0.28);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Instrument Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

/* Our own copy of Instrument Sans for computers without the Apple font,
   and Instrument Serif for the big quotes. Served from our own files, so no
   outside font service sees our visitors. */
@font-face { font-family: 'Instrument Sans'; src: url('/shared/fonts/instrument-sans.woff2') format('woff2');
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/shared/fonts/instrument-serif.woff2') format('woff2');
             font-display: swap; }


/* --- 2. Reset: the same starting point in every browser --------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The logo (decided 12 Oct 2026, option 7): "bonafide" + "crew" in a lit blue box.
   Sora is a free font (SIL Open Font License), the same file the website uses. */
@font-face { font-family: 'Sora'; src: url('/shared/fonts/sora-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
.wm { font-family: 'Sora', var(--font); font-weight: 800; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
/* Centered by measuring the font (12 Oct): "crew" has no tall letters, so it sits in
   the box with less space above than below, and the box is lifted .1em so its middle
   lines up with the middle of "bonafide" (Daniel: crew looked lower). */
.wm b { display: inline-block; margin-left: .12em; padding: 0 .24em .124em; line-height: 1; vertical-align: .1em; border-radius: .22em; color: #fff; font-weight: inherit;
  background: linear-gradient(180deg, #2b95ff, #0a6ef0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 .15em .35em -.12em rgba(10,110,240,.7); }

body {
  margin: 0;
  /* A very long word with no spaces (a pasted link, a name typed as one
     block) wraps instead of pushing the page sideways on a phone. Found by
     the 12 Oct break-it test. */
  overflow-wrap: anywhere;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
[hidden] { display: none !important; }

/* A visible ring for keyboard users, and only for them. */
:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.45); outline-offset: 2px; border-radius: 8px; }


/* --- 3. Type ----------------------------------------------------------------- */
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
.title    { font-size: 34px; font-weight: 700; line-height: 1.1; }
.h2       { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.eyebrow  { font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.02em; }
.sub      { font-size: 15px; color: var(--ink-2); }
.small    { font-size: 13px; color: var(--ink-2); }
.num      { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
.section-label { font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.02em;
                 font-weight: 500; margin: 0 0 8px 16px; }


/* --- 4. Buttons ---------------------------------------------------------------
   .btn          the base shape
   .btn-primary  filled blue (or the business's color on public pages)
   .btn-soft     grey with blue text, for second choices
   .btn-danger   red text, for remove/decline
   .btn-big      full width, 52px tall, for the one main action on a screen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--fill); color: var(--blue);
  transition: background 0.15s, opacity 0.15s;
}
.btn:hover { background: #e8e8ed; color: var(--blue); }
/* Main buttons are lit: a little lighter at the top, a fine light edge, and a
   soft glow in their own color underneath (CLAUDE.md 6b). */
.btn-primary, .btn-primary:hover {
  background: linear-gradient(180deg, #2b95ff, #0a6ef0); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px rgba(10, 110, 240, 0.75);
}
.btn-primary:hover { background: linear-gradient(180deg, #1f88f5, #0a62d6); }
.btn-brand, .btn-brand:hover {
  background: var(--brand); color: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
}
.btn-brand:hover { filter: brightness(0.94); }
/* Second-choice buttons sit on white with a clear outline and a lift, like a
   raised key (the same look as Call/Text on Referrals; Daniel, 12 Oct). */
.card .btn:not(.btn-primary):not(.btn-brand):not(.btn-plain), .sheet .btn:not(.btn-primary):not(.btn-brand):not(.btn-plain),
.list .btn:not(.btn-primary):not(.btn-brand):not(.btn-plain) {
  background: linear-gradient(180deg, #ffffff, #f4f6f9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px rgba(16, 24, 40, 0.22), 0 2px 3px rgba(16, 24, 40, 0.10), 0 8px 16px -6px rgba(16, 24, 40, 0.28);
}
.btn-danger, .btn-danger:hover { color: var(--red-ink); }
.btn-plain { background: transparent; }
.btn-big { width: 100%; min-height: 52px; font-size: 17px; border-radius: var(--radius-sm);
           white-space: normal; text-align: center; }   /* "Text <a very long name>" wraps (12 Oct test) */
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
.btn[disabled], .btn.busy { opacity: 0.55; pointer-events: none; }

/* Round icon-only button (close, share, notifications). Always has an aria-label. */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fill); color: var(--ink-2);
}


/* --- 5. Form fields ------------------------------------------------------------
   <label class="label" for="x">Name</label>
   <input class="input" id="x">
   Grey filled boxes, 16px text so phones do not zoom in when you tap one. */
.label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px 2px; }
.input, .textarea, .select {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--fill); font-size: 16px; color: var(--ink); outline: none;
}
.card .input, .card .textarea, .card .select { background: var(--fill); }
.input:focus, .textarea:focus, .select:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.4; }
.hint  { font-size: 13px; color: var(--ink-2); margin: 6px 0 0 2px; }
.error { font-size: 14px; color: var(--red-ink); margin: 8px 0 0 2px; }
.field + .field { margin-top: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }

/* The honeypot: a field only robots fill in. Hidden from people and screen
   readers, but still in the page for robots to find. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chips: small rounded choices (tags, "How did they find you?") */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 8px; border: 0; background: var(--fill); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: #fff; }
.chip .count { color: inherit; opacity: 0.6; font-weight: 500; }

/* Segmented control: two or three tabs in a grey pill ("Sign in | Create account") */
.seg { display: flex; background: #e9e9ee; border-radius: 10px; padding: 2px; }
.seg button, .seg a {
  flex: 1; border: 0; background: transparent; padding: 9px 0; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center;
}
.seg [aria-selected="true"], .seg .on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }


/* --- 6. Cards and lists ----------------------------------------------------------
   .card     a white rounded box
   .list     a white rounded box of rows, like iOS Settings
   .row      one row in a list: icon tile, text, value or arrow */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad  { padding: 16px; }
.list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px 10px 16px;
  color: var(--ink); text-decoration: none; position: relative; background: none; border: 0;
  width: 100%; text-align: left; cursor: default;
}
a.row, button.row { cursor: pointer; }
a.row:hover, button.row:hover { background: #fafafa; color: var(--ink); }
/* The thin divider between rows starts after the icon, like iOS. */
.row + .row::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--line); }
.row .grow { flex: 1; min-width: 0; }
.row .t1 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.row .t2 { font-size: 14px; color: var(--ink-2); line-height: 1.3; margin-top: 1px; }
.row .val { color: var(--ink-2); font-size: 15px; text-align: right; }
.row .chev { color: #c7c7cc; flex: none; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* CAREFUL: a one-line name only shortens with "..." if the box around it is
   allowed to shrink. Without this, a long partner name pushed the whole page
   sideways on a phone (12 Oct break-it test). */
*:has(> .ellipsis) { min-width: 0; }

/* The small colored square with a white icon in it, at the start of a row. */
.tile {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  /* Lit: lighter at the top, a light edge, a soft shadow under it. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 12px -6px rgba(0, 0, 0, 0.45);
}


/* --- 7. Small pieces ------------------------------------------------------------- */

/* Round photo of a person, or their initials on a color made from their name. */
.avatar {
  flex: none; border-radius: 50%; object-fit: cover; background: var(--c, var(--gray));
  /* CAREFUL: !important on purpose. Screens often grey out "span" text in a
     row, and a face is a span too; without this the initials turned grey on
     the colored circle and could not be read (12 Oct 2026). */
  color: #fff !important; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: 0;
}

/* Status words: "Waiting", "Customer"... a colored dot and the word. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--gray)); }

/* A count bubble on a tab or row ("2 waiting"). */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700;
}

/* Empty lists say what to do next, never just "No data". */
.empty { text-align: center; padding: 40px 24px; color: var(--ink-2); }
.empty h3 { color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.empty p { margin: 0 auto 16px; max-width: 320px; font-size: 15px; }

/* Grey shimmer boxes while a screen loads. */
.loading { background: linear-gradient(90deg, #ececf0 25%, #f5f5f8 50%, #ececf0 75%);
           background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* A progress bar ("5 of 10 people", "2 of 5 done"). */
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); border-radius: 4px; }


/* --- 8. Sheets: panels that slide up from the bottom (phone) or appear in the
   middle (tablet, desktop). Built with the native <dialog>, so Escape closes
   them and keyboard focus stays inside while open. */
dialog.sheet {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 92vh;
  border-radius: 12px 12px 0 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg);
  overflow: auto;
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog.sheet[open] { animation: up 0.22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0.6; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding: 16px 16px 8px 20px; position: sticky; top: 0; background: var(--card); z-index: 1; }
.sheet-head h2 { font-size: 20px; font-weight: 700; }
.sheet-body { padding: 8px 20px 28px; }
@media (min-width: 700px) {
  dialog.sheet { margin: auto; border-radius: 12px; }
}


/* --- 9. Toast: the short "Copied" message at the bottom ------------------------ */
#toast {
  position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 20px); z-index: 1000;
  background: rgba(29, 29, 31, 0.92); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 15px; font-weight: 600; opacity: 0; pointer-events: none; transition: 0.2s;
  max-width: calc(100% - 32px); text-align: center;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }


/* --- 10. Helpers ------------------------------------------------------------------ */
.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.line    { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap    { flex-wrap: wrap; }
.center  { text-align: center; }
.mt      { margin-top: 16px; }
.mt-l    { margin-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* --- 11. The wallpaper picker (signup step 3 and Setup) -------------------------- */
.wall-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wall-pick button { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600;
                    color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wall-pick .sw { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background-size: cover; background-position: center;
                 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.wall-pick [aria-checked="true"] { color: var(--ink); }
.wall-pick [aria-checked="true"] .sw { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }


/* --- 12. On/off switches -----------------------------------------------------------
   <input type="checkbox" class="toggle"> draws as an iPhone-style switch:
   grey when off, green when on, with a white knob that slides across. It is
   still a real checkbox underneath, so keyboards and screen readers work. */
input.toggle {
  appearance: none; -webkit-appearance: none; flex: none; cursor: pointer; margin: 0;
  width: 51px; height: 31px; border-radius: 16px; position: relative;
  background: #e3e4e8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: background 0.2s;
}
input.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: transform 0.2s;
}
input.toggle:checked { background: var(--green); }
input.toggle:checked::after { transform: translateX(20px); }


/* --- 13. Brand color picker (Setup; signup has its own copy) ------------------------- */
.colors { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.colors button[data-c] { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; }
.colors button[data-c][aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.custom-color { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 10px; cursor: pointer;
                font-size: 14px; font-weight: 600; position: relative;
                background: linear-gradient(180deg, #fff, #f4f6f9); box-shadow: 0 0 0 1px rgba(16,24,40,0.1), 0 4px 10px -6px rgba(16,24,40,0.3); }
.custom-color .rainbow { width: 28px; height: 28px; border-radius: 50%;
                         background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff3b30);
                         box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px rgba(0,0,0,0.12); }
.custom-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.custom-color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.input.hex { width: 104px; min-height: 40px; padding: 8px 10px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }