/* Section A: colours and sizes. Every light value has a dark counterpart below it. */
:root{
  --bg:#eeedf3;--panel:#ffffff;--text:#08090c;--sub:#676970;--accent:#083e9b;--border:#d5d5de;
  --control:#e2e3ec;--btn:#ffffff;--btn-in:#eceef5;--press:#dcdce1;--del:#c62828;
  --hrgb:238,237,243;--ha:.8;--nav:rgba(255,255,255,.8);--fs:18px;--gap:5.5px;
  --btn-shadow:0 1px 2px rgba(0,0,0,.06);--acc-bg:#083e9b;--acc-press:#062e75;--link:#083e9b;
  --ctl-h:max(46px,calc(var(--fs)*2.55));
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308090c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --chev2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%2308090c' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='56 96 128 24 200 96'/%3E%3Cpolyline points='56 160 128 232 200 160'/%3E%3C/svg%3E");
  color-scheme:light;
}
html[data-theme=dark]{
  --bg:#000000;--panel:#000000;--text:#ffffff;--sub:#bfbfbf;--accent:#ffffff;--border:#262626;
  --control:#1e1e1e;--btn:#2a2a2d;--btn-in:#2a2a2d;--press:#333336;--del:#ff6a5f;
  --hrgb:0,0,0;--ha:.72;--nav:rgba(0,0,0,.72);--btn-shadow:none;--acc-bg:#1f4fb5;--acc-press:#173f93;--link:#4c8df0;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --chev2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23ffffff' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='56 96 128 24 200 96'/%3E%3Cpolyline points='56 160 128 232 200 160'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* Section B: page, top bar, bottom bar, cards */
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs)}
html,body{margin:0;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body{font:1rem/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior-y:none}
button,input,select{font:inherit}
button{cursor:pointer}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#top{position:fixed;top:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:76px minmax(0,1fr) 76px;align-items:center;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;min-height:calc(env(safe-area-inset-top) + 68px);
  background:rgba(var(--hrgb),var(--ha));-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
#top h1{margin:0;font-size:1.55rem;font-weight:700;text-align:center;letter-spacing:-.02em}
#top .side.right{text-align:right}
.gear{width:58px;height:58px;border:0;background:transparent;color:var(--accent);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.gear .ic,.gear svg{width:40px;height:40px}

#app{max-width:540px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 76px) var(--gap) calc(env(safe-area-inset-bottom) + 96px)}
.card,.row{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;margin:0 0 10px}
html:not([data-theme=dark]) .card,html:not([data-theme=dark]) .row{border-color:transparent}

#bar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  max-width:540px;margin:0 auto;padding:10px 10px calc(env(safe-area-inset-bottom) + 10px);background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
html[data-theme=dark] #bar{border-top:1px solid #1c1c1c}

.ic{display:inline-flex;width:1.1rem;height:1.1rem;flex:none}
.ic svg{width:100%;height:100%}

/* Section C: labels, text boxes, drop-down arrows, buttons */
label{display:block;margin:0 0 6px;font-size:.86rem;line-height:1.2;font-weight:600}
.lrow{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;min-height:1.03rem}
.lrow label{margin:0}
.link{border:0;background:none;color:var(--link);font-size:.86rem;line-height:1.2;font-weight:600;padding:0 2px}
.field{margin:0;min-width:0}
.ctr label{text-align:center}

input,select{width:100%;height:var(--ctl-h);min-height:46px;padding:0 14px;font-size:max(16px,1em);color:var(--text);background:var(--control);
  border:1px solid transparent;border-radius:12px;outline:none;min-width:0;appearance:none;-webkit-appearance:none}
input:focus,select:focus{border-color:var(--accent)}
input.c{text-align:center;padding:0 4px}
select{padding-right:44px;background-repeat:no-repeat;background-position:right 14px center;background-size:16px 22px;background-image:var(--chev2)}

/* the drop-down arrow on name boxes: our own, big, and the whole right end is the tap area */
input[list]{position:relative;padding-right:52px;background-repeat:no-repeat;background-position:right 12px center;background-size:26px 26px;background-image:var(--chev)}
input[list]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;width:52px;height:100%;padding:0;margin:0;cursor:pointer}

/* date shown the way it is on a form: 10/28/2026 */
.datebox{gap:8px;position:relative;height:var(--ctl-h);min-height:46px;background:var(--control);border:1px solid transparent;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.datebox:focus-within{border-color:var(--accent)}
.datebox .ic{color:var(--sub)}
.datebox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}

/* inmate count: small  -  [ 12 ]  +  */
.stepper{display:grid;grid-template-columns:var(--ctl-h) 3.4rem var(--ctl-h);gap:6px;align-items:center}
.stepper .btn.icon{width:var(--ctl-h);height:var(--ctl-h);background-color:var(--btn-in)}
.stepper input{padding:0;text-align:center;font-weight:700}

.btn{height:var(--ctl-h);min-height:46px;padding:0 14px;font-size:1rem;font-weight:600;color:var(--text);background:var(--btn);border:1px solid transparent;border-radius:12px;
  box-shadow:var(--btn-shadow);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background-color .35s ease}
.btn:active{background-color:var(--press)!important;transition:none}
.btn.full{display:flex;width:100%}
.btn.accent{background:var(--acc-bg);color:#fff}
.btn.accent:active{background-color:var(--acc-press)!important}
.btn.danger{color:var(--del)}
.btn.icon{width:var(--ctl-h);padding:0;flex:none}
html:not([data-theme=dark]) .card .btn:not(.accent),html:not([data-theme=dark]) .row .btn:not(.accent){background-color:var(--btn-in);box-shadow:none}

input[type=range]{appearance:auto;-webkit-appearance:auto;height:30px;min-height:0;padding:0;background:transparent;border:0;border-radius:0}
input[type=range]:focus{border-color:transparent}

/* Section D: the sheet screen - top card and inmate rows */
.hd{display:grid;gap:10px 10px}
.hd .r1{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.hd .r1>.field:first-child{flex:1 1 190px}
.hd .r1>.field:last-child{flex:0 0 auto}
.hd .r2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px;align-items:start}

.row{scroll-margin-top:96px;scroll-margin-bottom:130px}
.row .top{display:flex;align-items:center;justify-content:space-between;min-height:1.6rem;margin:0 0 6px}
.row .top label{margin:0}
.row .del{width:2.2rem;height:2.2rem;min-height:0;border:0;background:transparent;box-shadow:none;border-radius:10px;color:var(--del);display:inline-flex;align-items:center;justify-content:center;padding:0;margin:-4px -4px -4px 0}
.row .del:active{background:var(--press)}
.row .field{margin:0 0 10px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.g3 .field{margin:0}

/* Section E: motion - the same feel as EquipKeep (press colour, pulse, fades) */
@keyframes plusPulse{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.pulse{animation:plusPulse .33s ease-out}
.gear,#bar .btn,.stepper .btn,.row .del,.link{transition:transform .12s ease,opacity .12s ease,background-color .35s ease}
.gear:active,#bar .btn:active,.stepper .btn:active,.row .del:active{transform:scale(.93);opacity:.55;transition:none}
.gear:active{background:var(--press)}
.link:active{opacity:.5;transition:none}
.ic{transform-origin:center}

.ov{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.ov.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
.box{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:16px;width:100%;max-width:340px;max-height:100%;overflow:auto;
  transform:translateY(14px) scale(.96);transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.ov.on .box{transform:none}
html:not([data-theme=dark]) .box{background:#fff;border-color:transparent}
html:not([data-theme=dark]) .box .btn,html:not([data-theme=dark]) .box select{background-color:var(--btn-in);box-shadow:none}
html:not([data-theme=dark]) .box .btn.accent{background-color:var(--acc-bg)}
.box h2{margin:0 0 10px;font-size:1.2rem}
.box p{margin:0 0 14px;color:var(--sub);font-size:.92rem;line-height:1.4}
.box .acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.box .field{margin-bottom:14px}
.box p.ver{margin:12px 0 0;text-align:center;font-size:.8rem}

/* text size (Settings) */
.sizerow{display:flex;align-items:center;gap:12px;color:var(--sub)}
.sizerow .a1{font-size:15px;font-weight:700}.sizerow .a2{font-size:24px;font-weight:700}
.slider{flex:1;width:100%;accent-color:var(--accent);height:30px;margin:0}
.sample{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--control);color:var(--text);font-size:var(--fs);line-height:1.3}

@media (prefers-reduced-motion:reduce){.pulse{animation:none}.ov,.box{transition:none}}

/* Section F: the paper copy (desktop Print) */
#print{display:none}
@page{size:letter portrait;margin:0.4in 0.25in 0.5in}
@media print{
  html,body{background:#fff}
  body>*:not(#print){display:none!important}
  #print{display:block;color:#000}
  .ps{width:100%;border-collapse:collapse;table-layout:fixed;font-family:"Arial Narrow",Arial,Helvetica,sans-serif;font-weight:700;color:#000}
  .ps td{padding:0 3px;text-align:center;overflow:hidden;white-space:nowrap;vertical-align:middle}
  .ps td.l{text-align:left}
  .ps td.r{text-align:right}
  .ps tr.pt{height:0.29in}
  .ps tr.ph td,.ps tr.pd td{border:0.75pt solid #000}
  .ps tr.ph{height:0.29in;font-size:10pt}
  .ps tr.pd{height:0.226in;font-size:10pt}
  .ps tr.pt:nth-child(4) td{border-bottom:0.75pt solid #000}
}