/* Hallmark · macrostructure: Split Studio · tone: technical + restrained · anchor hue: circuit cyan
 * pre-emit critique: P4 H4 E4 S4 R5 V3 · genre: modern-minimal · theme: established Cirnexa cool-white
 * audience: overseas B2B component buyers · use: exact-part RFQ · nav: N5 retained by user · footer: Ft2
 * enrichment: existing semiconductor illustration, not inventory proof · motion: press + tab crossfade
 * Preserves the user's chosen split layout, typography and palette instead of rotating the design.
 */
@import url("./tokens.css");
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-padding-top: 7rem; background: var(--color-paper); }
body { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: var(--color-transparent); }
button, .nav-link, .header-action, .wordmark, .contact-email, .site-footer a { white-space: nowrap; }
button { border: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
h1 { font-size: var(--text-display); line-height: 1.1; letter-spacing: -.055em; }
h2 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.035em; }
h3 { font-size: var(--text-lg); line-height: 1.3; letter-spacing: -.03em; }
[hidden] { display: none !important; }
:where(a,button,input,textarea,summary):focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 3px; }
.skip-link { position: fixed; top: 0; inset-inline-start: var(--space-sm); z-index: var(--z-sticky); padding: var(--space-xs); background: var(--color-ink); color: var(--color-paper); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: fixed; inset-block-start: .75rem; inset-inline-start: 50%; transform: translateX(-50%); width: min(32rem, calc(100% - 2rem)); min-height: 4rem; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-round); background: var(--color-nav); color: var(--color-ink); backdrop-filter: blur(12px); box-shadow: 0 4px 20px var(--color-shadow); z-index: var(--z-sticky); }
.wordmark, .footer-wordmark { text-decoration: none; font-weight: 600; letter-spacing: .17em; }
.wordmark { font-size: var(--text-base); display: flex; align-items: center; min-height: 44px; }
.site-header nav { display: flex; align-items: center; gap: var(--space-md); }
.nav-link { display: none; font-size: var(--text-sm); text-decoration: none; min-height: 44px; align-items: center; }
.header-action { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border: var(--rule-thin) solid var(--color-ink); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; text-decoration: none; min-height: 44px; }
.header-action:active, button:active { transform: translateY(1px); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); padding-block-start: 6.5rem; border-bottom: var(--rule-thin) solid var(--color-rule); }
.hero__story { padding: var(--space-lg) var(--space-md) var(--space-md); position: relative; min-width: 0; background-color: var(--color-paper); color: var(--color-ink); background-image: linear-gradient(var(--color-grid) var(--rule-thin), var(--color-transparent) var(--rule-thin)), linear-gradient(90deg,var(--color-grid) var(--rule-thin),var(--color-transparent) var(--rule-thin)); background-size: 24px 24px; }
.hero-copy { position: relative; z-index: var(--z-base); }
.hero-lede { margin-block-start: var(--space-md); font-size: var(--text-base); font-weight: 500; max-width: 36ch; }
.hero-description { color: var(--color-muted); max-width: 52ch; margin-block-start: var(--space-xs); font-size: var(--text-sm); }
.chip-stage { display: flex; align-items: center; justify-content: center; margin-block: var(--space-sm); height: 12rem; }
.chip-stage img { width: auto; max-width: 90%; max-height: 100%; height: auto; object-fit: contain; }
.hero-scope { display: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.hero-scope span { margin-inline: var(--space-2xs); }
.quote-panel { min-width: 0; padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); color: var(--color-ink); scroll-margin-top: 7rem; }
.quote-head { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-sm); }
.quote-head p { color: var(--color-muted); font-size: var(--text-sm); }
.rfq-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-block-end: var(--space-md); border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-sm); overflow: clip; }
.rfq-tabs button { min-height: var(--control-height); padding: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; background: var(--color-paper); color: var(--color-ink); }
.rfq-tabs button + button { border-inline-start: var(--rule-thin) solid var(--color-rule); }
.rfq-tabs button[aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-accent-ink); box-shadow: inset 0 -2px 0 var(--color-focus); }
.rfq-tabs button:focus-visible { outline-offset: -4px; }
.part-row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-xs); position: relative; }
.part-row + .part-row { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-top: var(--rule-thin) solid var(--color-rule); }
.field { min-width: 0; }
.field label { display: block; margin-block-end: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
.field label span { color: var(--color-muted); }
input:not([type="file"]), textarea { width: 100%; min-width: 0; padding: var(--space-xs); min-height: var(--control-height); border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-base); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; font-size: var(--text-sm); }
input:focus-visible, textarea:focus-visible { outline-offset: 1px; }
input:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[data-state="success"] { border-color: var(--color-success); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-ink); }
.field-help { min-height: 1.6em; margin-block-start: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.6; }
.field-help.is-error, .form-feedback.is-error { color: var(--color-error); }
.text-button { background: var(--color-transparent); color: var(--color-ink); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 44px; padding: 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.add-part { margin-block-start: var(--space-3xs); }
.remove-part { justify-self: start; color: var(--color-muted); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.part-limit { font-size: var(--text-xs); color: var(--color-muted); }
.email-field { margin-block: var(--space-2xs) var(--space-sm); }
.optional-details { border-block: var(--rule-thin) solid var(--color-rule); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 3.25rem; font-size: var(--text-sm); font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: var(--text-lg); font-weight: 400; flex-shrink: 0; }
details[open] > summary > span { transform: rotate(45deg); }
.optional-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-md); padding-block: var(--space-xs) var(--space-md); }
textarea { resize: vertical; min-height: 6rem; }
.sharing-note { display: flex; align-items: flex-start; gap: var(--space-2xs); margin-block: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.sharing-note svg { flex: 0 0 16px; width: 16px; height: 16px; margin-block-start: 2px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.submit-button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); width: 100%; min-height: var(--control-height); border-radius: var(--radius-sm); background: var(--color-button); color: var(--color-button-ink); font-size: var(--text-sm); font-weight: 600; transition: transform var(--dur-instant) var(--ease-out); }
.submit-button:focus-visible { outline-color: var(--color-ink); }
.submit-button[data-state="loading"] .button-icon { width: 16px; height: 16px; border: var(--rule-bold) solid var(--color-button-ink); border-inline-end-color: var(--color-transparent); border-radius: var(--radius-round); animation: spin 800ms linear infinite; }
.submit-button[data-state="error"] { background: var(--color-error); color: var(--color-button-ink); }
.submit-button[data-state="success"] { background: var(--color-success); color: var(--color-button-ink); }
.form-feedback { color: var(--color-muted); font-size: var(--text-xs); }
.form-feedback:not(:empty) { margin-block-start: var(--space-xs); }
.file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); position: relative; min-height: 11rem; padding: var(--space-md); border: var(--rule-thin) dashed var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); text-align: center; }
.file-drop svg { width: 28px; height: 28px; fill: none; stroke: var(--color-focus); stroke-width: 1.5; margin-block-end: var(--space-2xs); }
.file-drop strong { font-size: var(--text-sm); max-width: 100%; overflow-wrap: anywhere; }
.file-drop > span { font-size: var(--text-xs); color: var(--color-muted); }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.file-drop:has(input:focus-visible) { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 3px; }
.file-drop:has(input[aria-invalid="true"]) { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-ink); }
.file-drop.has-file { border-style: solid; }
.receipt { padding-block: var(--space-md); }
.receipt__check { width: 3rem; height: 3rem; display: grid; place-items: center; font-size: var(--text-xl); color: var(--color-success); background: var(--color-success-soft); border-radius: var(--radius-round); margin-block-end: var(--space-md); }
.receipt h3 { margin-block-end: var(--space-sm); }
.receipt p { font-size: var(--text-sm); color: var(--color-muted); }
.receipt dl { margin-block: var(--space-lg); font-size: var(--text-sm); }
.receipt dt { color: var(--color-muted); }
.receipt dd { margin-inline-start: 0; margin-block-end: var(--space-sm); overflow-wrap: anywhere; }
.section-shell { padding-inline: var(--space-md); }
.about { padding-block: var(--space-2xl); display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-xl); }
.about-copy { display: grid; gap: var(--space-md); }
.about-copy h2 { font-size: var(--text-xl); max-width: 26ch; }
.about-copy p { color: var(--color-muted); max-width: 62ch; }
.contact { border-inline-start: var(--rule-bold) solid var(--color-rule); padding-inline-start: var(--space-md); }
.contact > p { margin-block: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.contact-email { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-lg); font-size: var(--text-base); text-decoration-thickness: var(--rule-thin); text-underline-offset: 6px; }
.contact-channels { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); margin-block-start: var(--space-xs); }
.contact-channels a { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-sm); text-decoration-thickness: var(--rule-thin); text-underline-offset: 5px; white-space: nowrap; }
.footer-channels { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.company-identity { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-top: var(--rule-thin) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.company-identity strong { color: var(--color-ink); letter-spacing: .1em; }
.faq { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-2xl); background: var(--color-paper-2); color: var(--color-ink); }
.faq h2 { font-size: var(--text-xl); max-width: 24ch; }
.faq-list details { border-top: var(--rule-thin) solid var(--color-rule); }
.faq-list details:last-child { border-bottom: var(--rule-thin) solid var(--color-rule); }
.faq-list summary { padding-block: var(--space-xs); font-size: var(--text-sm); }
.faq-list p { color: var(--color-muted); font-size: var(--text-sm); padding-block: 0 var(--space-md); max-width: 64ch; }
.site-footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding-block: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
.footer-wordmark { color: var(--color-ink); font-size: var(--text-base); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.mode-in { animation: mode-in var(--dur-short) var(--ease-out); }
@keyframes mode-in { from { opacity: .5; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  input:not([type="file"]):hover, textarea:hover { background: var(--color-paper-2); color: var(--color-ink); }
  .header-action:hover { background: var(--color-paper-3); color: var(--color-ink); }
  .submit-button:hover:not(:disabled) { background: var(--color-button-hover); color: var(--color-button-ink); }
  .text-button:hover, .nav-link:hover, .site-footer a:hover, .contact-email:hover, .contact-channels a:hover { color: var(--color-focus); }
  summary:hover { color: var(--color-focus); }
  .file-drop:hover { background: var(--color-paper-3); color: var(--color-ink); }
  .rfq-tabs button:hover:not([aria-selected="true"]) { background: var(--color-paper-3); color: var(--color-ink); }
}
@media (min-width: 22rem) { .part-row { grid-template-columns: minmax(0,2.8fr) minmax(0,1fr); } .remove-part { grid-column: 1 / -1; } }
@media (min-width: 40rem) {
  .nav-link { display: flex; }
  .hero__story, .quote-panel, .section-shell { padding-inline: var(--space-xl); }
  .hero__story { padding-block-start: var(--space-xl); }
  .chip-stage { height: 19rem; }
  .hero-scope { display: block; }
  .optional-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .optional-grid__wide { grid-column: 1 / -1; }
  .site-footer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
  .footer-copyright { margin-inline-start: auto; }
}
@media (min-width: 54rem) {
  .hero { grid-template-columns: minmax(0,1.03fr) minmax(0,1fr); }
  .hero__story { display: flex; flex-direction: column; padding: var(--space-lg) var(--space-xl) var(--space-xl); border-inline-end: var(--rule-thin) solid var(--color-rule); }
  .hero-lede { font-size: var(--text-md); max-width: 40ch; }
  .hero-description { max-width: 49ch; }
  .chip-stage { height: 17rem; margin-block: var(--space-sm) var(--space-2xs); flex-grow: 1; }
  .chip-stage img { max-height: 17rem; }
  .hero-scope { font-size: var(--text-xs); margin-block-start: var(--space-sm); }
  .quote-panel { padding: var(--space-lg) var(--space-xl) var(--space-xl); }
  .quote-head h2 { font-size: var(--text-2xl); }
  .about { grid-template-columns: minmax(0,1.25fr) minmax(0,.7fr); gap: var(--space-3xl); padding-block: var(--space-3xl); }
  .about-copy h2 { font-size: var(--text-display-s); }
  .about-copy p { font-size: var(--text-base); }
  .faq { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--space-3xl); }
  .faq h2 { font-size: var(--text-2xl); }
}
@media (min-width: 90rem) { .hero__story, .quote-panel, .section-shell { padding-inline: var(--space-2xl); } .hero-description { font-size: var(--text-base); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Keep both public destinations reachable on narrow screens. */
.site-header--inventory-enabled { width: min(36rem, calc(100% - 2rem)); }
.site-header--inventory-enabled .nav-link { display: inline-flex; }
@media (max-width: 600px) {
  .site-header--inventory-enabled { min-height: 58px; padding: 5px 7px 5px 16px; }
  .site-header--inventory-enabled .wordmark { font-size: 12px; letter-spacing: .12em; }
  .site-header--inventory-enabled nav { gap: 8px; }
  .site-header--inventory-enabled .nav-link { font-size: 10px; }
  .site-header--inventory-enabled .header-action { min-height: 40px; padding: 5px 8px; gap: 6px; font-size: 9px; }
}
@media (max-width: 360px) { .site-header--inventory-enabled .header-action > span { display: none; } }

/* Component-scope addition: preserve the page, adapt each RFQ line to its panel. */
.quote-panel { container-type: inline-size; }
.part-row { grid-template-columns: minmax(0, 1fr); }
.remove-part { grid-column: 1 / -1; }
@container (min-width: 32rem) {
  .part-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(6rem, .65fr); }
}

.form-trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.receipt-reference { margin-block-start: var(--space-sm); }
.receipt-reference strong { font-family: var(--font-mono); color: var(--color-ink); }