/* The Workforce Is Yours: module stylesheet
   =========================================================================
   Ported from the displacement mockup package (ds/tokens/*.css, ds/styles.css and the
   page's own <style> blocks). The page's markup is almost entirely inline styles, so this
   file holds: the design tokens, the element-level base rules, a block that undoes the
   theme and Tailwind rules the mockup never had, and the page's few rules of its own.

   HubSpot runs css/ files through HubL, and a brace immediately followed by a hash opens a
   HubL comment that deletes the rest of the file. Every brace followed by a selector that
   starts with a hash is therefore written with a space after the brace. Keep it that way.

   Scoping. Everything is under .wiy, the module's root element.
     - Tokens are declared on .wiy, not :root.
     - Element rules are written :where(.wiy) element. :where() adds no specificity, so each
       weighs the same as the bare element rule it replaces: it beats the theme's own bare
       element rules (the theme stylesheet loads earlier), and loses to any class rule. That is
       the cascade the mockup had. The mockup's body rules sit on .wiy itself.
     - Where the theme's rule is more specific than a bare element (form label, form input),
       the override below carries a .wiy class on purpose.
   The mockup's own font (Open Sans) is loaded by module.html through require_css. */

/* ---- Tokens (the mockup's :root, declared on .wiy) ---------------------- */

/* ===== Colour tokens (ds/tokens/colors.css) ===== */
/* Trio Workforce Solutions — Color tokens
 * Source of truth: "trio ws logo guidelines.pdf" (PMS / CMYK / RGB specs)
 * + the Trio VMS and Trio Market Intelligence product UIs.
 *
 * The brand is "trio" — three interlocking hexagons in GREEN, BLUE, ORANGE,
 * anchored by a SLATE wordmark. Those four are the entire brand palette.
 */

.wiy {
  /* ----- Brand core (exact PDF spec) ----- */
  --trio-green:        #79BB43; /* PMS 376  R121 G187 B67 */
  --trio-green-light:  #A6CE42; /* PMS 361  R166 G206 B66 */
  --trio-blue:         #0081BB; /* Process Blue  R0 G129 B187 */
  --trio-blue-light:   #00AAE5; /* PMS 2995  R0 G170 B229 */
  --trio-orange:       #F58220; /* PMS 151  R245 G130 B32 */
  --trio-orange-deep:  #F05523; /* PMS 021  R240 G85 B35 */
  --trio-slate:        #455560; /* PMS 431  R69 G85 B96  — the wordmark color */
  --trio-mist:         #E6E7E8; /* PMS 427  R230 G231 B232 */

  /* ----- Neutral / slate scale (derived from --trio-slate) ----- */
  --slate-950: #1b232a; /* Market Intelligence dark canvas */
  --slate-900: #232d35;
  --slate-800: #2f3a43;
  --slate-700: #3b4954;
  --slate-600: #455560; /* = brand slate */
  --slate-500: #5e6e78;
  --slate-400: #7d8b94;
  --slate-300: #a7b1b8;
  --slate-200: #cdd3d7;
  --slate-150: #dfe3e6;
  --slate-100: #e6e7e8; /* = brand mist */
  --slate-75:  #eef1f2;
  --slate-50:  #f5f7f8;
  --white:     #ffffff;

  /* ----- Semantic roles ----- */
  /* Primary action = Process Blue, the dominant interactive color in Trio VMS */
  --color-primary:        var(--trio-blue);
  --color-primary-hover:  #006a9b;
  --color-primary-active:  #00567e;
  --color-primary-subtle: #e5f3fa;   /* tinted fills, active nav, selected rows */
  --color-primary-border: #b6dcee;

  /* Accent = orange, used for highlights, "attention", progress, CTAs in marketing */
  --color-accent:         var(--trio-orange);
  --color-accent-hover:   #db6f12;
  --color-accent-subtle:  #fdeede;

  /* Status */
  --color-success:        var(--trio-green);
  --color-success-text:   #4e8a1f;
  --color-success-subtle: #eef6e3;
  --color-warning:        var(--trio-orange);
  --color-warning-text:   #b65e10;
  --color-warning-subtle: #fdf0e1;
  --color-danger:         #d64550;
  --color-danger-text:    #b2343e;
  --color-danger-subtle:  #fce9ea;
  --color-info:           var(--trio-blue-light);
  --color-info-subtle:    #e2f6fd;

  /* ----- Text ----- */
  --text-strong:   #232d35;            /* headings, table headers, key figures */
  --text-body:     var(--trio-slate);  /* default body copy */
  --text-muted:    #6b7a84;            /* secondary labels, captions */
  --text-faint:    #9aa6ad;            /* placeholders, disabled */
  --text-inverse:  #ffffff;
  --text-link:     var(--color-primary);

  /* ----- Surfaces ----- */
  --surface-page:    #f4f6f7;  /* app background behind cards */
  --surface-card:    #ffffff;
  --surface-sunken:  #eef1f2;  /* wells, table zebra, inactive fields */
  --surface-hover:   #f5f7f8;  /* row / item hover */
  --surface-brand:   var(--trio-slate);  /* the slate top app bar */
  --surface-brand-2: #3b4954;            /* slate bar gradient bottom */
  --surface-dark:    var(--slate-950);   /* dark dashboards (Market Intelligence) */
  --surface-overlay: rgba(27, 35, 42, 0.55); /* modal scrim */

  /* ----- Borders ----- */
  --border-subtle:  #eceef0;
  --border-default: #dfe3e6;
  --border-strong:  #c4ccd1;
  --border-focus:   var(--trio-blue-light);

  /* Dark-surface (Market Intelligence) tokens */
  --dark-panel:   #232d35;
  --dark-border:  #38444e;
  --dark-text:    #e7ecef;
  --dark-muted:   #97a3ab;
  --dark-accent:  #7fe3a0;  /* the mint-green KPI figures */
}

/* ===== Typography tokens (ds/tokens/typography.css) ===== */
/* Trio Workforce Solutions — Typography tokens
 * Brand typeface: Open Sans (Semibold for headings, Regular for body).
 * Product UI runs at a compact 14px base; marketing/decks scale up large.
 */

.wiy {
  /* Families */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extra:    800; /* @kind other */

  /* Type scale (product base = 14px) */
  --text-2xs:  0.6875rem; /* 11px — micro labels, badge text */
  --text-xs:   0.75rem;   /* 12px — captions, meta */
  --text-sm:   0.8125rem; /* 13px — dense table cells */
  --text-base: 0.875rem;  /* 14px — UI body default */
  --text-md:   1rem;      /* 16px — comfortable body / prose */
  --text-lg:   1.125rem;  /* 18px — card titles */
  --text-xl:   1.25rem;   /* 20px — section titles */
  --text-2xl:  1.5rem;    /* 24px — page titles */
  --text-3xl:  1.875rem;  /* 30px — stat figures */
  --text-4xl:  2.25rem;   /* 36px — slide headings */
  --text-5xl:  3rem;      /* 48px — hero / display */
  --text-6xl:  3.75rem;   /* 60px — slide hero */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em; /* the brand's uppercase eyebrow labels */
}

/* ===== Spacing, radii, elevation, motion, layout tokens (ds/tokens/spacing.css) ===== */
/* Trio Workforce Solutions — Spacing, radii, elevation, motion, layout */

.wiy {
  /* ----- Spacing scale (4px base) ----- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  /* ----- Radii ----- */
  --radius-sm:   4px;   /* inputs, small chips */
  --radius-md:   6px;   /* buttons, badges */
  --radius-lg:   8px;   /* cards, panels */
  --radius-xl:   12px;  /* large surfaces, modals */
  --radius-2xl:  16px;
  --radius-pill: 999px; /* status pills, toggles */
  --radius-circle: 50%; /* avatars, icon dots */

  /* ----- Elevation (soft, cool-gray shadows — never black) ----- */
  --shadow-xs: 0 1px 2px rgba(35, 45, 53, 0.06);
  --shadow-sm: 0 1px 3px rgba(35, 45, 53, 0.08), 0 1px 2px rgba(35, 45, 53, 0.04);
  --shadow-md: 0 4px 12px rgba(35, 45, 53, 0.08), 0 1px 3px rgba(35, 45, 53, 0.05);
  --shadow-lg: 0 12px 28px rgba(35, 45, 53, 0.12), 0 2px 6px rgba(35, 45, 53, 0.06);
  --shadow-xl: 0 24px 48px rgba(35, 45, 53, 0.18);
  --shadow-focus: 0 0 0 3px rgba(0, 170, 229, 0.35); /* trio-blue-light focus ring */

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ----- Layout ----- */
  --app-topbar-h:  56px;
  --app-sidebar-w: 240px;
  --container-max: 1280px;
  --field-h:       36px;  /* default input / button height */
  --field-h-sm:    30px;
  --field-h-lg:    44px;
}


/* ---- Undo theme and Tailwind rules the mockup never had ----------------- */

/* Tailwind preflight sets border:0 solid #e5e7eb on everything. The mockup had the browser
   default (no border, currentColor). Form controls get their native border back just below. */
:where(.wiy) *,
:where(.wiy) *::before,
:where(.wiy) *::after { border: initial; }

/* Preflight blanks form controls (padding 0, inherited font, transparent background) and the
   theme's button rule adds 1rem 2rem padding, a 2px border, white text and a transition.
   The mockup had native controls plus its own inline styles; revert hands each property back
   to the browser default, and the inline styles then apply on top as they did. */
:where(.wiy) :is(button, input, select, textarea) {
  font: revert;
  letter-spacing: revert;
  text-transform: revert;
  color: revert;
  margin: revert;
  padding: revert;
  background: revert;
  border: revert;
  border-radius: revert;
  cursor: revert;
  transition: revert;
  white-space: revert;
  text-align: revert;
}

/* Preflight sets headings to font-size/weight:inherit and the theme sets bare h1-h4 sizes,
   colours and Archivo. Give the size back to the browser default; the base rules further
   down restore the mockup's weight, colour and family. */
:where(.wiy) :is(h1, h2, h3, h4, h5, h6) { font-size: revert; }

/* The theme sets p to 18px Archivo with a bottom margin and balanced wrapping. The mockup's p
   inherited its font from the page root. */
:where(.wiy) p { font-family: inherit; font-size: inherit; line-height: inherit; }

/* Preflight makes img and svg display:block (and img max-width:100%, height:auto); the theme
   adds a tiny img font-size. The mockup had the browser defaults. Width and height are left
   alone: reverting those would drop the svg width/height attributes. */
:where(.wiy) svg,
:where(.wiy) img { display: revert; vertical-align: revert; }
:where(.wiy) img { max-width: revert; height: revert; font-size: revert; word-break: revert; }

/* The theme's "form label" rule (display:block, 14px, 0.35rem bottom margin) is more specific
   than a bare element, so this one carries .wiy. The white paper form's email label sets no
   display or margin of its own and was picking up the margin. */
.wiy form label { display: revert; font-size: revert; margin-bottom: revert; }

/* Tailwind's forms reset puts a focus ring (box-shadow) on text inputs that is more specific
   than the design system's :focus-visible rule. Keep the design system's ring. */
.wiy :is(input[type=text], input[type=email], select, textarea):focus { outline: none; box-shadow: var(--shadow-focus); }

/* ---- Base rules from the design system (ds/tokens/base.css) ------------- */

:where(.wiy) *,
:where(.wiy) *::before,
:where(.wiy) *::after { box-sizing: border-box; }

/* body rules live on the module root; the page's own body rule (white background, Open Sans,
   font smoothing, margin 0) is merged in. overflow-wrap: the theme sets break-word on body,
   which is inherited; the browser default is restored here. */
.wiy {
  margin: 0;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: normal;
  word-break: normal;
}

:where(.wiy) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

:where(.wiy) p { margin: 0; text-wrap: pretty; }

:where(.wiy) a {
  color: var(--text-link);
  text-decoration: none;
}
:where(.wiy) a:hover { text-decoration: underline; }

.wiy .trio-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

:where(.wiy) ::selection { background: var(--color-primary-subtle); }

:where(.wiy) :focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- Page rules (the mockup's <style> blocks) --------------------------- */

:where(.wiy) a { color: #0081BB; text-decoration: none; }
:where(.wiy) a:hover { color: #006a9b; }
:where(.wiy) input[type=range] { accent-color: #0081BB; }

/* Landing-page header: the template drops the site nav, so the skip link lives here.
   Hidden until it takes keyboard focus. */
.wiy .wiy-skip { position: absolute; left: 16px; top: -48px; z-index: 70; padding: 10px 16px; border-radius: 8px; background: #0081BB; color: #fff; font: 700 14px/1 'Open Sans', sans-serif; }
.wiy .wiy-skip:focus { top: 14px; color: #fff; }

/* The mockup styled mobile through attribute selectors on the inline styles. They match the
   exact inline-style strings in the template markup, so do not reformat those. */
@media (max-width: 760px) {
  .wiy header nav { display: none !important; }
  .wiy header [style*="height:76px"] { gap: 12px !important; }
  .wiy header a[style*="flex:none"] { padding: 9px 14px !important; font-size: 13px !important; }
  .wiy [style*="padding:0 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .wiy [style*="padding:34px 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .wiy [style*="grid-template-columns"]:not([style*="repeat(7,1fr)"]):not([style*="repeat(3,1fr)"]):not([style*="gap:8px"]):not([style*="repeat(2,max-content)"]) { grid-template-columns: minmax(0, 1fr) !important; }
  /* PEAK badges: stay side by side, shrinking from their 218px width, until a
     phone is too narrow to read them (see 440px below). */
  .wiy [style*="grid-template-columns:repeat(2,max-content)"] { grid-template-columns: repeat(2, minmax(0, 218px)) !important; }
  .wiy [style*="grid-template-columns:repeat(2,max-content)"] > img { width: 100% !important; height: auto !important; }
  .wiy [style*="grid-template-columns:repeat(2,minmax(0,1fr));gap:10px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wiy [aria-hidden="true"][style*="width:520px"] { display: none !important; }
  .wiy h1 { font-size: 42px !important; }
  .wiy h2[style*="font:800"] { font-size: 32px !important; }
  .wiy [style*="padding:44px 44px 36px"] { padding: 24px 18px !important; }
  .wiy [style*="padding:44px 44px"] { padding: 28px 20px !important; }
  .wiy [style*="padding:30px 32px"] { padding: 22px 20px !important; }
  .wiy #report { width: 100% !important; }
  .wiy [style*="justify-self:end"] { justify-self: stretch !important; max-width: none !important; }
  .wiy [style*="display:inline-flex;padding:5px"] { flex-wrap: wrap; border-radius: 22px !important; }
  .wiy [style*="white-space:nowrap"] { white-space: normal !important; }
  .wiy [style*="min-height:600px"] { min-height: 0 !important; }
  .wiy [style*="column-gap"] { row-gap: 16px !important; }
  .wiy [style*="grid-template-columns:auto minmax(0,1fr) auto"] span[style*="text-align:right"] { text-align: left !important; }
}

/* 2026-09-30: hexagon icons, hero signal bars animate once on load, callout on phones */
.wiy .wiy-ico{display:block;width:24px;height:24px;background:center/contain no-repeat}
.wiy .wiy-ico-cfo{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20%22/%3E%3Cpath%20d%3D%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22/%3E%3C/svg%3E")}
.wiy .wiy-ico-coo{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E")}
.wiy .wiy-ico-cio{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2021h8%22/%3E%3Cpath%20d%3D%22M12%2017v4%22/%3E%3C/svg%3E")}
@keyframes wiyBar{0%{transform:scaleX(0)}55%{transform:scaleX(1.12)}78%{transform:scaleX(.95)}100%{transform:scaleX(1)}}
.wiy [style*="height:9px;border-radius:5px;background:#eef1f2"]>div{transform-origin:left center;animation:wiyBar 1.5s cubic-bezier(.22,.8,.3,1) .35s both}
.wiy [style*="height:9px;border-radius:5px;background:#eef1f2"]:nth-child(2)>div{animation-delay:.5s}
.wiy [style*="height:9px;border-radius:5px;background:#eef1f2"]:nth-child(3)>div{animation-delay:.65s}
.wiy [style*="height:9px;border-radius:5px;background:#eef1f2"]:nth-child(4)>div{animation-delay:.8s}
@media (max-width: 440px) {
  .wiy [style*="grid-template-columns:repeat(2,max-content)"] { grid-template-columns: minmax(0, 218px) !important; }
}
@media (prefers-reduced-motion:reduce) { .wiy [style*="height:9px;border-radius:5px;background:#eef1f2"]>div{animation:none}}
@media (max-width: 760px) { .wiy [style*="padding:44px 48px"]{padding:28px 20px!important}}