/* App connectée — écrans PWA cuisine (sombre) + mode inspecteur (kiosque clair). */
body{background:var(--d-canvas); overscroll-behavior:none;}
.app-col{max-width:460px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
  background:var(--d-canvas); color:var(--craie); position:relative;
  padding-top:env(safe-area-inset-top); -webkit-user-select:none; user-select:none;}
/* Saisie : on rétablit la sélection de texte là où elle a du sens. */
.app-col input, .app-col textarea, .app-col select, .app-col [contenteditable]{
  -webkit-user-select:text; user-select:text;}
.app-col .scroll{overscroll-behavior:contain;}
.app-col .scroll{flex:1; padding:14px 18px 18px;}
.app-col .wm{color:var(--craie);}

/* bottom nav */
.dnav{display:flex; justify-content:space-around; padding:11px 6px calc(11px + env(safe-area-inset-bottom)); border-top:1px solid var(--d-line); background:var(--d-surface); position:sticky; bottom:0;}
.dnav a{display:flex; flex-direction:column; align-items:center; gap:4px; font-family:var(--mono); font-size:9px; color:var(--craie-muted); text-decoration:none;}
.dnav a.on{color:var(--d-sodium);}

/* dashboard */
.dh{display:flex; justify-content:space-between; align-items:flex-start; padding:8px 2px 4px;}
.dh h2{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.08; color:var(--craie);}
.dh .date{font-family:var(--mono); font-size:10.5px; color:var(--craie-muted); letter-spacing:.04em; margin-top:6px;}
.sync{font-family:var(--mono); font-size:9px; color:var(--d-ok); display:inline-flex; align-items:center; gap:5px; border:1px solid var(--d-line); border-radius:100px; padding:5px 9px; white-space:nowrap;}
.sync .sd{width:6px; height:6px; border-radius:50%; background:var(--d-ok);}
.seclbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--craie-muted); margin:22px 2px 11px; display:flex; justify-content:space-between; align-items:center;}
.seclbl .cnt{background:var(--d-raised); color:var(--craie); border-radius:100px; padding:2px 8px; font-size:10px;}
.task{background:var(--d-surface); border:1px solid var(--d-line); border-radius:13px; padding:14px; display:flex; align-items:center; gap:13px; margin-bottom:9px; text-decoration:none; color:inherit;}
.task .ti{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#2C2A1E; color:var(--d-sodium);}
.task .tt{flex:1; min-width:0;} .task .tt b{font-size:14.5px; display:block; color:var(--craie);} .task .tt small{font-family:var(--mono); font-size:10.5px; color:var(--craie-muted);}
.task .go{color:var(--craie-muted); flex-shrink:0;}
.task.urgent{border-color:#5A2E1E;} .task.urgent .ti{background:#3A2118; color:var(--d-danger);}
.task .pill{font-family:var(--mono); font-size:9.5px; padding:4px 8px; border-radius:100px; flex-shrink:0;}
.pill-do{background:#2C2A1E; color:var(--d-sodium);} .pill-fix{background:#3A2118; color:var(--d-danger);}
.alert-d{background:var(--d-surface); border-left:3px solid var(--d-danger); border-radius:10px; padding:13px 14px; margin-bottom:9px;}
.alert-d.warn{border-left-color:var(--d-sodium);}
.alert-d b{font-size:13.5px; display:block; color:var(--craie);} .alert-d p{margin:3px 0 0; font-size:12px; color:var(--craie-muted); line-height:1.4;}
.score{margin:18px 2px 4px; background:var(--d-surface); border:1px solid var(--d-line); border-radius:13px; padding:15px; display:flex; align-items:center; gap:14px;}
.score .sn{font-family:var(--serif); font-size:36px; color:var(--craie); line-height:1;}
.score .sx{flex:1;} .score .sx b{font-size:13px; color:var(--craie); display:block;}
/* Arithmétique du score (« 6 / 8 relevés du jour · 1 écart à corriger ») — la même ligne que
   sur `inspection.html`, pour que le rouge du matin s'explique là où il s'affiche. Volontairement
   NEUTRE : elle donne le calcul, `.sv` donne le verdict, `.lvl-*` donne la teinte. */
.score .sm{font-family:var(--mono); font-size:10px; color:var(--craie-muted); margin-top:3px;}
.score .sbar{height:6px; background:var(--d-raised); border-radius:100px; margin-top:7px; overflow:hidden;}
.score .sbar i{display:block; height:100%; background:var(--craie-muted); border-radius:100px;}
/* Verdict écrit — jamais omis : c'est LUI qui porte l'information, la couleur ne fait que la
   rendre lisible d'un coup d'œil. Voir `.lvl-*` ci-dessous. */
.score .sv{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--craie-muted); margin-top:7px;}

/* ——— Guide de couleurs du score ———————————————————————————————————————————
   ⛔ SEUL endroit où les paliers reçoivent une teinte. Les SEUILS, eux, vivent uniquement dans
   `app/report.py::SCORE_LEVELS` (85 et 65) et arrivent ici sous forme de classe posée par le
   gabarit. Le défaut ci-dessus est volontairement NEUTRE : avant ce chantier `.score .sn`
   valait `--d-ok` sans condition, et un 12 s'affichait aussi vert qu'un 98. Un gabarit qui
   oublierait la classe rend désormais un nombre en craie — discutable, mais jamais un faux
   feu vert. */
.score.lvl-ok .sn, .ready.lvl-ok .rn{color:var(--d-ok);}
.score.lvl-ok .sbar i, .ready.lvl-ok .rbar i{background:var(--d-ok);}
.score.lvl-ok .sv{color:var(--d-ok);}
.score.lvl-watch .sn, .ready.lvl-watch .rn{color:var(--d-sodium);}
.score.lvl-watch .sbar i, .ready.lvl-watch .rbar i{background:var(--d-sodium);}
.score.lvl-watch .sv{color:var(--d-sodium);}
.score.lvl-risk .sn, .ready.lvl-risk .rn{color:var(--d-danger);}
.score.lvl-risk .sbar i, .ready.lvl-risk .rbar i{background:var(--d-danger);}
.score.lvl-risk .sv{color:var(--d-danger);}

/* checklist de mise en route (onboarding progressif) */
.setup{background:var(--d-surface); border:1px solid var(--d-line); border-radius:13px; padding:15px; margin-bottom:9px;}
.setup .sbar{height:6px; background:var(--d-raised); border-radius:100px; overflow:hidden; margin-bottom:11px;}
.setup .sbar i{display:block; height:100%; background:var(--d-sodium); border-radius:100px; transition:width .4s;}
.setup-row{display:flex; align-items:center; gap:11px; padding:9px 0; text-decoration:none; color:inherit; border-top:1px solid var(--d-line);}
.setup-row:first-of-type{border-top:none;}
.setup-row .sc{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--d-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--d-ok);}
.setup-row.done .sc{background:rgba(110,191,148,.16); border-color:transparent;}
.setup-row .sl{flex:1; min-width:0; font-size:13.5px; color:var(--craie); line-height:1.35;}
a.sl{text-decoration:none; display:inline-flex; align-items:center; gap:5px;}
a.sl svg{color:var(--craie-muted); flex-shrink:0;}
a.sl:hover{color:var(--d-sodium);}
.setup-row.done .sl{color:var(--craie-muted); text-decoration:line-through;}
.setup-row .go{color:var(--craie-muted); flex-shrink:0;}
.setup-skip{margin:0; flex-shrink:0;}
.setup-skip button{background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:10px; color:var(--craie-muted); padding:6px 9px; border-radius:7px; white-space:nowrap;}
.setup-skip button:hover{color:var(--craie); background:var(--d-raised);}

/* equipment + saisie */
.rhead{padding:6px 2px 0;}
.rhead .back{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--craie-muted); margin-bottom:12px; text-decoration:none;}
.rhead .rt{font-family:var(--serif); font-size:22px; color:var(--craie);} .rhead .rs{font-family:var(--mono); font-size:11px; color:var(--craie-muted); margin-top:4px;}
/* mode tournée : enchaînement des relevés en série */
.tourtoggle{display:flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--craie); cursor:pointer; user-select:none;}
.tourtoggle small{color:var(--craie-muted);}
.tourtoggle input{accent-color:var(--d-sodium); width:17px; height:17px; flex-shrink:0;}
.tourtoggle .tourprog{margin-left:auto; color:var(--d-sodium); white-space:nowrap;}
.tourflash{position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(8px); z-index:8; background:var(--d-ok); color:#0c1a12; font-family:var(--mono); font-size:12px; font-weight:600; padding:9px 16px; border-radius:100px; box-shadow:0 6px 20px rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; pointer-events:none;}
.tourflash.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.tourflash.bad{background:var(--d-danger); color:#fff;}
.eqgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:16px;}
.eqcard{background:var(--d-surface); border:1px solid var(--d-line); border-radius:14px; overflow:hidden; display:block; text-decoration:none; color:inherit;}
.eqcard .ephoto{height:80px; background:linear-gradient(135deg,#3a3a30,#23211a);}
.eqcard .einfo{padding:11px 12px 13px;}
.eqcard .einfo b{font-size:14px; color:var(--craie); display:block;} .eqcard .einfo .sub{font-size:11px; color:var(--craie-muted);}
.eqcard .einfo .last{font-family:var(--mono); font-size:10px; color:var(--craie-muted); margin-top:5px; display:flex; align-items:center; gap:6px;}
.eqcard .einfo .last .dot{width:6px;height:6px;border-radius:50%;background:var(--d-ok);}
.eqcard.alert .einfo .last .dot{background:var(--d-danger);} .eqcard.alert .einfo .last{color:var(--d-danger);}
.modes{display:flex; gap:8px; margin:16px 0 14px;}
.mode{flex:1; border-radius:11px; padding:11px 4px; text-align:center; font-size:11px; font-weight:600; border:1px solid var(--d-line); background:var(--d-surface); color:var(--craie-muted); cursor:pointer;}
.mode.on{background:var(--d-sodium); color:#1A1206; border-color:var(--d-sodium);}
.mode small{display:block; font-family:var(--mono); font-size:8px; opacity:.7; font-weight:400; margin-top:2px;}
.mode.soon{opacity:.5;}
.tempbox{background:var(--d-surface); border:1px solid var(--d-line); border-radius:16px; padding:24px; text-align:center; margin-bottom:14px;}
.tempbox .tv{font-family:var(--mono); font-size:56px; font-weight:500; color:var(--craie); line-height:1;}
.tempbox .ts{font-family:var(--mono); font-size:10px; margin-top:6px; color:var(--d-ok);}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.key{background:var(--d-raised); border:1px solid var(--d-line); border-radius:11px; padding:16px 0; text-align:center; font-family:var(--mono); font-size:22px; color:var(--craie); cursor:pointer; user-select:none;}
.key.signkey{grid-column:1/-1; font-size:14px; padding:12px 0; letter-spacing:.02em; color:var(--craie-muted);}
.key.signkey.on{background:var(--d-sodium); border-color:var(--d-sodium); color:var(--d-canvas); font-weight:600;}
.btn-amber{background:var(--d-sodium); color:#1A1206; font-weight:700;}
.ghost-d{background:transparent; color:var(--craie-muted); border:1px solid var(--d-line);}

/* confirmation */
.conf{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 26px;}
.conf .cmark{width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:26px; background:rgba(110,191,148,.16); color:var(--d-ok);}
.conf.bad .cmark{background:rgba(240,121,90,.16); color:var(--d-danger);}
.conf .cv{font-family:var(--serif); font-size:30px; color:var(--craie);}
.conf.bad .cv{color:var(--d-danger);}
.conf .ctemp{font-family:var(--mono); font-size:16px; color:var(--d-ok); margin-top:8px;}
.conf .cmeta{font-family:var(--mono); font-size:11px; color:var(--craie-muted); margin-top:14px;}

/* inspection prep */
.ih{padding:8px 2px 2px;} .ih h2{font-family:var(--serif); font-size:26px; color:var(--craie);} .ih p{font-size:13px; color:var(--craie-muted); margin-top:6px;}
.ready{background:var(--d-surface); border:1px solid var(--d-line); border-radius:16px; padding:22px; margin-top:16px; text-align:center;}
.ready .rk{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--craie-muted);}
.ready .rn{font-family:var(--serif); font-size:62px; line-height:1; color:var(--craie); margin:8px 0 2px;} .ready .rn small{font-size:22px; color:var(--craie-muted);}
.ready .rd{font-size:13px; color:var(--craie);}
.ready .rbar{height:7px; background:var(--d-raised); border-radius:100px; margin-top:14px; overflow:hidden;}
.ready .rbar i{display:block; height:100%; background:var(--craie-muted); border-radius:100px;}
.fix{background:var(--d-surface); border:1px solid var(--d-line); border-radius:12px; padding:13px 14px; display:flex; align-items:center; gap:12px; margin-bottom:9px;}
.fix .fd{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.fix .ft{flex:1;} .fix .ft b{font-size:13.5px; color:var(--craie); display:block;} .fix .ft small{font-family:var(--mono); font-size:10.5px; color:var(--craie-muted);}
.fix .go{color:var(--craie-muted);}
.regmini{display:flex; justify-content:space-between; align-items:center; padding:10px 2px; border-bottom:1px solid var(--d-line); font-size:13px; color:var(--craie);}
.regmini:last-child{border-bottom:none;} .regmini .ok{font-family:var(--mono); font-size:10px; color:var(--d-ok);} .regmini .rt{font-family:var(--mono); font-size:11px; color:var(--craie-muted);}
.app-bbar{padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--d-line); background:var(--d-canvas);}
.btn-red{background:var(--d-danger); color:#1a0d08; font-weight:700;}

/* ===== KIOSQUE (clair, tablette) ===== */
.kiosk{background:var(--canvas); color:var(--charcoal); min-height:100vh;}
.tbar{background:var(--charcoal); color:var(--canvas); display:flex; align-items:center; justify-content:space-between; padding:14px 24px; flex-wrap:wrap; gap:10px;}
.tbar .tb-l{display:flex; align-items:center; gap:16px;} .tbar .wm{font-size:22px; color:var(--canvas);}
.tbar .modechip{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; background:var(--sodium); color:var(--charcoal); padding:5px 11px; border-radius:100px; font-weight:600;}
.tbar .tb-c{font-family:var(--serif); font-size:19px;}
.tbar .tb-r{display:flex; align-items:center; gap:18px; font-family:var(--mono); font-size:11.5px; color:var(--steel-2);}
.tbar .lock{display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.2); padding:7px 12px; border-radius:8px; color:var(--canvas); text-decoration:none;}
.tsub{background:var(--surface); border-bottom:1px solid var(--line); padding:16px 24px; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.tsub h2{font-family:var(--serif); font-weight:400; font-size:24px;}
.tsub .meta{font-family:var(--mono); font-size:12px; color:var(--steel-6); display:flex; gap:18px; flex-wrap:wrap;} .tsub .meta b{color:var(--charcoal); font-weight:500;}
.tbody{display:grid; grid-template-columns:320px 1fr; gap:0;}
@media(max-width:760px){.tbody{grid-template-columns:1fr;}}
.tcol-l{background:var(--surface); border-right:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:20px;}
.tcol-r{padding:22px 24px;}
.kcard{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:18px;}
.kcard .clbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-6); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.permit-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.permit-row:last-child{border-bottom:none;} .permit-row span{color:var(--steel-6);} .permit-row b{font-weight:600;}
.permit-valid, .permit-expired{display:flex; align-items:center; gap:10px; border-radius:9px; padding:12px 14px; margin-bottom:14px;}
.permit-valid{background:var(--ok-100);}
.permit-valid .pv-ic{color:var(--ok);} .permit-valid b{color:var(--ok); font-size:14px;} .permit-valid small{display:block; color:var(--ok); font-family:var(--mono); font-size:11px; opacity:.85;}
/* Permis échu : mêmes proportions, couleur d'alerte — l'écran est retourné vers l'inspecteur. */
.permit-expired{background:var(--danger-100);}
.permit-expired .pv-ic{color:var(--danger);} .permit-expired b{color:var(--danger); font-size:14px;} .permit-expired small{display:block; color:var(--danger); font-family:var(--mono); font-size:11px; opacity:.85;}
.emp{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);}
.emp:last-child{border-bottom:none;}
.emp .av{width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--steel-2);}
.emp .ei{flex:1;} .emp .ei b{font-size:14px; display:block;} .emp .ei small{font-size:11.5px; color:var(--steel-6); font-family:var(--mono);}
.r-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.r-head h3{font-family:var(--serif); font-weight:400; font-size:21px;} .r-head p{font-size:13px; color:var(--steel-6); margin-top:5px;}
.rstats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
.rstat{background:var(--raised); border:1px solid var(--line); border-radius:11px; padding:15px;}
.rstat b{font-family:var(--serif); font-size:28px; display:block; line-height:1;} .rstat span{font-size:11.5px; color:var(--steel-6); display:block; margin-top:6px;}
.rstat.good b{color:var(--ok);}
.itable{width:100%; border-collapse:collapse; font-size:13px; background:var(--raised); border:1px solid var(--line); border-radius:11px; overflow:hidden;}
.itable thead th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--steel-4); padding:11px 14px; border-bottom:1.5px solid var(--line); background:var(--surface);}
.itable td{padding:11px 14px; border-bottom:1px solid var(--line);} .itable tbody tr:last-child td{border-bottom:none;} .itable .mono{font-family:var(--mono);}
.cor-note{background:var(--sodium-50); border:1px solid var(--sodium-100); border-radius:10px; padding:13px 15px; margin-top:16px; font-size:12.5px; color:var(--charcoal-2); display:flex; gap:11px; align-items:flex-start;}
.cor-note svg{color:var(--sodium-700); flex-shrink:0; margin-top:1px;} .cor-note b{color:var(--charcoal);}
.tfoot{padding:13px 24px; border-top:1px solid var(--line); background:var(--surface); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:10.5px; color:var(--steel-4); font-style:italic;}
.btn-dl{background:var(--charcoal); color:var(--canvas); font-size:14px; padding:11px 18px; min-height:auto; border-radius:8px;}

/* hubs + listes + formulaires (registres / établissement) */
.app-col .input, .app-col select.input, .app-col textarea.input{background:var(--d-surface); border-color:var(--d-line); color:var(--craie);}
.app-col .field label{color:var(--craie-muted);}
.hub-item{display:flex; align-items:center; gap:14px; background:var(--d-surface); border:1px solid var(--d-line); border-radius:13px; padding:16px; margin-bottom:10px; text-decoration:none; color:inherit;}
.hub-item .hi{width:44px; height:44px; border-radius:11px; background:#2C2A1E; color:var(--d-sodium); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hub-item .ht{flex:1;} .hub-item .ht b{font-size:15px; color:var(--craie); display:block;} .hub-item .ht small{font-size:12px; color:var(--craie-muted);}
.hub-item .go{color:var(--craie-muted);}
.lcard{background:var(--d-surface); border:1px solid var(--d-line); border-radius:12px; padding:14px; margin-bottom:10px;}
.lcard .lt{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.lcard b{color:var(--craie); font-size:15px;} .lcard small{font-family:var(--mono); font-size:11px; color:var(--craie-muted);}
.ptitle{font-family:var(--serif); font-size:24px; color:var(--craie); margin:6px 2px 4px;}
.psub{font-size:13px; color:var(--craie-muted); margin:0 2px 16px;}
.addform{background:var(--d-surface); border:1px dashed var(--d-line); border-radius:12px; padding:16px; margin-bottom:18px; display:flex; flex-direction:column; gap:10px;}
.addform .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cert-line{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--d-line); font-size:13px; color:var(--craie);}

/* gen (dossier prêt) */
.gen{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:46px 26px 0;}
.gen .gshield{width:96px; height:96px; border-radius:50%; background:rgba(110,191,148,.15); color:var(--d-ok); display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.gen h2{font-family:var(--serif); font-size:27px; color:var(--craie);} .gen p{font-size:14px; color:var(--craie-muted); margin:12px 0 22px; line-height:1.5;}
.gen .gsum{width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.gen .gsum div{background:var(--d-surface); border:1px solid var(--d-line); border-radius:11px; padding:13px 6px;}
.gen .gsum b{font-family:var(--serif); font-size:21px; color:var(--craie); display:block;} .gen .gsum span{font-size:10px; color:var(--craie-muted); display:block; margin-top:3px;}

/* Réglages de rappels : chips d'heures/jours (case à cocher cachée + état actif)
   et lignes de types (case visible). */
.tchip{display:flex; align-items:center; justify-content:center; padding:9px 2px; border-radius:9px;
  border:1px solid var(--d-line); background:var(--d-surface); color:var(--craie-muted);
  font-family:var(--mono); font-size:12px; cursor:pointer; user-select:none;}
.tchip input{display:none;}
.tchip:has(input:checked){background:var(--d-sodium); border-color:var(--d-sodium); color:#1A1206; font-weight:600;}
.rtype{display:flex; align-items:center; gap:11px; padding:10px 2px; color:var(--craie); font-size:14px; border-top:1px solid var(--d-line);}
.rtype input{width:18px; height:18px; accent-color:var(--d-sodium);}

/* Fonctionnalité hors forfait : item grisé + badge « forfait requis » (incitation). */
.hub-item.locked{opacity:.62;}
.hub-item.locked .go{opacity:.5;}
.lockbadge{display:inline-flex; align-items:center; gap:4px; margin-left:7px; vertical-align:middle;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:100px; background:rgba(227,164,31,.16); color:var(--sodium);
  border:1px solid rgba(227,164,31,.34);}