/* src/components/jr/browser/browser.css — SJ2 Browser.
   Every number transcribed from
   art-source/design-sj2-2026-09-12/screens/SJ2 Browser.dc.html: the 56px tab strip at 76,
   the 64px address bar at 132, the pane from 196 to 76 off the bottom, and the 76px footer.

   The one control that changed shape is the address itself: hers is an `<input>` and this is
   the address a grown-up saved, set as text. Nothing in Schola Jr is a field a child can
   reach, and this is the last screen that should have one. */

/* ---------------------------------------------------------------- the tab strip */
.jr-br-tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  height: 56px;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--sj-sand);
  border-bottom: 1px solid var(--sj-line-warm);
}

.jr-br-tab {
  flex: 0 1 auto;
  max-width: 320px;
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px 12px 0 0;
  background: var(--sj-card);
  border: 1px solid var(--sj-line-warm);
  border-bottom: none;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--sj-ink);
  white-space: nowrap;
  overflow: hidden;
}
.jr-br-tabdot { flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--sj-line-warm); display: block; }
.jr-br-tabdot-on { background: var(--sj-teal); }
.jr-br-tablabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.jr-br-newtab,
.jr-br-closewin {
  flex: none;
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sj-card);
  border: 1px solid var(--sj-line-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-ink);
}
.jr-br-tabgap { flex: 1 1 auto; }

/* ---------------------------------------------------------------- the address bar */
.jr-br-addr {
  position: absolute;
  left: 0;
  right: 0;
  top: 132px;
  height: 64px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--sj-card);
  border-bottom: 1px solid var(--sj-line);
}

.jr-br-round {
  flex: none;
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-ink);
}

.jr-br-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 8px 0 16px;
  border-radius: 14px;
  background: var(--sj-stage);
  border: 2px solid var(--sj-line);
}
.jr-br-field-busy { border-color: var(--sj-teal); }

.jr-br-lock { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #a89e8c; }
.jr-br-lock-on { color: var(--sj-green-ink); }

.jr-br-url {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--sj-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jr-br-go {
  flex: none;
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  background: var(--sj-card);
  border: 1px solid var(--sj-line-warm);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--sj-ink);
  white-space: nowrap;
}

.jr-br-save {
  flex: none;
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 4px 0 var(--sj-orange-deep);
  white-space: nowrap;
}
.jr-br-save-done { background: var(--sj-green-ink); box-shadow: 0 4px 0 #0f5a2c; }
.jr-br-save:active { transform: translateY(4px); box-shadow: none; }

/* Her loading bar. The animation is a translate, so it is transform-only already. */
.jr-br-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 196px;
  height: 4px;
  z-index: 8;
  overflow: hidden;
  background: var(--sj-line);
}
.jr-br-barfill {
  display: block;
  width: 30%;
  height: 100%;
  background: var(--sj-teal);
  animation: sj2-bar 1.1s ease-in-out infinite;
}
@keyframes sj2-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* ---------------------------------------------------------------- the pane */
.jr-br-pane {
  position: absolute;
  left: 0;
  right: 0;
  top: 196px;
  bottom: 76px;
  overflow: hidden;
  background: var(--sj-card);
}
.jr-br-pane-desk { background: #dbc9a8; }

.jr-br-frame { width: 100%; height: 100%; border: none; display: block; background: var(--sj-card); }

/* ---- empty: the links this household saved ---- */
.jr-br-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  box-sizing: border-box;
}
.jr-br-links {
  width: 720px;
  max-width: 100%;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(35, 50, 44, .12);
  overflow: hidden;
}
.jr-br-linkshead { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px 12px; border-bottom: 1px solid #f0ebe0; }
.jr-br-linkstitle { font-family: var(--sj-font); font-weight: 700; font-size: 19px; color: var(--sj-ink); }
.jr-br-gap { flex: 1 1 auto; }
.jr-br-linkscount { font-family: var(--sj-font); font-weight: 500; font-size: 15px; color: var(--sj-ink); }

.jr-br-linkrow { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid #f5f1e7; }
.jr-br-linkdot { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--sj-teal-line); display: block; }
.jr-br-linktext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-br-linkname { font-family: var(--sj-font); font-weight: 600; font-size: 18px; color: var(--sj-ink); text-wrap: pretty; }
.jr-br-linkhost { font-size: 15px; font-weight: 500; color: var(--sj-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-br-linknote { flex: none; font-family: var(--sj-font); font-weight: 500; font-size: 15px; color: var(--sj-teal-ink); white-space: nowrap; }
.jr-br-linkgo {
  flex: none;
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-ink);
}
.jr-br-linksempty { margin: 0; padding: 16px 20px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--sj-ink); text-wrap: pretty; }
.jr-br-linksfoot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 20px; }
.jr-br-linksall {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--sj-teal-ink);
  text-decoration: none;
}
.jr-br-emptynote {
  margin: 0;
  max-width: 64ch;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--sj-ink);
  text-align: center;
  text-wrap: pretty;
}

/* ---- saved: their own pages, as they came ---- */
.jr-br-saved {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  box-sizing: border-box;
}
.jr-br-paperwrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.jr-br-paper {
  position: relative;
  height: 100%;
  aspect-ratio: 8.5 / 11;
  background: var(--sj-card);
  box-shadow: 0 18px 44px rgba(35, 50, 44, .34);
  border-radius: 3px;
  overflow: hidden;
}
.jr-br-pageimg {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--sj-card);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.jr-br-pagemissing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--sj-ink);
}
.jr-br-asitcame {
  position: absolute;
  left: 0;
  top: 0;
  padding: 7px 14px;
  border-bottom-right-radius: 12px;
  background: var(--sj-ink);
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.jr-br-turn { flex: none; display: flex; align-items: center; gap: 12px; }
.jr-br-turnbtn {
  appearance: none;
  cursor: pointer;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--sj-card);
  border: 1.5px solid #d8ccb0;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--sj-ink);
}
.jr-br-turnbtn-off { background: #e9dfc9; color: #a89e8c; cursor: default; }
.jr-br-dots { display: flex; align-items: center; gap: 7px; }
.jr-br-dot {
  appearance: none;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--sj-card);
  border: 1px solid #d8ccb0;
  padding: 0;
}
.jr-br-dot-q { background: var(--sj-green-line); }
.jr-br-dot-on { width: 30px; background: var(--sj-orange); border-color: var(--sj-orange-deep); }

/* ---- blocked, and the child's-side card that wears the same shape ---- */
.jr-br-blocked { height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.jr-br-blockedcard {
  width: 840px;
  max-width: 100%;
  background: var(--sj-card);
  border: 2px solid var(--sj-sun-line);
  border-radius: var(--sj-r-panel);
  box-shadow: 0 16px 40px rgba(35, 50, 44, .13);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.jr-br-outside { border-color: var(--sj-teal-line); }
.jr-br-blockedkicker {
  align-self: flex-start;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sj-sun-ink);
  background: #fff8e6;
  border: 1px solid var(--sj-sun-line);
  border-radius: var(--sj-r-pill);
  padding: 6px 13px;
}
.jr-br-outside .jr-br-blockedkicker { color: var(--sj-teal-ink); background: var(--sj-teal-tint); border-color: var(--sj-teal-line); }
.jr-br-blockedh1 { margin: 0; font-family: var(--sj-font); font-weight: 700; font-size: 33px; line-height: 1.1; color: var(--sj-ink); text-wrap: pretty; }
.jr-br-blockednote { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--sj-ink); max-width: 74ch; text-wrap: pretty; }
.jr-br-blockedask { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--sj-green-ink); text-wrap: pretty; }
.jr-br-blockedrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.jr-br-bigorange {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding: 0 26px;
  border-radius: 18px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 19px;
  box-shadow: 0 4px 0 var(--sj-orange-deep);
  text-decoration: none;
}
.jr-br-bigorange:active { transform: translateY(4px); box-shadow: none; }
.jr-br-bigplain {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding: 0 22px;
  border-radius: 18px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--sj-ink);
  text-decoration: none;
}
.jr-br-blockedfoot { padding-top: 10px; border-top: 1px solid #f0ebe0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }

/* ---------------------------------------------------------------- the footer */
.jr-br-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  box-sizing: border-box;
  background: var(--sj-card);
  border-top: 1px solid var(--sj-line);
}
.jr-br-foottext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-br-foottitle { font-family: var(--sj-font); font-weight: 600; font-size: 18px; color: var(--sj-ink); text-wrap: pretty; }
.jr-br-footnote { font-size: 16px; font-weight: 500; color: var(--sj-ink); text-wrap: pretty; }
.jr-br-footacts { flex: none; display: flex; align-items: center; gap: 10px; }
.jr-br-footbtn,
.jr-br-foothand {
  appearance: none;
  cursor: pointer;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 15px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 17px;
  color: var(--sj-ink);
  white-space: nowrap;
}
.jr-br-foothand {
  padding: 0 22px;
  border-color: var(--sj-green-line);
  box-shadow: 0 4px 0 var(--sj-green-line);
  font-weight: 700;
  color: var(--sj-green-ink);
}
.jr-br-footbtn:active,
.jr-br-foothand:active { transform: translateY(4px); box-shadow: none; }

/* ---------------------------------------------------------------- phones (DECISIONS #164)
   SHE DREW NO PHONE FRAME FOR THE BROWSER. Her window is four absolutely positioned bands at
   fixed offsets (76 / 132 / 196 / bottom 76) inside the tablet stage; on a phone those offsets
   are a guess about a height nobody has. So the four bands simply stack in flow and the page
   pane takes what is left. Minimum honest stacking, nothing restyled: the tab strip and the
   address row scroll or wrap rather than overflow, and her cards were already `max-width:100%`.
   A real phone browser chrome waits on her frames. */
@media (max-width: 767px) {
  .jr-phone-natural .jr-br-tabs,
  .jr-phone-natural .jr-br-addr,
  .jr-phone-natural .jr-br-bar,
  .jr-phone-natural .jr-br-pane {
    position: static;
    flex: none;
    top: auto;
    bottom: auto;
  }
  .jr-phone-natural .jr-br-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .jr-phone-natural .jr-br-tabs::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-br-tab { flex: 0 0 auto; }
  .jr-phone-natural .jr-br-addr {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 14px;
  }
  .jr-phone-natural .jr-br-field { flex: 1 1 100%; min-width: 0; }
  .jr-phone-natural .jr-br-save { flex: 1 1 auto; justify-content: center; }
  .jr-phone-natural .jr-br-pane { flex: 1 1 auto; min-height: 60vh; }
  .jr-phone-natural .jr-br-empty { padding: 18px 14px calc(20px + env(safe-area-inset-bottom)); }
  .jr-phone-natural .jr-br-linkrow { flex-wrap: wrap; }
  .jr-phone-natural .jr-br-blocked { padding: 18px 14px; }
  .jr-phone-natural .jr-br-blockedcard { padding: 20px 18px; }
}