/* Base + Clinical theme, ported from the Conference Planner design prototype.
   Colour tokens are injected as CSS variables on #app by app.js so the accent
   can vary; everything visual keys off those variables. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Figtree', system-ui, sans-serif;
  color: #1e2732;
  background: #eef1f5;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
input, select, textarea { font-family: inherit; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #cfd6df; border-radius: 6px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #b6bfca; background-clip: content-box; }

/* A scrollbar for panes that sit INSIDE the page rather than at its edge — the calendar's left
   rail, say. The default 10px track lands a few pixels from the content and reads as a hard grey
   seam down the middle of the screen, which is a lot of emphasis for something you rarely use.
   Thin, and invisible until you are actually in that pane. */
.chq-quiet-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.chq-quiet-scroll:hover, .chq-quiet-scroll:focus-within { scrollbar-color: #dde2e9 transparent; }
.chq-quiet-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.chq-quiet-scroll::-webkit-scrollbar-track { background: transparent; }
.chq-quiet-scroll::-webkit-scrollbar-thumb {
  background: transparent; border: none; border-radius: 999px;
  transition: background .15s ease;
}
.chq-quiet-scroll:hover::-webkit-scrollbar-thumb,
.chq-quiet-scroll:focus-within::-webkit-scrollbar-thumb { background: #dde2e9; }
.chq-quiet-scroll::-webkit-scrollbar-thumb:hover { background: #c3cbd6; }

@keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastIn  { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes chqspin  { to { transform: rotate(360deg); } }
@keyframes chqslide { 0% { left: -35%; } 100% { left: 100%; } }

/* Native controls should inherit the app's ink colour, not the UA default. */
select, input, textarea { color: var(--ink, #1e2732); }

/* Hover / press micro-interactions on everything clickable — buttons, links,
   and any element the app marks with an inline cursor:pointer (cards, rows,
   chips, swatches, nav items). Pure :hover/:active transitions, so they never
   replay on a re-render the way entrance animations would. */
button, a,
[style*="cursor:pointer"], [style*="cursor: pointer"] {
  transition: transform .12s ease, box-shadow .15s ease,
              background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover:not(:disabled), a:hover,
[style*="cursor:pointer"]:hover, [style*="cursor: pointer"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px -7px rgba(20, 30, 50, .30);
}
button:active:not(:disabled), a:active,
[style*="cursor:pointer"]:active, [style*="cursor: pointer"]:active {
  transform: translateY(0) scale(.99);
  box-shadow: none;
}
button:disabled { cursor: default; }

/* Topbar account cluster — as the window narrows, the cluster gives up its text
   before the nav gives up its items. Everything fits above ~1376px; below that the
   presence pill drops its label (the avatars still show who is here), then the
   signed-in chip collapses to its avatar with the name in its tooltip. Only on
   genuinely small windows does the nav tighten and finally scroll sideways. */
@media (max-width: 1375px) {
  .chq-topbar-preslabel { display: none !important; }
}
@media (max-width: 1330px) {
  .chq-topbar-name { display: none !important; }
}
@media (max-width: 1150px) {
  .chq-topbar-nav button { padding: 0 8px !important; font-size: 12px !important; }
  /* The conference name keeps its place on a narrow window, just less of it —
     it still says which conference you are in, and the tooltip has it in full. */
  .chq-topbar-conf { max-width: 140px; }
}
/* The topbar nav scrolls when it must, without an ugly scrollbar across the bar. */
.chq-topbar-nav::-webkit-scrollbar { display: none; }

/* Stale-tab warning in the corner — short, red, and flashing so it can't be missed. */
@keyframes chqflash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Links inside a note. In an editable box the pointer is an I-beam and a link looks like ordinary
   underlined text, so it reads as something to edit rather than something to open. The arrow and
   the hand say otherwise, and the tooltip the sanitiser puts on each link says where it goes. */
[data-rich] a[href] {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 3px;
  padding: 0 1px;
}
[data-rich] a[href]::after {
  content: '\2197';
  display: inline-block;
  margin-left: 2px;
  font-size: .8em;
  vertical-align: super;
  opacity: .65;
  /* the arrow is decoration, not part of the note — never selectable or copied */
  -webkit-user-select: none;
  user-select: none;
}
[data-rich] a[href]:hover {
  background: rgba(45, 108, 181, .1);
  text-decoration-thickness: 2px;
}
[data-rich] a[href]:hover::after { opacity: 1; }