/* Independent companion and worship-context layer for Shared Word Bible Reader 3.1. */

.tsw-reader-app .tswr-explore-button {
  grid-area: explore;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px !important;
  border: 1px solid var(--tsw-border) !important;
  border-radius: 999px !important;
  background: var(--tsw-surface) !important;
  color: var(--tsw-text) !important;
  box-shadow: none !important;
  font-family: var(--tsw-ui-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap;
  cursor: pointer;
}

.tsw-reader-app .tswr-explore-button:hover,
.tsw-reader-app .tswr-explore-button:focus-visible { background: var(--tsw-accent-soft) !important; }

.tswr-explore-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--tsw-accent-soft);
  color: var(--tsw-accent-strong);
  font-size: 10px;
}

.tsw-sheet--companion {
  width: min(900px,calc(100vw - 28px));
  max-height: min(86vh,860px);
}

.tswr-companion-intro {
  max-width: 720px;
  margin: 0 0 18px;
  color: var(--tsw-muted);
  font-size: 14px;
  line-height: 1.6;
}

.tswr-companion-options {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 7px;
  margin-bottom: 22px;
  padding: 5px;
  border: 1px solid var(--tsw-border);
  border-radius: 17px;
  background: var(--tsw-surface-2);
}

.tswr-companion-options button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-height: 54px;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--tsw-muted) !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
}

.tswr-companion-options button.is-active {
  border-color: var(--tsw-border) !important;
  background: var(--tsw-surface) !important;
  color: var(--tsw-text) !important;
  box-shadow: 0 4px 14px rgba(18,38,54,.08) !important;
}

.tswr-companion-options strong { font-size: 12px; }
.tswr-companion-options span { margin-top: 3px; font-size: 9px; font-weight: 650; }

.tswr-companion-empty,
.tswr-companion-affinity,
.tswr-content-notice {
  padding: 16px 18px;
  border: 1px solid var(--tsw-border);
  border-radius: 14px;
  background: var(--tsw-surface-2);
}

.tswr-companion-empty h3 { margin: 0 0 6px; font-family: var(--tsw-reading-font); font-size: 22px; }
.tswr-companion-empty p,
.tswr-companion-affinity { margin: 0; color: var(--tsw-muted); font-size: 13px; line-height: 1.6; }

.tswr-companion-entry + .tswr-companion-entry {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--tsw-border);
}

.tswr-companion-entry > header p {
  margin: 0 0 5px;
  color: var(--tsw-orange);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tswr-companion-entry > header h3 {
  margin: 0 0 18px;
  color: var(--tsw-text);
  font-family: var(--tsw-reading-font);
  font-size: clamp(26px,4vw,36px);
  font-weight: 600;
  line-height: 1.08;
}

.tswr-content-notice { margin: 0 0 20px; }
.tswr-content-notice summary { color: var(--tsw-text); font-size: 12px; font-weight: 800; cursor: pointer; }
.tswr-content-notice p { margin: 10px 0 0; color: var(--tsw-muted); font-size: 13px; line-height: 1.55; }

.tswr-companion-section { margin-top: 26px; }
.tswr-companion-section h4 {
  margin: 0 0 9px;
  color: var(--tsw-text);
  font-family: var(--tsw-ui-font);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tswr-companion-section p,
.tswr-companion-section li { color: var(--tsw-text); font-family: var(--tsw-reading-font); font-size: 16px; line-height: 1.65; }
.tswr-companion-section p { margin: 0 0 12px; }
.tswr-companion-section ul { margin: 0 0 14px; padding-left: 22px; }
.tswr-companion-section blockquote { margin: 14px 0; padding: 14px 18px; border-left: 3px solid var(--tsw-accent); background: var(--tsw-surface-2); }
.tswr-companion-section blockquote p,
.tswr-companion-section blockquote li { font-family: var(--tsw-ui-font); font-size: 14px; }

.tswr-inline-companion {
  margin-top: 12px;
  border: 1px solid var(--tsw-border);
  border-radius: 15px;
  background: var(--tsw-surface);
}
.tswr-inline-companion > summary {
  padding: 13px 16px;
  color: var(--tsw-text);
  font-family: var(--tsw-ui-font);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.tswr-inline-companion > .tswr-companion-shell { padding: 4px 16px 20px; }

.tswr-passage-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tswr-passage-translation select { max-width: 210px; }

.tsw-reader-context--worship .tsw-reader-brand,
.tsw-reader-context--worship .tsw-bar-actions { display: none; }
.tsw-reader-context--worship .tsw-reader-bar {
  grid-template-columns: auto minmax(250px,320px) auto;
  grid-template-areas: "reference translation explore";
  justify-content: center;
  min-height: 62px;
  padding-block: 8px;
}
.tsw-reader-context--worship .tswr-translation-label,
.tsw-reader-context--worship .tswr-translation-help,
.tsw-reader-context--worship .tswr-translation-purpose { display: none !important; }
.tsw-reader-context--worship .tswr-translation-control { width: 250px !important; }
.tsw-reader-context--worship .tswr-translation-option { min-height: 36px !important; padding-block: 6px !important; }
.tsw-reader-context--worship .tsw-reader-main { padding-top: clamp(30px,5vw,54px); }

.tswr-display-translation {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 5;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb,var(--tsw-surface) 88%,transparent);
  color: var(--tsw-muted);
  font-family: var(--tsw-ui-font);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tsw-reader-context--worship-display .tsw-reader-main { padding-block: clamp(24px,5vw,58px); }
.tsw-reader-context--worship-display .tswr-chapter-nav,
.tsw-reader-context--worship-display .tswr-reader-footer,
.tsw-reader-context--worship-display .tswr-inline-study,
.tsw-reader-context--worship-display .tswr-inline-companion { display: none !important; }
.tsw-reader-context--worship-display .tswr-verse-number:disabled { opacity: 1; cursor: default; }

@media (min-width: 1180px) {
  .tsw-reader-app:not(.tsw-reader-context--worship) .tsw-reader-bar {
    grid-template-columns: minmax(170px,1fr) auto minmax(286px,320px) auto auto minmax(96px,1fr);
    grid-template-areas: "brand reference translation study explore actions";
  }
}

@media (max-width: 1179px) and (min-width: 761px) {
  .tsw-reader-app:not(.tsw-reader-context--worship) .tsw-reader-bar {
    grid-template-columns: minmax(140px,1fr) auto auto minmax(92px,1fr);
    grid-template-areas:
      "brand reference translation actions"
      "study study explore explore";
  }
}

@media (max-width: 900px) {
  .tsw-reader-context--worship .tsw-reader-bar { grid-template-columns: auto minmax(210px,1fr) auto; }
  .tsw-reader-context--worship .tswr-translation-control { width: min(250px,100%) !important; }
}

@media (max-width: 640px) {
  .tswr-companion-options { grid-template-columns: 1fr; }
  .tswr-companion-section p,
  .tswr-companion-section li { font-size: 15px; }
  .tsw-reader-context--worship .tsw-reader-bar { grid-template-columns: 1fr auto; grid-template-areas: "reference reference" "translation explore"; }
  .tsw-reader-context--worship .tswr-reference-button { grid-column: 1 / -1; }
  .tsw-reader-context--worship .tswr-translation-control { justify-self: stretch !important; width: 100% !important; }
}

@media (max-width: 760px) {
  .tsw-reader-app:not(.tsw-reader-context--worship) .tsw-reader-bar {
    grid-template-areas:
      "brand reference actions"
      "translation translation translation"
      "study study study"
      "explore explore explore";
  }
  .tsw-reader-app .tswr-explore-button { justify-self: center; }
  .tsw-sheet--companion { left: 0; right: 0; bottom: 0; transform: none; width: 100vw; max-width: none; max-height: min(88dvh,800px); border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
}