/* ==========================================================================
   Claude Organization Usage Monitor — documentation theme
   Layered on MkDocs Material. Goals: brand consistency, and comfortable
   reading on phones, tablets, laptops and in print.
   ========================================================================== */

:root {
  /* Dodgerblue is the product primary. It is a bright accent: on white it
     clears WCAG's 3:1 large-text/graphics threshold but not the 4.5:1 that
     body text and white-on-fill labels need, so the two derived shades below
     carry those cases -- the same split the application and the exported
     reports use. */
  --cm-dodger: #1E90FF;        /* the brand color itself: rules, icons, focus */
  --cm-dodger-fill: #1977D2;   /* fills that carry white text (4.55:1) */
  --cm-dodger-ink: #0B6FD1;    /* brand color as body text on white (4.99:1) */
  --cm-dodger-light: #6DB8FF;  /* the same accent on a dark surface */
  --cm-amber: #F7B955;
  --cm-radius: 10px;
}

/* Brand colours for both schemes ------------------------------------------ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--cm-dodger-fill);
  --md-primary-fg-color--light: var(--cm-dodger);
  --md-primary-fg-color--dark: #0A63BC;
  --md-accent-fg-color: var(--cm-dodger-ink);
  --md-typeset-a-color: var(--cm-dodger-ink);
  --cm-surface: #ffffff;
  --cm-border: #dde4ec;
  --cm-muted: #5B6775;
}
[data-md-color-scheme="slate"] {
  /* Cool the stock slate neutrals towards the application's dark palette so
     the docs and the product read as one thing. */
  --md-hue: 215;
  --md-primary-fg-color: var(--cm-dodger-fill);
  --md-primary-fg-color--light: var(--cm-dodger-light);
  --md-primary-fg-color--dark: #0A63BC;
  --md-accent-fg-color: var(--cm-dodger-light);
  --md-typeset-a-color: var(--cm-dodger-light);
  --cm-surface: #242b35;
  --cm-border: #39434f;
  --cm-muted: #A3AEBC;
}

/* Fluid typography: comfortable on a 360px phone and a 27" display --------- */
.md-typeset { font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.85rem); line-height: 1.68; }
.md-typeset h1 { font-weight: 700; letter-spacing: -0.01em;
                 font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem); }
.md-typeset h2 { font-weight: 650; margin-top: 2.2em;
                 font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
.md-typeset h3 { font-weight: 600; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }

/* Content width: keep long prose readable on wide screens ------------------ */
.md-grid { max-width: 68rem; }

/* --------------------------------------------------------------------------
   Tables — the docs carry dense reference tables (capability matrix, KPI
   definitions). Material makes them scroll; these rules make that scroll
   discoverable and keep the header visible while scrolling.
   -------------------------------------------------------------------------- */
.md-typeset__table { width: 100%; }
.md-typeset table:not([class]) {
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  font-size: 0.94em;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--md-primary-fg-color);
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th { padding: .6em .9em; }
.md-typeset table:not([class]) tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--md-primary-fg-color) 4%, transparent);
}

/* Horizontal scroll affordance for wide tables on narrow screens */
.md-typeset__scrollwrap { margin: 1em 0; }
@media screen and (max-width: 76.234375em) {
  .md-typeset__table { position: relative; }
  .md-typeset table:not([class]) { font-size: 0.86em; }
  .md-typeset table:not([class]) td,
  .md-typeset table:not([class]) th { padding: .5em .65em; }
}
@media screen and (max-width: 44.9em) {
  /* Phones: let dense tables scroll sideways rather than crush the columns,
     and hint that they can be scrolled. */
  .md-typeset__scrollwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .md-typeset table:not([class]) { font-size: 0.8em; min-width: 34rem; }
  .md-typeset__scrollwrap::after {
    content: "→ scroll";
    display: block;
    text-align: right;
    font-size: .62rem;
    color: var(--cm-muted);
    padding: .15rem .2rem 0 0;
  }
}

/* Screenshots and diagrams ------------------------------------------------- */
.md-typeset img:not(.cm-badge):not(.twemoji) {
  border-radius: var(--cm-radius);
  border: 1px solid var(--cm-border);
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}
[data-md-color-scheme="slate"] .md-typeset img:not(.cm-badge):not(.twemoji) {
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

/* --------------------------------------------------------------------------
   Landing page: hero + responsive card grid (CSS grid auto-fit collapses to
   a single column on phones with no media query needed).
   -------------------------------------------------------------------------- */
.cm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.6rem 0 .4rem;
}
@media screen and (min-width: 60em) {
  .cm-hero { grid-template-columns: 1.35fr .9fr; gap: 2.2rem; padding: 2.2rem 0 .8rem; }
}
.cm-hero h1 { margin: 0 0 .35em; }
.cm-hero .cm-tagline {
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.12rem);
  color: var(--cm-muted);
  margin: 0 0 1.1rem;
  line-height: 1.55;
}
.cm-hero img { border: 1px solid var(--cm-border); }

.cm-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .4rem; }
.cm-btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .58em 1.15em;
  border-radius: 2em;
  font-weight: 600;
  font-size: .78rem;
  text-decoration: none !important;
  border: 1px solid var(--md-primary-fg-color);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cm-btn--primary { background: var(--md-primary-fg-color); color: #fff !important; }
.cm-btn--primary:hover { background: var(--md-primary-fg-color--dark); transform: translateY(-1px);
                         box-shadow: 0 3px 10px rgb(30 144 255 / 32%); }
/* The ghost button's label is body-size bold text, so it takes the accent
   token -- the ink shade on white, the light shade on dark -- rather than
   the fill shade, which is only guaranteed against white. */
.cm-btn--ghost { color: var(--md-accent-fg-color) !important; background: transparent; }
.cm-btn--ghost:hover { background: color-mix(in srgb, var(--cm-dodger) 12%, transparent); }

/* Badge row (uses the same committed SVGs as the README) */
.cm-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 0; }
.cm-badges img.cm-badge { border: 0 !important; box-shadow: none !important;
                          border-radius: 3px; margin: 0; display: inline-block; }

/* Card grid — responsive without media queries */
.cm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: .9rem;
  margin: 1.2rem 0 1.6rem;
}
.cm-card {
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  background: var(--cm-surface);
  padding: 1rem 1.05rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cm-card:hover { border-color: var(--cm-dodger); transform: translateY(-2px);
                 box-shadow: 0 4px 14px rgb(0 0 0 / 7%); }
.cm-card h3 { margin: 0 0 .35rem; font-size: .95rem; }
.cm-card h3 a { text-decoration: none; }
.cm-card p { margin: 0; font-size: .78rem; color: var(--cm-muted); line-height: 1.55; }
.cm-card .cm-icon { font-size: 1.15rem; line-height: 1; display: block; margin-bottom: .45rem; }

/* Profile block — studio intro and founder card (About page) ------------- */
.cm-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--cm-border);
  border-left: 3px solid var(--cm-dodger);
  border-radius: var(--cm-radius);
  background: var(--cm-surface);
  padding: 1.15rem 1.3rem;
  margin: 1.2rem 0 1.6rem;
}
@media screen and (min-width: 45em) {
  .cm-person:has(.cm-person__mark) { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.4rem; }
}
.cm-person > div > :first-child { margin-top: 0; }
.cm-person > div > :last-child { margin-bottom: 0; }
.cm-person h3 { margin: 0; font-size: 1.15rem; }
.cm-person__role {
  margin: .15rem 0 .8rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--md-accent-fg-color);
}
.md-typeset .cm-person__mark img,
.md-typeset img.cm-person__logo {
  width: 5rem; height: 5rem;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0;
}
.cm-person .cm-actions { margin-top: .9rem; margin-bottom: 0; }

/* Generate action ---------------------------------------------------------- */
.cm-az-generate { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .8rem; }
.cm-btn--lg { font-size: .86rem; padding: .7em 1.5em; }

/* Modal: dashboard + report ------------------------------------------------ */
body.cm-az-modal-open { overflow: hidden; }
.cm-az-modal { position: fixed; inset: 0; z-index: 40; display: flex;
               align-items: center; justify-content: center; padding: clamp(0px, 1.1vw, 1rem); }
.cm-az-modal[hidden] { display: none; }
.cm-az-modal__backdrop { position: absolute; inset: 0; background: rgb(8 12 18 / 62%);
                         backdrop-filter: blur(2px); }
.cm-az-modal__panel {
  position: relative; display: flex; flex-direction: column;
  /* Almost the whole viewport: the people table carries ten columns and the
     dashboard is the reason the dialog exists. The cap only bites on ultrawide
     displays, where a 3000px-long table row would be unreadable. */
  width: min(2200px, 100%); height: min(96vh, 100%);
  background: var(--cm-surface); color: var(--md-default-fg-color);
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
  box-shadow: 0 18px 50px rgb(0 0 0 / 28%); overflow: hidden;
}
.cm-az-modal__head {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.1rem .7rem; border-bottom: 1px solid var(--cm-border);
}
.cm-az-modal__mark {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  height: 2.4rem; max-width: 8rem; overflow: hidden;
}
.cm-az-modal__mark[hidden] { display: none; }
.md-typeset .cm-az-modal__mark img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  margin: 0; border: 0 !important; box-shadow: none !important;
}
.cm-az-modal__id { flex: 1 1 auto; min-width: 0; }
.cm-az-modal__id h2 { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.cm-az-modal__id p { margin: .2rem 0 0; }
.cm-az-modal__x {
  flex: 0 0 auto; border: 1px solid var(--cm-border); background: transparent;
  color: var(--cm-muted); border-radius: 6px; width: 2rem; height: 2rem;
  font-size: .9rem; line-height: 1; cursor: pointer;
}
.cm-az-modal__x:hover { border-color: var(--cm-crit); color: var(--cm-crit); }

.cm-az-tabs { display: flex; gap: .2rem; padding: 0 1.1rem;
              border-bottom: 1px solid var(--cm-border); }
.cm-az-tab {
  border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--cm-muted); padding: .6rem .95rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cm-az-tab:hover { color: var(--md-accent-fg-color); }
.cm-az-tab.is-active { color: var(--md-accent-fg-color); border-bottom-color: var(--cm-dodger); }
.cm-az-tab:focus-visible { outline: 2px solid var(--cm-dodger); outline-offset: -2px; }

.cm-az-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem; }
.cm-az-panel:focus { outline: none; }
.cm-az-modal__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border-top: 1px solid var(--cm-border); background: var(--cm-surface);
}
.cm-az-modal__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
@media screen and (max-width: 44.9em) {
  .cm-az-modal__panel { height: 100%; border-radius: 0; }
  .cm-az-modal__actions { width: 100%; }
  .cm-az-modal__actions .cm-btn { flex: 1 1 auto; justify-content: center; }
}

/* Report (tab 2) — reads as a document, not a second dashboard -------------- */
.cm-az-report { max-width: 52rem; margin: 0 auto; font-size: .82rem; line-height: 1.6; }
.cm-az-report h2,
.cm-az-report__head h2 { margin: 0; font-size: 1.35rem; font-weight: 700; }
.cm-az-report h3 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700;
                   color: var(--md-accent-fg-color); }
.cm-az-report p { margin: 0 0 .7rem; }
.cm-az-report ul { margin: .5rem 0 0 1.1rem; padding: 0; }
.cm-az-report li { margin: .3rem 0; }
.cm-az-report__head { border-bottom: 3px solid var(--cm-dodger); padding-bottom: .9rem;
                      margin-bottom: 1.4rem; }
.cm-az-report__id { display: flex; flex-wrap: wrap; align-items: center;
                    gap: .4rem 1rem; }
/* The titles take the rest of the row. Without that, the free space beside a
   narrow mark is free for an auto margin to absorb — which is exactly what the
   theme's image centring did, floating the logo into the middle of the header
   and pushing the name to the far right. */
.cm-az-report__titles { flex: 1 1 auto; min-width: 0; }
.md-typeset .cm-az-report__id > img { margin: 0; }
.md-typeset .cm-az-report__logo {
  flex: 0 0 auto; max-height: 3.4rem; max-width: 12rem; width: auto;
  margin: 0; border: 0 !important; box-shadow: none !important;
}
/* The document's own title sits at the far end of the letterhead line, and
   drops under the name only when the row runs out of width. */
.cm-az-report__subtitle {
  flex: 0 1 auto; margin: 0; text-align: right;
  font-size: .95rem; font-weight: 600; color: var(--cm-muted);
}
.cm-az-report__meta { display: grid; grid-template-columns: max-content 1fr;
                      gap: .2rem .9rem; margin: 0; font-size: .74rem; }
.cm-az-report__meta dt { font-weight: 600; color: var(--cm-muted); }
.cm-az-report__meta dd { margin: 0; overflow-wrap: anywhere; }
.cm-az-report__section { margin: 0 0 1.6rem; }
.cm-az-report__section .cm-az-tablewrap { margin-top: .5rem; }
.cm-az-report__foot { border-top: 1px solid var(--cm-border); padding-top: .8rem;
                      font-size: .72rem; color: var(--cm-muted); }

/* Printing -----------------------------------------------------------------
   The report is cloned into #cm-print-root, a direct child of <body>, before
   the print dialog opens. Printing it where it lives cannot work: it sits in a
   fixed-position dialog with its own scrollbox, and a scrollbox does not
   paginate — the browser prints the first page and clips the rest. Hiding the
   rest of the page with `visibility` is no better: hidden boxes still take up
   space, which is what produces blank sheets and rows cut through the middle.
   As a plain block flow, everything below breaks between rows the way a
   document should. */
#cm-print-root { display: none; }

@media print {
  body.cm-az-printing > * { display: none !important; }
  body.cm-az-printing > #cm-print-root { display: block !important; }

  @page { margin: 14mm 12mm; }

  /* The clone inherits whatever theme the reader is in. Paper is white, so
     pin the palette to the light steps — a dark dashboard printed "as seen"
     is a page of ink and an unreadable one. */
  #cm-print-root {
    color: #000; background: #fff;
    --cm-surface: #fff; --cm-chart-surface: #fff; --cm-border: #bbb;
    --cm-muted: #4d5866; --cm-grid: rgb(0 0 0 / 12%);
    --cm-ok: #15803d; --cm-warn: #b45309; --cm-crit: #b91c1c; --cm-nodata: #5b6775;
    /* the status bars are CSS backgrounds, which browsers drop by default */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Dashboard first, report second, each starting a fresh page. */
  .cm-print-part + .cm-print-part { break-before: page; page-break-before: always; }

  /* The theme centres images when printing (margin: 0 auto). On a flex row an
     auto margin swallows all the free space, which shoved the mark into the
     middle of the page and the name against the right edge. */
  #cm-print-root img { margin: 0; }
  #cm-print-root .cm-az-report {
    max-width: none; margin: 0; font-size: 10pt; line-height: 1.5; color: #000;
  }
  /* Page one is the summary — letterhead, the KPI row and both charts — and
     the roster starts on the next page. Everything above is trimmed to fit
     that budget: an A4 page is 269mm of content, and the two charts stacked
     at full width need most of what is left after the heading. They stay
     stacked rather than sitting side by side because an SVG scales its axis
     labels with its width; at half a page the ticks are 5pt and unreadable. */
  #cm-print-root .cm-az-charts { break-after: page; page-break-after: always; }
  #cm-print-root .cm-print-part > .cm-az-report__head {
    margin-bottom: .9rem; padding-bottom: .6rem;
  }
  #cm-print-root .cm-az-report__logo { max-height: 14mm; width: auto; }
  #cm-print-root .cm-az-report__meta { gap: .1rem .8rem; font-size: .68rem;
                                       line-height: 1.4; }
  #cm-print-root .cm-az-kpis {
    gap: .4rem; margin: 0 0 .8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* one row, not two */
  }
  #cm-print-root .cm-az-kpi { padding: .45rem .55rem; break-inside: avoid; }
  #cm-print-root .cm-az-kpi__value { font-size: 1.05rem; }
  #cm-print-root .cm-az-charts { gap: .6rem; margin: 0 0 1rem; }
  #cm-print-root .cm-az-figure { break-inside: avoid; page-break-inside: avoid;
                                 padding: .55rem .7rem .6rem; }
  #cm-print-root .cm-az-figure > figcaption { font-size: .76rem; margin-bottom: .45rem; }
  #cm-print-root .cm-az-figure .cm-az-hint { font-size: .62rem; margin-top: .35rem; }
  /* The column chart is drawn from a 640-unit viewBox: hold it to that width
     and its axis labels print at the size they were designed at, instead of
     being scaled up along with everything else. */
  #cm-print-root .cm-az-svg { max-width: 640px; }
  #cm-print-root .cm-az-bars { max-width: none; gap: .35rem; }
  /* The people table is built for a wide screen: ten columns, a 15rem person
     column and a scrollbox. None of that survives a page, so on paper it
     becomes an ordinary table that fits the width it is given. */
  #cm-print-root .cm-az-table--people { min-width: 0 !important; font-size: 7pt; }
  #cm-print-root .cm-az-table--people th,
  #cm-print-root .cm-az-table--people td {
    min-width: 0 !important; padding: .25em .35em;
  }
  #cm-print-root .cm-az-person { font-weight: 600; overflow-wrap: break-word; }
  #cm-print-root .cm-az-th--reason, #cm-print-root .cm-az-why { display: none; }
  /* Two-word headings wrap onto two lines rather than setting the width of a
     column of three-digit numbers. */
  #cm-print-root .cm-az-sort { white-space: normal; }
  #cm-print-root .cm-az-table--people .cm-az-chip { font-size: 6.5pt; }
  #cm-print-root .cm-az-report__head { break-after: avoid-page; page-break-after: avoid; }
  #cm-print-root h2, #cm-print-root h3 { break-after: avoid-page; page-break-after: avoid; }
  #cm-print-root .cm-az-report__meta,
  #cm-print-root figure, #cm-print-root img { break-inside: avoid; page-break-inside: avoid; }

  /* Sections and tables are free to span pages — only the atoms inside them
     must stay whole, or a long table simply cannot be printed at all. */
  #cm-print-root .cm-az-report__section { break-inside: auto; page-break-inside: auto;
                                          margin-bottom: 8mm; }
  #cm-print-root .cm-az-tablewrap { overflow: visible; border: 0; border-radius: 0;
                                    break-inside: auto; page-break-inside: auto; }
  #cm-print-root table { width: 100%; break-inside: auto; page-break-inside: auto; }
  #cm-print-root thead { display: table-header-group; }   /* repeat the header */
  /* A sticky header is not a header a print engine will repeat — the screen
     rule has to be undone, or every page after the first loses its labels. */
  #cm-print-root .cm-az-table thead th { position: static; }
  #cm-print-root tfoot { display: table-footer-group; }
  #cm-print-root tr, #cm-print-root th, #cm-print-root td {
    break-inside: avoid; page-break-inside: avoid;
  }
  #cm-print-root .cm-az-table { min-width: 0 !important; font-size: 8.5pt;
                                width: 100%; border-collapse: collapse; }
  /* A date split across two lines by a page-width guess reads as broken data. */
  #cm-print-root .cm-az-num { white-space: nowrap; }
  #cm-print-root .cm-az-table th, #cm-print-root .cm-az-table td {
    border-bottom: 1px solid #bbb; padding: .3em .5em;
  }
  #cm-print-root p, #cm-print-root li { orphans: 3; widows: 3; }
  #cm-print-root ul { break-inside: auto; page-break-inside: auto; }
  #cm-print-root .cm-az-report__foot { break-inside: avoid; page-break-inside: avoid;
                                       border-top: 1px solid #bbb; }
}

/* Landscape: a 273mm-wide page changes two answers. The roster's Why column
   fits, so it prints and the note explaining its absence goes; and the two
   charts sit side by side, which is the only way both still share the first
   page when the sheet is only 182mm tall. */
@media print and (orientation: landscape) {
  #cm-print-root .cm-az-th--reason { display: table-cell; }
  #cm-print-root .cm-az-why { display: table-cell; font-size: 6.5pt; }
  #cm-print-root .cm-print-note { display: none; }
  /* Side by side, but not evenly: the status bars only need room for a label
     and a track, while the column chart draws its axis text at a size that
     scales with its width. Give the chart that needs the width the width. */
  #cm-print-root .cm-az-charts {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  #cm-print-root .cm-az-figure { padding: .5rem .55rem .55rem; }
  /* Two facts per line: the sheet is wide and short, so height is what is
     scarce. */
  #cm-print-root .cm-az-report__meta {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  }
}

/* Footnote / legal strip */
.cm-legal {
  margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid var(--cm-border);
  font-size: .72rem; color: var(--cm-muted); line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Usage analyzer (ANALYZER.md) — an in-browser dashboard. Charts sit on their
   own surface so the series and status colours are the exact steps validated
   against #FFFFFF (light) and #181D25 (dark), matching the application.
   -------------------------------------------------------------------------- */
:root {
  --cm-chart-surface: #ffffff;
  --cm-ok: #15803d;
  --cm-warn: #b45309;
  --cm-crit: #b91c1c;
  --cm-nodata: #5b6775;
  --cm-grid: rgb(0 0 0 / 10%);
}
[data-md-color-scheme="slate"] {
  --cm-chart-surface: #181d25;
  --cm-ok: #3daf6e;
  --cm-warn: #d98a16;
  --cm-crit: #e5645b;
  --cm-nodata: #96a3b2;
  --cm-grid: rgb(255 255 255 / 12%);
}

#cm-analyzer { margin-top: .6rem; }
.cm-az-step { margin: 1.6rem 0 2rem; }
.cm-az-step > h2 { margin-top: 1.2rem; }

/* Steps are tabs, not a scroll: one panel at a time, and the action bar that
   ends the flow stays put underneath them. */
.cm-az-steps {
  display: flex; flex-wrap: wrap; gap: .2rem;
  border-bottom: 1px solid var(--cm-border); margin: 1.6rem 0 0;
}
.cm-az-steptab {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--cm-muted); padding: .55rem .9rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cm-az-steptab:hover { color: var(--md-accent-fg-color); }
.cm-az-steptab.is-active { color: var(--md-accent-fg-color); border-bottom-color: var(--cm-dodger); }
.cm-az-steptab:focus-visible { outline: 2px solid var(--cm-dodger); outline-offset: -2px; }
.cm-az-steptab__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: .68rem;
  background: var(--cm-grid); color: var(--cm-muted);
}
.cm-az-steptab.is-active .cm-az-steptab__n { background: var(--cm-dodger-fill); color: #fff; }
.md-typeset .cm-az-step[role="tabpanel"] { margin: 1.3rem 0 0; }
.cm-az-step[role="tabpanel"]:focus { outline: none; }
.md-typeset .cm-az-step[role="tabpanel"] > h2 { margin-top: 0; font-size: 1.25rem; }

.cm-az-actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  margin: 1.6rem 0 2rem; padding: .9rem 1rem;
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
  background: var(--cm-surface);
}
.cm-az-actionbar .cm-az-hint { margin: 0; }
.cm-az-actionbar__right { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.cm-btn--sm { font-size: .72rem; padding: .45em .9em; }
.cm-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.cm-az-link {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--md-accent-fg-color); text-decoration: underline; cursor: pointer;
}
.cm-az-link:focus-visible { outline: 2px solid var(--cm-dodger); outline-offset: 2px; }
.cm-az-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; }

/* Company logo picker */
.cm-az-logo { display: flex; align-items: center; gap: .7rem; }
.cm-az-logo__box {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 5.2rem; height: 3.2rem; padding: .25rem;
  border: 1px dashed var(--cm-border); border-radius: 6px;
  background: var(--cm-surface); overflow: hidden;
}
.md-typeset .cm-az-logo__box img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  margin: 0; border: 0 !important; box-shadow: none !important;
}
.cm-az-logo__empty { font-size: .62rem; color: var(--cm-muted); text-align: center; line-height: 1.3; }
.cm-az-logo__btns { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.cm-az-banner {
  border: 1px solid var(--cm-warn); border-left: 3px solid var(--cm-warn);
  border-radius: 6px; padding: .6rem .8rem; font-size: .78rem;
  background: color-mix(in srgb, var(--cm-warn) 8%, transparent);
  margin: 0 0 1rem;
}
.cm-az-hint { font-size: .74rem; color: var(--cm-muted); line-height: 1.55; margin: .5rem 0 0; }

/* Drop zone */
.cm-az-drop {
  border: 2px dashed var(--cm-border);
  border-radius: var(--cm-radius);
  background: var(--cm-surface);
  padding: 2rem 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cm-az-drop:hover, .cm-az-drop:focus-visible, .cm-az-drop.is-over {
  border-color: var(--cm-dodger);
  background: color-mix(in srgb, var(--cm-dodger) 6%, var(--cm-surface));
  outline: none;
}
.cm-az-drop__icon { font-size: 1.6rem; color: var(--cm-dodger); line-height: 1; }
.cm-az-drop__title { font-weight: 600; margin-top: .5rem; font-size: .9rem; }
.cm-az-drop__hint { font-size: .74rem; color: var(--cm-muted); margin-top: .3rem; }

.cm-az-status { font-size: .76rem; margin: .7rem 0 0; color: var(--cm-muted); }
.cm-az-status.is-ok { color: var(--cm-ok); }
.cm-az-status.is-warn { color: var(--cm-warn); }

.cm-az-files { list-style: none; margin: .6rem 0 0; padding: 0; }
.md-typeset .cm-az-files li { margin: 0 0 .35rem; }
.cm-az-file {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  border: 1px solid var(--cm-border); border-left: 3px solid var(--cm-ok);
  border-radius: 6px; padding: .5rem .7rem; background: var(--cm-surface);
  font-size: .76rem;
}
.cm-az-file.is-error { border-left-color: var(--cm-crit); }
.cm-az-file__name { font-weight: 600; }
.cm-az-file__note { color: var(--cm-muted); flex: 1 1 16rem; word-break: break-word; }
.cm-az-file__x {
  border: 1px solid var(--cm-border); border-radius: 5px; background: transparent;
  color: var(--cm-muted); font: inherit; font-size: .72rem; padding: .1rem .5rem; cursor: pointer;
}
.cm-az-file__x:hover { border-color: var(--cm-crit); color: var(--cm-crit); }

/* Criteria form */
.cm-az-fields {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin: 1rem 0;
}
.cm-az-field { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; }
.cm-az-field > span:first-child { font-weight: 600; }
.cm-az-field small { color: var(--cm-muted); font-size: .7rem; line-height: 1.45; }
.cm-az-field--actions { justify-content: flex-end; gap: .5rem; }
.cm-az-field--wide { grid-column: 1 / -1; }
@media screen and (min-width: 50em) { .cm-az-field--wide { grid-column: span 2; } }
.cm-az-input { display: flex; align-items: center; gap: .4rem; }
.cm-az-input em { font-style: normal; color: var(--cm-muted); font-size: .72rem; }
.cm-az-input input, .cm-az-toolbar input, .cm-az-toolbar select, .cm-az-mini {
  border: 1px solid var(--cm-border); border-radius: 6px;
  background: var(--cm-surface); color: inherit;
  font: inherit; font-size: .8rem; padding: .35rem .5rem; width: 100%;
}
.cm-az-input input:focus, .cm-az-toolbar input:focus,
.cm-az-toolbar select:focus, .cm-az-mini:focus {
  outline: 2px solid var(--cm-dodger); outline-offset: 1px; border-color: var(--cm-dodger);
}
.cm-az-mini { width: 6rem; }

/* The Warning band has no control of its own — it is whatever the two
   thresholds leave between them. A dashed edge says "computed, not typed",
   and the tint ties it to the band it names. */
.cm-az-band {
  display: inline-flex; align-items: center;
  min-height: 2.05rem; padding: .35rem .65rem;
  border: 1px dashed var(--cm-border); border-radius: 6px;
  background: color-mix(in srgb, var(--cm-warn) 9%, transparent);
  color: var(--cm-warn); font-size: .8rem; font-weight: 600;
}

.cm-az-check {
  display: flex; align-items: flex-start; gap: .45rem;
  font-weight: 600; cursor: pointer; margin-top: .25rem;
}
.cm-az-check input[type="checkbox"] {
  flex: 0 0 auto; width: 1rem; height: 1rem; margin: .12rem 0 0;
  accent-color: var(--cm-dodger); cursor: pointer;
}
.cm-az-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cm-dodger); outline-offset: 2px;
}

.cm-az-policy { margin-top: 1rem; }
.cm-az-policy > summary { font-weight: 600; font-size: .82rem; cursor: pointer; }

/* KPI row */
.cm-az-kpis {
  display: grid; gap: .7rem; margin: 1rem 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
@media screen and (min-width: 90em) {
  .cm-az-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 96rem; }
}
.cm-az-kpi {
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
  background: var(--cm-surface); padding: .8rem .9rem;
}
.cm-az-kpi__label { font-size: .7rem; color: var(--cm-muted); text-transform: none; }
.cm-az-kpi__value { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-top: .15rem; }
.cm-az-kpi__sub { font-size: .68rem; color: var(--cm-muted); margin-top: .15rem; }

/* Charts */
.cm-az-charts {
  display: grid; gap: 1rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.md-typeset .cm-az-figure {
  display: flex; flex-direction: column;
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
  background: var(--cm-chart-surface); padding: .9rem 1rem 1rem; margin: 0;
}
/* Cards in a row share a height; the shorter chart centres in its own space
   rather than sitting above a block of nothing. */
.md-typeset .cm-az-figure > .cm-az-bars { flex: 1 1 auto; justify-content: center; }
.md-typeset .cm-az-figure > figcaption {
  font-size: .82rem; font-weight: 600; margin: 0 0 .7rem; text-align: left;
}
.cm-az-svg { width: 100%; max-width: 46rem; height: auto; display: block; }
.cm-az-grid { stroke: var(--cm-grid); stroke-width: 1; }
.cm-az-axis { stroke: var(--cm-grid); stroke-width: 1; }
.cm-az-tick { fill: var(--cm-muted); font-size: 10px; }
.cm-az-value { fill: var(--md-default-fg-color); font-size: 10px; font-weight: 600; }
.cm-az-col { transition: opacity .12s ease; }
.cm-az-col:hover { opacity: .82; }

/* Status bars */
.cm-az-bars { display: flex; flex-direction: column; gap: .5rem; max-width: 46rem; }
.cm-az-bar {
  display: grid; grid-template-columns: 8.5rem 1fr 2.5rem;
  align-items: center; gap: .6rem; border-radius: 6px;
}
.cm-az-bar:focus-visible { outline: 2px solid var(--cm-dodger); outline-offset: 2px; }
.cm-az-bar__track { background: var(--cm-grid); border-radius: 4px; height: 14px; }
.cm-az-bar__fill { height: 100%; border-radius: 4px; min-width: 2px; }
.cm-az-bar__value { text-align: right; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 32em) {
  .cm-az-bar { grid-template-columns: 7rem 1fr 2rem; gap: .4rem; }
}

.cm-az-fill--ok { background: var(--cm-ok); fill: var(--cm-ok); }
.cm-az-fill--warn { background: var(--cm-warn); fill: var(--cm-warn); }
.cm-az-fill--crit { background: var(--cm-crit); fill: var(--cm-crit); }
.cm-az-fill--nodata { background: var(--cm-nodata); fill: var(--cm-nodata); }

/* Status chips — icon + label, so colour is never the only channel */
.cm-az-chip {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.cm-az-chip--ok { color: var(--cm-ok); }
.cm-az-chip--warn { color: var(--cm-warn); }
.cm-az-chip--crit { color: var(--cm-crit); }
.cm-az-chip--nodata { color: var(--cm-nodata); }

/* Toolbar + people table */
.cm-az-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.2rem 0 .6rem;
}
.cm-az-toolbar input[type="search"] { flex: 1 1 12rem; width: auto; }
.cm-az-toolbar select { flex: 0 1 10rem; width: auto; }
.cm-az-toolbar .cm-btn { margin-left: auto; }

.cm-az-tablewrap { overflow-x: auto; border: 1px solid var(--cm-border); border-radius: var(--cm-radius); }
.md-typeset .cm-az-table { width: 100%; border-collapse: collapse; font-size: .76rem; margin: 0; }
.md-typeset .cm-az-table th, .md-typeset .cm-az-table td {
  padding: .45em .7em; text-align: left; border-bottom: 1px solid var(--cm-border);
  vertical-align: top;
}
.md-typeset .cm-az-table thead th {
  background: var(--cm-surface); position: sticky; top: 0; z-index: 1;
  font-weight: 600; white-space: nowrap;
}
.md-typeset .cm-az-table tbody tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--cm-dodger) 4%, transparent);
}
.md-typeset .cm-az-table tr.is-unavailable { opacity: .55; }
.cm-az-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-az-why { color: var(--cm-muted); min-width: 11rem; }
.cm-az-availability { color: var(--cm-muted); font-size: .7rem; }
.cm-az-person { display: block; font-weight: 600; overflow-wrap: anywhere; }
.cm-az-person__sub { display: block; color: var(--cm-muted); font-size: .7rem; }
.cm-az-sort {
  background: none; border: 0; font: inherit; font-weight: 600; color: inherit;
  cursor: pointer; padding: 0;
}
.cm-az-sort:hover { color: var(--md-accent-fg-color); }
.md-typeset .cm-az-table--people { min-width: 48rem; }
.md-typeset .cm-az-table--people td:first-child,
.md-typeset .cm-az-table--people th:first-child { min-width: 15rem; }

@media print {
  .cm-az-drop, .cm-az-toolbar, .cm-az-files, .cm-az-policy,
  .cm-az-steps, .cm-az-actionbar { display: none !important; }
  .md-typeset .cm-az-table--people { min-width: 0; }
}

/* Navigation & chrome ------------------------------------------------------ */
.md-header { box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }

/* Brand mark: larger than the theme's 1.2rem, and lifted with a drop-shadow
   rather than a box-shadow — the icon is a transparent PNG, so shadowing the
   box would draw a rectangle behind a round mark. */
.md-header__button.md-logo { margin: .2rem; padding: .15rem .35rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.85rem; width: auto;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 42%));
}
.md-nav__title .md-nav__button.md-logo img,
.md-nav__title .md-nav__button.md-logo svg {
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 28%));
}
.md-nav__title { font-weight: 600; }
.md-footer-meta { font-size: .72rem; }

/* Code blocks: tighter on phones so lines wrap less often */
@media screen and (max-width: 44.9em) {
  .md-typeset pre > code { font-size: .72rem; }
  .md-typeset .admonition, .md-typeset details { font-size: .74rem; }
  .cm-btn { width: 100%; justify-content: center; }
}

/* Print: a clean, ink-light handout ---------------------------------------- */
@media print {
  .md-header, .md-sidebar, .md-footer, .cm-actions, .md-typeset__scrollwrap::after { display: none !important; }
  .md-grid, .md-main__inner { max-width: none; margin: 0; }
  .md-typeset table:not([class]) th { background: #eee !important; color: #000 !important; }
  .md-typeset a { color: inherit !important; text-decoration: none !important; }
  .md-typeset img { break-inside: avoid; }
  .cm-card { break-inside: avoid; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .cm-btn, .cm-card { transition: none !important; }
  .cm-btn:hover, .cm-card:hover { transform: none !important; }
}

/* Card icons are Material SVG icons (consistent across every platform,
   unlike emoji which each OS draws differently). */
.cm-card .cm-icon svg,
.md-typeset .cm-icon svg { width: 1.35rem; height: 1.35rem; fill: var(--cm-dodger); }
.cm-card .cm-icon { display: block; margin-bottom: .5rem; line-height: 1; }

/* Close the gap between the page title and the hero copy (Material's h1
   margin plus the hero padding left a dead band above the fold). */
.md-typeset h1 + .cm-hero { padding-top: .2rem; }
.md-typeset .cm-hero > div > :first-child { margin-top: 0; }
.md-typeset .cm-hero h1 { margin-top: 0; }