/* ============================================================
   PrerequisityApp — SatoApp visual system
   Tokens from the SatoApp Visual & Usability Reference (SatoColors.kt).
   Target: Galaxy Tab Active4 Pro, 1280×800 landscape, gloved hands.
   ============================================================ */
:root{
  --bar:#333333; --tabact:#1B5E20; --tabinact:#757575; --ground:#F5F5F0; --barlink:#81C784;
  --ok:#4CAF50; --warn:#FF9800; --fail:#F44336; --info:#1E88E5;
  --pA:#4CAF50; --pP:#FFC107; --pT:#F44336; --pR:#FF9800; --pHH:#81C784; --pHA:#66BB6A; --unmapped:#BDBDBD;
  --card:#FFFFFF; --cardline:#E2E7DC; --sub:#FAFAF7;
  --ink:#212121; --ink2:#424242; --grey:#757575; --grey2:#9E9E9E;
  --r:10px; --tap:56px; --tapmin:48px; --gap:12px;
  --body:"Roboto","Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"DejaVu Sans Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--ground);font-family:var(--body);color:var(--ink);
  -webkit-text-size-adjust:100%}
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:var(--tabact)}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.inline{display:inline}

/* ---------- band 1: app bar (52px) ---------- */
.appbar{flex:0 0 52px;background:var(--bar);color:#fff;display:flex;align-items:center;gap:14px;padding:0 14px}
.appbar .brand{font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap;color:#fff;text-decoration:none}
.appbar .brand em{font-style:normal;color:var(--barlink);font-weight:500}
.savechip{display:inline-flex;align-items:center;gap:7px;background:#414141;border-radius:14px;padding:5px 11px;
  font-family:var(--mono);font-size:11.5px;color:#E0E0E0;white-space:nowrap}
.savedot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 9px}
.savechip.saving .savedot{background:var(--warn);animation:pulse 1s ease-in-out infinite}
.savechip.offline .savedot{background:var(--fail)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.appbar .date{font-family:var(--mono);font-size:11.5px;color:#BDBDBD;white-space:nowrap}
.appbar .sp{flex:1}
.barlink{background:none;border:0;color:var(--barlink);font-size:13px;font-weight:600;padding:0 10px;min-height:44px;
  cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.barlink:focus-visible{outline:3px solid var(--info);outline-offset:-3px}
.rolebox{display:inline-flex;align-items:center;gap:8px;background:#414141;border-radius:14px;padding:5px 12px;white-space:nowrap}
.rolebox span{font-family:var(--mono);font-size:11px;color:#BDBDBD}
.rolebox b{font-size:12.5px;color:#fff;font-weight:600}

/* ---------- bands 2 + 3: tab rows (56px each) ---------- */
.tabrow{display:flex;flex:0 0 56px;background:var(--card);border-bottom:1px solid var(--cardline)}
.tabrow.support{background:var(--sub)}
.tab{flex:1;min-height:56px;background:none;border:0;border-bottom:3px solid transparent;font-size:14px;font-weight:600;
  color:var(--tabinact);cursor:pointer;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:6px;
  line-height:1.15;text-decoration:none;text-align:center}
.tab[aria-current="true"]{color:var(--tabact);border-bottom-color:var(--tabact);font-weight:700}
.tab.alert{color:var(--fail)}
.tab.alert[aria-current="true"]{border-bottom-color:var(--fail)}
.tab.off{color:var(--grey2)}
.tab:focus-visible{outline:3px solid var(--info);outline-offset:-3px}

/* ---------- ticker ribbon (36px) ---------- */
.ticker{flex:0 0 36px;display:flex;align-items:center;background:#2B2B2B;color:#EEEEEE;border-bottom:1px solid #1F1F1F;overflow:hidden}
.ticker .tk-lbl{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#BDBDBD;
  padding:0 12px;border-right:1px solid #4A4A4A;align-self:stretch;display:flex;align-items:center}
.tk-win{flex:1;overflow:hidden;position:relative;height:100%}
.tk-run{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:44px;white-space:nowrap;
  animation:tkroll 52s linear infinite;padding-left:16px}
.ticker.paused .tk-run{animation-play-state:paused}
@keyframes tkroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-item{font-size:13px;display:inline-flex;align-items:center;gap:8px;color:#EEEEEE;text-decoration:none}
.tk-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.tk-dot.err{background:var(--fail)} .tk-dot.warn{background:var(--warn)} .tk-dot.ok{background:var(--ok)} .tk-dot.info{background:var(--info)}
.tk-btn{flex:0 0 auto;min-width:52px;min-height:36px;background:none;border:0;border-left:1px solid #4A4A4A;color:#EEEEEE;font-size:12px;font-weight:700;cursor:pointer}
.tk-open{flex:0 0 auto;min-height:36px;background:none;border:0;border-left:1px solid #4A4A4A;color:var(--barlink);font-size:12px;
  font-weight:700;padding:0 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.tk-run{animation:none}}

/* ---------- band 4: content — the only band that scrolls ---------- */
.content{flex:1;overflow-y:auto;padding:12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
h1.sh{font-size:20px;font-weight:700;margin:0 0 3px}
p.sub{font-size:13.5px;color:var(--grey);margin:0 0 12px;line-height:1.5;max-width:78ch}
h2.bh{font-size:14px;font-weight:700;margin:18px 0 9px;letter-spacing:.01em}
h3.ch{font-size:14px;font-weight:700;margin:0 0 9px}

/* ---------- cards & readouts ---------- */
.card{background:var(--card);border:1px solid var(--cardline);border-radius:var(--r);padding:13px 14px;margin-bottom:12px}
.card.tight{margin:0}
.lbl{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.val{font-size:21px;font-weight:700;line-height:1.15;color:var(--tabact)}
.val.empty{color:var(--grey2)} .val.bad{color:var(--fail)} .val.warn{color:var(--warn)}
.val.md{font-size:16px} .val.sm{font-size:14px;font-weight:600;color:var(--ink)}
.val small{display:block;font-size:11.5px;font-weight:500;color:var(--grey);margin-top:4px}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.tiny{font-size:12px;line-height:1.5} .dim{color:var(--grey)}
.mono{font-family:var(--mono)}
.mt{margin-top:12px} .mb0{margin-bottom:0}
.maxw{max-width:760px}
.pre{white-space:pre-wrap;line-height:1.5;font-size:14px}

/* ---------- banners ---------- */
.banner{border-radius:var(--r);border-left:6px solid;padding:11px 13px;font-size:13.5px;line-height:1.5;margin-bottom:10px}
.banner b{display:block;margin-bottom:2px}
.banner.err{border-color:var(--fail);background:#FDECEA;color:#7F1D1B}
.banner.warn{border-color:var(--warn);background:#FFF4E5;color:#7A4A00}
.banner.ok{border-color:var(--ok);background:#EDF7ED;color:#1E4620}
.banner.info{border-color:var(--info);background:#E8F1FC;color:#0D3C6E}
.banner a{color:inherit;font-weight:700}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;height:27px;padding:0 11px;border-radius:14px;font-size:12px;font-weight:700;white-space:nowrap}
.chip.ok{background:rgba(76,175,80,.16);color:#2E7D32}
.chip.warn{background:rgba(255,152,0,.18);color:#8A4B00}
.chip.fail{background:rgba(244,67,54,.14);color:#B3261E}
.chip.info{background:rgba(30,136,229,.14);color:#0D47A1}
.chip.neu{background:rgba(117,117,117,.13);color:#4E4E4E}

/* ---------- buttons ---------- */
.btn{min-height:var(--tap);padding:0 20px;border-radius:var(--r);border:1.5px solid transparent;font-size:14.5px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2}
.btn.pri{background:var(--tabact);color:#fff}
.btn.ghost{background:var(--card);color:var(--tabact);border-color:var(--tabact)}
.btn.dest{background:var(--fail);color:#fff}
.btn.sm{min-height:var(--tapmin);font-size:13px;padding:0 14px}
.btn:disabled,.btn[aria-disabled="true"]{background:#E0E0E0;color:#9E9E9E;border-color:#E0E0E0;cursor:not-allowed;pointer-events:none}
.btn:focus-visible{outline:3px solid var(--info);outline-offset:2px}
.blockwhy{font-size:12.5px;color:var(--fail);font-weight:600;line-height:1.45}

/* ---------- forms ---------- */
.fg{margin-bottom:14px}
label.f,.fg > label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.inp{width:100%;min-height:var(--tap);padding:10px 12px;font-size:16px;font-family:var(--body);border:1.5px solid #CFD6CE;
  border-radius:var(--r);background:var(--card);color:var(--ink)}
.inp:focus{outline:3px solid var(--info);outline-offset:-1px;border-color:var(--info)}
.inp[disabled]{background:var(--sub);color:var(--grey)}
.inp.pin{max-width:240px;font-family:var(--mono);letter-spacing:.4em;font-size:22px}
.inp.pin::placeholder{letter-spacing:normal;font-size:16px;font-family:var(--body)}
textarea.inp{min-height:92px;line-height:1.5;resize:vertical}
select.inp{appearance:auto}
input[type="file"].inp{padding:14px 12px;font-size:14px}
.help{font-size:12px;color:var(--grey);margin-top:6px;line-height:1.45}
.errorlist{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;color:var(--fail);font-weight:600;line-height:1.45}
.errorlist.nonfield{margin:0 0 12px}
.fg.has-error .inp{border-color:var(--fail)}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg button,.seg .segopt{min-height:var(--tap);min-width:88px;flex:0 0 auto;padding:0 16px;background:var(--card);border:1.5px solid #CFD6CE;
  border-radius:var(--r);font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative}
.seg.fill button,.seg.fill .segopt{flex:1}
.seg .segopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg button[aria-pressed="true"],.seg .segopt:has(input:checked){background:var(--tabact);border-color:var(--tabact);color:#fff}
.seg .segopt.ok:has(input:checked){background:var(--ok);border-color:var(--ok)}
.seg .segopt.no:has(input:checked){background:var(--fail);border-color:var(--fail)}
.seg .segopt.obs:has(input:checked){background:var(--warn);border-color:var(--warn)}
.seg .segopt:has(input:focus-visible){outline:3px solid var(--info);outline-offset:2px}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.thumb{width:110px;height:80px;border:1.5px solid var(--cardline);border-radius:var(--r);background:var(--sub);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;padding:5px;font-family:var(--mono);font-size:10px;color:var(--grey);text-decoration:none;position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb span{position:relative;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- step wizard ---------- */
.stepbar{display:flex;gap:5px;margin-bottom:7px}
.stepbar span{flex:1;height:9px;border-radius:5px;background:#DDE3DA}
.stepbar span.done{background:var(--ok)} .stepbar span.cur{background:var(--tabact)}
.steplab{display:flex;gap:5px;margin-bottom:14px}
.steplab span{flex:1;text-align:center;font-size:11.5px;font-weight:600;color:var(--grey2)}
.steplab span.done{color:var(--ok)} .steplab span.cur{color:var(--tabact);font-weight:700}

/* ---------- checklist rows ---------- */
.chk{border:1px solid var(--cardline);background:var(--card);border-radius:var(--r);padding:12px 13px;margin-bottom:10px}
.chk .q{font-size:14px;font-weight:600;margin-bottom:2px}
.chk .a{font-size:12.5px;color:var(--grey);margin-bottom:10px;line-height:1.45}
.chk.bad{border-color:var(--fail);border-left:6px solid var(--fail)}
.chk .capabox{display:none;margin-top:11px;padding-top:11px;border-top:1px solid var(--cardline)}
.chk.bad .capabox{display:block}
.strip{display:inline-flex;gap:3px}
.strip i{display:inline-block;width:14px;height:14px;border-radius:3px;background:#E0E0E0}
.strip i.clear{background:var(--ok)} .strip i.detected{background:var(--fail)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--cardline);border-radius:var(--r);overflow:hidden;font-size:13.5px}
table.t th{background:var(--sub);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);
  text-align:left;padding:0 10px;border-bottom:1px solid var(--cardline);white-space:nowrap;height:46px;vertical-align:middle}
table.t td{padding:13px 10px;border-top:1px solid #EFF2EC;vertical-align:top;line-height:1.45}
table.t td.m,table.t th.m{font-family:var(--mono);font-size:12px;white-space:nowrap}
table.t caption{caption-side:bottom;text-align:left;font-size:12px;color:var(--grey);padding-top:8px;line-height:1.5}
table.t tr.rowlink{cursor:pointer}
table.t tr.rowlink:hover td{background:var(--sub)}
table.t a{color:var(--tabact);font-weight:600;text-decoration:none}
.sortbtn{background:none;border:0;padding:0 6px 0 0;min-height:46px;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sortbtn.on{color:var(--tabact)} .sortbtn i{font-style:normal;font-size:10px}
.swatch{display:inline-block;width:18px;height:18px;border-radius:5px;vertical-align:middle;margin-right:6px}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.tile{background:var(--card);border:1px solid var(--cardline);border-radius:var(--r);padding:14px;min-height:92px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink)}
.tile b{font-size:15px;font-weight:700}
.tile span{font-size:12.5px;color:var(--grey);line-height:1.4}
.tile .st{margin-top:auto;font-size:12px;font-weight:700;color:var(--tabact)}
.tile .st.bad{color:var(--fail)}
.tile:focus-visible{outline:3px solid var(--info);outline-offset:2px}

/* ---------- inner sub-tabs ---------- */
.subtabs{display:flex;gap:5px;border-bottom:1px solid var(--cardline);margin-bottom:14px;flex-wrap:wrap}
.subtab{min-height:var(--tap);padding:0 20px;background:none;border:0;border-bottom:3px solid transparent;font-size:14px;font-weight:600;color:var(--tabinact);
  cursor:pointer;margin-bottom:-1px;text-decoration:none;display:inline-flex;align-items:center}
.subtab[aria-selected="true"]{color:var(--tabact);border-bottom-color:var(--tabact);font-weight:700}
.subtab .n{font-family:var(--mono);font-size:11px;background:rgba(117,117,117,.13);color:#4E4E4E;border-radius:9px;padding:2px 7px;margin-left:7px}

/* ---------- agenda / lists ---------- */
.agrow{display:grid;grid-template-columns:34px 1fr;gap:12px;background:var(--card);border:1px solid var(--cardline);border-radius:var(--r);padding:12px 13px;margin-bottom:8px}
.agrow .no{font-family:var(--mono);font-size:12px;color:var(--grey);padding-top:2px}
.agrow .th{font-size:14px;font-weight:700}
.agrow .hint{font-size:12.5px;color:var(--grey);margin-top:3px;line-height:1.45}

/* ---------- trail ---------- */
.trail{list-style:none;margin:0;padding:0}
.trail li{display:grid;grid-template-columns:130px 130px 1fr;gap:10px;padding:8px 0;border-top:1px solid #EFF2EC;font-size:12.5px;line-height:1.45}
.trail li:first-child{border-top:0}
.trail .when{font-family:var(--mono);font-size:11.5px;color:var(--grey)}
.trail .who{font-weight:600}
.trail .chg{display:block;color:var(--grey);font-family:var(--mono);font-size:11px;margin-top:2px}

/* ---------- messages ---------- */
.msgs{margin-bottom:10px}

/* ---------- login / lock ---------- */
.centerbox{max-width:480px;margin:40px auto}
.centerbox h1{margin-bottom:6px}
.locknote{font-size:13px;color:var(--grey);line-height:1.5;margin:0 0 14px}

/* ---------- visitors: bilingual kiosk — Finnish first, English directly below ---------- */
.bi{display:inline-block;vertical-align:top}
.bi .fi,.bi .en{display:block}
.bi .en{font-weight:400;opacity:.82;font-size:.9em;margin-top:1px}
.btn .bi,.segopt .bi{text-align:center;line-height:1.2}
#checkin [hidden],.vk [hidden]{display:none!important}
.btn.vbig{min-height:64px;padding:6px 22px;font-size:16px}
.vk{max-width:920px}
.vk-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-bottom:10px}
.vactions{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 16px}
.vcardhead{margin-bottom:8px}
.vcardhead .ch,.vcardhead .sh{margin:0}
.vlead b{display:block;margin-bottom:6px}
.vsec{margin-bottom:14px}
.vh{display:flex;align-items:flex-start;gap:10px;font-size:17px;font-weight:700;margin:0 0 12px}
.vn{flex:0 0 30px;height:30px;border-radius:50%;background:var(--tabact);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.vlabel,.fg > label.vlabel{display:block;font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--ink);margin:0 0 6px;padding:0}
.vlabel .en{font-size:12.5px;font-weight:500;color:var(--grey);opacity:1}
fieldset.vfs,fieldset.vq{border:0;padding:0;margin:0 0 14px;min-width:0}
fieldset.vq{border-top:1px solid #EFF2EC;padding-top:12px}
.vqt{display:flex;gap:8px;font-size:15px;font-weight:600;line-height:1.45;margin-bottom:10px;padding:0}
.vqn{flex:0 0 auto;font-family:var(--mono);color:var(--grey)}
.vanswers .segopt{min-height:60px}
.vintro{font-size:14px;font-weight:600;margin:0 0 10px}
.vrules{margin:0 0 14px;padding-left:22px;font-size:14.5px;line-height:1.5}
.vrules li{margin-bottom:10px}
.vcontractor{border:1.5px dashed var(--warn);border-radius:var(--r);padding:10px 12px;margin:0 0 14px;font-size:14px;background:#FFF8EC}
.vcontractor b{display:block;margin-bottom:4px}
.vack{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid #CFD6CE;border-radius:var(--r);background:var(--card);cursor:pointer;font-size:14.5px;font-weight:600;line-height:1.45}
.vack input{width:28px;height:28px;flex:0 0 28px;margin:0;accent-color:var(--tabact)}
.vack:has(input:checked){border-color:var(--tabact);background:#EDF7ED}
.vack.ro{cursor:default}
.vack .vbox{width:24px;height:24px;flex:0 0 24px;border:2px solid var(--grey2);border-radius:4px}
.has-error .vack,.card.vsec.has-error{border-color:var(--fail)}
.verr{margin-top:6px;font-size:13px;color:var(--fail);font-weight:700;line-height:1.4}
.vmsg{margin-top:4px}
.vassist{margin-top:12px}
.vsubmit{margin-top:14px}
.firecard{border:3px solid var(--fail);background:#FFF9F8}
.firetitle{display:flex;gap:10px;align-items:flex-start;color:#B3261E;font-size:20px;font-weight:800;letter-spacing:.02em;margin:0 0 12px}
.firecard .vn{background:var(--fail)}
.firefacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0 0 14px}
.firefacts .wide{grid-column:1/-1}
.firefacts dt,.vfacts dt{font-size:12.5px;color:var(--grey);font-weight:600;margin-bottom:2px}
.firefacts dd{margin:0;font-size:15.5px;font-weight:700}
.firefacts dd.fire112{font-size:30px;color:#B3261E;font-family:var(--mono)}
.firekeep{font-weight:700;font-size:14.5px;margin:0 0 10px}
.firehost{font-size:13.5px;margin:0 0 12px}
.btn.vfirebtn{border-color:var(--fail);color:#B3261E}
.vdone b{font-size:18px}
.vsummary .vname{font-size:22px;font-weight:700;margin-bottom:8px}
.vconfirmq{font-size:15px;font-weight:600;margin:0 0 10px}
.vfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin:12px 0}
.vfacts dd{margin:0;font-size:15px;font-weight:600}
.vfacts.staff{grid-template-columns:repeat(2,minmax(0,1fr))}
.vspeak b{font-size:16px}
.chip.bichip{height:auto;padding:4px 11px;flex-direction:column;align-items:flex-start;line-height:1.2}
.chip.bichip .en{font-size:11px}
.vco{display:block;font-size:12.5px;color:var(--grey)}
.vcount td{font-size:15px}
.vpreview{max-width:none;margin-top:10px}
@media (max-width:640px){
  .firefacts,.vfacts,.vfacts.staff{grid-template-columns:1fr}
  .vactions .btn{flex:1 1 100%}
  .vanswers .segopt{min-width:0;padding:0 8px}
}
@media print{
  body:has(.vheadcount) .appbar,body:has(.vheadcount) .tabrow,body:has(.vheadcount) .ticker,.noprint{display:none!important}
  body:has(.vheadcount) .app{height:auto;overflow:visible}
  body:has(.vheadcount) .content{overflow:visible}
}

/* ---------- portrait 800×1280 ---------- */
@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .hidep{display:none}
  .tab{font-size:13.5px}
  .appbar .date{display:none}
}
@media (max-width:640px){
  .g2,.g3,.g4,.tiles{grid-template-columns:1fr}
  .tab{font-size:12.5px;padding:0 3px}
  .trail li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}