/* ============================================================
   Royex Digital Card
   Built on the Royex design system tokens.

   Engineered, not decorative. Poppins throughout, a single brand
   hue used only where something is actionable, generous whitespace,
   8px corners, and the angular cut from the logo used sparingly —
   the primary action and one faint corner accent, nothing more.
   ============================================================ */

:root{
  /* ---- Brand */
  --color-primary:#BA2228;
  --color-primary-hover:#9E1D22;
  --color-primary-pressed:#8A181D;
  --primary-50:#FBEBEC;
  --primary-100:#F4CDCE;
  --color-secondary:#141414;

  /* ---- Neutral ramp */
  --neutral-0:#FFFFFF;
  --neutral-50:#FAFAF8;
  --neutral-100:#F2F2F0;
  --neutral-200:#E4E4E1;
  --neutral-400:#A8A8A5;
  --neutral-600:#666666;
  --neutral-800:#202020;
  --neutral-900:#141414;

  /* ---- Semantic */
  --color-text-primary:#202020;
  --color-text-secondary:#666666;
  --color-text-inverse:#FFFFFF;
  --surface-default:#FFFFFF;
  --surface-subtle:#FAFAF8;
  --surface-inverse:#141414;
  --surface-page:#EDEDEA;
  --border-default:#E4E4E1;
  --border-strong:#A8A8A5;
  --color-error:#E05555;
  --color-error-bg:#FCEDED;
  --color-error-border:#F3B7B7;
  --color-success:#4CAF7D;
  --focus-ring:rgba(186,34,40,.4);

  /* ---- Spacing, 4px base */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ---- Radius: geometric, never over-rounded */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* ---- Elevation: neutral, low contrast, never coloured */
  --elevation-1:0 1px 2px rgba(20,20,20,.06), 0 1px 3px rgba(20,20,20,.08);
  --elevation-2:0 4px 8px rgba(20,20,20,.08), 0 2px 4px rgba(20,20,20,.06);
  --elevation-3:0 12px 28px rgba(20,20,20,.14), 0 6px 12px rgba(20,20,20,.10);

  /* ---- Motion: purposeful and fast. No bounce. */
  --duration-fast:150ms;
  --duration-base:200ms;
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:430px;
  --cut:14px;

  /* ---- Legacy aliases.
     Forty-odd views already reference these names. Pointing them at the
     design tokens re-skins the whole app without touching a single view. */
  --black:var(--color-secondary);
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --faint:var(--neutral-400);
  --line:var(--border-default);
  --wash:var(--surface-subtle);
  --white:var(--neutral-0);
  --red:var(--color-primary);
  --red-dark:var(--color-primary-hover);
  --red-wash:var(--primary-50);
  --radius:var(--radius-md);
  --shadow:var(--elevation-1);
  --f-display:var(--font-sans);
  --f-body:var(--font-sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.6;
  color:var(--color-text-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@keyframes rx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rx-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------- Type */

h1,h2,h3,h4{margin:0;font-family:var(--font-sans);line-height:1.15;color:var(--color-text-primary)}
h1{font-size:26px;font-weight:800;letter-spacing:-.01em}
h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
h3{font-size:15px;font-weight:600}

/* Section label. ALL-CAPS is reserved for these and table headers. */
.eyebrow{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary);
}
.muted{color:var(--color-text-secondary)}
.small{font-size:13px;line-height:1.5}

/* ---------------------------------------------- Layout */

/* The card is a single column on a tinted page — it reads as an object
   you were handed, not a website that happens to be narrow. */
.shell{
  max-width:var(--maxw);margin:0 auto;
  background:var(--surface-default);
  min-height:100vh;
  box-shadow:0 0 24px rgba(20,20,20,.08);
  padding:0 var(--space-5) 120px;
}
.wide{max-width:1120px}

.section{padding:var(--space-5) 0;border-top:1px solid var(--border-default)}
.section:first-child{border-top:0}

/* The public card separates blocks with space, never with rules. */
.card-main{display:flex;flex-direction:column;gap:28px;padding:20px 0 0}
.card-main .section{border-top:0;padding:0}
.card-main .section > .eyebrow{margin-bottom:10px}
.row{display:flex;align-items:center;gap:var(--space-3)}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.grid{display:grid;gap:var(--space-3)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------- Card header */

.card-head{
  position:relative;overflow:hidden;
  margin:0 calc(var(--space-5) * -1);
  padding:28px var(--space-5) var(--space-5);
  border-bottom:1px solid var(--border-default);
  background:var(--surface-default);
}
/* The angular device from the logo, at 8% — present, not shouting. */
.card-head::after{
  content:"";position:absolute;top:0;right:0;
  width:72px;height:72px;background:var(--color-primary);
  clip-path:polygon(100% 0,100% 100%,0 0);opacity:.08;
}
.card-head .brand{height:26px;width:auto}

.identity{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5)}
.avatar{
  width:84px;height:84px;object-fit:cover;flex:none;
  border-radius:var(--radius-md);border:1px solid var(--border-default);
  background:var(--surface-subtle);
}
.avatar-fallback{
  width:84px;height:84px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-md);background:var(--color-primary);
  color:#fff;font-size:30px;font-weight:700;
}
.identity .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.name{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0}
.role{display:flex;align-items:center;gap:var(--space-2)}
.role .dash{width:18px;height:3px;background:var(--color-primary);flex:none}
.role span{
  font-size:13px;font-weight:500;color:var(--color-text-secondary);
  letter-spacing:.04em;text-transform:uppercase;
}
.org{font-size:12.5px;color:var(--color-text-secondary);margin-top:2px}

/* ---------------------------------------------- Buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;padding:0 var(--space-4);
  font-family:var(--font-sans);font-size:15px;font-weight:600;
  border:1px solid transparent;border-radius:var(--radius-md);
  background:none;color:inherit;cursor:pointer;
  transition:background var(--duration-fast),border-color var(--duration-fast),
             transform var(--duration-fast),box-shadow var(--duration-fast);
}
/* The one place the logo's cut appears on an interactive element. */
.btn-primary{
  background:var(--color-primary);color:#fff;border-radius:var(--radius-md);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-primary:active{background:var(--color-primary-pressed)}

.btn-dark{background:var(--color-secondary);color:#fff}
.btn-dark:hover{background:#2A2A2A}

.btn-ghost{border-color:var(--border-default);background:var(--surface-default);color:var(--color-text-primary)}
.btn-ghost:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--elevation-2)}

.btn-sm{height:40px;font-size:13px;padding:0 var(--space-3)}
.btn-auto{width:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Call / WhatsApp / Email / LinkedIn */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:var(--space-3)}
.action{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 4px;border:1px solid var(--border-default);
  border-radius:var(--radius-md);background:var(--surface-default);
  color:var(--color-text-primary);font-size:11.5px;font-weight:500;
  transition:border-color var(--duration-fast),transform var(--duration-fast),
             box-shadow var(--duration-fast);
}
.action:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--elevation-1)}
.action:active{transform:none}
.action svg{width:20px;height:20px;stroke:var(--color-primary);fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------- Surfaces */

.panel{
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-default);
}
.panel-pad{padding:var(--space-4)}

.rowlink{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4);border:1px solid var(--border-default);
  border-radius:var(--radius-md);background:var(--surface-default);
  color:var(--color-text-primary);
  transition:transform var(--duration-fast),box-shadow var(--duration-fast);
}
.rowlink:hover{transform:translateY(-2px);box-shadow:var(--elevation-2)}
.rowlink + .rowlink{margin-top:10px}
.rowlink .chev{color:var(--neutral-400);font-size:18px;flex:none}

/* A stack of links reads as one object, divided — not as separate cards. */
.list-group{
  display:flex;flex-direction:column;
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  overflow:hidden;
}
.list-group .rowlink{
  border:0;border-bottom:1px solid var(--border-default);
  border-radius:0;padding:14px var(--space-4);margin:0;
}
.list-group .rowlink:last-child{border-bottom:0}
.list-group .rowlink:hover{transform:none;box-shadow:none;background:var(--surface-subtle)}

.tag{
  display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.tag-red{background:var(--primary-50);color:var(--color-primary)}
.tag-dark{background:var(--color-secondary);color:#fff}
.tag-grey{background:var(--neutral-100);color:var(--color-text-secondary)}

.verified{display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;color:var(--color-primary)}
.verified svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* Share this card */
.qr-share{
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.qr-share img{width:92px;height:92px;flex:none;border-radius:var(--radius-sm)}
.qr-share .copy{display:flex;flex-direction:column;gap:4px}

.card-footer{display:flex;justify-content:center;padding-top:var(--space-1)}
.card-footer span{font-size:11px;color:var(--neutral-400);letter-spacing:.06em}

/* ---------------------------------------------- Stats */

.stat{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4)}
.stat .n{font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1}
.stat .l{font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary);margin-top:6px}
.stat.accent{border-color:var(--color-primary)}
.stat.accent .n{color:var(--color-primary)}

/* ---------------------------------------------- Ask AI */

/* Fades the card out beneath it rather than sitting on a hard edge. */
.chat-launch{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:20;
  width:100%;max-width:var(--maxw);
  padding:var(--space-3) var(--space-4) var(--space-4);
  padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--surface-default) 60%,rgba(255,255,255,0));
  border:0;cursor:pointer;font-family:var(--font-sans);
}
.chat-launch span.inner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:50px;background:var(--color-secondary);color:#fff;
  border-radius:var(--radius-md);font-size:14px;font-weight:600;
  box-shadow:0 6px 16px rgba(20,20,20,.25);
  transition:background var(--duration-fast);
}
.chat-launch:hover span.inner{background:#2A2A2A}
.chat-launch .pulse{
  width:8px;height:8px;border-radius:var(--radius-pill);
  background:var(--color-primary);flex:none;
  animation:rx-pulse 2s ease-in-out infinite;
}

/* Chat as a bottom sheet: it belongs to the card, it doesn't replace it. */
.chat-scrim{position:fixed;inset:0;background:rgba(20,20,20,.55);z-index:30}
.chat-panel{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:31;
  width:100%;max-width:var(--maxw);height:76dvh;
  background:var(--surface-default);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  animation:rx-rise var(--duration-base) var(--ease-out);
}
.chat-panel[hidden],.chat-scrim[hidden]{display:none}

.chat-head{
  display:flex;align-items:center;gap:10px;
  padding:var(--space-4) 16px var(--space-4) 20px;
  border-bottom:1px solid var(--border-default);flex:none;
}
/* A flex child defaults to min-width:auto, so a long name refuses to shrink and
   shoves the close button off the panel. This is what hid the ✕. */
.chat-head .title{flex:1;min-width:0}
.chat-head .title h3{
  font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-head .close{
  flex:none;width:36px;height:36px;margin-right:-4px;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:none;color:var(--color-text-secondary);border-radius:var(--radius-md);
}
.chat-head .close:hover{background:var(--surface-subtle);color:var(--color-text-primary)}
.chat-head .close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
.chat-head .dot{width:8px;height:8px;border-radius:var(--radius-pill);
  background:var(--color-primary);flex:none}
.chat-body{
  flex:1;overflow-y:auto;padding:var(--space-4) 20px;
  display:flex;flex-direction:column;gap:var(--space-3);
  -webkit-overflow-scrolling:touch;
}
.chat-foot{
  display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--border-default);background:var(--surface-subtle);flex:none;
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
}

.bubble{max-width:85%;padding:10px 14px;font-size:13.5px;line-height:1.5}
.bubble.them{
  align-self:flex-start;background:var(--surface-subtle);
  border:1px solid var(--border-default);color:var(--color-text-primary);
  border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;
}
.bubble.me{
  align-self:flex-end;background:var(--color-secondary);color:#fff;
  border-radius:var(--radius-md) var(--radius-md) 2px var(--radius-md);
}
.bubble.typing{display:flex;gap:5px;align-items:center;padding:14px}
.bubble.typing i{width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--neutral-400);animation:rx-pulse 1.4s ease-in-out infinite}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}

.chip-row{display:flex;gap:var(--space-2);overflow-x:auto;
  padding:0 20px var(--space-3);scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:8px 14px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);background:var(--surface-default);
  font-family:var(--font-sans);font-size:13px;white-space:nowrap;cursor:pointer;
  transition:border-color var(--duration-fast),background var(--duration-fast);
}
.chip:hover{border-color:var(--border-strong);background:var(--surface-subtle)}

.composer{display:flex;gap:var(--space-2);align-items:flex-end;width:100%}
.composer textarea{
  flex:1;resize:none;height:44px;max-height:120px;padding:11px 14px;
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:14px;line-height:1.4;
  background:var(--surface-default);color:var(--color-text-primary);
}
.composer textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(186,34,40,.15);
}
.icon-btn{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:0;border-radius:var(--radius-md);cursor:pointer;
  background:var(--color-primary);color:#fff;
  transition:background var(--duration-fast);
}
.icon-btn:hover{background:var(--color-primary-hover)}
.icon-btn.mic{background:var(--surface-default);color:var(--color-text-primary);
  border:1px solid var(--border-strong)}
.icon-btn.mic.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.speaking{display:flex;align-items:center;gap:3px;height:16px}
.speaking i{width:2.5px;background:var(--color-primary);animation:eq .9s ease-in-out infinite}
.speaking i:nth-child(1){height:6px;animation-delay:0s}
.speaking i:nth-child(2){height:14px;animation-delay:.12s}
.speaking i:nth-child(3){height:9px;animation-delay:.24s}
.speaking i:nth-child(4){height:15px;animation-delay:.36s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------------------------------------------- Forms */

.field{margin-bottom:var(--space-4)}
.field label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;padding:11px 14px;height:44px;
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:14px;
  background:var(--surface-default);color:var(--color-text-primary);
}
.field textarea{min-height:96px;height:auto;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(186,34,40,.15);
}
.field input:disabled{background:var(--surface-subtle);color:var(--color-text-secondary)}
.field .hint{font-size:12.5px;color:var(--color-text-secondary);margin-top:6px}

.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;
  margin-bottom:var(--space-4);cursor:pointer;line-height:1.5}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--color-primary);flex:none}

.error{color:var(--color-primary);font-size:12.5px;margin-top:5px;display:block}
.error-box{
  background:var(--color-error-bg);border:1px solid var(--color-error-border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:14px;margin-bottom:var(--space-4);
}

/* ---------------------------------------------- QR display */

.qr-stage{
  min-height:100vh;display:grid;place-items:center;
  background:var(--surface-default);padding:var(--space-5);text-align:center;
}
.qr-stage img{width:min(78vw,340px);height:auto;margin:0 auto}
.qr-stage .name{margin-top:20px}

/* ---------------------------------------------- Empty states */

.empty{
  padding:var(--space-7) var(--space-5);text-align:center;
  border:1px dashed var(--border-default);border-radius:var(--radius-md);
}
.empty h3{margin-bottom:6px}
.empty p{color:var(--color-text-secondary);font-size:14px;margin:0 0 var(--space-4)}

/* ---------------------------------------------- App chrome */

.appbar{
  position:sticky;top:0;z-index:30;background:var(--surface-default);
  border-bottom:1px solid var(--border-default);
  padding:10px var(--space-4);
  padding-top:calc(10px + env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  max-width:var(--maxw);margin:0 auto;
}
.appbar .logo{height:20px}

.iconbtn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;color:var(--color-text-primary);
  border-radius:var(--radius-md);
}
.iconbtn:hover{background:var(--surface-subtle)}
.iconbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------- Left drawer */

.drawer-scrim{position:fixed;inset:0;background:rgba(20,20,20,.55);z-index:60}
.drawer-scrim[hidden]{display:none}

.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:61;
  width:min(84vw,320px);background:var(--surface-default);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:var(--elevation-3);
  animation:drawer-in var(--duration-base) var(--ease-out);
  padding-top:env(safe-area-inset-top);
}
.drawer[hidden]{display:none}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}}

.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-4) var(--space-3);
  border-bottom:1px solid var(--border-default);
}
.drawer-head .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.who-mail{font-size:12.5px;color:var(--color-text-secondary);word-break:break-all}

.drawer-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin:var(--space-3) var(--space-4) 0;padding:12px 14px;
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-subtle);font-size:13.5px;font-weight:500;
}
.drawer-card:hover{border-color:var(--border-strong)}
.drawer-card .chev{color:var(--neutral-400)}

.drawer-group{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--neutral-400);padding:18px var(--space-4) 6px;
}
.drawer > a{
  display:block;padding:11px var(--space-4);font-size:14.5px;font-weight:500;
  color:var(--color-text-primary);
}
.drawer > a:hover{background:var(--surface-subtle)}
.drawer > a.on{
  color:var(--color-primary);font-weight:600;
  box-shadow:inset 3px 0 0 var(--color-primary);
}

.drawer-out{margin-top:auto;padding:var(--space-3) var(--space-4);
  padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-default)}
.drawer-out button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;border:1px solid var(--border-default);
  border-radius:var(--radius-md);background:var(--surface-default);
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  color:var(--color-primary);cursor:pointer;
}
.drawer-out button:hover{border-color:var(--color-primary);background:var(--primary-50)}
.drawer-out svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:30;
  width:100%;max-width:var(--maxw);
  background:var(--surface-default);border-top:1px solid var(--border-default);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 2px 8px;font-size:10px;font-weight:500;color:var(--neutral-400)}
.tabbar a.on{color:var(--color-primary)}
.tabbar a.on svg{stroke:var(--color-primary)}
.tabbar svg{width:21px;height:21px;stroke:var(--neutral-400);fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.has-tabbar{padding-bottom:78px}

.sidenav{display:flex;flex-wrap:wrap;gap:6px;padding:var(--space-3) 0}
.sidenav a{
  padding:8px 14px;font-size:13px;font-weight:500;
  border:1px solid var(--border-default);border-radius:var(--radius-pill);
  color:var(--color-text-secondary);
}
.sidenav a:hover{border-color:var(--border-strong)}
.sidenav a.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:80;
  background:var(--color-secondary);color:#fff;
  padding:var(--space-3) 20px;border-radius:var(--radius-md);
  font-size:14px;box-shadow:var(--elevation-3);
  animation:rx-rise var(--duration-base) var(--ease-out);
}

/* ---------------------------------------------- Tables */

table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-text-secondary);
  padding:10px 12px;border-bottom:1px solid var(--border-default);
}
td{padding:12px;border-bottom:1px solid var(--border-default);vertical-align:top}
tr:hover td{background:var(--surface-subtle)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------------------------------------------- Importance dial */

.dial{display:inline-flex;gap:4px}
.dial button{
  width:28px;height:28px;border:1px solid var(--border-default);
  border-radius:var(--radius-sm);background:var(--surface-default);
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  cursor:pointer;color:var(--color-text-secondary);
}
.dial button.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* ---------------------------------------------- Print */

@media print{
  .chat-launch,.tabbar,.appbar,.btn,.previewbar{display:none !important}
  body{background:#fff;color:#000}
  .shell{box-shadow:none;max-width:none}
}

/* ============================================================
   Admin shell — full width, fixed sidebar.
   The admin panel is desktop work: tables, forms, long lists.
   It gets the whole viewport rather than the card's reading column.
   ============================================================ */

.admin{display:flex;min-height:100vh;align-items:stretch;background:var(--surface-default)}

.admin-side{
  width:236px;flex:none;background:var(--black);color:#fff;
  position:sticky;top:0;align-self:flex-start;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;
}
.admin-side .brandbar{
  padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:10px;
}
.admin-side .brandbar img{height:20px}

.admin-nav{padding:14px 10px;flex:1}
.admin-nav .group{
  font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.34);padding:16px 10px 7px;
}
.admin-nav .group:first-child{padding-top:4px}
.admin-nav a{
  display:block;padding:9px 12px;font-size:.875rem;font-weight:500;
  color:rgba(255,255,255,.72);transition:background .12s,color .12s;
}
.admin-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-nav a.on{
  background:var(--red);color:#fff;font-weight:600;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.admin-nav .count{
  float:right;background:rgba(255,255,255,.16);padding:1px 7px;
  font-size:.6875rem;font-weight:700;
}
.admin-nav a.on .count{background:rgba(0,0,0,.22)}

.admin-side .foot{
  padding:14px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.75rem;color:rgba(255,255,255,.5);
}
.admin-side .foot a{color:rgba(255,255,255,.8)}
.admin-side .foot a:hover{color:#fff}

.admin-body{flex:1;min-width:0;display:flex;flex-direction:column}

.admin-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;border-bottom:1px solid var(--line);background:var(--white);
  position:sticky;top:0;z-index:20;
}
.admin-top .crumb{font-size:.8125rem;color:var(--muted)}
.admin-top .crumb strong{color:var(--ink);font-weight:600}

.admin-content{padding:26px 28px 72px;flex:1}
.admin-content > h1:first-child{margin-bottom:18px}

/* Wider grids make sense once there's room for them */
.admin-content .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1200px){
  .admin-content .grid-3{grid-template-columns:repeat(6,minmax(0,1fr))}
  .admin-content .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.admin-content .panel-pad{padding:20px}
.admin-content form.narrow{max-width:640px}

/* Burger for narrow screens */
.admin-burger{
  display:none;width:38px;height:38px;border:1px solid var(--line);
  background:var(--white);cursor:pointer;place-items:center;
}
.admin-burger svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2}

@media(max-width:900px){
  .admin-side{
    position:fixed;left:0;top:0;bottom:0;z-index:70;height:100dvh;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .admin.open .admin-side{transform:translateX(0)}
  .admin.open::after{
    content:"";position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:60;
  }
  .admin-burger{display:grid}
  .admin-top{padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
  .admin-content{padding:18px 16px 64px}
  .admin-content .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   Tabbed forms — long admin forms split into steps without
   splitting the form itself. One submit still saves everything.
   ============================================================ */

.tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line);
  margin-bottom:24px;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}

.tabs button{
  flex:none;position:relative;background:none;border:0;cursor:pointer;
  padding:12px 20px 13px;font-family:var(--font-sans);font-size:.875rem;
  font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .12s,border-color .12s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--red);border-bottom-color:var(--red)}

.tabs button .step{
  display:inline-grid;place-items:center;width:20px;height:20px;
  margin-right:8px;font-size:.6875rem;font-weight:700;
  background:var(--wash);color:var(--faint);
}
.tabs button.on .step{background:var(--red);color:#fff}
.tabs button.has-error .step{background:var(--red-dark);color:#fff}
.tabs button.has-error{color:var(--red-dark)}

.tab-panel[hidden]{display:none}
.tab-panel{animation:tabin .16s ease}
@keyframes tabin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.tab-head{margin-bottom:20px}
.tab-head h2{margin-bottom:4px}
.tab-head p{margin:0;color:var(--muted);font-size:.875rem}

.form-actions{
  position:sticky;bottom:0;background:var(--white);
  border-top:1px solid var(--line);padding:14px 0;margin-top:32px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.form-actions .row{gap:8px}

.slug-preview{
  font-family:var(--font-sans);font-size:.8125rem;color:var(--muted);
  margin-top:6px;word-break:break-all;
}
.slug-preview b{color:var(--red);font-weight:600}

/* ============================================================
   Permission flags — who can change what.
   ============================================================ */

.flag{
  display:inline-block;margin-left:8px;padding:2px 7px;
  font-size:.625rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;vertical-align:middle;line-height:1.6;
}
.flag-admin{background:var(--black);color:#fff}
.flag-self{background:var(--wash);color:var(--muted);border:1px solid var(--line)}

.notice{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;background:var(--wash);
  border-left:3px solid var(--black);
  font-size:.8125rem;line-height:1.5;margin-bottom:22px;
}
.notice.red{border-left-color:var(--red);background:var(--red-wash)}
.notice svg{width:16px;height:16px;flex:none;margin-top:2px;
  stroke:currentColor;fill:none;stroke-width:2}
.notice p{margin:0}
.notice p + p{margin-top:6px}
.notice strong{font-weight:700}

.legend{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font-size:.75rem;color:var(--muted);margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}

/* ============================================================
   Image editor — crop, zoom, rotate, adjust before upload.
   Sized for a thumb first; the same sheet serves desktop.
   ============================================================ */

.imgedit{
  position:fixed;inset:0;z-index:90;background:rgba(20,20,20,.62);
  display:flex;align-items:flex-end;justify-content:center;
  animation:imgfade .16s ease;
}
@keyframes imgfade{from{opacity:0}to{opacity:1}}

.imgedit-panel{
  background:var(--white);width:100%;max-width:540px;
  max-height:96dvh;display:flex;flex-direction:column;
  animation:imgup .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes imgup{from{transform:translateY(14px)}to{transform:none}}

@media(min-width:620px){
  .imgedit{align-items:center}
  .imgedit-panel{
    clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  }
}

.imgedit-panel header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none;
}
.imgedit-panel header h3{font-size:1rem}
.imgedit-panel header .x{
  width:32px;height:32px;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;color:var(--muted);
}
.imgedit-panel header .x svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

.imgedit-stage{
  padding:18px;background:var(--wash);display:flex;
  flex-direction:column;align-items:center;gap:10px;flex:none;
}
.imgedit-canvas{
  touch-action:none;cursor:grab;background:var(--white);
  box-shadow:0 0 0 1px var(--line), 0 0 0 4000px rgba(255,255,255,.55);
  display:block;
}
.imgedit-canvas:active{cursor:grabbing}
.imgedit-canvas.round{border-radius:50%}
.imgedit-hint{margin:0;font-size:.75rem;color:var(--faint);text-align:center}

.imgedit-tools{
  padding:16px 18px;overflow-y:auto;flex:1;
  -webkit-overflow-scrolling:touch;
}

.imgedit-slider{margin-bottom:14px}
.imgedit-slider label{
  display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.imgedit-slider input[type=range]{
  width:100%;accent-color:var(--red);height:24px;
}

.imgedit-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.imgedit-buttons button{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 4px;border:1px solid var(--line);background:var(--white);
  font-size:.6875rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .12s;
}
.imgedit-buttons button:hover{border-color:var(--black)}
.imgedit-buttons button.on{border-color:var(--red);color:var(--red)}
.imgedit-buttons button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.imgedit-buttons button.on svg{stroke:var(--red)}

.imgedit-adjust{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.imgedit-adjust[hidden]{display:none}

.imgedit-panel footer{
  display:flex;gap:9px;padding:14px 18px;border-top:1px solid var(--line);
  flex:none;padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.imgedit-panel footer .btn{flex:1}

.imgedit-preview{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  padding:10px;border:1px solid var(--line);background:var(--wash);
}
.imgedit-preview img{
  width:46px;height:46px;object-fit:cover;flex:none;background:var(--white);
}
.imgedit-preview img.round{border-radius:50%}
.imgedit-preview div{flex:1;min-width:0;font-size:.8125rem;line-height:1.35}
.imgedit-preview strong{display:block;font-weight:600}
.imgedit-preview span{font-size:.75rem}
.imgedit-preview .link{
  background:none;border:0;color:var(--red);font-size:.8125rem;
  font-weight:600;cursor:pointer;padding:4px;flex:none;
}

/* ============================================================
   Preview bar — shown when an admin is looking at a card.
   Deliberately loud: you should never mistake a preview for
   the real thing, or wonder why your scan count didn't move.
   ============================================================ */

.previewbar{
  position:sticky;top:0;z-index:50;
  background:var(--black);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 16px;
  padding-top:calc(9px + env(safe-area-inset-top));
  font-size:.8125rem;
}
.previewbar .who{display:flex;align-items:center;gap:9px;min-width:0}
.previewbar .dot{
  width:7px;height:7px;background:var(--red);border-radius:50%;flex:none;
}
.previewbar strong{font-weight:600}
.previewbar .muted{color:rgba(255,255,255,.6)}
.previewbar .acts{display:flex;gap:8px;flex:none}
.previewbar a{
  padding:5px 11px;border:1px solid rgba(255,255,255,.28);
  font-size:.75rem;font-weight:600;white-space:nowrap;
}
.previewbar a:hover{border-color:#fff}
.previewbar a.live{background:var(--red);border-color:var(--red)}

@media(max-width:520px){
  .previewbar{flex-direction:column;align-items:flex-start;gap:8px}
  .previewbar .acts{width:100%}
  .previewbar a{flex:1;text-align:center}
}

.previewbar + .shell .card-head{margin-top:0}

/* ---------------------------------------------- Search */

.searchbar{
  position:relative;display:flex;align-items:center;
}
.searchbar svg{
  position:absolute;left:13px;width:18px;height:18px;pointer-events:none;
  stroke:var(--neutral-400);fill:none;stroke-width:1.75;stroke-linecap:round;
}
.searchbar input{
  width:100%;height:46px;padding:0 40px 0 40px;
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:14.5px;
  background:var(--surface-default);color:var(--color-text-primary);
}
.searchbar input:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(186,34,40,.15);
}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .clear{
  position:absolute;right:6px;width:34px;height:34px;display:grid;place-items:center;
  color:var(--color-text-secondary);font-size:15px;border-radius:var(--radius-md);
}
.searchbar .clear:hover{background:var(--surface-subtle)}

/* ============================================================
   Dashboard — compact.
   A phone screen at an event should show status, what needs
   doing, and the two buttons you press standing up, without
   scrolling. Everything else is below the fold.
   ============================================================ */

.dash-id{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-3);padding-top:var(--space-4);
}
.dash-id h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
.dash-url{
  margin:2px 0 0;font-size:12.5px;color:var(--color-primary);
  word-break:break-all;
}

/* Four numbers on one row. Compact enough to read at a glance. */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  overflow:hidden;margin-top:var(--space-4);
}
.metric{
  position:relative;padding:12px 6px;text-align:center;
  border-right:1px solid var(--border-default);
}
.metric:last-child{border-right:0}
.metric .n{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.metric .l{
  display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary);margin-top:4px;
}
.metric .d{
  position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;
}
.metric .d.up{color:var(--color-success)}
.metric .d.down{color:var(--neutral-400)}

/* Only rendered when there is something to act on, so its presence means work. */
.todo{
  margin-top:var(--space-4);padding:var(--space-4);
  border:1px solid var(--border-default);border-left:3px solid var(--color-primary);
  border-radius:var(--radius-md);background:var(--surface-subtle);
}
.todo-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:8px 0;font-size:13.5px;color:var(--color-text-primary);
  border-bottom:1px solid var(--border-default);
}
.todo-row:last-child{border-bottom:0;padding-bottom:0}
.todo-row:first-of-type{padding-top:0}
.todo-row .chev{color:var(--neutral-400);flex:none}
.todo-row strong{font-weight:700}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-4)}
.quick .btn{height:48px;font-size:14px;padding:0 var(--space-3)}
@media(max-width:360px){
  .quick{grid-template-columns:1fr}
}

/* ============================================================
   Card scanning — the wait happens in front of someone you have
   just met, so it should look deliberate rather than frozen.
   ============================================================ */

.scan-stage{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4);margin-top:var(--space-3);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-subtle);
  animation:rx-rise var(--duration-base) var(--ease-out);
}
.scan-stage[hidden]{display:none}

.scan-shot{
  position:relative;width:84px;height:56px;flex:none;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--neutral-100);
  border:1px solid var(--border-default);
}
.scan-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* A line sweeping the captured card. Reads as "being read", not "loading". */
.scan-line{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--color-primary),transparent);
  box-shadow:0 0 8px rgba(186,34,40,.6);
  animation:scan-sweep 1.5s ease-in-out infinite;
}
@keyframes scan-sweep{
  0%   {top:0;    opacity:0}
  15%  {opacity:1}
  85%  {opacity:1}
  100% {top:100%; opacity:0}
}

.scan-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.scan-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.scan-title::after{
  content:'';display:inline-block;width:3px;height:3px;margin-left:6px;
  border-radius:50%;background:var(--color-primary);vertical-align:middle;
  animation:rx-pulse 1.2s ease-in-out infinite;
}
.scan-sub{font-size:12.5px;color:var(--color-text-secondary);line-height:1.4}

.scan-stage.done .scan-line{display:none}
.scan-stage.done .scan-title::after{animation:none;background:var(--color-success)}
.scan-stage.done{border-color:var(--color-success)}

/* A field the scan filled, so it is obvious what to check */
.field input.filled{
  border-color:var(--color-success);
  background:linear-gradient(90deg,rgba(76,175,125,.06),transparent);
}

/* ============================================================
   Contact photos
   ============================================================ */

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.photo-cell{
  position:relative;aspect-ratio:1;overflow:hidden;
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell .kind{
  position:absolute;left:5px;bottom:5px;padding:2px 7px;
  background:rgba(20,20,20,.72);color:#fff;border-radius:var(--radius-pill);
  font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.photo-cell .kill{
  position:absolute;top:4px;right:4px;width:24px;height:24px;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(20,20,20,.6);color:#fff;border-radius:50%;
  font-size:12px;line-height:1;padding:0;
}
.photo-cell .kill:hover{background:var(--color-primary)}

.photo-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:1;cursor:pointer;text-align:center;
  border:1px dashed var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface-default);color:var(--color-text-secondary);
  font-size:11px;font-weight:500;line-height:1.3;padding:6px;
}
.photo-add:hover{border-color:var(--color-primary);color:var(--color-primary)}
.photo-add svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75}

.card-scan-view{
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  overflow:hidden;background:var(--surface-subtle);
}
.card-scan-view img{width:100%;display:block}

/* Card preview strip — a look at your own card, from the dashboard */
.card-peek{
  display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-4);padding:10px 12px;
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-default);color:var(--color-text-primary);
  transition:transform var(--duration-fast),box-shadow var(--duration-fast);
}
.card-peek:hover{transform:translateY(-2px);box-shadow:var(--elevation-2)}
.peek-thumb{
  position:relative;width:44px;height:44px;flex:none;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--neutral-100);
}
.peek-thumb img{width:100%;height:100%;object-fit:cover}
.peek-cut{
  position:absolute;top:0;right:0;width:16px;height:16px;
  background:var(--color-primary);clip-path:polygon(100% 0,100% 100%,0 0);opacity:.9;
}
.peek-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.peek-copy strong{font-size:14px;font-weight:600}
.peek-copy span{font-size:12px}
.card-peek .chev{color:var(--neutral-400);flex:none}

/* ============================================================
   Train my AI
   ============================================================ */

.tone-list{display:flex;flex-direction:column;gap:var(--space-2)}
.tone{
  display:block;position:relative;padding:13px 14px 13px 42px;cursor:pointer;
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-default);
  transition:border-color var(--duration-fast),background var(--duration-fast);
}
.tone:hover{border-color:var(--border-strong)}
.tone.on{border-color:var(--color-primary);background:var(--primary-50)}
.tone input{position:absolute;left:14px;top:15px;width:16px;height:16px;accent-color:var(--color-primary)}
.tone-name{display:block;font-size:14px;font-weight:600}
.tone-desc{display:block;font-size:12.5px;color:var(--color-text-secondary);margin-top:2px;line-height:1.45}

.know{border-radius:var(--radius-md);overflow:hidden}
.know > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:13px var(--space-4);cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:500;
}
.know > summary::-webkit-details-marker{display:none}
.know > summary:hover{background:var(--surface-subtle)}
.know > summary .chev{color:var(--neutral-400);transition:transform var(--duration-fast)}
.know[open] > summary .chev{transform:rotate(180deg)}
.know[open] > summary{border-bottom:1px solid var(--border-default)}
.know-body{padding:var(--space-4)}

/* ---------------------------------------------- Admin filter bar */

.filters{
  display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  padding:var(--space-3);border:1px solid var(--border-default);
  border-radius:var(--radius-md);background:var(--surface-subtle);
}
.filters select{
  height:46px;padding:0 12px;border:1px solid var(--border-default);
  border-radius:var(--radius-md);font-family:var(--font-sans);font-size:13.5px;
  background:var(--surface-default);color:var(--color-text-primary);
}
.filters select:focus{outline:none;border-color:var(--color-primary)}
.filters .btn{height:46px}

.pager{
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-5) 0;
}

/* ---------------------------------------------- Member activity header */

.member-head{
  display:flex;align-items:center;gap:var(--space-4);
  padding-bottom:var(--space-5);border-bottom:1px solid var(--border-default);
  flex-wrap:wrap;
}
.member-photo{
  width:72px;height:72px;flex:none;object-fit:cover;
  border-radius:var(--radius-md);border:1px solid var(--border-default);
}
.member-head h1{font-size:24px}

/* A stat tile that is also a link */
a.stat{display:block;color:inherit;transition:border-color var(--duration-fast),transform var(--duration-fast)}
a.stat:hover{border-color:var(--color-primary);transform:translateY(-2px)}

/* ============================================================
   Compact action links.
   Call / WhatsApp / Email as full-width buttons cost more vertical
   space than the contact's name. On a list you are scanning, the
   name matters and the actions should be within reach but quiet.
   ============================================================ */

.mini-actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
  margin-top:10px;font-size:13px;
}
.mini-actions a,
.mini-actions button{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 0;font-family:var(--font-sans);font-size:13px;font-weight:600;
  color:var(--color-primary);background:none;border:0;cursor:pointer;
}
.mini-actions a:hover,
.mini-actions button:hover{color:var(--color-primary-hover);text-decoration:underline}
.mini-actions a + a::before,
.mini-actions a + button::before,
.mini-actions button + a::before{
  content:"";display:inline-block;width:1px;height:12px;
  background:var(--border-default);margin:0 12px;
}
.mini-actions svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mini-actions .muted-link{color:var(--color-text-secondary);font-weight:500}

/* ---- Contact row, denser */

.contact-row{
  padding:14px var(--space-4);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-default);
}
.contact-row + .contact-row{margin-top:8px}

.contact-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.contact-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.contact-sub{
  font-size:12.5px;color:var(--color-text-secondary);line-height:1.4;margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.contact-note{
  font-size:13px;line-height:1.5;margin:8px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.contact-meta{font-size:12px;color:var(--neutral-400);margin:8px 0 0}
.contact-meta .due{color:var(--color-primary);font-weight:600}

/* Importance dial, tightened so it sits beside a name rather than under it */
.dial{display:inline-flex;gap:3px;flex:none}
.dial button{
  width:24px;height:24px;border:1px solid var(--border-default);
  border-radius:var(--radius-sm);background:var(--surface-default);
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  cursor:pointer;color:var(--neutral-400);padding:0;
}
.dial button.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* Filter chips on one scrolling line instead of wrapping to three rows */
.filter-strip{
  display:flex;gap:8px;overflow-x:auto;padding:var(--space-3) 0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.filter-strip::-webkit-scrollbar{display:none}
.filter-strip a{
  flex:none;padding:7px 14px;font-size:13px;font-weight:500;white-space:nowrap;
  border:1px solid var(--border-default);border-radius:var(--radius-pill);
  color:var(--color-text-secondary);
}
.filter-strip a.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

.contact-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border-default);
}
.status-pick{
  height:32px;padding:0 26px 0 10px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:12px;
  font-weight:600;color:var(--color-text-secondary);background:var(--surface-default);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px;
}
.status-pick:focus{outline:none;border-color:var(--color-primary)}

/* Download link in a page header */
.dl{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 12px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);background:var(--surface-default);
  font-size:12.5px;font-weight:600;color:var(--color-text-primary);
}
.dl:hover{border-color:var(--color-primary);color:var(--color-primary)}
.dl svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Welcome email panel */
.welcome-box{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4);border:1px solid var(--border-default);
  border-left:3px solid var(--color-primary);
  border-radius:var(--radius-md);background:var(--surface-subtle);
}

/* ============================================================
   Offline capture bar — event mode
   ============================================================ */

.offline-bar{
  display:flex;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:var(--primary-50);
  border:1px solid var(--primary-100);
  border-radius:var(--radius-md);
  font-size:.8125rem;font-weight:500;
  color:var(--color-primary-hover);
}
.offline-bar .offline-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--color-primary);
}
.offline-bar.syncing{
  background:var(--neutral-100);
  border-color:var(--border-default);
  color:var(--color-text-secondary);
}
.offline-bar.syncing .offline-dot{
  background:var(--neutral-400);
  animation:offline-pulse 1s ease-in-out infinite;
}
@keyframes offline-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ============================================================
   Blocked / reset states in the admin panel
   ============================================================ */

.danger-panel{
  border:1px solid var(--color-error-border);
  background:var(--color-error-bg);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  margin-top:var(--space-5);
}
.danger-panel h3{color:var(--color-error);margin:0 0 var(--space-2)}
.danger-panel p{font-size:.8125rem;color:var(--color-text-secondary);margin:0 0 var(--space-3)}

.credential{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.0625rem;font-weight:600;letter-spacing:.02em;
  background:var(--neutral-900);color:#fff;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
  margin:var(--space-2) 0 var(--space-3);
  word-break:break-all;user-select:all;
}
/* ============================================================
   Auth pages — sign in, change password, no access

   Append this block to the END of wwwroot/css/royex.css.
   It uses the existing design tokens, so nothing above changes.
   ============================================================ */

.auth-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:var(--space-5) var(--space-4);
  background:var(--surface-page);
}

.auth-card{
  width:100%;
  max-width:440px;
  background:var(--surface-default);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  box-shadow:var(--elevation-2);
  padding:clamp(var(--space-5),5vw,var(--space-7));
}

/* Base rule, deliberately not nested. The logo file is 1770px wide, so if this
   block ever fails to load the page renders with the mark at full size and the
   form pushed off screen. A top-level constraint makes that impossible. */
.auth-logo{height:30px;width:auto;display:block;max-width:100%}

.auth-card .auth-logo{
  height:30px;width:auto;display:block;
  margin-bottom:clamp(var(--space-5),4vw,var(--space-6));
}
.auth-card h1{font-size:clamp(1.5rem,4vw,1.875rem);margin:0 0 var(--space-1)}
.auth-card .auth-sub{
  color:var(--color-text-secondary);font-size:.875rem;
  margin:0 0 clamp(var(--space-5),4vw,var(--space-6));
}
.auth-card form .btn{margin-top:var(--space-1)}

.auth-foot{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-default);
  font-size:.8125rem;
  color:var(--color-text-secondary);
  text-align:center;
}
.auth-foot a{color:var(--color-primary);font-weight:600}

/* ---- Phones: lose the card framing, use the whole screen */
@media (max-width:420px){
  .auth-shell{padding:0;background:var(--surface-default)}
  .auth-card{
    max-width:none;border:0;box-shadow:none;border-radius:0;
    padding:var(--space-6) var(--space-5) var(--space-7);
    padding-top:calc(var(--space-6) + env(safe-area-inset-top));
  }
}

/* ---- Desktop: brand panel beside the form */
@media (min-width:1024px){
  .auth-shell{
    grid-template-columns:1fr 1fr;
    place-items:stretch;
    padding:0;
  }

  .auth-brand{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:var(--surface-inverse);
    color:var(--color-text-inverse);
    padding:var(--space-7);
    overflow:hidden;
  }
  /* The angular cut from the logo, used once. */
  .auth-brand::after{
    content:"";
    position:absolute;right:0;bottom:0;
    width:180px;height:180px;
    background:var(--color-primary);
    clip-path:polygon(100% 0,100% 100%,0 100%);
  }
  .auth-brand .auth-logo{
    position:absolute;top:var(--space-7);left:var(--space-7);
    height:28px;width:auto;margin:0;
  }
  .auth-brand h2{
    position:relative;z-index:1;
    font-size:2rem;line-height:1.2;max-width:15ch;margin:0;
  }
  .auth-brand p{
    position:relative;z-index:1;
    color:var(--neutral-400);max-width:36ch;margin:var(--space-3) 0 0;
  }

  .auth-side{
    display:grid;place-items:center;
    padding:var(--space-7);
    background:var(--surface-default);
  }
  .auth-card{border:0;box-shadow:none;padding:0;max-width:400px}
}

/* ---- Below 1024px there is no room for the brand panel */
@media (max-width:1023px){
  .auth-brand{display:none}
  .auth-side{display:contents}
}

/* ============================================================
   Card bar — the way back from any page beneath a card

   Pinned to the top so it survives scrolling. A visitor deep in a
   service page should never have to hunt for the person they scanned.
   ============================================================ */

.card-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  padding-top:calc(var(--space-3) + env(safe-area-inset-top));
  background:var(--surface-default);
  border-bottom:1px solid var(--border-default);
  color:var(--color-text-primary);
  text-decoration:none;
  max-width:var(--maxw);
  margin:0 auto;
}
.card-bar:active{background:var(--surface-subtle)}

.card-bar-arrow{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:var(--radius-pill);
  background:var(--neutral-100);color:var(--color-text-primary);
}
.card-bar-arrow svg{width:16px;height:16px}

.card-bar-face{
  width:28px;height:28px;flex:none;
  border-radius:var(--radius-pill);object-fit:cover;
  background:var(--neutral-100);
}

.card-bar-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.card-bar-label{font-size:.6875rem;color:var(--color-text-secondary)}
.card-bar-name{
  font-size:.875rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* The bar carries the top edge, so the header below it should not
   also claim the safe area. */
.card-bar + .shell .card-head{padding-top:var(--space-6)}

/* ============================================================
   Pager
   ============================================================ */

.pager{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-default);
}
.pager-count{font-size:.8125rem;color:var(--color-text-secondary)}
.pager-buttons{display:flex;align-items:center;gap:var(--space-2)}
.pager-page{font-size:.8125rem;color:var(--color-text-secondary);min-width:66px;text-align:center}
.pager [aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ============================================================
   Contact detail
   ============================================================ */

.detail-head{
  display:flex;align-items:flex-start;gap:var(--space-4);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border-default);
  margin-bottom:var(--space-4);
}
.detail-initials{
  width:52px;height:52px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-primary);color:#fff;
  font-weight:600;font-size:1.125rem;
}
.detail-facts{width:100%;font-size:.875rem}
.detail-facts td{padding:var(--space-2) 0;vertical-align:top;border:0}
.detail-facts td:first-child{color:var(--color-text-secondary);width:112px}

.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-4) 0}
.quick-actions a{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  padding:var(--space-3) var(--space-2);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  font-size:.75rem;font-weight:600;color:var(--color-text-primary);
}
.quick-actions a:active{background:var(--surface-subtle)}
.quick-actions svg{width:19px;height:19px;stroke:var(--color-primary);fill:none;stroke-width:1.8}

.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.photo-strip img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--radius-sm);border:1px solid var(--border-default);
}

.archived-note{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--neutral-100);border-radius:var(--radius-md);
  font-size:.8125rem;color:var(--color-text-secondary);
  margin-bottom:var(--space-4);
}