/* CIRQLE icon contract — the ONLY place the two icon colours are defined.
   Icons are Hugeicons Stroke Rounded (icons/svg/, 24 grid, stroke 1.5) and
   render in exactly two colours: charcoal on light surfaces, the cream
   logo ink on dark ones, so an icon and a logo on the same field match.
   A container declares its surface with data-surface="dark" (or "light" for a
   light panel inside a dark one); nothing else may colour an icon. State
   (disabled, hover) is expressed with opacity, never a third colour.
   Vendored verbatim into every product (website: public/icons.css, linked by
   every page; LMS: imported from globals.css). Rules: DESIGN.md → Icons. */

:root {
  --icon-light: #252422; /* canon Charcoal (= --ink / --cirqle-charcoal) */
  --icon-dark: #f5f0e3;  /* canon cream INK — the same cream the logo marks are drawn in */
  --icon-color: var(--icon-light);
}
[data-surface="dark"]  { --icon-color: var(--icon-dark); }
[data-surface="light"] { --icon-color: var(--icon-light); }

/* `svg.icon…` (0,1,1) deliberately outranks any single-class page rule such as
   `.chip-ic{color:…}` (0,1,0) that a legacy page might still put on the element. */
svg.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--icon-color); /* every path is stroke="currentColor" */
  vertical-align: middle;
}
svg.icon-16 { width: 16px; height: 16px; }
svg.icon-20 { width: 20px; height: 20px; }
svg.icon-24 { width: 24px; height: 24px; }
svg.icon-32 { width: 32px; height: 32px; }
svg.icon-48 { width: 48px; height: 48px; }
svg.icon-text { width: 1em; height: 1em; vertical-align: -0.15em; } /* inline with running text */

.icon-spin { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

@media print {
  .icon { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* The one sanctioned icon-in-CSS: the native <select> chevron (arrow-down-01)
   and the checkbox tick (tick-02), each in the two colours. */
.select-chevron {
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' stroke='%23252422' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-surface="dark"] .select-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' stroke='%23F5F0E3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check-tick::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='%23252422' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-surface="dark"] .check-tick::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5' stroke='%23F5F0E3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}