/* ---- hero-console.css ---- */
/* Hero console — interactive workspace.
   A glass app window: .ui-window supplies the glass (--surface + --blur). The
   chrome (top bar, tab strip, sidebar) carries a faint tint so the content pane
   reads as the bright sheet, the way a macOS window does. Every colour is a
   theme token, and nothing animates unless the visitor acts. */
.d-hero { container-type: inline-size; position: relative; --hx-chrome: rgba(var(--fg-rgb), 0.028); }
.d-hero__win { position: relative; height: 580px; display: flex; flex-direction: column; }

/* top bar */
.d-hero__bar { gap: 14px; position: relative; z-index: 4; background: var(--hx-chrome); }
.d-hero__brand { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; color: var(--text); white-space: nowrap; }
.d-hero__brand { display: inline-flex; align-items: center; line-height: 0; }
.d-hero__brand .d-hero__logo { height: 17px; width: auto; }
.d-hero__wswrap { position: relative; padding-left: 10px; border-left: 1px solid var(--line); }
.d-hero__ws { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-hero__ws:hover, .d-hero__ws[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.d-hero__ws svg { width: 12px; height: 12px; color: var(--text-3); transition: transform var(--d-lg) var(--ease); }
.d-hero__ws[aria-expanded="true"] svg { transform: rotate(180deg); }
.d-hero__menu { position: absolute; top: calc(100% + 8px); left: 4px; min-width: 244px; padding: 6px; background: var(--menu-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-bd); border-radius: 14px; box-shadow: var(--shadow-glass-hover); z-index: 30; animation: elx-enter var(--d-lg) var(--ease) both; }
.d-hero__menu[hidden] { display: none; }
.d-hero__menu-label { padding: 6px 8px 6px; }
.d-hero__menu-item { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-hero__menu-item svg { width: 14px; height: 14px; color: var(--text-3); }
.d-hero__menu-item:hover { background: var(--surface-3); color: var(--text); }
.d-hero__menu-item.is-on, .d-hero__menu-item.is-on svg { color: var(--text); }
.d-hero__search { height: 30px; flex: 0 1 340px; margin-left: 6px; gap: 8px; color: var(--text-3); font-size: 12px; cursor: pointer; text-align: left; transition: border-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-hero__search:hover { border-color: var(--line-3); color: var(--text-2); }
.d-hero__search svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }
.d-hero__search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-hero__bar .ui-bar__meta { white-space: nowrap; }

/* tab strip (narrow widths) */
.d-hero__tabs { display: none; gap: 4px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--hx-chrome); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.d-hero__tabs::-webkit-scrollbar { display: none; }
.d-hero__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease), border-color var(--d-md) var(--ease); }
.d-hero__tab svg { width: 13px; height: 13px; color: var(--text-3); }
.d-hero__tab:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.04); }
.d-hero__tab[aria-current="true"] { color: var(--text); background: var(--surface-3); border-color: var(--chip-violet-bd); }
.d-hero__tab[aria-current="true"] svg { color: var(--text); }
.d-hero__tab--ask { display: none; }

/* body */
.d-hero__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px minmax(0, 1fr); }

/* sidebar */
.d-hero__side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); background: var(--hx-chrome); overflow-y: auto; }
.d-hero__label { padding: 14px 8px 8px; }
.d-hero-agent { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; height: 38px; flex: none; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background-color var(--d-lg) var(--ease), border-color var(--d-lg) var(--ease); }
.d-hero-agent:hover { background: rgba(var(--fg-rgb), 0.035); }
.d-hero-agent__icon { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); }
.d-hero-agent__icon svg { width: 14px; height: 14px; }
.d-hero-agent__name { min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-hero-agent__stat { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.d-hero-agent__stat:empty { border-color: transparent; }
.d-hero-agent__stat:has(.ui-dot) { border-color: transparent; padding: 0; }
.d-hero-agent__stat.is-neg { border-color: var(--chip-neg-bd); background: var(--chip-neg-bg); color: var(--chip-neg-fg); }
.d-hero-agent[aria-current="true"] { background: var(--surface-3); border-color: var(--chip-violet-bd); }
.d-hero-agent[aria-current="true"] .d-hero-agent__name { color: var(--text); }
.d-hero-agent[aria-current="true"] .d-hero-agent__icon { color: var(--text); border-color: var(--chip-violet-bd); }

/* views */
.d-hero__main { position: relative; min-width: 0; min-height: 0; }
.d-hero__view { position: absolute; inset: 0; display: none; min-width: 0; }
.d-hero__view.is-active { display: block; }
.d-hero__today.is-active { display: grid; grid-template-columns: minmax(0, 1fr) 316px; }
.d-hero__missing { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--text-3); font-size: 13px; }
.d-hero__missing svg { width: 22px; height: 22px; }

/* feed */
.d-hero__feed { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.d-hero__feedhead { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.d-hero__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
/* the fade is a mask, so only the stop's alpha counts */
.d-hero__list { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, rgb(var(--fg-rgb)) 78%, transparent); mask-image: linear-gradient(180deg, rgb(var(--fg-rgb)) 78%, transparent); }
.is-interactive .d-hero__list { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
.d-hero-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.d-hero-item__icon { width: 30px; height: 30px; margin-top: 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); }
.d-hero-item__icon svg { width: 15px; height: 15px; }
.d-hero-item__main { min-width: 0; }
.d-hero-item__open { display: block; width: calc(100% + 16px); margin: 0 -8px; padding: 4px 8px 6px; border-radius: 8px; text-align: left; cursor: pointer; transition: background-color var(--d-md) var(--ease); }
.d-hero-item__open:hover { background: rgba(var(--fg-rgb), 0.035); }
.d-hero-item__head { display: flex; align-items: baseline; gap: 10px; }
.d-hero-item__name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.d-hero-item__time { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.d-hero-item__text { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); min-height: 1.5em; text-wrap: pretty; }
.d-hero-item__working { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.d-hero-item__actions { margin-top: 6px; display: flex; gap: 8px; min-height: 28px; }
.d-hero-item__actions .ui-btn svg { width: 12px; height: 12px; color: var(--text-3); transition: transform var(--d-lg) var(--ease), color var(--d-lg) var(--ease); }
.d-hero-item__actions .ui-btn:hover svg { transform: translateX(2px); color: var(--text); }
.d-hero-item.is-working .d-hero-item__icon { border-color: var(--chip-violet-bd); }

/* ask panel */
.d-hero__ask { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px; border-left: 1px solid var(--line); }
.d-hero__askhead { display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.d-hero__askhead svg { width: 15px; height: 15px; color: var(--text-3); }
.d-hero__asknote { margin-left: auto; }
.d-hero__thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 16px 2px 10px; }
.d-hero__ex { display: grid; gap: 10px; }
.d-hero__q { display: flex; justify-content: flex-end; }
.d-hero__q .ui-msg--user { max-width: calc(100% - 12px); margin-left: auto; }
.d-hero__a { display: grid; gap: 8px; }
.d-hero__answer { font-size: 13px; line-height: 1.55; max-width: 100%; }
.d-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity var(--d-xl) var(--ease), transform var(--d-xl) var(--ease); }
.d-hero__a.has-chips .d-hero__chips { opacity: 1; transform: none; }
.d-hero__chip { height: 24px; cursor: pointer; transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-hero__chip:hover { border-color: var(--line-3); background: rgba(var(--fg-rgb), 0.05); color: var(--text); }
/* violet chip on hover: a solid violet edge over a doubled violet tint */
.d-hero__chip.ui-chip--violet:hover { border-color: var(--violet); background: linear-gradient(var(--chip-violet-bg), var(--chip-violet-bg)) var(--chip-violet-bg); color: var(--chip-violet-fg); }
.d-hero__chip .d-hero__chev { width: 11px; height: 11px; margin-left: -2px; opacity: 0.55; }
.d-hero__thinking { display: none; height: 20px; align-items: center; }
.d-hero__a.is-thinking .d-hero__thinking { display: flex; }
.d-hero__a.is-thinking .d-hero__answer, .d-hero__a.is-thinking .d-hero__worked, .d-hero__a.is-thinking .d-hero__chips { display: none; }
.d-hero__suggest { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.d-hero__sg { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 11.5px; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-hero__sg:hover { color: var(--text); border-color: var(--line-3); background: var(--surface-3); }
.d-hero__input { margin-top: 10px; padding-right: 5px; }
.d-hero__input input { flex: 1; height: 100%; font-size: 12.5px; }
.d-hero__input .ui-input__send { cursor: pointer; transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-hero__input .ui-input__send:hover { background: rgba(var(--fg-rgb), 0.12); color: var(--text); }
.d-hero__input:focus-within { border-color: var(--chip-violet-bd); }
.d-hero .is-hidden { visibility: hidden; }

/* palette: a frosted scrim (the page colour, half strength) under a glass sheet */
.d-hero__palette { position: absolute; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding-top: 64px; background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: inherit; }
.d-hero__palette[hidden] { display: none; }
.d-hero__pbox { width: min(560px, 92%); background: var(--menu-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-bd); border-radius: 16px; box-shadow: var(--shadow-glass-hover); overflow: hidden; animation: elx-enter var(--d-lg) var(--ease) both; }
.d-hero__pfield { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.d-hero__pfield svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.d-hero__pfield input { flex: 1; height: 100%; font-size: 14px; }
.d-hero__pfield kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; }
.d-hero__plist { max-height: 340px; overflow-y: auto; padding: 6px; }
.d-hero__pitem { display: grid; grid-template-columns: 28px auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.d-hero__pitem.is-active, .d-hero__pitem:hover { background: var(--surface-3); }
.d-hero__picon { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); }
.d-hero__picon svg { width: 14px; height: 14px; }
.d-hero__pname { color: var(--text); font-weight: 500; white-space: nowrap; }
.d-hero__pline { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-hero__pempty { padding: 18px; text-align: center; color: var(--text-3); font-size: 12.5px; }

/* responsive: sidebar → tab strip; then Ask becomes its own tab */
@container (max-width: 1000px) {
  .d-hero__win { height: 620px; }
  .d-hero__tabs { display: flex; }
  .d-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .d-hero__side { display: none; }
  .d-hero__today.is-active { grid-template-columns: minmax(0, 1fr) 300px; }
}
@container (max-width: 720px) {
  .d-hero__win { height: 600px; }
  .d-hero__today.is-active { grid-template-columns: minmax(0, 1fr); }
  .d-hero__ask { display: none; border-left: 0; }
  .d-hero__today.is-ask .d-hero__feed { display: none; }
  .d-hero__today.is-ask .d-hero__ask { display: flex; }
  .d-hero__tab--ask { display: inline-flex; }
  .d-hero__search { flex: 0 0 auto; width: 30px; padding: 0; justify-content: center; margin-left: auto; }
  .d-hero__search span { display: none; }
  .d-hero__metatext { display: none; }
}
@container (max-width: 420px) {
  .d-hero__win { height: 590px; }
  .d-hero__wswrap { display: none; }
  .d-hero-item { padding: 12px 14px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); }
  .d-hero-item__icon { width: 28px; height: 28px; }
  .d-hero__feedhead { padding: 12px 14px; }
  .d-hero__palette { padding-top: 40px; }
}

/* ---- method-agent.css ---- */
/* Method Agent — thread + composer; "Sources used" panel at >= 760px.
   The root (.demo) is the container; the window is its direct child so the
   embedded variant's core rules apply. */
.d-method { container: d-method / inline-size; }
.d-method__win { height: 452px; display: flex; flex-direction: column; }
.d-method .ui-bar { flex: none; }
.d-method .ui-bar__meta svg { width: 12px; height: 12px; }

.d-method__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.d-method__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* thread: scrolls inside, newest at the bottom */
.d-method__thread { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 20px 18px 10px; -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(var(--fg-rgb)) 16px); mask-image: linear-gradient(180deg, transparent 0, rgb(var(--fg-rgb)) 16px); /* mask: only alpha counts */ }
.d-method__scene { display: flex; flex-direction: column; gap: 28px; transition: opacity var(--d-lg) var(--ease); }
.d-method__scene.is-out, .d-method__side-body.is-out { opacity: 0; }
.d-method__ex { display: flex; flex-direction: column; gap: 18px; }

.d-method__turn--user { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.d-method__turn--user .ui-msg--user { max-width: 80%; overflow-wrap: anywhere; }
.d-method__who { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1; color: var(--text); font-weight: 500; }
.d-method__who .ui-avatar { width: 22px; height: 22px; font-size: 9.5px; }
.d-method__me svg { width: 12px; height: 12px; color: var(--text-2); }
.d-method__role { color: var(--text-3); font-weight: 400; }
.d-method__time { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0; }

.d-method__turn--agent { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.d-method__status { min-height: 24px; display: flex; align-items: center; }
.d-method__status .ui-worked svg.i-chevronRight { width: 11px; height: 11px; transition: transform var(--d-lg) var(--ease); }
.d-method__status .ui-worked.is-live { color: var(--text-2); }
.d-method__nomatch { height: 24px; }
.d-method__answer { font-size: 13px; line-height: 1.6; color: var(--text); max-width: 62ch; text-wrap: pretty; }

/* "Searched N sources ›" toggles the list of everything it read */
.d-method .d-method__worked { position: relative; height: 24px; margin-left: -6px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-method__worked::before { content: ""; position: absolute; inset: -4px 0; }
.d-method .d-method__worked:hover, .d-method .d-method__worked[aria-expanded="true"] { color: var(--text-2); }
.d-method .d-method__worked:hover { background: var(--surface-3); }
.d-method__worked[aria-expanded="true"] svg.i-chevronRight { transform: rotate(90deg); }
.d-method__list, .d-method__excerpt { display: grid; grid-template-rows: 0fr; width: 100%; margin-top: -9px; opacity: 0; visibility: hidden; transition: grid-template-rows var(--d-lg) var(--ease), margin-top var(--d-lg) var(--ease), opacity var(--d-lg) var(--ease), visibility 0s linear var(--d-lg); }
.d-method__list.is-open, .d-method__excerpt.is-open { grid-template-rows: 1fr; margin-top: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
.d-method__list-in { min-height: 0; overflow: hidden; margin-left: 5px; padding-left: 13px; border-left: 1px solid var(--line-2); }
.d-method__lrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; max-width: 420px; height: 26px; font-size: 12px; color: var(--text-3); }
.d-method__lrow svg { width: 13px; height: 13px; color: var(--text-4); }
.d-method__lrow.is-used { color: var(--text-2); }
.d-method__lrow.is-used svg { color: var(--text-3); }
.d-method__ltitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-method__lused { font-family: var(--font-mono); font-size: 10.5px; color: var(--violet); letter-spacing: 0; }
.d-method__lrow .d-method__date { color: var(--text-3); }

/* source chips: buttons that show the quoted passage */
.d-method__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.d-method__chips:empty { display: none; }
.d-method .d-method__chip { position: relative; height: 26px; padding: 0 9px; font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--chip-violet-fg); transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-method__chip::before { content: ""; position: absolute; inset: -3px 0; }
.d-method .d-method__chip:hover { border-color: var(--violet); }
/* pressed: solid violet edge over a doubled violet tint */
.d-method .d-method__chip[aria-pressed="true"] { border-color: var(--violet); background: linear-gradient(var(--chip-violet-bg), var(--chip-violet-bg)) var(--chip-violet-bg); color: var(--text); }
.d-method__excerpt { max-width: 520px; }
.d-method__excerpt-in { min-height: 0; overflow: hidden; }
.d-method__excerpt .d-method__src { margin: 1px 0; }

/* what the agent is reading, collapses into the "Searched" line */
.d-method__trail { display: grid; grid-template-rows: 1fr; width: 100%; transition: grid-template-rows var(--d-xl) var(--ease), opacity var(--d-lg) var(--ease); }
.d-method__trail.is-closed { grid-template-rows: 0fr; opacity: 0; }
.d-method__trail-in { min-height: 0; overflow: hidden; margin-left: 5px; padding-left: 13px; border-left: 1px solid var(--line-2); }
.d-method__trail-row { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 12px; color: var(--text-3); }
.d-method__trail-row svg { width: 13px; height: 13px; flex: none; color: var(--text-4); }
.d-method__trail-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* follow-up questions above the composer (scroll sideways when they don't fit) */
.d-method__nexts { display: flex; gap: 6px; min-height: 32px; margin: 0 calc(var(--cx) * -1) 8px; padding: 1px var(--cx); scroll-padding-inline: var(--cx); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(var(--fg-rgb)) var(--cx), rgb(var(--fg-rgb)) calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, rgb(var(--fg-rgb)) var(--cx), rgb(var(--fg-rgb)) calc(100% - 28px), transparent); transition: opacity var(--d-lg) var(--ease); }
.d-method__nexts::-webkit-scrollbar { display: none; }
.d-method__nexts.is-out { opacity: 0; pointer-events: none; }
.d-method .d-method__next { position: relative; flex: none; height: 30px; padding: 0 12px; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2); transition: color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-method__next::before { content: ""; position: absolute; inset: -1px 0; }
.d-method .d-method__next:hover { color: var(--text); border-color: var(--line-3); background: var(--surface-3); }
.d-method .d-method__next:focus-visible { outline-offset: -2px; border-radius: var(--r-pill); }

/* composer: a real input */
.d-method__composer { --cx: 14px; flex: none; padding: 10px var(--cx) 14px; }
.d-method__input { gap: 8px; padding: 0 3px 0 12px; transition: border-color var(--d-md) var(--ease); }
.d-method__input:focus-within { border-color: var(--chip-violet-bd); }
.d-method__field { flex: 1 1 auto; align-self: stretch; font-size: 12.5px; color: var(--text); }
.d-method .d-method__field:focus-visible { outline: none; } /* the field's box shows focus */
.d-method .d-method__send { position: relative; flex: none; width: 30px; height: 30px; color: var(--text-2); transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-method__send::before { content: ""; position: absolute; inset: -1px; }
.d-method__send svg { transform: rotate(-90deg); }
.d-method .d-method__send:hover { background: rgba(var(--fg-rgb), 0.12); color: var(--text); }
.d-method .d-method__composer.has-text .d-method__send { background: var(--primary); color: var(--on-primary); }
.d-method .d-method__composer.has-text .d-method__send:hover { background: var(--primary-hover); }
@supports (-webkit-touch-callout: none) { .d-method__field { font-size: 16px; } } /* iOS zooms into smaller fields */

/* sources panel (wide) */
.d-method__side { display: none; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); }
.d-method__side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; flex: none; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); }
.d-method__count { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.d-method__side-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: opacity var(--d-lg) var(--ease); }
.d-method__side-body > * { flex: none; }

.d-method__src { padding: 12px; transition: border-color var(--d-lg) var(--ease), background-color var(--d-lg) var(--ease); }
.d-method__src.is-hit { border-color: var(--chip-violet-bd); background: var(--surface-3); }
.d-method__src-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
.d-method__tile { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: var(--text-2); }
.d-method__tile svg { width: 14px; height: 14px; }
.d-method__src-txt { min-width: 0; padding-top: 1px; }
.d-method__src-title { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-method__src-loc { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-method__date { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-3); letter-spacing: 0; white-space: nowrap; }
/* the quoted passage: the one place the violet edge is used */
.d-method__quote { margin-top: 11px; padding: 1px 0 1px 10px; border-left: 2px solid var(--violet); font-size: 12px; line-height: 1.5; color: var(--text-2); }
.d-method__at { margin-right: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0; }

.d-method__also { margin-top: 4px; display: flex; flex-direction: column; }
.d-method__also .ui-label { padding: 0 2px 6px; }
.d-method__also-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; height: 30px; padding: 0 2px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.d-method__also-row svg { width: 14px; height: 14px; }
.d-method__also-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-method__also-row .d-method__date { color: var(--text-3); }

.d-method__pst { display: inline-flex; align-items: center; color: var(--text-3); }
.d-method__pst svg { width: 13px; height: 13px; }
.d-method__pst .ui-typing i { width: 4px; height: 4px; }
.d-method__searching { display: flex; align-items: center; gap: 10px; padding: 4px 2px; font-size: 12px; color: var(--text-3); }

.d-method__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 2px; }
.d-method__empty .d-method__tile { margin-bottom: 8px; color: var(--text-3); }
.d-method__empty-title { font-size: 12.5px; font-weight: 500; color: var(--text); }
.d-method__empty-sub { font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* phone */
@container d-method (max-width: 419px) {
  .d-method__win { height: 476px; }
  .d-method__thread { padding: 16px 14px 10px; }
  .d-method__turn--user .ui-msg--user { max-width: 88%; }
  .d-method__composer { --cx: 12px; padding: 8px var(--cx) 12px; }
}

/* service page: thread + sources panel */
@container d-method (min-width: 760px) {
  .d-method__win { height: 488px; }
  .d-method__body { grid-template-columns: minmax(0, 1fr) 340px; }
  .d-method__side { display: flex; }
  .d-method__trail, .d-method__excerpt { display: none; } /* the panel shows these */
  .d-method__thread { padding: 24px 24px 10px; }
  .d-method__composer { --cx: 18px; padding: 10px var(--cx) 16px; }
}

/* ---- call-vault.css ---- */
/* Call Vault — library: toolbar, folders (>= 480px), list, preview (>= 760px),
   detail view below 760px. The root (.demo) is the container; the window is
   its direct child so the embedded variant's core rules apply. */
.d-vault { container: d-vault / inline-size; }
/* heights = bar + toolbar + list head + whole rows, so the list never ends on a sliver */
.d-vault__win { height: 451px; display: flex; flex-direction: column; }
.d-vault .ui-bar { flex: none; }
.d-vault .ui-bar__meta { font-variant-numeric: tabular-nums; }
.d-vault__total, .d-vault__n { display: inline-flex; overflow: hidden; }
.d-vault__tick { display: inline-block; animation: d-vault-tick var(--d-xl) var(--ease) both; white-space: pre; }
@keyframes d-vault-tick { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes d-vault-fade { from { opacity: 0; } to { opacity: 1; } }

/* toolbar */
.d-vault__tools { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.d-vault__search { flex: 1 1 auto; min-width: 0; height: 30px; gap: 8px; padding: 0 4px 0 10px; border-radius: var(--r-field); font-size: 12px; cursor: text; transition: border-color var(--d-md) var(--ease); }
.d-vault__search:focus-within { border-color: var(--chip-violet-bd); }
.d-vault__search > svg { width: 13px; height: 13px; flex: none; }
.d-vault__q { flex: 1 1 auto; align-self: stretch; font-size: 12px; }
.d-vault .d-vault__q:focus-visible { outline: none; } /* the field's box shows focus */
.d-vault__kbd { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-right: 2px; border: 1px solid var(--line-2); border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); letter-spacing: 0; }
.d-vault .d-vault__clear { position: relative; display: none; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-vault__clear::before { content: ""; position: absolute; inset: -4px; }
.d-vault__clear svg { width: 12px; height: 12px; }
.d-vault .d-vault__clear:hover { color: var(--text); background: var(--surface-3); }
.d-vault__search.has-text .d-vault__clear { display: grid; }
.d-vault__search.has-text .d-vault__kbd { display: none; }
@supports (-webkit-touch-callout: none) { .d-vault__q { font-size: 16px; } } /* iOS zooms into smaller fields */

.d-vault__filters { display: flex; gap: 6px; flex: none; }
.d-vault .d-vault__type { position: relative; height: 26px; padding: 0 9px; font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--text-2); transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-vault__type::before { content: ""; position: absolute; inset: -3px 0; }
.d-vault__type svg { color: var(--text-3); }
.d-vault .d-vault__type:hover { border-color: var(--line-3); color: var(--text); background: var(--surface-3); }
.d-vault .d-vault__type[aria-pressed="true"] { border-color: var(--chip-violet-bd); color: var(--chip-violet-fg); background: var(--chip-violet-bg); }
.d-vault .d-vault__type[aria-pressed="true"] svg { color: currentColor; }

/* body */
.d-vault__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transition: opacity var(--d-lg) var(--ease); }
.d-vault__win.is-resetting .d-vault__body, .d-vault__win.is-resetting .d-vault__total { opacity: 0; }

/* folders */
.d-vault__folders { display: none; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 6px; border-right: 1px solid var(--line); }
.d-vault__fhead { display: flex; align-items: center; height: 18px; padding: 0 8px; margin-bottom: 6px; }
.d-vault__flist { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; }
.d-vault .d-vault__folder { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; width: 100%; height: 32px; flex: none; padding: 0 7px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; color: var(--text-2); text-align: left; transition: background-color var(--d-lg) var(--ease), border-color var(--d-lg) var(--ease), color var(--d-lg) var(--ease); }
.d-vault__folder svg { width: 14px; height: 14px; color: var(--text-3); }
.d-vault__fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vault__n { justify-content: flex-end; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0; font-variant-numeric: tabular-nums; transition: color var(--d-xl) var(--ease); }
.d-vault .d-vault__folder:hover { background: var(--surface-2); color: var(--text); }
.d-vault .d-vault__folder.is-hit { background: var(--surface-3); color: var(--text); }
.d-vault__folder.is-hit .d-vault__n, .d-vault__folder.is-hit svg { color: var(--text); }
.d-vault .d-vault__folder[aria-pressed="true"] { background: var(--surface-3); border-color: var(--chip-violet-bd); color: var(--text); }
.d-vault__folder[aria-pressed="true"] svg { color: var(--violet); }
.d-vault .d-vault__folder:focus-visible { outline-offset: -2px; border-radius: 8px; } /* the list scrolls, so keep the ring inside */
.d-vault__folder--unsorted { margin-top: 6px; }
.d-vault__folder.is-zero .d-vault__n { color: var(--text-4); }

/* list (a pane that slides away for the detail view below 760px) */
.d-vault__main { position: relative; min-width: 0; min-height: 0; overflow: hidden; container: d-vault-list / inline-size; }
.d-vault__pane { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform var(--d-xl) var(--ease), opacity var(--d-md) var(--ease), visibility 0s; }
.d-vault__lhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 34px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--line); }
.d-vault__lleft { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.d-vault .d-vault__fx { position: relative; height: 24px; padding: 0 6px 0 8px; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--chip-violet-fg); transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-vault__fx::before { content: ""; position: absolute; inset: -4px 0; }
.d-vault__fx svg { width: 12px; height: 12px; }
.d-vault__fx svg.i-close { width: 11px; height: 11px; color: var(--text-2); }
/* hover: solid violet edge over a doubled violet tint */
.d-vault .d-vault__fx:hover { border-color: var(--violet); background: linear-gradient(var(--chip-violet-bg), var(--chip-violet-bg)) var(--chip-violet-bg); }
.d-vault__list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.d-vault.is-live .d-vault__list { overflow-y: auto; }
.d-vault__in { display: grid; grid-template-rows: 1fr; }
.d-vault__in.is-new { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--d-xl) var(--ease), opacity var(--d-xl) var(--ease); }
.d-vault__in.is-new.is-open { grid-template-rows: 1fr; opacity: 1; }
.d-vault__clip { min-height: 0; overflow: hidden; }

/* rows: the whole row is one button; the file button sits above it */
.d-vault__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; height: 53px; padding: 0 14px; border-bottom: 1px solid var(--line); transition: background-color var(--d-lg) var(--ease), box-shadow var(--d-lg) var(--ease); }
.d-vault__row:hover { background: var(--surface-2); }
.d-vault__row.is-sel { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--violet); }
.d-vault__hit { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 10px; min-width: 0; }
.d-vault__hit::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.d-vault .d-vault__hit:focus-visible { outline: none; }
.d-vault .d-vault__hit:focus-visible::after { outline: 2px solid var(--violet); outline-offset: -2px; }
.d-vault__tile { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); }
.d-vault__tile svg { width: 14px; height: 14px; }
.d-vault__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-vault__title { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vault__meta { font-family: var(--font-mono); font-size: 11px; line-height: 1.35; color: var(--text-3); letter-spacing: 0; white-space: nowrap; }
.d-vault__tags { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; pointer-events: none; }
.d-vault__fslot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.d-vault__fchip { transition: border-color var(--d-xl) var(--ease), color var(--d-xl) var(--ease), background-color var(--d-xl) var(--ease); }
.d-vault__fchip.is-filing { gap: 6px; color: var(--text-2); }
.d-vault__fchip .ui-typing { height: 10px; gap: 3px; }
.d-vault__fchip .ui-typing i { width: 4px; height: 4px; }
.d-vault__new { transition: opacity var(--d-lg) var(--ease); }
.d-vault__new.is-gone { opacity: 0; }

/* the suggested folder: one button files the item */
.d-vault .d-vault__file { position: relative; height: 26px; padding: 0 9px; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); pointer-events: auto; }
.d-vault__file::before { content: ""; position: absolute; inset: -3px 0; }
.d-vault__file svg { width: 12px; height: 12px; color: var(--text-3); }
.d-vault__unsorted, .d-vault__fsub { display: none; }
.d-vault__file--wide .d-vault__fsub { display: inline; }
@container d-vault-list (min-width: 400px) { .d-vault__fsub { display: inline; } }
@container d-vault-list (min-width: 540px) { .d-vault__unsorted { display: inline-flex; } }

.d-vault__empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; text-align: center; }
.d-vault__empty .d-vault__tile { margin-bottom: 8px; color: var(--text-3); }
.d-vault__empty-title { max-width: 100%; font-size: 13px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.d-vault__empty-sub { font-size: 12px; color: var(--text-3); }
.d-vault .d-vault__empty-btn { height: 32px; margin-top: 12px; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--text); }

/* detail view (below 760px) */
.d-vault__detail { position: absolute; inset: 0; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform var(--d-xl) var(--ease), visibility 0s linear var(--d-xl); }
.d-vault__main.is-detail .d-vault__detail { transform: none; visibility: visible; transition-delay: 0s; }
.d-vault__main.is-detail .d-vault__pane { transform: translateX(-24%); opacity: 0; visibility: hidden; transition: transform var(--d-xl) var(--ease), opacity var(--d-md) var(--ease), visibility 0s linear var(--d-xl); }
.d-vault__dhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; height: 44px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.d-vault .d-vault__back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-2); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-vault__back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.d-vault .d-vault__back:hover { color: var(--text); background: var(--surface-3); }
.d-vault__dbody .d-vault__pv { min-height: 0; }
.d-vault__dbody .d-vault__media { flex: none; height: 132px; min-height: 0; }

/* preview (>= 760px) */
.d-vault__preview { display: none; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; border-left: 1px solid var(--line); }
.d-vault__pv { display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 14px; }
.d-vault__pv.is-in { animation: d-vault-fade var(--d-md) var(--ease) both; }
.d-vault__media { flex: 1 1 112px; min-height: 112px; max-height: 236px; border-radius: var(--r-ui); border: 1px solid var(--line); background: var(--surface-2); }
.d-vault__media--rec { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; }
.d-vault__wave { position: relative; height: 52px; display: flex; align-items: center; gap: 2px; border-radius: 4px; }
.d-vault__wave i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--line-3); transition: background-color var(--d-md) var(--ease); }
.d-vault__wave i.is-on { background: var(--text-2); }
.d-vault__head { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0; pointer-events: none; transition: opacity var(--d-md) var(--ease), left var(--d-lg) var(--ease); }
.d-vault__media.has-pos .d-vault__head { opacity: 1; }
.d-vault__seek { position: absolute; left: 0; top: -6px; width: 100%; height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; }
.d-vault__wave:has(.d-vault__seek:focus-visible) { outline: 2px solid var(--violet); outline-offset: 4px; }
.d-vault__ctrl { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0; }
.d-vault .d-vault__play { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); transition: background-color var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.d-vault__play::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.d-vault .d-vault__play:hover { background: var(--primary-hover); }
.d-vault .d-vault__play:active { transform: scale(0.94); }
.d-vault .d-vault__play:focus-visible { border-radius: 50%; }
.d-vault__play svg { width: 11px; height: 11px; fill: currentColor; }
.d-vault__play svg.i-play { margin-left: 1px; }
.d-vault__time { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.d-vault__silent { min-width: 0; font-family: var(--font-ui); font-size: 11px; color: var(--text-3); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vault__len { flex: none; margin-left: auto; }
.d-vault__media--doc { display: flex; align-items: center; justify-content: center; gap: 10px; }
.d-vault__page { width: 70px; height: 92px; padding: 10px 9px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface-3); display: flex; flex-direction: column; gap: 5px; }
.d-vault__page b { display: block; width: 62%; height: 4px; margin-bottom: 3px; border-radius: 2px; background: var(--text-4); }
.d-vault__page i { display: block; height: 3px; border-radius: 2px; background: var(--line-2); }
.d-vault__page i:nth-of-type(3n) { width: 72%; }
.d-vault__page i:nth-of-type(4n + 1) { width: 88%; }
.d-vault__page--2 { opacity: 0.55; }
.d-vault__dbody .d-vault__page { height: 100px; }
.d-vault__pv-head { display: flex; flex-direction: column; gap: 3px; }
.d-vault__pv-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vault__pv-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0; }
.d-vault__pv-sec { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.d-vault__person { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; height: 24px; font-size: 12px; color: var(--text); }
.d-vault__person .ui-avatar { width: 22px; height: 22px; font-size: 9px; }
.d-vault__pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vault__porg { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.d-vault__where { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.d-vault__crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); }
.d-vault__crumb svg { width: 14px; height: 14px; color: var(--text-3); }
.d-vault__crumb.is-unsorted { color: var(--text-3); }
.d-vault__crumb .ui-typing { height: 10px; gap: 3px; margin-left: 2px; }
.d-vault__crumb .ui-typing i { width: 4px; height: 4px; }
.d-vault__near { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; height: 24px; font-size: 12px; color: var(--text-2); }
.d-vault__near svg { width: 13px; height: 13px; color: var(--text-4); }
.d-vault__near-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-vault__near-d { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0; }

/* tablet + desktop column: folders appear */
@container d-vault (min-width: 480px) {
  .d-vault__body { grid-template-columns: 164px minmax(0, 1fr); }
  .d-vault__folders { display: flex; }
}

/* phone: search on its own line, folder chip under the title */
@container d-vault (max-width: 479px) {
  .d-vault__win { height: 469px; }
  .d-vault__tools { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .d-vault__search { flex-basis: 100%; }
  .d-vault__lhead { display: none; }
  .d-vault__main.has-folder .d-vault__lhead { display: flex; }
  .d-vault__row { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 7px; height: 84px; padding: 0 12px; }
  .d-vault__tags { justify-content: flex-start; padding-left: 38px; }
  .d-vault__fsub { display: inline; }
  .d-vault__unsorted { display: inline-flex; }
}

/* service page: folders + list + preview */
@container d-vault (min-width: 760px) {
  .d-vault__win { height: 504px; }
  .d-vault__body { grid-template-columns: 184px minmax(0, 1fr) 288px; }
  .d-vault__search { flex: 0 1 420px; }
  .d-vault__filters { margin-left: auto; }
  .d-vault__preview { display: block; }
  .d-vault__detail { display: none; }
  .d-vault__main.is-detail .d-vault__pane { transform: none; opacity: 1; visibility: visible; }
}

/* ---- retention-radar.css ---- */
/* Retention Radar: quiet list + drafted check-in; summary panel at >= 760px (wide, embedded) */
.d-radar {
  container: d-radar / inline-size;
  /* near-opaque fill for the chart label, which sits over bars: a glass token stacked on itself
     (backdrop blur can't reach inside the window, which is already blurred) */
  --fill-float: linear-gradient(var(--menu-bg), var(--menu-bg)) var(--menu-bg);
}
.d-radar [hidden] { display: none !important; }
.d-radar__win { height: 472px; display: flex; flex-direction: column; }
.d-radar__win > .ui-bar { flex: none; }
.d-radar .ui-bar__meta .ui-dot { width: 6px; height: 6px; }

/* embedded (a view inside the hero console): fill the view, no frame of its own */
.d-radar--embedded { height: 100%; }
.d-radar--embedded .d-radar__win { height: 100%; border: 0; border-radius: 0; background: transparent; }

.d-radar__layout { flex: 1 1 auto; min-height: 0; display: flex; transition: opacity var(--d-xl) var(--ease); }
.d-radar__win.is-fade .d-radar__layout { opacity: 0; }
.d-radar__side { display: none; }
.d-radar__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* list */
.d-radar__head,
.d-radar__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 72px 60px 104px;
  column-gap: 12px;
  align-items: center;
  padding: 0 16px;
}
.d-radar__head { flex: none; height: 34px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-3); white-space: nowrap; }
.d-radar__head > span:first-child { grid-column: 1 / span 2; }
.d-radar__list { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.d-radar__row { position: relative; width: 100%; height: 50px; border-bottom: 1px solid var(--line); text-align: left; transition: background-color var(--d-md) var(--ease); }
.d-radar__row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: var(--violet); opacity: 0; transition: opacity var(--d-lg) var(--ease); }
.d-radar__row:hover,
.d-radar__row[aria-current="true"] { background: var(--surface-3); }
.d-radar__row[aria-current="true"]::before { opacity: 1; }
.d-radar .d-radar__row:focus-visible { outline-offset: -2px; border-radius: 2px; }

.d-radar__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.d-radar__name, .d-radar__co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-radar__name { font-size: 12.5px; font-weight: 500; color: var(--text); }
.d-radar__co { font-size: 11.5px; color: var(--text-3); }
.d-radar__d2 { display: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; }
.d-radar__days { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-radar__act { display: flex; align-items: center; }
.d-radar__spark { overflow: visible; }
.d-radar__spark polyline { fill: none; stroke: var(--violet); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.d-radar__spark circle { fill: var(--violet); }
.d-radar__base { stroke: var(--line-2); stroke-width: 1; }
.d-radar__st { display: flex; min-width: 0; }
.d-radar__st .ui-dot { width: 6px; height: 6px; }
.d-radar__pop { animation: d-radar-pop var(--d-xl) var(--ease) both; }
@keyframes d-radar-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* drafted check-in */
.d-radar__dwrap { flex: 1 0 186px; min-height: 186px; display: flex; padding: 14px; }
.d-radar__draft { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--d-lg) var(--ease); }
.d-radar__draft.is-editing { border-color: var(--chip-violet-bd); }
.d-radar__dhead, .d-radar__msg, .d-radar__foot { transition: opacity var(--d-md) var(--ease); }
.d-radar__draft.is-swap .d-radar__dhead,
.d-radar__draft.is-swap .d-radar__msg,
.d-radar__draft.is-swap .d-radar__foot { opacity: 0; }
.d-radar__draft.d-radar__in .d-radar__dto,
.d-radar__draft.d-radar__in .d-radar__dn,
.d-radar__draft.d-radar__in .d-radar__msg > :not([hidden]) { animation: d-radar-in var(--d-lg) var(--ease) both; }
@keyframes d-radar-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.d-radar__dhead { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.d-radar__dhead svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }
.d-radar__dto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.d-radar__dname { color: var(--text); font-weight: 600; }
.d-radar__dn { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
.d-radar__msg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 11px 14px 4px; }
.d-radar__text { flex: none; font-size: 12.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.d-radar__text .ui-typing { height: 20px; }
/* edit: same box, same type, now a real field */
.d-radar .d-radar__ta {
  flex: 1 1 auto; display: block; width: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; resize: none; overflow-y: auto; background: transparent;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; letter-spacing: -0.01em; color: var(--text);
}
/* no draft yet: a quiet note where the draft goes; "Draft check-in" sits in the footer */
.d-radar__etext { flex: none; font-size: 12.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

.d-radar__foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 14px; }
/* core's `.demo button` reset outranks .ui-btn type and the primary fill's text colour */
.d-radar .ui-btn { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.d-radar .ui-btn--primary { color: var(--on-primary); }
.d-radar__foot .ui-btn { position: relative; transition: opacity var(--d-lg) var(--ease), background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), color var(--d-md) var(--ease), transform var(--d-sm) var(--ease); }
.d-radar__foot .ui-btn::after { content: ""; position: absolute; inset: -3px -2px; }
.d-radar .ui-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.d-radar__draft.is-off .d-radar__edit,
.d-radar__draft.is-off .d-radar__approve { opacity: 0.35; }
.d-radar__approve.is-pressed { transform: scale(0.95); background: var(--primary-hover); border-color: transparent; }
.d-radar__slot { position: relative; flex: 1 1 auto; min-width: 0; height: 28px; }
.d-radar__state { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; transition: opacity var(--d-md) var(--ease); }
.d-radar__state .ui-dot { width: 6px; height: 6px; }
.d-radar__state svg { width: 12px; height: 12px; flex: none; }
.d-radar__draft.is-approved .d-radar__state { color: var(--chip-ok-fg); }

/* inline toast: "Check-in approved · Undo" (sits where the draft state is shown) */
.d-radar__toast {
  position: absolute; left: 0; top: 50%; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 1px 0 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--menu-bg);
  font-size: 11.5px; line-height: 1; color: var(--text-2); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 4px));
  transition: opacity var(--d-lg) var(--ease), transform var(--d-lg) var(--ease), visibility 0s linear var(--d-lg);
}
.d-radar__slot.has-toast .d-radar__toast { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: 0s; }
.d-radar__slot.has-toast .d-radar__state { opacity: 0; }
.d-radar .d-radar__tav { width: 20px; height: 20px; font-size: 8px; }
.d-radar__tmsg { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--chip-ok-fg); }
.d-radar__tsep { color: var(--text-4); }
.d-radar .d-radar__undo { position: relative; flex: none; height: 22px; padding: 0 8px 0 2px; border-radius: var(--r-pill); font-weight: 600; color: var(--text); transition: color var(--d-md) var(--ease); }
.d-radar__undo:hover { color: var(--text-2); }
.d-radar__undo::after { content: ""; position: absolute; inset: -5px -3px; }

/* compact (phones): name + status only, days move under the name */
@container d-radar (max-width: 479px) {
  .d-radar__win { height: 452px; }
  .d-radar__head { display: none; }
  .d-radar__row { grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; padding: 0 12px; }
  .d-radar__days, .d-radar__act { display: none; }
  .d-radar__d2 { display: inline; }
  .d-radar__dwrap { padding: 12px; }
  .d-radar__dhead { padding: 0 12px; }
  .d-radar__msg { padding: 11px 12px 4px; }
  .d-radar__foot { padding: 10px 10px 10px 12px; }
}
.d-radar__tshort { display: none; }
@container d-radar (max-width: 379px) {
  .d-radar .d-radar__tav { display: none; }
  .d-radar__toast { padding-left: 10px; }
}
@container d-radar (max-width: 349px) {
  .d-radar__w, .d-radar__tlong { display: none; }
  .d-radar__tshort { display: inline; }
}

/* wide (service page, hero console view): summary panel on the left */
@container d-radar (min-width: 760px) {
  .d-radar--wide .d-radar__side { display: flex; flex-direction: column; gap: 12px; width: 288px; flex: none; padding: 16px; border-right: 1px solid var(--line); }
  .d-radar--wide .d-radar__head,
  .d-radar--wide .d-radar__row { grid-template-columns: 26px minmax(0, 1fr) 84px 72px 108px; column-gap: 16px; padding: 0 18px; }
  .d-radar--wide .d-radar__dwrap { padding: 16px 18px 18px; }
}
.d-radar__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.d-radar__stat { display: flex; flex-direction: column; padding: 11px 12px 12px; min-width: 0; }
.d-radar__sl { font-size: 11.5px; line-height: 1.3; color: var(--text-3); white-space: nowrap; }
.d-radar__sv { margin-top: 6px; font-size: 22px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.d-radar__ss { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }

.d-radar__chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 12px 11px; }
.d-radar__ch { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.d-radar__chm { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.d-radar__plot { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 26px; display: flex; align-items: stretch; border-bottom: 1px solid var(--line-2); }
/* each bar is a full-height column button (hit area ~33px wide) */
.d-radar__col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px 6px 0 0; }
.d-radar .d-radar__col:focus-visible { outline-offset: -1px; border-radius: 6px 6px 0 0; }
/* solid violet marks, no outline: the selected person's bar is full strength, the rest a lighter step of the same violet */
.d-radar__bar { position: relative; width: 20px; max-width: 72%; border-radius: 4px 4px 0 0; }
.d-radar__bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--violet); opacity: 0.38; transition: opacity var(--d-lg) var(--ease); }
.d-radar__col:hover .d-radar__bar::before { opacity: 0.58; }
.d-radar__col[aria-pressed="true"] .d-radar__bar::before { opacity: 0.78; }
.d-radar__col[aria-current="true"] .d-radar__bar::before { opacity: 1; }
.d-radar__bar b { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--text-3); transition: color var(--d-lg) var(--ease); }
.d-radar__col:hover b,
.d-radar__col[aria-pressed="true"] b,
.d-radar__col[aria-current="true"] b { color: var(--text); }
.d-radar__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); pointer-events: none; }
/* the 22d threshold: dashed, because it is a threshold, not a grid */
.d-radar__grid--hi { border-top: 1px dashed rgba(var(--fg-rgb), 0.3); }
.d-radar__grid i { position: absolute; right: 0; bottom: 3px; font-style: normal; font-family: var(--font-mono); font-size: 9.5px; line-height: 1; letter-spacing: 0; color: var(--text-3); }
/* label for people outside the list */
.d-radar__tip {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-field); background: var(--fill-float); box-shadow: var(--shadow-glass);
  font-size: 11px; line-height: 1.2; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 3px);
  transition: opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease), visibility 0s linear var(--d-md);
}
.d-radar__tip.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.d-radar__tip b { font-weight: 600; color: var(--text); }
.d-radar__tip span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--text-3); }
.d-radar__xl { flex: none; display: flex; padding-top: 7px; }
.d-radar__xl span { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0; color: var(--text-3); }
.d-radar__legend { flex: none; display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.d-radar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.d-radar__key { position: relative; width: 8px; height: 8px; border-radius: 2px; }
.d-radar__key::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--violet); opacity: 0.38; }
.d-radar__key--line { width: 12px; height: 0; border-top: 1px dashed rgba(var(--fg-rgb), 0.42); border-radius: 0; }
.d-radar__key--line::before { content: none; }

/* ---- commitment-tracker.css ---- */
/* Commitment Tracker: commitments list + flag toast; details panel at >= 760px (wide, embedded),
   an in-window detail view below that */
.d-commit {
  container: d-commit / inline-size;
  /* near-opaque fills for things that sit over rows: a glass token stacked on itself
     (backdrop blur can't reach inside the window, which is already blurred) */
  --fill-sticky: linear-gradient(var(--surface-sticky), var(--surface-sticky)) var(--surface-sticky);
  --fill-float: linear-gradient(var(--menu-bg), var(--menu-bg)) var(--menu-bg);
}
.d-commit [hidden] { display: none !important; }
.d-commit__win { --cols: 94px minmax(0, 1fr) 106px 64px 112px; height: 458px; display: flex; flex-direction: column; }

/* embedded (a view inside the hero console): fill the view, no frame of its own */
.d-commit--embedded { height: 100%; }
.d-commit--embedded .d-commit__win { height: 100%; border: 0; border-radius: 0; background: transparent; }

/* core's `.demo button` reset outranks .ui-btn / .ui-chip type and colour on buttons */
.d-commit .ui-btn { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.d-commit .ui-btn--primary { color: var(--on-primary); }

/* bar: title · clock … filter pills */
.d-commit__bar { flex: none; flex-wrap: wrap; gap: 8px 12px; }
.d-commit__bar .ui-bar__title { flex: none; white-space: nowrap; }
.d-commit__clock { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 16px; font-family: var(--font-mono); font-size: 11px; line-height: 1; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.d-commit__clock svg { display: none; width: 12px; height: 12px; flex: none; }
.d-commit__time { display: inline-block; color: var(--text-2); font-variant-numeric: tabular-nums; }
.d-commit__filters { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.d-commit .d-commit__f {
  position: relative; height: 24px; gap: 5px; padding: 0 9px 0 10px;
  font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; color: var(--text-2);
  transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease), color var(--d-md) var(--ease);
}
.d-commit .d-commit__f.ui-chip--neg { color: var(--chip-neg-fg); }
.d-commit__f::after { content: ""; position: absolute; inset: -5px -3px; }   /* 34px hit area */
.d-commit .d-commit__f:hover { border-color: var(--line-3); color: var(--text); }
.d-commit .d-commit__f.ui-chip--neg:hover { border-color: var(--neg); color: var(--chip-neg-fg); }
/* pressed: solid accent edge over a doubled chip tint (the tint layered on itself) */
.d-commit .d-commit__f[aria-pressed="true"] { border-color: var(--violet); background: linear-gradient(var(--chip-violet-bg), var(--chip-violet-bg)) var(--chip-violet-bg); color: var(--text); }
.d-commit .d-commit__f.ui-chip--neg[aria-pressed="true"] { border-color: var(--neg); background: linear-gradient(var(--chip-neg-bg), var(--chip-neg-bg)) var(--chip-neg-bg); color: var(--chip-neg-fg); }
.d-commit__n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.ui-chip--neg .d-commit__n { color: inherit; }

/* layout */
.d-commit__layout { position: relative; flex: 1 1 auto; min-height: 0; display: flex; transition: opacity var(--d-lg) var(--ease); }
.d-commit__win.is-fade .d-commit__layout { opacity: 0; }
.d-commit__main { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.d-commit__scroll { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }

/* list (a grid table: each row is a button; the status chip sits on top of its last column) */
.d-commit__thead,
.d-commit__tr,
.d-commit__open { display: grid; grid-template-columns: var(--cols); align-items: center; }
.d-commit__thead { flex: none; position: sticky; top: 0; z-index: 2; height: 34px; border-bottom: 1px solid var(--line); background: var(--fill-sticky); font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-3); white-space: nowrap; }
.d-commit__rows { flex: none; }
.d-commit__tr { position: relative; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.3; }
.d-commit__thead > span,
.d-commit__open > span,
.d-commit__tr > .c-st { min-width: 0; padding: 0 10px; }
.d-commit__thead > :first-child,
.d-commit__open > :first-child { padding-left: 16px; }
.d-commit__thead > :last-child,
.d-commit__tr > .c-st { padding-right: 14px; }
.d-commit__open { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 45px; text-align: left; transition: background-color var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease); }
.d-commit__tr:hover .d-commit__open { background: var(--surface-3); }
.d-commit .d-commit__open:focus-visible { outline-offset: -2px; border-radius: 2px; }
.d-commit__win.has-pick .d-commit__open[aria-current="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--violet); }
.d-commit__tr > .c-st { grid-column: -2; grid-row: 1; z-index: 1; display: flex; align-items: center; }

.d-commit__open .c-own { display: flex; align-items: center; gap: 8px; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.d-commit__open .c-what { display: flex; align-items: center; gap: 8px; color: var(--text); }
.d-commit .d-commit__av { width: 22px; height: 22px; font-size: 9.5px; }
.d-commit__mini { display: none; }
.d-commit__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-commit__open .c-for { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.d-commit__open .c-due { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; white-space: nowrap; color: var(--text-2); transition: color var(--d-lg) var(--ease); }
.d-commit__tr.is-overdue .c-due { color: var(--chip-neg-fg); }
.d-commit__tr.is-done .c-what,
.d-commit__tr.is-done .c-own,
.d-commit__tr.is-done .c-for,
.d-commit__tr.is-done .c-due,
.d-commit__tr.is-done .d-commit__av { color: var(--text-3); }
.d-commit__tr .c-what,
.d-commit__tr .c-own,
.d-commit__tr .d-commit__av { transition: color var(--d-lg) var(--ease); }
.d-commit__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex: none; }
.d-commit .ui-chip svg { flex: none; }

/* status chip: a button that offers Mark done / Reopen */
.d-commit__stb { position: relative; display: inline-flex; align-items: center; height: 32px; border-radius: 8px; }
.d-commit__stb .ui-chip { transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-commit__stb:hover .ui-chip,
.d-commit__stb[aria-expanded="true"] .ui-chip { border-color: var(--line-3); }
.d-commit__stb:hover .ui-chip--neg,
.d-commit__stb[aria-expanded="true"] .ui-chip--neg { border-color: var(--neg); }
.d-commit__stb:hover .ui-chip--ok,
.d-commit__stb[aria-expanded="true"] .ui-chip--ok { border-color: var(--mint); }
.d-commit__stb:hover .ui-chip--violet,
.d-commit__stb[aria-expanded="true"] .ui-chip--violet { border-color: var(--violet); }
.d-commit .d-commit__stb:focus-visible { outline-offset: 0; border-radius: 8px; }
.d-commit__chev { position: absolute; left: 100%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 2px; color: var(--text-3); opacity: 0; transition: opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.d-commit__stb:hover .d-commit__chev,
.d-commit__stb:focus-visible .d-commit__chev { opacity: 1; }
.d-commit__stb[aria-expanded="true"] .d-commit__chev { opacity: 1; transform: rotate(180deg); }
.d-commit__pop { animation: d-commit-pop var(--d-xl) var(--ease) both; }
@keyframes d-commit-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

.d-commit__menu {
  position: absolute; z-index: 4; min-width: 132px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-ui);
  background: var(--fill-float); box-shadow: var(--shadow-glass);
  animation: d-commit-menu var(--d-md) var(--ease) both;
}
@keyframes d-commit-menu { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.d-commit .d-commit__mi { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-field); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text); transition: background-color var(--d-md) var(--ease); }
.d-commit__mi:hover { background: var(--surface-3); }
.d-commit__mi svg { width: 13px; height: 13px; flex: none; color: var(--text-2); }
.d-commit .d-commit__mi:focus-visible { outline-offset: -2px; }

.d-commit .d-commit__more { flex: 1 0 44px; display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; font-size: 11.5px; color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-commit__more:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.025); }
.d-commit__more svg { width: 12px; height: 12px; }
.d-commit .d-commit__more:focus-visible { outline-offset: -2px; }
.d-commit__empty { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px; text-align: center; }
.d-commit__et { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.d-commit__clear { position: relative; }
.d-commit__clear::after { content: ""; position: absolute; inset: -3px -2px; }
.d-commit__et b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text); }

/* toast */
.d-commit__toast {
  position: absolute; left: 50%; bottom: 12px; z-index: 3;
  display: flex; align-items: stretch;
  width: max-content; max-width: calc(100% - 28px);
  border-radius: var(--r-ui); border: 1px solid var(--line-2); background: var(--fill-float); box-shadow: var(--shadow-glass);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity var(--d-xl) var(--ease), transform var(--d-xl) var(--ease), visibility 0s linear var(--d-xl);
}
.d-commit__toast.is-in { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.d-commit .d-commit__tbody { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 9px 6px 9px 11px; border-radius: var(--r-ui) 0 0 var(--r-ui); font-size: 12px; line-height: 1.45; text-align: left; color: var(--text-2); transition: color var(--d-md) var(--ease); }
.d-commit__tbody:hover { color: var(--text); }
.d-commit__ti { flex: none; display: grid; place-items: center; height: 17px; color: var(--neg); }
.d-commit__ti svg { width: 14px; height: 14px; }
.d-commit__tt b { color: var(--text); font-weight: 600; }
.d-commit__tm { flex: none; margin-left: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 17px; letter-spacing: 0; color: var(--text-3); }
.d-commit .d-commit__tx { flex: none; width: 34px; display: grid; place-items: center; border-left: 1px solid var(--line); border-radius: 0 var(--r-ui) var(--r-ui) 0; color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-commit__tx:hover { color: var(--text); background: var(--surface-3); }
.d-commit__tx svg { width: 13px; height: 13px; }
.d-commit .d-commit__tbody:focus-visible,
.d-commit .d-commit__tx:focus-visible { outline-offset: -2px; }

/* details: side panel (wide) or a view inside the window (narrow) */
/* the detail view takes the list's place: the list (inert meanwhile) is hidden under it,
   so the view needs no opaque sheet and the window glass shows through */
.d-commit__side { display: none; flex-direction: column; min-height: 0; overflow-y: auto; }
.d-commit__win.is-detail .d-commit__main { visibility: hidden; }
.d-commit__win.is-detail .d-commit__side { display: flex; position: absolute; inset: 0; z-index: 5; padding: 10px 16px 16px; animation: d-commit-detail var(--d-lg) var(--ease) both; }
@keyframes d-commit-detail { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.d-commit__shead { flex: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.d-commit .d-commit__back { display: none; align-items: center; gap: 6px; height: 32px; margin-left: -6px; padding: 0 10px 0 6px; border-radius: var(--r-btn); font-size: 12px; font-weight: 500; color: var(--text-2); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-commit__back svg { width: 14px; height: 14px; transform: scaleX(-1); }
.d-commit__back:hover { color: var(--text); background: var(--surface-3); }
.d-commit__win.is-detail .d-commit__back { display: inline-flex; }
.d-commit__win.is-detail .d-commit__slabel { display: none; }
.d-commit__toggle { position: relative; margin-left: auto; transition: opacity var(--d-lg) var(--ease), background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), color var(--d-md) var(--ease), transform var(--d-sm) var(--ease); }
.d-commit__toggle::after { content: ""; position: absolute; inset: -3px -2px; }
.d-commit__sbody { flex: none; }
.d-commit__sbody.d-commit__in > * { animation: d-commit-in var(--d-lg) var(--ease) both; }
@keyframes d-commit-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.d-commit__stitle { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.d-commit__kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); margin: 12px 0 0; border-top: 1px solid var(--line); }
.d-commit__kv dt,
.d-commit__kv dd { display: flex; align-items: center; height: 36px; margin: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.d-commit__kv dt { font-size: 11.5px; color: var(--text-3); }
.d-commit__kv dd { gap: 8px; min-width: 0; font-size: 12px; color: var(--text); }
.d-commit__kv dd.d-commit__mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; color: var(--text-2); }
.d-commit__hl { margin-top: 18px; }
.d-commit__tl { position: relative; margin-top: 8px; }
.d-commit__tl li { position: relative; display: grid; grid-template-columns: 7px 64px minmax(0, 1fr); column-gap: 12px; align-items: center; height: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.d-commit__tl li + li::before { content: ""; position: absolute; left: 3px; top: -9px; width: 1px; height: 18px; background: var(--line-3); }
.d-commit__tl li span:last-child { color: var(--text-3); }
.d-commit__tl i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); }
.d-commit__tl .is-neg span:nth-child(2) { color: var(--chip-neg-fg); }
.d-commit__tl .is-neg i { background: var(--neg); }
.d-commit__tl .is-ok span:nth-child(2) { color: var(--chip-ok-fg); }
.d-commit__tl .is-ok i { background: var(--mint); }
.d-commit__tl .is-next span { color: var(--text-3); }
.d-commit__tl .is-next i { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }

/* roomy bars show the clock icon */
@container d-commit (min-width: 600px) {
  .d-commit__clock svg { display: block; }
}
/* compact (phones, narrow columns): filter pills get their own row under the title;
   the list shows commitment (with owner initials), due, status */
@container d-commit (max-width: 529px) {
  .d-commit__clock { margin-left: auto; }
  .d-commit__filters { flex-basis: 100%; margin-left: 0; }
  .d-commit__win { --cols: minmax(0, 1fr) 58px 110px; height: 462px; }
  .d-commit__thead .c-own, .d-commit__thead .c-for,
  .d-commit__open .c-own, .d-commit__open .c-for { display: none; }
  .d-commit__mini { display: grid; }
  .d-commit__open { height: 50px; }
  .d-commit__thead .c-what, .d-commit__open .c-what { padding-left: 12px; }
  .d-commit__thead > :last-child, .d-commit__tr > .c-st { padding: 0 12px 0 8px; }
  .d-commit__txt { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .d-commit__chev { display: none; }
  .d-commit .d-commit__more { position: sticky; bottom: 0; z-index: 1; flex: none; height: 40px; border-top: 1px solid var(--line); background: var(--fill-sticky); }
  /* hover tint layered over the sticky fill, so rows never show through */
  .d-commit .d-commit__more:hover { background: linear-gradient(var(--surface-3), var(--surface-3)), var(--fill-sticky); }
  .d-commit__toast { max-width: calc(100% - 24px); }
  .d-commit__win.is-detail .d-commit__side { padding: 8px 12px 14px; }
}

/* wide (service page, hero console view): details of the selected commitment on the right */
@container d-commit (min-width: 760px) {
  .d-commit--wide .d-commit__win { --cols: 104px minmax(0, 1fr) 128px 70px 112px; }
  .d-commit--wide .d-commit__side,
  .d-commit--wide .d-commit__win.is-detail .d-commit__side { display: flex; position: static; width: 300px; flex: none; padding: 14px 18px 16px; border-left: 1px solid var(--line); animation: none; }
  .d-commit--wide .d-commit__win.is-detail .d-commit__main { visibility: visible; }
  .d-commit--wide .d-commit__back { display: none !important; }
  .d-commit--wide .d-commit__win.is-detail .d-commit__slabel { display: inline; }
  .d-commit--wide .d-commit__open[aria-current="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--violet); }
}

/* ---- outreach-engine.css ---- */
/* ==========================================================================
   Demo · Outreach Engine
   Fixed height per breakpoint (embedded: fills its view); rows stream or
   scroll inside it, so state changes never shift the layout.
   Containers: d-outreach (root: layout, side panel at ≥ 760px),
   d-outreach-main (main column: KPI captions), d-outreach-list (prospect
   list: column widths), d-outreach-side (panel: footer density).
   Root states: is-live (the visitor drives), is-detail (a lead is open;
   below 760px it covers the list), is-editing.
   Colours are theme tokens only (light + dark). No idle motion: the list
   header's "Searching" dots hold still; motion only answers the visitor.
   ========================================================================== */
/* Opaque layers built from tokens (no colour of their own):
   --oe-solid  the window glass colour, opaque (--surface-sticky twice, nothing leaks)
   --oe-panel  the list panel colour (+ --surface-2): sticky header and rows, so rows
               that scroll or slide underneath never show through
   --oe-sheet  one step raised (+ --surface-2 again): the toast. Opaque on purpose:
               Chrome drops a nested backdrop blur inside the hero console, and a
               translucent sheet would show the rows through it */
.d-outreach {
  container: d-outreach / inline-size;
  --oe-solid: linear-gradient(var(--surface-sticky), var(--surface-sticky)), var(--surface-sticky);
  --oe-panel: linear-gradient(var(--surface-2), var(--surface-2)), var(--oe-solid);
  --oe-sheet: linear-gradient(var(--surface-2), var(--surface-2)), var(--oe-panel);
}
.d-outreach [hidden] { display: none !important; }

.d-outreach-win { position: relative; display: flex; height: 470px; }
.d-outreach-win .ui-bar { flex: none; height: 46px; }
.d-outreach-col { container: d-outreach-main / inline-size; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.d-outreach-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; }

/* ---- KPI tiles: filter toggles ---- */
.d-outreach-kpis { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.d-outreach .d-outreach-kpi { height: 64px; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; text-align: left; color: var(--text); transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-outreach .d-outreach-kpi:hover { border-color: var(--line-3); }
.d-outreach .d-outreach-kpi[aria-pressed="true"] { border-color: var(--chip-violet-bd); background: var(--surface-3); }
.d-outreach .d-outreach-kpi[data-act]:focus-visible { outline-offset: 2px; border-radius: var(--r-ui); }
.d-outreach-kpi__label { font-size: 11.5px; line-height: 15px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--d-md) var(--ease); }
.d-outreach-kpi[aria-pressed="true"] .d-outreach-kpi__label { color: var(--text-2); }
.d-outreach-kpi__val { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; }
.d-outreach-kpi__num { display: inline-block; font-size: 22px; line-height: 26px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.d-outreach-kpi__num.is-tick { animation: d-outreach-tick var(--d-xl) var(--ease) both; }
@keyframes d-outreach-tick { from { opacity: 0.25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.d-outreach-kpi__delta { font-size: 11.5px; font-weight: 500; color: var(--chip-ok-fg); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.d-outreach-kpi__delta.is-neg { color: var(--chip-neg-fg); }
.d-outreach-kpi__delta.is-zero { color: var(--text-3); }
.d-outreach-kpi__ctx { margin-left: -2px; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
@container d-outreach-main (max-width: 519px) { .d-outreach-kpi__ctx { display: none; } }

/* ---- Prospect list ---- */
.d-outreach-list { container: d-outreach-list / inline-size; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.d-outreach-lhead { flex: none; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.d-outreach-lhead__title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.d-outreach-lhead__meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.d-outreach-lhead__meta .ui-typing { gap: 3px; }
/* "Searching" is a standing state, not an answer to the visitor: a still ellipsis */
.d-outreach-lhead__meta .ui-typing i { width: 3.5px; height: 3.5px; background: var(--text-3); animation: none; opacity: 0.8; }

/* active filter chip (clears the filter) */
.d-outreach .d-outreach-fchip { height: 32px; display: inline-flex; align-items: center; margin: 0 -2px; padding: 0 2px; border-radius: 8px; }
.d-outreach-fchip .ui-chip { gap: 5px; padding: 0 6px 0 8px; transition: border-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-outreach-fchip .ui-chip svg { width: 11px; height: 11px; }
.d-outreach .d-outreach-fchip:hover .ui-chip { border-color: var(--violet); color: var(--text); }
.d-outreach .d-outreach-fchip[data-act]:focus-visible { outline-offset: 0; border-radius: 8px; }

.d-outreach-scroll { --oe-c2: 136px; --oe-c3: 78px; --oe-c4: 112px; --oe-pad: 12px; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; scrollbar-gutter: stable; transition: opacity var(--d-xl) var(--ease); }
.d-outreach.is-live .d-outreach-scroll { overflow-y: auto; overscroll-behavior: contain; }
.d-outreach-list.is-fading .d-outreach-scroll { opacity: 0; }
.d-outreach-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--oe-c2) var(--oe-c3) var(--oe-c4); align-items: center; }
.d-outreach-cell { min-width: 0; padding: 0 var(--oe-pad); overflow: hidden; }
.d-outreach-thead { position: sticky; top: 0; z-index: 2; height: 30px; border-bottom: 1px solid var(--line); background: var(--oe-panel); font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.d-outreach-rows { margin: 0; padding: 0; list-style: none; }
/* the item carries the opaque panel layer (it is what slides); the row tints on top */
.d-outreach-li { background: var(--oe-panel); transition: transform var(--d-xl) var(--ease); }
.d-outreach-li--new { animation-delay: 140ms; }
.d-outreach-li.is-back { animation: d-outreach-fade var(--d-lg) var(--ease) both; }
@keyframes d-outreach-fade { from { opacity: 0; } to { opacity: 1; } }

.d-outreach .d-outreach-row { position: relative; width: 100%; height: 42px; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-size: 12px; line-height: 1.45; white-space: nowrap; transition: background-color var(--d-md) var(--ease); }
.d-outreach-li:last-child .d-outreach-row { border-bottom-color: transparent; }
.d-outreach .d-outreach-row:hover { background: var(--surface-3); }
.d-outreach .d-outreach-row[data-act]:focus-visible { outline-offset: -2px; border-radius: 0; }
.d-outreach .d-outreach-row.is-hit { background: var(--chip-ok-bg); transition-duration: var(--d-xl); }
.d-outreach.is-live .d-outreach-row[aria-current="true"] { background: var(--surface-3); }
.d-outreach.is-live .d-outreach-row[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--violet); }
/* autoplay window: six rows, a clean bottom edge */
.d-outreach:not(.is-live):not(.d-outreach--embedded) .d-outreach-li:nth-child(n + 7) { visibility: hidden; }
.d-outreach:not(.is-live):not(.d-outreach--embedded) .d-outreach-li:nth-child(6) .d-outreach-row { border-bottom-color: transparent; }
.d-outreach-empty { margin: 0; padding: 40px 16px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }

.d-outreach-co { display: flex; align-items: center; gap: 10px; min-width: 0; }
.d-outreach-logo { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--avatar-bg); border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--text-2); }
.d-outreach-co__txt { display: flex; flex-direction: column; min-width: 0; }
.d-outreach-co__name { font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-outreach-co__ind { font-size: 11px; line-height: 15px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-outreach-row .d-outreach-cell--role { font-size: 12px; color: var(--text-2); }
.d-outreach-ct__name { display: none; }
.d-outreach-ct__name, .d-outreach-ct__role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-outreach-ct__role { display: block; }

.d-outreach-fit { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.d-outreach-fit__bar { position: relative; width: 32px; height: 4px; border-radius: 2px; background: rgba(var(--fg-rgb), 0.08); overflow: hidden; }
.d-outreach-fit__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--violet); transition: width var(--d-xl) var(--ease); }
.d-outreach-fit__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* column sizing follows the list's own width */
@container d-outreach-list (min-width: 560px) {
  .d-outreach-scroll { --oe-c2: 156px; --oe-c3: 88px; }
}
@container d-outreach-list (max-width: 469px) {
  .d-outreach-scroll { --oe-pad: 10px; --oe-c2: 128px; --oe-c3: 68px; --oe-c4: 104px; }
  .d-outreach-row .d-outreach-cell--role { font-size: 11.5px; letter-spacing: -0.015em; }
  .d-outreach-co { gap: 9px; }
  .d-outreach-fit { gap: 6px; }
  .d-outreach-fit__bar { width: 26px; }
}

/* status chips */
.d-outreach-chip .ui-dot { width: 6px; height: 6px; }
.d-outreach-dot-sent { background: var(--text-2); }
.d-outreach-dot-ok { background: var(--mint); }
.d-outreach-ring { width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1.5px solid var(--text-3); }
.d-outreach-chip .ui-typing { height: 10px; gap: 2.5px; margin-left: -1px; }
.d-outreach-chip .ui-typing i { width: 3.5px; height: 3.5px; background: currentColor; }
.d-outreach-chip.is-in { animation: d-outreach-swap var(--d-lg) var(--ease) both; }
@keyframes d-outreach-swap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---- Lead panel: side panel at ≥ 760px, detail view below ---- */
.d-outreach-side { container: d-outreach-side / inline-size; display: none; flex: 0 0 36%; min-width: 280px; max-width: 340px; flex-direction: column; border-left: 1px solid var(--line); background: var(--surface-2); }
.d-outreach-sbar { gap: 8px; }
.d-outreach .d-outreach-back { display: none; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 8px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; transition: background-color var(--d-md) var(--ease); }
.d-outreach .d-outreach-back:hover { background: var(--surface-3); }
.d-outreach-back svg { width: 14px; height: 14px; flex: none; color: var(--text-2); transform: rotate(180deg); }

.d-outreach-draft { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 4px 16px 14px; overflow: hidden; }
.d-outreach.is-live .d-outreach-draft { overflow-y: auto; overscroll-behavior: contain; }
.d-outreach-draft:focus-visible, .d-outreach-scroll:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; border-radius: 0; }
.d-outreach-dc { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.d-outreach-dc.is-in { animation: d-outreach-swap var(--d-lg) var(--ease) both; }
.d-outreach-field { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 18px; }
.d-outreach-field__k { width: 52px; flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }
.d-outreach-field__v { min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-outreach-to { font-weight: 500; }
.d-outreach-sub, .d-outreach-muted { color: var(--text-3); }
.d-outreach-msg { padding-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.d-outreach-msg p { white-space: pre-line; overflow-wrap: anywhere; }
.d-outreach-msg p + p { margin-top: 10px; }
.d-outreach-wait { color: var(--text-3); }
.d-outreach-none { margin: auto; padding: 24px 0; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* the field grows outward so the text stays where it was before Edit */
.d-outreach .d-outreach-ta { display: block; width: calc(100% + 18px); min-height: 132px; margin: -9px -9px 0; resize: none; overflow: hidden; padding: 8px; border: 1px solid var(--line-3); border-radius: var(--r-field); background: var(--input-bg); font-size: 12.5px; line-height: 1.6; color: var(--text); transition: border-color var(--d-md) var(--ease); }
.d-outreach .d-outreach-ta:focus { border-color: var(--chip-violet-bd); }

.d-outreach-reply { margin-top: 14px; padding: 10px 12px 11px; border: 1px solid var(--line-2); border-radius: var(--r-ui); background: rgba(var(--fg-rgb), 0.025); }
.d-outreach-reply__head { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; line-height: 16px; white-space: nowrap; }
.d-outreach-reply__head .ui-dot { width: 6px; height: 6px; }
.d-outreach-reply__who { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.d-outreach-reply__meta { color: var(--text-3); }
.d-outreach-reply__text { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

.d-outreach-msg, .d-outreach-reply { margin-bottom: 12px; }
.d-outreach-msg + .d-outreach-reply { margin-top: 2px; }
.d-outreach-seq { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.d-outreach-seq__label { height: 22px; display: flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }
.d-outreach-step { height: 32px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); }
.d-outreach-step__n { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; color: var(--text-3); }
.d-outreach-step__name { flex: 1 1 auto; min-width: 0; }
.d-outreach-step__when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }
.d-outreach-step.is-cur { color: var(--text); }
.d-outreach-step.is-cur .d-outreach-step__n { border-color: var(--chip-violet-bd); background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
.d-outreach-seq.is-done .d-outreach-step:not(.is-cur) { opacity: 0.45; }

/* panel actions: no send or approve, by design */
.d-outreach-acts { flex: none; height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 16px; border-top: 1px solid var(--line); }
.d-outreach .d-outreach-act { height: 32px; padding: 0 12px; font-size: 12px; }
.d-outreach .d-outreach-act.ui-btn--primary { color: var(--on-primary); }
.d-outreach-act svg { color: var(--text-2); }
.d-outreach-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.d-outreach-pos { padding: 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-outreach .d-outreach-nav { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-outreach .d-outreach-nav:hover { background: var(--surface-3); color: var(--text); }
.d-outreach-nav svg { width: 15px; height: 15px; }
.d-outreach-nav--prev svg { transform: scaleX(-1); }
.d-outreach [aria-disabled="true"] { opacity: 0.4; cursor: default; }
.d-outreach .d-outreach-nav[aria-disabled="true"]:hover { background: transparent; color: var(--text-2); }
.d-outreach .ui-btn[aria-disabled="true"]:hover { background: var(--surface-2); border-color: var(--line-2); }
.d-outreach .ui-btn--primary[aria-disabled="true"]:hover { background: var(--primary); border-color: transparent; }
.d-outreach .ui-btn[aria-disabled="true"]:active { transform: none; }
@container d-outreach-side (max-width: 299px) { .d-outreach-pos { display: none; } }

/* toast */
.d-outreach-toast { position: absolute; z-index: 5; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; pointer-events: none; }
.d-outreach-toast__card { pointer-events: auto; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-ui); border: 1px solid var(--line-2); background: var(--oe-sheet); box-shadow: var(--shadow-glass); font-size: 12.5px; color: var(--text); white-space: nowrap; transition: opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.d-outreach-toast__card.is-in { animation: d-outreach-toast var(--d-lg) var(--ease) both; }
.d-outreach-toast__card.is-out { opacity: 0; transform: translateY(4px); }
@keyframes d-outreach-toast { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.d-outreach-toast__card:has(.d-outreach-toast__undo:not([hidden])) { padding-right: 4px; }
.d-outreach-toast__sep { margin: 0 7px; color: var(--text-3); }
.d-outreach .d-outreach-toast__undo { height: 32px; margin-left: -7px; padding: 0 10px 0 7px; border-radius: 7px; font-weight: 600; color: var(--text); transition: background-color var(--d-md) var(--ease); }
.d-outreach .d-outreach-toast__undo:hover { background: var(--surface-3); }

@container d-outreach (min-width: 760px) {
  .d-outreach-side { display: flex; }
  .d-outreach-ct__name { display: block; font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--text); }
  .d-outreach-ct__role { font-size: 11px; line-height: 15px; color: var(--text-3); }
  /* autoplay: the panel follows the lead being drafted */
  .d-outreach-row[aria-current="true"] { background: var(--surface-3); }
  .d-outreach-row[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--violet); }
  .d-outreach-toast { right: clamp(280px, 36%, 340px); }
}
@container d-outreach (max-width: 759px) {
  .d-outreach-stitle { display: none; }
  .d-outreach .d-outreach-back { display: inline-flex; }
  .d-outreach-sbar { padding-left: 8px; }
  .d-outreach.is-detail .d-outreach-body { visibility: hidden; }
  .d-outreach.is-detail .d-outreach-side { display: flex; position: absolute; z-index: 3; left: 0; right: 0; top: 46px; bottom: 0; min-width: 0; max-width: none; border-left: 0; background: transparent; animation: d-outreach-in var(--d-lg) var(--ease) both; }
  .d-outreach.is-detail .d-outreach-toast { bottom: 62px; }
  /* denser detail view so a whole draft fits the 470px window */
  .d-outreach-side .ui-bar.d-outreach-sbar { height: 44px; }
  .d-outreach.is-detail .d-outreach-side { top: 46px; }
  .d-outreach-field { padding: 10px 0; }
  .d-outreach-msg { padding-top: 12px; }
  .d-outreach-msg p + p { margin-top: 8px; }
  .d-outreach-msg, .d-outreach-reply { margin-bottom: 10px; }
  .d-outreach-seq { padding-top: 8px; }
  .d-outreach-seq__label { height: 18px; }
  .d-outreach-step { height: 30px; }
  .d-outreach-acts { height: 50px; }
  .d-outreach-draft { padding-bottom: 6px; }
}
@keyframes d-outreach-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ---- Mobile: Company + Status, KPIs as one strip ---- */
@container d-outreach (max-width: 479px) {
  .d-outreach-win { height: 458px; }
  .d-outreach-body { padding: 12px; }
  .d-outreach-kpis { gap: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ui); }
  .d-outreach .d-outreach-kpi { height: 54px; padding: 8px 11px; background: transparent; border: 0; border-radius: 0; }
  .d-outreach .d-outreach-kpi:first-child { border-radius: 9px 0 0 9px; }
  .d-outreach .d-outreach-kpi:last-child { border-radius: 0 9px 9px 0; }
  .d-outreach .d-outreach-kpi + .d-outreach-kpi { border-left: 1px solid var(--line); }
  .d-outreach .d-outreach-kpi:hover { background: var(--surface-3); }
  .d-outreach .d-outreach-kpi[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--chip-violet-bd); }
  .d-outreach .d-outreach-kpi:first-child[data-act]:focus-visible { border-radius: 9px 0 0 9px; }
  .d-outreach .d-outreach-kpi:last-child[data-act]:focus-visible { border-radius: 0 9px 9px 0; }
  .d-outreach .d-outreach-kpi[data-act]:focus-visible { outline-offset: -2px; }
  .d-outreach-kpi__label { font-size: 11px; line-height: 14px; }
  .d-outreach-kpi__num { font-size: 17px; line-height: 21px; }
  .d-outreach-kpi__delta { font-size: 11px; }
  .d-outreach-grid { grid-template-columns: minmax(0, 1fr) 100px; }
  .d-outreach-cell--role, .d-outreach-cell--fit { display: none; }
  .d-outreach-scroll { --oe-pad: 12px; }
}

/* ---- business-os.css ---- */
/* ==========================================================================
   Demo · Business OS: one system with four working sections.
   Window = title bar + shell (nav + main). The nav is an icon rail by
   default, a labelled sidebar from 760px and a tab strip under 480px
   (container queries on the root). Each section is a .d-os-view that fills
   the main area; lists scroll inside. Fixed window height per breakpoint;
   the embedded variant fills its parent (core sets 100% height).
   Colours are theme tokens only (light + dark); the calendar's meeting
   blocks are violet-tinted glass chips (tints of --violet over --surface-2).
   ========================================================================== */
.d-os {
  container: d-os / inline-size;
  --os-blk: color-mix(in srgb, var(--violet) 10%, var(--surface-2));       /* meeting block */
  --os-blk-hover: color-mix(in srgb, var(--violet) 17%, var(--surface-2));
  --os-blk-on: color-mix(in srgb, var(--violet) 24%, var(--surface-2));    /* selected */
  --os-blk-bd: color-mix(in srgb, var(--violet) 26%, transparent);
  --os-blk-bd-hover: color-mix(in srgb, var(--violet) 46%, transparent);
  /* raised sheet for what floats inside the window (docked meeting card, value
     readout): the window glass made opaque (--surface-sticky twice), then one
     step above the panels it floats over (--surface-2 twice). Opaque on purpose:
     Chrome drops a nested backdrop blur inside the hero console, so a
     translucent sheet would show the grid through it */
  --os-sheet: linear-gradient(var(--surface-2), var(--surface-2)), linear-gradient(var(--surface-2), var(--surface-2)), linear-gradient(var(--surface-sticky), var(--surface-sticky)), var(--surface-sticky);
}
.d-os [hidden] { display: none !important; }

.d-os-win { display: flex; flex-direction: column; height: 456px; }
.d-os-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); }

/* shared focus ring for rows and cards inside panels: drawn inside so overflow never clips it */
.d-os .d-os-ev:focus-visible, .d-os .d-os-row:focus-visible, .d-os .d-os-wrow:focus-visible, .d-os .d-os-drow:focus-visible,
.d-os .d-os-arow:focus-visible, .d-os .d-os-col:focus-visible { outline-offset: -2px; border-radius: 6px; }
.d-os .d-os-metric:focus-visible { border-radius: var(--r-ui); }
.d-os .d-os-nav__item:focus-visible, .d-os .d-os-nav__client:focus-visible, .d-os .d-os-back:focus-visible,
.d-os .d-os-ibtn:focus-visible, .d-os .d-os-daytab:focus-visible { border-radius: var(--r-btn); outline-offset: 0; }
.d-os .d-os-fchip:focus-visible { border-radius: var(--r-pill); }

/* ---- Nav: icon rail by default ---- */
.d-os-nav { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 10px 8px; border-right: 1px solid var(--line); }
.d-os-nav__label, .d-os-nav__client { display: none; }
.d-os-nav__item { position: relative; flex: none; height: 32px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-btn); color: var(--text-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-nav__item svg { width: 16px; height: 16px; flex: none; }
.d-os-nav__item > span { display: none; }
.d-os-nav__item:hover { color: var(--text-2); background: rgba(var(--fg-rgb), 0.04); }
.d-os-nav__item[aria-current="page"] { color: var(--text); background: rgba(var(--fg-rgb), 0.06); }
.d-os-nav__item[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 2px; border-radius: 0 2px 2px 0; background: var(--violet); }

/* ---- Main + sections ---- */
.d-os-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.d-os-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.d-os-view.is-in { animation: d-os-in var(--d-lg) var(--ease) both; }
@keyframes d-os-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* section header row */
.d-os-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.d-os-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.d-os-tcount { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }

/* panel header (charts, today, weekly report) */
.d-os-phead { height: 34px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; }
.d-os-ptitle { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-pmeta { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }

/* small helpers shared by sections */
.d-os-ini { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--avatar-bg); border: 1px solid var(--line-2); font-size: 9.5px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.d-os-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; height: 100%; padding: 18px; text-align: center; }
.d-os-empty b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.d-os-empty span { max-width: 30ch; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.d-os-empty .ui-btn { margin-top: 8px; height: 32px; }
.d-os .d-os-fade { opacity: 0 !important; }

/* ==== Overview ==== */
.d-os-metrics { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.d-os-metric { container: d-os-card / inline-size; width: 100%; height: 70px; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; transition: border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-metric:hover { border-color: var(--line-3); background: var(--surface-3); }
.d-os-metric__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.d-os-metric__label { min-width: 0; font-size: 11.5px; line-height: 15px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--d-md) var(--ease); }
.d-os-metric:hover .d-os-metric__label { color: var(--text-2); }
.d-os-metric__top svg { width: 13px; height: 13px; flex: none; color: var(--text-4); }
.d-os-metric__val { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; }
.d-os-metric__num { display: inline-block; font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.d-os-metric__delta { font-size: 11.5px; font-weight: 500; color: var(--chip-ok-fg); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.d-os-metric__ctx { min-width: 0; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.d-os-metric.is-neg .d-os-metric__num, .d-os-metric.is-neg .d-os-metric__top svg { color: var(--chip-neg-fg); }

.d-os-lower { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* today's schedule + Now marker */
.d-os-today { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.d-os-today .d-os-phead { border-bottom: 1px solid var(--line); }
.d-os-today__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.d-os-sched { --rowh: 36px; position: relative; flex: none; height: calc(var(--rowh) * 5); margin-top: 4px; transition: opacity 250ms var(--ease); }
.d-os-ev { width: 100%; height: var(--rowh); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; text-align: left; transition: opacity var(--d-xl) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-ev:hover { background: var(--surface-3); }
.d-os-ev.is-past { opacity: 0.66; }
.d-os-ev.is-past:hover { opacity: 0.8; }
.d-os-ev__t { width: 34px; flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
.d-os-ev__x { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.d-os-ev__n { font-size: 12px; line-height: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-ev__c { font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-ev > svg { width: 13px; height: 13px; flex: none; color: var(--text-3); opacity: 0; transition: opacity var(--d-md) var(--ease); }
.d-os-ev:hover > svg, .d-os-ev:focus-visible > svg { opacity: 1; }
.d-os-now { position: absolute; left: 0; right: 0; top: 0; height: 12px; margin-top: -6px; display: flex; align-items: center; padding: 0 12px; transform: translateY(calc(var(--b) * var(--rowh))); transition: transform var(--d-xl) var(--ease); pointer-events: none; }
.d-os-now__l { width: 34px; flex: none; font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: 0; color: var(--chip-ok-fg); }
.d-os-now__dot { width: 5px; height: 5px; flex: none; margin-left: 7px; border-radius: 50%; background: var(--mint); }
.d-os-now__line { flex: 1 1 auto; height: 1px; background: var(--chip-ok-bd); }

/* ==== Charts (Overview + Reports) ==== */
.d-os-chart { container: d-os-chart / inline-size; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.d-os-legend { flex: none; display: flex; gap: 12px; padding: 0 12px; margin-top: -3px; font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.d-os-key { display: inline-flex; align-items: center; gap: 6px; }
.d-os-key i { width: 8px; height: 8px; border-radius: 2px; }
.d-os-key--v { background: var(--violet); }
.d-os-key--m { background: var(--mint); }
.d-os-plot { position: relative; flex: 1 1 auto; min-height: 40px; margin: 14px 12px 0; }
.d-os-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.d-os-grid i { height: 1px; background: var(--line); }
.d-os-grid i:last-child { background: var(--line-2); }
.d-os-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.d-os-col { position: relative; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 4px; transition: background-color var(--d-md) var(--ease); }
.d-os-col:hover, .d-os-col.is-hot { background: rgba(var(--fg-rgb), 0.04); }
.d-os-bar { width: 54%; max-width: 28px; min-width: 2px; display: flex; flex-direction: column; gap: 2px; transform-origin: 50% 100%; transition: transform var(--d-xl) var(--ease); }
.d-os-plot.is-dense .d-os-col { border-radius: 2px; }
.d-os-plot.is-dense .d-os-bar { width: 62%; }
.d-os-chart.is-collapsed .d-os-bar { transform: scaleY(0); transition: none; }
.d-os-seg { display: block; flex-basis: 0; min-height: 0; border-radius: 2px; }
.d-os-plot.is-dense .d-os-seg { border-radius: 1px; }
.d-os-seg--v { background: var(--violet); }
.d-os-seg--m { background: var(--mint); }
.d-os-col.is-hot .d-os-seg, .d-os-col[aria-pressed="true"] .d-os-seg { filter: brightness(1.15); }
.d-os-xl { position: relative; flex: none; height: 24px; margin: 0 12px; }
.d-os-xl span { position: absolute; top: 5px; left: clamp(0px, var(--x), calc(100% - 22px)); font-family: var(--font-mono); font-size: 10.5px; line-height: 14px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.d-os-xl.is-center span { left: clamp(11px, var(--x), calc(100% - 11px)); transform: translateX(-50%); }
/* value readout */
.d-os-tip { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px 6px; border-radius: var(--r-btn); background: var(--os-sheet); border: 1px solid var(--line-2); box-shadow: var(--shadow-glass); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.d-os-tip.is-on { opacity: 1; }
.d-os-tip__h { font-size: 10.5px; line-height: 13px; color: var(--text-3); }
.d-os-tip__v { font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--text); }

/* ==== Clients ==== */
.d-os-search { position: relative; margin-left: auto; width: min(220px, 56%); }
.d-os-search > svg { position: absolute; left: 9px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; color: var(--text-3); pointer-events: none; }
.d-os .d-os-search input { width: 100%; height: 32px; padding: 0 30px 0 29px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--input-bg); font-size: 12.5px; transition: border-color var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease); }
.d-os .d-os-search input:hover { border-color: var(--line-3); }
.d-os .d-os-search input:focus, .d-os .d-os-search input:focus-visible { outline: none; border-color: var(--chip-violet-bd); box-shadow: 0 0 0 3px var(--chip-violet-bg); border-radius: var(--r-btn); }
.d-os .d-os-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.d-os-clear { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-clear::after { content: ""; position: absolute; inset: -4px; }
.d-os-clear svg { width: 13px; height: 13px; }
.d-os-clear:hover { color: var(--text); background: var(--surface-3); }

.d-os-chips { flex: none; display: flex; gap: 6px; margin: -2px 0; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.d-os-chips::-webkit-scrollbar { display: none; }
.d-os-fchip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(var(--fg-rgb), 0.025); font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-fchip::after { content: ""; position: absolute; inset: -2px 0; }
.d-os-fchip span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--text-3); }
.d-os-fchip .ui-dot { width: 6px; height: 6px; }
.d-os-fchip:hover { border-color: var(--line-3); color: var(--text); }
.d-os-fchip[aria-pressed="true"] { border-color: var(--chip-violet-bd); background: var(--chip-violet-bg); color: var(--text); }
.d-os-fchip[aria-pressed="true"] span { color: var(--chip-violet-fg); }

.d-os-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--surface-2); overflow: hidden; }
.d-os-thead, .d-os-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 40px 86px 66px; grid-template-areas: "name ind own st last"; align-items: center; column-gap: 10px; padding: 0 12px; }
.d-os-thead { flex: none; height: 30px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.d-os-tbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.d-os-row { width: 100%; height: 36px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; transition: background-color var(--d-md) var(--ease); }
.d-os-row:hover { background: var(--surface-3); }
.d-os-row > :first-child, .d-os-thead > :first-child { grid-area: name; }
.d-os-c-ind { grid-area: ind; min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-c-own { grid-area: own; }
.d-os-c-st { grid-area: st; min-width: 0; }
.d-os-c-last { grid-area: last; text-align: right; white-space: nowrap; }
.d-os-row .d-os-c-last { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }
.d-os-thead .d-os-c-ind { color: var(--text-3); }
.d-os-c-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.d-os-c-n { min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-flag { display: inline-flex; flex: none; color: var(--neg); }
.d-os-flag svg { width: 12px; height: 12px; }
.d-os-tfoot { flex: none; height: 30px; display: flex; align-items: center; padding: 0 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }

/* client detail */
.d-os-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: -6px; padding: 0 10px 0 6px; border-radius: var(--r-btn); font-size: 12.5px; font-weight: 500; color: var(--text-2); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.d-os-back:hover { color: var(--text); background: var(--surface-3); }
.d-os-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-top: -2px; }
.d-os-dhead { flex: none; display: flex; align-items: center; gap: 12px; }
.d-os-logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-ui); background: var(--avatar-bg); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--text); }
.d-os-dhead__x { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-os-dname { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }
.d-os-dsub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-facts { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--surface-2); overflow: hidden; }
.d-os-fact { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-top: 1px solid var(--line); }
.d-os-fact:nth-child(-n + 2) { border-top: 0; }
.d-os-fact:nth-child(even) { border-left: 1px solid var(--line); }
.d-os-fact__k { font-size: 11px; color: var(--text-3); }
.d-os-fact__v { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-fact__s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-dcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.d-os-dcol { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.d-os-dblock { display: flex; flex-direction: column; }
.d-os-dtitle { padding-bottom: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }
.d-os-drow { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--surface-2); text-align: left; transition: background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease); }
.d-os-drow + .d-os-drow { margin-top: 6px; }
.d-os-drow:hover { background: var(--surface-3); border-color: var(--line-3); }
.d-os-drow__d { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.d-os-drow__n { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-drow svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }
.d-os-dnone { padding: 9px 10px; border: 1px dashed var(--line-2); border-radius: var(--r-ui); font-size: 12px; color: var(--text-3); }
.d-os-ditem { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 1px solid var(--chip-neg-bd); border-radius: var(--r-ui); background: var(--chip-neg-bg); }
.d-os-ditem + .d-os-ditem { margin-top: 6px; }
.d-os-ditem svg { width: 13px; height: 13px; flex: none; color: var(--neg); }
.d-os-ditem__n { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-ditem__d { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--chip-neg-fg); }
.d-os-note { padding: 9px 0 10px; border-top: 1px solid var(--line); }
.d-os-note:first-of-type { border-top: 0; padding-top: 2px; }
.d-os-note__m { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.d-os-note__m .d-os-ini { width: 20px; height: 20px; font-size: 9px; }
.d-os-note__d { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.d-os-note p { margin-top: 5px; padding-left: 28px; font-size: 12px; line-height: 1.5; color: var(--text-2); }

/* ==== Calendar ==== */
.d-os-calbar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.d-os-pager { display: inline-flex; flex: none; }
.d-os-ibtn { width: 30px; height: 32px; display: grid; place-items: center; border-radius: var(--r-btn); color: var(--text-2); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-ibtn svg { width: 15px; height: 15px; }
.d-os-ibtn--prev svg { transform: rotate(180deg); }
.d-os-ibtn:hover { color: var(--text); background: var(--surface-3); }
.d-os-wlabel { min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.d-os .d-os-tbtn { flex: none; height: 32px; }
.d-os-wcount { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.d-os-calbody { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.d-os-agenda, .d-os-side { display: none; }

/* week grid */
.d-os-week { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--surface-2); overflow: hidden; }
.d-os-wk-head { flex: none; display: grid; grid-template-columns: 40px repeat(5, minmax(0, 1fr)); height: 28px; border-bottom: 1px solid var(--line); }
.d-os-wk-day { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; border-left: 1px solid var(--line); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.d-os-wk-day b { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.d-os-wk-day.is-today, .d-os-wk-day.is-today b { color: var(--text); }
.d-os-wk-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 26px; height: 2px; margin-left: -13px; border-radius: 2px 2px 0 0; background: var(--violet); }
.d-os-wk-body { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); }
.d-os-wk-hours { position: relative; margin: 8px 0; }
.d-os-wk-hours span { position: absolute; right: 6px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 9.5px; line-height: 12px; letter-spacing: 0; color: var(--text-3); }
.d-os-wk-cols { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.d-os-wk-cols::before { content: ""; position: absolute; inset: 8px 0; background: linear-gradient(180deg, var(--line) 0 1px, transparent 1px) 0 0 / 100% 10%; pointer-events: none; }
.d-os-wk-col { position: relative; min-width: 0; border-left: 1px solid var(--line); }
.d-os-wk-col.is-today { background: rgba(var(--fg-rgb), 0.02); }
.d-os-wk-in { position: absolute; inset: 8px 3px; }
.d-os-wk-now { position: absolute; left: -3px; right: -3px; height: 1px; margin-top: -0.5px; background: var(--mint); pointer-events: none; z-index: 1; }
.d-os-wk-now::before { content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
/* meeting blocks: the button reaches 8px past the box so short meetings still get a 32px target */
.d-os-blk { position: absolute; left: 0; right: 0; padding: 9px 0; text-align: left; }
.d-os-blk__box { position: relative; height: 100%; display: flex; flex-direction: column; gap: 0; padding: 3px 5px 3px 7px; overflow: hidden; border-radius: 6px; background: var(--os-blk); border: 1px solid var(--os-blk-bd); box-shadow: var(--shadow-glass); transition: background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease); }
.d-os-blk__box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--violet); opacity: 0.85; }
.d-os-blk__c { flex: none; font-size: 10.5px; line-height: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-blk__t { flex: none; font-family: var(--font-mono); font-size: 9.5px; line-height: 12px; letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.d-os-blk.is-short .d-os-blk__box { justify-content: center; padding-top: 0; padding-bottom: 0; }
.d-os-blk.is-short .d-os-blk__t { display: none; }
.d-os-blk.is-past .d-os-blk__box { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.d-os-blk.is-past .d-os-blk__box::before { background: var(--text-4); }
.d-os-blk.is-past .d-os-blk__c { color: var(--text-3); }
.d-os-blk.is-past .d-os-blk__t { color: var(--text-3); }
.d-os-blk:hover .d-os-blk__box { background: var(--os-blk-hover); border-color: var(--os-blk-bd-hover); }
.d-os-blk.is-past:hover .d-os-blk__box { background: var(--surface-3); border-color: var(--line-3); }
.d-os-blk[aria-current="true"] .d-os-blk__box { background: var(--os-blk-on); border-color: var(--violet); }
.d-os-blk[aria-current="true"].is-past .d-os-blk__box { background: rgba(var(--fg-rgb), 0.07); border-color: var(--violet); }
.d-os .d-os-blk:focus-visible { outline: none; }
.d-os .d-os-blk:focus-visible .d-os-blk__box { outline: 2px solid var(--violet); outline-offset: 1px; }
.d-os-empty--over { position: absolute; inset: 0 0 0 40px; height: auto; pointer-events: none; }

/* meeting card: docked over the week (default), side panel (wide), inline (agenda) */
.d-os-mcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-os-mcard__top { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.d-os-mcard__when { min-width: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-x { position: relative; flex: none; width: 24px; height: 24px; margin: -2px -4px -2px auto; display: grid; place-items: center; border-radius: 6px; color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-x::after { content: ""; position: absolute; inset: -4px; }
.d-os-x svg { width: 13px; height: 13px; }
.d-os-x:hover { color: var(--text); background: var(--surface-3); }
.d-os-mcard__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.d-os-mcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.d-os-mcard__title { max-width: 100%; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-os-mcard__client { position: relative; display: inline-flex; align-items: center; gap: 3px; max-width: 100%; height: 24px; margin-left: -6px; padding: 0 4px 0 6px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--chip-violet-fg); white-space: nowrap; transition: background-color var(--d-md) var(--ease), color var(--d-md) var(--ease); }
.d-os-mcard__client::after { content: ""; position: absolute; inset: -4px 0; }
.d-os-mcard__client svg { width: 12px; height: 12px; flex: none; }
.d-os-mcard__client:hover { color: var(--text); background: var(--chip-violet-bg); }
.d-os-mcard__rows { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.d-os-mcard__rows > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; }
.d-os-mcard__rows dt { padding-top: 2px; font-size: 11px; line-height: 15px; color: var(--text-3); }
.d-os-mcard__rows dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; line-height: 17px; color: var(--text-2); }
.d-os-mcard__rows dd > svg { width: 13px; height: 13px; flex: none; margin-right: -6px; color: var(--text-3); }
.d-os-ppl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); white-space: nowrap; }
.d-os-ppl .d-os-ini { width: 18px; height: 18px; font-size: 8px; }
.d-os-ppl em { margin-left: 5px; font-style: normal; color: var(--text-3); }

/* the docked card floats over the week: a raised sheet, so the grid never shows through */
.d-os-dock { position: absolute; left: 44px; right: 4px; z-index: 3; padding: 10px 12px 12px; border: 1px solid var(--line-2); border-radius: var(--r-ui); background: var(--os-sheet); box-shadow: var(--shadow-glass); animation: d-os-in var(--d-lg) var(--ease) both; }
.d-os-dock.is-top { top: 4px; }
.d-os-dock.is-bottom { bottom: 4px; }
.d-os-dock .d-os-mcard__main { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; }
.d-os-dock .d-os-mcard__rows dd { flex-wrap: nowrap; }
.d-os-dock .d-os-mcard__rows dd:has(.d-os-ppl) { flex-direction: column; align-items: flex-start; gap: 4px; }
.d-os-dock .d-os-mcard__rows > div { grid-template-columns: 56px minmax(0, 1fr); }
.d-os-dock .d-os-mcard__title { white-space: normal; }
.d-os-ppl > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.d-os-dock .d-os-ppl em { display: none; }

/* side panel (wide) */
.d-os-side { min-width: 0; min-height: 0; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--surface-2); overflow-y: auto; }
.d-os-side__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-3); }
.d-os-side .d-os-mcard__title { white-space: normal; }
.d-os-side .d-os-mcard__rows > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.d-os-side .d-os-mcard__rows dd { flex-direction: column; align-items: flex-start; gap: 5px; }
.d-os-side .d-os-mcard__rows dd > svg { display: none; }
.d-os-side .d-os-mcard__rows { gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.d-os-side .d-os-empty { min-height: 0; flex: 1 1 auto; }

/* day agenda (narrow) */
.d-os-agenda { min-width: 0; min-height: 0; flex-direction: column; gap: 8px; }
.d-os-days { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.d-os-daytab { position: relative; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid transparent; border-radius: var(--r-btn); color: var(--text-3); transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease); }
.d-os-daytab span { font-size: 10.5px; line-height: 13px; }
.d-os-daytab b { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.d-os-daytab:hover { background: rgba(var(--fg-rgb), 0.04); color: var(--text-2); }
.d-os-daytab.is-today::after { content: ""; position: absolute; top: 6px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.d-os-daytab[aria-pressed="true"] { border-color: var(--chip-violet-bd); background: var(--chip-violet-bg); color: var(--text); }
.d-os-daytab[aria-pressed="true"] b { color: var(--text); }
.d-os-alist { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--surface-2); }
.d-os-arow { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); text-align: left; transition: background-color var(--d-md) var(--ease); }
.d-os-arow:hover { background: var(--surface-3); }
.d-os-arow.is-past .d-os-arow__x, .d-os-arow.is-past .d-os-arow__t { opacity: 0.66; }
.d-os-arow[aria-current="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--violet); }
.d-os-arow__t { width: 38px; flex: none; display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--text-2); }
.d-os-arow__t em { font-style: normal; color: var(--text-4); }
.d-os-arow__x { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.d-os-arow__x b { font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-arow__x span { font-size: 11.5px; line-height: 15px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-arow > svg { width: 14px; height: 14px; flex: none; color: var(--text-3); }
.d-os-acard { padding: 4px 12px 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-3); box-shadow: inset 2px 0 0 var(--violet); animation: d-os-in var(--d-lg) var(--ease) both; }
.d-os-acard .d-os-mcard__top, .d-os-acard .d-os-mcard__title { display: none; }
.d-os-anow { display: flex; align-items: center; gap: 7px; height: 14px; margin: -7px 0; padding: 0 12px; position: relative; z-index: 1; pointer-events: none; }
.d-os-anow span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; color: var(--chip-ok-fg); }
.d-os-anow i { flex: 1 1 auto; height: 1px; background: var(--chip-ok-bd); }

/* ==== Reports ==== */
.d-os-period { margin-left: auto; display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--input-bg); }
.d-os-period button { position: relative; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
.d-os-period button::after { content: ""; position: absolute; inset: -3px 0; }
.d-os-period button:hover { color: var(--text); }
.d-os-period button[aria-pressed="true"] { background: rgba(var(--fg-rgb), 0.08); color: var(--text); }
.d-os .d-os-period button:focus-visible { outline-offset: -1px; border-radius: 6px; }
.d-os-view--reports { overflow-y: auto; }
.d-os-rgrid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(160px, 1fr)); gap: 10px; }
.d-os-rgrid .d-os-chart .d-os-plot { margin-top: 10px; }
.d-os-weekly { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.d-os-weekly .d-os-phead { border-bottom: 1px solid var(--line); }
.d-os-wlist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.d-os-wlist > :first-child { margin-top: auto; }
.d-os-wlist > :last-child { margin-bottom: auto; }
.d-os-wrow { width: 100%; height: 32px; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; padding: 0 12px; text-align: left; transition: background-color var(--d-md) var(--ease); }
.d-os-wrow:hover { background: var(--surface-3); }
.d-os-wrow__l { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-2); }
.d-os-wrow__l span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-wrow__l svg { display: none; width: 13px; height: 13px; flex: none; color: var(--text-4); }
.d-os-wrow__v { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text); text-align: right; }
.d-os-wrow__c { width: 74px; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-os-wrow__c em { font-style: normal; font-weight: 500; color: var(--chip-ok-fg); }
.d-os-wrow.is-neg .d-os-wrow__v { color: var(--chip-neg-fg); }
.d-os-wrow.is-neg .d-os-wrow__l svg { color: var(--neg); }

/* ==== Wide: labelled sidebar, 4-up metrics, side panels (760px and up) ==== */
@container d-os (min-width: 760px) {
  .d-os-win { height: 480px; }
  .d-os-shell { grid-template-columns: 164px minmax(0, 1fr); }
  .d-os-nav { gap: 2px; padding: 12px 10px; }
  .d-os-nav__label { display: block; padding: 2px 10px 8px; font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--text-3); }
  .d-os-nav__item { justify-content: flex-start; padding: 0 10px; }
  .d-os-nav__item > span { display: inline; }
  .d-os-nav__item[aria-current="page"]::before { left: -10px; }
  .d-os-nav__label--sub { margin-top: 18px; }
  .d-os-nav__client { display: flex; align-items: center; gap: 10px; flex: none; height: 32px; padding: 0 10px; border-radius: var(--r-btn); font-size: 12px; color: var(--text-3); white-space: nowrap; transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease); }
  .d-os-nav__client i { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--avatar-bg); border: 1px solid var(--line-2); font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
  .d-os-nav__client span { overflow: hidden; text-overflow: ellipsis; }
  .d-os-nav__client:hover { color: var(--text-2); background: rgba(var(--fg-rgb), 0.04); }
  .d-os-nav__client[aria-current="true"] { color: var(--text); background: rgba(var(--fg-rgb), 0.06); }
  .d-os-view { gap: 12px; padding: 16px; }

  .d-os-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .d-os-metric { height: 84px; padding: 12px 14px; }
  .d-os-metric__label { font-size: 12px; }
  .d-os-metric__num { font-size: 28px; line-height: 32px; }
  .d-os-lower { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
  .d-os-phead { height: 38px; padding: 0 14px; }
  .d-os-legend { padding: 0 14px; }
  .d-os-plot { margin: 16px 16px 0; }
  .d-os-xl { margin: 0 16px; }
  .d-os-sched { --rowh: 42px; }
  .d-os-ev, .d-os-now { padding: 0 14px; }

  .d-os-thead, .d-os-row { grid-template-columns: minmax(0, 1fr) 120px 64px 104px 84px; column-gap: 12px; padding: 0 14px; }
  .d-os-row { height: 38px; }
  .d-os-search { width: 240px; }
  .d-os-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .d-os-fact { border-top: 0; }
  .d-os-fact + .d-os-fact { border-left: 1px solid var(--line); }
  .d-os-dcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

  .d-os-calbody { grid-template-columns: minmax(0, 1fr) 232px; gap: 12px; }
  .d-os-side { display: flex; }
  .d-os-dock { display: none; }
  .d-os-wk-head { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); }
  .d-os-wk-body { grid-template-columns: 44px minmax(0, 1fr); }
  .d-os-empty--over { left: 44px; }

  .d-os-rgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .d-os-weekly { grid-column: 1 / 3; }
  .d-os-rgrid > .d-os-chart[data-chart="nb"] { grid-column: 3 / 6; }
  .d-os-rgrid > .d-os-chart[data-chart="mt"] { grid-column: 1 / 4; }
  .d-os-rgrid > .d-os-chart[data-chart="rn"] { grid-column: 4 / 6; }
  .d-os-wrow { height: 32px; padding: 0 14px; }
  .d-os-wrow__c { width: 84px; }
  .d-os-wrow__l svg { display: block; }
}

/* ==== Narrow: tab strip, 2x2 metrics + today, day agenda, stacked reports (under 480px) ==== */
@container d-os (max-width: 479px) {
  .d-os-win { height: 480px; }
  .d-os-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .d-os-nav { flex-direction: row; align-items: center; gap: 2px; height: 41px; padding: 0 8px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .d-os-nav__item { height: 32px; padding: 0 9px; }
  .d-os-nav__item svg { display: none; }
  .d-os-nav__item > span { display: inline; font-size: 12px; }
  .d-os-nav__item[aria-current="page"] { background: none; }
  .d-os-nav__item[aria-current="page"]::before { left: 9px; right: 9px; top: auto; bottom: -5px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .d-os-view { overflow-y: auto; }

  .d-os-metric { height: 64px; padding: 9px 11px; }
  .d-os-metric__num { font-size: 20px; line-height: 24px; }
  .d-os-lower { grid-template-columns: minmax(0, 1fr); }
  .d-os-lower > .d-os-chart { display: none; }
  .d-os-today { flex: none; }
  .d-os-sched { --rowh: 34px; }

  .d-os-head { flex-wrap: nowrap; }
  .d-os-search { width: auto; flex: 1 1 auto; margin-left: 6px; }
  .d-os-thead, .d-os-row { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "name st last" "ind st last"; column-gap: 10px; }
  .d-os-thead, .d-os-c-own { display: none; }
  .d-os-row { height: 46px; align-content: center; row-gap: 1px; }
  .d-os-row .d-os-c-ind { font-size: 11px; line-height: 14px; color: var(--text-3); }
  .d-os-c-st { justify-self: end; }
  .d-os-view--clients .d-os-table { min-height: 220px; }
  .d-os-detail { overflow: visible; }

  .d-os-calbar { gap: 6px; }
  .d-os-ibtn { width: 28px; }
  .d-os-week { display: none; }
  .d-os-agenda { display: flex; }
  .d-os-view--calendar { overflow: hidden; }

  .d-os-rgrid { flex: none; display: flex; flex-direction: column; }
  .d-os-rgrid > .d-os-chart { flex: none; height: 176px; }
  .d-os-period button { padding: 0 9px; }
}

/* ---- Narrow metric cards (320px phones, wide layout near 760px) ---- */
@container d-os-card (max-width: 127px) {
  .d-os-metric__top svg { display: none; }
  .d-os-metric__val { gap: 5px; }
  .d-os-metric__ctx { font-size: 10.5px; }
}
@container d-os-chart (max-width: 219px) { .d-os-chart .d-os-pmeta { display: none; } }