/* ==================================================================================================================
   Metal Craft Engineering, round B3, B4: the resources grid (25 October 2026). Linked in the BODY, just before the
   grid, only on the pages that show it (About, and the RDSO page's units tab; `../` in a division folder), as
   carousel.css and scrollwin.css are. Markup contract: shared/round-B3/build-patches/B4-RESOURCES-MARKUP.md.
   Reads only the theme's tokens (--surface, --line-2, --txt, --txt-2, --gap, --cut-lg, --cut-md), so the
   bright theme and the print block of style.css reach it. No inline style, no script.
   Shape: each resource is a cut-corner plate (12 px chamfer, top-left and bottom-right), edged 1 px in the plate's own
   shape by the same six background layers as style.css's panels, with a 44 px line icon at the left, the name in
   sentence case and, where our documents give one, a line under it (a capacity, a count or a short process line; most
   cards have none). The cards are plain information, not links: no hover, no focus state, no fill change, lift, shadow
   or glow. Grouped under headings (H3 on About), one list per group, plain text, no counts or badges. Columns: 3 from
   1024 px, 2 from 640 to 1023 px, 1 below.
   ================================================================================================================== */

.res{--ic:44px}

/* A group: its H3 (a hairline runs on from it to the right edge), then its list. */
.res-group+.res-group{margin-top:clamp(28px,3.2vw,48px)}
.res-gh{display:flex;align-items:center;gap:1rem;margin-top:0;margin-bottom:1rem;font-size:1.05rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--txt)}
.res-gh::after{content:"";flex:1;height:1px;background:var(--line-2)}

.res-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
@media (max-width:1023px){.res-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.res-list{grid-template-columns:minmax(0,1fr)}}

/* The plate. --edge, --fill and --ew are the registered properties of style.css's plate mechanism; here they are only
   set, never changed. The icon sits at the left, centred on the text block, which holds the name and an optional line.
   A card with no line is the name alone, centred beside the icon: no empty slot, no placeholder. */
.res-card{--cut:var(--cut-lg);--edge:var(--line-2);--fill:var(--surface);--ew:1px;
  display:flex;align-items:center;gap:1.125rem;min-height:5.75rem;padding:1rem 1.25rem 1rem 1.125rem;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill)}

/* The icon is an inline svg that draws a symbol of assets/icons/_sprite.svg in the current colour (its stroke is
   currentColor), --txt-2 on the plate; the High Contrast palette and the print ink reach it through `color`, so it needs
   no filter. The sprite's paths are non-scaling (vector-effect) and carry no stroke width (A1, pass 2), so the weight is
   set here, on the outer svg: 1.5 px at every size (the anti-slop ruling; the 24-unit grid's own 1.5 would be 2.75 px at
   44 px and read heavier than the text). To follow the grid instead, use stroke-width:calc(var(--ic) / 16). */
.res-ic{display:block;flex:none;width:var(--ic);height:var(--ic);color:var(--txt-2);stroke-width:1.5px}
.res-tx{min-width:0}
.res-name{font-size:1rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--txt)}
.res-line{margin-top:.25rem;font-size:.9rem;line-height:1.4;color:var(--txt-2);font-variant-numeric:tabular-nums}
/* A note under a group's cards (outside laboratories, under Testing): plain text, not a card. */
.res-note{max-width:62ch;margin-top:.875rem;font-size:.9rem;line-height:1.5;color:var(--txt-2)}

/* Reduced-size variant (class res--compact on the root): the RDSO units tab, where the grid sits in a panel beside the
   sub-tab list. 40 px icons (A1: never below 32, and the machining, heat treatment and assembly icons need 40 or more to
   read), an 8 px chamfer, tighter padding, and as many columns as the panel holds, at most three and each at least
   14.5 rem wide (the panel decides, not the screen), so a name and its line always have room. Same markup as the full
   size. */
.res--compact{--ic:40px}
.res--compact .res-group+.res-group{margin-top:clamp(20px,2.2vw,28px)}
.res--compact .res-gh{gap:.75rem;margin-bottom:.75rem;font-size:.95rem}
.res--compact .res-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(14.5rem,calc((100% - 1.5rem) / 3))),1fr));gap:.75rem}
.res--compact .res-card{--cut:var(--cut-md);gap:.875rem;min-height:4.25rem;padding:.75rem 1rem .75rem .875rem}
.res--compact .res-name{font-size:.95rem}
.res--compact .res-line{margin-top:.125rem;font-size:.85rem}
.res--compact .res-note{margin-top:.75rem;font-size:.85rem}

/* High Contrast: plain bordered boxes in the system colours (a clipped corner would cut the border away). The icons
   follow `color`, which the system sets to CanvasText: no rule is needed for them. */
@media (forced-colors:active){
  .res-card{clip-path:none;background:none;border:1px solid CanvasText}
  .res-gh::after{background:CanvasText}
}

/* Print: icons black, plates outlined (a black edge, no fill), every group kept whole with its heading, three columns. */
@media print{
  .res-group{break-inside:avoid}
  .res-gh{break-after:avoid;color:#000}
  .res-gh::after{background:#000}
  .res-list,.res--compact .res-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
  .res-card{--edge:#000;--fill:transparent;min-height:0;break-inside:avoid}
  .res-ic,.res-name,.res-line,.res-note{color:#000}
}