/*
 * Alcor app UI. One interface standard for every Alcor product, in the main site's language.
 *
 * How it works: tokens below, then one block per product that maps that app's own classes onto
 * the standard. Selectors carry an `html` prefix so they win over app styles that print later
 * (some apps inline their CSS in the body). Phone layout for heavy editors belongs to AlcorFrame.
 *
 * The standard:
 *   type      Segoe UI stack; headings 700 at -.02em (h1) / -.03em (h2)
 *   kicker    gold, 12px, 800, uppercase, .06em
 *   header    64px sticky glass bar, "✦ Alcor" + product name, quiet 13px nav, one primary action
 *   buttons   44px, 6px radius; primary cyan on ink, secondary ghost with a line
 *   surfaces  square #0b0d13 panels on #050608, 1px warm line
 *   focus     2px cyan ring, 2px offset
 */

:root {
  --aui-void: #050608;
  --aui-surface: #0b0d13;
  --aui-surface-2: #11131b;
  --aui-line: rgba(246, 240, 228, .12);
  --aui-line-strong: rgba(246, 240, 228, .24);
  --aui-paper: #f6f0e4;
  --aui-muted: rgba(246, 240, 228, .74);
  --aui-quiet: rgba(246, 240, 228, .56);
  --aui-cyan: #53d9d4;
  --aui-gold: #d7b56d;
  --aui-violet: #b38cff;
  --aui-ink: #06110f;
  --aui-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --aui-gutter: clamp(16px, 1.7vw, 24px);
  --aui-h1: clamp(2.6rem, 1rem + 4.4vw, 5rem);
  --aui-h2: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
  --aui-radius: 6px;
}

/* ---------- Reusable components (for new markup) ---------- */

html .aui-kicker { display: block; margin: 0 0 14px; color: var(--aui-gold); font: 800 12px/1.5 var(--aui-font); letter-spacing: .06em; text-transform: uppercase; }
html .aui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--aui-line-strong); border-radius: var(--aui-radius); background: rgba(246, 240, 228, .04); color: var(--aui-paper); font: 800 13px/1 var(--aui-font); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
html .aui-button:hover { transform: translateY(-1px); border-color: rgba(246, 240, 228, .5); }
html .aui-button--primary { border-color: var(--aui-cyan); background: var(--aui-cyan); color: var(--aui-ink); }
html .aui-button--primary:hover { border-color: var(--aui-cyan); box-shadow: 0 12px 30px -14px rgba(83, 217, 212, .7); }
html .aui-panel { border: 1px solid var(--aui-line); background: var(--aui-surface); }

/* ---------- App landing pages: one chrome for Music, QR, Translate, Reconcile, Map, ERP ---------- */

/* Page: house type and ground. */
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell),
html body:is(.alcor-qr, .alcor-translate, .alcor-reconcile) { font-family: var(--aui-font); }
html body:is(.alcor-qr, .alcor-translate, .alcor-reconcile),
html :is(.am-landing, .aq-page:not(.aq-editor-page), .at-landing, .aerp-page) { background-color: var(--aui-void); }
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell, body.alcor-reconcile) :focus-visible { outline: 2px solid var(--aui-cyan); outline-offset: 2px; }

/* Header: 64px sticky glass bar under the parent bar. Map keeps its overlay header (it floats on the map). */
html :is(.am-site-header, .aq-header, .at-header, .ar-header, .aerp-header) {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; height: auto; margin: 0; padding: 0 var(--aui-gutter);
  border-bottom: 1px solid var(--aui-line);
  background: rgba(5, 6, 8, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-family: var(--aui-font);
}

/* Lockup: gold star, "Alcor" heavy, product name regular. */
html :is(.am-site-header .aa-brand, .aq-brand, .at-brand, .ar-brand, .aerp-brand, .am-brand) {
  display: inline-flex; align-items: center; gap: 0; color: var(--aui-paper);
  font: 800 18px/1 var(--aui-font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
}
html :is(.aq-brand, .at-brand, .ar-brand) span { color: var(--aui-paper); font-weight: 400; }
html :is(.aq-brand, .at-brand, .ar-brand)::before { content: "\2726"; margin-right: 9px; color: var(--aui-gold); font-weight: 400; }
html .am-site-header .aa-brand .aa-brand-mark { margin-right: 9px; color: var(--aui-gold); font-weight: 400; }
html .am-site-header .aa-brand span:last-child { font-weight: 400; }
html .am-site-header .aa-brand strong, html .aerp-brand strong { font-weight: 800; }
html .aerp-brand { font-weight: 400; }
html .aerp-brand .aerp-brand-mark { margin-right: 9px; color: var(--aui-gold); font-weight: 400; }
html .am-brand { gap: .4em; }
html .am-brand > span { color: var(--aui-gold); }

/* Header nav: quiet 13px links. */
html :is(.am-site-header nav, .aq-nav, .at-nav, .ar-nav) { display: flex; align-items: center; gap: 22px; }
html :is(.am-site-header nav a, .aq-nav a:not(.aq-button), .at-nav a:not(.at-button), .ar-nav a) {
  color: var(--aui-muted); font: 600 13px/1 var(--aui-font); text-decoration: none; transition: color .2s ease;
}
html :is(.am-site-header nav a, .aq-nav a:not(.aq-button), .at-nav a:not(.at-button), .ar-nav a):hover { color: var(--aui-paper); }

/* Kickers: the house gold label. */
html :is(.am-page .aa-kicker, .aq-eyebrow, .at-eyebrow, .ar-eyebrow, .am-kicker, .aerp-kicker) {
  display: block; margin: 0 0 14px; color: var(--aui-gold);
  font: 800 12px/1.5 var(--aui-font); letter-spacing: .06em; text-transform: uppercase;
}

/* Hero headline and lede. */
html :is(.am-hero h1, .aq-hero h1, .at-hero h1, .ar-intro h1, .am-intro h1, .aerp-intro h1) {
  margin: 0 0 20px; color: var(--aui-paper);
  font: 700 var(--aui-h1)/.98 var(--aui-font); letter-spacing: -.02em; text-wrap: balance;
}
html :is(.am-hero h1 + p, .aq-hero h1 + p, .at-lede, .ar-lede, .am-intro h1 + p, .aerp-intro h1 + p) {
  max-width: 60ch; color: var(--aui-muted); font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--aui-font);
}

/* Section headings. */
html :is(.am-section h2, .aq-section h2, .at-section h2, .am-details h2) {
  margin: 0 0 16px; color: var(--aui-paper);
  font: 700 var(--aui-h2)/1.06 var(--aui-font); letter-spacing: -.03em; text-wrap: balance;
}

/* Buttons: primary cyan, secondary ghost. Landing CTAs get the house size and caps. */
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell, body.alcor-reconcile, body.alcor-qr, body.alcor-translate) :is(.am-primary, .am-secondary, .aa-header-action, .aq-button, .at-button, .ar-button, .aerp-cta, .am-enter) {
  border-radius: var(--aui-radius); font-family: var(--aui-font);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell, body.alcor-reconcile, body.alcor-qr, body.alcor-translate) :is(.am-primary, .aa-header-action, .aq-button-primary, .at-button-primary, .ar-button-primary, .aerp-cta) {
  border: 1px solid var(--aui-cyan); background: var(--aui-cyan); color: var(--aui-ink);
}
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell, body.alcor-reconcile, body.alcor-qr, body.alcor-translate) :is(.am-primary, .aa-header-action, .aq-button-primary, .at-button-primary, .ar-button-primary, .aerp-cta):hover {
  background: #6fe3de; border-color: #6fe3de; color: var(--aui-ink); box-shadow: 0 12px 30px -14px rgba(83, 217, 212, .7);
}
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell, body.alcor-reconcile, body.alcor-qr, body.alcor-translate) :is(.am-secondary, .aq-button:not(.aq-button-primary), .at-button:not(.at-button-primary), .ar-button:not(.ar-button-primary), .am-enter) {
  border: 1px solid var(--aui-line-strong); background: rgba(246, 240, 228, .04); color: var(--aui-paper);
}
html :is(.am-page, .aq-page, .at-page, .aerp-page, .am-shell, body.alcor-reconcile, body.alcor-qr, body.alcor-translate) :is(.am-secondary, .aq-button:not(.aq-button-primary), .at-button:not(.at-button-primary), .ar-button:not(.ar-button-primary), .am-enter):hover { border-color: rgba(246, 240, 228, .5); }
html :is(.am-hero .am-primary, .am-hero .am-secondary, .am-license > .am-primary, .aq-hero .aq-button, .aq-nav .aq-button, .at-hero .at-button, .at-nav .at-button, .am-site-header .aa-header-action, .aerp-cta, .am-enter) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
html :is(.am-hero .am-primary, .am-hero .am-secondary, .aq-hero .aq-button, .at-hero .at-button, .am-enter):hover { transform: translateY(-1px); }

/* Content cards: square house panels. Screenshots keep a small radius. */
html :is(.am-features article, .am-card, .aq-feature-grid article, .aq-hero-card) {
  border: 1px solid var(--aui-line); border-radius: 0; background: var(--aui-surface); box-shadow: none;
}
html :is(.am-hero-shot, .am-card-art) { border-radius: 8px; border-color: var(--aui-line); }
html :is(.am-features h3, .aq-feature-grid strong) { color: var(--aui-paper); font: 700 18px/1.25 var(--aui-font); }
html :is(.am-features p, .aq-feature-grid p, .am-section > p, .aq-section-lede) { color: var(--aui-muted); }

/* Phones: one row header (nav links drop; the primary action stays), full-width hero buttons. */
@media (max-width: 760px) {
  html :is(.am-site-header, .aq-header, .at-header, .ar-header, .aerp-header) { min-height: 56px; flex-wrap: nowrap; }
  html :is(.am-site-header nav, .ar-nav, .aerp-status) { display: none; }
  html :is(.aq-nav a:not(.aq-button), .at-nav a:not(.at-button)) { display: none; }
  html :is(.am-hero .am-actions, .aq-hero .aq-actions, .at-hero .at-actions) { display: grid; grid-template-columns: 1fr; gap: 10px; }
  html :is(.am-hero .am-actions a, .aq-hero .aq-actions .aq-button, .at-hero .at-actions .at-button) { width: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html :is(.am-primary, .am-secondary, .aa-header-action, .aq-button, .at-button, .ar-button, .aerp-cta, .am-enter) { transition: none; }
  html :is(.am-hero .am-primary, .am-hero .am-secondary, .aq-hero .aq-button, .at-hero .at-button, .am-enter):hover { transform: none; }
}

/* ---------- Closing block on every app landing: hire us, or try another tool ---------- */

html .aui-close { border-top: 1px solid var(--aui-line); background: radial-gradient(ellipse 60% 120% at 12% 0, rgba(83, 217, 212, .08), transparent 60%), var(--aui-void); font-family: var(--aui-font); color: var(--aui-paper); }
html .aui-close__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--aui-gutter); }
html .aui-close h2 { margin: 0 0 16px; font: 700 var(--aui-h2)/1.06 var(--aui-font); letter-spacing: -.03em; text-wrap: balance; }
html .aui-close__cta p { max-width: 52ch; margin: 0; color: var(--aui-muted); font-size: 17px; line-height: 1.6; }
html .aui-close__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
html .aui-close__apps ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--aui-line); background: var(--aui-line); }
html .aui-close__apps a { display: grid; gap: 4px; min-height: 72px; padding: 14px 16px; background: var(--aui-surface); color: var(--aui-paper); text-decoration: none; transition: background-color .2s ease; }
html .aui-close__apps a:hover { background: var(--aui-surface-2); }
html .aui-close__apps strong { font-size: 15px; font-weight: 700; }
html .aui-close__apps a span { color: var(--aui-quiet); font-size: 13px; }
html .aui-close__apps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  html .aui-close__inner { grid-template-columns: 1fr; }
  html .aui-close__actions { display: grid; grid-template-columns: 1fr; }
  html .aui-close__actions .aui-button { width: 100%; }
}