/* HubSpot CLASSIC — page layer. Study copy for internal education. Not for shipping.
   Load order: hubspot-tokens.css (HubSpot's classic theme values) -> hubspot-ui.css (HubSpot's own component CSS) -> this file.
   This file adds only what HubSpot's CSS does not ship as plain CSS:
   1) the base text setting HubSpot applies to <body> (Lexend Deca 14/24, weight 300, stylistic set ss01);
   2) checkbox / radio / toggle glyphs (HubSpot draws them with inline SVG from React);
   3) the CRM app shell (global top bar, index page, record page) — colours from HubSpot's own global-shell tokens,
      sizes measured from HubSpot screenshots;
   4) "force state" helpers so every state can be shown side by side (HubSpot ships most of these itself:
      .private-button--hover / --active / --disabled, .private-form__control--focus / --error).
   Every colour below is a HubSpot token (var(--trellis-…)) or a named Canvas colour (var(--hs-color-…)). */

/* ---------- 1. base ---------- */
.hs-root {
  font-family: var(--trellis-typography-body-100-font-family);
  font-feature-settings: "ss01";
  font-weight: var(--trellis-typography-body-100-font-weight);
  font-size: var(--trellis-typography-body-100-font-size);
  line-height: var(--trellis-typography-body-100-line-height);
  color: var(--trellis-color-text-core-default);
  background: var(--trellis-color-fill-surface-default);
  -webkit-font-smoothing: auto;
}
.hs-root .private-icon { font-family: spacesword; font-style: normal; line-height: 1; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: 0; }
.hs-root .private-icon__low { font-weight: 400; }
.hs-root .private-icon__high { font-weight: 700; }
.hs-root code, .hs-root .hs-code { font-family: var(--trellis-typography-code-100-font-family); font-weight: var(--trellis-typography-code-100-font-weight); font-size: 13px; }

/* ---------- 2. checkbox / radio / toggle glyphs ---------- */
.hs-root .private-checkbox__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hs-root .private-checkbox__indicator { box-sizing: border-box; display: inline-block; }
.hs-root .private-checkbox__icon svg { width: 72%; fill: currentColor; }
.hs-root .private-radio .private-radio__icon { display: flex; align-items: center; justify-content: center; }
.hs-root .private-radio__input:checked + .private-checkbox__indicator { color: var(--hs-color-calypso); border-color: currentColor; }
.hs-root .private-radio__input:checked + .private-checkbox__indicator .private-radio__icon { opacity: 1; }
.hs-root .private-form__toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hs-root .private-form__toggle-switch__icon { display: block; width: 100%; height: 100%; color: var(--hs-color-calypso); }
.hs-root .private-form__toggle-switch__handle { box-sizing: border-box; }
/* HubSpot renders tabs as plain elements; when built with <button> remove the browser's button chrome.
   :where() keeps this weaker than HubSpot's own enclosed-tab rules. */
:where(.hs-root) button.private-tab { border: 0; background: transparent; font: inherit; cursor: pointer; margin: 0; border-radius: 0; }
:where(.hs-root) .private-list { margin: 0; padding-left: 0; list-style: none; }
:where(.hs-root) .private-dropdown--list .private-list__item > button { cursor: pointer; }

/* ---------- 3. CRM app shell (classic) ---------- */
/* Classic left navigation ("global shell"). Colours: HubSpot global-shell tokens. Sizes MEASURED on HubSpot's own screenshot
   (Knowledge Base "navigate-new-objects", 2x): nav item 40px tall, 212px wide, 5px corners, 12px apart (52px rhythm);
   label 14px light at 46.5px from the edge; flyout panel 4px from the nav, items 40px every 44px. See replicas/hubspot-nav.html. */
.hs-nav { background: var(--trellis-color-global-shell-fill-surface-default); width: 234px; padding: 0 0 12px; box-sizing: border-box; }
.hs-nav__top { height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -1px 0 var(--trellis-color-global-shell-border-default); color: var(--trellis-color-global-shell-icon-nav-item-subtle); font-size: 16px; }
.hs-nav__list { list-style: none; margin: 0; padding: 16px 10px 0; display: flex; flex-direction: column; gap: 12px; }
.hs-nav__item { height: 40px; border-radius: 5px; display: flex; align-items: center; padding: 0 9px 0 12.5px; box-sizing: border-box; border: 0; width: 100%; background: transparent; font: inherit;
  color: var(--trellis-color-global-shell-text-nav-item-default); font-size: 14px; font-weight: 300; text-align: left; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.hs-nav__item .private-icon { width: 15px; font-size: 17px; margin-right: 8.5px; display: flex; justify-content: center; color: var(--trellis-color-global-shell-icon-nav-item-default); }
.hs-nav__item .hs-nav__chev { margin: 0 0 0 auto; width: auto; font-size: 14px; color: inherit; }
.hs-nav__item:hover { background: var(--trellis-color-global-shell-fill-nav-item-hover); color: var(--trellis-color-global-shell-text-nav-item-hover); }
.hs-nav__item[aria-expanded="true"], .hs-nav__item[aria-current] { background: var(--trellis-color-global-shell-fill-nav-item-selected); color: var(--trellis-color-global-shell-text-nav-item-hover); }
.hs-nav__item[aria-expanded="true"] .private-icon, .hs-nav__item[aria-current] .private-icon { color: var(--trellis-color-global-shell-icon-nav-item-selected); }
.hs-nav__flyout { background: var(--trellis-color-global-shell-fill-surface-panel-default); width: 212px; border-radius: 5px 5px 0 0; padding: 11px 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
.hs-nav__sub { height: 40px; border-radius: 5px; display: flex; align-items: center; padding-left: 16.5px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 300; text-align: left; cursor: pointer;
  color: var(--trellis-color-global-shell-text-nav-item-hover); transition: background-color .15s ease-out; }
.hs-nav__sub:hover { background: var(--trellis-color-global-shell-fill-sub-nav-item-hover); }
.hs-nav__sub[aria-current] { background: var(--trellis-color-global-shell-fill-sub-nav-item-selected); }

/* ---------- 4. force-state helpers (documentation only) ---------- */
.hs-root a.is-hover, .hs-root .private-link.is-hover { color: var(--trellis-color-text-interactive-default-hover); text-decoration: underline; }
.hs-root a.is-active, .hs-root .private-link.is-active { color: var(--trellis-color-text-interactive-default-pressed); }
.hs-root .is-focus-ring { border-color: rgba(0, 208, 228, .5) !important; box-shadow: 0 0 4px 1px rgba(0, 208, 228, .3), 0 0 0 1px #00d0e4 !important; outline: 0; }
.hs-root .private-checkbox__indicator.is-hover { background-color: var(--hs-color-koala); }
.hs-root .private-tabs .private-tab.is-hover { color: var(--hs-color-eerie); }
.hs-root .private-table--hover tbody tr.is-hover { background-color: rgba(0, 77, 128, .0392157); }
.hs-root .private-form__toggle-switch__inner.is-focus-ring { box-shadow: 0 0 4px 1px rgba(0, 208, 228, .3), 0 0 0 1px #00d0e4 !important; }

/* Popover open/close — HubSpot's own transition (uiPopover): opacity + scale .75 -> 1, .2s ease-out, from the trigger side. */
.hs-pop { opacity: .01; transform: scale(.75); visibility: hidden; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; transform-origin: top left; pointer-events: none; }
.hs-pop.hs-pop--right { transform-origin: top right; }
.hs-pop.is-open { opacity: 1; transform: scale(1); visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Modal — HubSpot "popin": scale .9 -> 1 + fade, .25s ease-out after .1s; backdrop fades in .1s. Hidden layers are also inert (not reachable with Tab). */
.hs-modal-layer { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease-out, visibility 0s linear .35s; }
.hs-modal-layer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .1s ease-out, visibility 0s; }
.hs-modal-layer .private-modal { opacity: 0; transform: scale(.9); transition: opacity .25s ease-in, transform .25s ease-in; }
.hs-modal-layer.is-open .private-modal { opacity: 1; transform: scale(1); transition: opacity .25s ease-out .1s, transform .25s ease-out .1s; }
/* Side panel — HubSpot "slidein-from-right": .4s ease-out in, .4s ease-in out (HubSpot's shorthand resets the .1s delay, so there is no pause). */
.hs-panel-layer { visibility: hidden; pointer-events: none; transition: visibility 0s linear .4s; }
.hs-panel-layer .private-panel { transform: translateX(100%); transition: transform .4s ease-in; }
.hs-panel-layer.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.hs-panel-layer.is-open .private-panel { transform: translateX(0); transition: transform .4s ease-out; }
/* Toast — HubSpot "popin-alert": scale .9 -> 1 + fade, .3s ease-out in, .3s ease-in out. */
.hs-toast { opacity: 0; transform: scale(.9); transition: opacity .3s ease-in, transform .3s ease-in; }
.hs-toast.is-open { opacity: 1; transform: scale(1); transition: opacity .3s ease-out, transform .3s ease-out; }

/* Reduce motion: every transition and animation on the page becomes (almost) instant. */
@media (prefers-reduced-motion: reduce) {
  .hs-root *, .hs-root *::before, .hs-root *::after, .hs-pop, .hs-modal-layer, .hs-panel-layer, .hs-toast { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}