/* ===========================================================================
   DesignOS — Avatar, Button Group, Breadcrumbs, Calender
   ---------------------------------------------------------------------------
   Avatar        `-> Avatars`             18 variants
   Button Group  `-> Button Groups`        2 published (12 unpublished rows)
   Breadcrumbs   `-> Breadcrumbs`          3 variants
   Calender      `-> Date & Time Pickers ` 3 variants   (source spelling kept)

   SOURCE: these four come from the DesignOS skill's bundled reference (§11.5),
   not from a fresh Dev Mode read — their node ids were not available. The
   variant axes and the Calender container CSS are exact; geometry the reference
   marks as "no stable selected-row CSS block" is inferred and flagged in the
   docs. Re-read from Figma before treating any measurement here as final.

   Requires tokens.css.
   =========================================================================== */

/* ===========================================================================
   Avatar — Size is the exact Figma value and drives the square dimension
   =========================================================================== */

.dos-avatar {
  --av: 40px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--av);
  height: var(--av);
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--icon-secondary);
  font-family: var(--family-text);
  font-weight: var(--weight-medium);
  overflow: hidden;
}

.dos-avatar--20 { --av: 20px; font-size: 8px; }
.dos-avatar--24 { --av: 24px; font-size: 10px; }
.dos-avatar--32 { --av: 32px; font-size: 12px; }
.dos-avatar--40 { --av: 40px; font-size: 14px; }
.dos-avatar--48 { --av: 48px; font-size: 16px; }
.dos-avatar--64 { --av: 64px; font-size: 20px; }

/* The three content treatments are mutually exclusive in the source. */
.dos-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dos-avatar__initials { color: var(--text-secondary); line-height: 1; user-select: none; }
.dos-avatar__icon { width: 60%; height: 60%; color: var(--icon-secondary); }

/* Overlapping stack, e.g. a row of collaborators. */
.dos-avatar-group { display: inline-flex; align-items: center; }
.dos-avatar-group .dos-avatar + .dos-avatar { margin-left: calc(var(--av) * -0.3); }
.dos-avatar-group .dos-avatar { box-shadow: 0 0 0 2px var(--bg-primary); }

/* ===========================================================================
   Button Group — 983:11145
   Only two published variants: Size=sm and Size=md. The State and Icon Only
   axes belong to the unpublished set, not this component.

   The group carries its own border, pill radius and overflow clip; each child
   ALSO carries a full border, and the clip trims the outer edges. Children are
   a distinct `_Button Group Unpublished` component, not the `Button` component
   — hence border-primary and bg-primary rather than the Outline treatment.
   =========================================================================== */

.dos-btn-group {
  display: inline-flex;
  align-items: center;
  /* Hug the content. inline-flex alone is not enough — as a flex item the group
     would stretch to its container's cross size. */
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  gap: var(--spacing-0);
  padding: var(--spacing-0);
  border: 1px solid var(--border-primary);
  border-radius: var(--button);
  overflow: hidden;
}

.dos-btn-group__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-0);
  flex: none;
  height: 44px;
  padding: var(--spacing-8) var(--spacing-12);
  border: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

/* One hairline between neighbours. The source gives the group a border AND
   every child a full border, which doubles up at each seam; the group's own
   border already draws the outer edge, so children only need a divider. */
.dos-btn-group__item + .dos-btn-group__item { border-left: 1px solid var(--border-primary); }

/* The label carries its own 4px inline padding, as everywhere else. */
.dos-btn-group__item > span { display: inline-flex; align-items: center; padding-inline: var(--spacing-4); }

.dos-btn-group--sm .dos-btn-group__item { height: 32px; }

.dos-btn-group__item:hover { background: var(--bg-primary_hover); }

/* The group clips, so the focus band is drawn inside the child rather than
   outside it — an outer band would be trimmed by the overflow. */
.dos-btn-group__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring);
  z-index: 10;
}

.dos-btn-group__item[aria-pressed="true"],
.dos-btn-group__item.is-active { background: var(--bg-brand-primary_press); }

/* ===========================================================================
   Breadcrumbs — 1074:12348
   Each crumb is a Button instance: the label sits in a 20px-tall slot with the
   Button's own 4px inline padding. All crumbs are medium weight; only the
   colour distinguishes the current path.
   =========================================================================== */

.dos-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
}

.dos-breadcrumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.dos-breadcrumbs li { display: contents; }

/* The crumb is a Button: gap 4px, centred, no padding of its own. */
.dos-breadcrumbs__crumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--text-disabled);
  text-decoration: none;
  cursor: pointer;
}
/* The Button text slot — 20px tall with 4px inline padding. */
.dos-breadcrumbs__crumb > span {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: var(--spacing-4);
  white-space: nowrap;
}
.dos-breadcrumbs__crumb:hover { color: var(--text-secondary); }
.dos-breadcrumbs__crumb:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); border-radius: var(--button); }

/* The current path is the only one that changes colour. */
.dos-breadcrumbs [aria-current="page"] { color: var(--text-brand); cursor: default; }

/* Separator is a 14px chevron-right — smaller than the 20px leading icon. */
.dos-breadcrumbs__sep { display: inline-flex; flex: none; width: 14px; height: 14px; color: var(--icon-secondary); }
.dos-breadcrumbs__sep svg { width: 14px; height: 14px; }

/* Type=Leading Icons uses a 20px glyph inside the crumb. */
.dos-breadcrumbs__icon { width: 20px; height: 20px; flex: none; }

/* ===========================================================================
   Calender — 1074:460  (source spelling preserved)
   Header / Calendar / Footer stacked vertically. Type=Normal Range shows two
   month columns side by side inside the Calendar block.
   =========================================================================== */

.dos-calendar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Hug the content rather than a fixed frame — as a flex item the card would
     otherwise stretch to its container. min-width keeps the source floor. */
  width: fit-content;
  min-width: 320px;
  max-width: 100%;
  align-self: flex-start;
  border: 1px solid var(--border-primary);
  border-radius: var(--modal);
  background: var(--bg-primary);
  box-shadow: 0 12px 16px -4px rgba(10, 10, 10, 0.08),
              0 4px 6px -2px rgba(10, 10, 10, 0.03);
  font-family: var(--family-text);
  overflow: hidden;
}

/* Type=Normal Range — two months side by side. */
.dos-calendar--range { width: fit-content; max-width: 100%; }

/* --- Header: a pill-shaped date selector on a secondary surface ------------ */
.dos-calendar__header {
  width: 100%;
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-8);
  background: var(--bg-primary);
}

.dos-calendar__selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  min-height: 32px;
  padding: var(--spacing-4);
  border-radius: var(--calendar-header);
  background: var(--bg-secondary);
}

.dos-calendar__title {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-4);
  font-size: var(--font-size-paragraph-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Prev / next are 40px Outline buttons. */
.dos-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: var(--spacing-12);
  border: 1px solid var(--border-brand-secondary);
  border-radius: var(--button);
  background: var(--bg-primary);
  color: var(--icon-primary);
  cursor: pointer;
}
.dos-calendar__nav:hover { background: var(--bg-brand-primary_hover); }
.dos-calendar__nav:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.dos-calendar__nav svg { width: 16px; height: 16px; }

/* --- Calendar body -------------------------------------------------------- */
.dos-calendar__body {
  display: flex;
  gap: var(--spacing-16);
  width: 100%;
  padding: var(--spacing-4) var(--spacing-12) var(--spacing-8);
  background: var(--bg-primary);
}

.dos-calendar__month { display: flex; flex-direction: column; gap: var(--spacing-4); flex: 1 0 0; min-width: 0; }

/* Columns sit flush. space-between spread the 7 cells across the full width
   and pushed the grid apart; centring keeps them closed. */
.dos-calendar__dow-row,
.dos-calendar__row { display: flex; align-items: center; justify-content: center; width: 100%; }

.dos-calendar__dates { display: flex; flex-direction: column; gap: var(--spacing-2); width: 100%; }

/* Weekday labels are caption-md medium in the disabled step. */
.dos-calendar__dow {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 32px;
  padding: 0;
  border-radius: var(--button);
  font-family: var(--family-caption);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  font-weight: var(--weight-medium);
  color: var(--text-disabled);
  text-align: center;
}
.dos-calendar__dow > span,
.dos-calendar__day > span { display: block; text-align: center; line-height: 1; }

/* Day cells are 40px pills, not squares. */
.dos-calendar__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--button);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  font-weight: var(--weight-regular);
  cursor: pointer;
}
.dos-calendar__day:hover { background: var(--bg-primary_hover); }
.dos-calendar__day:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); z-index: 10; }

/* Days outside the shown month drop to the disabled step. */
.dos-calendar__day--muted,
.dos-calendar__day[disabled] { color: var(--text-disabled); cursor: not-allowed; }

.dos-calendar__day--selected { background: var(--bg-brand-solid); color: var(--text-alt); }

/* The selected day carries a dot marker near its lower edge. */
.dos-calendar__day--today::after {
  content: "";
  position: absolute;
  inset: 80% 45% 10% 45%;
  border-radius: var(--radius-full);
  background: var(--bg-primary);
}

/* The in-range band is square so it connects across the row; the endpoints stay
   full pills, exactly as the selected day does in Single Calendar. Flattening
   an endpoint's edge was wrong — and broke outright when an endpoint fell at
   the start or end of a row, where there is nothing adjacent to connect to. */
.dos-calendar__day--in-range { background: var(--bg-secondary); border-radius: 0; }

/* An endpoint has to be both: the band, so it meets its neighbour with no gap,
   and the pill on top. The cell paints the band across the half facing the
   range; a ::before draws the pill over it. */
.dos-calendar__day--range-start,
.dos-calendar__day--range-end {
  border-radius: 0;
  background: none;
  color: var(--text-alt);
}
.dos-calendar__day--range-start { background: linear-gradient(to right, transparent 50%, var(--bg-secondary) 50%); }
.dos-calendar__day--range-end   { background: linear-gradient(to left,  transparent 50%, var(--bg-secondary) 50%); }

.dos-calendar__day--range-start::before,
.dos-calendar__day--range-end::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--button);
  background: var(--bg-brand-solid);
}

/* Keep the label, and the today dot, above the pill. */
.dos-calendar__day > span { position: relative; z-index: 2; }
.dos-calendar__day--today::after { z-index: 3; }

/* --- Footer: Cancel / Apply, each taking half the row --------------------- */
.dos-calendar__footer {
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
  background: var(--bg-primary);
}
.dos-calendar__actions { display: flex; align-items: center; gap: var(--spacing-8); min-height: 32px; width: 100%; }
/* The footer splits the row evenly and both halves shrink with the card. */
.dos-calendar__actions .dos-btn { flex: 1 1 0; min-width: 0; overflow: hidden; }
.dos-calendar__actions .dos-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }