* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #0f1626; color: #fff; }
body { min-height: 100vh; }   /* fill the viewport like the card app, so the fixed tab bar pins to the screen bottom */
.muted { color: #9aa7bd; }
.hidden { display: none !important; }
[hidden]{display:none!important}   /* author display rules (e.g. .sheet-btn) must not override the hidden attribute */

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 360px; background: #1a2236; border: 1px solid #2a3350; border-radius: 14px; padding: 26px; }
.brand { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.login-card .muted { margin: 4px 0 20px; }
.login-card label { display: block; font-size: 13px; color: #9aa7bd; margin: 12px 0 6px; }
.login-card input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #2a3350; background: #0f1626; color: #fff; font-size: 16px; }
.login-card button { width: 100%; margin-top: 18px; padding: 13px; border: none; border-radius: 8px; background: #2e6be6; color: #fff; font-size: 16px; font-weight: 600; }
.err { color: #ff7a6b; margin-top: 12px; font-size: 14px; min-height: 18px; }

/* App */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; background: #1a2b49; position: sticky; top: 0; z-index: 10; }
.topbar .brand { font-size: 18px; }
.logout { color: #9aa7bd; text-decoration: none; font-size: 14px; }
.offline-tag { color: #f0a93c; font-size: 13px; font-weight: 600; }
.app { padding: 16px; max-width: 560px; margin: 0 auto; }
.datastate { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #9aa7bd; margin-bottom: 0; gap: 10px; }
.ghost { background: transparent; border: 1px solid #2a3350; color: #cdd6e6; border-radius: 8px; padding: 8px 12px; font-size: 13px; }

.scanner { position: relative; width: 100%; aspect-ratio: 1/1; background: #000; border-radius: 14px; overflow: hidden; margin-top: 14px; }
#video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.7); border-radius: 16px; }
canvas { width: 1px; height: 1px; }

.actions { margin-top: 16px; }
.primary { width: 100%; padding: 15px; border: none; border-radius: 10px; background: #2e6be6; color: #fff; font-size: 17px; font-weight: 700; }
.hint { color: #7c89a3; font-size: 12px; line-height: 1.5; margin-top: 14px; }

/* Scan result: a colour-coded sheet that slides up */
.result-scrim{position:fixed;inset:0;background:rgba(8,12,20,.5);z-index:320;opacity:0;transition:opacity .25s ease}
.result-scrim.show{opacity:1}
.result-sheet{position:fixed;left:0;right:0;bottom:0;z-index:330;max-width:480px;margin:0 auto;text-align:center;color:#fff;
  border-radius:26px 26px 0 0;padding:12px 24px calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 50px rgba(8,12,20,.45);
  transform:translateY(110%);transition:transform .34s cubic-bezier(.2,.7,.3,1);will-change:transform}
.result-sheet.show{transform:translateY(0)}
.result-sheet .sheet-grip{background:rgba(255,255,255,.55)}
.result-sheet.valid{background:#1f9d57}
.result-sheet.invalid{background:#d23b2e}
.result-sheet.warn{background:#e0871b}
.result-icon{font-size:60px;font-weight:800;line-height:1;margin:4px 0 2px}
.result-sheet.valid .result-icon::before{content:"✓"}
.result-sheet.invalid .result-icon::before{content:"✕"}
.result-sheet.warn .result-icon::before{content:"!"}
.result-text{font-size:34px;font-weight:800;letter-spacing:.02em}
.result-sub{font-size:16px;color:#fff;opacity:.93;margin-top:6px}
.result-done{margin-top:22px;width:100%;padding:15px;border:0;border-radius:14px;
  background:rgba(255,255,255,.18);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.result-done:active{background:rgba(255,255,255,.28)}

/* Add-to-home-screen sheet */
.sheet-scrim{position:fixed;inset:0;background:rgba(15,22,35,.55);z-index:300;opacity:0;transition:opacity .3s ease}
.sheet-scrim.show{opacity:1}
.install-sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;max-width:480px;margin:0 auto;
  background:#fff;border-radius:24px 24px 0 0;text-align:center;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(15,22,35,.32);
  transform:translateY(110%);transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform}
.install-sheet.show{transform:translateY(0)}
.sheet-grip{width:42px;height:5px;border-radius:3px;background:#d7dce3;margin:6px auto 16px}
.sheet-icon{width:66px;height:66px;border-radius:16px;box-shadow:0 5px 16px rgba(20,30,55,.2);margin-bottom:12px}
.sheet-title{font-size:20px;font-weight:800;color:#1a2b49;margin:0 0 6px}
.sheet-text{font-size:14px;color:#67707d;margin:0 auto 18px;max-width:340px;line-height:1.5}
.sheet-btn{display:block;width:100%;padding:15px;border:0;border-radius:13px;background:#1a2b49;
  color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.sheet-btn:active{opacity:.88}
.sheet-steps{text-align:left;margin:0 auto 6px;max-width:320px;padding-left:22px;color:#1f2733;font-size:15px}
.sheet-steps li{margin:10px 0;line-height:1.45}
.share-ico{display:inline-flex;vertical-align:-3px;color:#0a84ff;margin:0 1px}
.sheet-dismiss{display:block;width:100%;margin-top:10px;background:#eaf1fb;border:0;border-radius:13px;color:#67707d;font-size:14px;font-weight:600;cursor:pointer;padding:13px}
.sheet-close{position:absolute;top:12px;right:14px;width:30px;height:30px;background:transparent;border:0;
  font-size:26px;line-height:1;color:#9aa3af;cursor:pointer}

/* Result sheet actions: Add note + Scan next, side by side */
.result-actions{display:flex;gap:10px;margin-top:22px}
.result-actions .result-done{margin-top:0;flex:1}
.result-note{flex:1;padding:15px;border:0;border-radius:14px;background:rgba(255,255,255,.92);
  color:#1a2b49;font-size:16px;font-weight:700;cursor:pointer}
.result-note:active{background:#fff}
.result-note.hidden{display:none}

/* "N notes waiting to sync" - same muted line as the cards/updated status, sat
   tight under it; the gap before the camera comes from .scanner's margin-top. */
.syncstate{font-size:13px;color:#9aa7bd;margin:2px 0 0}
.syncstate.hidden{display:none}

/* Bailiff note sheet (reuses the .sheet-* base) */
.note-sheet{position:fixed;left:0;right:0;bottom:0;z-index:330;max-width:480px;margin:0 auto;
  background:#fff;border-radius:24px 24px 0 0;text-align:center;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(15,22,35,.32);
  transform:translateY(110%);transition:transform .34s cubic-bezier(.2,.7,.3,1);will-change:transform}
.note-sheet.show{transform:translateY(0)}
.note-input{width:100%;box-sizing:border-box;border:1px solid #cfd6e0;border-radius:12px;padding:12px 14px;
  font:inherit;font-size:16px;color:#1f2733;resize:vertical;min-height:96px;margin:0 0 14px;text-align:left}
.note-input:focus{outline:none;border-color:#1a2b49;box-shadow:0 0 0 3px rgba(26,43,73,.12)}
.note-confirm{margin-top:12px;font-size:14px;font-weight:600;color:#1f9d57}
.note-confirm.err{color:#d23b2e}

/* ---- Previous violations on the scan result sheet ---- */
.view-panel{padding-bottom:100px}          /* clear the fixed bottom tab bar */
.result-viol{display:inline-block;margin:14px auto 0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.22);color:#fff;font-size:14px;font-weight:700;padding:9px 16px}
.result-viol.is-static{cursor:default;opacity:.92}
.result-viol.open{border-radius:14px 14px 6px 6px}
.result-notes{margin:10px auto 0;max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  text-align:left;background:rgba(0,0,0,.18);border-radius:12px;padding:4px}
.rn-item{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.14)}
.rn-item:last-child{border-bottom:0}
.rn-meta{font-size:12px;color:rgba(255,255,255,.82);margin-bottom:3px}
.rn-text{font-size:14px;color:#fff;white-space:pre-wrap;word-break:break-word;line-height:1.4}
.rn-loading{padding:10px 12px;font-size:13px;color:rgba(255,255,255,.85)}

/* ---- Bottom tab bar (Scan / Activity): identical positioning to the card app ---- */
.tabbar{position:fixed;left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:4px;padding:5px;background:#1a2236;border:1px solid #2a3350;border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);z-index:150}
.tab{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:0;background:transparent;color:#9aa7bd;font:600 12px/1 inherit;padding:9px 6px;border-radius:999px;cursor:pointer;transition:color .2s ease}
.tab svg{width:20px;height:20px}
.tab.is-active{color:#fff}
.tab-ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 14px) / 2);
  border-radius:999px;background:#2e6be6;z-index:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.tabbar[data-active="activity"] .tab-ind{transform:translateX(calc(100% + 4px))}

/* ---- Activity view ---- */
.act-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.act-title{font-size:20px;font-weight:800;margin:0}
.act-filters{display:flex;gap:8px;margin-bottom:12px}
.act-filter{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid #2a3350;background:#0f1626;color:#fff;font-size:15px}
.act-filter:focus{outline:none;border-color:#2e6be6}
select.act-filter{appearance:none;-webkit-appearance:none}
.act-status{color:#9aa7bd;font-size:14px;padding:10px 2px}
.act-unknown{color:#7c89a3;font-style:italic}

/* Mobile-first: each row is a stacked card (name on top, time · bailiff below). */
.act-table{width:100%;border-collapse:collapse}
.act-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.act-table tr{display:flex;flex-wrap:wrap;align-items:baseline;position:relative;
  background:#1a2236;border:1px solid #2a3350;border-radius:12px;padding:11px 14px;margin-bottom:10px}
.act-table td{border:0;padding:0}
.act-table td[data-label="Member"]{order:1;flex:1 1 100%;font-weight:700;font-size:16px;color:#eaf1fb;margin-bottom:4px;padding-right:34px}
.act-table td[data-label="Time"]{order:2;color:#9aa7bd;font-size:13px}
.act-table td[data-label="Bailiff"]{order:3;color:#9aa7bd;font-size:13px}
.act-table td[data-label="Bailiff"]::before{content:"·";margin:0 7px;color:#4a5876}
.act-icell{order:4;position:absolute;top:10px;right:10px}
.act-info{width:30px;height:30px;border-radius:50%;border:1px solid #2a3350;background:#141d33;color:#7fb0ff;
  font:italic 700 15px/1 Georgia,"Times New Roman",serif;cursor:pointer}
.act-info:active{background:#1c2742}

/* Wider screens: render as a genuine table. */
@media (min-width:560px){
  .act-table{background:#1a2236;border:1px solid #2a3350;border-radius:12px;overflow:hidden}
  .act-table thead{position:static;width:auto;height:auto;clip:auto}
  .act-table thead th{text-align:left;font-size:12px;color:#7c89a3;font-weight:600;padding:10px 14px;border-bottom:1px solid #2a3350}
  .act-table tr{display:table-row;background:transparent;border:0;border-radius:0;padding:0;margin:0}
  .act-table td{display:table-cell;vertical-align:middle;padding:11px 14px;border-bottom:1px solid #222c46;font-size:14px;color:#cdd6e6}
  .act-table td[data-label="Member"]{flex:none;font-weight:600;font-size:14px;color:#eaf1fb;margin:0;padding-right:14px}
  .act-table td[data-label="Bailiff"]::before{content:none}
  .act-icell{position:static;text-align:right}
}

/* ---- Activity detail drawer: slides in from the right; note top, map bottom ---- */
.drawer-scrim{position:fixed;inset:0;background:rgba(8,12,20,.5);z-index:340;opacity:0;transition:opacity .25s ease}
.drawer-scrim.show{opacity:1}
.act-drawer{position:fixed;top:0;right:0;bottom:0;z-index:350;width:100%;   /* full width on mobile */
  background:#0f1626;border-left:1px solid #2a3350;box-shadow:-14px 0 50px rgba(8,12,20,.5);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.7,.3,1);will-change:transform}
@media (min-width:600px){ .act-drawer{width:50%;max-width:600px} }   /* half width on tablet and up */
.act-drawer.show{transform:translateX(0)}
.act-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px;border-bottom:1px solid #2a3350;background:#1a2b49}
.act-drawer-title{margin:0;font-size:18px;font-weight:700;color:#fff;word-break:break-word}
.act-drawer-close{background:transparent;border:0;color:#9aa7bd;font-size:28px;line-height:1;cursor:pointer;flex-shrink:0}
.act-drawer-body{padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.ad-note{white-space:pre-wrap;word-break:break-word;background:#1a2236;border:1px solid #2a3350;border-radius:12px;
  padding:14px 16px;line-height:1.5;color:#eaf1fb;font-size:15px}
.ad-meta{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px}
.ad-meta div{display:contents}
.ad-meta dt{color:#7c89a3;font-size:12px;text-transform:uppercase;letter-spacing:.04em;align-self:center}
.ad-meta dd{margin:0;color:#cdd6e6}
.ad-map{margin-top:16px;border:1px solid #2a3350;border-radius:12px;overflow:hidden}
.ad-map iframe{display:block;width:100%;height:260px;border:0}
.ad-maplink{margin:8px 0 0;font-size:13px;color:#9aa7bd}
.ad-maplink a{color:#7fb0ff}
.ad-nomap{margin-top:16px;color:#7c89a3;font-size:14px}