/* Reimburse — clean single-typeface (Inter) theme, light + dark */
:root{
  --paper:#F3F5EF; --surface:#FFFFFF; --ink:#17241E; --soft:#4C5A52; --mute:#8A968D;
  --line:#DDE1D7; --row:#EEF0EA; --field-bd:#C7CEBF;
  --pine:#23604B; --pine-d:#1A4A39; --ptint:#E4EDE7; --ptint-bd:#CDE0D4;
  --brass:#9C6516; --btint:#F4EAD8; --btint-bd:#E6D3A8; --danger:#B23A3A;
  --shadow:0 6px 16px rgba(26,74,57,.35);
  --navshadow:0 8px 28px rgba(16,30,24,.14),0 1px 3px rgba(16,30,24,.08);
}
:root[data-theme="dark"]{
  --paper:#101613; --surface:#18211D; --ink:#EAF0EC; --soft:#A9B6AE; --mute:#7F8C84;
  --line:#26312B; --row:#20291F; --field-bd:#33413A;
  --pine:#57C79E; --pine-d:#8FE0C0; --ptint:#1C2A24; --ptint-bd:#294036;
  --brass:#E3A951; --btint:#2A2417; --btint-bd:#44381F; --danger:#E5807C;
  --navshadow:0 10px 30px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101613; --surface:#18211D; --ink:#EAF0EC; --soft:#A9B6AE; --mute:#7F8C84;
    --line:#26312B; --row:#20291F; --field-bd:#33413A;
    --pine:#57C79E; --pine-d:#8FE0C0; --ptint:#1C2A24; --ptint-bd:#294036;
    --brass:#E3A951; --btint:#2A2417; --btint-bd:#44381F; --danger:#E5807C;
  --navshadow:0 10px 30px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.app{max-width:480px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative}
.amt{font-variant-numeric:tabular-nums}
.cap{color:var(--soft)}
.mute{color:var(--mute)}
.hero{font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1.02}

header.top{padding:16px 20px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wordmark{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--pine-d)}
.screen-title{font-size:22px;font-weight:800;letter-spacing:-.03em}
.pushhead{padding:12px 8px 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)}
.iconbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--ink);background:none;border:none;cursor:pointer;border-radius:10px}
/* min-height:0 or the flex item refuses to shrink, the shell grows past the
   viewport, and the whole page scrolls — taking the header under the iOS
   status bar, where it picks up the system's scroll-edge fade. */
main{flex:1;min-height:0;overflow:auto;padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.pad{padding:16px}
.mx{margin:0 20px}
.mb{margin-bottom:12px}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--row)}
.row:first-child{border-top:0}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600}
.chip.brass{background:var(--btint);color:var(--brass);border:1px solid var(--btint-bd)}
.chip.pine{background:var(--ptint);color:var(--pine-d);border:1px solid var(--ptint-bd)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:14px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;width:100%}
.btn.primary{background:var(--pine);color:#fff}
.btn.outline{background:var(--surface);color:var(--ink);border-color:var(--field-bd)}
.btn.danger{background:none;color:var(--danger);border:none;justify-content:flex-start}

label.fld{display:block;font-size:13px;font-weight:600;color:var(--soft);margin:0 0 6px}
input,select,textarea{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--field-bd);background:var(--surface);
  color:var(--ink);border-radius:12px;padding:13px 14px;font-weight:500;
  /* Exactly 16px: iOS Safari zooms the whole page when a focused field is
     smaller than this, which also throws off the native date picker. */
  font-size:16px}
/* Strip the native chrome so date/number fields size like every other field.
   Checkboxes are excluded — the toggle switches are built on them. */
input:not([type="checkbox"]):not([type="radio"]){-webkit-appearance:none;appearance:none}
input[type="date"]{min-height:49px}
textarea{min-height:64px;resize:vertical}
.form{padding:16px 20px;display:flex;flex-direction:column;gap:14px}

.tile{width:40px;height:40px;border-radius:12px;background:var(--ptint);color:var(--pine);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.itemname{font-size:15px;font-weight:600}
.fab{position:fixed;right:calc(50% - 240px + 18px);bottom:88px;width:56px;height:56px;border-radius:18px;
  background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);border:none;cursor:pointer}
@media (max-width:520px){.fab{right:18px}}
/* Floats clear of the bottom edge as a translucent capsule, so the content
   scrolls visibly behind it. color-mix/backdrop-filter degrade to the solid
   --surface background on anything that doesn't support them. */
nav.tabbar{position:fixed;z-index:40;left:12px;right:12px;max-width:456px;margin:0 auto;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;gap:4px;padding:6px;border-radius:26px;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);box-shadow:var(--navshadow)}
nav.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px;border-radius:19px;font-size:10.5px;font-weight:600;color:var(--mute);
  transition:background .18s ease,color .18s ease,transform .12s ease}
nav.tabbar a.active{color:var(--pine);background:var(--ptint)}
nav.tabbar a:active{transform:scale(.94)}

.seg{display:flex;background:var(--row);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:none;border-radius:9px;padding:10px;font-weight:600;font-size:14px;color:var(--soft);background:transparent;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,40,30,.12)}

.banner{display:flex;align-items:center;gap:9px;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600}
.banner.pine{background:var(--ptint);color:var(--pine-d);border:1px solid var(--ptint-bd)}
.banner.brass{background:var(--btint);color:var(--brass);border:1px solid var(--btint-bd)}
/* Informational, not a warning: e.g. what is on hold. */
.banner.mute{background:transparent;color:var(--soft);border:1px dashed var(--line)}
.demobar{display:flex;align-items:center;gap:8px;background:var(--pine-d);color:#fff;padding:9px 16px;font-size:12.5px;font-weight:600}
.demobar .sp{margin-left:auto;display:flex;align-items:center;gap:3px}

.switch{position:relative;width:44px;height:26px;flex-shrink:0;display:inline-block}
.switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.switch .track{position:absolute;inset:0;border-radius:999px;background:#D8DDD0;transition:.15s}
:root[data-theme="dark"] .switch .track{background:#33413A}
.switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.switch input:checked + .track{background:var(--pine)}
.switch input:checked + .track + .knob{left:21px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(112px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.center{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 28px}
.spinner{width:26px;height:26px;border:3px solid var(--ptint);border-top-color:var(--pine);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
.swatch{width:28px;height:28px;border-radius:50%;border:none;cursor:pointer}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px currentColor}

.iconpick{width:46px;height:46px;border-radius:12px;border:2px solid transparent;background:var(--row);
  color:var(--soft);display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconpick.on{border-color:var(--pine);background:var(--ptint);color:var(--pine)}

/* ---------------------------------------- reimbursement package (screen) */
.pkg{padding:14px 20px 40px}
.pkg h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:6px 0 16px}
.pkg h2{font-size:15px;font-weight:700;margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pkg-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:20px}
.pkg-meta div{display:flex;flex-direction:column;gap:2px}
.pkg-meta span{font-size:10.5px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.05em}
.pkg-meta b{font-size:14px;font-weight:600}
.pkg table{width:100%;border-collapse:collapse;font-size:13px}
.pkg th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);
  padding:6px;border-bottom:1px solid var(--line);font-weight:700}
.pkg td{padding:7px 6px;border-bottom:1px solid var(--row);vertical-align:top}
.pkg .r{text-align:right;white-space:nowrap}
.pkg tfoot td{border-top:2px solid var(--line);border-bottom:none;padding-top:10px;font-size:14px}
.pkg-sub{display:block;font-size:11px;color:var(--mute)}
.pkg-warn{background:var(--btint);border:1px solid var(--btint-bd);color:var(--brass);
  padding:9px 11px;border-radius:10px;font-size:12.5px;font-weight:600;margin:16px 0 0}
.pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pkg-receipt{margin:0}
.pkg-receipt img{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;display:block}
.pkg-pdf{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 10px;text-align:center;
  border:1px dashed var(--field-bd);border-radius:8px;color:var(--soft);font-size:12px}
.pkg-receipt figcaption{font-size:11px;color:var(--soft);padding-top:5px;line-height:1.35}

/* ---------------------------------------- reimbursement package (print) */
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important;color:#000!important}
  .noprint,nav.tabbar,.demobar,.fab,.toast,header.pushhead,header.top{display:none!important}
  .app{max-width:none!important;box-shadow:none!important;height:auto!important;overflow:visible!important}
  main{overflow:visible!important;padding:0!important}
  .pkg{padding:0;color:#000}
  .pkg h1,.pkg h2,.pkg b,.pkg td,.pkg th,.pkg-meta span,.pkg-sub,.pkg-receipt figcaption{color:#000}
  .pkg th,.pkg td,.pkg tfoot td{border-color:#bbb!important}
  .pkg-warn{background:#fff;border:1px solid #888;color:#000}
  .pkg-cover,.pkg-items{page-break-after:always;break-after:page}
  .pkg-cat h2{page-break-after:avoid;break-after:avoid}
  .pkg-receipt{page-break-inside:avoid;break-inside:avoid}
  .pkg-grid{gap:8mm}
  .pkg-receipt img{max-height:105mm;object-fit:contain}
}
.pkg-note{background:var(--ptint);border:1px solid var(--ptint-bd);border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.45;margin:16px 0 0;white-space:pre-wrap}
@media print{.pkg-note{background:#fff;border:1px solid #bbb;color:#000}}

/* ------------------------------------------- behave like an app, not a page */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
.app{height:100dvh;overflow-x:clip}
main{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Kills the 300ms double-tap-zoom delay on anything tappable. */
a,button,label,.row,.seg button,.swatch,.iconpick{touch-action:manipulation}
/* Chrome shouldn't be text-selectable; content still is. */
header,nav.tabbar,.fab,.demobar,.seg,.chip,button{-webkit-user-select:none;user-select:none}
/* Flex children default to min-width:auto, so one long name or a native date
   field widens the row past the viewport. */
.row,.row>*,.btn{min-width:0}
.itemname,.cap{overflow-wrap:break-word}
.fab{bottom:calc(94px + env(safe-area-inset-bottom,0px))}

/* ------------------------------------------------- full-screen receipt view */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,16,13,.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:max(58px,calc(env(safe-area-inset-top,0px) + 58px)) 14px max(16px,env(safe-area-inset-bottom,0px))}
.lightbox-body{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;background:#fff}
.lightbox iframe{width:100%;height:100%;border:0;border-radius:10px;background:#fff}
.lightbox-x{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;
  border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lightbox-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px;max-width:100%;
  color:rgba(255,255,255,.75);font-size:12.5px;text-align:center;overflow-wrap:break-word}
.lightbox-foot a{color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:8px 14px}
.lightbox-pdf{display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;text-align:center;font-size:13px}
.lightbox-pdf .btn{width:auto;padding:12px 20px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.lightbox-pages{width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.lightbox-pages img{max-width:100%;border-radius:8px;background:#fff;display:block}
.btn:disabled,.iconbtn:disabled{opacity:.5;cursor:default}