/* Case Diary, in the PrepPage design system (light theme).
   Colours, radii and shadows are PrepPage tokens. Text sizes sit one step above
   PrepPage's defaults, because this app is read by an older person on a phone.
   Everything hangs off one 16px gutter, so left and right edges line up on every screen. */
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:light;
  --page:#FAFAFC;--card:#FFFFFF;--sunken:#F3F3F7;--track:#EFEFF4;--hover:#F1F1F6;
  --line:#EAEAF1;--line-soft:#EDEDF3;--line-strong:#E7E7F0;--line-control:#C9CAD6;
  --ink:#1D1E2C;--ink-2:#2A2B38;--ink-3:#3A3C4C;--ink-muted:#4A4C5E;--ink-soft:#4F5264;--ink-faint:#62657A;
  --on-accent:#FFFFFF;
  --gold:#B4790F;--gold-press:#A26C0B;--gold-ink:#8A5E12;--gold-deep:#6E4703;--gold-tint:#FBF0DA;--gold-line:#F0DCAE;--gold-line-hover:#E4CFA2;
  --gold-on-inverse:#F0C16E;
  --green:#2C8E74;--green-ink:#1E6B58;--green-tint:#E4F6F0;--green-line:#BFE5D9;
  --coral-ink:#A3503F;--coral-tint:#FFF1EC;--coral-line:#EBC9BE;
  --red-ink:#A8392A;--red-tint:#FBEAE7;
  --inverse:#1D1E2C;
  --radius-task:14px;--radius-row:16px;--radius-card:22px;--radius-sheet:28px;--radius-pill:100px;
  --shadow-card:0 30px 60px -48px rgba(29,30,44,.35);
  --shadow-raised:0 16px 30px -20px rgba(29,30,44,.4);
  --shadow-dialog:0 40px 80px -30px rgba(29,30,44,.5);
  --shadow-cta:0 14px 28px -14px rgba(180,121,15,.65);
  --pp-spring:linear(0,.0175 2.2%,.0616 4.3%,.1219 6.5%,.1912 8.7%,.2642 10.8%,.3374 13%,.4253 15.7%,.5068 18.4%,.594 21.7%,.6805 25.5%,.7603 29.8%,.8288 34.7%,.8838 40.1%,.9281 46.6%,.9596 54.2%,.9811 63.9%,.9927 75.8%,1);
  --font-sans:"Hanken Grotesk",system-ui,sans-serif;
  --gutter:1rem;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--page);color:var(--ink);font-family:var(--font-sans);font-size:1rem;line-height:1.4;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-tint);color:var(--ink)}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- top of the main screen ---------- */
#app{height:100dvh;display:flex;flex-direction:column;max-width:40rem;margin:auto;position:relative;background:var(--page)}
.top{flex:none;background:var(--card);border-bottom:1px solid var(--line-soft);padding-top:env(safe-area-inset-top)}
.bar{display:flex;align-items:center;gap:.125rem;height:3.5rem;padding:0 .5rem 0 var(--gutter)}
.month-btn{display:inline-flex;align-items:center;gap:.25rem;height:2.75rem;margin-right:auto;font-size:1.25rem;font-weight:700;letter-spacing:-.025em;border-radius:var(--radius-task)}
.month-btn svg{color:var(--ink-faint)}
.today-btn{height:2.25rem;padding:0 .95rem;margin-right:.25rem;background:var(--card);border:1px solid var(--line-control);border-radius:var(--radius-pill);font-size:.875rem;font-weight:700;color:var(--ink);transition:transform .3s var(--pp-spring)}
.today-btn:active{transform:scale(.97);background:var(--hover)}
.icon-btn{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;color:var(--ink-muted);flex:none}
.icon-btn:active{background:var(--hover)}

/* the week, with how many cases each day holds */
.week{display:grid;grid-template-columns:repeat(7,1fr);padding:0 .5rem .5rem;touch-action:pan-y}
.day{display:flex;flex-direction:column;align-items:center;padding:.125rem 0;border-radius:var(--radius-task)}
.day-name{font-size:.75rem;font-weight:600;color:var(--ink-faint);line-height:1.2}
.day-num{width:2.5rem;height:2.5rem;margin-top:.2rem;display:grid;place-items:center;border-radius:50%;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.day:active .day-num{background:var(--hover)}
.day-count{height:.875rem;margin-top:.1rem;font-size:.6875rem;line-height:.875rem;font-weight:800;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.day.sun .day-name,.day.sun .day-num{color:var(--red-ink)}
.day.today .day-num{box-shadow:inset 0 0 0 1.5px var(--line-control);font-weight:800}
.day.sel .day-num{background:var(--ink);color:var(--card);font-weight:700;box-shadow:none}

/* the date being looked at */
.day-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem var(--gutter) .625rem}
.day-title{min-width:0}
.day-title h1{font-size:1.375rem;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.day-title p{margin-top:.125rem;font-size:.9375rem;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.day-title p.all{color:var(--green-ink);font-weight:600}
.day-arrows{display:flex;gap:.375rem;flex:none}
.arrow{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:var(--card);border:1px solid var(--line-strong);color:var(--ink);transition:transform .3s var(--pp-spring)}
.arrow:active{transform:scale(.94);background:var(--hover)}

/* ---------- the list ---------- */
#scroller{flex:1;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain}
#page{min-height:100%;padding:0 var(--gutter) 6.5rem;display:flex;flex-direction:column;gap:.625rem}
.court-head{margin:.5rem 0 -.125rem;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);line-height:1.3;overflow-wrap:anywhere}
.court-head:first-child{margin-top:0}

/* a case */
.case{display:block;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-row);overflow:hidden}
.case-main{position:relative;display:block;width:100%;padding:.8125rem 2.5rem .75rem .9375rem}
.case-main:active{background:var(--hover)}
.case-more{position:absolute;top:.625rem;right:.5rem;color:var(--ink-faint)}
.case-court{display:block;font-size:.8125rem;font-weight:700;color:var(--ink-soft);margin-bottom:.125rem;overflow-wrap:anywhere}
.case-title{display:block;font-size:1.125rem;font-weight:700;letter-spacing:-.018em;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.case-title i{font-style:normal;font-weight:500;font-size:.9375rem;letter-spacing:0;color:var(--ink-faint);padding:0 .1em}
.case-meta{display:block;margin-top:.1875rem;font-size:.9375rem;line-height:1.35;color:var(--ink-muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:3.25rem;padding:.3125rem .4375rem .3125rem .9375rem;border-top:1px solid var(--line-soft)}
.case-last{font-size:.875rem;color:var(--ink-faint);white-space:nowrap}
.case-last b{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.next-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:2.625rem;padding:0 .875rem;border:1px solid transparent;border-radius:var(--radius-pill);font-size:.9375rem;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;transition:transform .3s var(--pp-spring)}
.next-btn:active{transform:scale(.97)}
.next-btn.set{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold-deep)}
.next-btn.has{background:var(--green-tint);border-color:var(--green-line);color:var(--green-ink)}
.next-btn.has span{font-weight:600}
.next-text{padding-right:.5rem;font-size:.875rem;font-weight:700;color:var(--ink-faint);white-space:nowrap}
.next-text.has{color:var(--green-ink)}
.case.closed .case-title,.case.closed .case-meta{color:var(--ink-faint)}

/* notes above the list */
.notice{display:flex;align-items:center;gap:.625rem;width:100%;padding:.6875rem .875rem;background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:var(--radius-row);color:var(--gold-deep);font-weight:600;line-height:1.3}
.notice>svg{color:var(--gold-ink)}
.notice>span{flex:1;min-width:0}
.notice b{font-weight:800;white-space:nowrap}
.notice.alert{background:var(--coral-tint);border-color:var(--coral-line);color:var(--coral-ink)}
.notice.alert>svg{color:var(--coral-ink)}
.notice-wrap{display:flex;align-items:stretch;background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:var(--radius-row)}
.notice-wrap .notice{border:0;background:none;flex:1;min-width:0}
.notice-x{flex:none;width:2.75rem;display:grid;place-items:center;color:var(--gold-ink)}

.empty{display:flex;flex-direction:column;align-items:center;padding:2.75rem 1rem 1rem;text-align:center}
.empty-icon{width:3.5rem;height:3.5rem;display:grid;place-items:center;border-radius:50%;background:var(--sunken);color:var(--ink-faint);margin-bottom:.875rem}
.empty h2{font-weight:700;font-size:1.1875rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:.25rem}
.empty p{color:var(--ink-muted)}
.empty .btn{margin-top:1.125rem;padding-inline:1.25rem;width:auto}
.backup-line{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;align-self:center;padding:.625rem .75rem;color:var(--ink-faint);font-size:.875rem;font-weight:500}
.backup-line.ok{color:var(--green-ink)}

.fab-wrap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:2.5rem 0 calc(1rem + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--page) 45%,rgba(250,250,252,0));pointer-events:none}
.fab{pointer-events:auto;display:flex;align-items:center;gap:.5rem;height:3.5rem;padding:0 1.75rem 0 1.375rem;border-radius:var(--radius-pill);background:var(--gold);color:var(--on-accent);font-size:1.125rem;font-weight:700;box-shadow:var(--shadow-cta);white-space:nowrap;transition:transform .45s var(--pp-spring),background .4s var(--pp-spring)}
.fab:active{background:var(--gold-press);transform:scale(.98)}

/* ---------- layers (sheets + full screens) ---------- */
.layer{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.scrim{position:absolute;inset:0;background:rgba(29,30,44,.42);animation:fade .2s ease-out}
.panel{position:relative;width:100%;max-width:40rem;display:flex;flex-direction:column;animation:panelIn .38s var(--pp-spring)}
.sheet .panel{background:var(--card);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;max-height:94dvh;padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--shadow-dialog);overflow:hidden}
.layer.full{top:var(--vvt,0);bottom:auto;height:var(--vvh,100dvh)}
.full .panel{height:100%;padding-top:env(safe-area-inset-top);background:var(--page)}
.layer.leaving .panel{animation:sink .16s ease-in forwards}
.layer.leaving .scrim{animation:fadeout .16s ease-in forwards}
@keyframes fade{from{opacity:0}}
@keyframes fadeout{to{opacity:0}}
@keyframes panelIn{from{transform:translateY(16px) scale(.98);opacity:0}}
@keyframes sink{to{transform:translateY(20px);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.sheet-x{position:absolute;top:.75rem;right:.75rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;background:var(--sunken);color:var(--ink-faint);z-index:1}
.sheet-x:active{background:var(--track)}
.sheet-head{padding:1.25rem 3.75rem .75rem 1.25rem}
.sheet-title{font-size:1.3125rem;color:var(--ink);font-weight:700;letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere}
.sheet-sub{margin-top:.25rem;color:var(--ink-muted);line-height:1.35;overflow-wrap:anywhere}
.sheet-scroll{overflow-y:auto;overscroll-behavior:contain}
.full-head{display:flex;align-items:center;gap:.25rem;min-height:3.5rem;padding:.25rem .5rem;background:var(--card);border-bottom:1px solid var(--line-soft);flex:none}
.full-head h2{font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0}
.head-date{display:inline-flex;align-items:center;gap:.25rem;height:2.5rem;padding:0 .625rem 0 .875rem;margin-right:.25rem;background:var(--sunken);border-radius:var(--radius-pill);font-size:.9375rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.head-date svg{color:var(--ink-faint)}
.full-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.full-body.typing{padding-bottom:70vh}
.list-body{padding:.875rem var(--gutter) 2rem;display:flex;flex-direction:column;gap:.625rem}
.list-body>*,#page>*{flex:none}

/* lists of choices: court, details, menu */
.options{padding:0 0 .75rem}
.option{display:flex;align-items:center;gap:.875rem;width:100%;min-height:3.25rem;padding:.5rem 1.25rem;font-size:1.0625rem;font-weight:600;color:var(--ink)}
.option+.option{box-shadow:inset 0 1px 0 var(--line-soft)}
.option:active{background:var(--hover)}
.option>svg{color:var(--ink-faint)}
.option span{flex:1;min-width:0;overflow-wrap:anywhere}
.option small{display:block;margin-top:.0625rem;font-size:.9375rem;font-weight:400;color:var(--ink-muted);line-height:1.3}
.option .tick{color:var(--gold-ink)}
.option.sel{color:var(--gold-deep)}
.option.quiet{color:var(--ink-muted)}
.option.danger,.option.danger>svg{color:var(--red-ink)}

/* calendar */
.cal{padding:.25rem .75rem .5rem}
.cal-head{display:flex;align-items:center;justify-content:space-between}
.cal-title{flex:1;text-align:center;font-size:1.125rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:.7rem;border-radius:var(--radius-task)}
button.cal-title:active{background:var(--hover)}
.cal-arrow{width:3rem;height:3rem;display:grid;place-items:center;color:var(--ink);border-radius:50%}
.cal-arrow:active{background:var(--hover)}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-week span{text-align:center;font-size:.8125rem;font-weight:600;color:var(--ink-faint);padding:.25rem 0}
.cal-week span:first-child{color:var(--red-ink)}
.cal-day{height:3.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.0625rem;border-radius:var(--radius-task);font-size:1.0625rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cal-day:active{background:var(--gold-tint)}
.cal-day small{height:.75rem;font-size:.6875rem;line-height:.75rem;font-weight:800;color:var(--gold-ink)}
.cal-day.sun{color:var(--red-ink)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--line-control)}
.cal-day.sel{background:var(--gold);color:var(--on-accent);font-weight:800;box-shadow:none}
.cal-day.sel small{color:var(--on-accent)}
.cal-day:disabled{color:var(--line-control);cursor:default;background:none}
.cal-day:disabled small{color:var(--line-control)}
.cal-months{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem;padding:.25rem 0 .5rem}
.cal-month{padding:1rem 0;text-align:center;border-radius:var(--radius-pill);font-weight:700}
.cal-month:active{background:var(--hover)}
.cal-month.sel{background:var(--gold);color:var(--on-accent)}
.cal-note{padding:0 1.25rem .875rem;text-align:center;font-size:.8125rem;color:var(--ink-faint)}
.cal-foot{padding:0 1.25rem .875rem;display:flex;justify-content:center}
.link{display:inline-block;color:var(--red-ink);font-weight:700;padding:.7rem 1rem;text-align:center;border-radius:var(--radius-pill)}
.link.plain{color:var(--ink-muted)}
.link:active{background:var(--hover)}

/* case details */
.detail-head{padding:1.25rem 3.75rem .25rem 1.25rem}
.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);line-height:1.3;overflow-wrap:anywhere}
.detail-title{margin-top:.375rem;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.18;color:var(--ink);overflow-wrap:anywhere}
.detail-title i{font-style:normal;font-weight:500;font-size:1.0625rem;letter-spacing:0;color:var(--ink-faint);padding:0 .08em}
.detail-meta{margin-top:.375rem;color:var(--ink-muted);line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.detail-dates{padding:.875rem 1.25rem .875rem}
.d-label{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.date-chips{display:flex;flex-wrap:wrap;gap:.375rem}
.date-chip{display:inline-flex;align-items:center;gap:.25rem;min-height:2.5rem;padding:0 .8125rem;border-radius:var(--radius-pill);background:var(--sunken);border:1px solid transparent;color:var(--ink-3);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.date-chip.here{background:var(--card);border-color:var(--ink);color:var(--ink);font-weight:700}
.date-chip.next{background:var(--green-tint);border-color:var(--green-line);color:var(--green-ink);font-weight:700}
.finished-tag{display:inline-flex;margin-top:.5rem;padding:.25rem .625rem;border-radius:var(--radius-pill);background:var(--sunken);font-size:.8125rem;font-weight:700;color:var(--ink-soft)}
.detail-acts{border-top:1px solid var(--line-soft);padding:.25rem 0 .5rem}

.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;padding:.875rem 1.25rem 1.25rem}
.btn{display:block;width:100%;padding:.9375rem .75rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);text-align:center;font-weight:700;background:var(--card);color:var(--ink);transition:transform .45s var(--pp-spring),background .4s var(--pp-spring)}
.btn:active{transform:scale(.98);background:var(--hover)}
.btn.main{background:var(--gold);border-color:transparent;color:var(--on-accent);box-shadow:var(--shadow-cta)}
.btn.main:active{background:var(--gold-press)}
.btn.main:disabled{opacity:.6}
.btn.danger{background:var(--red-ink);border-color:transparent;color:var(--on-accent)}

/* form */
.form{padding:1rem var(--gutter) 1.25rem}
.field{margin-bottom:1rem}
.field>label,.f-label{display:block;font-weight:700;font-size:.9375rem;color:var(--ink);margin-bottom:.375rem}
.f-label small,.field>label small{font-weight:500;color:var(--ink-faint);font-size:.875rem}
.input{display:block;width:100%;height:3.25rem;padding:0 .9375rem;background:var(--card);border:1.5px solid var(--line-control);border-radius:var(--radius-task);font-size:1.125rem;color:var(--ink);outline:0;min-width:0}
.input::placeholder{color:#A9ABBA;opacity:1}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.case-no{display:grid;grid-template-columns:1fr auto 5.25rem;align-items:center;gap:.5rem}
.case-no span{color:var(--ink-faint);font-weight:600}
.vs{color:var(--ink-faint);font-weight:600;font-size:.9375rem;text-align:center;padding:.25rem 0}
.select-field,.date-field{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;height:3.25rem;padding:0 .75rem 0 .9375rem;background:var(--card);border:1.5px solid var(--line-control);border-radius:var(--radius-task);font-size:1.0625rem;font-weight:600;color:var(--ink);text-align:left}
.select-field span,.date-field span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-field:active,.date-field:active{background:var(--hover)}
.select-field svg,.date-field svg{color:var(--ink-faint)}
.select-field.blank,.date-field.blank{color:var(--ink-faint);font-weight:500}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.two .field{min-width:0}
.two .date-field{font-size:1rem}
.chip-x{color:var(--red-ink);font-size:1.125rem;line-height:1;padding:.5rem .25rem .5rem .5rem;margin:-.3rem -.5rem -.3rem 0}
.text-link{display:inline-block;margin-top:.25rem;padding:.5rem 0;color:var(--gold-ink);font-weight:700;font-size:.9375rem}
.save-bar{flex:none;padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line-soft)}
.save-bar .btn{height:3.125rem;padding:0;font-size:1.0625rem;box-shadow:none}
.form-err{color:var(--red-ink);background:var(--red-tint);padding:.6875rem .9375rem;border-radius:var(--radius-task);font-weight:600;margin:0 0 .875rem}

/* suggestions learned from his own entries */
.suggest{margin-top:.375rem;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-task);overflow:hidden;box-shadow:var(--shadow-raised)}
.suggest button{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.875rem;padding:.4375rem .875rem;font-size:1.0625rem;color:var(--ink-muted)}
.suggest button+button{border-top:1px solid var(--line-soft)}
.suggest button:active{background:var(--gold-tint)}
.suggest svg{color:var(--line-control)}
.suggest span{min-width:0;overflow-wrap:anywhere}
.suggest b{font-weight:700;color:var(--ink)}
.dup-note{display:flex;align-items:center;justify-content:space-between;gap:.625rem;margin-top:.5rem;width:100%;padding:.625rem .875rem;background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:var(--radius-task);color:var(--gold-deep);font-size:.9375rem;font-weight:600;line-height:1.3;text-align:left}
.dup-note b{font-weight:800;white-space:nowrap}

/* online backup and reminders */
.prose{padding:1.125rem var(--gutter) 2rem;color:var(--ink-3);line-height:1.5}
.prose p{margin-bottom:.875rem}
.prose .btn{margin-top:.25rem}
.small-note{font-size:.9375rem;color:var(--ink-muted)}
.step{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:1.25rem 0 .5rem}
.status-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-row);padding:.9375rem 1rem;margin-bottom:1rem;font-weight:700}
.status-card.ok{background:var(--green-tint);border-color:var(--green-line);color:var(--green-ink)}
.status-card.alert{background:var(--coral-tint);border-color:var(--coral-line);color:var(--coral-ink)}
.status-card.wait{background:var(--gold-tint);border-color:var(--gold-line);color:var(--gold-deep)}
.status-card span{display:block;font-weight:500;margin-top:.125rem;line-height:1.4}
.centered{text-align:center;margin-top:.75rem}

/* search */
.search-box{flex:1;height:2.75rem;border:0;border-radius:var(--radius-pill);padding:0 1.0625rem;background:var(--sunken);color:var(--ink);font-size:1.0625rem;min-width:0;margin-right:.5rem;outline:0;-webkit-appearance:none}
.search-box:focus{box-shadow:0 0 0 2px var(--gold)}
.search-box::-webkit-search-cancel-button{filter:grayscale(1) opacity(.7)}
.hint{padding:3rem 1.5rem;text-align:center;color:var(--ink-muted)}
.result .case-foot{min-height:0;padding:.5625rem .9375rem;display:block;font-size:.875rem;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.result .case-foot.has{color:var(--green-ink)}
.result:active{background:var(--hover)}

/* message at the bottom */
#toast{position:fixed;left:50%;bottom:calc(5.25rem + env(safe-area-inset-bottom));translate:-50% 0;width:calc(100% - 2rem);max-width:30rem;background:var(--inverse);color:var(--card);border-radius:var(--radius-row);padding:.3125rem .375rem .3125rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:3.25rem;z-index:50;font-weight:500;animation:panelIn .32s var(--pp-spring);box-shadow:var(--shadow-raised)}
#toast button{color:var(--gold-on-inverse);font-weight:800;padding:.625rem .75rem;flex:none}