/* Server-rendered site fallbacks that sit after the ported marketing CSS.
   The React header toggles its menus with JavaScript; the port uses native
   <details> disclosures, so these rules supply the missing open/closed states. */

.landing-product > summary,
.landing-mobile-menu > summary { list-style: none; }

.landing-product > summary::-webkit-details-marker,
.landing-mobile-menu > summary::-webkit-details-marker { display: none; }

.landing-product > summary::marker,
.landing-mobile-menu > summary::marker { content: ""; }

/* The product panel fades in and out like the AlignUI reference. display is a
   discrete property, so allow-discrete keeps the panel rendered until the
   opacity transition finishes; @starting-style supplies the entering frame.
   The theme layer in overrides.css sets this panel's transition inside a
   nested :root rule, so the fade needs a matching-specificity selector. */
.landing-product > .landing-product-links {
  display: none;
  opacity: 0;
  transform: translateY(-6px);
}
.marketing .landing-product > .landing-product-links {
  transition: opacity .3s ease, transform .3s ease, display .3s allow-discrete;
}
.landing-product[open] > .landing-product-links {
  display: block;
  opacity: 1;
  transform: none;
}
@starting-style {
  .landing-product[open] > .landing-product-links {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marketing .landing-product > .landing-product-links { transition: none; }
}
.landing-product[open] > .landing-product-toggle svg { transform: rotate(180deg); }

.landing-menu-toggle { cursor: pointer; }
.landing-menu-toggle span { display: inline-flex; align-items: center; }
.landing-mobile-menu[open] > .landing-menu-toggle .landing-menu-toggle-open { display: none; }
.landing-mobile-menu:not([open]) > .landing-menu-toggle .landing-menu-toggle-close { display: none; }

/* The React header only renders the mobile menu below the compact breakpoint;
   hiding the empty desktop wrapper keeps the action row aligned. */
@media (min-width: 961px) {
  .landing-mobile-menu { display: none; }
}

/* FAQ disclosures: every item is an independent native <details>, so any
   number can stay open at once. These rules add the open/closed states the
   ported marketing CSS lacks; static/js/faq-disclosure.js animates the open
   and close. */
.p2-question-item > summary { list-style: none; }
.p2-question-item > summary::-webkit-details-marker { display: none; }
.p2-question-item > summary::marker { content: ""; }
.p2-question-item[open] .p2-question-trigger svg { transform: rotate(180deg); }
.p2-question-item[data-faq-closing] .p2-question-trigger svg { transform: none; }

/* Calculator: the React role picker and time-unit Select are JavaScript
   comboboxes; the port uses native <details> and <select> with these states. */
.calculator-role-picker > summary { list-style: none; }
.calculator-role-picker > summary::-webkit-details-marker { display: none; }
.calculator-role-picker > summary::marker { content: ""; }
.calculator-role-picker > .ui-popup { position: absolute; top: calc(100% + 6px); left: 0; }
.calculator-role-picker[open] .calculator-add-role > svg:last-child { rotate: 180deg; }
/* Native select mirrors the glass .ui-select-trigger control from the React
   theme (see the nested :root rules in overrides.css) with a CSS chevron. */
.calculator-time-select > select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 7px 30px 7px 9px;
  --hero-button-start: var(--ui-surface-control);
  --hero-button-end: var(--ui-surface-control);
  color: var(--ui-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237453a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--hero-button-start), var(--hero-button-end));
  background-repeat: no-repeat;
  background-position: right 9px center, 0 0;
  background-size: 16px 16px, auto;
  border: 1px solid var(--ui-edge);
  border-radius: 14px;
  box-shadow: var(--ui-panel-shadow);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  appearance: none;
  cursor: pointer;
}

/* Homepage preview: the React setting control is a JavaScript combobox; the
   port uses a native <select> with the same glass trigger treatment and a CSS
   chevron. */
.workflow-settings select.workflow-setting-select {
  width: 100%;
  min-height: 44px;
  padding: 9px 32px 9px 12px;
  --hero-button-start: var(--ui-surface-control);
  --hero-button-end: var(--ui-surface-control);
  color: var(--ui-ink);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237453a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--hero-button-start), var(--hero-button-end));
  background-repeat: no-repeat;
  background-position: right 12px center, 0 0;
  background-size: 16px 16px, auto;
  border: 1px solid var(--ui-edge);
  border-radius: 14px;
  box-shadow: var(--ui-panel-shadow);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  appearance: none;
  cursor: pointer;
}
@media (hover: hover) {
  .workflow-settings select.workflow-setting-select:not(:disabled):hover {
    --hero-button-start: var(--ui-surface-control-hover);
    --hero-button-end: var(--ui-surface-control-hover);
    box-shadow: inset 0 1px 0 #ffffffcc, 0 8px 22px #49365529, 0 2px 6px #49365514;
  }
}
.workflow-settings select.workflow-setting-select:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 4px;
}

/* The React bundle imports calculator.css before its theme overrides, so the
   later .marketing h2 rule wins there for the editor heading. Mirror that
   cascade outcome so the server-rendered page matches the React rendering. */
.marketing .calculator-editor-heading h2 { font-size: clamp(32px, 3.7vw, 51px); letter-spacing: -1.9px; line-height: 1.12; }
@media (max-width: 760px) {
  .marketing .calculator-editor-heading h2 { font-size: 34px; letter-spacing: -1.4px; }
}