/* Colours in use that the design system does not define (DS-17 experiments). One place, so nothing is repeated:
   when the team picks, the winning value moves into tokens/*.tokens.json and these lines are deleted.
   Registered in docs/provenance.toml as "experiments". */
:root {
  --exp-line: var(--z-border-strong);   /* every temporary thing is outlined with this dashed line (WEB-35) */
  --exp-page-grey: #F3F3F4;      /* Current direction's page; admin's page */
  --exp-sunken-grey: #E6E6E8;
  --exp-page-white: #FFFFFF;     /* B's page */
  --exp-sunken-white: #EEEEF0;
  --exp-page-chat: #ECEEF4;      /* C's page: a pale cool grey so white surfaces stand out */
  --exp-sunken-chat: #DDE0EA;
  --exp-edge-chat: #D3D6E2;
}

/* The experiment look (WEB-35): dashed means "temporary, for testing". The same line on the floating buttons, the
   test boxes, notes and links. Only the temporary things carry it, never the page. Nothing here ships in production. */
.exp, .demo-box { border: 2px dashed var(--exp-line); }
.exp-note { margin: 0; padding: 8px 12px; border: 2px dashed var(--exp-line); border-radius: var(--z-radius-md); color: var(--z-text-secondary); font: var(--z-type-caption); }
.exp-link { margin-top: var(--z-space-4); display: flex; gap: var(--z-space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--z-space-4); border: 2px dashed var(--exp-line); border-radius: var(--z-radius-lg); text-decoration: none; color: var(--z-text-primary); }
.exp-link:hover { border-color: var(--z-brand); }
.exp-link__text { display: grid; gap: 2px; flex: 1; text-align: start; }
.exp-link__text small { color: var(--z-text-secondary); font: var(--z-type-caption); }
.exp-link__tag { font: 700 11px/1 var(--z-font); color: var(--z-text-secondary); border: 1.5px dashed var(--exp-line); border-radius: 99px; padding: 3px 9px; }