/* Generated by scripts/sync-silk.mjs from docs/redesign/project/polish.css. Do not edit. */
/* Silk Commerce · polish layer: brand gradients, texture, micro-interactions.
   Loads after the design system bundle. Uses only brand colors:
   Onyx #04272d · Midnight #194d5b · Sky #388cb4 · Cambridge #96baa9 · Xanthous #f2b124 · Sea Salt #f5f6f7 */

:root {
  --pol-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pol-grain: url("/silk/brand/grain.png");
  --pol-gold-glow: rgba(242, 177, 36, 0.16);
  --pol-sky-glow: rgba(56, 140, 180, 0.22);
  --pol-sage-glow: rgba(150, 186, 169, 0.18);
}

/* ---------- Dark bands: layered brand light + film grain ---------- */
.silk-band[data-theme] { isolation: isolate; }
.silk-band[data-theme]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pol-grain); background-size: 160px 160px;
  opacity: 0.07; mix-blend-mode: overlay;
}
.silk-band[data-theme="onyx"] {
  background-color: #04272d;
  background-image:
    radial-gradient(60% 80% at 100% 0%, var(--pol-sky-glow), transparent 62%),
    radial-gradient(45% 60% at 0% 100%, rgba(25, 77, 91, 0.55), transparent 70%),
    linear-gradient(180deg, #05303a 0%, #04272d 55%, #032127 100%);
}
.silk-band[data-theme="midnight"] {
  background-color: #194d5b;
  background-image:
    radial-gradient(55% 75% at 0% 0%, var(--pol-sage-glow), transparent 65%),
    radial-gradient(50% 70% at 100% 100%, rgba(4, 39, 45, 0.45), transparent 70%),
    linear-gradient(160deg, #1d5666 0%, #194d5b 50%, #14434f 100%);
}
/* Heroes and feature bands (no section rhythm class) get the gold moment and a drifting light */
.silk-band[data-theme="onyx"]:not(.silk-section) {
  background-image:
    radial-gradient(38% 55% at 88% 18%, var(--pol-gold-glow), transparent 70%),
    radial-gradient(55% 70% at 100% 0%, var(--pol-sky-glow), transparent 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(25, 77, 91, 0.6), transparent 70%),
    linear-gradient(180deg, #05303a 0%, #04272d 60%, #032127 100%);
  background-size: 140% 140%, 100% 100%, 100% 100%, 100% 100%;
  animation: pol-drift 18s ease-in-out infinite alternate;
}
.silk-band[data-theme]:not(.silk-section)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(245, 246, 247, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(245, 246, 247, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 20%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 80% 20%, #000 0%, transparent 75%);
}
@keyframes pol-drift { from { background-position: 0% 0%, 0 0, 0 0, 0 0; } to { background-position: 30% 25%, 0 0, 0 0, 0 0; } }

/* A hairline of light where a dark band meets light ground */
.silk-band[data-theme].silk-section { box-shadow: inset 0 1px 0 rgba(245, 246, 247, 0.06); }

/* Gold display words glow softly on dark */
[data-theme] .silk-accent:not([class*="slot"]) {
  background: linear-gradient(100deg, #f2b124 0%, #f7cd6b 45%, #f2b124 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pol-sheen 7s ease-in-out infinite;
}
@keyframes pol-sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- Light ground: soft brand washes ---------- */
.silk-section--deep { background-color: #eceeef; }

/* ---------- Eyebrows: the rule draws in ---------- */
.silk-eyebrow::before { transition: width 420ms var(--pol-ease), opacity 420ms var(--pol-ease); }
section:hover > .silk-container .silk-eyebrow::before,
.silk-section-head:hover .silk-eyebrow::before { width: 40px; opacity: 1; }

/* ---------- Buttons ---------- */
.silk-btn { transition: background-color 180ms var(--pol-ease), border-color 180ms var(--pol-ease), color 180ms var(--pol-ease), box-shadow 220ms var(--pol-ease), transform 120ms var(--pol-ease); }
.silk-btn:active { transform: translateY(1px) scale(0.985); }
.silk-btn--primary {
  position: relative; overflow: hidden;
  background-image: linear-gradient(180deg, #f6c14d 0%, #f2b124 55%, #e9a514 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 6px 16px -8px rgba(201, 138, 8, 0.55);
}
.silk-btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg); transition: left 600ms var(--pol-ease);
}
.silk-btn--primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 24px -10px rgba(201, 138, 8, 0.7); transform: translateY(-1px); }
.silk-btn--primary:hover::after { left: 120%; }
.silk-btn--primary[aria-disabled="true"], .silk-btn--primary:disabled { background-image: none; box-shadow: none; transform: none; }
.silk-btn--secondary:hover { background-color: rgba(4, 39, 45, 0.04); box-shadow: 0 4px 12px -8px rgba(4, 39, 45, 0.35); }
[data-theme] .silk-btn--secondary:hover { background-color: rgba(245, 246, 247, 0.06); }
.silk-btn .silk-icon { transition: transform 220ms var(--pol-ease); }
.silk-btn:hover .silk-icon:last-child:not(:first-child) { transform: translateX(2px); }

/* ---------- Links: underline sweeps in ---------- */
.silk p a, .silk-lead a, .silk-card__body a, .silk-notice__body a, .silk-small a {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 260ms var(--pol-ease), color 180ms var(--pol-ease);
  padding-bottom: 1px;
}
.silk p a:hover, .silk-lead a:hover, .silk-card__body a:hover, .silk-notice__body a:hover, .silk-small a:hover {
  background-image: linear-gradient(#f2b124, #f2b124); background-size: 100% 2px;
}
.silk-linkbtn { transition: color 180ms var(--pol-ease), background-color 180ms var(--pol-ease); }

/* ---------- Navigation ---------- */
.silk-nav { backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.silk-nav__link, .silk-topbar__link { position: relative; }
.silk-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: #f2b124; transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--pol-ease);
}
.silk-nav__link:hover::after, .silk-nav__link[aria-current]::after { transform: scaleX(1); }
.silk-topbar {
  background-image:
    radial-gradient(40% 180% at 0% 0%, rgba(56, 140, 180, 0.22), transparent 70%),
    linear-gradient(90deg, #04272d 0%, #062f37 60%, #04272d 100%);
  box-shadow: inset 0 -1px 0 rgba(245, 246, 247, 0.06);
}
.silk-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 177, 36, 0.55) 30%, rgba(56, 140, 180, 0.5) 70%, transparent);
  opacity: 0.6;
}
.silk-topbar__link { transition: color 180ms var(--pol-ease); }
.silk-avatar { transition: box-shadow 220ms var(--pol-ease); }
.silk-avatar:hover { box-shadow: 0 0 0 3px rgba(242, 177, 36, 0.35); }

/* ---------- Cards: lift, glow, the accent rule grows ---------- */
.silk-card, .silk-case, .silk-choice, .silk-metric, .silk-feature, .tg-card, .as-role {
  transition: transform 260ms var(--pol-ease), box-shadow 260ms var(--pol-ease), border-color 260ms var(--pol-ease);
}
.silk-card::before { transition: width 320ms var(--pol-ease); }
.silk-card:hover, .silk-case:hover, .silk-metric:hover, .silk-feature:hover, .tg-card:hover, .as-role:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(4, 39, 45, 0.45), 0 2px 6px -2px rgba(4, 39, 45, 0.12);
}
.silk-card:hover::before { width: 72px; }
[data-theme] .silk-card:hover, [data-theme] .silk-case:hover {
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 177, 36, 0.25);
}
.silk-choice:hover { box-shadow: 0 14px 30px -20px rgba(4, 39, 45, 0.45); border-color: var(--line-control); }

/* Case studies: a soft sky wash rises on hover */
.silk-case { position: relative; overflow: hidden; }
.silk-case::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none;
  background: radial-gradient(80% 100% at 50% 100%, rgba(56, 140, 180, 0.10), transparent 70%);
  opacity: 0; transition: opacity 320ms var(--pol-ease);
}
.silk-case:hover::after { opacity: 1; }

/* Statement callouts: midnight with a glow and texture */
.silk-callout--statement {
  position: relative; overflow: hidden; isolation: isolate;
  background-image:
    radial-gradient(60% 120% at 100% 0%, rgba(242, 177, 36, 0.14), transparent 65%),
    linear-gradient(135deg, #1d5666 0%, #194d5b 55%, #133f4b 100%);
}
.silk-callout--statement::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pol-grain); background-size: 160px 160px; opacity: 0.08; mix-blend-mode: overlay;
}

/* Credentials and chips */
.silk-credential { transition: transform 220ms var(--pol-ease), border-color 220ms var(--pol-ease), background-color 220ms var(--pol-ease); }
.silk-credential:hover { transform: translateY(-2px); border-color: rgba(242, 177, 36, 0.5); }
.silk-chip--live .silk-chip__dot { box-shadow: 0 0 0 0 currentColor; animation: pol-ping 1.8s var(--pol-ease) infinite; }
@keyframes pol-ping { 0% { box-shadow: 0 0 0 0 rgba(56, 140, 180, 0.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(56, 140, 180, 0); } }

/* Stats */
.silk-stat { transition: background-color 260ms var(--pol-ease); }

/* ---------- Portal surfaces ---------- */
.silk-panel { transition: box-shadow 260ms var(--pol-ease), border-color 260ms var(--pol-ease); }
.silk-panel:hover { box-shadow: 0 12px 30px -22px rgba(4, 39, 45, 0.4), 0 1px 3px rgba(4, 39, 45, 0.06); }
.silk-metric { position: relative; overflow: hidden; }
.silk-metric--alert { background-image: linear-gradient(180deg, rgba(242, 177, 36, 0.10), rgba(242, 177, 36, 0) 70%); }
.silk-metric__spark path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: pol-draw 1.6s var(--pol-ease) 200ms forwards; }
@keyframes pol-draw { to { stroke-dashoffset: 0; } }

.silk-table tbody tr td { transition: background-color 160ms var(--pol-ease); }
.silk-table tbody tr:hover td { background-color: rgba(56, 140, 180, 0.05); }
.silk-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 #f2b124; }

.silk-tab { transition: color 180ms var(--pol-ease), border-color 220ms var(--pol-ease); }
.silk-seg button { transition: background-color 180ms var(--pol-ease), color 180ms var(--pol-ease), box-shadow 180ms var(--pol-ease); }

.silk-input, .silk-select, .silk-textarea, .silk-composer, .silk-search, .hs-search, .su-search {
  transition: border-color 180ms var(--pol-ease), box-shadow 220ms var(--pol-ease);
}
.silk-input:hover, .silk-select:hover, .silk-textarea:hover { border-color: #388cb4; }
.silk-input:focus, .silk-select:focus, .silk-textarea:focus, .silk-composer:focus-within {
  box-shadow: 0 0 0 4px rgba(56, 140, 180, 0.16);
}
.hs-search, .su-search {
  background-image: linear-gradient(180deg, #ffffff, #fbfcfc);
  box-shadow: 0 0 0 6px rgba(56, 140, 180, 0.08), 0 18px 40px -24px rgba(4, 39, 45, 0.4);
}

/* Steps: the current step breathes */
.silk-step--current .silk-step__mark { animation: pol-breathe 2.4s ease-in-out infinite; }
@keyframes pol-breathe { 0%, 100% { box-shadow: 0 0 0 4px rgba(242, 177, 36, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(242, 177, 36, 0.08); } }
.silk-step--done::before { background: linear-gradient(180deg, #04272d, #388cb4); }

/* Chat */
.silk-msg--me .silk-msg__bubble { background-image: linear-gradient(135deg, #0a3942 0%, #04272d 100%); }
.silk-suggest button { transition: border-color 180ms var(--pol-ease), transform 180ms var(--pol-ease), background-color 180ms var(--pol-ease); }
.silk-suggest button:hover { transform: translateY(-1px); border-color: #388cb4; background-color: rgba(56, 140, 180, 0.05); }
.silk-cite { transition: border-color 180ms var(--pol-ease), transform 180ms var(--pol-ease); }
.silk-cite:hover { transform: translateY(-1px); }

/* Notices and dialogs */
.silk-scrim { backdrop-filter: blur(3px) saturate(1.1); -webkit-backdrop-filter: blur(3px) saturate(1.1); }
.silk-dialog, .silk-drawer { animation: pol-rise 380ms var(--pol-ease) both; }
@keyframes pol-rise { from { transform: translateY(8px); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* Gantt bars: a light pass on hover */
.silk-bar { transition: filter 200ms var(--pol-ease), transform 200ms var(--pol-ease); }
.silk-bar:hover { filter: brightness(1.06) saturate(1.1); transform: translateY(-1px); }

/* Floating dock */
.silk-dock { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.silk-dock__btn { transition: transform 200ms var(--pol-ease), background-color 200ms var(--pol-ease); }
.silk-dock__btn:hover { transform: translateY(-2px); }

/* Footer on dark: texture continues */
.silk-footer[data-theme] {
  position: relative; isolation: isolate;
  background-image: linear-gradient(180deg, #04272d, #021d22);
}
.silk-footer[data-theme]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pol-grain); background-size: 160px 160px; opacity: 0.06; mix-blend-mode: overlay;
}

/* Keyboard focus: one consistent sky ring */
.silk a:focus-visible, .silk button:focus-visible, .silk [tabindex]:focus-visible {
  outline: 2px solid #388cb4; outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .silk *, .silk *::before, .silk *::after { animation: none !important; transition: none !important; }
  .silk-metric__spark path { stroke-dashoffset: 0; }
}

/* ---------- Brand gradient edge (Sky → Cambridge → Xanthous), used sparingly ----------
   Only featured surfaces get it: dialogs, the spin-up check card, the selected choice, the two
   main search boxes, and anything given .pol-ring by hand. Everything else keeps a plain hairline. */
:root { --pol-ring: linear-gradient(125deg, #388cb4 0%, #96baa9 48%, #f2b124 100%); }
.pol-ring, .cp, .hs-search, .su-search {
  border: 1.5px solid transparent !important;
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--pol-ring) border-box !important;
}
.silk-dialog {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface-overlay), var(--surface-overlay)) padding-box, var(--pol-ring) border-box;
}
.silk-choice--on {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(242, 177, 36, 0.08), rgba(242, 177, 36, 0) 140px) padding-box,
              linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
              linear-gradient(125deg, #f2b124, #96baa9 60%, #388cb4) border-box !important;
}

/* ---------- Partner and platform logo rows ---------- */
.pol-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; padding-top: 22px; border-top: 1px solid var(--line-hairline); }
.pol-logos img { display: block; width: auto; opacity: 0.92; transition: opacity 220ms var(--pol-ease), transform 220ms var(--pol-ease); }
.pol-logos img:hover { opacity: 1; transform: translateY(-1px); }
.pol-logos__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.pol-logos__x { font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted); }
.pol-logos--light { border-top: 0; padding-top: 4px; gap: 24px; }

/* Cards carry the accent bar, so no outline around them */
.silk-card { border-color: transparent !important; box-shadow: var(--shadow-1); }
[data-theme] .silk-card { box-shadow: none; }