/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. The live
   stylesheets of the reskinned pages sit in the earlier layer `legacy`
   (tools/live.py), so these primitives also win over them. */
@layer legacy, od-layout;
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack { display:flex; flex-direction:column; gap:var(--od-gap,8px); }
  .od-row { display:flex; align-items:center; gap:var(--od-gap,8px); }
  .od-row-top { display:flex; align-items:flex-start; gap:var(--od-gap,8px); }
  .od-cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--od-gap,8px); }
  .od-fill { flex:1 1 0; min-width:0; }
  .od-fixed { flex:none; }
  .od-grid { display:grid; gap:var(--od-gap,12px); grid-template-columns:repeat(var(--od-cols,3),minmax(0,1fr)); }
  .od-stat,.od-field,.od-cell { display:grid; gap:var(--od-gap,2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display:block; }
  .od-tile { display:grid; grid-template-rows:auto 1fr; }
  :where(.od-tile) > :where(*) { display:block; }
  .od-media { display:block; width:100%; height:auto; aspect-ratio:var(--od-ratio,auto); }
  .od-media-cover { object-fit:cover; }
  .od-truncate { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .od-clamp-2,.od-clamp-3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
  .od-clamp-2 { -webkit-line-clamp:2; }
  .od-clamp-3 { -webkit-line-clamp:3; }
  .od-lines-2 { min-height:calc(2 * 1.4em); }
  .od-nowrap { white-space:nowrap; }
  .od-keep { word-break:keep-all; overflow-wrap:anywhere; }
  .od-screen { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
  .od-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
  .od-rail { display:flex; gap:var(--od-gap,8px); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-inline:var(--od-rail-pad,16px); scroll-padding-inline:var(--od-rail-pad,16px); }
  .od-rail::-webkit-scrollbar { display:none; }
  :where(.od-rail) > :where(*) { flex:none; scroll-snap-align:start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end:var(--od-rail-pad,16px); }
  .od-spacer { flex:none; visibility:hidden; pointer-events:none; }
  .od-touch { min-width:44px; min-height:44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */