/* Member portal (member.html): one phone-first column, the staff app's colours and fonts.
   Themes: light / dark / auto (follows the phone) via data-theme on <html>; accent colour and text size via member.js. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root {
  --primary: #1d765d; --primary-dark: #145944;
  --bg: #f6f7f4; --card: #fff; --ink: #18231f; --muted: #6b7670; --line: #e2e7e3; --field: #cfd8d2;
  --soft: color-mix(in srgb, var(--primary) 12%, #fff); --accent-ink: var(--primary-dark);
  --warn: #a05f2e; --warn-bg: #f6e8db; --off: #eef0ee; --error: #b03a2e;
  color-scheme: light;
}
/* Dark: chosen, or "auto" on a phone set to dark. */
:root[data-theme="dark"] {
  --bg: #0f1412; --card: #171e1b; --ink: #e8eeea; --muted: #9aa69f; --line: #26302c; --field: #34403a;
  --soft: color-mix(in srgb, var(--primary) 26%, #171e1b); --accent-ink: color-mix(in srgb, var(--primary) 55%, #fff);
  --warn: #e7b183; --warn-bg: #3a2a1d; --off: #222a26; --error: #ff8a7a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f1412; --card: #171e1b; --ink: #e8eeea; --muted: #9aa69f; --line: #26302c; --field: #34403a;
    --soft: color-mix(in srgb, var(--primary) 26%, #171e1b); --accent-ink: color-mix(in srgb, var(--primary) 55%, #fff);
    --warn: #e7b183; --warn-bg: #3a2a1d; --off: #222a26; --error: #ff8a7a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { font-size: 100%; }              /* text size: member.js sets 100 / 112.5 / 125 % */
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 'DM Sans', Arial, sans-serif; padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.m-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; padding-top: calc(.75rem + env(safe-area-inset-top)); background: var(--card); border-bottom: 1px solid var(--line); }
.m-brand { display: flex; align-items: center; gap: .55rem; font: 800 .8rem Manrope, sans-serif; letter-spacing: .12em; }
.m-brand b { color: var(--accent-ink); font-weight: 600; }
.m-mark { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: .55rem; background: var(--primary); color: #fff; font: 800 1.1rem Georgia, serif; letter-spacing: 0; }
.m-actions { display: flex; gap: .25rem; }
.m-icon { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 1.25rem; cursor: pointer; }
.m-icon:hover, .m-icon.on { background: var(--soft); color: var(--accent-ink); }
main { max-width: 40rem; margin: 0 auto; padding: 1.1rem 1rem; }
h1 { font: 700 1.65rem/1.2 Manrope, sans-serif; letter-spacing: -.03em; margin: .35rem 0 .25rem; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--accent-ink); }
h2 { font: 700 1rem Manrope, sans-serif; margin: 0 0 .65rem; }
.m-note { color: var(--muted); font-size: .9rem; margin: 0 0 .9rem; }
.m-card { background: var(--card); border: 1px solid var(--line); border-radius: .9rem; padding: 1rem; margin: 0 0 .9rem; }
.m-card form, form.m-card { display: grid; gap: .75rem; }
label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
input, select, textarea { width: 100%; padding: .7rem .75rem; border: 1px solid var(--field); border-radius: .65rem; font-size: 1rem; background: var(--card); color: var(--ink); }
textarea { min-height: 5.6rem; resize: vertical; }
.m-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.m-btn { min-height: 3rem; border: 0; border-radius: .65rem; background: var(--primary); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; padding: 0 1rem; }
.m-btn:hover { background: var(--primary-dark); }
.m-btn:disabled { opacity: .6; }
.m-btn.ghost { background: none; color: var(--accent-ink); border: 1px solid var(--line); }
.m-error { color: var(--error); font-size: .9rem; margin: 0; min-height: 1em; }
.m-ok { color: var(--accent-ink); font-size: .9rem; margin: 0 0 .75rem; }
.m-list { list-style: none; margin: 0; padding: 0; }
.m-list li { display: flex; justify-content: space-between; align-items: center; gap: .65rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.m-list li:first-child { border-top: 0; }
.m-list small { display: block; color: var(--muted); font-size: .8rem; }
.m-pill { flex: 0 0 auto; padding: .2rem .55rem; border-radius: 1.25rem; background: var(--soft); color: var(--accent-ink); font-size: .75rem; font-weight: 700; }
.m-pill.wait { background: var(--warn-bg); color: var(--warn); }
.m-pill.off { background: var(--off); color: var(--muted); }
.m-empty { color: var(--muted); font-size: .9rem; margin: 0; }
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 0 0 .9rem; }
.m-stat { background: var(--card); border: 1px solid var(--line); border-radius: .9rem; padding: .75rem .4rem; text-align: center; }
.m-stat b { display: block; font: 700 1.4rem Manrope, sans-serif; color: var(--accent-ink); }
.m-stat span { font-size: .75rem; color: var(--muted); }
.m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.m-tabs button { flex: 1; min-width: 0; display: grid; justify-items: center; gap: .1rem; padding: .55rem .1rem; border: 0; background: none; color: var(--muted); font-size: 1.15rem; cursor: pointer; }
.m-tabs span { font-weight: 600; font-size: .75rem; }
.m-tabs button.on { color: var(--accent-ink); }
.m-signin { max-width: 25rem; margin: 1.5rem auto; }
/* Settings */
.m-set { display: grid; gap: .5rem; }
.m-set + .m-set { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.m-set > b { font-size: .9rem; }
.m-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .3rem; padding: .25rem; background: var(--off); border-radius: .75rem; }
.m-seg button { min-height: 2.6rem; border: 0; border-radius: .55rem; background: none; color: var(--ink); font-weight: 600; cursor: pointer; }
.m-seg button.on { background: var(--card); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.m-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.m-swatch { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid var(--card); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.m-swatch.on { box-shadow: 0 0 0 3px var(--c); }
.m-kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.m-kv span { color: var(--muted); }
.m-steps { margin: 0; padding-left: 1.2rem; font-size: .9rem; color: var(--muted); }
/* Line icons (same on every phone; follow the text colour). */
svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-tabs svg { width: 1.45rem; height: 1.45rem; }