/* ============================================================================
 * Mycelium One — base token layer.
 *
 * Loaded FIRST by every template, so a per-surface stylesheet that redeclares a
 * token still wins. That order is load-bearing: portal-theme.css carries its own
 * --mln-bg and --mln-surface, and moving these declarations ahead of it is what
 * keeps the portal looking as it does.
 *
 * These tokens were declared only in mln-directory.css, which the portal template
 * does not load — so --mln-accent and --mln-shadow-sm resolved to nothing there and
 * every declaration reading them was dropped as invalid. A token referenced by a
 * shared include MUST be declared here rather than in the stylesheet of whichever
 * surface happened to need it first.
 * ==========================================================================*/
:root {
    --mln-primary: #00594c;
    --mln-primary-700: #04463b;
    --mln-accent: #bc4e2c;
    --mln-ink: #132420;
    --mln-muted: #5c6b65;
    --mln-faint: #93a099;
    --mln-bg: #f4f7f5;
    --mln-surface: #ffffff;
    --mln-surface-2: #eef3f0;
    --mln-line: #e3ebe7;
    --mln-line-2: #d6e0db;
    --mln-shadow-sm: 0 1px 2px rgba(19,36,32,.06), 0 1px 3px rgba(19,36,32,.08);
    --mln-shadow-md: 0 4px 14px rgba(19,36,32,.10);
    --mln-shadow-lg: 0 10px 34px rgba(19,36,32,.16);
    --mln-r: 14px;
    --mln-r-sm: 10px;
    --mln-r-pill: 999px;
    /* Mycelium view: side-panel width. The zoom cluster offsets by this so it
       lands at the bottom-right of the GRAPH rather than under the panel. */
    --mln-net-side-w: 260px;
    --mln-disp: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mln-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Keyboard focus indicator. 2px of the darkest brand green reaches 3:1 against
       every surface in the light palette; the theme's own mint ring does not. */
    --mln-focus-ring: 2px solid #00594c;

    /* ---- The four onboarding moves ----------------------------------------
       Each move owns a hue, carried through its sidebar row, progress bar, step
       header and the matching block on portal Home.

       TWO tokens per move, and they are not interchangeable:
         --mln-move-<m>       the brand hue. Fills, progress bars, borders,
                              badges, and text at 24px+ only.
         --mln-move-<m>-ink   the same hue darkened until small text on
                              --mln-bg clears WCAG AA (4.5:1).
       Measured against #f7f8f4: the brand explore/experience/learn hues land at
       4.25 / 4.46 / 3.33:1, so a label set in them is unreadable to some
       readers. Small text MUST use the -ink token.
         --mln-move-<m>-wash  tint for a block background the hue sits on. */
    --mln-move-connect:         #025a4d;
    --mln-move-connect-ink:     #025a4d;   /* 7.65:1 — the brand hue already passes */
    --mln-move-connect-wash:    #e4efec;

    --mln-move-explore:         #3e8452;
    --mln-move-explore-ink:     #2f6b40;   /* 5.97:1 */
    --mln-move-explore-wash:    #e6f1e9;

    --mln-move-experience:      #bd5230;
    --mln-move-experience-ink:  #9e4526;   /* 5.91:1 */
    --mln-move-experience-wash: #f7e9e3;

    --mln-move-learn:           #c67337;
    --mln-move-learn-ink:       #8a5020;   /* 6.06:1 */
    --mln-move-learn-wash:      #faeee2;

    /* ---- Activation ------------------------------------------------------
       Mint. Reserved for the donate block and threshold moments; it is loud on
       purpose and MUST NOT become a general-purpose accent. As a background
       only — mint on white is 1.4:1, so any text over it uses -ink. */
    --mln-activation:      #83ffc7;
    --mln-activation-ink:  #06603a;
    --mln-activation-wash: #d9ffe9;

    /* ---- Stone-beige border ramp + grounds -------------------------------
       The prototype's structural neutrals. --mln-line / --mln-line-2 above stay
       for the directory; these are the portal chrome's warmer equivalents. */
    --mln-stone:        #d3d1be;
    --mln-stone-soft:   #e2e0d1;
    --mln-stone-strong: #b8b6a4;
    --mln-ground:        #f7f8f4;   /* warm white — the portal page ground */
    --mln-ground-raised: #ecf2f2;   /* ice white — a card lifted off it */
}

/* The move hues are tuned for a light ground. On the dim and dark schemes the
   -ink variants invert: a darkened hue disappears into the surface, so text
   takes the LIGHTER end and the wash becomes a low-alpha tint of the hue. */
.mln-scheme-dark, .mln-scheme-dim {
    --mln-move-connect-ink:     #6fc2ae;
    --mln-move-explore-ink:     #8dd69e;
    --mln-move-experience-ink:  #e5a58d;
    --mln-move-learn-ink:       #f4a261;
    --mln-move-connect-wash:    rgba(111, 194, 174, .12);
    --mln-move-explore-wash:    rgba(141, 214, 158, .12);
    --mln-move-experience-wash: rgba(229, 165, 141, .12);
    --mln-move-learn-wash:      rgba(244, 162,  97, .12);
    --mln-activation-ink:       #83ffc7;
    --mln-activation-wash:      rgba(131, 255, 199, .12);
    --mln-stone:        #3b3f34;
    --mln-stone-soft:   #2e3228;
    --mln-stone-strong: #4c5142;
}

/* The two chrome grounds follow the scheme, and the two schemes differ, so they
   cannot share the block above. */
.mln-scheme-dark { --mln-ground: #14170f; --mln-ground-raised: #1c2018; }
.mln-scheme-dim  { --mln-ground: #2b2a26; --mln-ground-raised: #33322d; }

/* Mint on a dark ground, because the dark green disappears into it. */
.mln-scheme-dark, .mln-scheme-dim { --mln-focus-ring: 2px solid #66bfb2; }

/*
  The one focus indicator for the whole product (WCAG 2.2 SC 2.4.7).

  !important is required, not defensive: the Diamond theme sets `outline: none` on
  `body .ui-button` unconditionally and again on `body .ui-button.ui-state-focus`,
  substituting a box-shadow ring that several controls — the selectOneMenu widget
  and the topbar buttons among them — never receive, leaving them with no indicator
  at all. Specificity alone cannot reach every one of those selectors from a single
  rule, and per-component patches are how the gap opened in the first place.

  A component MUST NOT clear `outline` without providing a replacement.

  Bare text fields and the map are left out: they sit inside components that draw
  their own indicator (the search pill's border, the map's inset ring), and a ring
  forced onto them shows as a hard rectangle inside the rounded control.
*/
:focus-visible:not(input, textarea, select, .leaflet-container) {
    outline: var(--mln-focus-ring) !important;
    outline-offset: 2px !important;
}
/* PrimeFaces fields and buttons swap Diamond's low-contrast shadow for the ring,
   so they show one indicator rather than two. */
.ui-inputfield:focus-visible {
    outline: var(--mln-focus-ring) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
.ui-button:focus-visible { box-shadow: none !important; }
/* These widgets focus a visually hidden input, so the ring goes on the visible box. */
.ui-selectonemenu:has(.ui-helper-hidden-accessible :focus-visible),
.ui-chkbox:has(:focus-visible) .ui-chkbox-box,
.ui-radiobutton:has(:focus-visible) .ui-radiobutton-box {
    outline: var(--mln-focus-ring) !important;
    outline-offset: 2px !important;
}
/* Diamond's info and success tags and its red text on outlined/flat danger buttons fall
   below 4.5:1 (3.85, 3.17 and 4.43 on the tinted rows). Same hues, darker. */
body .ui-tag.ui-tag-info { background: #0277bd; }
body .ui-tag.ui-tag-success { background: #33691e; }
body .ui-button.ui-button-danger.ui-button-outlined { color: #c62828 !important; border-color: #c62828; }
/* Colour only: a flat button has no border, and painting one red here is what drew a
   ring round every trash icon. */
body .ui-button.ui-button-danger.ui-button-flat { color: #c62828 !important; }
/* A destructive icon is drawn clean, with no border, whichever variant carries it; the
   red icon and the confirmation step carry the meaning. Text buttons keep their style.
   Here rather than in mln-button.css because most row icons are plain p:commandButtons
   that never load that sheet. */
body .ui-button.ui-button-danger.ui-button-icon-only.ui-button-flat,
body .ui-button.ui-button-danger.ui-button-icon-only.ui-button-outlined {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}
body .ui-button.ui-button-danger.ui-button-icon-only.ui-button-flat.ui-state-hover,
body .ui-button.ui-button-danger.ui-button-icon-only.ui-button-outlined.ui-state-hover {
    background-color: var(--mln-danger-wash);
}
/* Row actions in a table are one size, so the icons line up: Diamond's rounded-button
   and plain icon buttons otherwise differ in height and the icons sit at different
   heights. */
/* !important on the size: Diamond sizes icon buttons inside table cells with a more
   specific selector, which kept the width at 1.75rem under a 2rem height. */
body .ui-datatable .ui-button.ui-button-icon-only {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem !important; height: 2.25rem !important; padding: 0; vertical-align: middle;
    border-radius: 50%;
}
body .ui-datatable .ui-button.ui-button-icon-only .ui-button-icon-left {
    position: static; margin: 0; top: auto; left: auto;
}
body .ui-datatable .ui-button.ui-button-icon-only .ui-button-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* ---- Status colours ------------------------------------------------------
   Used by the message, confirm and Coming Soon composites, whose hosts include
   the admin and error templates that never load portal-theme.css — so these MUST
   live here. -ink is text and icons on -wash (or on the page) at 4.5:1 or better;
   -line is a border. The danger BUTTON keeps Diamond's own ui-button-danger. */
:root {
    --mln-danger-ink:  #a12622;  --mln-danger-wash:  #fdeceb;  --mln-danger-line:  #f1b7b2;
    --mln-warn-ink:    #7a4a00;  --mln-warn-wash:    #fff4e0;  --mln-warn-line:    #f0cf8f;
    --mln-success-ink: #1e6b3a;  --mln-success-wash: #e7f4ec;  --mln-success-line: #a9d6b9;
    --mln-info-ink:    #00594c;  --mln-info-wash:    #e6f0ee;  --mln-info-line:    #a8c9c2;

    /* Secondary text in the composites. --mln-muted has no dark value and stays
       dark-on-dark there, so the composites read this one instead. */
    --mln-quiet-ink: #5c6b65;

    /* Text tooltips wrap at this width instead of running across the viewport. */
    --mln-tip-max: 20rem;
    --mln-tip-bg:  #2c3a36;
    --mln-tip-ink: #ffffff;
}
.mln-scheme-dark, .mln-scheme-dim {
    --mln-danger-ink:  #f2a7a1;  --mln-danger-wash:  rgba(242, 167, 161, .14);  --mln-danger-line:  rgba(242, 167, 161, .4);
    --mln-warn-ink:    #f3c77a;  --mln-warn-wash:    rgba(243, 199, 122, .14);  --mln-warn-line:    rgba(243, 199, 122, .4);
    --mln-success-ink: #8fd4a6;  --mln-success-wash: rgba(143, 212, 166, .14);  --mln-success-line: rgba(143, 212, 166, .4);
    --mln-info-ink:    #7fc8bb;  --mln-info-wash:    rgba(127, 200, 187, .14);  --mln-info-line:    rgba(127, 200, 187, .4);
    --mln-quiet-ink: #b0bab4;
    --mln-tip-bg:  #e9efe9;
    --mln-tip-ink: #132420;
}

/* Coming Soon borrows the learn hue the portal already used for it. Declared on
   the scheme classes as well as :root because a var() inside a custom property is
   resolved where it is declared: on :root alone it would freeze the light value
   and ignore the scheme class on <body>. */
:root, .mln-scheme-dark, .mln-scheme-dim {
    --mln-soon-ink:  var(--mln-move-learn-ink);
    --mln-soon-wash: var(--mln-move-learn-wash);
    --mln-soon-line: var(--mln-stone);
}

/* PrimeFaces tooltips set no max-width, so a long help string renders as one
   line as wide as the page. Lives here rather than in a composite stylesheet
   because p:tooltip is appended to <body> on every surface. */
body .ui-tooltip { max-width: min(var(--mln-tip-max), calc(100vw - 2rem)); }
body .ui-tooltip .ui-tooltip-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }

/* ---- Text links ----------------------------------------------------------
   The brand green on light grounds. On dark and dim grounds the green falls
   below 4.5:1, so links take the mint the focus ring already uses. The admin
   template carries no mln-scheme class; its scheme shows only in which layout
   stylesheet it loaded, hence the :has() pair. */
:root {
    --mln-link: var(--mln-primary);
    --mln-link-hover: var(--mln-primary-700);
}
.mln-scheme-dark, .mln-scheme-dim,
:root:has(link[href*="layout-dark.css"]), :root:has(link[href*="layout-dim.css"]) {
    --mln-link: #66bfb2;
    --mln-link-hover: #9ad8ce;
}

/* ---- Growls ----------------------------------------------------------------
   Each page has two: info and success fade after 5s, warnings and errors are sticky
   and stay until closed. Both containers sit in the same corner, so while an error
   is up the transient growl moves to the bottom rather than drawing over it. */
body:has(> .ui-growl.ui-growl-sticky > .ui-growl-item-container) > .ui-growl:not(.ui-growl-sticky) {
    top: auto;
    bottom: 20px;
}
/* PrimeFaces reveals the close icon only on mouseover; an item that never fades
   MUST show how to dismiss it to touch users too. */
body .ui-growl.ui-growl-sticky .ui-growl-icon-close { display: block !important; }