/* src/components/jr/read/read.css — SJ2 Read what came home.

   Transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Read.dc.html, geometry moved
   out of her inline styles unchanged.

   TWO OF HER THREE KEYFRAMES SURVIVE AS SHE WROTE THEM, and one does not:
     - sj2-sweep (the scanning bar over the photo) is pure transform. Kept.
     - sj2-breathe fades the three "reading it now" lines in and out. That is an opacity
       animation, and the hidden-tab rule (CLAUDE.md) exists because an opacity animation that
       stalls leaves content invisible. It becomes a gentle vertical nudge, so a stalled frame
       leaves the words on screen and readable, which is the whole point of the rule.
     - sj2-rise keeps its movement and loses its fade (plan ruling 3).
*/

.jr-read {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff9e9;
  color: #13251f;
  font-family: var(--sj-font);
}
.jr-read * { box-sizing: border-box; }
.jr-read button,
.jr-read input,
.jr-read select { font-family: var(--sj-font); }
.jr-read input::placeholder { color: #9b8f78; opacity: 1; }

/* ---------------------------------------------------------------- the bar */
.jr-read-bar {
  flex: none; height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: #fffdf6; border-bottom: 1px solid #eadfc9;
}
.jr-read-back {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff9e9;
  border: 1px solid #eadfc9; display: flex; align-items: center; justify-content: center; color: #13251f;
}
.jr-read-word { white-space: nowrap; font-weight: 700; font-size: 25px; color: #13251f; letter-spacing: -.01em; }
.jr-read-word span { color: #42a9c8; }
.jr-read-tag {
  white-space: nowrap; font-weight: 600; font-size: 14px; letter-spacing: .11em; text-transform: uppercase;
  color: #19776f; background: #e3f5f8; border: 1px solid #cfe8e8; border-radius: 999px; padding: 7px 15px;
}
.jr-read-gap { flex: 1 1 auto; }
.jr-read-status { white-space: nowrap; font-weight: 600; font-size: 16px; color: #13251f; }
.jr-read-status.saved { color: #246c3c; }
.jr-read-status.bad { color: #a8492a; }

.jr-read-stage { flex: 1 1 auto; min-height: 0; padding: 24px 30px 26px; overflow: hidden; }

/* Transform-only. */
@keyframes sj-read-rise {
  from { transform: translateY(10px); }
  to { transform: none; }
}
.jr-read-rise { animation: sj-read-rise 320ms cubic-bezier(.2, .75, .25, 1) both; }

/* ---------------------------------------------------------------- the ask card */
.jr-read-ask-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.jr-read-ask {
  width: 980px; max-width: 100%; max-height: 100%;
  background: #fffdf6; border: 2px solid #cfe8e8; border-radius: 28px;
  box-shadow: 0 16px 40px rgba(35, 50, 44, .13); padding: 32px 40px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.jr-read-kicker {
  align-self: flex-start; font-weight: 600; font-size: 13px; letter-spacing: .13em;
  text-transform: uppercase; color: #b26f0a; background: #fff8e6; border: 1px solid #f0dcac;
  border-radius: 999px; padding: 6px 13px;
}
.jr-read-ask h1 { flex: none; margin: 0; font-weight: 700; font-size: 38px; line-height: 1.07; color: #13251f; text-wrap: pretty; }
.jr-read-ask > p { flex: none; margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: #13251f; max-width: 82ch; text-wrap: pretty; }
/* THE ROWS SCROLL, THE YES DOES NOT. Her card has four rows and fits; this build adds a fifth
   saying there is no reader on this tablet, which pushed the buttons under the fold of a 940px
   stage. A consent card whose Yes and No are out of sight is the one card that must never do
   that, so the rows take the spare height and the two buttons stay put. */
.jr-read-ask-rows { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.jr-read-ask-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-radius: 18px;
  background: #fff9e9; border: 1px solid #eadfc9;
}
.jr-read-ask-row.green { background: #eaf7ef; border-color: #bfe2cd; }
.jr-read-ask-row.sun { background: #fff8e6; border-color: #f0dcac; }
.jr-read-ask-n {
  flex: none; width: 32px; height: 32px; border-radius: 10px; background: #fffdf6;
  border: 1px solid #eadfc9; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #19776f;
}
.jr-read-ask-row.green .jr-read-ask-n { border-color: #bfe2cd; color: #246c3c; }
.jr-read-ask-row.sun .jr-read-ask-n { border-color: #f0dcac; color: #b26f0a; }
.jr-read-ask-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-read-ask-text strong { font-weight: 600; font-size: 19px; color: #13251f; }
.jr-read-ask-text span { font-size: 17px; font-weight: 500; line-height: 1.4; color: #13251f; text-wrap: pretty; }
.jr-read-ask-actions { flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.jr-read-ask-foot { font-size: 16.5px; font-weight: 500; color: #13251f; text-wrap: pretty; }

/* ---------------------------------------------------------------- buttons */
.jr-read-cta {
  appearance: none; border: none; cursor: pointer; min-height: 62px; padding: 0 30px;
  border-radius: 18px; background: #f36b35; color: #fffdf6; font-weight: 700; font-size: 20px;
  box-shadow: 0 4px 0 #c84a22; text-decoration: none; display: inline-flex; align-items: center;
}
.jr-read-cta.small { min-height: 60px; padding: 0 26px; font-size: 19px; }
.jr-read-cta:active { transform: translateY(4px); box-shadow: none; }
.jr-read-quiet {
  appearance: none; cursor: pointer; min-height: 60px; padding: 0 22px; border-radius: 18px;
  background: #fffdf6; border: 1.5px solid #eadfc9; font-weight: 600; font-size: 18px;
  color: #13251f; text-decoration: none; display: inline-flex; align-items: center;
}
.jr-read-quiet.tall { min-height: 62px; padding: 0 24px; }

/* ---------------------------------------------------------------- the work view */
.jr-read-work { height: 100%; display: flex; gap: 22px; }
.jr-read-left { flex: 0 0 500px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.jr-read-photo {
  flex: 1 1 auto; min-height: 0; position: relative; border-radius: 22px; overflow: hidden;
  background: #eadfc9; border: 1px solid #e2d8c5; display: flex; align-items: center; justify-content: center;
}
.jr-read-photo-img {
  width: 100%; height: 100%; display: block;
  transition: transform 220ms cubic-bezier(.2, .75, .25, 1);
  background-color: #eadfc9; background-size: contain; background-position: center; background-repeat: no-repeat;
}
.jr-read-none {
  font-weight: 500; font-size: 19px; color: #13251f; text-align: center; padding: 24px; text-wrap: pretty;
}
.jr-read-turn {
  position: absolute; right: 12px; bottom: 12px; appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px;
  border-radius: 14px; background: #fffdf6; border: 1.5px solid #e2d8c5;
  font-weight: 600; font-size: 16px; color: #13251f; box-shadow: 0 4px 12px rgba(35, 50, 44, .16);
}
.jr-read-sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 120px;
  background: linear-gradient(180deg, rgba(59, 154, 160, 0) 0%, rgba(59, 154, 160, .34) 50%, rgba(59, 154, 160, 0) 100%);
  animation: sj-read-sweep 1.5s linear infinite;
}
@keyframes sj-read-sweep {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(560px); }
}
.jr-read-file {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: 16px; background: #fffdf6; border: 1px solid #eadfc9;
}
.jr-read-file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-read-file-text strong { font-weight: 600; font-size: 17px; color: #13251f; text-wrap: pretty; }
.jr-read-file-text span { font-size: 15.5px; font-weight: 500; color: #13251f; }
.jr-read-for {
  flex: none; font-weight: 600; font-size: 14px; color: #19776f; background: #e3f5f8;
  border: 1px solid #cfe8e8; border-radius: 999px; padding: 8px 14px; white-space: nowrap;
}

.jr-read-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; min-height: 0; }

/* reading */
.jr-read-busy {
  flex: 1 1 auto; min-height: 0; background: #fffdf6; border: 2px solid #cfe8e8; border-radius: 24px;
  padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.jr-read-busy h1 { margin: 0; font-weight: 700; font-size: 36px; line-height: 1.08; color: #13251f; }
.jr-read-busy p { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: #13251f; max-width: 60ch; text-wrap: pretty; }
.jr-read-steps { display: flex; flex-direction: column; gap: 9px; }
.jr-read-step {
  display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 18px; color: #13251f;
  animation: sj-read-breathe 1.8s ease-in-out infinite;
}
.jr-read-step i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #42a9c8; display: block; }
/* Hers fades between .55 and 1 opacity. A stalled opacity animation hides content, so this
   nudges instead and the words stay readable whatever the tab is doing. */
@keyframes sj-read-breathe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* the no-luck card */
.jr-read-fail {
  flex: 1 1 auto; min-height: 0; background: #fffdf6; border: 2px solid #f0dcac; border-radius: 24px;
  padding: 30px 34px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
.jr-read-fail h1 { margin: 0; font-weight: 700; font-size: 34px; line-height: 1.08; color: #13251f; text-wrap: pretty; }
.jr-read-fail p { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: #13251f; max-width: 62ch; text-wrap: pretty; }
.jr-read-fail-fill { flex: 1 1 auto; min-height: 8px; }
.jr-read-fail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* the check card */
.jr-read-check {
  flex: 1 1 auto; min-height: 0; background: #fffdf6; border: 2px solid #cfe8e8; border-radius: 24px;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
}
.jr-read-check-head { flex: none; display: flex; flex-direction: column; gap: 4px; }
.jr-read-check-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jr-read-kind {
  font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 13px;
}
.jr-read-found { font-weight: 500; font-size: 16px; color: #13251f; }
.jr-read-check-head h2 { margin: 0; font-weight: 700; font-size: 27px; line-height: 1.12; color: #13251f; text-wrap: pretty; }
.jr-read-check-fields { flex: none; display: flex; gap: 10px; flex-wrap: wrap; }
.jr-read-field { display: flex; flex-direction: column; gap: 4px; }
.jr-read-field.grow { flex: 1 1 260px; min-width: 0; }
.jr-read-field.from { flex: 0 0 190px; }
.jr-read-field.due { flex: 0 0 160px; }
.jr-read-field-label {
  font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #13251f;
}
.jr-read-field input,
.jr-read-field select {
  width: 100%; min-height: 52px; font-size: 18px; font-weight: 600; padding: 0 14px;
  border-radius: 14px; border: 2px solid #eadfc9; background: #fff9e9; color: #13251f; outline: none;
}
.jr-read-field input:focus,
.jr-read-field select:focus { border-color: #cfe8e8; }

.jr-read-block { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.jr-read-block-label {
  flex: none; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #13251f;
}
.jr-read-block-note { font-size: 15.5px; font-weight: 500; color: #13251f; text-wrap: pretty; }
.jr-read-words {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; padding-right: 4px;
}
.jr-read-word-row { display: flex; align-items: center; gap: 9px; }
.jr-read-word-n { flex: none; width: 26px; font-weight: 500; font-size: 15px; color: #13251f; text-align: right; }
.jr-read-word-row input {
  flex: 1 1 auto; min-width: 0; min-height: 50px; font-family: var(--sj-font-story); font-size: 21px;
  padding: 0 13px; border-radius: 13px; border: 2px solid #eadfc9; background: #fff9e9;
  color: #13251f; outline: none;
}
.jr-read-word-row input.empty { background: #fff8e6; border-color: #f0dcac; }
.jr-read-word-row input:focus { border-color: #42a9c8; }
.jr-read-drop {
  flex: none; appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: 13px;
  background: #fffdf6; border: 1.5px solid #eadfc9; font-weight: 500; font-size: 19px; color: #13251f;
  display: flex; align-items: center; justify-content: center;
}
.jr-read-drop:hover { border-color: #e8b9a4; color: #a8492a; }
.jr-read-addrow { flex: none; display: flex; align-items: center; gap: 10px; }
.jr-read-addrow input {
  flex: 0 0 260px; min-height: 50px; font-family: var(--sj-font-story); font-size: 20px;
  padding: 0 13px; border-radius: 13px; border: 2px dashed #d8ccb0; background: #fff9e9;
  color: #13251f; outline: none;
}
.jr-read-addrow input:focus { border-color: #42a9c8; }
.jr-read-add {
  flex: none; appearance: none; cursor: pointer; min-height: 50px; padding: 0 18px; border-radius: 13px;
  background: #fffdf6; border: 1.5px solid #eadfc9; font-weight: 600; font-size: 17px; color: #13251f;
}

.jr-read-problems { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.jr-read-problem { display: flex; align-items: center; gap: 9px; }
.jr-read-problem .n { flex: none; width: 24px; font-weight: 500; font-size: 15px; color: #13251f; text-align: right; }
.jr-read-problem .q {
  flex: 1 1 auto; min-width: 0; min-height: 50px; font-family: var(--sj-font-story); font-size: 20px;
  padding: 0 13px; border-radius: 13px; border: 2px solid #eadfc9; background: #fff9e9; color: #13251f; outline: none;
}
.jr-read-problem .a {
  flex: 0 0 128px; min-height: 50px; font-family: var(--sj-font-story); font-size: 20px;
  padding: 0 12px; border-radius: 13px; border: 2px solid #cfe8e8; background: #e3f5f8; color: #13251f; outline: none;
}
.jr-read-problem .help { flex: none; width: 74px; font-size: 14.5px; font-weight: 600; text-align: center; color: #13251f; }
.jr-read-problem .help.has { color: #246c3c; }

.jr-read-check-foot {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid #f0ebe0;
}
.jr-read-check-note {
  flex: 1 1 200px; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35;
  color: #13251f; text-wrap: pretty;
}
.jr-read-check-note.ok { color: #246c3c; }
.jr-read-check-note.bad { color: #a8492a; }

/* ---------------------------------------------------------------- saved */
.jr-read-saved-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.jr-read-saved { width: 1000px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.jr-read-saved-head { display: flex; align-items: center; gap: 14px; }
.jr-read-saved-mark {
  flex: none; width: 52px; height: 52px; border-radius: 16px; background: #eaf7ef;
  border: 2px solid #bfe2cd; display: flex; align-items: center; justify-content: center; color: #246c3c;
}
.jr-read-saved h1 { margin: 0; font-weight: 700; font-size: 40px; line-height: 1.06; color: #13251f; text-wrap: pretty; }
.jr-read-saved > p { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.45; color: #13251f; max-width: 76ch; text-wrap: pretty; }
.jr-read-saved-rows { display: flex; flex-direction: column; gap: 10px; }
.jr-read-saved-row {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 20px; border-radius: 18px;
  background: #fffdf6; border: 1px solid #eadfc9;
}
.jr-read-saved-row b {
  flex: 0 0 190px; font-weight: 600; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: #13251f;
}
.jr-read-saved-row span {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 19px; line-height: 1.3;
  color: #13251f; text-wrap: pretty;
}
.jr-read-saved-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- phones (DECISIONS #164)
   SHE DREW NO PHONE FRAME FOR READ. Minimum honest stacking: her 500px photograph column and
   the panel beside it become one column, photograph first, and her 980/1000px cards go fluid.
   Her composition on a phone waits on her frames. */
@media (max-width: 767px) {
  .jr-phone-natural .jr-read-bar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  }
  .jr-phone-natural .jr-read-ask,
  .jr-phone-natural .jr-read-saved { width: 100%; max-width: 100%; max-height: none; }
  .jr-phone-natural .jr-read-ask-wrap { height: auto; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  .jr-phone-natural .jr-read-work { height: auto; display: block; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  .jr-phone-natural .jr-read-left,
  .jr-phone-natural .jr-read-right { flex: none; width: 100%; min-height: 0; margin-bottom: 14px; }
  .jr-phone-natural .jr-read-ask-actions,
  .jr-phone-natural .jr-read-fail-actions { flex-direction: column; align-items: stretch; }
  .jr-phone-natural .jr-read-ask-actions > *,
  .jr-phone-natural .jr-read-fail-actions > * { width: 100%; justify-content: center; }
  .jr-phone-natural .jr-read input,
  .jr-phone-natural .jr-read textarea { width: 100%; max-width: 100%; }
}