/* ============================================================
   Iconors — site-wide additions outside the Vite build
   1. Inter (self-hosted)
   2. Header
   3. Tools menu (desktop dropdown + mobile drawer)

   Everything themable reads the --ico-* tokens, so light mode,
   dark mode and admin branding all keep working.
   ============================================================ */

/* --- 1. Inter ------------------------------------------------
   The design system asks for Inter but the file was never shipped,
   so every page fell back to the browser's default serif. One
   variable file covers every weight the stylesheet uses (550, 650,
   750, 820…). SIL Open Font License 1.1 — rsms.me/inter          */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The admin branding block sets --ico-font-body to a bare family name
   with no fallback, so a font that is slow or missing dropped straight
   to serif. Appending a stack here keeps the admin's choice first and
   guarantees a sans-serif behind it. */
:root {
  --ico-font-fallback: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-font-sans-serif: var(--ico-font-body), var(--ico-font-fallback);
  --bs-body-font-family: var(--bs-font-sans-serif);
}

body { font-family: var(--ico-font-body), var(--ico-font-fallback); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ico-font-heading), var(--ico-font-fallback); }

/* --- 2. Header ----------------------------------------------- */
.ico-hx__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 68px;
}

.ico-hx .ico-logo { flex: 0 0 auto; }

.ico-hx__nav,
.ico-hx__links { display: none; }

.ico-hx .ico-nav { gap: .05rem; }

.ico-hx .ico-nav > li > a,
.ico-hx__tools-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .7rem;
  border: 0;
  border-radius: var(--ico-radius-sm);
  background: transparent;
  font-size: .875rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--ico-body);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.ico-hx__tools-btn:hover,
.ico-hx__tools-btn[aria-expanded='true'] {
  background: rgba(4, 4, 8, .05);
  color: var(--ico-heading);
}

.ico-hx__tools-btn .bi {
  font-size: .68rem;
  transition: transform .2s ease;
}

.ico-hx__tools-btn[aria-expanded='true'] .bi { transform: rotate(180deg); }

/* Current page: a short bar under the label as well as the heavier
   weight, so the state is not carried by colour alone. */
.ico-hx .ico-nav > li > a[aria-current='page'],
.ico-hx__tools-btn.is-active {
  color: var(--ico-heading);
  font-weight: 650;
}

.ico-hx .ico-nav > li > a[aria-current='page']::after,
.ico-hx__tools-btn.is-active::after {
  content: '';
  position: absolute;
  inset-inline: .7rem;
  inset-block-end: .12rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ico-primary-dark);
}

/* Search: compact pill. No visible button — Enter submits. */
.ico-hx__search {
  position: relative;
  display: none;
  flex: 1 1 14rem;
  min-inline-size: 0;
  max-inline-size: 34rem;
  margin-inline: auto;
  padding: .28rem .55rem .28rem .9rem;
}

.ico-hx__search input { font-size: .875rem; }

.ico-hx__suggest {
  position: absolute;
  inset-block-start: calc(100% + .5rem);
  inset-inline-start: 0;
  z-index: 1040;
  inline-size: max(100%, 20rem);
  max-inline-size: calc(100vw - 2rem);
  padding: 0;
}

/* ico-card paints a translucent glass surface in dark mode; a list of
   links over page content needs to be opaque to stay readable. */
:root[data-bs-theme='dark'] .ico-hx__suggest { background: #171128; }

.ico-hx__actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.ico-hx__icon-btn {
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .ico-hx__search { display: flex; }
  .ico-hx__actions { margin-inline-start: 0; }
}

@media (min-width: 1200px) {
  .ico-hx__nav,
  .ico-hx__links { display: flex; flex: 0 0 auto; }

  .ico-hx__search {
    flex-basis: 11rem;
    max-inline-size: 22rem;
    margin-inline: .35rem;
  }

  /* Room is tight at this width; the shortcut hint returns at 1400px. */
  .ico-hx__search kbd { display: none; }

  .ico-hx__actions { margin-inline-start: .15rem; }
}

@media (min-width: 1400px) {
  .ico-hx__bar { gap: 1rem; }
  .ico-hx__search { max-inline-size: 26rem; margin-inline: auto; }
  .ico-hx__search kbd { display: inline; }
}

:root[data-bs-theme='dark'] .ico-hx__tools-btn:hover,
:root[data-bs-theme='dark'] .ico-hx__tools-btn[aria-expanded='true'] { background: rgba(255, 255, 255, .07); }

:root[data-bs-theme='dark'] .ico-hx .ico-nav > li > a[aria-current='page']::after,
:root[data-bs-theme='dark'] .ico-hx__tools-btn.is-active::after { background: var(--ico-primary); }

/* --- 3. Tools menu ------------------------------------------- */
.ico-hx__tools { position: relative; }

.ico-tools-menu {
  --bs-dropdown-min-width: 22rem;
  --bs-dropdown-spacer: .6rem;
  --bs-dropdown-link-hover-bg: rgba(4, 4, 8, .045);
  --bs-dropdown-link-active-bg: rgba(4, 4, 8, .045);
  --bs-dropdown-link-hover-color: var(--ico-heading);
  --bs-dropdown-link-active-color: var(--ico-heading);
  inset-inline-start: -1rem;
  padding: .55rem;
  border: 1px solid var(--ico-border);
  border-radius: 18px;
  background: var(--ico-surface);
  box-shadow: 0 28px 64px -24px rgba(4, 4, 8, .38), 0 2px 6px rgba(4, 4, 8, .04);
}

.ico-tools-menu.show { animation: ico-menu-in .2s cubic-bezier(.22, 1, .36, 1); }

/* Invisible bridge across the gap between button and panel, so moving
   the pointer down into the menu does not count as leaving it. */
.ico-tools-menu::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: -.7rem;
  block-size: .7rem;
}

@keyframes ico-menu-in {
  from { opacity: 0; translate: 0 8px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

.ico-tools-menu__eyebrow {
  margin: .3rem .65rem .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ico-muted);
}

.ico-tools-menu__item,
.ico-tools-menu .ico-tools-menu__item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .65rem;
  border-radius: 12px;
  color: var(--ico-body);
  white-space: normal;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.ico-tools-menu__item:hover,
.ico-tools-menu__item:focus-visible,
.ico-tools-menu__item[aria-current='page'] {
  background: rgba(4, 4, 8, .045);
  color: var(--ico-heading);
}

.ico-tools-menu__text { min-inline-size: 0; flex: 1 1 auto; }

.ico-tools-menu__text strong {
  display: block;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ico-heading);
}

.ico-tools-menu__text span {
  display: block;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ico-muted);
}

.ico-tools-menu__arrow {
  flex: 0 0 auto;
  font-size: 1.25rem;
  color: var(--ico-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.ico-tools-menu__item:hover .ico-tools-menu__arrow,
.ico-tools-menu__item:focus-visible .ico-tools-menu__arrow {
  opacity: 1;
  transform: none;
}

.ico-tools-menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .45rem .1rem 0;
  padding: .7rem .55rem .2rem;
  border-block-start: 1px solid var(--ico-border);
  font-size: .78rem;
  color: var(--ico-muted);
}

.ico-tools-menu__foot a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 650;
  color: var(--ico-heading);
}

.ico-tools-menu__foot a .bi { transition: transform .2s ease; }
.ico-tools-menu__foot a:hover .bi { transform: translateX(3px); }

/* Tool icon chip — shared by the menu, the drawer and the tool pages. */
.ico-tool-chip {
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.08rem;
  line-height: 1;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.ico-tools-menu__item:hover .ico-tool-chip,
.ico-tools-menu__item:focus-visible .ico-tool-chip { transform: scale(1.07) rotate(-4deg); }

.ico-tool-chip--mint { background: rgba(39, 211, 133, .17); color: #14875f; }
.ico-tool-chip--violet { background: rgba(106, 61, 245, .13); color: #5a2ee0; }
.ico-tool-chip--sky { background: rgba(29, 116, 224, .13); color: #1763c4; }
.ico-tool-chip--rose { background: rgba(224, 51, 107, .12); color: #c9245a; }

:root[data-bs-theme='dark'] .ico-tools-menu {
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
  --bs-dropdown-link-active-bg: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
  background: #171128;
  box-shadow: 0 32px 70px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(60, 247, 162, .05);
}

:root[data-bs-theme='dark'] .ico-tools-menu__item:hover,
:root[data-bs-theme='dark'] .ico-tools-menu__item:focus-visible,
:root[data-bs-theme='dark'] .ico-tools-menu__item[aria-current='page'] { background: rgba(255, 255, 255, .06); }

:root[data-bs-theme='dark'] .ico-tools-menu__foot { border-block-start-color: rgba(255, 255, 255, .09); }

:root[data-bs-theme='dark'] .ico-tool-chip--mint { background: rgba(60, 247, 162, .14); color: #3cf7a2; }
:root[data-bs-theme='dark'] .ico-tool-chip--violet { background: rgba(155, 124, 255, .17); color: #b9a4ff; }
:root[data-bs-theme='dark'] .ico-tool-chip--sky { background: rgba(86, 170, 255, .16); color: #8cc8ff; }
:root[data-bs-theme='dark'] .ico-tool-chip--rose { background: rgba(255, 110, 155, .16); color: #ff9dbb; }

/* Mobile drawer */
.ico-hx-drawer__heading {
  margin: 0 0 .45rem .45rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ico-muted);
}

.ico-hx-drawer__link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .65rem;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ico-heading);
}

.ico-hx-drawer__link > .bi {
  inline-size: 1.25rem;
  text-align: center;
  font-size: 1.05rem;
  color: var(--ico-muted);
}

.ico-hx-drawer__link:hover,
.ico-hx-drawer__link[aria-current='page'] {
  background: rgba(4, 4, 8, .045);
  color: var(--ico-heading);
}

.ico-hx-drawer__soon {
  margin-inline-start: auto;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(113, 113, 121, .14);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ico-muted);
}

:root[data-bs-theme='dark'] .ico-hx-drawer__link:hover,
:root[data-bs-theme='dark'] .ico-hx-drawer__link[aria-current='page'] { background: rgba(255, 255, 255, .06); }

:root[data-bs-theme='dark'] .ico-hx-drawer__soon { background: rgba(255, 255, 255, .08); }

/* --- 4. Continue with Google (log-in and sign-up pages) -------
   The button itself is drawn by Google; these rules only frame it. */
.ico-google { position: relative; margin-block-end: 1.1rem; }

.ico-google__slot {
  position: relative;
  display: flex;
  justify-content: center;
  min-block-size: 44px;
}

.ico-google__gsi {
  display: flex;
  justify-content: center;
  inline-size: 100%;
  /* Google's button is a light-scheme iframe. In dark mode the page is
     color-scheme: dark, and a scheme mismatch makes browsers paint the
     iframe on an opaque white box. Matching the scheme keeps it clear. */
  color-scheme: light;
}
.ico-google__gsi > div { margin-inline: auto; }

.ico-google__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  inline-size: 100%;
  max-inline-size: 400px;
  block-size: 44px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-size: .9rem;
  font-weight: 500;
  /* Subtle shimmer while Google's button loads. */
  animation: ico-google-pulse 1.4s ease-in-out infinite;
}

.ico-google__placeholder[hidden] { display: none; }
.ico-google__placeholder.is-failed { animation: none; opacity: .45; }

:root[data-bs-theme='dark'] .ico-google__placeholder { border-color: #8e918f; background: #131314; color: #e3e3e3; }

@keyframes ico-google-pulse { 50% { opacity: .62; } }

/* While the server signs the visitor in, the button is covered so it
   cannot be pressed twice. */
.ico-google.is-busy .ico-google__slot { visibility: hidden; }

.ico-google__busy {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  block-size: 44px;
  margin-inline: auto;
  max-inline-size: 400px;
  border: 1px solid var(--ico-border);
  border-radius: 999px;
  background: var(--ico-surface);
  color: var(--ico-heading);
  font-size: .9rem;
  font-weight: 600;
}

.ico-google__busy[hidden] { display: none; }

.ico-google__spin {
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ico-google-spin .7s linear infinite;
}

@keyframes ico-google-spin { to { transform: rotate(360deg); } }

.ico-google__error {
  margin: .75rem 0 0;
  padding: .6rem .8rem;
  border: 1px solid rgba(230, 23, 75, .35);
  border-radius: 10px;
  background: rgba(230, 23, 75, .08);
  font-size: .84rem;
  line-height: 1.45;
  color: #b3123a;
}

:root[data-bs-theme='dark'] .ico-google__error { background: rgba(230, 23, 75, .13); color: #ff9db5; }

.ico-auth-divider {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-block: 0 1.25rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ico-muted);
  white-space: nowrap;
}

.ico-auth-divider::before,
.ico-auth-divider::after {
  content: '';
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--ico-border);
}

:root[data-bs-theme='dark'] .ico-auth-divider::before,
:root[data-bs-theme='dark'] .ico-auth-divider::after { background: rgba(255, 255, 255, .1); }

/* --- 5. Logo --------------------------------------------------
   Leaf mark + ICONORS wordmark (partials/brand-lockup). Sizes are fixed
   so the header never shifts while the mark loads. */
.ico-logo { gap: .6rem; line-height: 1; }

.ico-logo__icon {
  display: block;
  flex: 0 0 auto;
  inline-size: auto;
  block-size: 36px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.ico-logo__word {
  display: block;
  flex: 0 0 auto;
  block-size: 15px;
  inline-size: calc(15px * 400 / 70);
  color: var(--ico-heading);
}

a.ico-logo:hover .ico-logo__icon,
a.ico-logo:focus-visible .ico-logo__icon { transform: rotate(-8deg) scale(1.04); }

.ico-footer .ico-logo { display: inline-flex; align-items: center; }
.admin-sidebar__brand .ico-logo__icon { block-size: 32px; }
.admin-sidebar__brand .ico-logo__word { block-size: 14px; inline-size: calc(14px * 400 / 70); }

/* --- 6. Small asset previews ------------------------------------
   Thumbnails in the account and contributor areas. Light swatch in both
   themes, as on the asset tiles: most artwork is drawn for white. */
.download-thumb { background: #f2f3f7; }
.download-thumb .ico-lottie,
.collection-card__cell .ico-lottie { inline-size: 88%; }
.download-thumb .ico-lottie__spinner { inline-size: 14px; block-size: 14px; }