/* src/components/jr/sheets/sheets.css — SJ2 Sheets, and the parent bar the lane shares.
   Every number is transcribed from
   art-source/design-sj2-2026-09-12/screens/SJ2 Sheets.dc.html (and, for the bar, from
   SJ2 Sites and SJ2 Browser, which draw the same one). Her screens carry their geometry
   inline; the transcription moves each declaration into a class and the pixels stay. */

/* ================================================================ the shared parent bar */
/* SJ2 Sheets, SJ2 Sites and SJ2 Browser wear the same 76px bar. One implementation, in the
   first screen of the lane that draws it, imported by the other two (parentTopBar in
   sheets.js). Three transcriptions is how three bars end up 2px apart. */
.jr-pbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 76px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  box-sizing: border-box;
  background: var(--sj-card);
  border-bottom: 1px solid var(--sj-line);
}

.jr-pbar-back {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-ink);
}

.jr-pbar-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sj-teal-ink);
  background: var(--sj-teal-tint);
  border: 1px solid var(--sj-teal-line);
  border-radius: var(--sj-r-pill);
  padding: 7px 15px;
  white-space: nowrap;
}

/* HER 44px TARGET again, and for the same reason as the chrome's: this whole bar is the
   grown-up's, not the child's (plan ruling 1, named in tools/audit/rules_audit.mjs). */
.jr-pbar-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--sj-teal-ink);
  white-space: nowrap;
  text-decoration: none;
}

.jr-pbar-gap { flex: 1 1 auto; }

.jr-pbar-rule {
  flex: none;
  font-family: var(--sj-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--sj-ink);
  white-space: nowrap;
}

.jr-pbar-kid {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 18px 4px 5px;
  border-radius: var(--sj-r-pill);
  border: 1.5px solid var(--sj-line);
  background: var(--sj-stage);
}

.jr-pbar-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #dbc9a8;
  background-size: cover;
  background-position: center;
  display: block;
}

.jr-pbar-name {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 17px;
  color: var(--sj-ink);
}

/* ================================================================ the board */
.jr-sh-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 247, 240, .72) 0%, rgba(250, 247, 240, .56) 45%, rgba(250, 247, 240, .34) 100%);
}

.jr-sh-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  bottom: 0;
  padding: 22px 34px 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.jr-sh-headtext { min-width: 0; }

.jr-sh-h1 {
  margin: 0 0 4px;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--sj-ink);
}

.jr-sh-sub {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--sj-ink);
  max-width: 78ch;
  text-wrap: pretty;
}

.jr-sh-filters { flex: none; display: flex; align-items: center; gap: 8px; }

.jr-sh-filter {
  appearance: none;
  cursor: pointer;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--sj-r-pill);
  background: var(--sj-card);
  border: 2px solid var(--sj-line);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--sj-ink);
  white-space: nowrap;
}
.jr-sh-filter-on { background: var(--sj-teal-tint); border-color: var(--sj-teal); color: var(--sj-teal-ink); }

.jr-sh-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 18px; }
.jr-sh-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.jr-sh-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  gap: 14px;
  align-content: start;
  overflow: hidden;
}

.jr-sh-card {
  min-width: 0;
  padding: 16px 20px 18px;
  border-radius: 22px;
  border: 2px solid var(--sj-line);
  box-shadow: 0 8px 20px rgba(35, 50, 44, .08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jr-sh-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.jr-sh-gap { flex: 1 1 auto; }

.jr-sh-subject,
.jr-sh-week,
.jr-sh-used {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--sj-r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}
.jr-sh-week {
  letter-spacing: .11em;
  color: var(--sj-green-ink);
  background: #eaf7ef;
  border-color: var(--sj-green-line);
}
/* Her tick. A "✓" glyph would break the no-emoji rule; hers is drawn as a path, which is
   what jr.js's icon('tick') builds. */
.jr-sh-used {
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .11em;
  color: var(--sj-ink);
  background: var(--sj-stage);
  border-color: var(--sj-line-warm);
}

.jr-sh-minutes {
  font-family: var(--sj-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--sj-ink);
  white-space: nowrap;
}

.jr-sh-title {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.15;
  color: var(--sj-ink);
  text-wrap: pretty;
}

/* Andika: the blurb is a sentence a child may read over a grown-up's shoulder. */
.jr-sh-blurb {
  font-family: var(--sj-font-story);
  font-size: 17px;
  line-height: 1.4;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-sh-modes { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.jr-sh-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sj-ink);
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

/* A sheet whose ingredients are missing says what it needs. It is never hidden. */
.jr-sh-missing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 14px;
  background: #fff8e6;
  border: 1px dashed var(--sj-sun-line);
  font-size: 16px;
  font-weight: 600;
  color: var(--sj-sun-ink);
  text-wrap: pretty;
}

.jr-sh-actions {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Her 52px action button: a 16px radius and a 4px hard shadow the press flattens. */
.jr-sh-act {
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: 16px;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.jr-sh-act-orange { background: var(--sj-orange); color: var(--sj-card); box-shadow: 0 4px 0 var(--sj-orange-deep); }
.jr-sh-act-plain {
  padding: 0 18px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line);
  font-weight: 600;
  color: var(--sj-ink);
}
.jr-sh-act:active { transform: translateY(4px); box-shadow: none; }

.jr-sh-licence {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sj-ink);
  text-align: right;
  max-width: 26ch;
  text-wrap: pretty;
}

.jr-sh-pager { flex: none; display: flex; align-items: center; gap: 10px; }
.jr-sh-pagelabel { font-family: var(--sj-font); font-weight: 500; font-size: 16px; color: var(--sj-ink); }
.jr-sh-pagebtns { display: flex; align-items: center; gap: 9px; }
.jr-sh-page {
  appearance: none;
  cursor: pointer;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line-warm);
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
}
.jr-sh-page-off { background: #f3efe4; color: #a89e8c; cursor: default; }

/* ---------------------------------------------------------------- the right rail */
.jr-sh-rail { flex: 0 0 356px; display: flex; flex-direction: column; gap: 14px; }

.jr-sh-ways {
  background: var(--sj-card);
  border: 2px solid var(--sj-teal-line);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(35, 50, 44, .1);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jr-sh-kicker {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sj-teal-ink);
}

.jr-sh-way { display: flex; align-items: flex-start; gap: 11px; }
.jr-sh-way-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--sj-teal-tint);
  border: 1px solid var(--sj-teal-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--sj-teal-ink);
}
.jr-sh-way-text { flex: 1 1 auto; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }

.jr-sh-usedcard {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(35, 50, 44, .1);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.jr-sh-usedhead { display: flex; align-items: baseline; gap: 10px; }
.jr-sh-usedtitle { font-family: var(--sj-font); font-weight: 700; font-size: 20px; color: var(--sj-ink); }
.jr-sh-usedcount { font-family: var(--sj-font); font-weight: 500; font-size: 15px; color: var(--sj-ink); }
.jr-sh-usedlist { display: flex; flex-direction: column; gap: 9px; }
.jr-sh-usedrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
}
.jr-sh-usedrow-title { font-family: var(--sj-font); font-weight: 600; font-size: 17px; color: var(--sj-ink); text-wrap: pretty; }
.jr-sh-usedrow-when { font-size: 15px; font-weight: 500; color: var(--sj-ink); }
.jr-sh-usedempty { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }
.jr-sh-usedfoot {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #f0ebe0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sj-ink);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- phones (DECISIONS #164)
   `parentTopBar` is drawn here and imported by Sites and the Browser (the note at the top of
   this file), so its phone rule belongs here too. It is an absolute 76px band with a nowrap
   rule sentence and a child chip in it; at 375px those two together are 250px wider than the
   phone. On a phone, on a grown-up route, the bar flows with the page and is allowed a second
   row. Sheets itself is a child screen and never reaches phone-natural mode, so nothing here
   touches how Sheets looks. */
@media (max-width: 767px) {
  .jr-phone-natural .jr-pbar {
    position: static;
    flex: none;
    height: auto;
    min-height: 76px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  }
  .jr-phone-natural .jr-pbar-gap { flex: 1 1 100%; }
  .jr-phone-natural .jr-pbar-rule { white-space: normal; flex: 1 1 100%; font-size: 14px; }
}