/* The Defects catalogue (defects.js): one animated card per defect class beside the particle class it equals.
   Every rule is scoped to #page-defects.
   Page column: at most 1600 px, centred, 24 px side padding (16 px below 700 px), gaps 16 px.
   Type scale of the site: page title 26/700, card title 15/700, kicker 11 uppercase .14em, body 14, small 12.5.
   Grid: three cards per row, two below 1100 px, one below 700 px. Every row has the same height.
   Card: picture and text in the ratio 1:1; the picture is at least square and fills the card from top to bottom. */
#page-defects{overflow-x:hidden;overflow-y:auto;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(46,70,130,.16),rgba(4,6,13,0) 70%)}
#page-defects .df-wrap{max-width:1600px;margin:0 auto;padding:20px 24px 56px}

/* ---------------------------------------------------------------- head: title, key of the pictures, one line */
#page-defects .df-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 24px;margin:0 0 16px}
#page-defects .df-head h2{grid-column:1;margin:0;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.018em;color:#f3f6fc}
#page-defects .df-legend{grid-column:2;grid-row:1;display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:flex-end;align-items:center;font-size:12.5px;line-height:18px;color:rgba(170,186,214,.8)}
#page-defects .df-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#page-defects .df-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
#page-defects .df-legend i.ring{background:none;border:1.5px solid rgb(160,240,255);width:9px;height:9px;box-shadow:none}
#page-defects .df-legend i.ring.y{border-color:rgb(255,228,92)}
#page-defects .df-legend i.ring.r{border-color:rgb(255,95,122)}
#page-defects .df-lead{grid-column:1 / -1;font-size:14px;line-height:1.5;color:rgba(186,200,226,.86)}
#page-defects .df-lead .q1-chip{margin-left:6px}

/* ---------------------------------------------------------------- grid and cards */
#page-defects .df-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}
#page-defects .df-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;border-radius:16px;overflow:hidden;cursor:pointer;
  background:color-mix(in srgb,var(--c) 4%,rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,rgba(255,255,255,.04));transition:box-shadow .2s}
#page-defects .df-card:hover,#page-defects .df-card:focus-visible{outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 0 40px -18px var(--c)}

/* the picture: at least square, as high as the card, drawn at its own size by defects.js */
#page-defects .df-stage{position:relative;min-width:0;background:#03050b}
#page-defects .df-stage::before{content:'';display:block;padding-top:100%}
#page-defects .df-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#page-defects .df-wait{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);pointer-events:none}
#page-defects .df-wait .pg{min-width:0}
#page-defects .df-cap{position:absolute;left:12px;right:12px;bottom:10px;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(170,186,214,.62);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#page-defects .df-stage>.hq.hq-corner{top:10px;right:10px}

/* the text: kicker, title in two lines, particles, three numbers */
#page-defects .df-side{display:flex;flex-direction:column;min-width:0;padding:20px}
#page-defects .df-k{font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(160,178,210,.62)}
#page-defects .df-side h3{display:flex;align-items:flex-start;gap:10px;margin:8px 0 0;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.005em;color:var(--c)}
#page-defects .df-side h3>svg{flex:none;margin-top:9px}
#page-defects .df-side h3>span{flex:1 1 auto;min-width:0}
#page-defects .df-side h3>span>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-defects .df-side h3>.hq{flex:none;margin:2px 0 0}
#page-defects .df-sym{margin-top:12px;font-size:24px;line-height:30px;font-weight:600;color:#eef2fb;letter-spacing:.02em;white-space:nowrap}
#page-defects .df-sym sub{font-size:.55em;color:rgba(200,212,236,.7)}
#page-defects .df-sub{margin-top:4px;font-size:12.5px;line-height:17px;color:rgba(170,186,214,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-defects .df-gen{margin-top:8px;font-size:14px;line-height:20px;color:rgba(214,224,244,.86);letter-spacing:.1em;white-space:nowrap}
#page-defects .df-gen sub{font-size:.7em;letter-spacing:0}
#page-defects .df-nums{margin-top:auto;padding-top:12px}
#page-defects .df-nums div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;line-height:16px}
#page-defects .df-nums span{color:rgba(170,186,214,.8)}
#page-defects .df-nums b{font-size:14px;font-weight:600;color:#eef2fb;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------- two columns, then one */
@media (max-width:1100px){#page-defects .df-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  #page-defects .df-wrap{padding:16px 16px 40px}
  #page-defects .df-head{grid-template-columns:minmax(0,1fr);gap:8px}
  #page-defects .df-legend{grid-column:1;grid-row:auto;justify-content:flex-start}
  #page-defects .df-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  #page-defects .df-card{grid-template-columns:minmax(0,1fr)}
  #page-defects .df-stage::before{padding-top:75%}
  #page-defects .df-side{padding:16px}
  #page-defects .df-nums{padding-top:16px}
}