/* ===========================================================================
   <rbns-os-demo> — the AI OS demos (Company OS, Automations, Personal OS)
   One component, many data files. Two modes:
     mode="interactive"  the full clickable app, for the standalone demo pages
     mode="autoplay"     a compact card that plays scripted runs on a loop,
                         for the landing page hero
   Everything is scoped under .osd so the component drops into any page.
   =========================================================================== */
rbns-os-demo { display: block; }

.osd {
  --osd-ink: #0d1b2a;
  --osd-ink-2: #45525f;
  --osd-mute: #8a93a0;
  --osd-line: rgba(13, 27, 42, .09);
  --osd-line-2: rgba(13, 27, 42, .14);
  --osd-bg: #fff;
  --osd-soft: #f6f6f4;
  --osd-soft-2: #efefec;
  --osd-accent: #6600ff;
  --osd-accent-soft: #f1ebff;
  --osd-mint: #adffbe;
  --osd-ok: #0e7a3f;
  --osd-warn: #a15c00;
  --osd-warn-soft: #fff4e2;
  --osd-ease: cubic-bezier(.22, .61, .18, 1);
  --osd-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --osd-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  position: relative; height: 100%; min-height: 0;
  font-family: var(--osd-body); font-size: 14px; line-height: 1.5; color: var(--osd-ink);
  -webkit-font-smoothing: antialiased;
}
.osd *, .osd *::before, .osd *::after { box-sizing: border-box; }
.osd button { font: inherit; color: inherit; }
.osd b, .osd strong { font-weight: 600; color: var(--osd-ink); }

/* ---- shared atoms --------------------------------------------------------- */
.osd-mark {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: var(--osd-accent); color: #fff; font: 700 15px/1 var(--osd-head); letter-spacing: -.02em;
}
.osd-logo {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: #fff; box-shadow: 0 0 0 1px var(--osd-line); overflow: hidden;
}
.osd-logo img { width: 15px; height: 15px; object-fit: contain; }
.osd-logo--mono { font: 700 11px/1 var(--osd-body); color: #fff; background: var(--mono, #45525f); box-shadow: none; }
.osd-ava {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ava, #0d1b2a); color: #fff; font: 700 10.5px/1 var(--osd-body); letter-spacing: .02em;
}
.osd-ico { width: 18px; height: 18px; flex: none; }
.osd-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--osd-soft-2); color: var(--osd-ink-2);
}
.osd-pill--ok { background: #e3f8e9; color: var(--osd-ok); }
.osd-pill--warn { background: var(--osd-warn-soft); color: var(--osd-warn); }
.osd-pill--accent { background: var(--osd-accent-soft); color: var(--osd-accent); }
.osd-pill--muted { background: var(--osd-soft-2); color: var(--osd-mute); }
.osd-pill--bad { background: #fdecea; color: #b3261e; }
.osd-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.osd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--osd-line-2); background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: background-color .2s var(--osd-ease), border-color .2s var(--osd-ease), transform .15s;
}
.osd-btn:hover { background: var(--osd-soft); }
.osd-btn:active { transform: scale(.97); }
.osd .osd-btn--dark { background: var(--osd-ink); border-color: var(--osd-ink); color: #fff; }
.osd .osd-btn--dark:hover { background: #1c2c3e; }
.osd :focus-visible { outline: 2px solid var(--osd-accent); outline-offset: 2px; }

/* spinner: the loading state of a step, a thin ring in the accent */
.osd-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--osd-accent-soft); border-top-color: var(--osd-accent);
  animation: osdSpin .8s linear infinite;
}
@keyframes osdSpin { to { transform: rotate(360deg); } }
.osd-check {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--osd-ok); color: #fff; animation: osdPop .3s var(--osd-ease);
}
.osd-check svg { width: 10px; height: 10px; }
@keyframes osdPop { from { transform: scale(.4); opacity: 0; } }
.osd-shimmer {
  background: linear-gradient(90deg, var(--osd-mute) 0%, var(--osd-ink) 45%, var(--osd-mute) 90%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: osdShimmer 1.6s linear infinite;
}
@keyframes osdShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.osd-in { animation: osdIn .45s var(--osd-ease) both; }
@keyframes osdIn { from { opacity: 0; transform: translateY(6px); } }

/* ---- the thread (shared by both modes) ----------------------------------- */
.osd-thread { display: flex; flex-direction: column; gap: 22px; }
.osd-msg-who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 13.5px; }
.osd-msg-who small { font-weight: 500; color: var(--osd-mute); font-size: 12.5px; }
.osd-bubble {
  display: inline-block; max-width: 92%; padding: 11px 15px; border-radius: 14px; border-top-left-radius: 4px;
  background: var(--osd-soft); font-size: 14.5px; line-height: 1.5;
}
.osd-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.osd-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--osd-ink-2); }
.osd-step .osd-logo { width: 20px; height: 20px; border-radius: 6px; }
.osd-step .osd-logo img { width: 13px; height: 13px; }
.osd-step.is-done { color: var(--osd-mute); }
.osd-answer { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--osd-ink-2); }
.osd-answer p { margin: 0; }
.osd-cite {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px 0 4px;
  border: 0; border-radius: 5px; background: var(--osd-accent-soft); color: var(--osd-accent);
  font-size: 10.5px; font-weight: 700; vertical-align: 2px; cursor: pointer;
}
.osd-table-wrap { overflow-x: auto; border: 1px solid var(--osd-line); border-radius: 12px; }
.osd-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.osd-table th { text-align: left; font-weight: 600; color: var(--osd-mute); padding: 9px 14px; background: var(--osd-soft); }
.osd-table td { padding: 10px 14px; border-top: 1px solid var(--osd-line); color: var(--osd-ink-2); }
.osd-table td:first-child { color: var(--osd-ink); font-weight: 600; }
.osd-up { color: var(--osd-ok); font-weight: 600; }
.osd-down { color: #b3261e; font-weight: 600; }
.osd-bars { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--osd-line); border-radius: 12px; }
.osd-bar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.osd-bar span:first-child { color: var(--osd-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osd-bar-track { height: 8px; border-radius: 999px; background: var(--osd-soft-2); overflow: hidden; }
.osd-bar-fill { height: 100%; border-radius: inherit; background: var(--osd-accent); transform-origin: left; animation: osdGrow .9s var(--osd-ease) both; }
.osd-bar-fill.is-mint { background: #3ecf6e; }
@keyframes osdGrow { from { transform: scaleX(0); } }
.osd-callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--osd-accent-soft); color: var(--osd-ink); font-size: 13.5px;
}
.osd-callout .osd-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--osd-accent); }
.osd-callout--warn { background: var(--osd-warn-soft); }
.osd-callout--warn .osd-ico { color: var(--osd-warn); }
.osd-doc { border: 1px solid var(--osd-line); border-radius: 12px; overflow: hidden; }
.osd-doc-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--osd-soft); font-size: 13px; font-weight: 600; }
.osd-doc-body { padding: 14px 16px; font-size: 13.5px; }
.osd-doc-body h4 { margin: 0 0 4px; font: 600 14px/1.3 var(--osd-head); color: var(--osd-ink); }
.osd-doc-body ul { margin: 0 0 10px; padding-left: 18px; }
.osd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.osd-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.osd-source {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 4px; border-radius: 8px;
  border: 1px solid var(--osd-line); background: #fff; font-size: 12px; color: var(--osd-ink-2);
  transition: border-color .25s, box-shadow .25s;
}
.osd-source .osd-logo { width: 20px; height: 20px; border-radius: 6px; box-shadow: none; }
.osd-source .osd-logo img { width: 13px; height: 13px; }
.osd-source b { font-size: 11px; color: var(--osd-accent); }
.osd-source.is-lit { border-color: var(--osd-accent); box-shadow: 0 0 0 3px var(--osd-accent-soft); }
.osd-guard { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--osd-mute); }
.osd-guard .osd-ico { width: 14px; height: 14px; color: var(--osd-ok); }
.osd-guard.is-masked .osd-ico { color: var(--osd-warn); }
.osd-guard.is-denied .osd-ico { color: #b3261e; }

/* who said it: you on the right, the OS on the left */
.osd-msg--me { display: flex; flex-direction: column; align-items: flex-end; }
.osd-msg--me .osd-msg-who { flex-direction: row-reverse; }
.osd-msg--me .osd-bubble { border-top-left-radius: 14px; border-top-right-radius: 4px; background: var(--osd-ink); color: #fff; }
.osd-msg--me .osd-bubble b { color: #fff; }
.osd-msg:not(.osd-msg--me) { max-width: 100%; }

/* the conclusion leads; the working steps fold away behind one line */
.osd-lead { font-size: 16.5px; line-height: 1.45; color: var(--osd-ink); }
.osd-trace {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 10px 4px 4px; border: 0; border-radius: 999px;
  background: var(--osd-soft); color: var(--osd-mute); font-size: 12.5px; cursor: pointer; animation: osdIn .35s var(--osd-ease) both;
}
.osd-trace:hover { color: var(--osd-ink); }
.osd-trace .osd-ico { width: 14px; height: 14px; transition: transform .3s var(--osd-ease); }
.osd-trace[aria-expanded="true"] .osd-ico { transform: rotate(180deg); }
.osd-trace-logos { display: inline-flex; }
.osd-trace-logos .osd-logo { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--osd-soft); }
.osd-trace-logos .osd-logo img { width: 11px; height: 11px; }
.osd-trace-logos .osd-logo + .osd-logo { margin-left: -5px; }
.osd-steps { overflow: hidden; transition: max-height .45s var(--osd-ease), opacity .35s var(--osd-ease), margin .45s var(--osd-ease); }
.osd-steps.is-folded { opacity: 0; margin-bottom: 0; }

/* ===========================================================================
   AUTOPLAY — the compact card for the hero
   =========================================================================== */
.osd--auto {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: #fff; border: 1px solid var(--osd-line-2);
}
.osd-auto-head { flex: none; padding: 22px 26px 18px; border-bottom: 1px solid var(--osd-line); }
.osd-auto-title { display: flex; align-items: center; gap: 12px; font: 600 22px/1.15 var(--osd-head); letter-spacing: -.025em; }
.osd-auto-desc { margin: 8px 0 12px; max-width: 46ch; color: var(--osd-ink-2); font-size: 14px; }
.osd-auto-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osd-auto-model { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--osd-line-2); font-size: 13px; font-weight: 600; }
.osd-auto-model img { width: 16px; height: 16px; object-fit: contain; }
.osd-stack { display: flex; align-items: center; }
.osd-stack .osd-logo { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--osd-line); }
.osd-stack .osd-logo + .osd-logo { margin-left: -7px; }
.osd-stack em { margin-left: 8px; font-style: normal; font-size: 12.5px; color: var(--osd-mute); }
.osd-auto-body {
  position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 20px 26px 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 64px), transparent);
}
.osd--auto .osd-thread { padding-bottom: 72px; transition: transform .6s var(--osd-ease); }
.osd--auto .osd-thread.is-leaving { opacity: 0; transition: opacity .4s var(--osd-ease); }
.osd--auto .osd-guard:not(.is-masked):not(.is-denied), .osd--auto .osd-actions, .osd--auto .osd-sources, .osd--auto .osd-cite { display: none; }
@media (max-width: 640px) {
  .osd-auto-head { padding: 18px 18px 14px; }
  .osd-auto-title { font-size: 19px; }
  .osd-auto-desc { font-size: 13px; }
  .osd-auto-body { padding: 16px 18px 0; }
  .osd--auto .osd-answer, .osd--auto .osd-bubble { font-size: 13.5px; }
}
@media (max-width: 480px) {
  .osd-auto-desc { display: none; }
  .osd-auto-chips { margin-top: 12px; }
  .osd-auto-user-in small { display: none; }
  .osd-auto-board .osd-kpi em { display: none; }
  .osd-auto-board .osd-kpi strong { font-size: 17px; }
}
.osd-trace { white-space: nowrap; max-width: 100%; }

/* ===========================================================================
   INTERACTIVE — the full app
   =========================================================================== */
.osd--app {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 100%;
  background: #fff; overflow: hidden;
}
.osd-rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0;
  background: var(--osd-soft); border-right: 1px solid var(--osd-line);
}
.osd-rail .osd-mark { margin-bottom: 14px; }
.osd-nav {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; padding: 9px 0 8px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer; font-size: 11.5px; color: var(--osd-mute);
  transition: background-color .2s var(--osd-ease), color .2s var(--osd-ease);
}
.osd-nav .osd-ico { width: 20px; height: 20px; }
.osd-nav:hover { color: var(--osd-ink); }
.osd-nav[aria-current="page"] { background: #fff; color: var(--osd-ink); font-weight: 600; box-shadow: 0 1px 0 var(--osd-line), 0 4px 14px -8px rgba(13, 27, 42, .3); }
.osd-nav[aria-current="page"] .osd-ico { color: var(--osd-accent); }

.osd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.osd-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none;
  padding: 12px 22px; border-bottom: 1px solid var(--osd-line);
}
.osd-top-title { margin-right: auto; font: 600 16px/1.2 var(--osd-head); letter-spacing: -.015em; }
.osd-top-title small { display: block; font: 500 12px/1.3 var(--osd-body); color: var(--osd-mute); letter-spacing: 0; }
.osd-select { position: relative; }
.osd-select > button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; border-radius: 10px;
  border: 1px solid var(--osd-line-2); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
}
.osd-select > button:hover { background: var(--osd-soft); }
.osd-select > button[disabled] { cursor: default; opacity: .7; }
.osd-select > button[disabled]:hover { background: #fff; }
.osd-select > button .osd-ico { width: 14px; height: 14px; color: var(--osd-mute); }
.osd-select > button small { font-weight: 500; color: var(--osd-mute); }
.osd-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 6px;
  border-radius: 14px; background: #fff; border: 1px solid var(--osd-line);
  box-shadow: 0 18px 40px -16px rgba(13, 27, 42, .35);
}
.osd-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; cursor: pointer; text-align: left; font-size: 13px;
}
.osd-menu button:hover, .osd-menu button[aria-checked="true"] { background: var(--osd-soft); }
.osd-menu button small { display: block; color: var(--osd-mute); font-size: 12px; }
.osd-menu-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--osd-mute); }

.osd-view { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.osd-pad { padding: 26px 30px 30px; max-width: 900px; margin: 0 auto; }

/* chat view */
.osd-chat { display: flex; flex-direction: column; height: 100%; }
.osd-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.osd-hello { padding-top: 6vh; }
.osd-hello h2 { margin: 0 0 8px; font: 600 clamp(24px, 3vw, 32px)/1.1 var(--osd-head); letter-spacing: -.035em; }
.osd-hello p { margin: 0; max-width: 52ch; color: var(--osd-ink-2); font-size: 15px; }
.osd-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.osd-prompt {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; text-align: left;
  border: 1px solid var(--osd-line-2); background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.4;
  transition: border-color .2s var(--osd-ease), background-color .2s var(--osd-ease), transform .2s var(--osd-ease);
}
.osd-prompt:hover { border-color: var(--osd-accent); background: #fcfaff; transform: translateY(-1px); }
.osd-prompt .osd-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--osd-accent); }
.osd-followups { display: flex; flex-wrap: wrap; gap: 8px; }
.osd-followups .osd-prompt { padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.osd-composer { flex: none; padding: 12px 30px 18px; }
.osd-composer form {
  display: flex; align-items: center; gap: 8px; max-width: 840px; margin: 0 auto; padding: 6px 6px 6px 16px;
  border-radius: 16px; border: 1px solid var(--osd-line-2); background: #fff;
  box-shadow: 0 10px 30px -18px rgba(13, 27, 42, .35);
}
.osd-composer input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; }
.osd-composer button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 11px; background: var(--osd-ink); color: #fff; cursor: pointer; }
.osd-composer button[disabled] { background: var(--osd-soft-2); color: var(--osd-mute); cursor: default; }
.osd-composer-note { max-width: 840px; margin: 8px auto 0; font-size: 11.5px; color: var(--osd-mute); text-align: center; }

/* board views: cards, tables, kpis */
.osd-view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.osd-view-head h2 { margin: 0; font: 600 24px/1.1 var(--osd-head); letter-spacing: -.03em; }
.osd-view-head p { margin: 6px 0 0; color: var(--osd-ink-2); max-width: 60ch; }
.osd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.osd-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--osd-line); background: #fff; }
.osd-card-top { display: flex; align-items: center; gap: 10px; }
.osd-card-top .osd-logo, .osd-card-top .osd-tile { width: 34px; height: 34px; border-radius: 10px; }
.osd-card-top .osd-logo img { width: 20px; height: 20px; }
.osd-tile { display: grid; place-items: center; flex: none; background: var(--osd-accent-soft); color: var(--osd-accent); }
.osd-card h3 { margin: 0; font: 600 15px/1.25 var(--osd-head); letter-spacing: -.01em; }
.osd-card p { margin: 0; font-size: 13px; color: var(--osd-ink-2); }
.osd-card-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--osd-mute); }
.osd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.osd-switch { position: relative; width: 36px; height: 22px; flex: none; border: 0; border-radius: 999px; background: var(--osd-soft-2); cursor: pointer; transition: background-color .25s var(--osd-ease); }
.osd-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,27,42,.3); transition: transform .25s var(--osd-ease); }
.osd-switch[aria-checked="true"] { background: var(--osd-ok); }
.osd-switch[aria-checked="true"]::after { transform: translateX(14px); }
.osd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.osd-kpi { padding: 14px 16px; border-radius: 14px; background: var(--osd-soft); }
.osd-kpi small { display: block; font-size: 12px; color: var(--osd-mute); }
.osd-kpi strong { display: block; margin-top: 4px; font: 600 22px/1.1 var(--osd-head); letter-spacing: -.02em; }
.osd-kpi em { font-style: normal; font-size: 12px; }
.osd-note { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--osd-mute); }
.osd-note .osd-ico { width: 15px; height: 15px; color: var(--osd-ok); }
.osd-view-in { animation: osdIn .35s var(--osd-ease) both; }
.osd-menu:not([hidden]) { animation: osdMenu .18s var(--osd-ease) both; transform-origin: top right; }
@keyframes osdMenu { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.osd-card-outcome { font: 600 17px/1.3 var(--osd-head) !important; letter-spacing: -.01em; color: var(--osd-ink) !important; }
.osd-sec + .osd-sec, .osd-kpis + .osd-sec { margin-top: 22px; }
.osd-sec-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 13px/1 var(--osd-body); letter-spacing: .02em; color: var(--osd-mute); text-transform: uppercase; }
.osd-sec-title span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--osd-accent); color: #fff; font-size: 11px; }
.osd-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--osd-line); border-radius: 14px; overflow: hidden; }
.osd-li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.osd-li + .osd-li { border-top: 1px solid var(--osd-line); }
.osd-li .osd-tile, .osd-li .osd-logo { width: 30px; height: 30px; border-radius: 9px; }
.osd-li .osd-tile .osd-ico { width: 16px; height: 16px; }
.osd-li-time { flex: none; width: 46px; font-size: 12.5px; font-weight: 600; color: var(--osd-mute); font-variant-numeric: tabular-nums; }
.osd-li-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--osd-accent-soft); color: var(--osd-accent); font-size: 12px; font-weight: 700; }
.osd-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.osd-li-main b { font-weight: 600; font-size: 14px; }
.osd-li-main small { font-size: 12.5px; color: var(--osd-mute); }
@media (max-width: 720px) {
  .osd-li { flex-wrap: wrap; row-gap: 8px; }
  .osd-li .osd-li-main { flex: 1 1 calc(100% - 60px); }
  .osd-li .osd-btn { margin-left: 42px; height: 32px; }
  .osd-li-time ~ .osd-btn { margin-left: 58px; }
}
.osd-row-new td { animation: osdFlash 1.6s var(--osd-ease); }
@keyframes osdFlash { from { background: var(--osd-accent-soft); } }

.osd-toast {
  position: absolute; left: 50%; bottom: 22px; z-index: 30; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: var(--osd-ink); color: #fff; font-size: 13px; box-shadow: 0 14px 30px -12px rgba(13,27,42,.5);
  transition: opacity .3s var(--osd-ease), transform .3s var(--osd-ease);
}
.osd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.osd-toast .osd-ico { width: 15px; height: 15px; color: var(--osd-mint); }

/* phones: the rail becomes a bottom tab bar */
@media (max-width: 720px) {
  /* the full-page app only: cards in the hero decide by their own width
     (container queries below), not by the screen */
  .osd--app:not(.osd--embed) { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .osd--app:not(.osd--embed) > .osd-rail {
    grid-row: 2; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--osd-line); background: #fff;
  }
  .osd--app:not(.osd--embed) > .osd-rail .osd-mark { display: none; }
  .osd--app:not(.osd--embed) .osd-nav { width: auto; flex: 1; padding: 6px 0; }
  .osd--app:not(.osd--embed) .osd-nav[aria-current="page"] { box-shadow: none; background: var(--osd-soft); }
  .osd-top { padding: 10px 14px; }
  .osd-top-title { width: 100%; }
  .osd-select { flex: 1; }
  .osd-select > button { width: 100%; justify-content: space-between; white-space: nowrap; }
  .osd-select > button small { display: none; }
  .osd-menu { left: 0; right: auto; min-width: 0; width: max(100%, 240px); }
  .osd-select + .osd-select .osd-menu { left: auto; right: 0; }
  .osd-pad { padding: 18px 16px 24px; }
  .osd-prompts { grid-template-columns: 1fr; }
  .osd-hello { padding-top: 2vh; }
  .osd-composer { padding: 8px 12px 10px; }
  .osd-composer-note { display: none; }
  .osd-select.is-solo, .osd-select[hidden] { display: none; }
  .osd-kpis { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
  .osd-kpi { padding: 12px; }
  .osd-kpi strong { font-size: 18px; }
  .osd-kpi em { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
  .osd-hide-sm { display: none; }
  .osd-table th, .osd-table td { padding-left: 12px; padding-right: 12px; }
  .osd-table { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .osd *, .osd *::before, .osd *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .osd-spin { animation: none; border-top-color: var(--osd-accent); }
}

/* ===========================================================================
   BRANDING — each demo looks like its own product
   The theme in a demo's data sets these; anything unset keeps the defaults.
   =========================================================================== */
.osd--branded { background: var(--osd-bg, #fff); }
.osd .osd-mark { background: var(--osd-mark-bg, var(--osd-accent)); color: var(--osd-mark-ink, #fff); }
.osd-mark svg { width: 62%; height: 62%; }
.osd--branded .osd-rail { background: var(--osd-rail-bg, var(--osd-soft)); border-right-color: var(--osd-rail-line, var(--osd-line)); }
.osd--branded .osd-nav { color: var(--osd-rail-ink, var(--osd-mute)); }
.osd--branded .osd-nav:hover { color: var(--osd-rail-ink-on, var(--osd-ink)); }
.osd--branded .osd-nav[aria-current="page"] { background: var(--osd-rail-active, #fff); color: var(--osd-rail-ink-on, var(--osd-ink)); box-shadow: none; }
.osd--branded .osd-nav[aria-current="page"] .osd-ico { color: var(--osd-rail-icon-on, var(--osd-accent)); }
.osd--branded .osd-top { background: var(--osd-top-bg, transparent); }
.osd .osd-sec-title { font-style: normal; }
.osd h2, .osd h3:not(.osd-sec-title), .osd-auto-title, .osd-top-title, .osd-kpi strong, .osd-card-outcome, .osd-doc-body h4 { font-style: var(--osd-head-style, normal); }
.osd--branded .osd-hello h2, .osd--branded .osd-view-head h2, .osd--branded .osd-auto-title { font-family: var(--osd-head); font-weight: var(--osd-head-weight, 600); }
.osd--branded .osd-kpi { background: var(--osd-kpi-bg, var(--osd-soft)); }
.osd--branded .osd-card, .osd--branded .osd-list, .osd--branded .osd-table-wrap, .osd--branded .osd-prompt { background: var(--osd-card-bg, #fff); }
.osd--branded .osd-msg--me .osd-bubble { background: var(--osd-me-bg, var(--osd-ink)); color: var(--osd-me-ink, #fff); }
.osd--branded .osd-bubble { background: var(--osd-bubble-bg, var(--osd-soft)); }
.osd--branded .osd-composer form { background: var(--osd-card-bg, #fff); }
.osd--branded .osd-composer button { background: var(--osd-send-bg, var(--osd-ink)); }
/* autoplay: the header is the product's cover */
.osd--auto.osd--branded .osd-auto-head { background: var(--osd-auto-head-bg, #fff); color: var(--osd-auto-head-ink, var(--osd-ink)); border-bottom-color: var(--osd-auto-head-line, var(--osd-line)); position: relative; overflow: hidden; }
.osd--auto.osd--branded .osd-auto-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--osd-auto-head-art, none); }
.osd--auto.osd--branded .osd-auto-head > * { position: relative; z-index: 1; }
.osd--auto.osd--branded .osd-auto-desc { color: var(--osd-auto-desc, var(--osd-ink-2)); }
.osd--auto.osd--branded .osd-auto-model { border-color: var(--osd-auto-chip-line, var(--osd-line-2)); background: var(--osd-auto-chip-bg, transparent); color: inherit; }
.osd--auto.osd--branded .osd-stack .osd-logo { box-shadow: 0 0 0 2px var(--osd-auto-head-bg, #fff); }
.osd--auto.osd--branded .osd-stack em { color: var(--osd-auto-desc, var(--osd-mute)); }
.osd--auto.osd--branded .osd-auto-body { background: var(--osd-bg, #fff); }

/* ===========================================================================
   SCENES — cursor, automation flow, live dashboard, who's asking
   =========================================================================== */
/* the cursor that presses buttons in autoplay */
.osd-cursor {
  position: absolute; left: 0; top: 0; z-index: 40; width: 22px; height: 22px; pointer-events: none;
  opacity: 0; transform: translate(80%, 120%); transition: transform .75s var(--osd-ease), opacity .3s;
  filter: drop-shadow(0 3px 6px rgba(13, 27, 42, .35));
}
.osd-cursor.is-on { opacity: 1; }
.osd-cursor svg { width: 22px; height: 22px; fill: var(--osd-ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.osd-cursor::after {
  content: ""; position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--osd-accent); opacity: 0; transform: scale(.3);
}
.osd-cursor.is-click::after { animation: osdRipple .5s var(--osd-ease); }
@keyframes osdRipple { from { opacity: .45; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
.osd .is-pressed { transform: scale(.95); }
.osd .osd-btn.is-live { animation: osdLive 1.6s ease-in-out infinite; }
@keyframes osdLive { 0%, 100% { box-shadow: 0 0 0 0 var(--osd-accent-soft); } 50% { box-shadow: 0 0 0 6px var(--osd-accent-soft); } }

/* who's asking (Company OS autoplay) */
.osd-auto-user { margin-left: auto; font-family: var(--osd-body); font-style: normal; }
.osd-auto-user-in {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--osd-auto-chip-bg, var(--osd-soft)); border: 1px solid var(--osd-auto-chip-line, var(--osd-line-2));
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; line-height: 1.15;
}
.osd-auto-user-in small { display: block; font-weight: 500; font-size: 11px; opacity: .7; }
.osd-auto-user-in .osd-ico { width: 13px; height: 13px; opacity: .6; }

/* automation flow: a vertical run from trigger to done */
.osd-stepper { display: flex; list-style: none; margin: 0 0 16px; padding: 0; gap: 0; }
.osd-stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 11.5px; font-weight: 600; color: var(--osd-mute); }
.osd-stepper li::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--osd-line-2); transition: background .4s var(--osd-ease); }
.osd-stepper li:first-child::before { display: none; }
.osd-stepper i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--osd-bg, #fff); border: 2px solid var(--osd-line-2); transition: all .35s var(--osd-ease); }
.osd-stepper li.is-now { color: var(--osd-ink); }
.osd-stepper li.is-now i { border-color: var(--osd-accent); box-shadow: 0 0 0 4px var(--osd-accent-soft); }
.osd-stepper li.is-done { color: var(--osd-ink-2); }
.osd-stepper li.is-done i { background: var(--osd-accent); border-color: var(--osd-accent); }
.osd-stepper li.is-done::before, .osd-stepper li.is-now::before { background: var(--osd-accent); }
.osd-flow-body { display: flex; flex-direction: column; }
.osd-fline { width: 2px; height: 16px; margin-left: 26px; background: repeating-linear-gradient(var(--osd-accent) 0 4px, transparent 4px 8px); opacity: .6; }
.osd-fcard { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--osd-line); background: var(--osd-card-bg, #fff); box-shadow: 0 10px 26px -20px rgba(13, 27, 42, .35); }
.osd-fcard header { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.osd-fcard header .osd-logo, .osd-fcard header .osd-tile { width: 24px; height: 24px; border-radius: 7px; }
.osd-fcard header .osd-tile .osd-ico { width: 14px; height: 14px; }
.osd-fcard header small { margin-left: auto; color: var(--osd-mute); font-size: 12px; }
.osd-fcard h4 { margin: 10px 0 0; font: 600 15.5px/1.35 var(--osd-body); color: var(--osd-ink); }
.osd-fcard p { margin: 4px 0 0; font-size: 13.5px; color: var(--osd-ink-2); }
.osd-fcard-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.osd-fcard-foot .osd-ico { width: 15px; height: 15px; }
.osd-trig.is-sent p { display: none; }
.osd-trig.is-sent { opacity: .75; }
.osd-agents ul, .osd-done ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.osd-agent { display: grid; grid-template-columns: 16px minmax(96px, auto) 1fr; align-items: center; gap: 10px; font-size: 13px; }
.osd-agent-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.osd-agent-name .osd-logo, .osd-agent-name .osd-tile { width: 20px; height: 20px; border-radius: 6px; }
.osd-agent-name .osd-tile .osd-ico { width: 12px; height: 12px; }
.osd-agent-out { color: var(--osd-ink-2); }
.osd-appr { border-color: var(--osd-accent); box-shadow: 0 0 0 4px var(--osd-accent-soft); }
.osd-done { background: var(--osd-done-bg, #f2fbf5); border-color: rgba(14, 122, 63, .18); }
.osd-done header b { font-size: 15px; }
.osd-done li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--osd-ink-2); }
.osd-done li .osd-logo, .osd-done li .osd-tile { width: 20px; height: 20px; border-radius: 6px; }
.osd-done li .osd-tile .osd-ico { width: 12px; height: 12px; }
.osd--auto .osd-flow { padding-bottom: 8px; }
@media (max-width: 560px) {
  .osd-agent { grid-template-columns: 16px 1fr; }
  .osd-agent-out { grid-column: 2; }
  .osd-stepper span { font-size: 10.5px; }
}

/* the automations view: triggers on the left, the run on the right */
.osd-pad--wide { max-width: 1060px; }
.osd-flowgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.osd-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.osd-job {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--osd-line); background: var(--osd-card-bg, #fff); transition: border-color .2s var(--osd-ease), box-shadow .2s var(--osd-ease);
}
.osd-job:hover { border-color: var(--osd-line-2); }
.osd-job[aria-current="true"] { border-color: var(--osd-accent); box-shadow: 0 0 0 3px var(--osd-accent-soft); }
.osd-job > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.osd-job b { font-size: 13.5px; font-weight: 600; }
.osd-job small { font-size: 12px; color: var(--osd-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osd-job .osd-logo, .osd-job .osd-tile { width: 30px; height: 30px; border-radius: 9px; }
@media (max-width: 860px) {
  .osd-flowgrid { grid-template-columns: 1fr; }
  .osd-jobs { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .osd-jobs li { flex: 0 0 74%; }
}

/* live dashboard: done items, KPIs that change, all clear */
.osd-li.is-done .osd-li-main b { text-decoration: line-through; text-decoration-color: var(--osd-mute); color: var(--osd-mute); }
.osd-li.is-done .osd-tile { background: #e3f8e9; color: var(--osd-ok); }
.osd-li { transition: background-color .4s var(--osd-ease); }
.osd-kpi.is-flash { animation: osdKpi 1.2s var(--osd-ease); }
@keyframes osdKpi { 0% { box-shadow: 0 0 0 0 var(--osd-accent); transform: scale(1); } 20% { box-shadow: 0 0 0 3px var(--osd-accent); transform: scale(1.03); } 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } }
.osd-clear { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #e3f8e9; color: var(--osd-ok); font-size: 13.5px; font-weight: 600; }
.osd-clear .osd-ico { width: 16px; height: 16px; }
.osd-auto-board .osd-kpis { margin-bottom: 14px; gap: 8px; }
.osd-auto-board .osd-kpi { padding: 10px 12px; }
.osd-auto-board .osd-kpi strong { font-size: 19px; }
.osd-auto-board .osd-sec + .osd-sec { margin-top: 14px; }
.osd-auto-board .osd-li { padding: 9px 12px; }
.osd-auto-board .osd-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.osd--auto .osd-toast { bottom: 14px; }

/* ===========================================================================
   SOUL — characters, scenes and colour
   =========================================================================== */
/* the cast: small coloured characters, one per agent */
.osd-cast { width: 22px; height: 22px; flex: none; }
.osd-castbox { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--osd-card-bg, #fff); }
.osd-castbox .osd-cast { width: 22px; height: 22px; }
.osd-card-top .osd-castbox { width: 38px; height: 38px; border-radius: 12px; background: var(--osd-kpi-bg, var(--osd-soft)); }
.osd-card-top .osd-castbox .osd-cast { width: 28px; height: 28px; }
.osd-auto-cast { display: inline-flex; align-items: center; gap: 4px; }
.osd-auto-cast .osd-cast { width: 20px; height: 20px; }
.osd-auto-cast .osd-cast:nth-child(2n) { transform: translateY(-2px) rotate(-6deg); }
.osd-auto-cast .osd-cast:nth-child(3n) { transform: rotate(8deg); }
.osd-artbox { display: grid; place-items: center; flex: none; width: 30px; height: 30px; }
.osd-art { width: 100%; height: 100%; }
.osd-agent-name .osd-castbox { width: 22px; height: 22px; background: transparent; }
.osd-agent-name .osd-castbox .osd-cast { width: 20px; height: 20px; }
.osd-agents header .osd-auto-cast .osd-cast { width: 18px; height: 18px; }

/* autoplay header: cast + tools, brand, a big statement (Gumloop-style) */
.osd-auto-head { display: flex; flex-direction: column; gap: 10px; }
.osd-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.osd-auto-row .osd-auto-chips { display: inline-flex; margin: 0; }
.osd-auto-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--osd-body); letter-spacing: .01em; opacity: .85; }
.osd-auto-eyebrow .osd-mark { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.osd-auto-headline {
  margin: 0; max-width: 20ch; font-family: var(--osd-head); font-weight: var(--osd-head-weight, 600); font-style: var(--osd-head-style, normal);
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.08; letter-spacing: -.03em;
}
.osd-auto-user { margin-left: 0; }
.osd--auto .osd-auto-model { height: 28px; font-size: 12.5px; }
.osd--auto .osd-stack .osd-logo { width: 24px; height: 24px; }
/* the hero head (Personal OS): a scene with a curved bottom */
.osd-auto-hero {
  position: relative; overflow: hidden; color: #fff; background: var(--sky) !important; border-bottom: 0 !important;
  border-radius: 0 0 50% 50% / 0 0 22px 22px; padding-bottom: 26px !important; gap: 6px;
}
.osd-auto-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 15% 0%, rgba(255,255,255,.28), transparent 60%), radial-gradient(40% 50% at 70% 110%, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.osd-auto-hero > * { position: relative; }
.osd-auto-hero .osd-auto-eyebrow { opacity: 1; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.osd-auto-hero .osd-auto-headline { font-size: clamp(26px, 3vw, 34px); text-shadow: 0 2px 16px rgba(0,0,0,.18); }
.osd-auto-sub { margin: 0; font-size: 14px; opacity: .92; max-width: 30ch; }
.osd-auto-hero-art { position: absolute !important; right: 18px; top: 10px; width: 108px; height: 108px; animation: osdFloat 6s ease-in-out infinite; }
.osd-hero-art { width: 100%; height: 100%; }
@keyframes osdFloat { 50% { transform: translateY(-6px) rotate(3deg); } }
@media (max-width: 480px) { .osd-auto-hero-art { width: 76px; height: 76px; right: 10px; } .osd-auto-row .osd-auto-chips .osd-stack { display: none; } }

/* page hero (interactive): scene, title, numbers, prop */
.osd-board { min-height: 100%; }
.osd-hero {
  position: relative; overflow: hidden; color: #fff; background: var(--sky);
  border-radius: 0 0 50% 50% / 0 0 34px 34px; padding: 26px 30px 44px; margin-bottom: 6px;
  box-shadow: 0 18px 30px -24px rgba(13, 27, 42, .5);
}
.osd-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 90% at 10% 0%, rgba(255,255,255,.26), transparent 60%), radial-gradient(35% 60% at 80% 120%, rgba(255,255,255,.16), transparent 70%); }
.osd-hero-in { position: relative; max-width: 900px; margin: 0 auto; padding-right: 150px; }
.osd-hero-top { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.osd-hero-back { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); }
.osd-hero-back .osd-ico { width: 14px; height: 14px; transform: rotate(90deg); }
.osd-hero-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.osd-hero h2 { margin: 6px 0 0; font-family: var(--osd-head); font-weight: 700; font-style: var(--osd-head-style, normal); font-size: clamp(30px, 4.4vw, 48px); line-height: 1; letter-spacing: -.035em; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
.osd-hero-sub { margin: 8px 0 0; font-size: 15px; opacity: .95; }
.osd-hero-quote { margin: 10px 0 0; max-width: 40ch; font: italic 400 clamp(16px, 2vw, 21px)/1.3 'Newsreader', Georgia, serif; opacity: .95; }
.osd-hero-stats { display: flex; gap: 24px; margin-top: 14px; }
.osd-hero-stats span { display: flex; flex-direction: column; }
.osd-hero-stats b { font: 700 28px/1 var(--osd-head); font-style: normal; letter-spacing: -.02em; }
.osd-hero-stats small { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.osd-hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.osd-hero-pills span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.osd-hero-prop { position: absolute; right: max(30px, calc(50% - 450px)); top: 50%; width: 132px; height: 132px; transform: translateY(-50%); animation: osdFloat 6s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
@media (max-width: 720px) {
  .osd-hero { padding: 18px 18px 34px; border-radius: 0 0 50% 50% / 0 0 22px 22px; }
  .osd-hero-in { padding-right: 70px; }
  .osd-hero-prop { width: 78px; height: 78px; right: 14px; top: 26px; transform: none; }
  .osd-hero-stats b { font-size: 22px; }
}
/* the home layout: no rail, no top bar */
.osd--home { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
.osd--home .osd-rail, .osd--home .osd-top { display: none !important; }
.osd--home .osd-pad { padding-top: 18px; }

/* app tiles (Daybook home) */
.osd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.osd-tilebtn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 136px; padding: 16px 12px;
  border: 1px solid rgba(13, 27, 42, .06); border-radius: 20px; cursor: pointer; text-align: center;
  background: linear-gradient(150deg, #fff 30%, var(--tint) 100%);
  box-shadow: 0 10px 24px -18px rgba(13, 27, 42, .4); transition: transform .3s var(--osd-ease), box-shadow .3s var(--osd-ease);
}
.osd-tilebtn:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(13, 27, 42, .45); }
.osd-tilebtn.is-wide { grid-column: span 2; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 18px 22px; text-align: left; }
.osd-tilebtn.is-quiet { opacity: .7; }
.osd-tilebtn-art { position: relative; width: 52px; height: 52px; transition: transform .35s var(--osd-ease); }
.osd-tilebtn:hover .osd-tilebtn-art { transform: scale(1.08) rotate(-4deg); }
.osd-tilebtn-art i { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--osd-accent); color: #fff; font: 700 11px/1 var(--osd-body); font-style: normal; box-shadow: 0 0 0 2px #fff; }
.osd-tilebtn-txt { display: flex; flex-direction: column; gap: 3px; }
.osd-tilebtn-txt b { font-size: 14.5px; font-weight: 700; color: var(--osd-ink); }
.osd-tilebtn.is-wide .osd-tilebtn-txt b { font: 700 21px/1.1 var(--osd-body); }
.osd-tilebtn-txt small { font-size: 12.5px; color: var(--osd-ink-2); }
@media (max-width: 720px) { .osd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .osd-tilebtn { min-height: 108px; border-radius: 18px; } .osd-tilebtn-art { width: 42px; height: 42px; } .osd-tilebtn.is-wide { grid-column: span 3; } }

/* reports: charts and panels */
.osd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.osd-panel { padding: 16px; border-radius: 18px; background: var(--osd-card-bg, #fff); border: 1px solid var(--osd-line); }
.osd-panel.is-span { grid-column: 1 / -1; }
.osd-panel .osd-table-wrap { border: 0; }
.osd-panel .osd-kpis { margin: 0; }
@media (max-width: 860px) { .osd-grid2 { grid-template-columns: 1fr; } }
.osd-chart { margin: 0; }
.osd-chart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.osd-chart figcaption b { font: 600 15px/1.2 var(--osd-head); font-style: var(--osd-head-style, normal); }
.osd-chart figcaption small { font-size: 12px; color: var(--osd-mute); }
.osd-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.osd-chart text { font: 500 10.5px var(--osd-body); fill: var(--osd-mute); }
.osd-ch-grid { stroke: var(--osd-line); stroke-dasharray: 3 4; }
.osd-ch-bar { transform-box: fill-box; transform-origin: bottom; animation: osdBar .7s var(--osd-ease) both; }
@keyframes osdBar { from { transform: scaleY(0); } }
.osd-ch-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: osdDraw 1.4s var(--osd-ease) forwards; }
@keyframes osdDraw { to { stroke-dashoffset: 0; } }
.osd-ch-area { opacity: .12; }
.osd-ch-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--osd-ink-2); }
.osd-ch-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; }
.osd-sec-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--osd-accent-soft); color: var(--osd-accent); font-size: 12px; font-weight: 600; }

.osd-hero-stats span.is-flash { animation: osdStat 1s var(--osd-ease); }
@keyframes osdStat { 30% { transform: scale(1.18); } }
.osd-li .osd-artbox { width: 34px; height: 34px; }
.osd-auto-hero .osd-hero-stats { margin-top: 8px; gap: 20px; }
.osd-auto-hero .osd-hero-stats b { font-size: 22px; }
.osd-auto-board .osd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.osd-auto-board .osd-tilebtn { min-height: 80px; padding: 10px 6px; gap: 6px; border-radius: 16px; }
.osd-auto-board .osd-tilebtn-art { width: 32px; height: 32px; }
.osd-auto-board .osd-tilebtn-txt b { font-size: 12px; }
.osd-auto-board .osd-tilebtn.is-wide, .osd-auto-board .osd-tilebtn:nth-child(n+6) { display: none; }
.osd--home .osd-view { background: var(--osd-bg); }
.osd .osd-hero b, .osd .osd-auto-hero b { color: inherit; }
.osd--auto.osd--branded .osd-auto-hero { color: #fff; }
@media (max-width: 480px) { .osd-auto-hero .osd-auto-sub { display: none; } }

/* ===========================================================================
   v3 — tabs in the card, curved heads, compact scenes, Calder's new look
   =========================================================================== */
rbns-os-demo { container: osd / inline-size; }

/* autoplay with the app's tabs: left on wide cards, bottom on narrow ones */
.osd--auto { display: grid !important; grid-template-columns: 66px minmax(0, 1fr); }
.osd--auto > .osd-rail { padding: 12px 0; gap: 2px; }
.osd--auto > .osd-rail .osd-mark { width: 26px; height: 26px; margin-bottom: 10px; border-radius: 8px; font-size: 12px; }
.osd--auto .osd-nav, .osd--embed .osd-nav { width: 54px; padding: 7px 0 6px; gap: 3px; font-size: 10.5px; border-radius: 10px; }
.osd--auto .osd-nav .osd-ico, .osd--embed .osd-nav .osd-ico { width: 18px; height: 18px; }
.osd-auto-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.osd--embed { grid-template-columns: 66px minmax(0, 1fr); }
.osd--embed.osd--home { grid-template-columns: 66px minmax(0, 1fr) !important; }
.osd--embed.osd--home .osd-rail { display: flex !important; }
.osd--embed .osd-top { padding: 8px 14px; }
.osd--embed .osd-top-title { font-size: 14px; }
.osd--embed .osd-pad { padding: 18px 18px 24px; }
.osd--embed .osd-hero { padding: 16px 18px 30px; }
.osd--embed .osd-hero h2 { font-size: 30px; }
.osd--embed .osd-hero-prop { width: 84px; height: 84px; }
.osd--embed .osd-hero-in { padding-right: 90px; }
.osd--embed .osd-composer { padding: 8px 14px 12px; }
.osd--embed .osd-composer-note { display: none; }
@container osd (max-width: 560px) {
  .osd--auto, .osd--embed, .osd--embed.osd--home { grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr) auto; }
  .osd--auto > .osd-rail, .osd--embed > .osd-rail {
    grid-row: 2; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 6px 6px;
    border-right: 0; border-top: 1px solid var(--osd-rail-line, var(--osd-line));
  }
  .osd--auto > .osd-rail .osd-mark, .osd--embed > .osd-rail .osd-mark { display: none; }
  .osd--auto .osd-nav, .osd--embed .osd-nav { flex: 1; width: auto; }
  .osd--auto .osd-auto-main { grid-row: 1; }
  .osd--embed .osd-main { grid-row: 1; }
  .osd--embed .osd-top-title { display: none; }
  .osd--embed .osd-select > button small { display: none; }
  .osd-auto-cast { display: none !important; }
  .osd-auto-head { padding: 14px 16px 18px !important; gap: 6px !important; }
  .osd-auto-headline { font-size: 20px !important; }
  .osd-auto-body { padding: 12px 14px 0 !important; }
  .osd-auto-row .osd-auto-chips .osd-stack { display: none; }
  .osd--auto .osd-li { flex-wrap: nowrap !important; }
  .osd--auto .osd-li .osd-btn { margin-left: 0 !important; }
  .osd--auto .osd-li-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .osd-auto-board .osd-sec[data-sec] + .osd-sec { display: none; }
  .osd-agent { grid-template-columns: 16px auto 1fr !important; }
  .osd-agent-out { grid-column: auto !important; font-size: 12px; }
  .osd-agent-name span:last-child { display: none; }
  .osd-stepper span { display: none; }
  .osd-hero-in { padding-right: 70px !important; }
}

/* curved bottom on every card head */
.osd-auto-head { border-radius: 0 0 50% 50% / 0 0 26px 26px; padding-bottom: 26px !important; position: relative; z-index: 1; box-shadow: 0 10px 20px -18px rgba(13, 27, 42, .5); }
.osd--auto .osd-auto-body { margin-top: -8px; padding-top: 22px; }
.osd-hl { color: var(--osd-hl, var(--osd-accent)); }
.osd-sticker {
  position: absolute; right: 16px; top: 12px; display: grid; place-items: center; align-content: center; width: 74px; height: 74px; transform: rotate(-10deg);
  background: var(--osd-sticker, #ffe14d); color: #0e1120; font: 800 9.5px/1 var(--osd-body); letter-spacing: .04em; text-transform: uppercase; text-align: center;
  clip-path: polygon(50% 0, 61% 12%, 75% 6%, 79% 21%, 94% 22%, 89% 37%, 100% 47%, 89% 58%, 95% 73%, 80% 75%, 76% 90%, 61% 85%, 50% 98%, 39% 85%, 24% 90%, 20% 75%, 5% 73%, 11% 58%, 0 47%, 11% 37%, 6% 22%, 21% 21%, 25% 6%, 39% 12%);
  animation: osdWobble 5s ease-in-out infinite;
}
.osd-sticker b { font: 400 28px/1 'Anton', Impact, 'Arial Narrow', sans-serif; letter-spacing: 0; }
.osd-sticker.is-small { position: static; width: 58px; height: 58px; font-size: 8px; }
.osd-sticker.is-small b { font-size: 21px; }
@keyframes osdWobble { 50% { transform: rotate(-4deg) scale(1.04); } }

/* permissions you can see: names stay, figures blur behind a lock */
.osd-table tr.is-locked td { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(13, 27, 42, .025) 6px 12px); }
.osd-blur { filter: blur(5px); user-select: none; opacity: .7; }
.osd-lockname { display: inline-flex; align-items: center; gap: 6px; color: var(--osd-mute); font-weight: 600; }
.osd-lockname .osd-ico { width: 13px; height: 13px; color: var(--osd-warn); }

/* the run in autoplay: finished steps shrink to one line */
.osd-fcard { transition: padding .4s var(--osd-ease); }
.osd-fcard.is-mini { padding: 8px 12px; box-shadow: none; }
.osd-fcard.is-mini h4, .osd-fcard.is-mini p, .osd-fcard.is-mini ul, .osd-fcard.is-mini .osd-fcard-foot { display: none; }
.osd-fcard.is-mini header { font-size: 12.5px; }
.osd-fcard.is-mini header::after { content: "✓"; margin-left: auto; color: var(--osd-ok); font-weight: 800; }
.osd-fcard.is-mini header small { display: none; }
.osd--auto .osd-fline { height: 10px; }
/* stepper with little illustrations */
.osd-stepper i { width: 30px !important; height: 30px !important; display: grid; place-items: center; padding: 4px; background: #fff !important; filter: grayscale(1); opacity: .55; }
.osd-stepper li::before { top: 14px !important; }
.osd-stepper i .osd-art { width: 100%; height: 100%; }
.osd-stepper li.is-now i, .osd-stepper li.is-done i { filter: none; opacity: 1; }
.osd-stepper li.is-now i { animation: osdPopIn .5s var(--osd-ease); }
@keyframes osdPopIn { 40% { transform: scale(1.25) rotate(-8deg); } }
.osd--auto .osd-stepper { margin-bottom: 10px; }
.osd--auto .osd-stepper i { width: 26px !important; height: 26px !important; }
.osd--auto .osd-stepper li::before { top: 12px !important; }
.osd-prompt .osd-artbox { width: 26px; height: 26px; margin-top: -2px; }
.osd-followups .osd-prompt .osd-artbox { width: 20px; height: 20px; margin-top: 0; }

/* stat cards fanned like a hand (Calder reports) */
.osd-stack3 { display: flex; justify-content: center; align-items: flex-end; padding: 10px 0 18px; margin-bottom: 8px; }
.osd-statcard {
  position: relative; width: min(230px, 34%); aspect-ratio: 4 / 4.2; margin: 0 -18px; padding: 12px; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; color: #fff; box-shadow: 0 22px 40px -22px rgba(6, 19, 63, .55), 0 0 0 4px #fff;
  transition: transform .45s var(--osd-ease);
}
.osd-statcard.is-n0 { transform: rotate(-8deg) translateY(10px); z-index: 1; }
.osd-statcard.is-n1 { transform: translateY(-6px); z-index: 2; }
.osd-statcard.is-n2 { transform: rotate(8deg) translateY(10px); z-index: 1; }
.osd-stack3:hover .osd-statcard.is-n0 { transform: rotate(-11deg) translate(-12px, 6px); }
.osd-stack3:hover .osd-statcard.is-n2 { transform: rotate(11deg) translate(12px, 6px); }
.osd-statcard.is-blue { background: radial-gradient(circle, rgba(255,255,255,.22) 1.2px, transparent 1.6px) 0 0 / 12px 12px, #2f7bff; }
.osd-statcard.is-yellow { background: #ffe14d; color: #0e1120; }
.osd-statcard.is-green { background: repeating-conic-gradient(from 0deg at 80% 30%, #3cd3a6 0 10deg, #2fc497 10deg 20deg); }
.osd-statcard.is-pink { background: repeating-conic-gradient(from 0deg at 20% 20%, #ff63f6 0 10deg, #f04fe6 10deg 20deg); }
.osd-statchip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #fff; color: #0e1120; font-size: 11px; font-weight: 800; }
.osd-statchip .osd-ico { width: 12px; height: 12px; color: #2f7bff; }
.osd-statbig { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.osd-statbig b { font: 400 clamp(26px, 3.8cqi, 42px)/.95 'Anton', Impact, 'Arial Narrow', sans-serif; letter-spacing: .01em; color: inherit; text-shadow: 0 3px 0 rgba(6, 19, 63, .25); }
.osd-statbig span { font: 400 clamp(13px, 1.9cqi, 18px)/1 'Anton', Impact, 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.osd-statbig em { font-style: normal; color: #ffe14d; }
.osd-statcard.is-yellow .osd-statbig em { color: #e0119a; }
.osd-statart { position: absolute; right: 8px; bottom: 34px; width: 38px; height: 38px; transform: rotate(10deg); }
.osd-statfoot { display: flex; justify-content: center; gap: 10px; margin: 0 -12px -12px; padding: 8px 6px; background: #fff; color: #0e1120; font-size: 11px; font-weight: 800; }
.osd-statfoot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.osd-statfoot .osd-ico { width: 12px; height: 12px; color: #2f7bff; }
@container osd (max-width: 560px) { .osd-statcard { margin: 0 -14px; border-radius: 18px; } .osd-statfoot span:nth-child(n+2) { display: none; } }

/* At a glance: tinted columns under a wavy band */
.osd-band { margin-top: 18px; border-radius: 24px; background: var(--osd-card-bg, #fff); border: 1px solid var(--osd-line); overflow: hidden; }
.osd-band-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px 26px; background: var(--osd-band-bg, #fdf0fd);
  -webkit-mask: radial-gradient(14px 10px at 50% 100%, transparent 98%, #000) 0 0 / 28px 100%, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat;
}
.osd-band-head h3 { margin: 0; font: 800 20px/1 var(--osd-body); color: var(--osd-band-ink, #c4129f); letter-spacing: -.02em; }
.osd-band-head .osd-sticker { margin-left: auto; }
.osd-band-body { padding: 4px 16px 16px; }
.osd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.osd-col { padding: 12px 14px; border-radius: 16px; border: 1px solid; }
.osd-col.is-yellow { background: #fffaf0; border-color: #f7e2b6; } .osd-col.is-yellow h4 { color: #8a5a00; }
.osd-col.is-green { background: #f2fbf6; border-color: #c6ebd6; } .osd-col.is-green h4 { color: #06743a; }
.osd-col.is-red { background: #fff6f6; border-color: #f6cfcf; } .osd-col.is-red h4 { color: #a1151b; }
.osd-col h4 { margin: 0 0 8px; font: 700 14px/1.2 var(--osd-body); }
.osd-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.osd-col li { font-size: 13px; color: var(--osd-ink-2); }
.osd-col li b { color: var(--osd-ink); }
.osd-col li code { margin-left: 6px; font: 700 11px/1 var(--osd-body); color: var(--osd-accent); }
.osd-col li p { margin: 3px 0 0; }
@container osd (max-width: 760px) { .osd-cols { grid-template-columns: 1fr; } }
@container osd (max-width: 560px) {
  .osd-auto-tools { display: none !important; }
  .osd--auto .osd-table th, .osd--auto .osd-table td { padding-top: 7px; padding-bottom: 7px; }
  .osd--auto .osd-lead { font-size: 15px; }
  .osd--auto .osd-trace { margin-bottom: 8px; }
  .osd-auto-hero-art { width: 64px !important; height: 64px !important; right: 10px !important; top: 8px !important; }
  .osd-auto-hero .osd-auto-eyebrow, .osd-auto-hero .osd-auto-headline { padding-right: 64px; }
  .osd-auto-hero .osd-auto-headline { font-size: 24px !important; }
}

/* ===========================================================================
   v4 — header hierarchy, compact people picker, Calder palette
   =========================================================================== */
.osd-brandlock { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.osd-brandlock .osd-mark { width: 30px; height: 30px; border-radius: 9px; }
.osd-brandlock b { color: inherit; font: 800 17px/1 var(--osd-head); letter-spacing: -.025em; white-space: nowrap; }
.osd-auto-tools { justify-content: flex-start; gap: 8px; margin-top: 2px; }
.osd-auto-tools .osd-auto-chips { gap: 8px; }
.osd-auto-user-in { padding: 3px 8px 3px 3px; gap: 7px; }
.osd-auto-user-in .osd-ava { width: 24px; height: 24px; font-size: 10px; }
.osd-auto-user-in > span { display: flex; flex-direction: column; line-height: 1.1; }
.osd-auto-user-in small { font-size: 10.5px; }
/* Daybook's line under the greeting: white and readable on any sky */
.osd-auto-hero .osd-auto-sub, .osd-hero-sub { color: #fff !important; opacity: 1 !important; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 30, 60, .35); }
/* the app's top bar on narrow screens: one row, people as an avatar */
@container osd (max-width: 600px) {
  .osd-top { flex-wrap: nowrap !important; gap: 8px; padding: 8px 12px !important; }
  .osd-top .osd-top-title { display: block !important; width: auto !important; flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .osd-top .osd-top-title small { display: none; }
  .osd-select { flex: none !important; }
  .osd-select > button { width: auto !important; height: 34px; padding: 0 8px 0 6px; gap: 6px; }
  .osd-select[data-select="role"] > button > span:not(.osd-ava) { display: none; }
  .osd-select[data-select="scope"] > button { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .osd-menu { left: auto !important; right: 0 !important; width: 250px !important; }
}
/* extra stat card tones */
.osd-statcard.is-cobalt { background: radial-gradient(circle, rgba(255,255,255,.2) 1.2px, transparent 1.6px) 0 0 / 12px 12px, linear-gradient(160deg, #3d5afe, #2234d8); }
.osd-statcard.is-lime { background: #d7ff5f; color: #10165c; }
.osd-statcard.is-lime .osd-statbig em { color: #3d5afe; }
.osd-statcard.is-coral { background: repeating-conic-gradient(from 0deg at 80% 25%, #ff7a59 0 10deg, #ff6a47 10deg 20deg); }
.osd-statcard.is-cobalt .osd-statbig em, .osd-statcard.is-coral .osd-statbig em { color: #d7ff5f; }
.osd-statcard .osd-statchip .osd-ico, .osd-statfoot .osd-ico { color: var(--osd-accent); }
/* in the card, the OS's answer needs no name tag: the brand is right above */
.osd--auto .osd-msg:not(.osd-msg--me) > .osd-msg-who { display: none; }
.osd-statbig b { font-size: clamp(22px, 6.4cqi, 42px); }

/* ===========================================================================
   v5 — scripted runs, people menu, hand-over, no-container fallback
   =========================================================================== */
.osd-auto-user { position: relative; }
.osd-auto-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 210px; padding: 5px; border-radius: 14px;
  background: #fff; color: var(--osd-ink); box-shadow: 0 18px 40px -14px rgba(13, 27, 42, .45); font-style: normal;
}
.osd-auto-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 12.5px; font-weight: 600; }
.osd-auto-menu button.is-pressed, .osd-auto-menu button:hover { background: var(--osd-soft); }
.osd-auto-menu small { display: block; font-weight: 500; color: var(--osd-mute); font-size: 11px; }
.osd--auto .osd-followups { margin-top: 2px; }
.osd--auto .osd-followups .osd-prompt { font-size: 12.5px; padding: 7px 11px; }
.osd--auto .osd-auto-board .osd-stack3 { padding-top: 4px; }
.osd--auto.is-takeover { box-shadow: inset 0 0 0 3px var(--osd-accent); }
.osd--auto { cursor: pointer; }
.osd--auto .osd-btn, .osd--auto .osd-prompt { cursor: pointer; }

/* browsers without container queries: decide by the screen instead */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .osd--auto, .osd--embed { grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr) auto; }
    .osd--auto > .osd-rail, .osd--embed > .osd-rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 4px 6px 6px; border-right: 0; }
    .osd--auto > .osd-rail .osd-mark, .osd--embed > .osd-rail .osd-mark { display: none; }
    .osd--auto .osd-nav, .osd--embed .osd-nav { flex: 1; width: auto; }
    .osd--auto .osd-auto-main, .osd--embed .osd-main { grid-row: 1; }
    .osd-auto-tools { display: none !important; }
    .osd-statbig b { font-size: 26px; }
  }
}
/* the app inside the card: a one-row top bar at any width */
.osd--embed .osd-top { flex-wrap: nowrap; }
.osd--embed .osd-top-title small, .osd--embed .osd-select > button small { display: none; }
.osd--embed .osd-top-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osd--embed .osd-select[data-select="role"] > button > span:not(.osd-ava) { display: none; }

/* avatars: initials dead centre, a clean ring */
.osd .osd-ava { display: inline-grid; place-items: center; padding: 0; line-height: 1; text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
/* the compact people button: just the avatar, in a circle */
@container osd (max-width: 600px) {
  .osd-select[data-select="role"] > button { width: 36px !important; height: 36px; padding: 0 !important; justify-content: center; border-radius: 50%; }
  .osd-select[data-select="role"] > button > .osd-ico { display: none; }
}
.osd--embed .osd-select[data-select="role"] > button { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.osd--embed .osd-select[data-select="role"] > button > .osd-ico { display: none; }