* { box-sizing: border-box; }
body { margin: 0; font: 16px system-ui, sans-serif; background: #f2f2f2; }
#tabs { display: flex; overflow-x: auto; background: #1f3a5f; position: sticky; top: 0; z-index: 5; }
#tabs button { flex: none; min-height: 44px; padding: 0 14px; border: 0; background: none; color: #cfd8e6; font-size: 15px; }
#tabs button[aria-selected=true] { color: #fff; border-bottom: 3px solid #fff; }
#tabs button:disabled { opacity: .45; }
#main { max-width: 900px; margin: 0 auto; padding: 8px; }
.items button { display: block; width: 100%; min-height: 48px; margin: 4px 0; text-align: left; padding: 0 12px; font-size: 16px; background: #fff; border: 1px solid #ccc; border-radius: 6px; }
.empty { padding: 24px; color: #777; }
.pager { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pager button { min-width: 48px; min-height: 44px; font-size: 18px; }
.pager span { flex: 1; text-align: center; }
.page { container-type: inline-size; position: relative; width: 100%; background: #fff; }
.page img { display: block; width: 100%; height: 100%; }
.cb { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.cb::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 100cqw); height: calc(var(--h) * var(--ar) * 100cqw); transform: translate(-50%, -50%); }
/* check drawn at the box position; container width is the page width */
.cb[aria-checked=true]::after { content: '✓'; display: flex; align-items: center; justify-content: center; color: #d00; font-weight: 900; font-size: calc(var(--h) * var(--ar) * 100cqw * 1.6); line-height: 1; }
.txt { position: absolute; font-size: 14px; border: 1px solid #1f3a5f; background: rgba(255,255,200,.85); padding: 0 2px; }
.cell { position: absolute; resize: none; font: inherit; font-size: max(14px, 1.9cqw); line-height: 1.25; border: 1px solid #b8a000; background: rgba(255,255,200,.7); padding: 1px 34px 1px 4px; overflow: auto; touch-action: manipulation; }
.cmic { position: absolute; transform: translate(-100%, 0); --s: clamp(22px, calc(var(--ch) * var(--ar) * 100cqw), 32px); width: var(--s); height: var(--s); padding: 0; font-size: 16px; line-height: 1; border: 1px solid #1f3a5f; border-radius: 6px; background: #fff; touch-action: manipulation; }
.cmic.rec { background: #d00; color: #fff; }
.media { margin-top: 8px; padding-bottom: 72px; }
.media textarea { width: 100%; min-height: 80px; font-size: 16px; }
.strip { display: flex; gap: 8px; overflow-x: auto; align-items: center; }
.thumb { height: 72px; border-radius: 4px; touch-action: none; user-select: none; -webkit-touch-callout: none; }
.clip { display: flex; flex-direction: column; flex: none; max-width: 260px; }
.mbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 8px; background: #1f3a5f; overflow-x: auto; z-index: 6; }
.mbar button { flex: none; min-height: 48px; padding: 0 12px; font-size: 15px; }
#tabs button.dim { opacity: .45; }
.xform { width: 100%; border-collapse: collapse; background: #fff; }
.xform td { border: 1px solid #333; padding: 6px; vertical-align: top; }
.xform input { width: 100%; min-height: 36px; font-size: 16px; }
.xcb { display: block; min-height: 40px; padding: 0 8px; border: 0; background: none; font-size: 16px; text-align: left; }
.zoomer { touch-action: pan-x pan-y; }
.zoomer.zoomed { overflow: auto; overscroll-behavior: contain; } /* at 1x the page scrolls normally; zoomed, the viewer pans inside */
.zctl { position: fixed; right: 10px; bottom: 84px; display: flex; gap: 6px; z-index: 7; }
.zctl button { min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 18px; border: 0; border-radius: 22px; background: rgba(31,58,95,.9); color: #fff; }
.nic { display: none; }
.xwrap { overflow-x: auto; }
@media (max-width: 600px) {
  #main { padding: 6px; }
  #tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mbar { padding: 6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); gap: 4px; justify-content: space-around; }
  .mbar button { min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 20px; }
  .mbar .lb { display: none; }
  .mbar .nic { display: inline; }
  .zctl { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .media { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .strip { overflow-x: auto; flex-wrap: nowrap; }
  form input[type=text], form input[type=date] { width: 100%; min-height: 44px; font-size: 16px; }
  form button, .items button { width: 100%; }
  .xform { font-size: 14px; }
  .xform td { padding: 4px; }
}

.dirty { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff3cd; color: #5c4400; font-size: 14px; }
.dirty[hidden] { display: none; }
.dirty button { min-height: 36px; padding: 0 12px; margin-left: auto; }