/* Whisper Solutions contact card. Tokens come from ds.css; nothing here defines a colour. */

html{-webkit-text-size-adjust:100%;background:var(--bg-page)}
body{min-height:100dvh}
img{display:block;width:auto}
[hidden]{display:none !important}

/* --- page ---------------------------------------------------------------- */
.page{max-width:440px;margin:0 auto;padding:calc(var(--space-6) + env(safe-area-inset-top)) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom))}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.masthead__tag{color:var(--text-tertiary);text-align:right}

/* --- eyebrow (brand/Eyebrow) --------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:10px;font:var(--weight-medium) var(--size-micro)/1.2 var(--font-mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-tertiary)}
.eyebrow__rule{width:18px;height:1px;background:var(--border-default)}

/* --- the card ------------------------------------------------------------ */
/* The measurement grid sits behind the card, never under the mark, and slides as the card tilts. */
.stage{margin:var(--space-6) calc(var(--gutter) * -1) 0;padding:var(--space-10) var(--gutter) var(--space-8);perspective:900px;background-position:var(--gx,0px) var(--gy,0px);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.card{aspect-ratio:1.6;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-5);background:var(--bg-page);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-surface);box-shadow:var(--shadow-paper);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;position:relative;overflow:hidden}
/* Foil: the monogram tiled across the card, barely there until a band of light crosses it with the tilt. */
.card::before{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:url(/assets/pattern-ws.png) -15px 17px/64px 56px;mask:url(/assets/pattern-ws.png) -15px 17px/64px 56px;background:linear-gradient(115deg,transparent 38%,rgba(168,154,145,.1) 46%,rgba(242,240,237,.17) 50%,rgba(168,154,145,.1) 54%,transparent 62%) var(--fx,42%) var(--fy,42%)/300% 300% no-repeat,rgba(242,240,237,.024)}
.card>*{position:relative}
.card__top{display:flex;align-items:center;justify-content:space-between;color:var(--text-tertiary)}
.card__role{color:var(--text-secondary);margin-top:2px}
.card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3)}
.card__lines{display:flex;flex-direction:column;gap:2px;min-width:0;font:var(--weight-regular) var(--size-caption)/1.5 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.card__lines span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__readout{flex:0 0 auto;font:var(--weight-regular) var(--size-micro)/1.5 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-tertiary);white-space:pre}
.tilt-hint{display:block;width:100%;margin-top:var(--space-4);padding:0;background:none;border:0;cursor:pointer;font:var(--weight-regular) var(--size-micro)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary);text-align:center}

/* --- buttons (core/Button) ----------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 14px;font:var(--weight-medium) 13.5px/1 var(--font-sans);letter-spacing:-0.005em;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-control);cursor:pointer;transition:var(--transition-control);-webkit-tap-highlight-color:transparent}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:12.5px}
.btn--sm svg{width:14px;height:14px}
.btn--lg{height:var(--control-h-lg);padding:0 20px;font-size:15px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--text-primary);color:var(--text-inverse);border-color:var(--text-primary)}
.btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--ghost{background:transparent;color:var(--text-secondary)}
.btn:disabled{opacity:.38;cursor:not-allowed}
@media (hover:hover){
  .btn--primary:hover{background:var(--taupe-100);border-color:var(--taupe-100);color:var(--ink-800)}
  .btn--secondary:hover{border-color:var(--text-primary);color:var(--text-primary)}
  .btn--ghost:hover{background:var(--bg-accent-soft);color:var(--text-primary)}
}
.actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6)}

/* --- sections ------------------------------------------------------------ */
.block{margin-top:var(--space-12)}
.block .ws-h3{margin-top:var(--space-4)}
.block__lede{margin-top:var(--space-2);color:var(--text-secondary);max-width:var(--measure-narrow)}

.rows{margin-top:var(--space-4);border-top:1px solid var(--border-hairline)}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--border-hairline)}
.row__label{flex:0 0 auto;font:var(--weight-medium) var(--size-caption)/1.3 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary)}
.row__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-regular) var(--size-body-sm)/1.5 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);transition:var(--transition-control)}
@media (hover:hover){.row:hover .row__value{color:var(--text-accent)}}

/* --- form (forms/Field, Input, Textarea) --------------------------------- */
.form{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:var(--weight-regular) var(--size-caption)/1.3 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary)}
.field__req{color:var(--text-accent)}
.field__hint{font-size:var(--size-caption);line-height:1.45;color:var(--text-tertiary)}
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 16px keeps iOS from zooming the page when a field takes focus. */
.input{width:100%;height:var(--control-h-lg);padding:0 10px;background:var(--bg-inset);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-control);outline:none;font:var(--weight-regular) 16px/1.4 var(--font-sans);transition:var(--transition-control);-webkit-appearance:none;appearance:none}
.input:focus{border-color:var(--border-strong)}
.input--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.input--area{height:auto;padding:10px;resize:vertical;line-height:var(--lh-body)}
.input::placeholder{color:var(--text-tertiary)}
.input[aria-invalid="true"]{border-color:var(--signal-neg)}
.form__status{padding:10px 12px;border-left:2px solid var(--signal-pos);background:var(--signal-pos-dim);font-size:var(--size-body-sm);line-height:1.5;color:var(--text-primary)}
.form__status--neg{border-left-color:var(--signal-neg);background:var(--signal-neg-dim)}

/* --- qualifier (data/Qualifier) ------------------------------------------ */
.qualifier{display:flex;gap:10px;margin-top:var(--space-6);padding:10px 12px;border-left:1px solid var(--border-accent);background:var(--bg-accent-soft);font:var(--weight-regular) var(--size-caption)/1.55 var(--font-mono);color:var(--text-secondary)}
.qualifier__dash{flex:0 0 auto;color:var(--text-accent)}

.footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-16);padding-top:var(--space-4);border-top:1px solid var(--border-hairline);font:var(--weight-regular) var(--size-caption)/1 var(--font-mono);color:var(--text-tertiary)}

/* --- /show: the screen held up at the event ------------------------------- */
.show{display:flex;flex-direction:column;min-height:100dvh;padding:env(safe-area-inset-top) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom))}
.show__bar{display:flex;align-items:center;justify-content:space-between;height:56px;flex:0 0 auto}
.tabs{display:flex;gap:var(--space-5)}
.tabs__tab{height:56px;padding:0;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font:var(--weight-medium) var(--size-caption)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary);transition:var(--transition-control);-webkit-tap-highlight-color:transparent}
.tabs__tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--text-primary)}
.show__view{flex:1;display:flex;flex-direction:column;width:100%;max-width:440px;margin:0 auto}
#view-code{justify-content:center;gap:var(--space-6);padding-bottom:var(--space-8)}
/* White, not paper: scanners want the highest contrast the screen can give. */
.code{padding:var(--space-6);background:var(--paper-000);border-radius:var(--radius-surface)}
.code__qr svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.show__role{margin-top:2px;color:var(--text-secondary)}
.show__url{margin-top:var(--space-3);font:var(--weight-regular) var(--size-body-sm)/1.4 var(--font-mono);color:var(--text-accent)}
.show__note{font:var(--weight-regular) var(--size-micro)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary)}

#view-inbox{padding-top:var(--space-4)}
.inbox__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--space-3);border-bottom:1px solid var(--border-default)}
.inbox__count{font:var(--weight-medium) var(--size-caption)/1.3 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-tertiary)}
.entry{padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline)}
.entry__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.entry__name{font:var(--weight-semibold) var(--size-body)/1.3 var(--font-sans);letter-spacing:var(--track-heading)}
.entry__at{flex:0 0 auto;font:var(--weight-regular) var(--size-micro)/1.3 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-tertiary)}
.entry__company{font-size:var(--size-body-sm);color:var(--text-secondary)}
.entry__lines{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:var(--space-2);font:var(--weight-regular) var(--size-body-sm)/1.5 var(--font-mono);font-variant-numeric:tabular-nums}
.entry__note{margin-top:var(--space-2);font-size:var(--size-body-sm);color:var(--text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
.entry .btn{margin-top:var(--space-3)}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-16) var(--space-6);text-align:center;color:var(--text-tertiary)}
.empty svg{width:20px;height:20px}
.inbox__forget{margin-top:var(--space-6)}
#inbox-status{margin-top:var(--space-4)}

@media (prefers-reduced-motion:reduce){.card{transform:none}.stage{background-position:0 0}}