/* styles/chat.css */
/* NEXORA Chat: the designer's own agent conversation page (nexora_cockpit_analytics.html,
   chat-main-template plus everything initAgentChat builds at runtime) rebuilt in this dashboard's
   skin. The directory, the heading, the line, the search, the roster, the footer, the conversation
   heading, the thread, the welcome block, the prompt chips, the composer, the demo note, the
   attachment tools, the file cards and the drag and drop outline are all the designer's; the type
   scale, the radii, the colours, the spacing and the control shapes are measured off the pages
   already in this folder (styles/integrations.css, styles/presence.css, styles/health.css,
   styles/terminal.css), not imported from his stylesheet. None of his hex values crossed over:
   #e75b20 became var(--clv-accent), #fbf4eb var(--clv-background), #f2ece4 var(--clv-secondary),
   #ded5ca var(--clv-border), the footer's #1a120e gradient var(--clv-ink), and so on.
   Every selector is scoped to .clv-page.
   Radii follow the the reference design theme (--radius 1rem): rounded-md 12, -lg 16, -xl 22, -2xl 28, -3xl 36.
   Breakpoints are Tailwind's: sm 640, md 768, lg 1024, xl 1280. */

/* ---- tokens (styles.css :root) ------------------------------------------------------------ */
.clv-page{
  --clv-background:var(--background);
  --clv-foreground:var(--foreground);
  --clv-card:var(--card);
  --clv-secondary:var(--secondary);
  --clv-muted-foreground:var(--muted-foreground);
  --clv-accent:var(--accent);
  --clv-accent-text:var(--accent-text);
  --clv-accent-foreground:var(--accent-foreground);
  --clv-border:var(--border);
  --clv-ink:var(--ink);
  --clv-ink-foreground:var(--ink-foreground);
  --clv-ink-muted:var(--ink-muted);
  --clv-destructive:var(--destructive);
  --clv-shadow-soft:var(--shadow-soft);
  /* the radii follow the theme's --radius, so Settings > Appearance > Corners reaches this page */
  --clv-r-sm:var(--radius-sm);--clv-r-md:var(--radius-md);--clv-r-lg:var(--radius-lg);--clv-r-xl:var(--radius-xl);--clv-r-2xl:var(--radius-2xl);--clv-r-3xl:var(--radius-3xl);
  --clv-r-full:999px;
  --clv-ease:cubic-bezier(.4,0,.2,1);

  /* Tailwind's slash opacities, as the browser computes them (oklab mixes) */
  --clv-inkfg-06:color-mix(in oklab,var(--clv-ink-foreground) 6%,transparent);
  --clv-inkfg-10:color-mix(in oklab,var(--clv-ink-foreground) 10%,transparent);
  --clv-inkfg-14:color-mix(in oklab,var(--clv-ink-foreground) 14%,transparent);
  --clv-inkfg-25:color-mix(in oklab,var(--clv-ink-foreground) 25%,transparent);
  --clv-accent-10:color-mix(in oklab,var(--clv-accent) 10%,transparent);
  --clv-accent-18:color-mix(in oklab,var(--clv-accent) 18%,transparent);
  --clv-accent-25:color-mix(in oklab,var(--clv-accent) 25%,transparent);
  --clv-accent-60:color-mix(in oklab,var(--clv-accent) 60%,transparent);
  --clv-secondary-55:color-mix(in oklab,var(--clv-secondary) 55%,transparent);

  /* the chrome above and below the card: the topbar measures 99px and <main> pads 32px top and
     bottom from md up (48px of padding and a 109px topbar below it), so the conversation ends
     exactly where the viewport does and the page itself never scrolls */
  --clv-chrome:157px;
}
@media(min-width:768px){.clv-page{--clv-chrome:163px}}

/* ---- page root: the sections sit directly in <main> (flex flex-col gap-5 px-5 py-6 md:px-8
   md:py-8, see styles/shell.css); this wrapper only carries the tokens. The preflight resets
   already apply globally from styles/shell.css. */
.clv-page{display:flex;flex-direction:column;gap:20px;color:var(--clv-foreground);font-family:var(--font-sans);font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased}
.clv-page *,.clv-page *::before,.clv-page *::after{box-sizing:border-box;border-color:var(--clv-border)}
.clv-page h1,.clv-page h2,.clv-page h3,.clv-page p{margin:0;padding:0;font-size:inherit;font-weight:inherit}
.clv-page button{font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;background:transparent;border:0 solid var(--clv-border);margin:0;padding:0;letter-spacing:normal;border-radius:0;cursor:pointer;min-height:0}
.clv-page input,.clv-page textarea{font-family:inherit;letter-spacing:normal}
.clv-page a{color:inherit;text-decoration:none}

/* ---- utilities from styles.css ------------------------------------------------------------ */
.clv-page .clv-eyebrow{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clv-muted-foreground);font-weight:400}
.clv-page .clv-display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:.95}
.clv-page .clv-on-ink{color:var(--clv-ink-muted)}
.clv-page .clv-live-dot{animation:clv-pulse 1.8s ease-in-out infinite}
@keyframes clv-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

/* one focus ring for the whole page, the accent one every other page uses */
.clv-page button:focus-visible,.clv-page input:focus-visible,.clv-page textarea:focus-visible,.clv-page a:focus-visible{outline:2px solid var(--clv-accent);outline-offset:2px;border-radius:var(--clv-r-md)}

/* ================================================================================= the shell ==
   The designer's .agent-chat: one bordered card, the directory on the left and the conversation on
   the right, as tall as what is left of the viewport. Radius, border and shadow are this
   dashboard's card (see .ilv-app / .hlv-card), not his 24px. */
.clv-page .clv-shell{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
  height:calc(100dvh - var(--clv-chrome));min-height:620px;
  border:1px solid var(--clv-border);border-radius:var(--clv-r-3xl);overflow:hidden;
  background:var(--clv-card);box-shadow:var(--clv-shadow-soft)}
@media(min-width:1024px){
  .clv-page .clv-shell{grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:560px}
}

/* ============================================================================== the directory ==
   .chat-directory: his warm panel becomes this dashboard's secondary surface. */
.clv-page .clv-directory{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  background:var(--clv-secondary-55);border-bottom:1px solid var(--clv-border);padding:20px 16px}
@media(min-width:1024px){
  .clv-page .clv-directory{border-bottom:0;border-right:1px solid var(--clv-border);padding:26px 16px}
}
.clv-page .clv-directory-h1{margin-top:10px;font-size:1.625rem}
@media(min-width:1024px){.clv-page .clv-directory-h1{font-size:2.125rem}}
.clv-page .clv-directory-lede{margin-top:8px;font-size:0.8125rem;line-height:1.1875rem;color:var(--clv-muted-foreground)}

/* .chat-search, in the shape styles/integrations.css gives a search field (.ilv-search) */
.clv-page .clv-search{display:flex;height:44px;min-width:0;align-items:center;gap:10px;margin-top:18px;
  border-radius:var(--clv-r-xl);border:1px solid var(--clv-border);background:var(--clv-card);
  padding:0 14px;font-size:0.875rem;line-height:1.25rem}
.clv-page .clv-search:focus-within{border-color:var(--clv-accent-60)}
.clv-page .clv-search-glyph{flex:none;font-family:var(--font-mono);color:var(--clv-muted-foreground)}
.clv-page .clv-search input{min-width:0;flex:1;border:0;background:transparent;outline:none;
  color:var(--clv-foreground);font-size:0.875rem;line-height:1.25rem}
.clv-page .clv-search input::placeholder{color:var(--clv-muted-foreground);opacity:1}
.clv-page .clv-search input::-webkit-search-cancel-button{display:none}

/* ---- the roster: a column of specialists on desktop, a scrolling strip on a phone ----------- */
/* The wrapper scrolls, the roster inside it is a plain content sized grid. Putting both on one
   element does not work: a grid that is its own scroll box and has a definite height divides that
   height among its auto rows, and the fifteen cards overlap. */
.clv-page .clv-roster-scroll{flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--clv-border) transparent}
.clv-page .clv-roster-scroll::-webkit-scrollbar{width:6px}
.clv-page .clv-roster-scroll::-webkit-scrollbar-thumb{background:var(--clv-border);border-radius:var(--clv-r-full)}
.clv-page .clv-roster{display:grid;gap:6px;margin-top:14px}
.clv-page .clv-person{display:flex;gap:12px;align-items:center;width:100%;text-align:left;min-width:0;
  padding:10px;border:1px solid transparent;border-radius:var(--clv-r-lg);
  transition:background-color .15s var(--clv-ease),border-color .15s var(--clv-ease)}
.clv-page .clv-person:hover{background:var(--clv-card)}
.clv-page .clv-person[aria-pressed="true"]{background:var(--clv-card);border-color:var(--clv-accent-60)}
.clv-page .clv-person-copy{min-width:0}
.clv-page .clv-person b{display:block;font-size:0.8125rem;line-height:1.125rem;font-weight:500}
.clv-page .clv-person small{display:block;margin-top:3px;font-size:0.6875rem;line-height:0.9375rem;color:var(--clv-muted-foreground)}
.clv-page .clv-person[hidden]{display:none}
.clv-page .clv-roster-empty{margin-top:14px;font-size:0.75rem;line-height:1.125rem;color:var(--clv-muted-foreground)}
.clv-page .clv-roster-empty[hidden]{display:none}

/* .chat-avatar: the same round portrait the Presence rail wears (.plv-agent i) */
.clv-page .clv-avatar{display:block;flex:none;width:44px;height:44px;border-radius:var(--clv-r-full);
  background-color:var(--clv-ink);background-size:cover;background-position:center;
  border:1px solid var(--clv-border)}
.clv-page .clv-person[aria-pressed="true"] .clv-avatar{border-color:var(--clv-accent-text);box-shadow:0 0 0 3px var(--clv-accent-10)}

/* ---- the footer: his .chat-directory-foot ink panel, carrying the three facts the page owes
   you. The count, the separateness and the preview line are the page's own honest copy; his
   runtime "All agents online / Ready / Shared context Synced" did not come across, because with no
   backend connected this page cannot know any of it (see scripts/chat.js). */
.clv-page .clv-directory-foot{flex:none;margin-top:16px;padding:16px;border:1px solid var(--clv-inkfg-14);
  border-radius:var(--clv-r-xl);background:var(--clv-ink);color:var(--clv-ink-foreground)}
@media(min-width:1024px){.clv-page .clv-directory-foot{margin-top:20px}}
.clv-page .clv-foot-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px}
.clv-page .clv-foot-kicker i{width:6px;height:6px;flex:none;border-radius:var(--clv-r-full);background:var(--clv-accent)}
.clv-page .clv-foot-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:end;margin:14px 0}
.clv-page .clv-foot-main b{min-width:0;font-size:0.8125rem;line-height:1.125rem;font-weight:500}
.clv-page .clv-foot-main small{grid-column:1/2;min-width:0;font-size:0.6875rem;line-height:1rem;color:var(--clv-ink-muted)}
.clv-page .clv-foot-main strong{grid-column:2;grid-row:1/3;font-family:var(--font-display);font-size:1.875rem;
  line-height:1;font-weight:400;letter-spacing:-.01em;color:var(--accent-on-ink);font-variant-numeric:tabular-nums}
.clv-page .clv-foot-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;
  border-top:1px solid var(--clv-inkfg-14);padding-top:12px;
  font-family:var(--font-mono);font-size:0.625rem;line-height:0.9375rem;color:var(--clv-ink-muted)}
.clv-page .clv-foot-line em{font-style:normal;color:var(--accent-on-ink)}

/* =========================================================================== the conversation ==
   .chat-conversation: a column of heading, thread and composer, each sized so only the thread
   scrolls. */
.clv-page .clv-conversation{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--clv-card)}

/* ---- .chat-heading -------------------------------------------------------------------------- */
.clv-page .clv-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;
  padding:16px 20px;border-bottom:1px solid var(--clv-border)}
@media(min-width:768px){.clv-page .clv-heading{padding:20px 28px}}
.clv-page .clv-heading-copy{min-width:0;flex:1 1 140px}
.clv-page .clv-heading h2{font-size:1.125rem;line-height:1.5rem;font-weight:500}
.clv-page .clv-heading p{margin-top:4px;font-size:0.6875rem;line-height:0.9375rem;color:var(--clv-muted-foreground)}
/* the same outline control the other pages use for a secondary action (.ilv-tab / .plv-tool) */
.clv-page .clv-reset{flex:none;border-radius:var(--clv-r-2xl);border:1px solid var(--clv-border);
  padding:8px 14px;font-size:0.75rem;line-height:1rem;color:var(--clv-muted-foreground);
  transition:background-color .15s var(--clv-ease),color .15s var(--clv-ease),border-color .15s var(--clv-ease)}
.clv-page .clv-reset:hover{background:var(--clv-secondary);color:var(--clv-foreground)}
.clv-page .clv-reset[data-armed="true"]{border-color:var(--clv-accent-60);color:var(--clv-accent-text)}

/* ---- .chat-thread and .chat-welcome ---------------------------------------------------------- */
.clv-page .clv-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:24px 20px;scrollbar-width:thin;scrollbar-color:var(--clv-border) transparent}
@media(min-width:768px){.clv-page .clv-thread{padding:28px clamp(20px,4vw,64px)}}
.clv-page .clv-thread::-webkit-scrollbar{width:6px}
.clv-page .clv-thread::-webkit-scrollbar-thumb{background:var(--clv-border);border-radius:var(--clv-r-full)}
.clv-page .clv-welcome{padding-bottom:26px;border-bottom:1px solid var(--clv-border);margin-bottom:26px}
/* the designer's clamp, landing on this dashboard's own display sizes (34px in the directory,
   36px here) rather than his 40px */
.clv-page .clv-welcome h3{margin:12px 0;font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;
  line-height:1.1;font-size:clamp(1.625rem,3vw,2.25rem)}
.clv-page .clv-welcome p{max-width:470px;font-size:0.8125rem;line-height:1.25rem;color:var(--clv-muted-foreground)}

/* ---- messages: yours on the right in the accent bubble, the agent's on the left in a soft one,
   the way the chat dock and the old Mission Control chat read ---- */
.clv-page .clv-thread{display:flex;flex-direction:column}
.clv-page .clv-msg{max-width:78%;margin:0 0 14px;display:flex;flex-direction:column}
.clv-page .clv-msg small{display:block;margin:0 6px 5px;font-family:var(--font-mono);font-size:0.5625rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clv-muted-foreground)}
.clv-page .clv-msg p{margin:0;padding:11px 15px;font-size:0.875rem;line-height:1.375rem;white-space:pre-wrap;overflow-wrap:anywhere;
  border-radius:18px;box-shadow:var(--clv-shadow-soft)}
.clv-page .clv-msg.user{align-self:flex-end;align-items:flex-end}
.clv-page .clv-msg.user p{background:var(--clv-accent);color:var(--clv-accent-foreground);border-bottom-right-radius:5px}
.clv-page .clv-msg.agent{align-self:flex-start;align-items:flex-start}
.clv-page .clv-msg.agent p{background:var(--clv-secondary);color:var(--clv-foreground);border:1px solid var(--clv-border);border-bottom-left-radius:5px}
.clv-page .clv-msg.agent.is-pending p{color:var(--clv-muted-foreground);font-style:italic}
.clv-page .clv-msg + .clv-msg.user, .clv-page .clv-msg.user + .clv-msg.agent{margin-top:6px}
@media(min-width:768px){.clv-page .clv-msg{max-width:70%}}

/* ================================================================================ the composer ==
   .chat-compose: prompt chips, the attachment tray, the input row, the status line and the note. */
.clv-page .clv-compose{flex:none;padding:14px 20px 18px;border-top:1px solid var(--clv-border);background:var(--clv-card)}
@media(min-width:768px){.clv-page .clv-compose{padding:16px 28px 20px}}
.clv-page .clv-compose.is-dragging{outline:2px dashed var(--clv-accent);outline-offset:-4px;border-radius:var(--clv-r-lg)}

/* .chat-prompts, in the shape styles/presence.css gives a suggested prompt (.plv-actions button) */
.clv-page .clv-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.clv-page .clv-prompts button{border-radius:var(--clv-r-2xl);border:1px solid var(--clv-border);
  padding:8px 12px;font-size:0.75rem;line-height:1rem;color:var(--clv-muted-foreground);
  transition:background-color .15s var(--clv-ease),color .15s var(--clv-ease)}
.clv-page .clv-prompts button:hover{background:var(--clv-secondary);color:var(--clv-foreground)}

/* ---- the attachment tray and its cards ------------------------------------------------------- */
.clv-page .clv-files{display:flex;flex-wrap:wrap;gap:8px;max-height:180px;overflow:auto;margin-bottom:10px}
.clv-page .clv-files:empty{display:none}
.clv-page .clv-file-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%;
  border:1px solid var(--clv-border);border-radius:var(--clv-r-md);background:var(--clv-background);padding:8px 10px}
.clv-page .clv-msg .clv-file-card{margin-top:10px}
/* cover turned a wide screenshot into a meaningless 56px sliver of its middle; contain shows what
   the file actually is, on a ground that gives the shape somewhere to sit */
.clv-page .clv-file-card img{width:56px;height:56px;flex:none;object-fit:contain;
  background:var(--clv-secondary);border-radius:var(--clv-r-sm)}
.clv-page .clv-file-card audio{width:240px;max-width:100%;height:36px}
.clv-page .clv-file-card a{min-width:0;font-family:var(--font-mono);font-size:0.6875rem;line-height:1rem;
  color:var(--clv-muted-foreground);overflow-wrap:anywhere}
.clv-page .clv-file-card a:hover{color:var(--clv-accent-text)}
.clv-page .clv-file-drop{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--clv-r-full);
  font-size:1rem;line-height:1;color:var(--clv-muted-foreground);transition:background-color .15s var(--clv-ease),color .15s var(--clv-ease)}
.clv-page .clv-file-drop:hover{background:var(--clv-secondary);color:var(--clv-destructive)}

/* ---- the input row: the attachment tools, the textarea and the send control ------------------- */
.clv-page .clv-input-wrap{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--clv-border);background:var(--clv-background);border-radius:var(--clv-r-xl)}
.clv-page .clv-input-wrap:focus-within{border-color:var(--clv-accent-60)}
.clv-page .clv-input-wrap textarea{flex:1;min-width:0;height:44px;padding:12px 2px;resize:none;border:0;
  background:transparent;outline:none;color:var(--clv-foreground);font-size:0.875rem;line-height:1.25rem}
.clv-page .clv-input-wrap textarea::placeholder{color:var(--clv-muted-foreground);opacity:1}

.clv-page .clv-media-tools{display:flex;align-items:center;gap:2px}
.clv-page .clv-media-tools button{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:var(--clv-r-md);color:var(--clv-muted-foreground);
  transition:color .15s var(--clv-ease),background-color .15s var(--clv-ease)}
.clv-page .clv-media-tools button:hover{color:var(--clv-accent-text);background:var(--clv-secondary)}
.clv-page .clv-media-tools button[aria-pressed="true"]{color:var(--clv-accent-foreground);background:var(--clv-accent)}
.clv-page .clv-media-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the accent send square from styles/presence.css (.plv-input button) */
.clv-page .clv-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--clv-r-lg);
  background:var(--clv-accent);color:var(--clv-accent-foreground);font-size:1.1875rem;line-height:1;
  transition:transform .15s var(--clv-ease),opacity .15s var(--clv-ease)}
.clv-page .clv-send:hover:not(:disabled){transform:translateY(-1px)}
.clv-page .clv-send:disabled{opacity:.4;cursor:default}

.clv-page .clv-media-status{margin:8px 4px 0;font-size:0.6875rem;line-height:1rem;color:var(--clv-accent-text)}
.clv-page .clv-media-status:empty{display:none}
/* a refusal should not read in the same colour as a confirmation */
.clv-page .clv-media-status.is-warn{color:var(--clv-destructive,var(--destructive))}

/* .chat-note: the two honest lines, and they stay on the phone too */
.clv-page .clv-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin-top:10px;
  font-family:var(--font-mono);font-size:0.625rem;line-height:0.9375rem;color:var(--clv-muted-foreground)}

/* ---- phone and tablet: one column ----------------------------------------------------------
   A fixed height app shell on a phone leaves the thread a sliver, so below lg the card grows to
   its content and the page itself scrolls: the directory block, the roster strip, the ink footer,
   then the conversation. The thread keeps its own scroll, capped, so the composer stays next to it
   instead of being pushed below the fold. Nothing is hidden, which is where his stylesheet and
   this one part company: below 760px he hid the eyebrow, the lede, the search and the whole
   footer, and the preview line went with them. */
@media(max-width:1023px){
  .clv-page .clv-shell{height:auto;min-height:0;max-height:none}
  .clv-page .clv-directory{padding:16px;overflow:visible}
  .clv-page .clv-thread{max-height:min(52vh,420px);min-height:200px}
  .clv-page .clv-directory-lede{margin-top:6px;font-size:0.75rem;line-height:1.125rem}
  .clv-page .clv-search{height:40px;margin-top:12px}
  /* the roster scrolls sideways rather than making the page wider than the phone */
  .clv-page .clv-roster-scroll{flex:none;overflow:visible;padding-right:0}
  .clv-page .clv-roster{display:flex;gap:8px;margin-top:12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:0 0 4px;
    scrollbar-width:thin;scrollbar-color:var(--clv-border) transparent}
  .clv-page .clv-person{width:auto;flex:0 0 auto;max-width:200px;padding:7px 10px 7px 7px}
  .clv-page .clv-person small{display:none}
  .clv-page .clv-avatar{width:32px;height:32px}
  /* his page hid this panel below 760px, which took the preview line with it. It is kept, laid
     out as one compact ink strip, so the count, the separateness and the demo line still show. */
  .clv-page .clv-directory-foot{margin-top:14px;padding:12px 14px}
  .clv-page .clv-foot-main{margin:10px 0}
  .clv-page .clv-foot-main strong{font-size:1.5rem}
}

/* below md the composer gets narrow enough that the tools and the send square crowd the
   placeholder onto a second line inside a one line box, so both shrink and the gaps close up */
@media(max-width:767px){
  .clv-page .clv-input-wrap{gap:6px;padding:6px 8px}
  .clv-page .clv-media-tools button{width:32px;height:32px}
  .clv-page .clv-media-tools svg{width:17px;height:17px}
  .clv-page .clv-input-wrap textarea{height:40px;padding:9px 2px;line-height:1.25rem;font-size:0.8125rem}
  .clv-page .clv-send{width:40px;height:40px;font-size:1.0625rem}
}

@media(prefers-reduced-motion:reduce){
  .clv-page *,.clv-page *::before,.clv-page *::after{animation:none!important;transition:none!important}
}

/* a phone: the roster is a row that scrolls, and the search field is a real tap target */
@media(max-width:767px){.clv-page .clv-roster-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.clv-page .clv-roster{grid-auto-flow:column;grid-auto-columns:minmax(120px,max-content);width:max-content;min-width:100%;padding-right:16px}}
.clv-page .clv-search input{height:100%;min-height:36px}