/* systems.css — 735-272. Public special-product surfaces.
   Reuses the homepage tokens (--line, --muted, --ink); no parallel palette
   and no inline styles outside the embed credit, which must render even when
   the host page never loads this file. */

.prod-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:1rem 0 2rem}
.prod-card{border:1px solid var(--line,#e4e0d6);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.prod-card-thumb img{width:100%;height:180px;object-fit:cover;display:block}
.prod-card-body{padding:.9rem 1rem 1rem}
.prod-card-h{margin:.2rem 0 .3rem;font-size:1.05rem}
.prod-card-mfr{margin:0 0 .5rem;color:var(--muted,#7a756a);font-size:.9rem}
.prod-card-capsule{margin:0 0 .6rem;font-size:.92rem;line-height:1.45}
/* The ellipsis IS the link to the product page — it must read as one. */
.prod-card-more{text-decoration:none;font-weight:600;padding-left:.15em}
.prod-card-projects{margin:0;font-size:.88rem}

.sys-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 2rem}
.sys-cat{border:1px solid var(--line,#e4e0d6);border-radius:999px;padding:.3rem .85rem;font-size:.88rem;text-decoration:none}
.sys-mfr{margin-top:2rem}
.sys-link{font-weight:600}

.sys-projects{list-style:none;padding:0;margin:.5rem 0 1.5rem}
.sys-projects li{padding:.45rem 0;border-bottom:1px solid var(--line,#e4e0d6);display:flex;gap:.75rem;justify-content:space-between;flex-wrap:wrap}

/* ── the product page ──────────────────────────────────────────────────────
   735-302 — what is left here is what is true of a PRODUCT and of nothing
   else. The typography, the section headings, the hero/strip rhythm, the
   credits block and the field rows all come from /static/catalog.css, which is
   the project page's own grammar; 735-298's copies of `.hero-img` and
   `.subhero` under `.sys-*` names are GONE, because the sheet they were
   copying from is now a file this page can simply link.

   HALF THE HERO, A THIRD FOR THE REST, expressed as ONE number. The media
   column is capped and `.subheroes` (flex, three across, catalog.css) divides
   whatever it is given — so the two proportions are derived from a single
   declaration and cannot drift apart the way two hard-coded widths would.

   735-303 — THE HEIGHT IS THE CAP THAT MATTERS. The project page's hero is
   16/9, so its height is barely half its width and the title always clears the
   fold; ours is SQUARE (the published hero is the square derivative), so at
   660px it was 660px TALL and a visitor arriving saw the photograph and
   nothing else — no title, no company, no first sentence. Capping the COLUMN
   rather than the image keeps the one-number derivation intact: a square hero
   is as tall as the column is wide, and the subheroes still divide it. */
.sys-media{--sys-media-w:480px;max-width:min(var(--sys-media-w),40vh);margin:0 auto}
.sys-media .subheroes{max-width:none}
/* 735-303 — `.subhero` is `flex:1 1 0`, but a flex item's default `min-width`
   is `auto`, which for a REPLACED element is its intrinsic pixel width. Three
   800px photographs therefore refused to shrink into a 304px column and ran
   off the side instead of dividing it. `min-width:0` is what lets the flex
   basis actually govern. Scoped to `.sys-media` on purpose: the same latent
   rule sits in catalog.css, but no live project carries subheroes yet and
   changing a shared sheet is not this prompt's business — reported instead. */
.sys-media .subhero{min-width:0}
/* The published hero is the SQUARE derivative (see special_product_media
   .designate_hero), so it gets a square frame. A 16/9 box would letterbox the
   very image the sponsor framed to fill it. */
.sys-media .hero-img{aspect-ratio:1/1;object-fit:cover}
.sys-title,.sys-body{max-width:var(--maxw)}
.sys-body{grid-template-columns:minmax(0,1fr)}
.sys-note{font-size:.88rem;margin:.2rem 0 .8rem;color:var(--muted,#7a756a)}
/* The shared IFC viewer names the Studio palette's `--line`; the public sheets
   call the same hairline `--border`. One alias, so the partial stays untouched. */
.sys-viewer{--line:var(--border,#E5E3DE);margin:0 0 1.5rem}

/* 735-400 — two videos side by side where there is room, stacked where there
   is not. The 16/9 box is the provider's shape, not ours: a fixed height
   would letterbox one aspect or crop the other. */
/* 735-406 — the track is 505px, ~40% of the 1264px body column: a talking-head
   product video does not need the width of a photograph. The cap is on the
   TRACK, not on the grid, so 735-400's two-across survives (2×505+gap fits the
   column) and the single case simply centres. `min(280px,100%)` keeps the
   floor from becoming an overflow on a phone. */
.sys-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),505px));justify-content:center;gap:1rem;margin:0 0 1.5rem}
.sys-video{aspect-ratio:16/9}
.sys-video iframe{width:100%;height:100%;border:0;display:block}

.ta-embed-body{margin:0}
.sys-embed{padding:16px}
.sys-embed-h{font-size:1.15rem;margin:0 0 .6rem}

/* 735-522 — the Download section's tab strip. The GEOMETRY is author.html's
   Articles/Photos strip (padding, 2px active underline, the same green), not a
   second tab language: two tab strips on one site that look different are two
   components, and the second one is always the one that stops matching. It
   lives here rather than in a shared sheet because author.html carries its own
   inline block — extracting both is a change to a page this prompt does not
   own, and was reported instead of taken. */
.sys-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border,#E5E3DE);margin:0 0 .9rem}
.sys-tab{padding:8px 16px;font-size:14px;color:#666;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.sys-tab.is-active{color:#1a1a18;border-bottom-color:#2f5a43;font-weight:500}
/* The count is the shelf's own information — "CAD 3" answers the question the
   click was going to ask. */
.sys-tab-n{color:var(--muted,#7a756a);font-size:12px;margin-left:4px}
.sys-lock{margin-left:4px;font-size:12px}
.sys-tabpane{margin:0 0 1.5rem}
/* A locked row is still a ROW: the name, the version and the date are what
   make the invitation worth accepting. Only the link is withheld. */
.sys-locked-name{color:#8b857a}
.sys-flag{font-size:.75rem;color:#2f5a43;margin-left:8px;white-space:nowrap}
.sys-lock-invite{margin-top:.6rem}
.sys-lock-invite a{color:#2f5a43}
.sys-empty-shelf{font-style:italic}

/* 735-528 T3 — the download list's own geometry.

   `.field-row` (catalog.css) is a 200px label column against the rest, which is
   right for "Country · Italy" and wrong here: the left column holds FILENAMES,
   and a manufacturer's real datasheet name is 40-60 characters, so every row
   wrapped onto two lines. 200px → 500px, 2.5× as Franco measured it, and only
   inside `.sys-dl` — the same `.field-list` is used four times higher up this
   page for the projects, the articles and the featured documents, and none of
   those wanted a wider label column. `minmax(0, …)` is kept so the column still
   collapses on a narrow viewport instead of overflowing.

   735-530 T1 — 500px → 800px, +60%. 735-528 measured that today's longest real
   filename fits in 500 and stopped there; Franco's call is that the column is
   sized for the names that arrive, not the ones already uploaded, and a
   manufacturer who versions and localises a datasheet
   ("ALUMEGA_technical-guide_EN_rev01.pdf") is already at 37. The right column
   still holds the version, the date and the size, and it is `minmax(0,1fr)` so
   it takes what is left rather than a share it has to defend. */
.sys-dl .field-row{grid-template-columns:minmax(0,800px) minmax(0,1fr)}
/* The format mark. A WORD, not a picture — see `_download_item`. Fixed width so
   the names start on one vertical line whatever the format is called. */
.sys-fmt{display:inline-block;min-width:3.1em;margin-right:8px;padding:1px 5px;
  border:1px solid var(--border,#E5E3DE);border-radius:3px;
  font-family:var(--mono,ui-monospace,monospace);font-size:10px;
  letter-spacing:.06em;text-align:center;color:var(--muted,#7a756a);
  vertical-align:2px}

/* 735-528 T1 — the two secondary product links, under the primary and smaller.
   No bullets: they are a continuation of the credit line above them, not a
   list of their own. */
.sys-extra-links{list-style:none;margin:.25rem 0 0;padding:0}
.sys-extra-links li{font-size:.8rem;line-height:1.5}