/* Social Sync, the design system of the application: cream ground, coral and
   teal accents, black display headings, pill buttons, Safiro throughout. */
@font-face { font-family:"Safiro"; src:url("fonts/Safiro-Regular.woff") format("woff");
             font-weight:400; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("fonts/Safiro-Medium.woff") format("woff");
             font-weight:500; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("fonts/Safiro-SemiBold.woff") format("woff");
             font-weight:600; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("fonts/Safiro-Bold.woff") format("woff");
             font-weight:700; font-display:swap; }

:root {
  --cream:#FEFEEE; --white:#FFFFFF; --coral:#FF6D6A; --teal:#3CDBC0;
  --ink:#000000; --muted:#6E6E66; --line:#EDEBD8;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink);
       font-family:"Safiro",Arial,Helvetica,sans-serif; font-weight:400; }
.page { max-width:560px; margin:0 auto; padding:20px 20px 56px; min-height:100vh; }

.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.mark { display:block; height:20px; }
.lang a { font-size:12px; color:var(--muted); text-decoration:none; margin-left:10px; }
.lang a.on { color:var(--teal); font-weight:700; }

h1 { font-size:34px; line-height:1.08; font-weight:700; margin:0 0 10px; letter-spacing:-0.6px; }
h2.q { font-size:24px; line-height:1.18; font-weight:700; margin:16px 0 8px; letter-spacing:-0.3px; }
.lead { font-size:15px; color:var(--ink); margin:0 0 20px; line-height:1.45; }
.explain { font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.45; }
.note { font-size:13px; color:var(--muted); margin:14px 0; line-height:1.45; }
.warn { font-size:13px; color:var(--coral); font-weight:600; margin:10px 0; }

.opt { display:flex; align-items:flex-start; gap:10px; background:var(--white); border:0;
       border-radius:14px; padding:14px 16px; margin-bottom:9px; font-size:15px;
       line-height:1.35; cursor:pointer; }
.opt input { margin:2px 0 0; accent-color:var(--coral); flex:none; }
.opt:hover { background:#FFF7F0; }
/* The passion screen: the same chips the card carries, made to answer with.
   A chip is chosen by tapping it, and a chosen chip tapped again takes its
   place in the top 3, which is what the instrument asks for. */
.pick { margin:2px 0 10px; }
.pick .chip { cursor:pointer; border:1px solid transparent; font-size:14px;
       padding:9px 15px; margin:0 8px 9px 0; color:var(--muted); background:var(--white); }
.pick .chip.on { color:#0B7A69; background:#DFF7F1; border-color:#BEEDE3; }
.pick .chip.rank { color:#A8332F; background:#FFE3E2; border-color:#F6CFCD; }
.pick .chip .place { display:inline-block; margin-left:7px; font-size:11px;
       font-weight:700; }
.pick .chip.add { color:var(--teal); background:var(--white); border:1px dashed #BEEDE3; }
.picknote { font-size:13px; color:var(--muted); margin:0 0 12px; line-height:1.45; }
.written { display:flex; gap:8px; margin:0 0 10px; }
.written input { flex:1; min-width:0; font-family:inherit; font-size:15px;
       padding:10px 12px; border:1px solid #d8ddd9; border-radius:12px; }

.opt.entry { align-items:center; }
.opt.entry > span { flex:none; white-space:nowrap; color:var(--ink); }
.opt.entry .text, .opt.entry select { flex:1; min-width:0; font-family:inherit;
       font-size:15px; padding:6px 8px; border:1px solid #d8ddd9; border-radius:8px; }
.tick { display:flex; align-items:flex-start; gap:9px; font-size:14px; margin-bottom:14px;
        line-height:1.45; }
.tick input { margin:2px 0 0; accent-color:var(--teal); flex:none; }

button { background:var(--teal); color:var(--white); border:0; border-radius:999px;
         padding:15px 34px; font-size:16px; font-weight:600;
         font-family:inherit; margin-top:16px; cursor:pointer; width:100%; }
button.plain { background:transparent; color:var(--muted); font-weight:500; width:auto;
               padding:12px 0; margin-left:0; }
button.coral { background:var(--coral); }

input.code { font-size:20px; letter-spacing:3px; padding:14px 16px; width:100%;
             text-transform:uppercase; border:0; border-radius:14px; background:var(--white);
             font-family:inherit; }
input.text { font-size:16px; padding:14px 16px; width:100%; border:0; border-radius:14px;
             background:var(--white); font-family:inherit; }
input.num { font-size:16px; padding:14px 16px; width:110px; border:0; border-radius:14px;
            background:var(--white); font-family:inherit; margin-right:10px; }

.bar { height:6px; background:#F3EFD9; border-radius:999px; margin-bottom:22px; }
.bar span { display:block; height:6px; background:var(--teal); border-radius:999px; }
.reask { background:#FFEFE2; color:#8A5A44; font-size:14px; padding:12px 14px;
         border-radius:14px; margin:0 0 14px; }
.unclear { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);
           margin:16px 0 0; }
.unclear input { margin-right:8px; accent-color:var(--coral); }
.foot { color:#C9C6B2; font-size:10px; margin-top:26px; }

/* The profile card: the head, the sections, the chips. */
.cardname { font-size:34px; font-weight:700; letter-spacing:-0.7px; margin:6px 0 2px; }
.cardsub { font-size:13px; color:var(--muted); margin:0 0 10px; }
.cardlead { font-size:15px; font-weight:600; color:var(--teal); line-height:1.35;
            margin:0 0 18px; }
.chips { margin:10px 0 2px; }
.chip { display:inline-block; font-size:12px; font-weight:600; color:#0B7A69;
        background:#DFF7F1; border-radius:999px; padding:6px 13px; margin:0 6px 7px 0; }
.chip.marked { color:#A8332F; background:#FFE3E2; }

.sect { font-size:12px; font-weight:700; color:var(--coral); text-transform:uppercase;
        letter-spacing:1.4px; margin:24px 0 8px; }
.cardline { font-size:15px; line-height:1.45; margin:0 0 5px; }
.badge { display:inline-block; font-size:10px; font-weight:700; color:var(--white);
         background:var(--teal); border-radius:999px; padding:3px 10px; letter-spacing:.6px;
         margin-left:8px; vertical-align:2px; text-transform:uppercase; }
/* The match card. The platform routes to no match card: these are the styles
   the console's page and the sample cards annex use. */
.band { font-size:30px; font-weight:700; color:var(--teal); letter-spacing:-0.5px;
        margin:6px 0 18px; }
.mbar { margin-bottom:10px; }
.mbar .row { display:flex; align-items:center; }
.mbar .lab { font-size:14px; width:130px; flex:none; }
.mbar .track { flex:1; height:8px; background:#F1EEDC; border-radius:999px; }
.mbar .fill { height:8px; background:var(--teal); border-radius:999px; }
.mbar .num { width:42px; text-align:right; font-size:13px; font-weight:700; color:#0B7A69; }
.mbar .note { font-size:12.5px; color:var(--muted); margin-top:3px; }
.msummary { font-size:14px; line-height:1.5; margin:26px 0 8px; }
.mbox { background:#DFF7F1; border-radius:14px; padding:12px 15px; font-size:14px;
        line-height:1.45; margin:4px 0 12px; }

.recognise { margin-top:26px; }
.recognise .q { font-size:17px; font-weight:600; margin-bottom:10px; }

/* The printed card. The sample cards annex is this page, exported: same head,
   same sections, same chips, same colours, on A4. Nothing here changes what a
   screen shows. */
@media print {
  @page { size:A4; margin:0; }
  html, body { background:var(--white); }
  body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page { max-width:none; width:210mm; height:297mm; min-height:0; margin:0;
          padding:12mm 15mm; page-break-after:always; background:var(--cream);
          display:flex; flex-direction:column; }
  .page:last-child { page-break-after:auto; }
  .top { order:99; margin-top:auto; padding-top:6mm; }
  .lang, .recognise, form, button, .noprint { display:none; }

  /* the same card, set for paper: 1 person to a sheet */
  .cardname { font-size:30px; margin:0 0 2px; }
  .cardsub { font-size:12px; margin:0 0 8px; }
  .cardlead { font-size:14px; margin:0 0 14px; }
  .sect { font-size:10.5px; letter-spacing:1.2px; margin:13px 0 4px; }
  .cardline { font-size:13.5px; line-height:1.38; margin:0 0 2px; }
  .chips { margin:8px 0 0; }
  .chip { font-size:11.5px; padding:5px 12px; margin:0 6px 6px 0; }
  .badge { font-size:8.5px; padding:3px 9px; }
}