/* Agent Conf 2026 — Warsaw field console. Mobile-first; desktop at >=900px. */ :root{ --bg:#0a0e15; --panel:#111826; --panel-2:#161f30; --raise:#1c2738; --line:#26334a; --line-soft:#1b2536; --text:#e8eefb; --muted:#9db0cc; --dim:#6d7f9b; --faint:#4e5d76; --accent:#5eb0ff; --accent-dim:#2a4a70; --mint:#7ee6c4; --amber:#ffcf6b; --rose:#ff8098; --violet:#b69bff; --s:#ffcf6b; --a:#5eb0ff; --b:#8ba0bd; --c:#55657e; --r:10px; --r-lg:14px; --ease:cubic-bezier(.2,.7,.3,1); --shadow:0 8px 28px -12px rgba(0,0,0,.8); --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px); --tabh:66px; /* total bar height; content sits above the corner radius */ --bar:#0e1420; /* opaque tab-bar colour; also the PWA background_color */ --kb:0px; /* keyboard height, set from visualViewport */ } *{box-sizing:border-box;margin:0;padding:0} /* Overlays below set display:flex, which beats the UA sheet's [hidden]{display:none}. Without this they would all be permanently on screen. Toggle visibility with .hidden. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} html,body{height:100%;overflow:hidden;overscroll-behavior:none} /* html carries the background too: in an installed PWA the strip behind the home indicator is outside and would otherwise render as bare black. */ html{background:var(--bg)} body{ background:var(--bg); color:var(--text); font:400 15px/1.6 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:.005em; } body.gate{overflow:auto} ::selection{background:var(--accent-dim);color:#fff} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:#243044;border-radius:99px;border:2px solid transparent;background-clip:content-box} button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none} button{cursor:pointer;-webkit-tap-highlight-color:transparent} a{color:var(--accent);text-decoration:none} input,textarea{font-size:16px} /* 16px stops iOS Safari zooming on focus */ /* ───────────────────────────── login ───────────────────────────── */ .login{min-height:100dvh;display:grid;place-items:center;padding:24px calc(20px + var(--sal)) calc(24px + var(--sab))} .logbox{width:100%;max-width:360px;text-align:center} .logmark{font-size:34px;color:var(--mint);margin-bottom:10px} .logbox h1{font-size:23px;font-weight:650;letter-spacing:-.01em} .logbox p{color:var(--dim);font-size:13.5px;margin-bottom:26px} .logbox form{display:flex;flex-direction:column;gap:11px} .logbox input[type=password]{ background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:15px 16px;text-align:center;transition:.18s var(--ease)} .logbox input[type=password]:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,176,255,.12)} .logbox button{background:var(--accent);color:#04121f;font-weight:650;font-size:16px; padding:15px;border-radius:12px;transition:.15s var(--ease)} .logbox button:active{transform:scale(.985)} .logerr{color:var(--rose);font-size:13.5px} .logbox small{display:block;color:var(--faint);font-size:12px;margin-top:16px} /* ───────────────────────────── shell ───────────────────────────── */ #app{height:100dvh;min-height:100dvh;display:flex;flex-direction:column} @supports not (height:100dvh){#app{height:100vh;min-height:-webkit-fill-available}} /* Keeps the home-indicator strip filled even while the tab bar is translated away. */ body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:var(--sab); background:var(--bar);pointer-events:none;z-index:0} #top,#rail,#mid{display:none} #mtop{ position:fixed;top:0;left:0;right:0;z-index:40; background:rgba(14,20,32,.93);backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); padding:calc(6px + var(--sat)) calc(8px + var(--sar)) 0 calc(8px + var(--sal)); } .mrow{display:flex;align-items:center;gap:4px;min-height:48px} .mback{width:38px;height:44px;font-size:26px;color:var(--dim);flex:0 0 auto;line-height:1} .mback:active{color:var(--accent)} .mnow{flex:1;min-width:0;text-align:center;padding:2px 0} .mtitle{font-size:14px;font-weight:600;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .msub{font-size:11.5px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums; display:flex;gap:6px;align-items:center;justify-content:center} .mprog{height:2px;background:var(--raise)} .mprog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--mint));transition:width 1s linear} #main{ flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; padding-top:calc(var(--mtoph,96px) + 6px); padding-bottom:calc(var(--tabh) + var(--sab) + 12px); } #app[data-v="now"] #main{padding-bottom:calc(var(--tabh) + var(--sab) + 108px)} .wrap{padding:14px calc(15px + var(--sal)) 28px calc(15px + var(--sar))} .view{display:none} .view.on{display:block;animation:fade .2s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ───────────────────────────── bottom tabs ───────────────────────────── */ #tabs{ position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex; background:var(--bar); border-top:1px solid var(--line); /* Extra side inset keeps the first/last tab out of the screen's rounded corners. */ padding:0 calc(var(--sar) + 8px) var(--sab) calc(var(--sal) + 8px); transition:transform .22s var(--ease); } /* Installed on iOS, `bottom:0` does not always land on the physical screen edge. This skirt continues the bar colour downwards so there is never a visible seam, whether the gap is the home-indicator inset or the web view falling short. */ #tabs::after{content:"";position:absolute;left:0;right:0;top:100%;height:120px; background:var(--bar);pointer-events:none} body.kb #tabs{transform:translateY(110%)} .tab{flex:1;height:var(--tabh);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px;color:var(--faint);position:relative;transition:.14s var(--ease); padding-bottom:12px;border-radius:12px} .tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .tab b{font-size:9.5px;font-weight:600;letter-spacing:.03em} .tab.on{color:var(--accent)} .tab .badge,.nav .badge{position:absolute;top:7px;right:50%;margin-right:-22px;min-width:16px;height:16px; padding:0 4px;border-radius:99px;background:var(--rose);color:#1a0510;font:700 9.5px/16px sans-serif;text-align:center} /* ───────────────────────────── phone compose ───────────────────────────── */ #mcompose{ position:fixed;left:0;right:0;z-index:46;display:none; bottom:calc(var(--tabh) + var(--sab)); background:rgba(17,24,38,.97);backdrop-filter:saturate(160%) blur(14px); border-top:1px solid var(--line); padding:0 var(--sar) 0 var(--sal); transition:bottom .22s var(--ease); } #app[data-v="now"] #mcompose{display:block} body.kb #mcompose{bottom:var(--kb)} .mtags{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 6px;scrollbar-width:none} .mtags::-webkit-scrollbar{display:none} .mtags button{flex:0 0 auto;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px; border:1px solid var(--line);color:var(--dim);min-height:32px} .mtags button.on{color:#06101c;border-color:transparent} .mbar{display:flex;align-items:flex-end;gap:8px;padding:0 12px calc(9px) 12px} #mExpand{display:block;width:100%;padding:7px 0 3px;background:none} #mExpand span{display:block;width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto; transition:.16s var(--ease)} #mExpand:active span,#mcompose.tall #mExpand span{background:var(--accent)} .mhint{display:none;padding:0 14px 10px;font-size:11.5px;color:var(--faint)} .mhint b{color:var(--dim)} #mcompose.composing .mhint,#mcompose.tall .mhint{display:block} #mNote{ flex:1;background:var(--bg);border:1px solid var(--line);border-radius:20px; padding:11px 15px;max-height:130px;resize:none;line-height:1.5;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} /* focused = roomy enough to see a few lines; tall = a proper editor */ #mcompose.composing #mNote{border-radius:16px} #mcompose.tall #mNote{border-radius:16px} #mNote:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,176,255,.1)} #mSend{width:42px;height:42px;flex:0 0 auto;border-radius:99px;background:var(--accent); color:#04121f;font-size:20px;font-weight:700;line-height:1} #mSend:disabled{background:var(--raise);color:var(--faint)} /* phone segmented control inside Now */ .mpane{display:none} .mpane.on{display:block} .mseg{display:flex;gap:3px;background:var(--raise);border-radius:10px;padding:3px;margin:0 0 14px} .mseg button{flex:1;min-height:36px;font-size:13px;font-weight:600;border-radius:8px;color:var(--dim)} .mseg button.on{background:var(--accent);color:#04121f} /* ───────────────────────────── shared content ───────────────────────────── */ h1{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.3} h2{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:22px 0 10px} h2:first-child{margin-top:0} h3{font-size:15px;font-weight:600;line-height:1.4} p{color:var(--muted)} .card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:15px 16px;margin-bottom:11px} .card.tight{padding:13px 15px} .divider{height:1px;background:var(--line-soft);margin:16px 0} .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .sep{flex:1} .empty{color:var(--faint);font-size:13.2px;padding:20px 0;text-align:center;font-style:italic} .shead{margin-bottom:10px} .shead .when{font-variant-numeric:tabular-nums;font-size:12px;color:var(--dim);letter-spacing:.03em; margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .shead h1{margin-bottom:8px} .speakers{display:flex;gap:6px;flex-wrap:wrap} .spk{background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:12.5px} .spk b{font-weight:600} .spk i{font-style:normal;color:var(--dim)} .rate{display:flex;gap:2px;align-items:center;margin-top:10px} .rate button{font-size:27px;line-height:1;color:var(--faint);transition:.12s var(--ease); padding:2px 4px;min-width:40px;min-height:44px} .rate button.on{color:var(--amber)} .tier{display:inline-block;font:700 9px/1 sans-serif;padding:3px 5px;border-radius:4px;letter-spacing:.06em} .tier.S{background:rgba(255,207,107,.17);color:var(--s)} .tier.A{background:rgba(94,176,255,.15);color:var(--a)} .tier.B{background:rgba(139,160,189,.12);color:var(--b)} .tier.C{background:rgba(85,101,126,.14);color:var(--c)} .nct{font:600 9.5px/1 sans-serif;color:var(--mint);background:rgba(126,230,196,.13);padding:3px 5px;border-radius:4px} .hunt{font:700 9px/1 sans-serif;color:var(--rose);background:rgba(255,128,152,.14);padding:3px 5px;border-radius:4px} .skipm{font:700 9px/1 sans-serif;color:var(--c);background:rgba(85,101,126,.18);padding:3px 5px;border-radius:4px} .stars-mini{font-size:10px;color:var(--amber);letter-spacing:-1px} .pill{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:3px 7px;border-radius:6px;background:var(--raise);color:var(--dim);white-space:nowrap} .pill.live{background:rgba(126,230,196,.14);color:var(--mint)} .pill.preview{background:rgba(255,207,107,.14);color:var(--amber)} .why{font-size:14.5px;line-height:1.7;color:#cfdcf0} ul.check{list-style:none} ul.check li{position:relative;padding-left:16px;margin-bottom:8px;font-size:13.8px;line-height:1.6;color:var(--muted)} ul.check li:last-child{margin-bottom:0} ul.check li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:99px;background:var(--accent)} ul.ask li::before{background:var(--amber)} .callout{border-left:3px solid var(--amber);background:rgba(255,207,107,.06);padding:11px 14px; border-radius:0 var(--r) var(--r) 0;font-size:13.6px;line-height:1.62;color:#e4d4b0;margin-bottom:11px} .callout.skip{border-color:var(--c);background:rgba(85,101,126,.09);color:#b3c0d4} .callout.hunt{border-color:var(--rose);background:rgba(255,128,152,.07);color:#f0c7d2} .callout b{color:var(--text)} /* notes */ .note{display:flex;gap:10px;padding:12px 13px;background:var(--panel);border:1px solid var(--line-soft); border-radius:var(--r);margin-bottom:8px} .note .bar{flex:0 0 3px;border-radius:99px} .note .bd{flex:1;min-width:0} .note .tp{display:flex;gap:8px;align-items:center;margin-bottom:3px;flex-wrap:wrap} .note .tp .lb{font:700 9.5px/1 sans-serif;letter-spacing:.08em;text-transform:uppercase} .note .tp .st{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums} .note .tp .src{font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap} .note .txt{font-size:14px;line-height:1.6;color:#d7e2f2;white-space:pre-wrap;word-break:break-word} .note .x{color:var(--faint);font-size:19px;padding:0 6px;align-self:flex-start;min-width:34px;min-height:34px} .note.pending{opacity:.55;border-style:dashed} /* desktop composer */ .composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.18s var(--ease)} .composer:focus-within{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,176,255,.1)} .tagrow{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap} .tag{font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px;border:1px solid var(--line); color:var(--dim);transition:.14s var(--ease);min-height:34px} .tag.on{color:#06101c;border-color:transparent} .composer textarea{width:100%;padding:12px 13px;min-height:76px;max-height:210px;resize:vertical;line-height:1.62} .cfoot{display:flex;align-items:center;gap:10px;padding:8px 11px;border-top:1px solid var(--line-soft);background:var(--panel-2)} .cfoot .hint{font-size:11px;color:var(--faint);flex:1} .btn{background:var(--accent);color:#04121f;font-size:13px;font-weight:650;padding:9px 16px;border-radius:9px;min-height:38px} .btn.ghost{background:var(--raise);color:var(--muted)} .btn.sm{padding:7px 12px;font-size:12px;min-height:34px} /* board */ .board{display:grid;grid-template-columns:1fr;gap:10px} .slotcard{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px} .slotcard.filled{border-left:3px solid var(--mint)} .slotcard.gap{border-left:3px solid var(--faint)} .slotcard .n{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px} .slotcard .n b{font-size:14px;font-weight:600} .slotcard .cnt{font:700 10px/1 sans-serif;padding:5px 8px;border-radius:99px;background:var(--raise);color:var(--faint)} .slotcard.filled .cnt{background:rgba(126,230,196,.15);color:var(--mint)} .slotcard .d{font-size:12.5px;line-height:1.55;color:var(--dim)} .slotcard ul{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:6px} .slotcard ul li{font-size:12.8px;line-height:1.5;color:var(--muted);padding-left:9px;border-left:2px solid var(--line)} .slotcard ul li em{font-style:normal;color:var(--faint);font-size:11px;display:block} .evform textarea,.evsrc{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px; padding:10px 12px;line-height:1.55} .evform textarea{min-height:62px;resize:vertical} /* people */ .person{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:13px 14px;margin-bottom:10px} .person .ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .person .rk{width:24px;height:24px;border-radius:99px;background:var(--raise);color:var(--dim); font:700 11px/24px sans-serif;text-align:center;flex:0 0 auto} .person.top .rk{background:var(--rose);color:#1a0510} .person .nm{font-size:15px;font-weight:600;line-height:1.3} .person .og{font-size:12px;color:var(--dim)} .stat{display:flex;gap:2px;background:var(--raise);border-radius:9px;padding:3px;width:100%;margin-top:4px} .stat button{flex:1;font-size:11.5px;font-weight:600;padding:7px 4px;border-radius:6px;color:var(--dim);min-height:34px} .stat button.on{background:var(--mint);color:#04201a} .stat button.on[data-s="todo"]{background:var(--faint);color:#0b121c} .stat button.on[data-s="followup"]{background:var(--amber);color:#1f1604} .person .body{margin-top:10px;display:none} .person.open .body{display:block} .person textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r); padding:11px 12px;min-height:76px;line-height:1.6;resize:vertical;margin-top:10px} /* plan / prose */ .prose p{font-size:14.5px;line-height:1.75;color:#c8d6ea;margin-bottom:11px} .rule{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-soft)} .rule:last-child{border:0} .rule .i{flex:0 0 24px;height:24px;border-radius:7px;background:var(--raise);color:var(--accent);font:700 11px/24px sans-serif;text-align:center} .rule b{font-size:14px;font-weight:600;display:block;margin-bottom:3px} .rule span{font-size:13.4px;line-height:1.65;color:var(--muted)} .qrow{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 15px;margin-bottom:9px} .qrow .lb{font:700 10px/1 sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:7px} .qrow .q{font-size:14.8px;line-height:1.6;font-weight:500;color:var(--text);margin-bottom:8px} .qrow .w{font-size:13px;line-height:1.68;color:var(--dim)} .kvs{display:grid;grid-template-columns:1fr;gap:2px 16px;font-size:13.4px} .kvs dt{color:var(--dim);font-weight:600;margin-top:8px} .kvs dd{color:var(--muted);line-height:1.6} /* review */ .filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:16px} .stat-t{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);padding:11px 12px} .stat-t .v{font-size:22px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat-t .l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-top:2px} /* timeline rows (used in agenda on phone, timeline pane on desktop) */ .slot{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:10px 9px;border-radius:var(--r); cursor:pointer;position:relative;margin-bottom:2px;border-left:2px solid transparent;min-height:44px} .slot.sel{background:var(--raise);border-left-color:var(--accent)} .slot.now{background:linear-gradient(90deg,rgba(126,230,196,.13),transparent);border-left-color:var(--mint)} .slot.past{opacity:.45} .slot .tm{font-variant-numeric:tabular-nums;font-size:12px;color:var(--dim);font-weight:600;padding-top:1px} .slot.now .tm{color:var(--mint)} .slot .ti{font-size:13.4px;line-height:1.42;font-weight:500; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .slot .sp{font-size:11.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .slot.brk .ti{color:var(--muted);font-style:italic;font-weight:400} .slot .marks{display:flex;gap:4px;align-items:center;margin-top:5px;flex-wrap:wrap} /* more sheet (phone) */ #sheet{position:fixed;inset:0;z-index:80;background:rgba(4,7,12,.6);backdrop-filter:blur(4px); display:flex;align-items:flex-end;animation:fade .16s var(--ease)} .sheetbox{width:100%;background:var(--panel-2);border-top:1px solid var(--line); border-radius:18px 18px 0 0;padding:8px 12px calc(12px + var(--sab)); animation:rise .24s var(--ease)} @keyframes rise{from{transform:translateY(26px)}to{transform:none}} .grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:4px auto 10px} .sheetitem{display:block;width:100%;text-align:left;padding:13px 14px;border-radius:11px;min-height:56px} .sheetitem:active{background:var(--raise)} .sheetitem b{display:block;font-size:15px;font-weight:600} .sheetitem span{font-size:12.5px;color:var(--dim)} .sheetitem.close{text-align:center;margin-top:6px;background:var(--raise)} .sheetitem.close b{color:var(--muted)} /* question bank */ .qgroup{margin-bottom:8px} .qhead{display:flex;align-items:center;gap:9px;width:100%;padding:13px 14px;border-radius:var(--r-lg); background:var(--panel);border:1px solid var(--line-soft);text-align:left;min-height:52px} .qhead:active{background:var(--panel-2)} .qhead .nm{flex:1;min-width:0} .qhead .nm b{display:block;font-size:14.5px;font-weight:600} .qhead .nm span{font-size:12px;color:var(--dim);line-height:1.45;display:block;margin-top:2px} .qhead .chev{color:var(--faint);font-size:15px;transition:transform .2s var(--ease);flex:0 0 auto} .qgroup.open .qhead{border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom-color:transparent} .qgroup.open .qhead .chev{transform:rotate(90deg)} .qbody{display:none;border:1px solid var(--line-soft);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg); background:var(--panel);padding:2px 14px 12px} .qgroup.open .qbody{display:block} .qitem{padding:11px 0;border-top:1px solid var(--line-soft)} .qitem:first-child{border-top:0} .qitem .qq{font-size:14.5px;line-height:1.55;color:var(--text);font-weight:500} .qitem .qw{font-size:12.5px;line-height:1.6;color:var(--dim);margin-top:5px} .qitem.star .qq::before{content:"★";color:var(--amber);margin-right:7px;font-size:12px;vertical-align:1px} .starred{background:linear-gradient(180deg,rgba(255,207,107,.09),rgba(255,207,107,.03)); border:1px solid rgba(255,207,107,.22)} .starred .qitem{border-top-color:rgba(255,207,107,.14)} .tactic{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft)} .tactic:last-child{border-bottom:0} .tactic .d{flex:0 0 6px;height:6px;border-radius:99px;background:var(--mint);margin-top:8px} .tactic b{font-size:13.8px;font-weight:600;display:block;margin-bottom:2px} .tactic span{font-size:13px;line-height:1.6;color:var(--muted)} /* capture: + button, action sheet, scanner, gallery, lightbox */ #plusBtn{width:40px;height:40px;flex:0 0 auto;border-radius:99px;background:var(--raise); color:var(--accent);font-size:25px;font-weight:300;line-height:1;padding-bottom:3px} #plusBtn:active{background:var(--line)} #actions,#linkask{position:fixed;inset:0;z-index:84;background:rgba(4,7,12,.62); backdrop-filter:blur(4px);display:flex;align-items:flex-end;animation:fade .16s var(--ease)} #linkask{align-items:center;justify-content:center;padding:20px} .askbox{width:100%;max-width:440px;background:var(--panel-2);border:1px solid var(--line); border-radius:16px;padding:18px;animation:rise .2s var(--ease)} .askbox h3{font-size:16px;margin-bottom:10px} .askbox .url{font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mint); background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px; word-break:break-all;max-height:120px;overflow:auto} .askbox .note-sm{font-size:12.5px;color:var(--dim);margin:8px 0 12px} .askbox input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 13px} .askbox input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,176,255,.1)} #scanner{position:fixed;inset:0;z-index:88;background:#000;display:flex; align-items:center;justify-content:center;overflow:hidden} #scanVideo{width:100%;height:100%;object-fit:cover} .scanframe{position:absolute;width:min(68vw,280px);aspect-ratio:1;border-radius:22px; box-shadow:0 0 0 100vmax rgba(0,0,0,.55);border:2px solid rgba(126,230,196,.9)} #scanMsg{position:absolute;bottom:calc(22% + var(--sab));color:#fff;font-size:14px;font-weight:500; text-align:center;padding:9px 16px;background:rgba(0,0,0,.55);border-radius:99px;max-width:86vw} #scanClose{position:absolute;top:calc(14px + var(--sat));right:16px;color:#fff;font-size:15px; font-weight:600;background:rgba(0,0,0,.5);border-radius:99px;padding:10px 18px;min-height:44px} .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px} .shot{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;background:var(--panel); border:1px solid var(--line-soft);padding:0;display:block} .shot img{width:100%;height:100%;object-fit:cover;display:block} .shot .doc{display:grid;place-items:center;width:100%;height:100%;color:var(--dim);font:700 13px/1 sans-serif} .shot.missing img{display:none} .shot.missing::after{content:"file missing";position:absolute;inset:0;display:grid;place-items:center; color:var(--faint);font:600 10px/1.3 sans-serif;text-align:center;padding:8px} .shot .meta{position:absolute;left:0;right:0;bottom:0;padding:12px 6px 4px;font:600 9.5px/1 sans-serif; color:#fff;text-align:left;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))} .linkrow{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;background:var(--panel); border:1px solid var(--line-soft);border-radius:var(--r);margin-bottom:8px} .linkrow .lk{flex:1;min-width:0} .linkrow .lk a{font-size:14px;font-weight:500;word-break:break-word;display:block} .linkrow .lk .u{display:block;font-size:11.5px;color:var(--faint);word-break:break-all;margin-top:3px} #lightbox{position:fixed;inset:0;z-index:86;background:rgba(6,9,14,.97);display:flex;flex-direction:column} .lbbar{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--sat)) 14px 10px} .lbbar button{color:var(--muted);font-size:15px;font-weight:600;min-height:44px;padding:0 6px} .lbbar .danger{color:var(--rose)} #lbBody{flex:1;display:grid;place-items:center;overflow:auto;padding:0 10px} #lbBody img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px} .lbfoot{padding:12px 14px calc(14px + var(--sab))} .lbfoot input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 13px} #lbMeta{font-size:11.5px;color:var(--faint);margin-top:7px;text-align:center} /* map — self-hosted SVG, no tile server */ #mapwrap{position:relative;height:min(46vh,340px);border-radius:var(--r-lg);overflow:hidden; background:#0d131e;border:1px solid var(--line-soft);touch-action:none;cursor:grab;user-select:none} #mapwrap:active{cursor:grabbing} #mapinner{position:absolute;inset:0;transform-origin:0 0;will-change:transform} #mapimg{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none} .mpin{position:absolute;transform:translate(-50%,-50%);pointer-events:none} .pin{width:28px;height:28px;border-radius:99px;background:var(--c);color:#06101c; display:grid;place-items:center;font:700 14px/1 sans-serif; box-shadow:0 0 0 3px rgba(10,14,21,.85),0 4px 12px rgba(0,0,0,.5)} #mepin{position:absolute;width:16px;height:16px;border-radius:99px;background:#5eb0ff; transform:translate(-50%,-50%);box-shadow:0 0 0 3px #fff,0 0 16px rgba(94,176,255,.95); pointer-events:none} .mapatt{position:absolute;right:6px;bottom:5px;font-size:9.5px;color:var(--faint); background:rgba(13,19,30,.8);padding:2px 6px;border-radius:5px;pointer-events:none} .place{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:14px 15px;margin-bottom:10px;border-left:3px solid var(--faint)} .place.venue{border-left-color:var(--accent)} .place.hotel{border-left-color:var(--mint)} .place.metro{border-left-color:var(--amber)} .place .pn{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .place .pn b{font-size:15px;font-weight:600;flex:1;min-width:0} .place .dist{font:600 12px/1 sans-serif;color:var(--mint);font-variant-numeric:tabular-nums} .place .pa{font-size:12.5px;color:var(--dim);margin-top:3px} .place .pnote{font-size:13.2px;line-height:1.6;color:var(--muted);margin-top:7px} /* debrief */ .dbq{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:13px 15px;margin-bottom:9px} .dbq .q{font-size:14px;line-height:1.55;font-weight:500;margin-bottom:8px} .dbq textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px; padding:10px 12px;min-height:62px;line-height:1.6;resize:vertical} .dbq textarea:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,176,255,.09)} /* palette */ #palette{position:fixed;inset:0;background:rgba(4,7,12,.72);backdrop-filter:blur(5px);display:none;z-index:90;padding-top:10vh} #palette.on{display:block} .pbox{width:min(640px,92vw);margin:0 auto;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .pbox input{width:100%;padding:15px 18px;border-bottom:1px solid var(--line)} #presults{max-height:52vh;overflow-y:auto;padding:6px} .pr{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:var(--r);cursor:pointer} .pr.sel{background:var(--accent-dim)} .pr .tm{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--dim);flex:0 0 62px} .pr .ti{flex:1;font-size:13.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pr .og{font-size:11px;color:var(--dim);white-space:nowrap} #toast{position:fixed;left:50%;bottom:calc(var(--tabh) + var(--sab) + 120px);transform:translate(-50%,14px); background:var(--raise);border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:13px; font-weight:500;opacity:0;pointer-events:none;transition:.24s var(--ease);z-index:95;box-shadow:var(--shadow)} #toast.on{opacity:1;transform:translate(-50%,0)} #offline{position:fixed;top:calc(var(--sat) + 4px);left:50%;transform:translateX(-50%);z-index:96; background:rgba(255,128,152,.15);color:var(--rose);border:1px solid rgba(255,128,152,.3); border-radius:99px;padding:5px 13px;font-size:11.5px;font-weight:600} /* ───────────────────────────── desktop ───────────────────────────── */ @media (min-width:900px){ body{font-size:14px} #mtop,#tabs,#mcompose,#sheet{display:none!important} .shots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px} .shot{cursor:pointer;transition:.15s var(--ease)} .shot:hover{border-color:var(--accent-dim);transform:translateY(-1px)} #app[data-v="now"] #mcompose{display:none!important} #app{ display:grid; grid-template-columns:76px 320px 1fr; grid-template-rows:58px 1fr; grid-template-areas:"top top top" "rail mid main"; transition:grid-template-columns .28s var(--ease); } #app[data-wide="1"]{grid-template-columns:76px 0 1fr} #app[data-wide="1"] #mid{opacity:0;pointer-events:none} #top{grid-area:top;display:flex;align-items:center;gap:16px;padding:0 18px 0 14px; background:linear-gradient(180deg,#131b2a,#0e1420);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:10px;min-width:190px} .brand .dot{width:9px;height:9px;border-radius:99px;background:var(--mint);box-shadow:0 0 12px var(--mint)} .brand b{font-size:13.5px;letter-spacing:.02em} .brand span{font-size:11px;color:var(--dim);display:block;line-height:1.3;letter-spacing:.04em} .nowbar{flex:1;display:flex;align-items:center;gap:12px;min-width:0} .nowtitle{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .nowtitle small{color:var(--dim);font-weight:400} .prog{flex:0 0 150px;height:5px;border-radius:99px;background:var(--raise);overflow:hidden} .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--mint));transition:width 1s linear} .countdown{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);white-space:nowrap;min-width:74px;text-align:right} .clock{display:flex;align-items:center;gap:6px} .clock .t{font-variant-numeric:tabular-nums;font-size:19px;font-weight:600} .seg{display:flex;background:var(--raise);border-radius:8px;padding:2px;gap:1px} .seg button{font-size:11px;font-weight:600;padding:5px 9px;border-radius:6px;color:var(--dim)} .seg button.on{background:var(--accent);color:#04121f} .kbd{font:600 10px/1 ui-monospace,monospace;padding:4px 6px;border:1px solid var(--line);border-radius:5px;color:var(--dim);background:var(--panel)} #rail{grid-area:rail;display:flex;background:#0c121d;border-right:1px solid var(--line); flex-direction:column;align-items:center;padding:12px 0 10px;gap:3px} .nav{width:60px;padding:9px 0;border-radius:var(--r);display:flex;flex-direction:column;align-items:center; gap:4px;color:var(--faint);transition:.16s var(--ease);position:relative} .nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .nav b{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .nav:hover{color:var(--muted);background:var(--panel)} .nav.on{color:var(--accent);background:rgba(94,176,255,.1)} .nav.on::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:99px;background:var(--accent)} .nav .badge{top:5px;right:9px;margin-right:0} #rail .spacer{flex:1} #mid{grid-area:mid;display:flex;background:var(--panel);border-right:1px solid var(--line); flex-direction:column;overflow:hidden;transition:opacity .2s var(--ease)} .midhead{padding:11px 14px 9px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px} .midhead h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700} .daytabs{display:flex;gap:2px;margin-left:auto;background:var(--raise);border-radius:7px;padding:2px} .daytabs button{font-size:11px;font-weight:600;padding:4px 9px;border-radius:5px;color:var(--dim)} .daytabs button.on{background:var(--accent);color:#04121f} #timeline{flex:1;overflow-y:auto;padding:8px 10px 40px;scroll-behavior:smooth} .slot:hover{background:var(--panel-2)} .slot .ti{font-size:12.8px} #main{grid-area:main;padding:0;overflow-y:auto} .wrap{max-width:1040px;padding:20px 26px 60px} h1{font-size:21px} h2{font-size:13px;margin:26px 0 11px} .shead{display:flex;gap:14px;align-items:flex-start} .shead .meta{flex:1;min-width:0} .rate{margin-top:0} .rate button{font-size:20px;min-width:auto;min-height:auto;padding:1px} .rate button:hover{color:var(--amber);transform:scale(1.1)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .board{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:11px} .slotcard{cursor:pointer;transition:.16s var(--ease)} .slotcard:hover{border-color:var(--line);background:var(--panel-2)} .stat{width:auto;margin-left:auto;margin-top:0} .stat button{flex:0 0 auto;font-size:10.5px;padding:4px 10px;min-height:auto} .kvs{grid-template-columns:120px 1fr;gap:7px 16px} .kvs dt{margin-top:0} .note .x{opacity:0;transition:.14s;min-width:auto;min-height:auto;font-size:15px} .note:hover .x{opacity:1} .note .txt{font-size:13.6px} .mseg{display:none} .mpane{display:block} #toast{bottom:22px} .stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px} } @media (min-width:900px) and (max-width:1180px){.grid2{grid-template-columns:1fr}}