/* Tempo 2030. See docs/design-manifesto.md before extending this system. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-variable.woff2") format("woff2");
}

:root {
  --accent-soft: #d7f2fa;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 12px 40px #18181508;
}
body { -webkit-font-smoothing: antialiased; }
::selection { color: var(--ink); background: var(--acid); }
h1, h2, h3 { font-family: var(--font-sans); text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.4vw, 3.5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.08; }
h2 { font-weight: 600; letter-spacing: -.025em; }
h3 { letter-spacing: -.015em; }
.config-intro h1, .order-head h1, .error-stage h1 { font-weight: 600; letter-spacing: -.04em; }
.kicker, .eyebrow { font-weight: 600; letter-spacing: .14em; }
.page-head { margin-bottom: 2.25rem; }
.workspace { padding-top: 2.75rem; scroll-margin-top: 1rem; }

/* A recognisable Tempo wave, with tenant logos retaining their own proportions. */
.tempo-lockup { display: inline-flex; align-items: center; gap: .7rem; }
.tempo-symbol { display: block; width: 58px; height: 28px; object-fit: contain; }
.tempo-wordmark { font-size: 1.15rem; font-weight: 600; letter-spacing: .12em; }
.brand { min-height: 52px; padding: .5rem .55rem; }
.rail { padding: 1.5rem .9rem; background-image: radial-gradient(ellipse at 0 0, #00b4dc0c, transparent 60%); }
.rail-nav { gap: .4rem; margin-top: 2.75rem; }
.nav-link { position: relative; min-height: 46px; border: 1px solid transparent; border-radius: 9px; color: #c0bfb8; font-weight: 500; transition: color .2s, background .2s, border-color .2s; }
.nav-link:hover { color: #fff; background: #ffffff09; border-color: #ffffff12; }
.nav-link.active { color: #f8f7f4; background: #00b4dc12; border-color: #00b4dc33; }
.nav-link.active::before { position: absolute; left: -1px; width: 3px; height: 18px; border-radius: 3px; background: var(--acid); content: ""; }
.nav-link.active svg { color: var(--acid); }
.rail-foot { border-color: #ffffff14; }
.user-chip > span { color: #f8f7f4; border-color: #ffffff20; background: #ffffff0d; }
.user-chip small { color: #a6a5a0; }
.company-logo-fallback { width: 90px; background: var(--paper); }
.company-logo-fallback img { width: 76px; }

/* Tactile controls: cyan calls to action, quieter secondary actions. */
.primary-button, .secondary-button, .danger-button, .icon-button { border-radius: 8px; font-weight: 600; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.primary-button { min-height: 44px; color: var(--ink); background: var(--acid); }
.primary-button:hover { color: var(--ink); background: color-mix(in srgb, var(--acid) 85%, white); box-shadow: 0 4px 16px #00b4dc18; }
.primary-button > svg, .stretched-link > svg { transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .primary-button:hover > svg:last-child, .stretched-link:hover > svg { transform: translateX(3px); }
}
.primary-button:disabled { box-shadow: none; }
.secondary-button { background: transparent; }
.secondary-button:hover { background: var(--surface); }
.icon-button.primary { color: var(--ink); background: var(--acid); }
input, select, textarea { border-color: var(--line); border-radius: 7px; transition: border-color .2s, box-shadow .2s; }
label { color: var(--ink); font-weight: 600; }
input::placeholder, textarea::placeholder { color: #77756f; }
:focus-visible { outline-color: var(--teal); }
.form-stack { gap: 1.15rem; }
.step-label span { color: var(--ink); }
.profile-panel::backdrop { background: #18181540; backdrop-filter: blur(3px); }
.tour-banner { border-color: var(--line); background: #eeede9; }
.tour-highlight { outline-color: var(--teal) !important; }
.queue-tabs a { font-size: .85rem; transition: background .2s, border-color .2s; }
.queue-tabs a:hover { border-color: var(--teal); }

/* Sign in: editorial scale above a ribbon that settles into place once. */
.auth-layout { gap: 0; padding: 18px; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.auth-brand-panel { min-height: calc(100dvh - 36px); padding: clamp(2.5rem, 5.5vw, 6rem); border-radius: 24px; background-color: #101917; background-image: radial-gradient(ellipse at 90% 95%, #00b4dc28, transparent 65%); isolation: isolate; }
.auth-brand-panel::after { content: none; }
.auth-brand-panel .brand-public { top: 2rem; left: 2.5rem; }
.auth-brand-copy { position: relative; z-index: 2; margin-top: -8rem; }
.auth-brand-panel .eyebrow { margin: 0 0 1.5rem; color: var(--acid); }
.auth-brand-panel .eyebrow::before { display: inline-block; width: 28px; height: 1px; margin-right: .7rem; vertical-align: middle; background: currentColor; content: ""; }
.auth-brand-panel h1 { max-width: 13ch; margin: 0; font-size: clamp(2.8rem, 4.7vw, 5.7rem); font-weight: 600; line-height: 1.03; letter-spacing: -.05em; }
.auth-brand-panel h1 > span { display: block; color: #62d9ef; font-weight: 400; }
.auth-orbit { position: absolute; z-index: -1; right: -19%; bottom: -27%; width: 105%; aspect-ratio: 1; border: 1px solid #8ce7f71a; border-radius: 50%; pointer-events: none; }
.auth-orbit::before, .auth-orbit::after { position: absolute; inset: 8%; border: 1px solid #8ce7f710; border-radius: inherit; content: ""; }
.auth-orbit::after { inset: 17%; }
.auth-wave { --wave-opacity: .95; position: absolute; z-index: -1; bottom: -.75rem; left: -14%; width: 128%; opacity: var(--wave-opacity); rotate: -9deg; mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.auth-wave img { display: block; width: 100%; height: auto; }
.auth-wave-ribbon { position: relative; filter: drop-shadow(0 16px 24px #00b4dc20); }
.auth-wave .auth-wave-echo { position: absolute; inset: 0; opacity: .17; transform: scale(1.09) translateY(22px); }
.auth-wave-halo { position: absolute; inset: 15% 5% -10%; border-radius: 50%; background: radial-gradient(ellipse, #00b4dc2b, transparent 65%); }
.auth-brand-caption { position: absolute; inset: auto 2.75rem 1.7rem; display: flex; justify-content: space-between; gap: 1rem; color: #a6a5a0; font-size: .6rem; letter-spacing: .16em; }
.auth-form-panel, .auth-single { background-image: none; }
.auth-form-panel { position: relative; min-height: calc(100dvh - 36px); padding: clamp(1.5rem, 4vw, 4rem); }
.auth-form-panel .auth-form { width: min(100%, 370px); padding: 0; border: 0; background: transparent; box-shadow: none; }
.auth-form h1, .auth-form h2 { margin-bottom: .4rem; font-size: clamp(2rem, 3vw, 2.65rem); font-weight: 600; letter-spacing: -.04em; }
.auth-form-heading { margin-bottom: .6rem; }
.auth-form-heading .kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.auth-form-heading .kicker::before { width: 6px; height: 6px; border-radius: 2px; background: var(--acid); content: ""; }
.auth-form-intro { margin: .7rem 0 0; font-size: .9rem; }
.auth-form label { gap: .6rem; font-size: .82rem; }
.auth-form input { min-height: 50px; background: #fff9; }
.auth-form .primary-button { min-height: 50px; margin-top: .35rem; justify-content: space-between; padding-inline: 1.1rem; }
.auth-form .quiet-link { justify-self: center; margin-top: .3rem; }
.auth-mobile-brand { display: none; }
.auth-single .auth-form { border-radius: 20px; background: var(--surface); }
.auth-single .brand-public { margin-bottom: 1.5rem; }

/* Catalog: one confident dark opening, followed by practical, airy content. */
.catalog-head { position: relative; overflow: hidden; align-items: end; min-height: 245px; padding: 2.5rem; border-radius: 20px; color: #f8f7f4; background: var(--rail); isolation: isolate; }
.catalog-head > div, .catalog-head > a { position: relative; z-index: 1; }
.catalog-head > div:first-of-type { max-width: 580px; }
.catalog-head h1 { font-size: clamp(2rem, 3.4vw, 3.5rem); }
.catalog-head p:not(.kicker) { color: #c0bfb8; }
.catalog-head .kicker { color: var(--acid); }
.catalog-head .secondary-button { flex-shrink: 0; color: #f8f7f4; border-color: #ffffff40; background: #181815cc; }
.catalog-head .secondary-button:hover { border-color: var(--acid); background: #242421; }
.catalog-wave { position: absolute; z-index: 0; right: -3rem; bottom: -2rem; width: 360px; height: auto; opacity: .3; pointer-events: none; }
.smart-drop { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 1.35rem 1.5rem; border-color: #bebdb6; border-radius: 14px; background: var(--surface); }
.smart-drop > .text-button { grid-column: 4; }
.smart-drop > output:empty { display: none; }
.smart-drop .file-result { grid-column: 2 / -1; }
.smart-drop.dragging { border-color: var(--teal); background: var(--accent-soft); }
.drop-icon { border: 1px solid var(--line); border-radius: 12px; color: var(--teal); background: var(--paper); }
.smart-drop p { font-size: .875rem; }
.catalog-grid { gap: 1.3rem; }
.product-card { border-radius: 14px; transition: border-color .25s, box-shadow .35s, transform .35s var(--ease-out); }
.product-card:hover { border-color: #a5c6cd; transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.product-visual { height: 185px; background-image: none; }
.visual-0 { background-color: #e9e8e3; }
.visual-1 { background-color: #e4eff1; }
.visual-2 { background-color: #e4e8ea; }
.visual-3 { background-color: #efece5; }
.product-visual > svg { width: 50px; height: 50px; color: #467580; stroke-width: 1; }
.product-visual > span { top: 1rem; left: 1rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.product-body { padding: 1.35rem; }
.product-body h2 { font-size: 1.15rem; line-height: 1.25; }
.product-body .kicker { font-size: .63rem; }
.product-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.product-meta strong { color: var(--ink); }
.product-card .inline-form { flex-wrap: wrap; align-items: end; }
.product-card .inline-form > label { flex: 1 1 100px; }
.product-card .inline-form > button { flex: 1 0 auto; }
.product-card .inline-form > small { flex-basis: 100%; }
.product-card .inline-form input, .product-card .inline-form select { min-width: 0; }

/* Production surfaces stay calm and information-dense. */
.metric-strip { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.metric-strip a { min-height: 115px; padding: 1.4rem; }
.metric-strip a:hover { background: var(--paper); }
.metric-strip strong { font-weight: 500; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.metric-strip span { font-size: .78rem; font-weight: 500; }
.table-head { min-height: 46px; background: #eeede966; letter-spacing: .06em; font-weight: 600; }
.table-row { min-height: 72px; font-size: .83rem; transition: background .2s; }
.table-row:hover { background: var(--surface); }
.company-monogram { color: var(--teal-dark); background: var(--accent-soft); font-family: var(--font-sans); border-radius: 8px; }
.config-form, .order-summary, .create-panel { box-shadow: var(--shadow-soft); }
.price-panel > div:not(.price-total) { background: var(--paper); }
.error-stage { border: 0; border-radius: 20px; background-image: none; }
.error-stage::after { border-color: var(--acid); opacity: .3; }

/* Company configuration has a stable index and one clear working column. */
.company-settings { max-width: 1180px; margin-inline: auto; }
.company-settings-head { align-items: center; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.company-settings-head h1 { overflow-wrap: anywhere; }
.company-settings-head .secondary-button { font-size: .8rem; }
.company-settings-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 2rem; }
.company-settings-nav { position: sticky; top: 2rem; display: grid; gap: .35rem; }
.company-settings-nav a { display: flex; align-items: baseline; gap: .6rem; padding: .75rem .25rem; color: var(--muted); font-size: .8rem; line-height: 1.4; transition: color .2s; }
.company-settings-nav a:hover, .company-settings-nav a:focus-visible { color: var(--teal); }
.company-settings-nav a > span { color: #85837b; font-size: .65rem; font-variant-numeric: tabular-nums; }
.company-settings-content, .company-settings-group { display: grid; min-width: 0; gap: 1.1rem; }
.company-settings-content { gap: 1.8rem; }
.company-settings-group, #order-policy { scroll-margin-top: 1.5rem; }
.company-settings .company-settings-card { min-width: 0; margin: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.company-settings-card .section-head { margin-bottom: 1rem; }
.company-settings-card h2 { font-size: 1.05rem; }
.company-settings-card .admin-form { margin-top: .5rem; }
.company-settings-card .admin-form[open] { border-top: 1px solid var(--line); }
.company-settings-card .form-stack > button { justify-self: start; font-size: .8rem; }
.company-settings-card label { font-size: .8rem; }
.company-settings-card small { color: var(--muted); font-size: .72rem; font-weight: 400; line-height: 1.5; }
.company-count { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: var(--paper); }
.company-member { border-bottom: 1px solid var(--line); }
.company-member > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; min-height: 76px; padding: .6rem 0; cursor: pointer; list-style: none; }
.company-member > summary::-webkit-details-marker { display: none; }
.company-member-name { flex: 1 1 145px; min-width: 0; }
.company-member-name strong, .company-member-name small { display: block; overflow-wrap: anywhere; }
.company-member-name strong { margin-bottom: .2rem; font-size: .86rem; font-weight: 600; }
.company-member-role { color: var(--muted); font-size: .72rem; }
.company-member-edit { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; color: var(--teal); font-size: .75rem; }
.company-member-edit svg { width: 14px; height: 14px; }
.company-member[open] > summary .company-member-edit svg { rotate: 180deg; }
.company-member-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem; margin-bottom: 1rem; border-radius: 9px; background: var(--paper); }
.company-member-controls select { min-width: 0; }
.company-demo-form { align-content: space-between; }
.company-account-action { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .6rem; }
.company-account-action > summary { justify-content: flex-start; color: var(--muted); font-size: .75rem; list-style: none; }
.company-account-action .form-stack { max-width: 320px; padding-top: .7rem; }
.company-settings .checkbox-row { display: flex; align-items: center; gap: .65rem; white-space: normal; min-height: 38px; }
.company-settings input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--teal); }
.company-domain-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.company-domain { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 7px; color: var(--teal-dark); background: var(--paper); font-size: .8rem; }
.company-domain-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; }
.company-domain-form button { min-height: 44px; font-size: .8rem; }
.company-settings .address-row { align-items: flex-start; padding: .75rem 0 1.1rem; }
.company-settings .address-row > svg { margin-top: .2rem; color: var(--teal); }
.company-settings .address-row strong { font-size: .85rem; }
.company-settings .address-row p { margin: .3rem 0 0; font-size: .8rem; }
.company-billing-entry { padding: .5rem 0 1rem; border-bottom: 1px solid var(--line); }
.company-billing-entry.inactive { opacity: .6; }
.company-billing-overview { display: flex; align-items: center; gap: .75rem; }
.company-billing-overview > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.company-billing-overview strong, .company-billing-overview small { display: block; }
.company-billing-overview strong { font-size: .85rem; }
.company-billing-overview small { margin-top: .3rem; }
.company-billing-editor { margin-top: .6rem; }
.company-billing-editor > summary { width: fit-content; padding-left: 0; color: var(--teal); font-size: .75rem; list-style: none; }
.company-settings .billing-edit-form { margin-block: .7rem; }
.company-settings .branding-preview { padding-block: .5rem 1rem; }
.company-settings .branding-preview strong { font-size: .9rem; }
.company-settings .advanced-settings > summary small { max-width: 42ch; }
.company-settings .advanced-settings textarea { max-width: 100%; }
.company-reference-fields { margin: 0; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--line); }
.company-reference-fields legend { margin-bottom: .7rem; font-size: .8rem; font-weight: 600; }
.company-policy-note { padding: 1rem; border-radius: 9px; background: var(--paper); }
.company-policy-note p { margin: 0; font-size: .75rem; }
.company-policy-note p + p { margin-top: .55rem; }
.company-retention-fields { gap: 1.25rem; }

/* Day pagination belongs to the timeline it changes. */
.calendar-pager-bottom { justify-content: center; gap: 1rem; margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.calendar-pager-bottom strong { font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.calendar-items { scroll-margin-top: 1rem; }

/* Content is always visible without JS; entrances only begin on intersection. */
.motion-enter { animation: tempo-arrive .6s var(--ease-out) both; }
.motion-enter[data-reveal-order="1"] { animation-delay: .05s; }
.motion-enter[data-reveal-order="2"] { animation-delay: .1s; }
.auth-wave.motion-enter { animation-name: tempo-wave-arrive; animation-duration: 1.2s; }
@keyframes tempo-arrive { from { opacity: .35; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes tempo-wave-arrive { from { opacity: .2; translate: 0 18px; } to { opacity: var(--wave-opacity); translate: 0 0; } }

@media (max-width: 1080px) {
  .auth-brand-panel { padding: 2.75rem; }
  .auth-brand-panel h1 { font-size: 3.4rem; }
  .catalog-head { padding: 2rem; }
  .company-settings-layout { grid-template-columns: 135px minmax(0, 1fr); gap: 1.25rem; }
  .company-member-role { flex-basis: calc(100% - 3rem); margin-left: 3rem; order: 2; }
}
@media (max-width: 760px) {
  .workspace { padding: 1.5rem 1rem; scroll-margin-top: 76px; }
  .rail { height: calc(72px + env(safe-area-inset-bottom)); padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); border-top-color: #ffffff20; }
  .app-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .rail-nav { height: 100%; margin-top: 0; gap: .2rem; }
  .nav-link { min-height: 52px; min-width: 64px; border: 0; border-radius: 8px; padding: .35rem .45rem; }
  .nav-link.active { color: var(--acid); background: #00b4dc12; }
  .nav-link.active::before { content: none; }
  .topbar { height: 60px; background: color-mix(in srgb, var(--paper) 95%, transparent); }
  .topbar .tempo-lockup { gap: .4rem; }
  .topbar .tempo-symbol { width: 36px; height: 24px; }
  .topbar .tempo-wordmark { font-size: .95rem; letter-spacing: .07em; }
  .mobile-profile { font-size: .8rem; }
  .auth-layout { min-height: 100dvh; padding: 10px; }
  .auth-brand-panel { display: flex; min-height: 280px; padding: 1.5rem; border-radius: 20px; }
  .auth-brand-panel .brand-public { top: .8rem; left: 1rem; }
  .auth-brand-copy { margin: 4.5rem 0 1.5rem; }
  .auth-brand-panel .eyebrow { margin-bottom: .75rem; font-size: .6rem; }
  .auth-brand-panel h1 { max-width: 15ch; font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .auth-wave { --wave-opacity: .65; width: 110%; left: 9%; bottom: -3rem; }
  .auth-orbit { width: 80%; right: -20%; bottom: -30%; }
  .auth-brand-caption { display: none; }
  .auth-form-panel { min-height: 0; padding: 1.75rem 1rem 2.5rem; }
  .auth-mobile-brand { display: none; }
  .auth-form-panel .auth-form { width: min(100%, 400px); }
  .auth-form-heading { margin-bottom: .1rem; }
  .auth-form-heading .kicker { display: none; }
  .auth-form h2 { font-size: 1.9rem; }
  .catalog-head { min-height: 220px; gap: 1.5rem; padding: 1.75rem; border-radius: 16px; }
  .catalog-head .secondary-button { width: fit-content; }
  .catalog-wave { right: -5rem; bottom: -1rem; width: 290px; opacity: .22; }
  .smart-drop { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.2rem; }
  .smart-drop > .secondary-button, .smart-drop > .text-button, .smart-drop .file-result { grid-column: 1 / -1; }
  .metric-strip a { min-height: 100px; padding: 1rem; }
  .metric-strip a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .company-settings-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .company-settings-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: #eeede966; }
  .company-settings-nav a { padding: .5rem; font-size: .75rem; }
  .company-settings-head { padding-bottom: 1.3rem; }
  .company-settings-head > form { width: 100%; }
  .company-settings .company-settings-card { padding: 1.1rem; }
  .company-settings-group, #order-policy { scroll-margin-top: 76px; }
  .company-member-controls { grid-template-columns: minmax(0, 1fr); padding: .9rem; }
  .company-member-role { font-size: .7rem; }
  .company-domain-form { grid-template-columns: minmax(0, 1fr); }
  .company-domain-form button { justify-self: start; }
  .company-billing-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .company-billing-overview > div { grid-column: 1; grid-row: 1; }
  .company-billing-overview > form { grid-column: 2; grid-row: 1; }
  .company-billing-overview > .badge { grid-column: 1; grid-row: 2; justify-self: start; }
  .calendar-items { scroll-margin-top: 76px; }
  .calendar-pager-bottom { gap: .35rem; padding: .5rem; }
  .calendar-pager-bottom strong { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-enter, .auth-wave.motion-enter { animation: none; }
  .primary-button > svg, .stretched-link > svg, .product-card:hover { transform: none; }
}
@media print {
  .motion-enter { animation: none; opacity: 1; translate: none; }
  .catalog-wave, .auth-wave { display: none; }
}