/* ============================================================================
   Screen layouts: Library, an item (film, recording, Bible), Send and Guide.

   The brand layer (colours, theme, fonts) lives in app.css and tokens.css and
   belongs to the rebrand. This sheet only arranges those colours into the
   chunky, picture-first screens from the "App screens" design canvas:

   · every kind of thing has a picture tile and its own colour, the same
     colour on every screen: Films clay, Scripture plum, Audio Bibles teal,
     Books gold
   · every row is a card you can press, with a ledge under it
   · one verb colour, not a rainbow: opening something (Watch, Listen, Read)
     and saving it are the brand plum, sharing is gold

   It reads app.css custom properties only (--surface, --green-face …), so it
   follows light and dark without a block of its own. Each page opts in with a
   class on <body>: screen-library, screen-item, screen-share, screen-help.
   ========================================================================= */

/* ------------------------------------------------------------ shared bits */
.screen-library .wrap,
.screen-item .wrap,
.screen-share .wrap,
.screen-help .wrap { padding-bottom: 1.5rem; }

/* The pill at the end of a row says what a tap does. The word carries the
   difference; the colour stays the same, so a list reads calm, not striped. */
.rowi .go--watch,
.rowi .go--listen,
.rowi .go--read   { background: var(--purple); border-color: var(--purple-deep); color: var(--on-face); }

/* ----------------------------------------------------------------- library */
.screen-library .library-search input[type="search"] {
  min-height: 60px;
  border-radius: var(--r-lg);
  font-size: 1.08rem;
  box-shadow: 0 var(--press) 0 var(--line);
}

/* Kinds: picture tiles. A row you swipe on a phone, a wrapped grid wider up. */
.screen-library #type-filters { gap: .65rem; padding: .15rem 0 calc(var(--press) + .35rem); }
.screen-library .kind-tile {
  --tile: var(--purple-wash); --ico: var(--purple); --ico-on: var(--on-face);
  flex: none;
  display: grid; justify-items: center; align-content: center; gap: .3rem;
  width: 6.4rem; min-height: 7.4rem;
  padding: .7rem .4rem;
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  background: var(--tile);
  color: var(--ink);
  box-shadow: 0 var(--press) 0 var(--line-strong);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}
.screen-library .kind-tile:active { transform: translateY(var(--press)); box-shadow: none; }
.screen-library .kind-ico {
  width: 3.25rem; height: 3.25rem; border-radius: 1.05rem;
  display: grid; place-items: center;
  background: var(--ico); color: var(--ico-on);
}
.screen-library .kind-tile .kind-ico svg { width: 1.75rem; height: 1.75rem; }
.screen-library .kind-name {
  font-size: .95rem; font-weight: 800; line-height: 1.15; text-align: center;
  max-width: 100%; overflow-wrap: anywhere;
}
.screen-library .kind-n { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.screen-library .kind-tile[aria-pressed="true"] {
  background: var(--tile); color: var(--ink);
  border-color: var(--ico);
  box-shadow: 0 var(--press) 0 var(--ico);
}
.screen-library .kind-tile[aria-pressed="true"] .kind-n { color: var(--ink); }

.kind-tile[data-kind="film"]        { --tile: var(--clay-wash);   --ico: var(--clay-face); }
.kind-tile[data-kind="scripture"]   { --tile: var(--purple-wash); --ico: var(--purple); }
.kind-tile[data-kind="audio-bible"],
.kind-tile[data-kind="audio"]       { --tile: var(--sky-wash);    --ico: var(--sky-face); }
.kind-tile[data-kind="book"]        { --tile: var(--gold-wash);   --ico: var(--gold); --ico-on: var(--on-gold); }
.kind-tile[data-kind="historic"],
.kind-tile[data-kind="link"]        { --tile: var(--sunk);        --ico: var(--ink-soft); }

@media (min-width: 40rem) {
  .screen-library #type-filters { flex-wrap: wrap; }
}

/* Rows become pressable cards with the artwork big enough to recognise. */
.screen-library .row-list { gap: .7rem; }
.screen-library .rowi {
  grid-template-columns: 76px 1fr auto;
  padding: .7rem .8rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 var(--press) 0 var(--line);
  margin-bottom: var(--press);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}
.screen-library .rowi:hover { background: var(--surface); border-color: var(--line-strong); }
.screen-library .rowi:active { transform: translateY(var(--press)); box-shadow: none; background: var(--sunk); }
.screen-library .rowi .art { width: 76px; height: 76px; border-radius: 18px; }
.screen-library .rowi .name { font-size: 1.08rem; }
.screen-library .rowi .go { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }
.screen-library .rowi:hover .go--watch,
.screen-library .rowi:hover .go--listen,
.screen-library .rowi:hover .go--read   { background: var(--purple); border-color: var(--purple-deep); }
@media (max-width: 360px) {
  .screen-library .rowi { grid-template-columns: 60px 1fr auto; gap: .6rem; padding: .6rem; }
  .screen-library .rowi .art { width: 60px; height: 60px; border-radius: 14px; }
  .screen-library .rowi .go { padding: .45rem .7rem; }
}

/* -------------------------------------------------------------------- item */
.screen-item .item-head { gap: .45rem; margin: .4rem 0 1rem; }
.screen-item .item-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
/* The facts about an item are read before anything else: badge size up. */
.screen-item .item-chips .et-badge { font-size: .82rem; padding: .3rem .7rem; gap: .35rem; }
.screen-item .item-head h1 {
  margin: .2rem 0 0;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
html[dir="rtl"] .screen-item .item-head h1 { letter-spacing: 0; line-height: 1.5; }
.screen-item .item-meta { margin: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.screen-item .item-meta svg { width: 18px; height: 18px; flex: none; }

.screen-item .player,
.screen-item #media video {
  border-radius: var(--r-lg);
  border: 3px solid var(--line);
  box-shadow: 0 var(--press) 0 var(--line-strong);
}

/* Save and Share sit right under what they act on, big and equal. */
.screen-item .item-actions { margin-top: 1.2rem; gap: .6rem; }
.screen-item .item-actions .et-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;
  padding: .6rem .5rem;
  gap: .5rem;
  font-size: 1rem;
  line-height: 1.15;
  border-radius: var(--r-lg);
  text-align: center;
}
.screen-item .item-actions .et-btn svg { width: 24px; height: 24px; }
@media (min-width: 40rem) {
  .screen-item .item-actions .et-btn { flex-direction: row; min-height: 60px; font-size: 1.05rem; }
}
.screen-item .item-desc { font-size: 1.06rem; line-height: 1.6; margin: 1.2rem 0 0; }
.screen-item .chain-banner { margin-bottom: 1rem; }

/* ------------------------------------------------------------------- send */
/* The device questions become a two-up grid of big picture buttons. */
.screen-share #wizard .et-card > .stack {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
}
.screen-share #wizard .et-tile {
  position: relative; margin: 0;
  flex-direction: column; justify-content: center; text-align: center;
  min-height: 8.5rem; gap: .55rem; padding: 1rem .6rem;
}
.screen-share #wizard .et-tile__icon { width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; }
.screen-share #wizard .et-tile__end {
  position: absolute; top: .6rem; inset-inline-end: .6rem; margin: 0;
}

/* ------------------------------------------------------------------- guide */
.screen-help .steps > li::before {
  width: 2.6rem; height: 2.6rem; font-size: 1.15rem;
  box-shadow: 0 3px 0 var(--purple-deep);
}
.screen-help .card { border-radius: var(--r-lg); }

/* -------------------------------------------------------------------- home */
/* Each shelf leads with its kind's picture in its own colour, the same
   colours as the Library tiles, and "See all" is a button, not small print. */
.shelf-ico {
  --ico: var(--purple); --ico-on: var(--on-face);
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: .8rem;
  margin-inline-end: .55rem; vertical-align: -.45rem;
  background: var(--ico); color: var(--ico-on);
}
.shelf-ico svg { width: 1.3rem; height: 1.3rem; }
.shelf[data-kind="film"] .shelf-ico      { --ico: var(--clay-face); }
.shelf[data-kind="audio-bible"] .shelf-ico,
.shelf[data-kind="audio"] .shelf-ico     { --ico: var(--sky-face); }
.shelf[data-kind="book"] .shelf-ico      { --ico: var(--gold); --ico-on: var(--on-gold); }
.shelf[data-kind="historic"] .shelf-ico,
.shelf[data-kind="link"] .shelf-ico      { --ico: var(--ink-soft); }

.screen-home .shelf-head { align-items: center; }
.screen-home .shelf-head h2 { font-size: 1.4rem; }
.screen-home .shelf-head a {
  margin: 0; padding: 0 1rem; min-height: 44px;
  border-radius: var(--r-pill);
  background: var(--purple-wash); color: var(--purple);
  font-weight: 800; white-space: nowrap;
}
.screen-home .poster .art,
.screen-library .poster .art {
  border-radius: 20px;
  border: 2px solid var(--line);
  box-shadow: 0 var(--press) 0 var(--line-strong);
  margin-bottom: var(--press);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}
.screen-home .poster:active,
.screen-library .poster:active { opacity: 1; }
.screen-home .poster:active .art,
.screen-library .poster:active .art { transform: translateY(var(--press)); box-shadow: none; }
.screen-home .poster .name { font-size: 1rem; font-weight: 800; }

/* -------------------------------------------------------------- guide hero */
.help-hero { display: flex; align-items: center; gap: .8rem; }
.help-hero h1 { margin: 0; }
.help-hero #help-kandili { flex: none; }
.help-hero #help-kandili:empty { display: none; }

.screen-help .help-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.screen-help .help-heading h2 { margin: 0; }
.screen-help .help-heading .et-tile__icon { width: 44px; height: 44px; }
.screen-help .help-heading .et-tile__icon svg { width: 24px; height: 24px; }

/* The chapter (or recording) picker and its Next button share one line, so
   Save and Share stay on the first screen of a small Android. */
.screen-item .picker { flex-wrap: nowrap; align-items: stretch; }
.screen-item .picker > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-item .picker > select { flex: 1 1 auto; min-width: 0; }
.screen-item .picker > .et-btn { flex: none; white-space: nowrap; }
.screen-item .picker.two > div { min-width: 0; }
/* On a phone, Next is a round arrow; its words stay as its spoken name. */
@media (max-width: 40rem) {
  .screen-item .picker > .et-btn { font-size: 0; width: 56px; min-width: 56px; padding: 0; justify-content: center; }
  .screen-item .picker > .et-btn svg { width: 24px; height: 24px; margin: 0; }
}