/* ==========================================================================
   anchor.css — design system for Anchor
   MCOL Holdings · v1.0 · 2026-08-28

   Framework-neutral. Every class is prefixed `a-` so it cannot collide with
   existing styles; adopt it one page at a time.

   Structure:
     1. Tokens (light) ............ :root
     2. Tokens (dark) ............. system preference + explicit [data-theme]
     3. Base & typography
     4. Layout
     5. Cards & panels
     6. Stat tiles
     7. Tables
     8. Buttons & segmented controls
     9. Forms
    10. Badges & status
    11. Bars, meters, callouts
    12. Popovers & date range
    13. Calendar
    14. Charts
    15. Icons
    16. Utilities

   Dark mode: three states. Bare :root is the complete light palette. The
   media query covers viewers on "system". The [data-theme] blocks let an
   explicit toggle win either direction. NEVER define a color only inside a
   media query — that is how a page ends up light text on a light ground.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Self-hosted faces — IBM Plex Serif (headings) + IBM Plex Mono (figures).
   Inter (body) is loaded by base.html. Drop the woff2 files into static/fonts/
   (see static/fonts/README.md). font-display:swap + the Georgia / ui-monospace
   fallbacks in --a-font-* mean a missing file degrades gracefully, never blocks.
   -------------------------------------------------------------------------- */
@font-face{ font-family:"IBM Plex Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexSerif-Regular.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Serif"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexSerif-Medium.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Serif"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/IBMPlexSerif-SemiBold.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   1. Tokens — light
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces. Neutrals carry a slight cool bias so they sit with Anchor's navy
     rather than reading as generic grey. */
  --a-ground:        #F5F6F8;
  --a-surface:       #FFFFFF;
  --a-surface-2:     #EEF0F4;
  --a-surface-3:     #E4E7ED;

  /* Ink */
  --a-ink:           #1A2028;
  --a-ink-2:         #5A6472;
  --a-ink-3:         #8A93A1;
  --a-ink-inverse:   #FFFFFF;

  /* Rules */
  --a-line:          #E2E5EA;
  --a-line-2:        #CBD0D8;

  /* Accent — Anchor navy, carried over from style.css --primary-color.
     Hover is the existing --secondary-color (ocean blue). */
  --a-accent:        #1A365D;
  --a-accent-hover:  #2C5282;
  --a-accent-ink:    #1A365D;   /* accent-colored text on light surfaces */
  --a-accent-wash:   rgba(26,54,93,.09);

  /* Status — reserved. Never reuse these as decorative or series colors.
     Deliberately muted versions of the Bootstrap-era semantics in style.css. */
  --a-good:          #2E6B58;
  --a-good-ink:      #245544;
  --a-good-wash:     rgba(46,107,88,.10);
  --a-warn:          #B07A24;
  --a-warn-ink:      #8E6118;
  --a-warn-wash:     rgba(176,122,36,.12);
  --a-critical:      #A6462E;
  --a-critical-ink:  #8E3A24;
  --a-critical-wash: rgba(166,70,46,.10);
  --a-info:          #1F6E75;
  --a-info-ink:      #185A60;
  --a-info-wash:     rgba(31,110,117,.10);

  /* Categorical — strain type. The one place the system carries category colour,
     because these three are a fixed, domain-meaningful set that staff scan for.
     Every use MUST also print the word (the badge does), so the colour is
     reinforcement and never the sole carrier. Do not extend this into a general
     "pick a hue per category" palette. */
  --a-strain-hybrid: #A56A89;
  --a-strain-indica: #4694A1;
  --a-strain-sativa: #CEAF21;

  /* Focus */
  --a-focus:         #B07A24;

  /* Type — Inter stays the body face (Anchor already loads it). The serif
     display face supplies the contrast; every figure is mono. */
  --a-font-display:  "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --a-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --a-font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --a-text-xs:       11px;
  --a-text-sm:       13px;
  --a-text-base:     15px;
  --a-text-md:       17px;
  --a-text-lg:       20px;
  --a-text-xl:       25px;
  --a-text-2xl:      32px;
  --a-text-3xl:      40px;

  /* Space — 4px base */
  --a-space-1:       4px;
  --a-space-2:       8px;
  --a-space-3:       12px;
  --a-space-4:       16px;
  --a-space-5:       22px;
  --a-space-6:       30px;
  --a-space-7:       40px;
  --a-space-8:       56px;

  /* Shape */
  --a-radius-sm:     4px;
  --a-radius:        6px;
  --a-radius-lg:     10px;
  --a-radius-pill:   999px;

  /* Elevation */
  --a-shadow-sm:     0 1px 2px rgba(26,32,40,.05);
  --a-shadow:        0 1px 2px rgba(26,32,40,.05), 0 8px 24px rgba(26,32,40,.05);
  --a-shadow-lg:     0 2px 4px rgba(26,32,40,.06), 0 16px 40px rgba(26,32,40,.10);

  --a-maxw:          1180px;
}

/* --------------------------------------------------------------------------
   2. Tokens — dark
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --a-ground:        #101419;
    --a-surface:       #181D24;
    --a-surface-2:     #202730;
    --a-surface-3:     #29313B;

    --a-ink:           #E8ECF2;
    --a-ink-2:         #9AA4B2;
    --a-ink-3:         #757E8B;
    --a-ink-inverse:   #0C1016;

    --a-line:          #29313A;
    --a-line-2:        #38414C;

    /* Navy cannot carry an accent on a dark ground — this is the same hue
       stepped light enough to read, not an inversion. */
    --a-accent:        #7BA7D9;
    --a-accent-hover:  #93B9E4;
    --a-accent-ink:    #A6C6E8;
    --a-accent-wash:   rgba(123,167,217,.14);

    --a-good:          #57A98F;
    --a-good-ink:      #8FCDB6;
    --a-good-wash:     rgba(87,169,143,.14);
    --a-warn:          #D8A64A;
    --a-warn-ink:      #E6C081;
    --a-warn-wash:     rgba(216,166,74,.16);
    --a-critical:      #CF6B4C;
    --a-critical-ink:  #E59274;
    --a-critical-wash: rgba(207,107,76,.16);
    --a-info:          #6FB5BC;
    --a-info-ink:      #96CBD0;
    --a-info-wash:     rgba(111,181,188,.14);

    --a-strain-hybrid: #C48FAB;
    --a-strain-indica: #6FB6C4;
    --a-strain-sativa: #D8C24A;

    --a-focus:         #D8A64A;

    --a-shadow-sm:     0 1px 2px rgba(0,0,0,.30);
    --a-shadow:        0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.25);
    --a-shadow-lg:     0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"]{
  --a-ground:        #101419;
  --a-surface:       #181D24;
  --a-surface-2:     #202730;
  --a-surface-3:     #29313B;

  --a-ink:           #E8ECF2;
  --a-ink-2:         #9AA4B2;
  --a-ink-3:         #757E8B;
  --a-ink-inverse:   #0C1016;

  --a-line:          #29313A;
  --a-line-2:        #38414C;

  /* Navy cannot carry an accent on a dark ground — this is the same hue
     stepped light enough to read, not an inversion. */
  --a-accent:        #7BA7D9;
  --a-accent-hover:  #93B9E4;
  --a-accent-ink:    #A6C6E8;
  --a-accent-wash:   rgba(123,167,217,.14);

  --a-good:          #57A98F;
  --a-good-ink:      #8FCDB6;
  --a-good-wash:     rgba(87,169,143,.14);
  --a-warn:          #D8A64A;
  --a-warn-ink:      #E6C081;
  --a-warn-wash:     rgba(216,166,74,.16);
  --a-critical:      #CF6B4C;
  --a-critical-ink:  #E59274;
  --a-critical-wash: rgba(207,107,76,.16);
  --a-info:          #6FB5BC;
  --a-info-ink:      #96CBD0;
  --a-info-wash:     rgba(111,181,188,.14);

  --a-strain-hybrid: #C48FAB;
  --a-strain-indica: #6FB6C4;
  --a-strain-sativa: #D8C24A;

  --a-focus:         #D8A64A;

  --a-shadow-sm:     0 1px 2px rgba(0,0,0,.30);
  --a-shadow:        0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.25);
  --a-shadow-lg:     0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   3. Base & typography
   -------------------------------------------------------------------------- */
.a-root *,
.a-root *::before,
.a-root *::after{ box-sizing:border-box }

/* Apply .a-root to <body> (or to a wrapper, for incremental adoption). */
.a-root{
  margin:0;
  background:var(--a-ground);
  color:var(--a-ink);
  font-family:var(--a-font-body);
  font-size:var(--a-text-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.a-h1,.a-h2,.a-h3,.a-h4{
  font-family:var(--a-font-display);
  color:var(--a-ink);
  margin:0;
  text-wrap:balance;
  letter-spacing:-.01em;
}
.a-h1{ font-size:var(--a-text-3xl); font-weight:500; line-height:1.1 }
.a-h2{ font-size:var(--a-text-xl);  font-weight:500; line-height:1.2 }
.a-h3{ font-size:var(--a-text-md);  font-weight:600; line-height:1.3 }
.a-h4{ font-size:var(--a-text-base);font-weight:600; line-height:1.35 }

/* Uppercase micro-label. Used for stat keys, table heads, eyebrows. */
.a-label{
  font-family:var(--a-font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--a-ink-3);
  font-weight:500;
}
.a-eyebrow{
  font-family:var(--a-font-mono);
  font-size:var(--a-text-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--a-ink-3);
  margin:0 0 var(--a-space-3);
}
.a-lede{ color:var(--a-ink-2); max-width:64ch; margin:0 }
.a-prose{ max-width:68ch }
.a-prose p{ margin:0 0 var(--a-space-4) }

/* Every figure in the app wears this. Non-negotiable — columns of digits that
   do not line up read as sloppy bookkeeping. */
.a-num{
  font-family:var(--a-font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.a-link{ color:var(--a-accent-ink); text-decoration:underline; text-underline-offset:2px }
.a-link:hover{ color:var(--a-accent) }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.a-page{ max-width:var(--a-maxw); margin:0 auto; padding:var(--a-space-7) var(--a-space-5) var(--a-space-8) }
.a-page--wide{ max-width:1440px }

.a-masthead{
  border-bottom:1px solid var(--a-line-2);
  padding-bottom:var(--a-space-5);
  margin-bottom:var(--a-space-6);
}

.a-stack{ display:flex; flex-direction:column; gap:var(--a-space-4) }
.a-stack--tight{ gap:var(--a-space-2) }
.a-stack--loose{ gap:var(--a-space-6) }

.a-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--a-space-4) }
.a-row--between{ justify-content:space-between }
.a-row--baseline{ align-items:baseline }
.a-row--tight{ gap:var(--a-space-2) }        /* a label and its control */
.a-row--bottom{ align-items:flex-end }      /* controls of unequal height sit on one baseline */
.a-row--loose{ gap:var(--a-space-4) var(--a-space-6) }  /* a bar of separate controls */

.a-grid{ display:grid; gap:var(--a-space-5) }
.a-grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
/* auto-fill, not auto-fit: a section holding one card should leave the other
   columns empty rather than stretching that card across the whole page. */
.a-grid--3{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
.a-grid--main-side{ grid-template-columns:minmax(0,1fr) 320px; align-items:start }
@media (max-width:900px){ .a-grid--main-side{ grid-template-columns:minmax(0,1fr) } }

/* --------------------------------------------------------------------------
   5. Cards & panels
   -------------------------------------------------------------------------- */
.a-card{
  background:var(--a-surface);
  border:1px solid var(--a-line);
  border-radius:var(--a-radius);
  box-shadow:var(--a-shadow);
  overflow:hidden;
}
.a-card__head{
  padding:var(--a-space-4) var(--a-space-5);
  border-bottom:1px solid var(--a-line);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--a-space-4);
  flex-wrap:wrap;
}
.a-card__body{ padding:var(--a-space-5) }
.a-card__body--flush{ padding:0 }
/* .a-card clips to its rounded corners, which also clips any popover opened
   inside it. Use this on a card that contains a dropdown or date picker. */
.a-card--popover{ overflow:visible }
.a-card__foot{
  padding:var(--a-space-3) var(--a-space-5);
  border-top:1px solid var(--a-line);
  background:var(--a-surface-2);
  font-size:var(--a-text-sm);
  color:var(--a-ink-2);
}

/* A whole card that is a link — a menu of destinations, like the reports index.
   It lifts on hover and keeps a visible focus ring, so it reads as a control
   rather than a box that happens to be clickable. Deliberately uncoloured: the
   heading above a group does the grouping, and a decorative accent per card
   would be colour carrying no meaning. */
.a-cardlink{
  display:block; text-decoration:none; color:inherit;
  background:var(--a-surface);
  border:1px solid var(--a-line); border-left:3px solid var(--a-line-2);
  border-radius:var(--a-radius);
  padding:var(--a-space-4) var(--a-space-5);
  box-shadow:var(--a-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.a-cardlink:hover{
  transform:translateY(-2px);
  box-shadow:var(--a-shadow);
  border-left-color:var(--a-accent);
}
.a-cardlink:focus-visible{ outline:2px solid var(--a-focus); outline-offset:2px }
.a-cardlink__title{
  font-family:var(--a-font-display); font-size:var(--a-text-md); font-weight:600;
  color:var(--a-ink); margin:0 0 var(--a-space-1);
}
.a-cardlink__note{ font-size:var(--a-text-sm); color:var(--a-ink-2); margin:0; line-height:1.4 }

/* Sticky detail panel — the pattern from the AR calendar. */
.a-panel{
  background:var(--a-surface);
  border:1px solid var(--a-line);
  border-radius:var(--a-radius);
  box-shadow:var(--a-shadow);
  position:sticky; top:var(--a-space-4);
  max-height:calc(100vh - 2 * var(--a-space-4));
  display:flex; flex-direction:column; overflow:hidden;
}
.a-panel__head{ padding:var(--a-space-4); border-bottom:1px solid var(--a-line) }
.a-panel__head .a-label{ display:block; margin-bottom:6px }
.a-panel__title{ font-family:var(--a-font-display); font-size:var(--a-text-lg); font-weight:500 }
.a-panel__figure{
  font-family:var(--a-font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--a-text-lg); font-weight:500; margin-top:var(--a-space-1);
}
.a-panel__body{ overflow-y:auto; padding:var(--a-space-1) 0 }

/* Row inside a panel or flush card body. */
.a-item{
  display:flex; justify-content:space-between; gap:var(--a-space-3);
  padding:var(--a-space-2) var(--a-space-4);
  border-bottom:1px solid var(--a-line);
}
.a-item:last-child{ border-bottom:0 }
.a-item__name{ font-size:var(--a-text-sm); line-height:1.3 }
.a-item__meta{ font-family:var(--a-font-mono); font-size:10.5px; color:var(--a-ink-3); margin-top:2px }
.a-item__value{
  font-family:var(--a-font-mono); font-size:var(--a-text-sm);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* --------------------------------------------------------------------------
   6. Stat tiles
   Hairline-separated group; 1px gap over a --a-line background makes the
   dividers without per-tile borders doubling up.
   -------------------------------------------------------------------------- */
.a-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--a-line);
  border:1px solid var(--a-line);
  border-radius:var(--a-radius);
  overflow:hidden;
}
.a-stat{ background:var(--a-surface); padding:var(--a-space-4) var(--a-space-4) }
.a-stat__key{
  font-family:var(--a-font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--a-ink-3); margin-bottom:7px;
}
.a-stat__value{
  font-family:var(--a-font-mono); font-size:var(--a-text-xl); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1;
}
.a-stat__note{ font-size:12.5px; color:var(--a-ink-2); margin-top:5px }
/* A single headline figure — the one number a page exists to show. */
.a-stat--lead .a-stat__value{ font-size:var(--a-text-3xl) }
.a-stat--good     .a-stat__value{ color:var(--a-good-ink) }
.a-stat--warn     .a-stat__value{ color:var(--a-warn-ink) }
.a-stat--critical .a-stat__value{ color:var(--a-critical-ink) }

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */
.a-tablewrap{ width:100%; overflow-x:auto }   /* wide tables scroll, pages don't */

.a-table{ width:100%; border-collapse:collapse; font-size:var(--a-text-sm) }
.a-table th{
  font-family:var(--a-font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--a-ink-3); font-weight:500;
  text-align:left; padding:var(--a-space-2) var(--a-space-3);
  border-bottom:1px solid var(--a-line-2); white-space:nowrap;
}
.a-table td{
  padding:var(--a-space-2) var(--a-space-3);
  border-bottom:1px solid var(--a-line);
  vertical-align:top;
}
.a-table tbody tr:last-child td{ border-bottom:0 }
.a-table tbody tr:hover td{ background:var(--a-surface-2) }

/* A row whose whole line carries a state — an alert list, an exception report.
   Declared after the hover rule so a flagged row keeps its colour on hover.
   Status is never colour alone: these rows must also print the state in words
   (a badge in the row), or the meaning vanishes on a mono printout. */
.a-table tbody tr.a-t-warn td    { background:var(--a-warn-wash) }
.a-table tbody tr.a-t-critical td{ background:var(--a-critical-wash) }
.a-table tbody tr.a-t-warn:hover td    { background:color-mix(in srgb, var(--a-warn) 18%, var(--a-surface)) }
.a-table tbody tr.a-t-critical:hover td{ background:color-mix(in srgb, var(--a-critical) 18%, var(--a-surface)) }

/* Numeric columns: right-align the header and the cell together. */
.a-table .a-t-num,
.a-table th.a-t-num{
  text-align:right;
  font-family:var(--a-font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.a-table--total tbody tr:last-child td{ font-weight:600; border-top:1px solid var(--a-line-2) }
.a-table--compact td,.a-table--compact th{ padding:6px var(--a-space-2) }

/* A <tfoot> total row — the line the eye lands on last. Use this rather than
   --total when the total is a real <tfoot>, so it survives client-side sorting
   of the tbody. */
.a-table tfoot td{ font-weight:600; border-top:1px solid var(--a-line-2); border-bottom:0 }

/* Click-to-sort headers. The affordance is the point: every sortable column
   shows the neutral glyph at rest, so it is discoverable without hovering.
   Pair with aria-sort on the active th for screen readers. */
.a-table--sortable th{ cursor:pointer; user-select:none }
.a-table--sortable th:hover{ background:var(--a-surface-2); color:var(--a-ink-2) }
.a-table--sortable th:focus-visible{ outline:2px solid var(--a-focus); outline-offset:-2px }
/* Inline, not absolutely positioned: the glyph has to sit next to its label, or
   on a wide left-aligned column it drifts to the far edge and reads as unrelated.
   Inline also puts it in the right place on a right-aligned numeric header. */
.a-table--sortable th::after{
  content:'\00A0\21C5'; color:var(--a-ink-3); font-size:11px; font-weight:400;
}
/* Server-rendered sort headers: the page reloads with ?sort=&order= and prints
   the arrow itself as text. This supplies only the affordance — never combine it
   with .a-table--sortable, whose ::after glyph would give you two arrows. */
.a-table th.a-t-sort{ cursor:pointer; user-select:none }
.a-table th.a-t-sort:hover{ background:var(--a-surface-2); color:var(--a-ink-2) }
.a-t-sort__ind{ margin-left:var(--a-space-2); color:var(--a-ink-3) }
.a-t-sort__ind--on{ color:var(--a-accent-ink); font-weight:600 }

.a-table--sortable th.a-sort-asc::after { content:'\00A0\2191'; color:var(--a-accent-ink) }
.a-table--sortable th.a-sort-desc::after{ content:'\00A0\2193'; color:var(--a-accent-ink) }

.a-table__sticky thead th{
  position:sticky; top:0; background:var(--a-surface); z-index:1;
}

/* A group/subtotal band inside a table — a brand, a category, a month.
   The band takes its accent from data, not from the stylesheet: set
   --a-group-accent inline from the record (a brand color, say) and it tints
   itself. Left unset it falls back to a neutral rule, so a group with no color
   still reads as a band. */
.a-table__group{ --a-group-accent:var(--a-line-2) }
.a-table__group td{
  background:color-mix(in srgb, var(--a-group-accent) 12%, var(--a-surface));
  font-weight:600; color:var(--a-ink);
}
.a-table__group td:first-child{ box-shadow:inset 3px 0 0 var(--a-group-accent) }

/* Child rows sitting under a group band. */
.a-table .a-t-indent{ padding-left:var(--a-space-6) }

/* A quieter second line under a cell's main value (an item's type, a subtitle). */
.a-table .a-t-sub{ font-size:12px; color:var(--a-ink-3); margin-top:2px }

/* --------------------------------------------------------------------------
   8. Buttons & segmented controls
   -------------------------------------------------------------------------- */
.a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--a-space-2);
  font-family:var(--a-font-body); font-size:var(--a-text-sm); font-weight:500;
  padding:8px 14px; border-radius:var(--a-radius-sm); cursor:pointer;
  border:1px solid var(--a-line-2); background:var(--a-surface); color:var(--a-ink);
  transition:background .12s, border-color .12s, color .12s;
  text-decoration:none; line-height:1.2;
}
.a-btn:hover{ background:var(--a-surface-2) }
.a-btn:focus-visible{ outline:2px solid var(--a-focus); outline-offset:2px }
.a-btn:disabled,.a-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }

/* Text on a filled accent uses --a-ink-inverse, not a hardcoded white: the dark
   theme's accent is light, and white-on-light-green fails contrast. */
.a-btn--primary{ background:var(--a-accent); border-color:var(--a-accent); color:var(--a-ink-inverse) }
.a-btn--primary:hover{ background:var(--a-accent-hover); border-color:var(--a-accent-hover) }
.a-btn--ghost{ background:transparent; border-color:transparent; color:var(--a-ink-2) }
.a-btn--ghost:hover{ background:var(--a-surface-2); color:var(--a-ink) }
.a-btn--danger{ background:var(--a-critical); border-color:var(--a-critical); color:var(--a-ink-inverse) }
.a-btn--danger:hover{ filter:brightness(1.08) }
.a-btn--sm{ font-size:12.5px; padding:5px 10px }
.a-btn--block{ width:100% }
.a-btn--lg{ font-size:var(--a-text-base); padding:11px 20px }

/* Segmented control — mutually exclusive view switches, not actions.
   Mark the active one with aria-pressed="true". */
.a-seg{ display:inline-flex; border:1px solid var(--a-line-2); border-radius:5px; overflow:hidden }
.a-seg button{
  appearance:none; border:0; border-right:1px solid var(--a-line-2);
  background:var(--a-surface); color:var(--a-ink-2);
  font-family:var(--a-font-mono); font-size:12.5px; padding:6px 11px; cursor:pointer;
  transition:background .12s, color .12s;
}
.a-seg button:last-child{ border-right:0 }
.a-seg button:hover{ background:var(--a-surface-2); color:var(--a-ink) }
.a-seg button[aria-pressed="true"]{ background:var(--a-accent); color:var(--a-ink-inverse) }
.a-seg button:focus-visible{ outline:2px solid var(--a-focus); outline-offset:-2px }

/* Segments can be links, when each view has its own URL rather than being a
   client-side toggle. Mark the current one with aria-current="page" — the link
   equivalent of aria-pressed, and what a screen reader announces. */
.a-seg a{
  display:inline-flex; align-items:center; text-decoration:none;
  border-right:1px solid var(--a-line-2);
  background:var(--a-surface); color:var(--a-ink-2);
  font-family:var(--a-font-mono); font-size:12.5px; padding:6px 11px;
  transition:background .12s, color .12s;
}
.a-seg a:last-child{ border-right:0 }
.a-seg a:hover{ background:var(--a-surface-2); color:var(--a-ink) }
.a-seg a[aria-current="page"]{ background:var(--a-accent); color:var(--a-ink-inverse) }
.a-seg a:focus-visible{ outline:2px solid var(--a-focus); outline-offset:-2px }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.a-field{ display:flex; flex-direction:column; gap:6px }
.a-field__label{
  font-family:var(--a-font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--a-ink-3);
}
.a-field__hint{ font-size:12.5px; color:var(--a-ink-3) }
.a-field__error{ font-size:12.5px; color:var(--a-critical-ink) }

.a-input,.a-select,.a-textarea{
  font-family:var(--a-font-body); font-size:var(--a-text-sm); color:var(--a-ink);
  background:var(--a-surface); border:1px solid var(--a-line-2);
  border-radius:var(--a-radius-sm); padding:8px 10px; width:100%;
  transition:border-color .12s, box-shadow .12s;
}
.a-input:focus,.a-select:focus,.a-textarea:focus{
  outline:none; border-color:var(--a-accent);
  box-shadow:0 0 0 3px var(--a-accent-wash);
}
.a-input[aria-invalid="true"]{ border-color:var(--a-critical) }
.a-input::placeholder,.a-textarea::placeholder{ color:var(--a-ink-3) }
.a-input--num{ font-family:var(--a-font-mono); font-variant-numeric:tabular-nums; text-align:right }
.a-textarea{ min-height:90px; resize:vertical }

.a-check{
  display:inline-flex; align-items:center; gap:var(--a-space-2);
  cursor:pointer; font-size:13.5px; color:var(--a-ink-2);
}
.a-check input{ accent-color:var(--a-accent); width:15px; height:15px }

/* --------------------------------------------------------------------------
   10. Badges & status
   Status always ships with a word, never color alone.
   -------------------------------------------------------------------------- */
.a-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--a-font-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:500;
  padding:3px 8px; border-radius:var(--a-radius-pill);
  background:var(--a-surface-2); color:var(--a-ink-2);
  border:1px solid var(--a-line);
  white-space:nowrap;
}
.a-badge--good    { background:var(--a-good-wash);     color:var(--a-good-ink);     border-color:transparent }
.a-badge--warn    { background:var(--a-warn-wash);     color:var(--a-warn-ink);     border-color:transparent }
.a-badge--critical{ background:var(--a-critical-wash); color:var(--a-critical-ink); border-color:transparent }
.a-badge--info    { background:var(--a-info-wash);     color:var(--a-info-ink);     border-color:transparent }

/* Strain type. Ratios below were measured, not guessed: the previous treatment
   (white text on the raw hue) scored 4.18 / 3.49 / 2.15 against white — all three
   failed WCAG AA, sativa badly. These clear 4.5:1 in both themes. */
.a-badge--hybrid{
  background:color-mix(in srgb, var(--a-strain-hybrid) 16%, var(--a-surface));
  color:color-mix(in srgb, var(--a-strain-hybrid) 55%, var(--a-ink));
  border-color:transparent;
}
.a-badge--indica{
  background:color-mix(in srgb, var(--a-strain-indica) 16%, var(--a-surface));
  color:color-mix(in srgb, var(--a-strain-indica) 55%, var(--a-ink));
  border-color:transparent;
}
.a-badge--sativa{
  background:color-mix(in srgb, var(--a-strain-sativa) 16%, var(--a-surface));
  color:color-mix(in srgb, var(--a-strain-sativa) 50%, var(--a-ink));
  border-color:transparent;
}

/* A small colour swatch identifying a series or category — a brand, a status
   family. Like .a-table__group it takes its colour from data via --a-dot-color
   and falls back to a neutral rule, so nothing needs a literal hex in a template.
   Decorative by nature: never let it be the only carrier of meaning. */
.a-dot{
  display:inline-block; width:.65rem; height:.65rem; border-radius:var(--a-radius-pill);
  background:var(--a-dot-color, var(--a-line-2));
  margin-right:.45rem; vertical-align:middle;
}

/* An identifier the user reads character by character — SKU, batch number,
   Metrc tag, order ref. Mono so O/0 and I/l stay distinguishable. */
.a-code{
  font-family:var(--a-font-mono); font-size:12px;
  background:var(--a-surface-2); color:var(--a-ink-2);
  border-radius:var(--a-radius-sm); padding:2px 6px; white-space:nowrap;
}

/* A signed change in a quantity or balance. Direction here IS the row's state —
   stock in versus stock out — not decoration, which is why it earns the status
   colors. The sign is always printed, so the meaning survives without color. */
.a-delta{ font-family:var(--a-font-mono); font-variant-numeric:tabular-nums; font-weight:600 }
.a-delta--up  { color:var(--a-good-ink) }
.a-delta--down{ color:var(--a-critical-ink) }

/* Left severity stripe for list rows that need state at a glance. */
.a-stripe{ border-left:3px solid var(--a-line-2); padding-left:var(--a-space-3) }
.a-stripe--good    { border-left-color:var(--a-good) }
.a-stripe--warn    { border-left-color:var(--a-warn) }
.a-stripe--critical{ border-left-color:var(--a-critical) }

/* --------------------------------------------------------------------------
   11. Bars, meters, callouts
   -------------------------------------------------------------------------- */
.a-bars{ display:flex; flex-direction:column; gap:9px }
.a-bar{ display:grid; grid-template-columns:190px minmax(0,1fr) 92px; gap:var(--a-space-3); align-items:center }
@media (max-width:620px){ .a-bar{ grid-template-columns:120px minmax(0,1fr) 80px } }
.a-bar__name{ font-size:var(--a-text-sm); color:var(--a-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.a-bar__track{ height:10px; background:var(--a-surface-2); border-radius:3px; overflow:hidden }
.a-bar__fill{ height:100%; background:var(--a-accent); border-radius:0 3px 3px 0 }
.a-bar__fill--warn{ background:var(--a-warn) }
.a-bar__fill--critical{ background:var(--a-critical) }
.a-bar__value{
  font-family:var(--a-font-mono); font-size:12.5px; text-align:right;
  font-variant-numeric:tabular-nums;
}

.a-note{
  border-left:3px solid var(--a-line-2);
  padding:var(--a-space-3) var(--a-space-4);
  background:var(--a-surface-2);
  border-radius:0 var(--a-radius-sm) var(--a-radius-sm) 0;
  font-size:var(--a-text-sm); color:var(--a-ink-2);
}
.a-note ul,.a-note ol{ margin:var(--a-space-2) 0 0; padding-left:var(--a-space-5) }
.a-note li{ margin-bottom:var(--a-space-1) }
.a-note li:last-child{ margin-bottom:0 }
.a-note--warn    { border-left-color:var(--a-warn);     background:var(--a-warn-wash) }
.a-note--critical{ border-left-color:var(--a-critical); background:var(--a-critical-wash) }
.a-note--good    { border-left-color:var(--a-good);     background:var(--a-good-wash) }
.a-note--info    { border-left-color:var(--a-info);     background:var(--a-info-wash) }

.a-empty{
  text-align:center; padding:var(--a-space-7) var(--a-space-4);
  color:var(--a-ink-2); font-size:var(--a-text-sm);
}

/* Divider */
.a-hr{ border:0; border-top:1px solid var(--a-line); margin:var(--a-space-5) 0 }

/* --------------------------------------------------------------------------
   12. Popovers & the date-range control
   A panel that opens out of a control. Toggle it with the `hidden` attribute
   and mirror the state in aria-expanded on the trigger — never by editing
   style.display, which strands the accessibility state.

   Remember the container: .a-card clips its children, so a card holding one of
   these needs .a-card--popover.
   -------------------------------------------------------------------------- */
.a-popover{
  position:absolute; top:100%; left:0; z-index:1000; margin-top:var(--a-space-1);
  min-width:320px; background:var(--a-surface);
  border:1px solid var(--a-line-2); border-radius:var(--a-radius-lg);
  box-shadow:var(--a-shadow-lg);
}
.a-popover[hidden]{ display:none }          /* class selectors outrank the UA rule */
.a-popover__group{ padding:var(--a-space-1) 0; border-bottom:1px solid var(--a-line) }
.a-popover__group:last-child{ border-bottom:0 }
.a-popover__section{ padding:var(--a-space-3) var(--a-space-4) }
.a-popover__section .a-field__label{ display:block; margin-bottom:10px }
.a-popover__section .a-btn--block{ margin-top:var(--a-space-3) }
/* Two date inputs either side of a joining word; must not wrap. */
.a-popover__range{ display:flex; align-items:center; gap:var(--a-space-2); flex-wrap:nowrap }

.a-popover__item{
  display:flex; justify-content:space-between; align-items:center; gap:var(--a-space-4);
  width:100%; text-align:left; font:inherit; color:var(--a-ink);
  padding:9px var(--a-space-4); background:none; border:0; cursor:pointer;
  font-size:var(--a-text-sm); transition:background .12s;
}
.a-popover__item:hover{ background:var(--a-surface-2) }
.a-popover__item:focus-visible{ outline:2px solid var(--a-focus); outline-offset:-2px }
.a-popover__item--active{ background:var(--a-accent-wash); box-shadow:inset 3px 0 0 var(--a-accent) }
.a-popover__note{ font-family:var(--a-font-mono); font-size:11px; color:var(--a-ink-3); white-space:nowrap }

/* Date-range trigger: two date faces and a caret in one segmented control. */
.a-daterange{ position:relative; display:inline-block }
.a-daterange__label{
  font-family:var(--a-font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--a-ink-3); margin-bottom:6px;
}
.a-daterange__label span{ color:var(--a-ink) }
.a-daterange__btn{
  display:flex; align-items:stretch; padding:0; cursor:pointer;
  background:var(--a-surface); color:var(--a-ink);
  border:1px solid var(--a-line-2); border-radius:var(--a-radius-sm);
  font-family:var(--a-font-mono); font-size:var(--a-text-sm);
  transition:border-color .12s;
}
.a-daterange__btn:hover{ border-color:var(--a-accent) }
.a-daterange__btn:focus-visible{ outline:2px solid var(--a-focus); outline-offset:2px }
.a-daterange__face{
  padding:8px var(--a-space-3); min-width:104px; text-align:center;
  font-variant-numeric:tabular-nums; border-right:1px solid var(--a-line-2);
}
.a-daterange__caret{
  display:flex; align-items:center; padding:0 var(--a-space-3);
  color:var(--a-ink-3); font-size:10px;
}

/* --------------------------------------------------------------------------
   13. Calendar
   A month grid of money. Built for the AR cash calendar but deliberately
   generic — anything that puts a figure on a day can use it.

   Colors are semantic, not decorative: --a-good for today forward (money still
   arriving on terms), --a-critical for days already past (money that should
   already be in), --a-warn for the ring on today. Empty cells fall back to
   --a-line-2's neighbourhood by simply having no border at all.

   Every cell with money must be a real <button> carrying an aria-label with
   date + amount + count; status is never color alone, so the amount and the
   count are always printed in the cell.
   -------------------------------------------------------------------------- */
.a-cal__title{ font-family:var(--a-font-display); font-size:var(--a-text-md); font-weight:600; margin:0 }
.a-cal__total{
  font-family:var(--a-font-mono); font-size:12px; color:var(--a-ink-2);
  font-variant-numeric:tabular-nums; margin-bottom:var(--a-space-3);
}
.a-cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:var(--a-space-1) }
.a-cal__dow span{
  font-family:var(--a-font-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--a-ink-3); text-align:center;
}
.a-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px }

.a-cal__cell{
  position:relative; aspect-ratio:1/.92; overflow:hidden;
  border:1px solid var(--a-line); border-radius:var(--a-radius-sm);
  background:var(--a-surface); color:inherit; font:inherit;
  padding:var(--a-space-1) 5px; text-align:left; cursor:default;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .1s ease, box-shadow .1s ease;
}
.a-cal__cell--empty{ border-color:transparent; background:transparent }
.a-cal__day{ font-family:var(--a-font-mono); font-size:10.5px; color:var(--a-ink-3); line-height:1 }
.a-cal__amt{
  font-family:var(--a-font-mono); font-size:12.5px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.1; white-space:nowrap;
}
.a-cal__count{ font-family:var(--a-font-mono); font-size:9px; color:var(--a-ink-3); line-height:1 }

/* Magnitude bar — scaled sqrt(amount/max) by the caller, so area reads as value. */
.a-cal__bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--a-good); opacity:.9 }

.a-cal__cell--has{ cursor:pointer; border-color:var(--a-line-2) }
.a-cal__cell--has:hover{ transform:translateY(-1px); box-shadow:var(--a-shadow); z-index:2 }
.a-cal__cell--has:focus-visible{ outline:2px solid var(--a-focus); outline-offset:1px }

/* A day of money arriving: good. A day of money LEAVING is neither good nor bad,
   it is simply due — so payables use the accent, emphasis without a verdict.
   Overdue is critical in both directions: late is late. */
/* The "everything older than this" row that sits above the month grid. A single
   very old item would otherwise spawn a run of empty months between itself and
   today, burying the ones anyone acts on. Clickable like a day cell. */
.a-cal__earlier{
  /* It lives inside the month grid, so it must span every column and sit at the
     top rather than being sized and stretched like a month card. */
  grid-column:1 / -1; align-self:start;
  display:flex; align-items:baseline; gap:var(--a-space-3); width:100%;
  flex-wrap:wrap;
  padding:var(--a-space-3) var(--a-space-4); margin-bottom:var(--a-space-4);
  background:var(--a-critical-wash);
  border:1px solid transparent; border-left:3px solid var(--a-critical);
  border-radius:var(--a-radius); cursor:pointer; text-align:left;
  font:inherit; color:var(--a-ink);
  transition:transform .1s ease, box-shadow .1s ease;
}
.a-cal__earlier:hover{ transform:translateY(-1px); box-shadow:var(--a-shadow) }
.a-cal__earlier:focus-visible{ outline:2px solid var(--a-focus); outline-offset:2px }
.a-cal__earlier--selected{ box-shadow:0 0 0 2px var(--a-ink) inset }
.a-cal__earlier__label{ font-weight:600 }
.a-cal__earlier__meta{ font-size:var(--a-text-sm); color:var(--a-ink-2) }
.a-cal__earlier__amt{
  margin-left:auto; font-size:var(--a-text-md); font-weight:600;
  color:var(--a-critical-ink); white-space:nowrap;
}

.a-cal__cell--upcoming .a-cal__amt{ color:var(--a-accent-ink) }
.a-cal__cell--upcoming .a-cal__bar{ background:var(--a-accent) }
.a-cal__cell--due  .a-cal__amt{ color:var(--a-good-ink) }
.a-cal__cell--late .a-cal__amt{ color:var(--a-critical-ink) }
.a-cal__cell--late{ border-color:color-mix(in srgb, var(--a-critical) 35%, var(--a-line)) }
.a-cal__cell--late .a-cal__bar{ background:var(--a-critical) }

.a-cal__cell--today{ border-color:var(--a-warn); border-width:2px }
.a-cal__cell--today .a-cal__day{ color:var(--a-warn-ink); font-weight:600 }
.a-cal__cell--selected{ box-shadow:0 0 0 2px var(--a-ink) inset }

/* --------------------------------------------------------------------------
   14. Charts — hand-rolled inline SVG, no library.
   The classes exist so a page never needs its own <style> block for a chart.
   Series color is --a-accent by default; --a-good etc. only when the series
   genuinely means "money arriving" and not just "series one".
   -------------------------------------------------------------------------- */
.a-chart{ position:relative; width:100%; overflow-x:auto }
.a-chart__svg{ display:block; width:100%; height:230px }
.a-chart__grid{ stroke:var(--a-line); stroke-width:1 }
.a-chart__axis{ fill:var(--a-ink-3); font-family:var(--a-font-mono); font-size:10px }
.a-chart__area{ fill:var(--a-accent); opacity:.13 }
.a-chart__line{ fill:none; stroke:var(--a-accent); stroke-width:2; stroke-linejoin:round }
.a-chart__point{ fill:var(--a-accent); stroke:var(--a-surface); stroke-width:2 }
.a-chart__cross{ stroke:var(--a-ink-3); stroke-width:1; stroke-dasharray:3 3 }
.a-chart__hit{ fill:transparent; cursor:crosshair }
.a-chart--good .a-chart__area { fill:var(--a-good) }
.a-chart--good .a-chart__line { stroke:var(--a-good) }
.a-chart--good .a-chart__point{ fill:var(--a-good) }

.a-tip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--a-surface); border:1px solid var(--a-line-2);
  border-radius:5px; padding:7px 9px; box-shadow:var(--a-shadow);
  font-size:12px; white-space:nowrap;
}
.a-tip__key{
  font-family:var(--a-font-mono); font-size:10px; color:var(--a-ink-3);
  letter-spacing:.08em; text-transform:uppercase;
}
.a-tip__value{ font-family:var(--a-font-mono); font-weight:500; font-variant-numeric:tabular-nums }
.a-tip__note{ font-family:var(--a-font-mono); font-size:10px; color:var(--a-ink-3); margin-top:2px }

/* --------------------------------------------------------------------------
   15. Icons
   Lucide (ISC), self-hosted as an SVG sprite in templates/partials/_icons.svg.
   Include the sprite once per page, then:
       <svg class="a-icon" aria-hidden="true"><use href="#i-calendar"></use></svg>

   Icons take their color from the surrounding text (currentColor) and scale
   with font-size, so they stay aligned inside buttons, badges and headings
   without per-use sizing. An icon that carries meaning on its own needs a
   label: give the <svg> role="img" and a <title>, or pair it with text.
   -------------------------------------------------------------------------- */
.a-icon{
  width:1.15em; height:1.15em;
  flex:0 0 auto;
  vertical-align:-0.18em;      /* optical baseline alignment beside text */
  overflow:visible;            /* stroke joins are not clipped at the edges */
}
.a-icon--sm{ width:1em;    height:1em;    vertical-align:-0.14em }
.a-icon--lg{ width:1.5em;  height:1.5em;  vertical-align:-0.28em }
.a-icon--xl{ width:2.25em; height:2.25em; vertical-align:-0.4em }

/* Thin the stroke on large sizes so weight stays optically constant. */
.a-icon--lg use,.a-icon--xl use{ stroke-width:1.5 }

/* Icons default to the surrounding ink. Use a status token deliberately. */
.a-icon--muted   { color:var(--a-ink-2) }
.a-icon--faint   { color:var(--a-ink-3) }
.a-icon--good    { color:var(--a-good) }
.a-icon--warn    { color:var(--a-warn) }
.a-icon--critical{ color:var(--a-critical) }
.a-icon--info    { color:var(--a-info) }

/* Icon-only button: keeps a 32px hit target without visual bulk. */
.a-btn--icon{ padding:7px; line-height:0 }
.a-btn--icon .a-icon{ width:18px; height:18px; vertical-align:0 }

/* --------------------------------------------------------------------------
   16. Utilities — deliberately few. Reach for a component first.
   -------------------------------------------------------------------------- */
.a-muted{ color:var(--a-ink-2) }
.a-faint{ color:var(--a-ink-3) }
.a-good{ color:var(--a-good-ink) }
.a-warn{ color:var(--a-warn-ink) }
.a-critical{ color:var(--a-critical-ink) }
.a-right{ text-align:right }
.a-nowrap{ white-space:nowrap }
.a-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Keyboard focus is always visible, everywhere. */
.a-root :focus-visible{ outline:2px solid var(--a-focus); outline-offset:2px }

@media (prefers-reduced-motion:reduce){
  .a-root *{ transition:none !important; animation:none !important }
}

/* Print. A report that prints badly is a report someone screenshots instead.
   Absolute black on white here is deliberate — paper has no theme. */
@media print{
  .a-root{ background:#fff }
  .a-page{ max-width:none; padding:0 }
  .a-card,.a-panel,.a-stats{ box-shadow:none }
  .a-btn,.a-seg{ display:none }
  .a-no-print{ display:none !important }
  .a-tablewrap{ overflow:visible }              /* let a wide table break across pages */
  .a-table{ font-size:11pt }
  .a-table a{ color:#000; text-decoration:none }
  .a-table--sortable th::after{ display:none }  /* sort glyphs are noise on paper */

  /* The app's own chrome, hidden only when printing a migrated page — scoped by
     :has(.a-root) so legacy pages keep whatever printing they have today. */
  body:has(.a-root) .navbar,
  body:has(.a-root) footer{ display:none !important }
}

/* --------------------------------------------------------------------------
   Card & panel accent bands
   3px band down the left edge, matching .a-note and .a-stripe.

   --accent is structural emphasis with no meaning: the primary card in a
   group, or a common spine across a set. The status variants carry meaning,
   so the card must also say what the state is in words — a stripe alone is
   invisible to a colorblind reader and to a printer.

   Do NOT use these to color-code categories (a hue per report group). A muted
   categorical set in this palette fails colorblind separation, and the sets
   that pass are bright enough to make the page look like a toy. Group with
   headings, icons and order instead.
   -------------------------------------------------------------------------- */
.a-card--accent  { border-left:3px solid var(--a-accent) }
.a-card--good    { border-left:3px solid var(--a-good) }
.a-card--warn    { border-left:3px solid var(--a-warn) }
.a-card--critical{ border-left:3px solid var(--a-critical) }
.a-card--info    { border-left:3px solid var(--a-info) }

.a-panel--accent  { border-left:3px solid var(--a-accent) }
.a-panel--good    { border-left:3px solid var(--a-good) }
.a-panel--warn    { border-left:3px solid var(--a-warn) }
.a-panel--critical{ border-left:3px solid var(--a-critical) }