/* 170DE — modern card hierarchy, preserving Classic animal portraits. */
/* Grade title and strapline sit immediately right of each colored tab. */
body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile,
body[data-page="home"] .grade-tile.grade-language {
  display:grid; grid-template-columns:57px minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  column-gap:13px; row-gap:0; align-items:start;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile>.grade-icon,
body[data-page="home"] .grade-tile.grade-language>.grade-icon {
  grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile>.grade-copy,
body[data-page="home"] .grade-tile.grade-language>.grade-copy {display:contents}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-copy>h3,
body[data-page="home"] .grade-language .grade-copy>h3 {
  grid-column:2;grid-row:1;align-self:end;line-height:1.2;min-width:0;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-copy>.grade-tagline,
body[data-page="home"] .grade-language .grade-copy>.grade-tagline {
  grid-column:2;grid-row:2;align-self:start;margin:4px 0 0;line-height:1.35;min-width:0;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-copy>.grade-details,
body[data-page="home"] .grade-language .grade-copy>ul {
  grid-column:1/-1;grid-row:3;min-width:0;margin:16px 0;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-copy>.grade-action,
body[data-page="home"] .grade-language .grade-copy>.grade-action {
  grid-column:1/-1;grid-row:4;align-self:end;margin-top:auto;width:100%;
}
/* Grade overview bullets + four-row statistic stack (label/count/label/count). */
body[data-page="home"] .grade-details{min-width:0}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-details {
  display:grid; grid-template-columns:minmax(0,1fr) 75px; column-gap:9px; align-items:start;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-details>ul {min-width:0;margin:0}
body[data-page="home"] .grade-stats{display:none}
/* Only admin-selected Modern mode may show Skills and Videos statistics. */
body[data-page="home"][data-card-layout="modern"] .grade-stats {
  display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4,auto);
  align-self:start;min-width:0;gap:0;text-align:center;border:1px solid var(--grade-border,#d4e1ed);
  border-radius:9px;overflow:hidden;background:#fff;
}
body[data-page="home"] .grade-stat-label {
  display:block;background:var(--grade-accent,#316fb3);color:#fff;font-size:10px;
  font-weight:800;letter-spacing:.02em;line-height:1.3;padding:5px 3px;
}
body[data-page="home"] .grade-stat-count {
  display:block;background:#fff;color:#173a56;font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:800;line-height:1.2;padding:8px 2px;
}
body[data-page="home"] .grade-stat-count+ .grade-stat-label{border-top:1px solid var(--grade-border,#d4e1ed)}
/* Restore the animal portrait Classic mode exactly; statistics are completely hidden. */
body[data-page="home"][data-card-layout="classic"] .grade-details{display:block}
body[data-page="home"][data-card-layout="classic"] .grade-details>ul{margin:0 0 12px}
body[data-page="home"][data-card-layout="classic"] .grade-stats{display:none!important}
/* Pre-K teal, Kindergarten purple; all other grade accent colors unchanged. */
body[data-page="home"] .grade-tile.grade-pre-k {
  --grade-bg:#e1f6f6;--grade-border:#b1dfe2;--grade-accent:#087f89;
}
body[data-page="home"] .grade-tile.grade-kindergarten:not(.grade-pre-k) {
  --grade-bg:#f1eafa;--grade-border:#d5c1ee;--grade-accent:#7b48b2;
}
/* Ensure the user-selected grade palette also applies in Classic mode.
   Older Classic styles defined a yellow Kindergarten background. */
body[data-page="home"][data-card-layout="classic"] .grade-tile.grade-kindergarten:not(.grade-pre-k){
  --grade-bg:#f1eafa;--grade-border:#d5c1ee;--grade-accent:#7b48b2;
}
@media(max-width:520px){
 body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile,
 body[data-page="home"] .grade-tile.grade-language{grid-template-columns:49px minmax(0,1fr);column-gap:12px}
 body[data-page="home"]:not([data-card-layout="classic"]) .grade-details{grid-template-columns:minmax(0,1fr) 82px}
}


/* Phase 170DN: Restore full-width career cards and colorful legacy checkbox
   markers in BOTH Modern and Classic homepage arrangements. The former plain
   circle override in styles.css is intentionally superseded for all cards. */
body[data-page="home"] .grade-tile.grade-career .grade-details-full {
  min-width:0;width:100%;max-width:none;grid-column:1/-1;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile.grade-career .grade-details-full {
  grid-row:3;display:block;margin:16px 0;
}
body[data-page="home"] .grade-tile.grade-career .grade-details-full>ul {
  display:block;width:100%;min-width:0;max-width:none;padding:0;
}
body[data-page="home"] .grade-tile .grade-copy ul {
  list-style:none;padding-left:0;
}
body[data-page="home"] .grade-tile .grade-copy li {
  position:relative;padding-left:25px;font-size:12px;line-height:1.52;
  min-height:19px;margin:6px 0;overflow-wrap:break-word;
}
body[data-page="home"] .grade-tile .grade-copy li::before,
body[data-page="home"][data-card-layout="classic"] .grade-tile:not(.grade-language) .grade-copy li::before {
  content:'✓' !important;position:absolute;top:1px;left:0;
  display:block;width:18px;height:18px;box-sizing:border-box;
  line-height:18px;text-align:center;border-radius:5px;
  background:var(--grade-accent,#316fb3) !important;color:#fff !important;
  font:900 12px/18px Arial,Helvetica,sans-serif !important;
  box-shadow:0 1px 2px rgba(15,47,72,.14);
}
@media(max-width:520px){
 body[data-page="home"] .grade-tile .grade-copy li{font-size:12px;line-height:1.48}
}


/* Phase 170DO: Language cards use the same full-width skills/videos inset as grade cards.
   Preserve the existing Classic behavior where statistics are intentionally hidden. */
body[data-page="home"] .grade-tile.grade-language .grade-copy>.grade-details {
  grid-column:1/-1; grid-row:3; min-width:0; margin:16px 0;
}
body[data-page="home"] .grade-tile.grade-language .grade-details>ul {
  min-width:0; margin:0;
}
body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile.grade-language .grade-details {
  display:grid; grid-template-columns:minmax(0,1fr) 75px;
  column-gap:9px; align-items:start;
}
body[data-page="home"][data-card-layout="classic"] .grade-tile.grade-language .grade-details {
  display:block;
}
@media(max-width:520px){
  body[data-page="home"]:not([data-card-layout="classic"]) .grade-tile.grade-language .grade-details {
    grid-template-columns:minmax(0,1fr) 82px;
  }
}