Suriyakumarvijayanayagam
48a30d97db
Two changes, and the second was found by verifying the first. ## Watching a camera from the app, in another building Snapshots answer "is that camera working". They do not answer "what is happening in my shop right now", which is what somebody who opens the app away from the counter is asking. Head office's browser already had that answer - LiveHub plus cameras.Live, where the shop PC asks outbound whether anybody is watching and pushes JPEG frames for as long as somebody is - and the app could not reach it. cloud.CameraLive opens that feed and the app's own loopback relay re-emits it as multipart MJPEG. That is the trick: frames arrive base64 over SSE, an <img> cannot render that, and an <img> renders MJPEG natively - so a tile is an ordinary <img> pointed at loopback whether the camera is in this room or another city. - Reconnecting happens in the relay, not the page. The server caps one push at five minutes, so doing it here means the <img> never sees the stream end. - The headers are flushed before the first frame. Go writes them on the first body write, so without that the whole response waits for the shop PC to start pushing. Measured against production: 30 seconds and not even a Content-Type, which surfaces as the request timing out. - One camera at a time. Watching makes a shop PC upload, so a grid that went live at once would put an estate's worth of cameras on the wire because somebody opened a page. - live.mjpeg is behind the same per-run token as the engine routes, and a wrong token is a 404 that never reaches head office at all. - CameraLive uses its own HTTP client: the shared one's 30s timeout covers the whole response and would sever a working view every thirty seconds - the trap that made the server set WriteTimeout to zero for its own SSE endpoint. ## A camera read "Connected" for 34 minutes after the shop PC went blind Which is why the verification above looked like a failure: head office registered the viewer and no frame ever came. reportWith returns early when the engine is unreachable - correctly, it has nothing to say - so the last state it sent stays in the database looking current. Measured live: cam2 and entrance both reading Connected, in green, with last_seen_at 34 minutes old, while the heartbeat from the same PC said cameras_up 0 of 0. Two surfaces reading two stored fields and disagreeing. false could not be the answer. It means "this camera is not connecting", which sends an installer to check cabling on a camera that was working perfectly the last time anybody could ask it. So there are four states and one function: connected reported recently, and working not_connecting reported recently, and the stream will not open waiting no shop PC has ever reported this camera stale reported once, and not lately - Connected is CLEARED when stale or waiting. A stale true left in place stays available to every client reading the field directly, and leaves two fields on one object disagreeing - how the shops screen once came out labelled Working, in green, above "2 of 3 cameras not connecting". - Computed in scanCamera, so every camera anybody reads passes through it. A state computed per handler is one a handler forgets, and this had already reached three screens. - CameraStaleAfter is 5 minutes: five missed reports, not one. Same reasoning as three missed heartbeats - an indicator that cries wolf gets ignored. - An unparseable last_seen_at is stale. It should be impossible, which is why it must not fall through to the state that says everything is fine. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KGcjxF1cNLcuwc3DAPcnfj
2 lines
31 KiB
CSS
2 lines
31 KiB
CSS
:root{--bg: #0A0F13;--s1: #111A20;--s2: #17232B;--s3: #1E2D37;--line: #223038;--line-2: #1A252C;--ink: #ECF3F7;--ink-2: #A3B6C2;--ink-3: #6C808D;--accent: #40C4DC;--accent-2: #0F3B47;--accent-3: #0B2A33;--ok: #48C78E;--ok-2: #102E22;--warn: #EAAA3D;--warn-2: #31260F;--bad: #EC6A5C;--bad-2: #331815;--r-sm: 6px;--r: 10px;--r-lg: 14px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-7: 32px;--sp-8: 40px;--shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);--shadow-lg: 0 2px 4px rgb(0 0 0 / .4), 0 24px 48px -16px rgb(0 0 0 / .7);--font: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;--font-display: "Segoe UI Variable Display", var(--font);--mono: "Cascadia Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;--ground: var(--bg);--surface: var(--s1);--surface-2: var(--s2);--line-soft: var(--line-2);--muted: var(--ink-3);--radius: var(--r);--accent-dim: var(--accent-3)}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;-webkit-user-select:none;user-select:none}button,input,select,textarea{font:inherit;color:inherit}input,textarea{-webkit-user-select:text;user-select:text}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}::selection{background:var(--accent-2);color:var(--ink)}.num,.value,.metric-v,.when,.mono,.code,td{font-variant-numeric:tabular-nums}.mono,.code{font-family:var(--mono)}*{scrollbar-width:thin;scrollbar-color:var(--s3) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--s3);border-radius:99px;border:3px solid var(--bg)}*::-webkit-scrollbar-thumb:hover{background:#2a3d49}.shell{display:grid;grid-template-columns:232px 1fr auto;height:100%}.side{background:var(--s1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.side .brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4)}.side .brand .mark{width:30px;height:30px;flex:none;display:grid;place-items:center}.side .brand .mark img,.login .mark img{width:100%;height:100%;object-fit:contain;display:block}.side .brand .id{min-width:0}.side .brand h1{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.2}.side .brand p{font-size:11.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav{padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:2px;flex:1}.nav button{position:relative;display:flex;align-items:center;gap:var(--sp-3);width:100%;background:none;border:0;border-radius:var(--r-sm);padding:9px var(--sp-3);color:var(--ink-2);cursor:pointer;text-align:left;font-size:13.5px;font-weight:450;transition:background .12s ease,color .12s ease}.nav button svg{flex:none;opacity:.9}.nav button:hover{background:var(--s2);color:var(--ink)}.nav button[aria-current=page]{background:var(--accent-3);color:var(--accent);font-weight:550}.nav button[aria-current=page]:before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:2.5px;border-radius:0 2px 2px 0;background:var(--accent)}.enginebox{margin:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--s2)}.enginebox .row{display:flex;align-items:center;gap:var(--sp-2)}.enginebox .state{font-size:12.5px;font-weight:600;letter-spacing:-.005em}.enginebox .label{display:block;color:var(--ink-3);font-size:11px;line-height:1.45;margin-top:3px;font-variant-numeric:tabular-nums}.enginebox .actions,.enginebox .controls{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}.enginebox .actions .btn,.enginebox .controls .btn{flex:1;justify-content:center;padding:6px 8px;font-size:12px}.side .who{padding:var(--sp-3) var(--sp-5) var(--sp-5);border-top:1px solid var(--line-2);display:flex;align-items:center;gap:var(--sp-3)}.side .who .id{min-width:0;flex:1}.side .who .id b{display:block;font-size:12.5px;font-weight:550}.side .who .id span{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main{min-width:0;min-height:0;overflow:auto;position:relative}.page{padding:var(--sp-6) var(--sp-7) var(--sp-8);max-width:1500px}.page>header{margin-bottom:var(--sp-5)}.page>header h2,.page h2{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}.page>header p,.page header p{color:var(--ink-3);font-size:13px;margin-top:3px}.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}h3{font-size:11px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-3)}.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4)}.card>h3{margin-bottom:var(--sp-3)}.card.flush{padding:0;overflow:hidden}.panel{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;min-height:0}.panel>.panelhead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-2);background:linear-gradient(var(--s2),var(--s1));flex:none}.panel>.panelhead h3{margin:0}.panel>.panelbody{padding:var(--sp-4);min-height:0;overflow:auto}.panel>.panelbody.flush{padding:0}.grid{display:grid;gap:var(--sp-4)}.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width: 1180px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 980px){.cols-2,.cols-3{grid-template-columns:minmax(0,1fr)}}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.metric{background:var(--s1);padding:var(--sp-3) var(--sp-4) var(--sp-4)}.metric .metric-k{font-size:10.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-3)}.metric .metric-v{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-top:5px}.metric .metric-s{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}.metric.ok .metric-v{color:var(--ok)}.metric.warn .metric-v{color:var(--warn)}.metric.bad .metric-v{color:var(--bad)}.stat h3{margin-bottom:var(--sp-2)}.stat .value{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1}.stat .unit{font-size:15px;color:var(--ink-3);margin-left:3px}.stat .sub{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.4}.dot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--ink-3)}.dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}.dot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 18%,transparent)}.dot.bad{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}.dot.idle{background:var(--ink-3)}.dot.live{background:var(--ok);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 0%,transparent)}}.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.02em;background:var(--s3);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}.pill.ok{background:var(--ok-2);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}.pill.warn{background:var(--warn-2);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}.pill.bad{background:var(--bad-2);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 28%,transparent)}.pill.accent{background:var(--accent-3);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-sm);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--s3);color:var(--ink-2)}.tag.new{background:var(--accent-3);color:var(--accent)}.tag.seen{background:var(--ok-2);color:var(--ok)}.tag.miss{background:var(--warn-2);color:var(--warn)}.statusbar{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);background:var(--s1);border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--sp-4)}.statusbar .item{display:flex;align-items:center;gap:var(--sp-2);font-size:12.5px}.statusbar .item b{font-weight:600;letter-spacing:-.005em}.statusbar .item svg{color:var(--ink-3)}.statusbar .sep{width:1px;align-self:stretch;background:var(--line)}.statusbar .grow{flex:1}.arrivals{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}.arrival{display:grid;grid-template-columns:46px 1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border-radius:var(--r);background:var(--s2);border:1px solid var(--line-2);position:relative;overflow:hidden}.arrival:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--ink-3)}.arrival.is-new:before{background:var(--accent)}.arrival.is-seen:before{background:var(--ok)}.arrival.is-miss:before{background:var(--warn)}.arrival.fresh{animation:slidein .28s cubic-bezier(.2,.8,.3,1)}@keyframes slidein{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.arrival .avatar{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;overflow:hidden;background:var(--s3);border:1px solid var(--line);font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;font-variant-numeric:tabular-nums}.arrival .avatar img{width:100%;height:100%;object-fit:cover}.arrival.is-new .avatar{background:var(--accent-3);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}.arrival .who{min-width:0}.arrival .who .name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrival .who .meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrival .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.arrival .right .when{font-size:11.5px;color:var(--ink-3)}.feeds{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));padding:var(--sp-3)}.feed{position:relative;border-radius:var(--r);overflow:hidden;background:#05090c;border:1px solid var(--line);aspect-ratio:16 / 9}.feed img{width:100%;height:100%;object-fit:cover;display:block}.feed .placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-3)}.feed .cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-5) var(--sp-3) var(--sp-3);background:linear-gradient(transparent,#000c);font-size:12.5px;font-weight:600;letter-spacing:-.005em}.events,.timeline{list-style:none;padding:0;display:flex;flex-direction:column}.events li{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-4);border-bottom:1px solid var(--line-2);font-size:13px}.timeline li{display:flex;align-items:center;gap:var(--sp-3);padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}.events li:last-child,.timeline li:last-child{border-bottom:0}.events .when,.timeline .when{font-size:11.5px;color:var(--ink-3);width:46px;flex:none}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-5);color:var(--ink-3);text-align:center;font-size:12.5px}.empty svg{opacity:.35}.empty b{display:block;color:var(--ink-2);font-size:13.5px;font-weight:550}.empty p{max-width:34ch;line-height:1.5}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;padding:9px var(--sp-4);font-size:10.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-3);background:var(--s2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}td{padding:10px var(--sp-4);border-bottom:1px solid var(--line-2)}tbody tr:last-child td{border-bottom:0}tbody tr[role=button],tbody tr.clickable{cursor:pointer}tbody tr[role=button]:hover,tbody tr.clickable:hover{background:var(--s2)}.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);background:var(--s3);color:var(--ink);border:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:550;letter-spacing:-.005em;white-space:nowrap;transition:background .12s ease,border-color .12s ease,transform .06s ease}.btn:hover:not(:disabled){background:#253643;border-color:#2e414e}.btn:active:not(:disabled){transform:translateY(.5px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn svg{flex:none}.btn.primary{background:var(--accent);color:#04171c;border-color:transparent;font-weight:600}.btn.primary:hover:not(:disabled){background:#55d0e6}.btn.danger{background:var(--bad-2);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}.btn.danger:hover:not(:disabled){background:#43201c}.btn.ghost{background:transparent}.btn.ghost:hover:not(:disabled){background:var(--s2)}.btn.sm{padding:5px 10px;font-size:12px}.btn.icon{padding:7px}.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12.5px;padding:2px 0;text-align:left}.linkbtn:hover{text-decoration:underline}.seg{display:inline-flex;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;gap:2px}.seg button{background:none;border:0;border-radius:4px;padding:5px 11px;color:var(--ink-3);cursor:pointer;font-size:12.5px;font-weight:500}.seg button[aria-pressed=true]{background:var(--s3);color:var(--ink)}.field{display:block;margin-bottom:var(--sp-4)}.field>span{display:block;font-size:11.5px;font-weight:550;color:var(--ink-2);margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:9px 11px;background:var(--s2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}.field input::placeholder{color:var(--ink-3)}.field input:hover,.field select:hover,.field textarea:hover{border-color:#2c3d49}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--s1);box-shadow:0 0 0 3px var(--accent-3)}.field .hint{display:block;font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.45}.fieldrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}.fieldrow.three{grid-template-columns:repeat(3,minmax(0,1fr))}.err{display:flex;align-items:flex-start;gap:var(--sp-2);background:var(--bad-2);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:var(--r-sm);padding:9px 11px;font-size:12.5px;line-height:1.45;margin-bottom:var(--sp-4)}.err svg{flex:none;margin-top:1px}.note{color:var(--ink-3);font-size:12px;line-height:1.5}.note.warn{color:var(--warn)}.note.bad{color:var(--bad)}.lead{color:var(--ink-2);font-size:13.5px;line-height:1.55}.sm{font-size:12px}.lbl,.key{color:var(--ink-3);font-size:11.5px}.grow{flex:1}.row{display:flex;align-items:center;gap:var(--sp-3)}.login{height:100%;display:grid;place-items:center;padding:var(--sp-6);overflow:auto;background:radial-gradient(900px 480px at 50% -10%,#10303A 0%,transparent 62%),var(--bg)}.login .box{width:100%;max-width:396px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-7);box-shadow:var(--shadow-lg)}.login .mark{width:44px;height:44px;margin-bottom:var(--sp-4);display:grid;place-items:center}.login h1{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.022em}.login .lead{margin:6px 0 var(--sp-5)}.login .btn{width:100%;justify-content:center;margin-top:var(--sp-1)}.login .foot{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-2)}.login .alt{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}.login .alt .btn{margin-top:0}.login .note{margin:0}.drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#04080b99;display:flex;justify-content:flex-end;animation:fade .16s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.drawer .sheet{width:min(540px,100%);height:100%;overflow:auto;background:var(--s1);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);animation:slidein-r .2s cubic-bezier(.2,.8,.3,1)}@keyframes slidein-r{0%{transform:translate(16px);opacity:.6}to{transform:none;opacity:1}}.drawer .sheethead{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--s1);border-bottom:1px solid var(--line)}.drawer .sheethead h2{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.015em}.drawer .sheetbody{padding:var(--sp-5)}.drawer .close{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:6px;border-radius:var(--r-sm);display:grid;place-items:center}.drawer .close:hover{background:var(--s2);color:var(--ink)}.avatar{width:44px;height:44px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;overflow:hidden;background:var(--s3);border:1px solid var(--line);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}.avatar img{width:100%;height:100%;object-fit:cover}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.live-split{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch;min-height:420px}.live-split>.panel{max-height:62vh}@media (max-width: 1100px){.live-split{grid-template-columns:minmax(0,1fr)}.live-split>.panel{max-height:none}}.arrivals-panel{max-height:64vh;margin-bottom:var(--sp-4)}.arrivals-panel .arrivals{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--sp-2)}.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4)}.page>header.pagehead{margin-bottom:var(--sp-5)}.camgrid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(440px,1fr))}.camcard{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}.camview{position:relative;aspect-ratio:16 / 9;background:#05090c}.camview img{width:100%;height:100%;object-fit:cover;display:block}.camview .placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-3)}.camview .pill.over{position:absolute;top:10px;right:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.cambody{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}.camtitle{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)}.camtitle h3{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.012em;text-transform:none;color:var(--ink);margin:0 0 2px}.camtitle .note{font-size:12px}.camactions{display:flex;gap:6px;flex:none}.camproof{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r);background:var(--s2);border:1px solid var(--line-2)}.camproof .note{font-size:12px;line-height:1.45}@media (max-width: 640px){.camproof{grid-template-columns:1fr}}.empty.tall{padding:var(--sp-8) var(--sp-6)}.empty.tall .btn{margin-top:var(--sp-3)}.drawer .sheet{width:min(600px,100%)}.sheetbody .lead{color:var(--ink-2);font-size:13.5px;line-height:1.55;margin-bottom:var(--sp-5)}.formsection{margin-bottom:var(--sp-5)}.formsection h4{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--sp-3);padding-bottom:6px;border-bottom:1px solid var(--line-2)}.field .hint{font-style:normal}.fieldrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fieldrow .field.narrow{max-width:140px}.fieldrow:has(.field.narrow){grid-template-columns:minmax(0,1fr) 140px}.field input.mono{font-family:var(--font-mono);font-size:12.5px}.sheetactions{display:flex;gap:var(--sp-2);justify-content:flex-end;padding-top:var(--sp-4);border-top:1px solid var(--line-2);margin-top:var(--sp-2)}.testresult{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);margin-bottom:var(--sp-4);border:1px solid;font-size:13px}.testresult.ok{background:var(--ok-2);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok)}.testresult.bad{background:var(--bad-2);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad)}.testresult b{display:block}.testresult span{display:block;color:var(--ink-2);margin-top:2px}.testresult img{width:100%;margin-top:var(--sp-3);border-radius:var(--r-sm);border:1px solid var(--line);display:block}.steps{list-style:none;counter-reset:step;margin:0 0 var(--sp-5);padding:0;display:grid;gap:var(--sp-3)}.steps li{counter-increment:step;position:relative;padding:var(--sp-3) var(--sp-4) var(--sp-3) 52px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--s2);opacity:.55}.steps li.now,.steps li.done{opacity:1}.steps li:before{content:counter(step);position:absolute;left:16px;top:14px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--s3);color:var(--ink-2);border:1px solid var(--line)}.steps li.now:before{background:var(--accent);color:#041014;border-color:transparent}.steps li.done:before{content:"✓";background:var(--ok-2);color:var(--ok)}.steps b{display:block;font-size:14px}.steps span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}.progress{height:4px;background:var(--s3);border-radius:2px;overflow:hidden;margin-top:var(--sp-3)}.progress>div{height:100%;background:var(--accent);transition:width .4s linear}.verdict{padding:var(--sp-4);border-radius:var(--r);border:1px solid var(--line);background:var(--s2)}.verdict.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:var(--ok-2)}.verdict.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-2)}.verdict.bad{border-color:color-mix(in srgb,var(--bad) 35%,transparent);background:var(--bad-2)}.verdict-head{display:flex;align-items:center;gap:var(--sp-2);font-size:15px}.verdict.ok .verdict-head{color:var(--ok)}.verdict.warn .verdict-head{color:var(--warn)}.verdict.bad .verdict-head{color:var(--bad)}.verdict ul{margin:var(--sp-3) 0 0 18px;font-size:13px;color:var(--ink);line-height:1.5}.verdict ul li{margin-bottom:5px}.verdict .note{margin-top:var(--sp-3)}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.helpbtn{display:flex;align-items:center;gap:9px;margin:0 var(--sp-3) var(--sp-3);padding:9px 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--s2);color:var(--ink);cursor:pointer;font-size:12.5px;font-weight:550;text-align:left}.helpbtn img{width:18px;height:18px;object-fit:contain}.helpbtn span{flex:1}.helpbtn:hover,.helpbtn[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-3)}.helper{width:380px;height:100%;display:flex;flex-direction:column;min-height:0;background:var(--s1);border-left:1px solid var(--line);animation:slidein-r .2s cubic-bezier(.2,.8,.3,1)}.helperhead{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--line)}.helperhead img{width:26px;height:26px;object-fit:contain}.helperhead div{flex:1;min-width:0}.helperhead b{display:block;font-family:var(--font-display);font-size:14.5px}.helperhead span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}.helperhead .close{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:6px;border-radius:var(--r-sm);display:grid;place-items:center}.helperhead .close:hover{background:var(--s2);color:var(--ink)}.helperbody{flex:1;overflow:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}.helperintro p{color:var(--ink-2);font-size:13px;line-height:1.55;margin-bottom:var(--sp-3)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid var(--line);background:var(--s2);color:var(--ink);border-radius:99px;padding:6px 11px;font-size:12px;cursor:pointer;text-align:left}.chip:hover{border-color:var(--accent);color:var(--accent)}.chip:disabled{opacity:.5;cursor:default}.helpernote{display:flex;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r);background:var(--warn-2);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn);font-size:12.5px}.helpernote b{display:block}.helpernote span{display:block;color:var(--ink-2);margin-top:2px;line-height:1.45}.turn{display:flex;flex-direction:column;gap:4px}.turn.user{align-items:flex-end}.bubble{max-width:92%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap}.turn.user .bubble{background:var(--accent);color:#041014;border-bottom-right-radius:4px}.turn.assistant .bubble{background:var(--s2);border:1px solid var(--line);border-bottom-left-radius:4px}.turn .used{font-size:11px;color:var(--ink-3);padding:0 4px}.bubble.thinking{display:flex;gap:4px;padding:12px 14px}.bubble.thinking span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite ease-in-out}.bubble.thinking span:nth-child(2){animation-delay:.2s}.bubble.thinking span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.25}40%{opacity:1}}.helperask{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line)}.helperask input{flex:1;min-width:0;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:13.5px;color:var(--ink)}.helperask input:focus{outline:none;border-color:var(--accent)}.helperask .btn{padding:0 12px}.quickhelp{margin-top:var(--sp-5);border-top:1px solid var(--line-2);padding-top:var(--sp-4)}.quickhelp dt{font-size:12.5px;font-weight:600;margin-top:var(--sp-3)}.quickhelp dd{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:3px 0 0}@media (max-width: 1100px){.helper{position:fixed;right:0;top:0;bottom:0;z-index:30;box-shadow:var(--shadow-lg)}}.search{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:0 12px;height:36px;width:min(340px,100%);color:var(--ink-3)}.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-size:13.5px}.search:focus-within{border-color:var(--accent)}.sheethead.who{align-items:center;gap:var(--sp-3)}.sheethead.who .grow{flex:1;min-width:0}.sheethead.who .note{margin-top:2px;font-size:12px}.sheethead .close{font-size:14px;line-height:1}.formsection .field:last-child{margin-bottom:0}.formsection.dangerzone{margin-top:var(--sp-6);padding:var(--sp-4);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:var(--r);background:var(--bad-2)}.formsection.dangerzone h4{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}tr.click{cursor:pointer}tr.click:hover td{background:var(--s2)}.loya-fab{position:fixed;top:var(--sp-4);right:var(--sp-5);z-index:20;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:var(--s1);color:var(--ink);box-shadow:var(--shadow-lg);cursor:pointer;font-size:13px;font-weight:600}.loya-fab img{width:20px;height:20px;object-fit:contain}.loya-fab:hover{background:var(--accent-3);border-color:var(--accent)}.finder{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border:1px dashed var(--line);border-radius:var(--r);background:var(--s2)}.finder p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0}.finder.busy{flex-direction:row;align-items:center;color:var(--ink-2);font-size:13px;border-style:solid}.foundlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.foundlist li button{width:100%;display:flex;align-items:center;gap:var(--sp-3);padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--s2);color:var(--ink);cursor:pointer;text-align:left;font-size:13px}.foundlist li button:hover{border-color:var(--accent)}.foundlist li.picked button{border-color:var(--accent);background:var(--accent-3)}.foundlist .mono{font-family:var(--font-mono);font-size:12.5px;min-width:120px}.foundlist .what{flex:1;color:var(--ink-2)}.foundlist li.rescan button{width:auto;border:0;background:none;padding:4px 0;color:var(--ink-3)}.login .box.wide{max-width:640px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2)}@media (max-width: 720px){.choices{grid-template-columns:1fr}}.choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--s2);color:var(--ink);cursor:pointer}.choice:hover{border-color:var(--accent);background:var(--accent-3)}.choice b{font-size:14px}.choice span{font-size:12.5px;color:var(--ink-2);line-height:1.5}.choice em{font-family:var(--font-mono);font-style:normal;font-size:11.5px}.choice svg{color:var(--accent)}.login .foot em{font-style:normal;color:var(--ink-2)}.linkbtn{display:inline-flex;align-items:center;gap:6px}.starter{margin-bottom:var(--sp-4)}.starter .panelhead{padding:var(--sp-3) var(--sp-4)}.starter .steps{margin:0;padding:var(--sp-3) var(--sp-4) 0}.starter .steps.compact li{padding:var(--sp-3) var(--sp-4) var(--sp-3) 52px}.starter .steps li .btn{margin-top:var(--sp-2)}.starter .note{padding:var(--sp-3) var(--sp-4);font-size:12px}.btn.ghost{background:none;border-color:transparent;color:var(--ink-3)}.btn.ghost:hover{color:var(--ink)}.viewing{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--ink-2);font-size:13px;line-height:1.5}.viewing b{color:var(--ink);font-weight:600}.viewing svg{flex:none;margin-top:2px;color:var(--accent)}.camview .btn.watch{position:absolute;right:10px;bottom:10px;background:#0000008c;border-color:#ffffff40;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.camview .btn.watch:hover{background:#000000b8}.camview .btn.watch.on{background:var(--accent);border-color:var(--accent);color:#fff}
|