/* ==========================================================================
   Lithography  (/products/manufacturing/lithography/)

   Small, because most of this page is not its own. Ten of its fourteen
   sections are the shared Manufacturing family patterns in
   product-family.css, linked just above this sheet; the banner and breadcrumb,
   FAQ accordion, section headings, closing CTA and pending panel come from
   stylesheets already linked. What is left here is the two things only this
   page has - the feedback loop under the flow, and the TCAD bridge strip -
   plus this page's band run and four layout adjustments for the pending
   panels.

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100; --ps-color-neutral-2-000 is reserved for the
   closing CTA. No two adjacent bands share a tint, and there is no dark band.

     §1  hero          white          §8  proof       neutral-2-100
     §2  definition    neutral-2-100  §9  bridge      white
     §3  flow          white          §10 release     neutral-2-100
     §4  groups        neutral-2-100  §11 resources   white
     §5  cards         white          §12 licensing   neutral-2-100
     §6  applications  neutral-2-100  §13 endcap      neutral-2-000
     §7  support       white          §14 faq         white

   NOTE THE RUN DIFFERS FROM TCAD'S on support, proof and licensing, because
   this page has fourteen sections where TCAD has fifteen and the alternation
   falls differently. That is exactly why product-family.css leaves the shared
   sections transparent instead of tinting them: the tint belongs to the
   position, not to the section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §3 The feedback loop, under the flow chain

   The one thing the structure doc asks for that a straight chain cannot show:
   "Show the loop back from silicon to model explicitly." Built as a labelled
   paragraph rather than an arrow, so a screen reader gets the relationship
   rather than a decorative path, and so it survives a reflow to one column.
   -------------------------------------------------------------------------- */
.lloop{
  display:flex;gap:14px;align-items:flex-start;
  margin:0;padding:16px 18px;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);
  border-radius:14px;
}
/* the return arrow, drawn in CSS so it is decorative and never read out */
.lloop__mark{
  flex:none;position:relative;width:22px;height:22px;margin-top:1px;
  border:1px solid var(--ps-color-brand-500);
  border-right-color:transparent;
  border-radius:50%;
  transform:rotate(-45deg);
}
.lloop__mark::after{
  content:"";position:absolute;right:-1px;top:2px;
  width:6px;height:6px;
  border-top:1px solid var(--ps-color-brand-500);
  border-right:1px solid var(--ps-color-brand-500);
  transform:rotate(45deg);
}
.lloop__text{
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.lloop__text strong{color:var(--ps-color-neutral-3-500)}

/* --------------------------------------------------------------------------
   §9 TCAD bridge strip

   Two columns on desktop, copy beside one action. Same shape as the academic
   band on the TCAD page; kept page-local because a two-family bridge is not a
   pattern a third page will reuse unchanged.
   -------------------------------------------------------------------------- */
.lbridge{background:var(--sv-white);padding-block:48px}
.lbridge__inner{grid-column-end:span var(--ps-grid-columns);display:flex;flex-direction:column;gap:28px}
.lbridge__copy{max-width:74ch}
.lbridge__eyebrow{
  display:block;margin-bottom:10px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.lbridge__title{color:var(--ps-color-neutral-3-500);margin:0 0 16px}
.lbridge__body{color:var(--ps-color-secondary-5-500);margin:0 0 14px}
.lbridge__note{
  margin:16px 0 0;padding:12px 14px;
  background:var(--ps-color-neutral-2-000);
  border-left:2px solid var(--ps-color-brand-500);border-radius:0 8px 8px 0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.lbridge__actions{display:flex;flex-wrap:wrap;gap:16px}

/* --------------------------------------------------------------------------
   Pending panels

   Four of them, more than any other page on the site, because this product
   line is six months old inside Silvaco and almost nothing about it is
   published. Three sit inside a shared section and need placing:

     §7  support    below the three cards, full width
     §8  proof      as the second item in a two-item grid, so it reads as the
                    absence of the cards that should be beside the one real one
     §10 release    in the aside column, where the version table sits on TCAD
     §11 resources  below the four cards, full width

   They are deliberately not hidden behind a toggle. A gap the client has to
   fill is more likely to get filled if it is visible on the page.
   -------------------------------------------------------------------------- */
.pf-support .pending,
.pf-res .pending{grid-column-end:span var(--ps-grid-columns);margin-top:28px}

/* --------------------------------------------------------------------------
   Column counts, where this page's item count differs from TCAD's

   The shared sheet sets its column counts for TCAD's item counts - ten
   application tiles across five columns, six tool cards across three, six
   resources across three, four proof cards across four. This page has eight,
   two, four and one-plus-a-panel, so each would leave a ragged last row. Same
   components, different arithmetic.

   THE TOOL CARD GRID IS THE ONE THAT MATTERS, because the structure doc makes
   it a requirement: "the card grid must take two to six cards without
   redesign." A fixed three-column track leaves a hole at two and is wrong
   again at four, so the count is derived from the width instead:
   repeat(auto-fill, minmax(280px, 1fr)). Two cards sit left at their designed
   width with the third track simply empty, and six flow three to a row. No
   number between two and six needs a change here.

   AUTO-FILL, NOT AUTO-FIT, AND THE 1fr MAX MATTERS. auto-fit collapses the
   empty track and stretches two cards across the whole band, which is far too
   wide for a card with three bullets. And the repetition count is computed
   from the track's MAX sizing function when that is a definite length - so an
   earlier attempt at minmax(280px, 380px) produced only two tracks at 1280px
   and would have laid six cards out three rows deep. A 1fr max is indefinite,
   so the count falls back to the 280px floor, which is the intended
   behaviour. Do not "tidy" this into a fixed column count.
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .lbridge{padding-block:64px}
  /* supersedes both of the shared sheet's steps, 2 columns and then 3 */
  .pf-cards__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (min-width:1024px){
  .lbridge{padding-block:80px}
  .lbridge__inner{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
  .lbridge__actions{flex:none;flex-direction:column}
  /* eight tiles: 4 + 4 rather than 5 + 3 */
  .pf-apps__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* one real card beside its own absence, equally weighted */
  .pf-proof__grid--single{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  /* four resources: 2 + 2 here, one row of four once there is room */
  .pf-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1350px){
  .lbridge__inner{grid-column-start:2;grid-column-end:span 10}
  .pf-support .pending,
  .pf-res .pending{grid-column-start:2;grid-column-end:span 10}
  .pf-res__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §14 FAQ — sits on white, below the tinted closing CTA
   -------------------------------------------------------------------------- */
.faq{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Band run for this page

   product-family.css leaves every shared section transparent, because the
   tint depends on position rather than on the section. This is the run set
   out in the header comment above, in one place so it can be read at once.
   -------------------------------------------------------------------------- */
.pf-def,.pf-groups,.pf-apps,.pf-proof,.pf-release,.pf-lic{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.pf-flow,.pf-cards,.pf-support,.pf-res{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Lithography round (2026-09-24)
   -------------------------------------------------------------------------- */
/* LITHOGRAPHY-78 + 79: both halves of the release band are held, so the band goes */
.pf-release:not(:has(.pf-release__copy, .pending)){display:none}
/* ...and the two bands after it swap tints, so no two neighbours share one */
.pf-release:not(:has(.pf-release__copy, .pending)) ~ .pf-res{background:var(--ps-color-neutral-2-100)}
.pf-release:not(:has(.pf-release__copy, .pending)) ~ .pf-lic{background:var(--sv-white)}
/* LITHOGRAPHY-63: with the formats column held, the two remaining support cards sit two-up */
@media (min-width:1024px){
  .pf-support__grid:not(:has(> .pf-support-card:nth-of-type(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: the longer button labels wrap instead of overflowing */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.section-headings__ctas .ps-btn,.lbridge__actions .ps-btn{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.section-headings__ctas .ps-btn .ps-btn__text,.lbridge__actions .ps-btn .ps-btn__text{white-space:normal;min-width:0}
}