/* src/components/jr/subjects/subjects.css — SJ2 Subjects.
   Every value is measured off art-source/design-sj2-2026-09-12/screens/SJ2 Subjects.dc.html.
   Her screen carries its geometry inline; the transcription moves each declaration into a
   class and the pixels stay identical. The only values that stay inline are the per-subject
   swatch (--c-*) and the pill's tone (--p-*), because they change per card. */

/* ---------------------------------------------------------------- the ground */
/* No painted plate on this screen, and that is deliberate. Her note: "Every card now carries
   its own illustration of the same world, so a scene behind them put two landscapes on top of
   each other and the cards stopped reading as cards." A pale wash and two oat dunes. */
.jr-sj-body {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sj-chrome-h);
  bottom: var(--sj-nav-h);
  overflow: hidden;
}

.jr-sj-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, #fdf4dd 0%, #fbf6ea 34%, #f2f6f1 62%, #e8f2f2 100%);
}

/* Each dune is an ellipse far wider than the screen, so its edge reads as a horizon rather
   than a line. */
.jr-sj-dune {
  position: absolute;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.jr-sj-dune-far { left: -14%; right: -14%; bottom: -30%; height: 74%; background: #f3ead6; }
.jr-sj-dune-near { left: -22%; right: -22%; bottom: -34%; height: 52%; background: #e9dec6; }

.jr-sj-stage {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 22px 34px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------------------------------------------------------- the head */
.jr-sj-head {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.jr-sj-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 8px 16px;
  border-radius: var(--sj-r-pill);
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sj-ink);
}
.jr-sj-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sj-teal); display: block; }

/* Her heading and subtitle sit on a transparent plate that is 14px wider than the text on
   each side, and shifted back by the same 14px, so the words line up with the cards below
   whether or not a theme paints a panel behind them. */
.jr-sj-title {
  margin: 0 0 6px -14px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 18px;
  background: transparent;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.04;
  color: var(--sj-ink);
}

.jr-sj-sub {
  margin: 0 0 0 -14px;
  width: fit-content;
  padding: 4px 14px;
  border-radius: 14px;
  background: transparent;
  font-size: 21px;
  font-weight: 600;
  color: #22322a;
}

.jr-sj-count {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 20px;
  border-radius: var(--sj-r-pill);
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  box-shadow: 0 6px 16px rgba(35, 50, 44, .12);
}
.jr-sj-count svg { color: var(--sj-teal-ink); }
.jr-sj-count-text {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 17px;
  color: var(--sj-ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the two rows */
.jr-sj-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

.jr-sj-row { min-height: 0; display: grid; gap: 18px; }
.jr-sj-row-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jr-sj-row-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- one subject */
/* 22px radius, not a pill: her whole SJ2 card family is a rounded rectangle (named in
   tools/audit/rules_audit.mjs). The card is the child's control here and it is 200px tall,
   so the 64px floor is met several times over. */
.jr-sj-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  background: var(--sj-card);
  border: 2px solid var(--c-border);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(35, 50, 44, .16);
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1), box-shadow 120ms cubic-bezier(.2, .75, .25, 1);
}
.jr-sj-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(35, 50, 44, .2); }

.jr-sj-art {
  position: relative;
  flex: none;
  height: 136px;
  display: block;
  overflow: hidden;
  background: var(--sj-sand);
}
.jr-sj-art-img {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center 46%;
}
/* Her fade into the card's own cream, so the guide line always has something to sit on. */
.jr-sj-art-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, .9) 72%, #fffdf6 100%);
}
.jr-sj-art-guide {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}
.jr-sj-art-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-main);
  display: block;
}

.jr-sj-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 16px 14px;
}

.jr-sj-name {
  display: block;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--sj-ink);
}

/* Two lines, clamped: a focus line that grows pushes the pill row off a 200px card. */
.jr-sj-focus {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-sj-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.jr-sj-pill {
  flex: none;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--sj-r-pill);
  background: var(--p-tint);
  border: 1px solid var(--p-border);
  color: var(--p-ink);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jr-sj-status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--sj-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-sj-go {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--p-tint);
  border: 1px solid var(--p-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-ink);
}

.jr-sj-donebar { flex: none; height: 7px; display: block; background: var(--sj-green); }