@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/newsreader-latin-500-normal.woff2") format("woff2")}

:root{
  --brand:#74001f;--brand-deep:#4e0014;--gold:#e8bb52;--ivory:#fff8e4;
  --accent:#74001f;--accent-deep:#4e0014;--accent-tint:#f3e3e6;--on-accent:#fff;
  --paper:#f6f1e7;--card:#fff;--divider:#efe8dc;--border:#ddd3c4;--control:#b9ae9c;
  --row-alt:#fbfaf6;--ink:#1f1a17;--ink-2:#4a423c;--ink-soft:#6b615a;
  --good:#2e6b3f;--good-tint:#e6f0e8;--good-ink:#1e4a2b;
  --attention:#b5761a;--attention-tint:#fbf0dc;--attention-ink:#5a3806;
  --refused:#a4161a;--refused-tint:#f9e4e4;--refused-ink:#7b1013;
  --offline:#4e5a66;--offline-tint:#e7eaee;--offline-ink:#2f3a45;
  --note:#2f5d8a;--note-tint:#e4ecf4;--note-ink:#1f4466;
  --font-sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --font-serif:Newsreader,Georgia,"Times New Roman",serif;
  --sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-48:48px;
  --radius-control:8px;--radius-panel:12px;
  font:400 16px/1.5 var(--font-sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
body{margin:0}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
h1{font:500 28px/1.2 var(--font-serif);margin:0 0 var(--sp-16)}
h2{font:500 22px/1.25 var(--font-serif);margin:var(--sp-32) 0 var(--sp-12)}
h3{font:700 17px/1.3 var(--font-sans);margin:var(--sp-16) 0 var(--sp-8)}
p{margin:0 0 var(--sp-12)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

header{display:flex;align-items:center;gap:var(--sp-16);min-height:64px;
  padding:0 var(--sp-24);background:var(--brand);color:var(--ivory)}
header .mark{display:flex;align-items:center;gap:var(--sp-12);color:inherit;
  text-decoration:none;font:500 20px var(--font-serif);margin-inline-end:auto}
header img{border-radius:50%;background:var(--ivory)}
header button.quiet{border-color:transparent;background:transparent;color:var(--ivory);
  text-decoration:underline;text-decoration-color:rgb(255 248 228 / .5);min-height:36px}
header button.quiet:hover{background:rgb(255 255 255 / .1)}
main{max-width:76rem;margin:0 auto;padding:var(--sp-24) var(--sp-32) var(--sp-48)}

/* Fields: the label above, always. */
label{display:flex;flex-direction:column;gap:6px;margin-block:0 var(--sp-16);
  max-width:28rem;font:600 15px/1.3 var(--font-sans)}
label.check{flex-direction:row;align-items:center;gap:var(--sp-8);font-weight:400}
input:not([type=checkbox],[type=radio]),select,textarea{min-height:40px;padding:0 12px;
  border:1.5px solid var(--control);border-radius:var(--radius-control);
  background:var(--card);color:var(--ink);font:400 15px/1.4 var(--font-sans)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
fieldset{margin:0 0 var(--sp-16);padding:var(--sp-16) var(--sp-24) var(--sp-8);
  max-width:40rem;border:1.5px solid var(--border);border-radius:var(--radius-panel);
  background:var(--card)}
legend{padding:0 var(--sp-8);font:700 13px var(--font-sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}

button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  min-height:40px;padding:0 16px;border:1.5px solid var(--control);
  border-radius:var(--radius-control);background:var(--card);color:var(--ink);
  font:600 14px/1.2 var(--font-sans);cursor:pointer;white-space:nowrap}
button:hover{background:var(--paper)}
form button[type=submit]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
form button[type=submit]:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
/* One filled button to a form; a second choice beside it is outlined, and a stopping one is red. */
button.danger,form button[type=submit].danger{background:var(--card);border-color:var(--refused);
  color:var(--refused)}
button.danger:hover,form button[type=submit].danger:hover{background:var(--refused-tint)}
button.big,a.button.big{min-height:48px;padding:0 var(--sp-24);font-size:17px}
a.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 16px;border-radius:var(--radius-control);background:var(--accent);
  border:1.5px solid var(--accent);color:var(--on-accent);font:600 15px/1.2 var(--font-sans);
  text-decoration:none}
a.button:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)}

table{width:100%;margin-block:0 var(--sp-16);border-collapse:collapse;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius-panel);overflow:hidden;font-size:14px}
th,td{padding:10px var(--sp-16);text-align:start;vertical-align:middle}
th{background:var(--paper);font:700 12px var(--font-sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
td{border-top:1px solid var(--divider)}
tbody tr:nth-child(even){background:var(--row-alt)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* A registration or a shop as a record: the label plainly apart from the value. */
.record{margin:0 0 var(--sp-24);padding:var(--sp-24);background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius-panel)}
.record>h2,.record>h3{margin-top:0}
.record .group{margin:0 0 var(--sp-24)}
.record .group:last-child{margin-bottom:0}
.record .group>h3{margin:0 0 var(--sp-12);padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--divider);font:700 12px var(--font-sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.record dl{display:grid;grid-template-columns:14rem 1fr;gap:var(--sp-12) var(--sp-24);margin:0}
.record dt{margin:0;font:600 14px/1.4 var(--font-sans);color:var(--ink-soft)}
.record dd{margin:0;font:400 16px/1.4 var(--font-sans);color:var(--ink)}
.record dd.empty{color:var(--ink-soft);font-style:italic}
.record dd .caption{display:block;margin:2px 0 0;font-size:14px;color:var(--ink-soft)}
.records{list-style:none;margin:0;padding:0}

.pill{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:32px;
  padding:0 var(--sp-12);border-radius:999px;font:600 14px var(--font-sans);
  background:var(--divider);color:var(--ink-2);white-space:nowrap}
.pill::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.pill.good{background:var(--good-tint);color:var(--good-ink)}
.pill.attention{background:var(--attention-tint);color:var(--attention-ink)}
.pill.refused{background:var(--refused-tint);color:var(--refused-ink)}
.pill.blocked{background:var(--refused);color:#fff;font-weight:700}
.pill.offline{background:var(--offline-tint);color:var(--offline-ink)}
.standing{display:flex;align-items:baseline;gap:var(--sp-12);flex-wrap:wrap;
  margin:0 0 var(--sp-24)}
.standing .means{font-size:15px;color:var(--ink-2)}

.notice{display:flex;gap:14px;padding:18px 20px;margin:0 0 var(--sp-24);
  border:1.5px solid var(--note);border-radius:var(--radius-panel);
  background:var(--note-tint);color:var(--note-ink);font:400 15px/1.5 var(--font-sans)}
.notice::before{content:"i";flex:none;display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:var(--note);color:#fff;font-weight:700}
.notice>div{min-width:0}
.notice :last-child{margin-bottom:0}
.notice.done{border-color:var(--good);background:var(--good-tint);color:var(--good-ink)}
.notice.done::before{content:"\2713";background:var(--good)}
.notice.waiting{border-color:var(--attention);background:var(--attention-tint);
  color:var(--attention-ink)}
.notice.waiting::before{content:"\2026";background:var(--attention)}
.notice.problem{border-color:var(--refused);background:var(--refused-tint);color:var(--refused-ink)}
.notice.problem::before{content:"!";background:var(--refused)}
.problem{color:var(--refused-ink)}
.caption{font-size:14px;color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);align-items:start;margin:0 0 var(--sp-16)}
.actions form{margin:0}
.empty{padding:var(--sp-32);text-align:center;color:var(--ink-2);background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius-panel);margin:0 0 var(--sp-16)}
.empty strong{display:block;margin-bottom:var(--sp-8);font:600 18px var(--font-sans);
  color:var(--ink)}

/* The activation response, read down a telephone: the code box of the wizard. */
.response{max-width:32rem;margin:0 0 var(--sp-16);padding:var(--sp-16);
  border:1.5px solid var(--gold);border-radius:10px;background:var(--ivory);text-align:center;
  font-family:ui-monospace,"Cascadia Mono",monospace;font-size:22px;font-weight:700;
  letter-spacing:.12em;word-spacing:.4rem;overflow-wrap:anywhere}

/* Signing in: the brand on the left, as the shop app's own sign-in page does. */
.signin{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 64px)}
.signin>div{padding:var(--sp-48) 56px}
.signin .brand{background:var(--brand);color:var(--ivory)}
.signin .brand img{width:180px;height:auto}
.signin .brand h1,.signin .brand p{color:var(--ivory)}
.signin .brand p{max-width:26rem}
.signin .enter{display:flex;flex-direction:column;justify-content:center}
main.bare{max-width:none;margin:0;padding:0}

@media (max-width:52rem){
  main{padding:var(--sp-16)}
  header{padding:0 var(--sp-16)}
  .record dl{grid-template-columns:1fr;gap:var(--sp-4)}
  .record dt{margin-top:var(--sp-8)}
  .signin{grid-template-columns:1fr;min-height:0}
  .signin>div{padding:var(--sp-24) var(--sp-16)}
  table{display:block;overflow-x:auto}
  input:not([type=checkbox],[type=radio]),select,textarea,button{min-height:48px}
}