/* ===========================================================================
   DesignOS — Badges & Chips, Alert (Notification) & Snackbar, Banner
   ---------------------------------------------------------------------------
   Figma: `-> Badges & Chips`   Badges  968:9919  2 sizes x 6 types x 3 styles
                                                  x 6 colors        = 216
          `-> Alerts, Banners…` Alert   271:340   3 colors x 2 sizes x 5 states
                                                  + 5 snackbar      =  35
                                Banner  271:630   3 colors x 5 states = 15

   All three share one status family. Each family sets five custom properties
   — soft fill, strong fill, boundary, content, on-solid content — and every
   component reads the same five, so adding a status is one block, not three.

   On-solid content is white for every status except WARNING, which uses
   text-primary — white on bg-warning-solid measures 2.15:1 and fails AA.
   Success is still white (2.07:1); see the docs for the numbers.

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

.dos-status {
  --st-soft: var(--bg-secondary);
  --st-solid: var(--bg-dark);
  --st-border: var(--border-secondary);
  --st-content: var(--text-tertiary);
  --st-on-solid: var(--text-white);
}

.dos-status--brand   { --st-soft: var(--bg-brand-primary); --st-solid: var(--bg-brand-solid);   --st-border: var(--border-brand-secondary); --st-content: var(--text-brand);   --st-on-solid: var(--text-alt); }
.dos-status--success { --st-soft: var(--bg-success);       --st-solid: var(--bg-success-solid); --st-border: var(--border-success);         --st-content: var(--text-success); --st-on-solid: var(--text-white); }
.dos-status--warning { --st-soft: var(--bg-warning);       --st-solid: var(--bg-warning-solid); --st-border: var(--border-warning);         --st-content: var(--text-warning); --st-on-solid: var(--text-primary); }
.dos-status--error   { --st-soft: var(--bg-error);         --st-solid: var(--bg-error-solid);   --st-border: var(--border-error);           --st-content: var(--text-error);   --st-on-solid: var(--text-on-error-solid); }
.dos-status--neutral { --st-soft: var(--bg-secondary);     --st-solid: var(--bg-dark);          --st-border: var(--border-secondary);       --st-content: var(--text-primary); --st-on-solid: var(--text-white); }

/* Info. Figma ships it on Badges but not on Alert or Banner, even though the
   export carries the full information family. Added here so all three cover
   the same statuses. */
.dos-status--info    { --st-soft: var(--bg-info);          --st-solid: var(--bg-info-solid);    --st-border: var(--border-info);            --st-content: var(--text-info);    --st-on-solid: var(--text-on-info-solid); }

/* ===========================================================================
   Badges & Chips
   =========================================================================== */

.dos-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-0);
  box-sizing: border-box;
  height: var(--dos-badge-height, 28px);
  padding: var(--spacing-4) var(--spacing-6);
  border: 1px solid transparent;
  border-radius: var(--button);
  background: var(--st-soft);
  color: var(--st-content);
  font-family: var(--family-caption);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
}

.dos-badge--sm { --dos-badge-height: 24px; }

/* The label carries its own 4px inline padding, as in the source. */
.dos-badge__label { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-0) var(--spacing-4); }
.dos-badge__icon  { display: block; flex: none; width: 12px; height: 12px; }
.dos-badge__avatar { flex: none; width: 16px; height: 16px; border-radius: 50%; object-fit: cover; background: var(--bg-tertiary); }
.dos-badge__flag  { flex: none; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; font-size: 13px; line-height: 1; }

.dos-badge__close {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 12px; height: 12px; padding: 0;
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
.dos-badge__close:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }

/* Style axis. Light Color is the resting default above. */
.dos-badge--outline { background: var(--bg-primary); border-color: var(--st-border); }
.dos-badge--solid   { background: var(--st-solid);   color: var(--st-on-solid); border-color: transparent; }

/* Icon Only drops the label and squares the frame. */
.dos-badge--icon-only { width: var(--dos-badge-height, 28px); padding: 0; justify-content: center; }

/* ===========================================================================
   Alert (Notification) & Snackbar
   =========================================================================== */

.dos-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  box-sizing: border-box;
  width: 428px;
  max-width: 100%;
  padding: var(--spacing-20) var(--spacing-16);
  border: 1px solid var(--st-border);
  border-radius: var(--card);
  background: var(--st-soft);
  color: var(--text-primary);
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  box-shadow: 0 4px 6px -3px rgba(10, 10, 10, 0.06);
}

.dos-alert__icon { display: block; flex: none; width: 20px; height: 20px; color: var(--st-content); }

.dos-alert__body { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; gap: var(--spacing-16); }
.dos-alert__message { display: flex; flex-direction: column; gap: var(--spacing-4); }
.dos-alert__title { font-weight: var(--weight-semibold); margin: 0; }
.dos-alert__text  { font-weight: var(--weight-regular); margin: 0; }

.dos-alert__actions { display: flex; gap: var(--spacing-12); font-weight: var(--weight-semibold); }
.dos-alert__actions button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.dos-alert__actions button:first-child { text-decoration: underline; text-underline-position: from-font; }
.dos-alert__actions button:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }

.dos-alert__dismiss {
  position: absolute; top: 7.5px; right: 8.5px;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: var(--spacing-8);
  border: 0; border-radius: var(--button); background: transparent;
  color: inherit; cursor: pointer;
}
.dos-alert__dismiss:hover { background: var(--bg-primary_hover); }
.dos-alert__dismiss:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.dos-alert__dismiss svg { width: 16px; height: 16px; }

/* Colour axis. `Light` is the resting default above. */
.dos-alert--default { background: var(--bg-primary); border-color: var(--border-secondary); }
.dos-alert--solid   { background: var(--st-solid); border-color: transparent; color: var(--st-on-solid); }
.dos-alert--solid .dos-alert__icon { color: var(--st-on-solid); }

/* Size axis. */
.dos-alert--small {
  align-items: center;
  width: 796px;
  /* min-height, not height: a fixed 48px overflows the moment the row is
     narrower than its content. */
  min-height: 48px;
  padding: var(--spacing-12) var(--spacing-16);
  gap: var(--spacing-12);
  box-shadow: 0 1px 2px -1px rgba(10, 10, 10, 0.1);
}
.dos-alert--small .dos-alert__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  min-width: 0;
}
.dos-alert--small .dos-alert__message { flex-direction: row; align-items: baseline; gap: var(--spacing-4); min-width: 0; }
.dos-alert--small .dos-alert__actions { flex: none; }
/* Single-line row: the message truncates rather than pushing the actions out. */
.dos-alert--small .dos-alert__title { flex: none; }
.dos-alert--small .dos-alert__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Snackbar is a fixed dark surface — it ignores the status fill and keeps only
   the status icon, so a toast reads the same wherever it appears. */
.dos-alert--snackbar {
  /* Hugs its content. The source draws a 752px frame, but a toast is sized by
     its message — a fixed width leaves a long empty run beside short copy and
     overflows any container narrower than 752px. */
  width: fit-content;
  max-width: 100%;
  /* bg-alt / text-alt are the inverse-of-canvas pair and flip with the mode.
     bg-dark / text-white do not, so a snackbar would vanish in Dark. */
  background: var(--bg-alt);
  border-color: transparent;
  color: var(--text-alt);
}
/* The body must be allowed to shrink; `flex: none` made it overflow. */
.dos-alert--snackbar .dos-alert__body { flex: 0 1 auto; min-width: 0; gap: var(--spacing-24); }
.dos-alert--snackbar .dos-alert__icon { color: var(--text-alt); }
.dos-alert--snackbar .dos-alert__actions button { text-decoration: underline; }
.dos-alert--snackbar .dos-alert__text { overflow: visible; text-overflow: clip; }

/* ===========================================================================
   Banner — full-bleed, square corners, no shadow
   =========================================================================== */

.dos-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--st-soft);
  color: var(--text-primary);
  /* Square in every theme. A banner is full-bleed and belongs to the page edge,
     so it deliberately opts out of the radius theme. */
  border-radius: 0;
  font-family: var(--family-text);
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
}

.dos-banner__content { display: flex; align-items: center; gap: var(--spacing-12); min-width: 0; }
.dos-banner__icon { display: block; flex: none; width: 20px; height: 20px; color: var(--st-content); }
.dos-banner__message { display: flex; align-items: center; gap: var(--spacing-4); min-width: 0; }
.dos-banner__title { font-weight: var(--weight-semibold); }
.dos-banner__text  { font-weight: var(--weight-regular); }

.dos-banner__actions { display: flex; gap: var(--spacing-12); margin-left: var(--spacing-20); font-weight: var(--weight-semibold); }
.dos-banner__actions button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; text-underline-position: from-font;
}
.dos-banner__actions button:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }

.dos-banner__close {
  position: absolute; top: 50%; right: var(--spacing-24);
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
.dos-banner__close:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }

.dos-banner--default { background: var(--bg-primary); box-shadow: inset 0 -1px 0 var(--border-secondary); }
.dos-banner--solid   { background: var(--st-solid); color: var(--st-on-solid); }
.dos-banner--solid .dos-banner__icon { color: var(--st-on-solid); }

/* The banner wraps rather than clipping when the viewport is narrow. */
@media (max-width: 720px) {
  .dos-banner { flex-wrap: wrap; padding-right: var(--spacing-48); }
  .dos-banner__message { flex-wrap: wrap; white-space: normal; }
  .dos-banner__actions { margin-left: 0; }
}

/* ===========================================================================
   Tooltip — 584:7980
   ---------------------------------------------------------------------------
   2 supporting-text x 2 style x 9 arrow positions = 34. `None` exists only at
   With Style=False, which is why the count is 34 and not 36.

   Only `With Style=False` is implemented, by request — the plain tail, a 12px
   square rotated 45deg. That leaves 2 supporting-text x 9 arrow positions = 18.
   =========================================================================== */

.dos-tooltip {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 280px;
  /* drop-shadow, not box-shadow: the shadow has to follow the tail. */
  filter: drop-shadow(0 4px 3px rgba(10, 10, 10, 0.06));
}

.dos-tooltip__bubble {
  position: relative;
  padding: var(--spacing-12);
  border-radius: var(--card);
  background: var(--bg-alt);
  color: var(--text-alt);
  font-family: var(--family-text);
}

.dos-tooltip__title {
  margin: 0;
  font-size: var(--font-size-paragraph-sm);
  line-height: var(--line-height-paragraph-sm);
  font-weight: var(--weight-medium);
}

.dos-tooltip__text {
  margin: var(--spacing-4) 0 0;
  font-family: var(--family-caption);
  font-size: var(--font-size-caption-md);
  line-height: var(--line-height-caption-md);
  font-weight: var(--weight-regular);
}

/* With supporting text the bubble is a fixed 280px; without, it hugs. */
.dos-tooltip--wide { width: 280px; }

/* --- Tail ------------------------------------------------------------------
   One element, positioned per arrow direction. The plain tail is the ::before
   square; the styled tail turns it into a circle and adds the ::after dot.
   -------------------------------------------------------------------------- */
.dos-tooltip__tail { position: absolute; width: 0; height: 0; }

.dos-tooltip__tail::before {
  content: "";
  position: absolute;
  background: var(--bg-alt);
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Bottom — tail below the bubble, so the tooltip sits above its target. */
.dos-tooltip--bottom-left   .dos-tooltip__tail { bottom: 0; left: 18px; }
.dos-tooltip--bottom-center .dos-tooltip__tail { bottom: 0; left: 50%; }
.dos-tooltip--bottom-right  .dos-tooltip__tail { bottom: 0; right: 18px; }

/* Top — tail above the bubble. */
.dos-tooltip--top-left   .dos-tooltip__tail { top: 0; left: 18px; }
.dos-tooltip--top-center .dos-tooltip__tail { top: 0; left: 50%; }
.dos-tooltip--top-right  .dos-tooltip__tail { top: 0; right: 18px; }

/* Sides. */
.dos-tooltip--left  .dos-tooltip__tail { left: 0; top: 50%; }
.dos-tooltip--right .dos-tooltip__tail { right: 0; top: 50%; }
 { left: 12px; top: 0; }

/* Arrow Position=None drops the tail entirely. */
.dos-tooltip--none .dos-tooltip__tail { display: none; }

/* The bubble paints over the inner half of the tail, leaving a clean triangle
   or a circle that reads as attached. */
.dos-tooltip__bubble { z-index: 1; }
.dos-tooltip__tail { z-index: 0; }