/* ==========================================================================================
   Quantora shared page shell: the sidebar that stays in view on every signed-in page.
   Loaded after each page's own styles, so these rules win where both define the layout.
   ========================================================================================== */

/* Colours. Each page defines --bg, --card, --line, --ink, --mute, --mint, --amber and --red for the
   default (navy) look; the rest are defined here. A theme chosen on the Profile page (QT.setTheme,
   remembered in this browser) sets <html data-theme="..."> and overrides them. */
:root{--well:#0B1524;--scroll:#46597a;--dim:#5d7090;--okbg:#12362c;--okline:#1f5e4a;--badbg:#3a1d28;--badline:#6b2f40;
  --warnbg:#3b3216;--warnline:#6b5a22;--link:#6BB8FF;--card2:#1b3352}
html[data-theme="dark"]{--bg:#0B0B0D;--card:#17181B;--card2:#1F2024;--line:#2A2C31;--ink:#EDEDEF;--mute:#A3A6AD;--well:#08080A;
  --scroll:#3A3D44;--dim:#6B6F78}
html[data-theme="white"]{--bg:#FFFFFF;--card:#F4F6F9;--card2:#E9EEF4;--line:#D8DEE6;--ink:#14202E;--mute:#556372;--mint:#0E9F6E;
  --amber:#B7791F;--red:#C53030;--well:#EBEFF4;--scroll:#B8C2CE;--dim:#8C98A6;--okbg:#DDF5EA;--okline:#9ED9BF;--badbg:#FDE4E4;
  --badline:#F0A8A8;--warnbg:#FDF1D8;--warnline:#E8C77A;--link:#1F6FD1}
html[data-theme="grey"]{--bg:#D9DDE2;--card:#EEF0F3;--card2:#E4E8EC;--line:#BFC6CF;--ink:#17202B;--mute:#4B5664;--mint:#0B8A5F;
  --amber:#9C6511;--red:#B42318;--well:#E3E7EB;--scroll:#9AA5B1;--dim:#7C8794;--okbg:#D3EEE2;--okline:#8FCBAF;--badbg:#F6DADA;
  --badline:#E09A9A;--warnbg:#F5E7C8;--warnline:#D9B76A;--link:#1A5FB4}
html[data-theme="white"],html[data-theme="grey"]{color-scheme:light}
html[data-theme="white"] body,html[data-theme="grey"] body{scrollbar-color:var(--scroll) var(--bg)}

/* Desktop: the sidebar is fixed to the left edge and never scrolls away with the page. */
.app{display:block;min-height:100vh}
.app>aside{position:fixed;top:0;left:0;bottom:0;width:240px;z-index:20;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--bg);padding:24px 16px;display:flex;flex-direction:column;gap:6px}
.app>main{margin-left:240px;width:auto}

/* The logo is a link back to the home page (Overview). */
.app>aside .logo{display:block;padding:0 12px 18px;font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;
  letter-spacing:3px;font-size:16px;color:var(--mint);text-decoration:none}
.app>aside .logo:hover{filter:brightness(1.15)}

/* Navigation links */
.app>aside .nav{display:flex;justify-content:space-between;align-items:center;color:var(--mute);text-decoration:none;
  text-align:left;padding:10px 12px;border-radius:10px;width:100%;background:none;border:0;font:inherit}
.app>aside .nav:hover{color:var(--ink)}
.app>aside .nav.on{background:var(--card);color:var(--ink)}
.app>aside .nav.off{opacity:.55;pointer-events:none}
.app>aside .tag{font-size:11px;background:var(--line);color:var(--mute);border-radius:99px;padding:2px 8px}
.app>aside .tag.unread{background:var(--amber);color:var(--bg);font-weight:700}
.app>aside .who{margin-top:auto;font-size:13px;color:var(--mute);padding:12px;word-break:break-all}
.app>aside .who .terms-link,.terms-link{color:var(--link);text-decoration:underline}
.app>aside .who button{background:none;border:0;color:var(--mint);padding:0;margin-top:4px;text-decoration:underline;cursor:pointer;font:inherit}

/* Phones and small tablets: the sidebar becomes a bar that sticks to the top of the screen,
   with the links in one row that can be swiped sideways. */
@media(max-width:860px){
  .app>aside{position:sticky;bottom:auto;width:auto;height:auto;flex-direction:row;align-items:center;gap:4px;
    padding:10px 12px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line)}
  .app>aside .logo{padding:0 10px 0 4px;flex:none}
  .app>aside .nav{width:auto;flex:none;white-space:nowrap;padding:8px 10px}
  .app>aside .tag{display:none}.app>aside .tag.unread:not([hidden]){display:inline}
  .app>aside .who{margin:0 0 0 auto;padding:0 4px;flex:none}
  .app>aside .who span{display:none}
  .app>main{margin-left:0}
}

/* ==========================================================================================
   Carousel (QT.carousel in shell.js): slides that advance on their own and can be swiped
   ========================================================================================== */
.qc{position:relative;margin-bottom:24px}
.qc-view{display:grid;overflow:hidden;border-radius:18px;touch-action:pan-y}       /* vertical page scroll stays native */
.qc-slide{grid-area:1/1;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s;will-change:transform;
  background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:18px;padding:22px 24px;min-height:210px;
  display:flex;gap:20px;align-items:stretch}
.qc-slide[aria-hidden="true"]{visibility:hidden}.qc-slide.near{visibility:visible}
.qc.dragging .qc-slide{transition:none}
.qc-nav{position:absolute;top:50%;transform:translateY(-70%);width:34px;height:34px;border-radius:17px;border:1px solid var(--line);
  background:#0B1524cc;color:var(--ink);font-size:18px;line-height:1;display:grid;place-items:center;z-index:2;cursor:pointer}
.qc-nav:hover{border-color:var(--mint)}.qc-prev{left:-12px}.qc-next{right:-12px}
.qc-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.qc-dot{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:var(--mint);opacity:.28;transition:opacity .5s,width .5s;cursor:pointer}
.qc-dot.on{opacity:1;width:22px}
@media(max-width:600px){.qc-slide{flex-direction:column;padding:18px}.qc-nav{display:none}}
@media(prefers-reduced-motion:reduce){.qc-slide,.qc-dot{transition:none}}

/* ==========================================================================================
   Chat (QT.chatPanel in chat.js)
   ========================================================================================== */
.ch{display:flex;flex-direction:column;height:100%;min-height:0}
.ch-search{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;align-items:center}.ch-search>input{flex:1 1 110px}
.ch-search input{padding:7px 9px;font-size:13px;min-width:0}.ch-search input[type=date]{width:auto}
.ch-sbtn{padding:0!important;width:34px;height:34px;display:grid;place-items:center;border-radius:10px}.ch-sbtn svg{display:block}
.ch-note{font-size:12px;color:var(--mute);background:var(--well);border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:8px}
.ch-list{flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.ch-more{display:block;margin:4px auto 10px;background:none;border:1px solid var(--line);color:var(--mute);border-radius:99px;padding:4px 12px;font-size:12px}
.ch-msgs{display:flex;flex-direction:column;gap:8px}
.ch-msg{max-width:88%;align-self:flex-start;background:var(--well);border:1px solid var(--line);border-radius:14px;padding:7px 11px;transition:box-shadow .4s}
.ch-msg.me{align-self:flex-end;background:var(--okbg);border-color:var(--okline)}.ch-msg.team{border-color:var(--amber)}
.ch-msg.flash{box-shadow:0 0 0 2px var(--amber)}
.ch-head{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--mute)}
.ch-name{background:none;border:0;padding:0;color:var(--mint);font-weight:600;font-size:12px}.ch-name:disabled{color:var(--ink);cursor:default}
.ch-msg.team .ch-name{color:var(--amber)}
.ch-body{white-space:pre-wrap;word-break:break-word;font-size:14px;margin-top:2px}.ch-at{color:var(--amber)}
.ch-quote{display:block;border-left:3px solid var(--mint);padding:2px 8px;margin:4px 0;font-size:12px;color:var(--mute);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch-quote b{color:var(--ink)}
.ch-chip{display:inline-flex;gap:6px;align-items:center;margin-top:4px;background:var(--line);border-radius:8px;padding:4px 9px;font-size:13px;color:var(--ink);text-decoration:none}
.ch-chip span{color:var(--mute);font-size:11px}
.ch-act{background:none;border:0;color:var(--mute);font-size:11px;padding:2px 0;margin-top:2px}.ch-act:hover{color:var(--mint)}
.ch-tick{font-size:12px;letter-spacing:-3px;color:var(--mute);margin-left:auto;padding-right:3px}.ch-tick.read{color:var(--link)}
.ch-compose{position:relative;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.ch-reply,.ch-file{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;color:var(--mute);
  background:var(--well);border-radius:8px;padding:4px 8px;margin-bottom:6px}.ch-reply button,.ch-file button{background:none;border:0;color:var(--mute)}
.ch-row{display:flex;gap:8px;align-items:flex-end}
/* The message box: styled here (not by the page) so it looks the same on every page; about three lines high,
   grows with the text up to ~9 lines, then scrolls. */
.ch-row textarea{flex:1;resize:none;min-height:84px;max-height:230px;padding:11px 13px;font:15px/1.5 Inter,Arial,sans-serif;
  background:var(--well);color:var(--ink);border:1px solid var(--line);border-radius:12px;scrollbar-width:thin}
.ch-row textarea:focus{outline:2px solid var(--mint);outline-offset:1px}
.ch-row textarea::placeholder{color:var(--dim)}
.ch-send{height:44px}.ch-body{font-size:15px!important}
/* right-click menu on a message */
.ch-menu{position:fixed;z-index:80;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;min-width:180px;
  box-shadow:0 10px 30px #0008;display:flex;flex-direction:column}
.ch-menu button{background:none;border:0;color:var(--ink);text-align:left;padding:8px 12px;border-radius:8px;font:14px Inter,Arial,sans-serif}
.ch-menu button:hover,.ch-menu button:focus{background:var(--line);outline:none}
.ch-attach{cursor:pointer;font-size:18px;padding:6px 4px;margin:0}.ch-send{padding:8px 12px!important}
.ch-suggest{position:absolute;bottom:100%;left:30px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;flex-direction:column;z-index:5}
.ch-suggest{max-height:240px;overflow-y:auto;min-width:200px}
.ch-suggest button{background:none;border:0;color:var(--ink);text-align:left;padding:6px 10px;border-radius:6px;font-size:14px}
.ch-suggest button:hover,.ch-suggest button.on{background:var(--line);color:var(--mint)}
.ch-dl{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mute);margin:0;flex:1 1 150px}.ch-dl input{flex:1}
.ch-dlg{position:fixed;inset:0;background:#0009;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.ch-dlg-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;width:100%;max-width:420px}
.ch-dlg-box h3{margin:0 0 6px}.ch-dlg-box label{display:block;font-size:13px;color:var(--mute);margin-top:12px}
.ch-dlg-box input{width:100%;margin-top:5px;background:var(--well);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--ink);font:inherit}
.ch-dlg-box blockquote{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--red,var(--red));background:var(--well);border-radius:6px;font-size:13px;color:var(--ink)}
.ch-dlg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.ch [hidden]{display:none!important}        /* the flex/block rules above must not un-hide hidden parts */

/* Performance curve (QT.curve) and its dialog (QT.curveDialog) */
.cv{position:relative}.cv svg{display:block;touch-action:none}
.cv-band.test{fill:var(--amber);opacity:.12}.cv-band.live{fill:var(--mint);opacity:.14}
.cv-grid{stroke:var(--line);stroke-width:1}.cv-ax{fill:var(--mute);font-size:11px}
.cv-need{stroke:var(--mute);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.cv-line{fill:none;stroke:var(--mint);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.cv-dot{fill:var(--mint)}
.cv-hover{stroke:var(--mute);stroke-width:1}.cv-hdot{fill:var(--mint);stroke:var(--card);stroke-width:2}.cv-hit{fill:transparent;cursor:crosshair}
.cv-tip{position:absolute;top:8px;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  font-size:12px;color:var(--ink);box-shadow:0 6px 18px #0005;min-width:130px;z-index:2}.cv-tip .cv-big{font:700 18px 'Space Grotesk',Arial,sans-serif}
.cv-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--mute)}.cv-key span{display:flex;align-items:center;gap:6px}
.cv-k{display:inline-block;width:16px;height:10px;border-radius:3px}.cv-k.line{height:2px;background:var(--mint)}
.cv-k.need{height:0;border-top:1px dashed var(--mute)}.cv-k.test{background:var(--amber);opacity:.35}.cv-k.live{background:var(--mint);opacity:.35}
.cv-k.hist{border:1px solid var(--line)}
.cv-table{margin-top:10px;font-size:13px}.cv-table summary{cursor:pointer;color:var(--mute)}.cv-table .scroll{max-height:260px;overflow:auto;margin-top:8px}
.cv-table table{width:100%;border-collapse:collapse}.cv-table th,.cv-table td{text-align:left;padding:5px 8px;border-top:1px solid var(--line)}
.cv-dlg{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px;z-index:70}
.cv-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;width:100%;max-width:920px;max-height:92vh;overflow:auto;color:var(--ink)}
.cv-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.cv-head h3{margin:0}
.cv-x{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:10px;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer}
.cv-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}