/* WS-11 OFFLINE STAGE ONLY. Inline currentColor SVG; no positional icon mapping. */
.ws11-semantic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.ws11-semantic-card { min-width:0; padding:24px; background:var(--paper,#fff); border:1px solid var(--line,#d8e0e2); }
.ws11-semantic-card h3 { margin:19px 0 8px; font-size:clamp(18px,1.7vw,23px); line-height:1.15; }
.ws11-semantic-card p { margin:0; font-size:14px; line-height:1.55; color:var(--muted,#53656b); }
.ws11-icon { width:48px; height:48px; display:grid; place-items:center; flex:0 0 48px; }
.ws11-icon svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform-origin:center; }
.ws11-icon--route svg { transform:translate(.5px,.5px); }
.ws11-icon--placement svg,.ws11-icon--label svg { transform:translateY(-.5px); }
.ws11-icon--access svg { transform:translateY(.5px); }

/* Hebert keeps the round, outlined, offset-print character. */
.ws11-semantic-grid--hebert .ws11-semantic-card { border:2px solid var(--ink,#102a2c); box-shadow:4px 4px 0 var(--mint,#a9e8d5); }
.ws11-icon--hebert { border:2px solid var(--ink,#102a2c); border-radius:50%; background:var(--paper,#fff); color:var(--ink,#102a2c); box-shadow:3px 3px 0 var(--coral,#ef6b52); }

/* Omega stays softer and modular; no visual convergence with Hebert. */
.ws11-semantic-grid--omega { gap:18px; }
.ws11-semantic-grid--omega .ws11-semantic-card { border-radius:var(--radius,16px); background:var(--mist,#edf6f4); }
.ws11-icon--omega { border-radius:12px; background:var(--teal,#82ddd0); color:var(--ink,#071b2d); }
.ws11-semantic-card--timing .ws11-icon--omega,.ws11-semantic-card--verify .ws11-icon--omega { background:var(--amber,#ffd089); }

.ws11-semantic-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ws11-semantic-grid--process .ws11-semantic-card { min-height:220px; }
.ws11-semantic-grid--compact .ws11-semantic-card { min-height:0; padding:20px; }

@media(max-width:900px){
  .ws11-semantic-grid,.ws11-semantic-grid--three { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px){
  .ws11-semantic-grid,.ws11-semantic-grid--three { grid-template-columns:1fr; gap:10px; }
  .ws11-semantic-card,.ws11-semantic-grid--process .ws11-semantic-card { min-height:0; padding:19px 18px; }
  .ws11-icon { width:44px; height:44px; flex-basis:44px; }
  .ws11-icon svg { width:22px; height:22px; }
  .ws11-semantic-card h3 { margin-top:16px; }
}