/* ── Site header collapse (reader page only) ────────────────── */
body.sggs-reader-page-mode header.header-init,
body.sggs-reader-page-mode header.navbar {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sggs-reader-page-mode.sggs-header-collapsed header.header-init,
body.sggs-reader-page-mode.sggs-header-collapsed header.navbar {
  transform: translateY(-100%) !important;
}

/* Handle — pull-down tab hanging from top edge */
.sggs-header-handle {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100001;
  transform: translateX(-50%) translateY(-100%);
  padding: 6px 20px 8px;
  background: #fffaf1;
  border: 1px solid #e4d8c8;
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: #4f3b2e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, color 0.15s;
}

body.sggs-header-collapsed .sggs-header-handle {
  transform: translateX(-50%) translateY(0);
}

.sggs-header-handle.is-pinned {
  background: #4f3b2e;
  color: #fffaf1;
}

body.sggs-reader-theme-night .sggs-header-handle {
  background: #0d0a14;
  border-color: rgba(244, 185, 66, 0.3);
  color: #c8b8e8;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

body.sggs-reader-theme-night .sggs-header-handle.is-pinned {
  background: rgba(244, 185, 66, 0.9);
  color: #0d0a14;
  border-color: #f4b942;
}

.sggs-reader {
  --sggs-page: #f8f5ee;
  --sggs-surface: #fffcf6;
  --sggs-border: #e4d8c8;
  --sggs-ink: #222222;
  --sggs-muted: #66615a;
  --sggs-gurmukhi: #550000;
  --sggs-translation: #005500;
  --sggs-context: #0055aa;
  --sggs-artistic: #333366;
  --sggs-rahao: #880044;
  background: var(--sggs-page);
  color: var(--sggs-ink);
  padding: 18px;
  border: 1px solid var(--sggs-border);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-top: var(--sggs-site-header-h, 96px);
  scroll-margin-top: calc(var(--sggs-site-header-h, 96px) + 16px);
}

body.sggs-reader-page-mode.sggs-header-collapsed .sggs-reader {
  margin-top: 4px;
  scroll-margin-top: 20px;
}

.sggs-reader *,
.sggs-search,
.sggs-search *,
.sggs-search *::before,
.sggs-search *::after {
  box-sizing: border-box;
}

.sggs-search {
  --sggs-page: #f7f0e6;
  --sggs-surface: #fffaf1;
  --sggs-ink: #1f1b24;
  --sggs-muted: #62564a;
  --sggs-border: rgba(79, 59, 46, 0.18);
  --sggs-gold: #f4b942;
  background: var(--sggs-page);
  color: var(--sggs-ink);
  padding: 18px;
}

.sggs-search__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px;
  align-items: start;
}

.sggs-search__main,
.sggs-search__themes,
.sggs-search__form,
.sggs-search__result,
.sggs-search__theme {
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
}

.sggs-search__ksd-canvas-link,
.sggs-reader__ksd-canvas-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sggs-search__ksd-canvas-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1.5px solid #9a6a24;
  border-radius: 5px;
  background: #fffaf1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.sggs-search__ksd-canvas-icon::before,
.sggs-search__ksd-canvas-icon::after,
.sggs-search__ksd-canvas-icon span {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1.5px;
  border-radius: 999px;
  background: #9a6a24;
}

.sggs-search__ksd-canvas-icon::before {
  top: 5px;
}

.sggs-search__ksd-canvas-icon::after {
  top: 8px;
}

.sggs-search__ksd-canvas-icon span {
  top: 11px;
}

.sggs-search__main,
.sggs-search__themes {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.sggs-search__form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.sggs-search__field,
.sggs-search__filters label {
  display: grid;
  gap: 5px;
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
}

.sggs-search input,
.sggs-search select {
  width: 100%;
  border: 1px solid var(--sggs-border);
  background: #fff;
  color: var(--sggs-ink);
  padding: 9px 10px;
  font: inherit;
}

.sggs-search__field input {
  font-size: 18px;
}

.sggs-search__filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 110px 110px auto;
  gap: 10px;
  align-items: end;
}

.sggs-search__filters button {
  min-height: 40px;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-gold);
  color: #1f1b24;
  font-weight: 700;
  cursor: pointer;
}

.sggs-search__results {
  display: grid;
  gap: 10px;
}

.sggs-search__result a {
  display: grid;
  gap: 7px;
  padding: 13px;
  color: inherit;
  text-decoration: none;
}

.sggs-search__result span,
.sggs-search__result small,
.sggs-search__theme small,
.sggs-search__theme p {
  color: var(--sggs-muted);
}

.sggs-search__result strong {
  color: #7a2030;
  font-size: 20px;
  line-height: 1.45;
}

.sggs-search__result p {
  margin: 0;
  line-height: 1.55;
}

.sggs-search__result mark {
  background: #ffe08a;
  color: #1f1b24;
  padding: 0 2px;
}

.sggs-search__themes h2,
.sggs-search__theme h3 {
  margin: 0;
  color: #4f3b2e;
  font-size: 16px;
}

.sggs-search__ksd-canvas-link {
  justify-self: start;
  border: 1px solid #e3d3ad;
  background: #f3e9d2;
  color: #8a5a1a;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.sggs-search__ksd-canvas-link:hover {
  background: #ecdcb8;
}

.sggs-search__concepts {
  display: grid;
  gap: 10px;
}

.sggs-search__concepts-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sggs-search__concepts-head .sggs-search__ksd-canvas-link {
  padding: 4px 10px;
  font-size: 12px;
}

.sggs-search__concept-list {
  display: grid;
  gap: 7px;
}

.sggs-search__concept {
  display: grid;
  gap: 3px;
  border: 1px solid var(--sggs-border);
  background: #fffdf7;
  color: inherit;
  padding: 10px;
  text-decoration: none;
}

.sggs-search__concept:hover,
.sggs-search__concept:focus-visible {
  border-color: rgba(122, 32, 48, 0.35);
  background: #fff6e5;
}

.sggs-search__concept span {
  color: #4f3b2e;
  font-weight: 800;
}

.sggs-search__concept small,
.sggs-search__concept p {
  margin: 0;
  color: var(--sggs-muted);
}

.sggs-search__theme {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.sggs-search__theme-lines {
  display: grid;
  gap: 6px;
}

.sggs-search__theme-lines button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.sggs-search__theme-lines button:hover,
.sggs-search__theme-lines button:focus-visible,
.sggs-search__result a:hover,
.sggs-search__result a:focus-visible {
  outline: 2px solid var(--sggs-gold);
  outline-offset: 1px;
}

@media (max-width: 860px) {
  .sggs-search {
    padding: 10px;
  }

  .sggs-search__layout,
  .sggs-search__filters {
    grid-template-columns: 1fr;
  }
}

.sggs-reader *::before,
.sggs-reader *::after {
  box-sizing: border-box;
}

.sggs-reader__toolbar,
.sggs-reader__heading,
.sggs-reader__shabad-head,
.sggs-reader__line {
  background: var(--sggs-surface);
  border: 1px solid var(--sggs-border);
}

.sggs-reader {
  position: relative;
}

.sggs-reader__sticky-top {
  position: sticky;
  top: var(--sggs-site-header-h, 96px);
  z-index: 30;
  background: var(--sggs-page);
}

body.sggs-header-collapsed .sggs-reader__sticky-top {
  top: 0;
}

.sggs-reader__toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}

.sggs-reader__quick-search-strip,
.sggs-reader__ang-search-strip {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--sggs-border);
  background: var(--sggs-page);
}

.sggs-reader__ang-search-strip {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sggs-border);
}

.sggs-reader__quick-search-strip .sggs-reader__global-results:empty {
  display: none;
}

.sggs-reader__quick-search-strip .sggs-reader__global-results {
  max-height: min(42vh, 420px);
  overflow: auto;
}

.sggs-reader__ang-search-strip .sggs-reader__search {
  width: 100%;
}

.sggs-reader__toolbar {
  justify-content: flex-start;
}

.sggs-reader__toolbar .sggs-reader__nav {
  margin-right: auto;
}

.sggs-reader__toolbar > .sggs-reader__settings-toggle,
.sggs-reader__toolbar > .sggs-reader__theme-toggle {
  margin-left: 0;
}

.sggs-reader__search-panel .sggs-reader__settings-section--search {
  display: none;
}

.sggs-reader__settings-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sggs-reader__nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sggs-reader__icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.sggs-reader__ang-control {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--sggs-muted);
  font-size: 14px;
  font-weight: 600;
}

.sggs-reader__ang-control input {
  width: 82px;
}

.sggs-reader input,
.sggs-reader textarea {
  border: 1px solid var(--sggs-border);
  background: #ffffff;
  color: var(--sggs-ink);
  padding: 8px 10px;
  font: inherit;
}

.sggs-reader__search {
  width: min(360px, 100%);
}

.sggs-reader__view-options {
  display: grid;
  gap: 8px;
}

.sggs-reader__settings {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.sggs-reader__settings.is-open {
  display: grid;
}

.sggs-reader__search-panel {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.sggs-reader__settings-section--search {
  grid-column: 1 / -1;
}

.sggs-reader__search-panel-columns {
  display: contents;
}

.sggs-reader__search-panel.is-open {
  display: grid;
}

.sggs-reader__settings-section {
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  padding: 12px;
}

.sggs-reader__settings-section h3 {
  margin: 0 0 10px !important;
  color: #4f3b2e;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sggs-reader__layers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sggs-reader__layers--translators {
  display: grid;
  grid-template-columns: 1fr;
}

.sggs-reader__layers--display {
  padding-bottom: 2px;
}

.sggs-reader__work-results,
.sggs-reader__author-results,
.sggs-reader__author-shabads,
.sggs-reader__global-results {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
}

.sggs-reader__global-results {
  max-height: 320px;
}

.sggs-reader__work {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: var(--sggs-ink);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.sggs-reader__work span {
  font-weight: 700;
}

.sggs-reader__work small,
.sggs-reader__editor-note {
  color: var(--sggs-muted);
  font-size: 12px;
  line-height: 1.45;
}

.sggs-reader__author-shabad-head {
  margin: 10px 0 4px;
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.sggs-reader__search-result {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid #cfe0f4;
  background: #f7fbff;
  color: var(--sggs-ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.sggs-reader__search-result span {
  font-weight: 700;
}

.sggs-reader__search-result small {
  color: #315f93;
  font-size: 12px;
}

.sggs-reader__search-result div {
  color: var(--sggs-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sggs-reader__search-result mark {
  background: #fff0a6;
  color: inherit;
  padding: 0 2px;
}

.sggs-reader__search-count {
  font-size: 12px;
  color: var(--sggs-muted);
  margin: 0 0 6px;
}

.sggs-reader__search-count strong {
  color: var(--sggs-ink);
}

/* ── Settings hint animation ────────────────────────────────── */
@keyframes sggs-settings-hint {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(136, 0, 68, 0.25); }
  55%  { transform: scale(1.2);  box-shadow: 0 0 0 2px rgba(136, 0, 68, 0.12); }
  100% { transform: scale(1);   box-shadow: none; }
}

.sggs-reader__settings-toggle.is-hinting,
.sggs-reader__floating-settings.is-hinting {
  animation: sggs-settings-hint 2.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 4;
}

/* ── Corpus search head ─────────────────────────────────────── */
.sggs-reader__corpus-search-head {
  display: flex;
  gap: 4px;
  align-items: center;
}

.sggs-reader__corpus-search-input {
  flex: 1;
  min-width: 0;
}

.sggs-reader__kb-toggle,
.sggs-reader__search-adv-toggle {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.sggs-reader__kb-toggle.is-active,
.sggs-reader__search-adv-toggle.is-active {
  background: #4f3b2e;
  color: #fffaf1;
  border-color: #4f3b2e;
}

/* ── Gurmukhi keyboard ──────────────────────────────────────── */
.sggs-reader__gurmukhi-keyboard {
  margin-top: 6px;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  padding: 6px;
}

.sggs-reader__gurmukhi-keyboard[hidden] {
  display: none;
}

.sggs-reader__kb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 3px;
}

.sggs-reader__kb-row--actions {
  margin-top: 2px;
  border-top: 1px solid var(--sggs-border);
  padding-top: 4px;
}

.sggs-reader__kb-key {
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: var(--sggs-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-align: center;
}

.sggs-reader__kb-key:hover {
  background: #f0e8d8;
}

.sggs-reader__kb-key--wide {
  min-width: 60px;
  font-size: 13px;
}

/* ── Advanced search filters ────────────────────────────────── */
.sggs-reader__search-advanced {
  display: none;
  gap: 6px;
  flex-direction: column;
  margin-top: 6px;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  padding: 8px;
}

.sggs-reader__search-advanced.is-open {
  display: flex;
}

.sggs-reader__search-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sggs-reader__search-filter span {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--sggs-muted);
}

.sggs-reader__search-filter select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  height: 32px;
}

.sggs-reader__search-ang-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.sggs-reader__search-ang-range span {
  color: var(--sggs-muted);
  flex: 0 0 auto;
}

.sggs-reader__search-ang-range input {
  width: 72px;
  padding: 4px 6px;
  height: 32px;
}

.sggs-reader__layer-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sggs-reader__layers--translators .sggs-reader__layer-control {
  align-items: center;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  padding: 8px;
}

.sggs-reader__layers--translators .sggs-reader__layer-control.is-empty-on-ang {
  background: #f5f2ed;
  border-color: #ded7ce;
}

.sggs-reader__layers--translators .sggs-reader__layer-control.is-empty-on-ang > .sggs-reader__toggle,
.sggs-reader__layers--translators .sggs-reader__layer-control.is-empty-on-ang .sggs-reader__layer-parts {
  opacity: 0.48;
  filter: grayscale(1);
}

.sggs-reader__layers--translators .sggs-reader__layer-control.is-empty-on-ang .sggs-reader__layer-info {
  opacity: 1;
  filter: none;
}

.sggs-reader__layers--translators .sggs-reader__layer-control > .sggs-reader__toggle {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 700;
}

.sggs-reader__layer-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #9ec4ed;
  background: #eef7ff;
  color: #07589f;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.sggs-reader__layer-info svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.sggs-reader__layer-info:hover,
.sggs-reader__layer-info:focus-visible {
  border-color: #5d9bd9;
  background: #ddecff;
  color: #003f7c;
  outline: none;
}

.sggs-reader__layer-parts {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.sggs-reader__layer-control.is-enabled .sggs-reader__layer-parts {
  display: inline-flex;
}

.sggs-reader__layers--translators .sggs-reader__layer-parts {
  flex: 1 0 100%;
  padding-top: 2px;
}

.sggs-reader__toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: var(--sggs-muted);
  font-size: 13px;
}

.sggs-reader__toggle--part {
  background: #f7fbff;
  border-color: #cfe0f4;
  color: #315f93;
  font-size: 12px;
}

.sggs-reader__tooltip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--sggs-muted);
  font-size: 11px;
  font-weight: 700;
}

.sggs-reader__updates {
  margin: 12px 0;
  color: var(--sggs-muted);
  font-size: 14px;
  white-space: pre-wrap;
}

.sggs-reader__status {
  min-height: 0;
  margin: 12px 0;
  color: var(--sggs-muted);
  font-size: 14px;
}

.sggs-reader__status:empty {
  display: none;
}

.sggs-reader__status:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--sggs-border);
  background: color-mix(in srgb, var(--sggs-surface) 92%, transparent);
  color: var(--sggs-muted);
  font-weight: 700;
}

.sggs-reader__status.is-error {
  color: var(--sggs-rahao);
}

.sggs-reader__content {
  min-height: clamp(520px, 72vh, 920px);
  padding-top: 18px;
  background: var(--sggs-page);
}

.sggs-reader__initial-loader {
  min-height: clamp(420px, 62vh, 760px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  border: 1px solid var(--sggs-border);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--sggs-accent) 14%, transparent) 0 90px, transparent 220px),
    linear-gradient(180deg, color-mix(in srgb, var(--sggs-page) 94%, #fff 6%), color-mix(in srgb, var(--sggs-surface) 94%, #fff 6%));
  color: var(--sggs-muted);
  font-weight: 700;
}

.sggs-reader__initial-loader-symbol {
  width: clamp(72px, 12vw, 124px);
  height: clamp(72px, 12vw, 124px);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sggs-accent) 48%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sggs-surface) 88%, transparent);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--sggs-accent) 22%, transparent);
  color: var(--sggs-accent);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1;
  animation: sggs-reader-loader-pulse 1.5s ease-in-out infinite;
}

.sggs-reader.is-loading-ang .sggs-reader__content-frame,
.sggs-reader.is-loading-ang .sggs-reader__content {
  background: var(--sggs-page) !important;
}

.sggs-reader__content-frame {
  min-height: 60vh;
}

.sggs-reader.is-loading-ang::before {
  content: '';
  position: fixed;
  inset: var(--sggs-site-header-h, 96px) 0 0;
  z-index: 1200;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--sggs-accent) 18%, transparent) 0 90px, transparent 210px),
    linear-gradient(180deg, color-mix(in srgb, var(--sggs-page) 92%, #fff 8%), color-mix(in srgb, var(--sggs-surface) 94%, #fff 6%));
  opacity: 0.96;
  pointer-events: none;
}

.sggs-reader.is-loading-ang::after {
  content: 'ੴ';
  position: fixed;
  top: calc(var(--sggs-site-header-h, 96px) + 40vh);
  left: 50%;
  z-index: 1201;
  width: clamp(78px, 14vw, 132px);
  height: clamp(78px, 14vw, 132px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sggs-accent) 48%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sggs-surface) 88%, transparent);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--sggs-accent) 25%, transparent);
  color: var(--sggs-accent);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(42px, 7vw, 74px);
  line-height: 1;
  pointer-events: none;
  animation: sggs-reader-loader-pulse 1.5s ease-in-out infinite;
}

@keyframes sggs-reader-loader-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (max-width: 782px) {
  .sggs-reader.is-loading-ang::before {
    top: 0;
  }

  .sggs-reader.is-loading-ang::after {
    top: 42vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sggs-reader.is-loading-ang::after,
  .sggs-reader__initial-loader-symbol {
    animation: none;
  }
}

.sggs-reader__jap-pauri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
}

.sggs-reader__jap-pauri {
  min-height: 36px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  font-weight: 700;
  cursor: pointer;
}

.sggs-reader__jap-pauri:hover,
.sggs-reader__jap-pauri:focus-visible,
.sggs-reader__jap-pauri.is-active {
  background: var(--sggs-gold);
  color: #1f1b24;
  outline: none;
}

.sggs-reader__verse-up {
  position: fixed;
  right: 18px;
  top: calc(var(--sggs-site-header-h, 96px) + 18px);
  z-index: 2147483016;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sggs-border);
  border-radius: 999px;
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(75, 42, 123, 0.15);
}

.sggs-reader__verse-up:hover,
.sggs-reader__verse-up:focus-visible {
  background: var(--sggs-gold);
  color: #1f1b24;
  outline: none;
}

body.sggs-header-collapsed .sggs-reader__verse-up {
  top: 18px;
}

.sggs-reader__smart-copy-panel {
  position: fixed;
  right: 18px;
  top: calc(var(--sggs-site-header-h, 96px) + 70px);
  z-index: 2147483016;
  display: grid;
  grid-template-columns: 32px 44px 48px 32px;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--sggs-border);
  border-radius: 999px;
  background: var(--sggs-surface);
  box-shadow: 0 12px 30px rgba(75, 42, 123, 0.16);
}

.sggs-reader__smart-copy-panel[hidden] {
  display: none;
}

.sggs-reader__smart-copy-count,
.sggs-reader__smart-copy-panel button {
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--sggs-border);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.sggs-reader__smart-copy-panel button {
  cursor: pointer;
}

.sggs-reader__smart-copy-panel button:hover,
.sggs-reader__smart-copy-panel button:focus-visible {
  background: var(--sggs-gold);
  color: #1f1b24;
  outline: none;
}

body.sggs-header-collapsed .sggs-reader__smart-copy-panel {
  top: 70px;
}

.sggs-reader__bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--sggs-border);
}

.sggs-reader__bottom-nav-button {
  min-width: 128px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.sggs-reader__bottom-nav-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sggs-reader__bottom-nav-current {
  color: var(--sggs-muted);
  font-size: 13px;
  font-weight: 700;
}

.sggs-reader__heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 18px;
  margin-bottom: 14px;
}

.sggs-reader__heading h2 {
  margin: 2px 0 0;
  font-size: 28px;
  line-height: 1.15;
}

.sggs-reader__shabad-info {
  margin: 0 0 14px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  padding: 12px 14px;
}

.sggs-reader__shabad-info summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  color: #4f3b2e;
  cursor: pointer;
}

.sggs-reader__shabad-info summary span {
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.sggs-reader__shabad-info p {
  margin: 10px 0 0;
  color: #2f2a24;
  line-height: 1.55;
}

.sggs-reader__shabad-info-edit {
  margin-top: 10px;
  border: 1px solid var(--sggs-border);
  background: #ffffff;
  color: #4f3b2e;
  padding: 7px 10px;
  cursor: pointer;
}

.sggs-reader__shabad-info-editor {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sggs-border);
}

.sggs-reader__shabad-info-editor[hidden] {
  display: none;
}

.sggs-reader__shabad-info-editor label {
  display: grid;
  gap: 5px;
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
}

.sggs-reader__shabad-info-editor input,
.sggs-reader__shabad-info-editor textarea {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
}

.sggs-reader__eyebrow {
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sggs-reader__shabad {
  margin: 18px 0;
}

.sggs-reader__shabad-head {
  padding: 16px;
  border-bottom: 0;
}

.sggs-reader__shabad-head h3 {
  margin: 4px 0 8px;
  color: #4f3b2e;
  font-size: 20px;
  line-height: 1.3;
}

.sggs-reader__shabad-head p {
  margin: 0;
  color: var(--sggs-muted);
  line-height: 1.55;
}

.sggs-reader__lines {
  display: grid;
  gap: 10px;
}

.sggs-reader__line {
  position: relative;
  padding: 16px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sggs-reader__line.is-rahao {
  border-color: var(--sggs-rahao);
  box-shadow: inset 5px 0 0 var(--sggs-rahao);
  background: rgba(136, 0, 68, 0.045) !important;
}

.sggs-reader__line.is-targeted {
  outline: 2px solid var(--sggs-context);
  outline-offset: 2px;
}

.sggs-reader__line.is-saved {
  animation: sggs-reader-saved-line 2400ms ease;
}

.sggs-reader__line.has-sggs-concept,
.sggs-reader__line.has-ksd-concept {
  box-shadow: inset 3px 0 0 rgba(180, 130, 40, 0.55);
}

.sggs-reader__line-tools {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--sggs-muted);
  font-size: 12px;
}

.sggs-reader__line-pauri {
  display: inline-block;
  margin-left: 8px;
  color: var(--sggs-muted);
  font-weight: 700;
}

.sggs-reader__line-author {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--sggs-border);
  border-radius: 999px;
  color: var(--sggs-muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.sggs-reader__line-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sggs-reader__smart-copy-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.sggs-reader__smart-copy-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--sggs-gold);
}

.sggs-reader__smart-copy-check:has(input:checked),
.sggs-reader__smart-copy-check.is-feedback {
  border-color: rgba(244, 185, 66, 0.95);
  background: #f4b942;
  color: #1f1b24;
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.2);
}

.sggs-reader__line.is-smart-copy-pulse {
  animation: sggs-reader-smart-copy-pulse 760ms ease;
}

.sggs-reader__line.is-smart-copy-unpulse {
  animation: sggs-reader-smart-copy-unpulse 620ms ease;
}

.sggs-reader__line.is-link-copied {
  animation: sggs-reader-link-copied 900ms ease;
}

.sggs-reader__line.is-rahao.is-smart-copy-pulse,
.sggs-reader__line.is-rahao.is-link-copied {
  animation-name: sggs-reader-rahao-feedback;
}

.sggs-reader__line.is-smart-copy-selected {
  border-color: rgba(244, 185, 66, 0.9);
  box-shadow: inset 5px 0 0 var(--sggs-gold), 0 12px 30px rgba(244, 185, 66, 0.14);
}

.sggs-reader__line.is-rahao.is-smart-copy-selected {
  border-color: var(--sggs-rahao);
  box-shadow: inset 5px 0 0 var(--sggs-rahao), 0 12px 30px rgba(136, 0, 68, 0.16);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__smart-copy-panel,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__smart-copy-check {
  background: #211827;
  color: #f7efe2;
  border-color: rgba(244, 185, 66, 0.28);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__smart-copy-count,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__smart-copy-panel button {
  background: #120d19;
  color: #f7efe2;
  border-color: rgba(244, 185, 66, 0.28);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line.is-smart-copy-selected {
  box-shadow: inset 5px 0 0 var(--sggs-gold), 0 12px 30px rgba(244, 185, 66, 0.18);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line.is-rahao.is-smart-copy-selected {
  box-shadow: inset 5px 0 0 var(--sggs-rahao), 0 12px 30px rgba(255, 143, 189, 0.2);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__smart-copy-check:has(input:checked),
.sggs-reader[data-sggs-theme="night"] .sggs-reader__smart-copy-check.is-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button:focus-visible,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button.is-copied {
  background: #f4b942;
  color: #120d19;
  border-color: rgba(244, 185, 66, 0.95);
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.24);
}

.sggs-reader__line-tools button,
.sggs-reader__editor button {
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  padding: 6px 10px;
  cursor: pointer;
}

.sggs-reader__line-tools button {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.sggs-reader__line-tools button:hover,
.sggs-reader__line-tools button:focus-visible,
.sggs-reader__line-tools button.is-copied {
  border-color: rgba(244, 185, 66, 0.95);
  background: #f4b942;
  color: #1f1b24;
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.2);
  outline: none;
}

.sggs-reader__line-tools button.is-copied {
  transform: translateY(-1px);
}

.sggs-reader__gurmukhi {
  color: var(--sggs-gurmukhi);
  font-size: 24px;
  line-height: 1.65;
}

.sggs-reader__roman {
  color: var(--sggs-muted);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 4px;
}

.sggs-reader__roman-block {
  margin-top: 4px;
}

.sggs-reader__roman-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.sggs-reader__roman-head .sggs-reader__roman {
  min-width: 0;
}

.sggs-reader__roman-badge {
  display: inline-block;
  margin-top: 4px;
  color: #07589f;
  font-size: 12px;
  font-weight: 700;
}

.sggs-reader__translation {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sggs-border);
}

.sggs-reader__translation-label {
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sggs-reader__translation-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.sggs-reader__translation-edit {
  flex: 0 0 auto;
  border: 1px solid #cfe0f4;
  background: #f7fbff;
  color: #07589f;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sggs-reader__ksd-canvas-link {
  flex: 0 0 auto;
  border: 1px solid #e3d3ad;
  background: #f3e9d2;
  color: #8a5a1a;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sggs-reader__ksd-canvas-link:hover {
  background: #ecdcb8;
}

.sggs-reader__ksd-canvas-link--settings {
  align-self: flex-start;
}

.sggs-reader__translation-part {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid currentColor;
  line-height: 1.65;
  background: rgba(255, 255, 255, 0.55);
}

.sggs-reader__translation-part::before {
  content: attr(data-part-label);
  display: block;
  margin-bottom: 3px;
  color: var(--sggs-muted);
  font-size: 11px;
  font-weight: 700;
}

.sggs-reader__main {
  color: var(--sggs-translation);
  background: #f5fbf4;
}

.sggs-reader__artistic {
  color: var(--sggs-artistic);
  background: #f3f4fb;
}

.sggs-reader__inline-context {
  color: var(--sggs-context);
  background: #e7f2ff;
  border-bottom: 1px solid #7bb6ee;
  padding: 0 2px;
}

.sggs-reader__context_note {
  color: var(--sggs-context);
  font-size: 14px;
  background: #f3f8ff;
}

.sggs-reader__confidence_reason {
  color: #5c4b00;
  font-size: 14px;
  background: #fff9df;
}

.sggs-reader__translation-part p,
.sggs-reader__editor-preview p {
  margin: 0 0 0.65em;
}

.sggs-reader__translation-part p:last-child,
.sggs-reader__editor-preview p:last-child {
  margin-bottom: 0;
}

.sggs-reader__translation-part ul,
.sggs-reader__translation-part ol,
.sggs-reader__editor-preview ul,
.sggs-reader__editor-preview ol {
  margin: 0.45em 0 0.7em 1.35em;
  padding: 0;
}

.sggs-reader__translation-part li,
.sggs-reader__editor-preview li {
  margin: 0.2em 0;
}

.sggs-reader__translation-part a,
.sggs-reader__editor-preview a {
  color: var(--sggs-context);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.sggs-reader__translation-part .sggs-reader__sggs-ref-chip,
.sggs-reader__editor-preview .sggs-reader__sggs-ref-chip,
.sggs-reader__translation-part .sggs-reader__sggs-ref-block,
.sggs-reader__editor-preview .sggs-reader__sggs-ref-block {
  text-decoration: none;
}

.sggs-reader__translation--sahib_singh_pa .sggs-reader__main {
  color: #4f3b2e;
}

.sggs-reader__translation--sahib_singh_ru .sggs-reader__main {
  color: #48624a;
}

.sggs-reader__translation--sahib_singh_ru .sggs-reader__punjabi_comments {
  color: #6a4f2f;
  background: #fcf3e7;
}

.sggs-reader__translation--sahib_singh_ru {
  background: #fbf8f1;
  padding: 10px;
  border: 1px solid #e6dbc9;
}

.sggs-reader__translation--sevadars_ru {
  background: #f6fbf4;
  padding: 10px;
  border: 1px solid #d8e8d2;
}

.sggs-reader__editor {
  margin-top: 12px;
  border-top: 1px solid var(--sggs-border);
  padding-top: 10px;
}

.sggs-reader__inline-editor {
  display: none;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #b8d8f6;
  background: #f7fbff;
}

.sggs-reader__translation.is-editing .sggs-reader__inline-editor {
  display: block;
}

.sggs-reader__roman-block.is-editing .sggs-reader__inline-editor {
  display: block;
}

.sggs-reader__inline-editor-title {
  color: #07589f;
  font-size: 13px;
  font-weight: 700;
}

.sggs-reader__inline-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 12px;
}

.sggs-reader__inline-save,
.sggs-reader__inline-cancel {
  min-height: 36px;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}

.sggs-reader__inline-save {
  border-color: #07589f;
  background: #07589f;
  color: #ffffff;
}

.sggs-reader__inline-save:hover,
.sggs-reader__inline-save:focus-visible {
  background: #003f7c;
  outline: none;
}

.sggs-reader__inline-cancel {
  border-color: var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
}

.sggs-reader__inline-cancel:hover,
.sggs-reader__inline-cancel:focus-visible {
  border-color: #bfa98b;
  background: #fff4df;
  outline: none;
}

.sggs-reader__inline-editor.is-saving {
  opacity: 0.78;
}

.sggs-reader__inline-editor.is-saving .sggs-reader__inline-save {
  position: relative;
  padding-left: 34px;
}

.sggs-reader__inline-editor.is-saving .sggs-reader__inline-save::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: sggs-reader-spin 760ms linear infinite;
}

.sggs-reader__editor summary {
  cursor: pointer;
  color: var(--sggs-muted);
  font-weight: 700;
}

.sggs-reader__editor textarea {
  width: 100%;
  margin: 10px 0;
}

.sggs-reader__editor-field {
  display: block;
  margin-top: 10px;
}

.sggs-reader__editor-field span {
  display: block;
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
}

.sggs-reader__editor-field textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  margin-top: 6px;
  resize: vertical;
}

.sggs-reader__editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sggs-reader__format-button {
  min-width: 32px;
  border: 1px solid var(--sggs-border);
  background: #ffffff;
  color: #4f3b2e;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.sggs-reader__format-button:hover,
.sggs-reader__format-button:focus-visible {
  border-color: #b88b2a;
  background: #fff8e6;
  outline: none;
}

.sggs-reader__blue-context-button {
  border-color: #9ec4ed !important;
  background: #eef7ff !important;
  color: #07589f !important;
}

.sggs-reader__reference-button {
  border: 1px solid #d9c89d;
  background: #fff8e6;
  color: #5c4b00;
  padding: 6px 10px;
  cursor: pointer;
}

.sggs-reader__editor-preview {
  min-height: 34px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #cfe0f4;
  background: #f7fbff;
  color: var(--sggs-translation);
  font-size: 13px;
  line-height: 1.55;
}

.sggs-reader__editor-preview--rich {
  border-color: #e6dba3;
  background: #fffdf0;
}

.sggs-reader__decorator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(34, 27, 20, 0.32);
  opacity: 0;
  transition: opacity 180ms ease;
}

.sggs-reader__save-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483020;
  background: rgba(34, 27, 20, 0.42);
  opacity: 0;
  transition: opacity 160ms ease;
}

.sggs-reader__ref-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483020;
  background: rgba(34, 27, 20, 0.42);
  opacity: 0;
  transition: opacity 160ms ease;
}

.sggs-reader__save-backdrop.is-open,
.sggs-reader__ref-backdrop.is-open {
  opacity: 1;
}

.sggs-reader__save-dialog,
.sggs-reader__ref-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2147483030;
  width: min(860px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  color: var(--sggs-ink);
  box-shadow: 0 24px 70px rgba(34, 27, 20, 0.32);
  opacity: 0;
  transform: translate(-50%, -48%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.sggs-reader__save-dialog.is-open,
.sggs-reader__ref-dialog.is-open {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.sggs-reader__save-dialog[hidden],
.sggs-reader__ref-dialog[hidden] {
  display: none;
}

.sggs-reader__ref-dialog {
  width: min(1040px, calc(100vw - 32px));
  height: min(820px, calc(100vh - 48px));
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sggs-reader__save-dialog-head,
.sggs-reader__ref-head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--sggs-border);
}

.sggs-reader__save-dialog-head h3,
.sggs-reader__ref-head h3 {
  margin: 4px 0 0;
  color: #4f3b2e;
  font-size: 18px;
  line-height: 1.3;
}

.sggs-reader__save-dialog-head p {
  margin: 6px 0 0;
  color: var(--sggs-muted);
}

.sggs-reader__save-state {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sggs-reader__save-state.is-ok {
  color: #0b6b2a;
}

.sggs-reader__save-state.is-error {
  color: #9b1c1c;
}

.sggs-reader__save-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sggs-reader__save-table-wrap {
  overflow: auto;
  padding: 16px;
}

.sggs-reader__save-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.sggs-reader__save-table th,
.sggs-reader__save-table td {
  vertical-align: top;
  border: 1px solid var(--sggs-border);
  padding: 10px;
  text-align: left;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.sggs-reader__save-table thead th {
  background: #fff4df;
  color: #4f3b2e;
}

.sggs-reader__save-table tbody th {
  width: 18%;
  color: var(--sggs-muted);
}

.sggs-reader__save-empty {
  color: var(--sggs-muted);
  font-style: italic;
}

.sggs-reader__save-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

.sggs-reader__ref-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sggs-border);
  background: #fffaf1;
}

.sggs-reader__ref-search {
  display: grid;
  gap: 4px;
  flex: 1 1 260px;
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
}

.sggs-reader__ref-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--sggs-border);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--sggs-text);
  font: inherit;
  background: #fffdf8;
}

.sggs-reader__ref-search-results {
  display: grid;
  gap: 8px;
  padding: 0 16px;
  background: #fffaf1;
  flex-shrink: 0;
  max-height: 200px;
  overflow: auto;
}

.sggs-reader__ref-search-results:not(:empty) {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sggs-border);
}

.sggs-reader__ref-search-result {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--sggs-border);
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  background: #fffdf8;
}

.sggs-reader__ref-search-result:hover,
.sggs-reader__ref-search-result:focus {
  border-color: #7bb6ee;
  background: #f0f8ff;
}

.sggs-reader__ref-search-result span,
.sggs-reader__ref-search-result small {
  color: var(--sggs-muted);
  font-size: 12px;
}

.sggs-reader__ref-search-result strong {
  color: var(--sggs-gurmukhi);
  font-size: 17px;
  line-height: 1.45;
}

.sggs-reader__ref-lines {
  display: grid;
  gap: 8px;
  flex: 1 1 0;
  overflow: auto;
  padding: 16px;
}

.sggs-reader__ref-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--sggs-border);
  background: #fffdf8;
  cursor: pointer;
}

.sggs-reader__ref-line:has(input:checked) {
  border-color: #7bb6ee;
  background: #f0f8ff;
}

.sggs-reader__ref-line.is-rahao {
  border-color: rgba(136, 0, 68, 0.42);
  background: rgba(136, 0, 68, 0.045);
  box-shadow: inset 3px 0 0 var(--sggs-rahao);
}

.sggs-reader__ref-line.is-rahao:has(input:checked) {
  border-color: var(--sggs-rahao);
  background: rgba(136, 0, 68, 0.08);
}

.sggs-reader__ref-rahao-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid rgba(136, 0, 68, 0.28);
  border-radius: 999px;
  color: var(--sggs-rahao);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.sggs-reader__ref-line-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sggs-reader__ref-gurmukhi {
  color: var(--sggs-gurmukhi);
  font-size: 18px;
  line-height: 1.45;
}

.sggs-reader__ref-roman {
  color: var(--sggs-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sggs-reader__article-refs {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(85, 0, 0, 0.18);
  background: rgba(255, 250, 241, 0.82);
}

.sggs-reader__article-refs-title {
  margin-bottom: 8px;
  color: #4f3b2e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sggs-reader__article-refs-list {
  display: grid;
  gap: 8px;
}

.sggs-reader__article-ref {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--sggs-border);
  background: #fffdf8;
  color: var(--sggs-text);
  text-decoration: none;
}

.sggs-reader__article-ref:hover,
.sggs-reader__article-ref:focus-visible {
  border-color: #b88b2a;
  background: #fff8e6;
  color: var(--sggs-text);
  outline: none;
}

.sggs-reader__article-ref-title {
  color: #4f3b2e;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.sggs-reader__article-ref-excerpt,
.sggs-reader__article-ref-meta {
  color: var(--sggs-muted);
  font-size: 12px;
  line-height: 1.45;
}

@keyframes sggs-reader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sggs-reader-saved-line {
  0% {
    background: #e9f9df;
    border-color: #70b85a;
    box-shadow: 0 0 0 3px rgba(112, 184, 90, 0.22);
  }
  100% {
    background: var(--sggs-surface);
    border-color: var(--sggs-border);
    box-shadow: none;
  }
}

@keyframes sggs-reader-smart-copy-pulse {
  0% { transform: translateY(0); }
  35% {
    transform: translateY(-1px);
    background: rgba(244, 185, 66, 0.16);
    box-shadow: inset 5px 0 0 var(--sggs-gold), 0 0 0 4px rgba(244, 185, 66, 0.2);
  }
  100% { transform: translateY(0); }
}

@keyframes sggs-reader-smart-copy-unpulse {
  0% {
    background: rgba(244, 185, 66, 0.12);
    box-shadow: inset 5px 0 0 rgba(244, 185, 66, 0.55), 0 0 0 4px rgba(244, 185, 66, 0.16);
  }
  100% {
    background: var(--sggs-surface);
    box-shadow: none;
  }
}

@keyframes sggs-reader-link-copied {
  0% { transform: translateY(0); }
  35% {
    transform: translateY(-1px);
    background: rgba(244, 185, 66, 0.18);
    border-color: rgba(244, 185, 66, 0.95);
    box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.2);
  }
  100% { transform: translateY(0); }
}

@keyframes sggs-reader-rahao-feedback {
  0% { transform: translateY(0); }
  35% {
    transform: translateY(-1px);
    background: rgba(136, 0, 68, 0.09);
    border-color: var(--sggs-rahao);
    box-shadow: inset 5px 0 0 var(--sggs-rahao), 0 0 0 4px rgba(136, 0, 68, 0.16);
  }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sggs-reader__line,
  .sggs-reader__smart-copy-check,
  .sggs-reader__line-tools button {
    transition: none;
  }

  .sggs-reader__line.is-smart-copy-pulse,
  .sggs-reader__line.is-smart-copy-unpulse,
  .sggs-reader__line.is-link-copied,
  .sggs-reader__line.is-rahao.is-smart-copy-pulse,
  .sggs-reader__line.is-rahao.is-link-copied {
    animation: none;
  }
}

.sggs-reader__decorator-backdrop.is-open {
  opacity: 1;
}

.sggs-reader__decorator-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483010;
  width: min(420px, calc(100vw - 32px));
  max-height: 100vh;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  color: var(--sggs-ink);
  box-shadow: 0 24px 60px rgba(34, 27, 20, 0.28);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 180ms ease, transform 220ms ease;
}

.sggs-reader__decorator-sheet.is-open {
  opacity: 1;
  transform: translateX(0);
}

.sggs-reader__decorator-scroll {
  height: 100%;
  overflow: auto;
  padding: 18px;
}

body.sggs-reader-decorator-open #wpadminbar,
body.sggs-reader-decorator-open header.navbar,
body.sggs-reader-decorator-open .navbar-fixed-top,
body.sggs-reader-decorator-open .nav-container,
body.sggs-reader-decorator-open .top-bar,
body.sggs-reader-decorator-open #top-bar,
body.sggs-reader-decorator-open #menu_top_bar {
  display: none !important;
}

body.sggs-reader-line-panel-open #wpadminbar,
body.sggs-reader-line-panel-open header.navbar,
body.sggs-reader-line-panel-open .navbar-fixed-top,
body.sggs-reader-line-panel-open .nav-container,
body.sggs-reader-line-panel-open .top-bar,
body.sggs-reader-line-panel-open #top-bar,
body.sggs-reader-line-panel-open #menu_top_bar,
body.sggs-reader-line-panel-open .dl-menuwrapper {
  display: none !important;
}

.sggs-reader__lead-person h4,
.sggs-reader__person h5 {
  margin: 0;
  color: #4f3b2e;
  line-height: 1.25;
}

.sggs-reader__lead-person p,
.sggs-reader__person p,
.sggs-reader__person-summary p,
.sggs-reader__decorator-copy p,
.sggs-reader__decorator-card p {
  margin: 8px 0 0;
  line-height: 1.55;
}

.sggs-reader__person-summary,
.sggs-reader__decorator-copy {
  line-height: 1.55;
}

.sggs-reader__person-summary ul,
.sggs-reader__person-summary ol,
.sggs-reader__decorator-copy ul,
.sggs-reader__decorator-copy ol {
  margin: 8px 0 0 18px;
  padding: 0;
  text-align: left;
}

.sggs-reader__decorator-close {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 10px auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.sggs-reader__lead-person {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  text-align: center;
}

.sggs-reader__lead-avatar,
.sggs-reader__person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--sggs-border);
  background: #f1e7d8;
  color: #4f3b2e;
  font-weight: 700;
}

.sggs-reader__lead-avatar {
  width: min(240px, 100%);
  aspect-ratio: 1;
  border-radius: 0;
  font-size: 32px;
}

.sggs-reader__lead-avatar img,
.sggs-reader__person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sggs-reader__decorator-card,
.sggs-reader__decorator-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sggs-border);
}

.sggs-reader__decorator-card h4,
.sggs-reader__decorator-section h4 {
  margin: 0;
  color: #4f3b2e;
  font-size: 14px;
}

.sggs-reader__decorator-layer-controls {
  display: grid;
  gap: 10px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sggs-reader__decorator-layer-controls.is-highlighted {
  border-color: #6fa6dd;
  background: #f3f9ff;
  box-shadow: 0 0 0 3px rgba(72, 128, 190, 0.18), 0 0 28px rgba(72, 128, 190, 0.28);
  animation: sggs-reader-layer-glow 1600ms ease-out 1;
}

.sggs-reader__decorator-layer-controls .sggs-reader__toggle--layer-main {
  justify-content: space-between;
  width: 100%;
  font-weight: 700;
}

.sggs-reader__layer-parts--decorator {
  display: grid;
  gap: 8px;
}

.sggs-reader__layer-parts--decorator .sggs-reader__toggle {
  width: 100%;
}

@keyframes sggs-reader-layer-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 128, 190, 0.48), 0 0 0 rgba(72, 128, 190, 0);
  }
  42% {
    box-shadow: 0 0 0 6px rgba(72, 128, 190, 0.16), 0 0 34px rgba(72, 128, 190, 0.34);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(72, 128, 190, 0.18), 0 0 28px rgba(72, 128, 190, 0.28);
  }
}

.sggs-reader__people {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sggs-reader__person {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
}

.sggs-reader__person-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.sggs-reader__person-role,
.sggs-reader__person-meta {
  color: var(--sggs-muted);
  font-size: 12px;
}

.sggs-reader__person-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--sggs-context);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sggs-reader__person-summary a,
.sggs-reader__decorator-copy a {
  color: #0055aa;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sggs-reader__empty {
  color: var(--sggs-muted);
}

.sggs-reader-profile {
  min-height: 100vh;
  background: #f8f5ee;
  color: #222222;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 24px;
}

.sggs-reader-profile *,
.sggs-reader-profile *::before,
.sggs-reader-profile *::after {
  box-sizing: border-box;
}

.sggs-reader-profile__shell {
  width: min(920px, 100%);
  margin: 0 auto;
}

.sggs-reader-profile__back,
.sggs-reader-profile__body a {
  color: #0055aa;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sggs-reader-profile__hero,
.sggs-reader-profile__card {
  border: 1px solid #e4d8c8;
  background: #fffcf6;
}

.sggs-reader-profile__hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 24px;
}

.sggs-reader-profile__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #e4d8c8;
  background: #f1e7d8;
  color: #4f3b2e;
  font-size: 44px;
  font-weight: 700;
}

.sggs-reader-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sggs-reader-profile h1 {
  margin: 0;
  color: #4f3b2e;
  font-size: 34px;
  line-height: 1.15;
}

.sggs-reader-profile__meta,
.sggs-reader-profile__lead {
  margin: 10px 0 0;
  color: #66615a;
  line-height: 1.55;
}

.sggs-reader-profile__card {
  margin-top: 18px;
  padding: 22px;
}

.sggs-reader-profile__card h2 {
  margin: 0 0 12px;
  color: #4f3b2e;
  font-size: 20px;
}

.sggs-reader-profile__body {
  line-height: 1.65;
}

.sggs-reader-profile__body p {
  margin: 0 0 12px;
}

.sggs-reader-profile__body ul,
.sggs-reader-profile__body ol {
  margin: 0 0 12px 22px;
  padding: 0;
}

@media (max-width: 720px) {
  .sggs-reader {
    padding: 10px;
  }

  .sggs-reader__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sggs-reader__settings,
  .sggs-reader__search-panel {
    grid-template-columns: 1fr;
  }

  .sggs-reader__nav {
    justify-content: space-between;
  }

  .sggs-reader__search {
    width: 100%;
  }

  .sggs-reader__toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sggs-reader__toolbar .sggs-reader__nav {
    margin-right: auto;
  }


  .sggs-reader__heading,
  .sggs-reader__shabad-head,
  .sggs-reader__line {
    padding: 12px;
  }

  .sggs-reader__gurmukhi {
    font-size: 21px;
  }

  .sggs-reader__decorator-sheet {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(390px, 100vw);
    max-height: 100vh;
    transform: translateX(100%);
  }

  .sggs-reader__decorator-sheet.is-open {
    transform: translateX(0);
  }

  .sggs-reader__decorator-scroll {
    padding: 14px;
  }

  .sggs-reader__save-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
  }

  .sggs-reader__ref-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  .sggs-reader__save-dialog-head {
    padding: 12px;
  }

  .sggs-reader__save-table-wrap {
    padding: 12px;
  }

  .sggs-reader__save-table {
    min-width: 620px;
  }

  .sggs-reader-profile {
    padding: 12px;
  }

  .sggs-reader-profile__hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .sggs-reader-profile h1 {
    font-size: 28px;
  }
}

/* ----------------------------------------------------------------
   SGGS line reference chip (inline in translations)
---------------------------------------------------------------- */
.sggs-reader__sggs-ref-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid rgba(85, 0, 0, 0.28);
  background: rgba(85, 0, 0, 0.06);
  color: var(--sggs-gurmukhi);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}

.sggs-reader__sggs-ref-chip:hover {
  background: rgba(85, 0, 0, 0.13);
  color: var(--sggs-gurmukhi);
}

/* ----------------------------------------------------------------
   SGGS reference block card (inline in translations)
---------------------------------------------------------------- */
.sggs-reader__sggs-ref-block {
  display: block;
  position: relative;
  margin: 8px 0;
  padding: 10px 12px 10px 38px;
  border: 1px solid rgba(85, 0, 0, 0.22);
  background: rgba(85, 0, 0, 0.04);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
}

.sggs-reader__sggs-ref-block::before {
  content: "📖";
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 15px;
  line-height: 1;
}

.sggs-reader__sggs-ref-block:hover {
  background: rgba(85, 0, 0, 0.09);
  border-color: rgba(85, 0, 0, 0.38);
}

.sggs-reader__sggs-ref-block-body {
  display: block;
}

.sggs-reader__sggs-ref-block-body span {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.sggs-reader__sggs-ref-block-body span:first-child {
  color: var(--sggs-muted);
  font-size: 12px;
}

.sggs-reader__sggs-ref-block-body span:nth-child(2) {
  color: var(--sggs-gurmukhi);
  font-size: 16px;
  line-height: 1.55;
}

.sggs-reader__sggs-ref-block-body span:nth-child(3) {
  color: var(--sggs-muted);
  font-size: 13px;
}

.sggs-reader__sggs-ref-block-body span:nth-child(4) {
  color: var(--sggs-muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.sggs-reader__sggs-ref-block-body span:nth-child(5) {
  color: var(--sggs-ink);
  font-size: 14px;
}

.sggs-reader__sggs-ref-block-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 2px 7px;
  background: rgba(85, 0, 0, 0.06);
  border: 1px solid rgba(85, 0, 0, 0.18);
  border-radius: 2px;
  color: var(--sggs-gurmukhi);
  font-size: 11px;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   Left-side line panel (opens on chip click)
---------------------------------------------------------------- */
.sggs-reader__line-panel {
  position: fixed;
  top: 0;
  left: -520px;
  width: 500px;
  max-width: 92vw;
  height: 100vh;
  background: #fff;
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
  z-index: 2147483010;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sggs-reader__line-panel-edge-close {
  position: absolute;
  top: 48px;
  right: -17px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sggs-border);
  border-radius: 999px;
  background: #fffaf1;
  color: #4f3b2e;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
}

.sggs-reader__line-panel-edge-close:hover {
  color: #333;
  background: #f5f0e8;
}

.sggs-reader__line-panel[hidden] {
  display: none;
}

.sggs-reader__line-panel.is-open {
  left: 0;
}

.sggs-reader__line-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f5f0e8;
  border-bottom: 1px solid #e0d8cc;
  flex-shrink: 0;
}

.sggs-reader__line-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

.sggs-reader__line-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sggs-reader__line-panel-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--sggs-gurmukhi);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid rgba(85, 0, 0, 0.25);
  border-radius: 3px;
  white-space: nowrap;
}

.sggs-reader__line-panel-reload {
  font-size: 12px;
  font-weight: 600;
  color: #4f3b2e;
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.sggs-reader__line-panel-link:hover {
  background: rgba(85, 0, 0, 0.06);
}

.sggs-reader__line-panel-reload:hover {
  background: rgba(85, 0, 0, 0.06);
}

.sggs-reader__line-panel-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--sggs-border);
  background: #fffaf1;
  color: #4f3b2e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sggs-reader__line-panel-close:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.06);
}

.sggs-reader__line-panel-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #f8f5ee;
}

@media (max-width: 560px) {
  .sggs-reader__line-panel-edge-close {
    top: 54px;
    right: 8px;
  }
}

body.sggs-reader-panel-mode #wpadminbar,
body.sggs-reader-panel-mode #menu_top_bar,
body.sggs-reader-panel-mode header,
body.sggs-reader-panel-mode footer,
body.sggs-reader-panel-mode .header_wrapper,
body.sggs-reader-panel-mode .fullwidth-container,
body.sggs-reader-panel-mode .page_title {
  display: none !important;
}

body.sggs-reader-panel-mode {
  background: #f8f5ee;
}

body.sggs-reader-panel-mode .sggs-reader {
  margin-top: 0;
  scroll-margin-top: 0;
}

body.sggs-reader-panel-mode .sggs-reader {
  margin: 0;
  padding: 10px;
}

body.sggs-reader-page-mode header.headerclone,
body.sggs-reader-page-mode .headerclone,
body.sggs-reader-page-mode .present-container,
body.sggs-reader-page-mode .pageTitle,
body.sggs-reader-page-mode .page_title {
  display: none !important;
}

body.sggs-reader-page-mode .sggs-reader {
  margin-top: 28px;
  scroll-margin-top: 96px;
}

/* ----------------------------------------------------------------
   Reading themes
---------------------------------------------------------------- */
.sggs-reader[data-sggs-theme="day"] {
  --sggs-page: #fff7e6;
  --sggs-surface: #ffffff;
  --sggs-border: rgba(75, 42, 123, 0.16);
  --sggs-ink: #1f1b24;
  --sggs-muted: #1f1b24;
}

.sggs-reader[data-sggs-theme="night"] {
  --sggs-page: #0d0a14;
  --sggs-surface: #171120;
  --sggs-border: rgba(244, 185, 66, 0.18);
  --sggs-ink: #f7efe2;
  --sggs-muted: #b7a8c9;
  --sggs-gurmukhi: #ffb06b;
  --sggs-translation: #9fdf9f;
  --sggs-context: #8dbdff;
  --sggs-artistic: #c8b8ff;
  --sggs-rahao: #ff8fbd;
}

body.sggs-reader-theme-day,
body.sggs-reader-panel-mode.sggs-reader-theme-day {
  background: #fff7e6;
}

body.sggs-reader-theme-night,
body.sggs-reader-panel-mode.sggs-reader-theme-night {
  background: #0d0a14;
}

.sggs-reader__theme-toggle {
  height: 38px;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  color: var(--sggs-muted);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.sggs-reader__theme-toggle:hover,
.sggs-reader__theme-toggle:focus-visible {
  border-color: var(--sggs-rahao);
  color: var(--sggs-ink);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__toolbar,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__heading,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-head,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-section,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__layers--translators .sggs-reader__layer-control,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-header,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-reload,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-close,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-edge-close,
.sggs-reader[data-sggs-theme="night"] input,
.sggs-reader[data-sggs-theme="night"] textarea {
  background: var(--sggs-surface);
  color: var(--sggs-ink);
  border-color: var(--sggs-border);
}

.sggs-reader[data-sggs-theme="day"] .sggs-reader__toolbar,
.sggs-reader[data-sggs-theme="day"] .sggs-reader__heading,
.sggs-reader[data-sggs-theme="day"] .sggs-reader__shabad-head,
.sggs-reader[data-sggs-theme="day"] .sggs-reader__line,
.sggs-reader[data-sggs-theme="day"] .sggs-reader__settings-section,
.sggs-reader[data-sggs-theme="day"] .sggs-reader__work,
.sggs-reader[data-sggs-theme="day"] .sggs-reader__layers--translators .sggs-reader__layer-control {
  box-shadow: 0 16px 36px rgba(75, 42, 123, 0.06);
}

.sggs-reader__line-panel.is-loading .sggs-reader__line-panel-loader {
  opacity: 1;
  pointer-events: auto;
}

.sggs-reader__line-panel-loader {
  position: absolute;
  inset: 48px 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--sggs-page) 88%, transparent);
  color: var(--sggs-muted);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.sggs-reader__orb-loader {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, var(--sggs-surface) 0 34%, transparent 36%),
    conic-gradient(from 0deg, #ff8c1a, #f4b942, #4b2a7b, #ff8c1a);
  box-shadow: 0 12px 34px rgba(75, 42, 123, 0.18);
  animation: sggs-reader-orb-spin 900ms linear infinite;
}

@keyframes sggs-reader-orb-spin {
  to { transform: rotate(360deg); }
}

body.sggs-reader-panel-mode #footer,
body.sggs-reader-panel-mode .footer,
body.sggs-reader-panel-mode .footer_wrapper,
body.sggs-reader-panel-mode #secondary_footer,
body.sggs-reader-panel-mode .footer_sidebar,
body.sggs-reader-panel-mode .copyright {
  display: none !important;
}

/* Refine reading themes: black day text, calmer night surfaces. */
.sggs-reader[data-sggs-theme="day"] {
  --sggs-muted: #1f1b24;
}

.sggs-reader[data-sggs-theme="night"] {
  background: var(--sggs-page);
  border-color: var(--sggs-border);
}

.sggs-reader__theme-toggle {
  order: 99;
  width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.sggs-reader[data-sggs-theme="day"] .sggs-reader__theme-toggle {
  color: #1f1b24;
  background: #ffffff;
  border-color: rgba(31, 27, 36, 0.18);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__theme-toggle {
  color: #f4b942;
  background: #211827;
  border-color: rgba(244, 185, 66, 0.28);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__toolbar,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__heading,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-head,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-section,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__layers--translators .sggs-reader__layer-control,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-header,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-reload,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-close,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-edge-close,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-toggle,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__icon,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__toggle,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__layer-parts,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__layer-info,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__save-dialog,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__ref-dialog,
.sggs-reader[data-sggs-theme="night"] input,
.sggs-reader[data-sggs-theme="night"] textarea {
  background: var(--sggs-surface) !important;
  color: var(--sggs-ink) !important;
  border-color: var(--sggs-border) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-frame {
  background: var(--sggs-page) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-loader,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__status:not(:empty) {
  background: #0d0a14 !important;
  color: var(--sggs-muted) !important;
  border-color: var(--sggs-border) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result div,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__editor-note,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__ang-control {
  color: var(--sggs-muted) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result mark {
  background: rgba(244, 185, 66, 0.24);
  color: var(--sggs-ink);
}

/* Night mode should feel immersed, not like white cards on a dark page. */
.sggs-reader[data-sggs-theme="night"],
.sggs-reader[data-sggs-theme="night"] .sggs-reader__content,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__updates,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__status,
body.sggs-reader-panel-mode.sggs-reader-theme-night .sggs-reader {
  background: #0d0a14 !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__heading,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-head {
  background: #0d0a14 !important;
  box-shadow: none !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__toolbar,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-section,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__layers--translators .sggs-reader__layer-control {
  background: #120d19 !important;
  box-shadow: none !important;
}

body.sggs-reader-theme-night,
body.sggs-reader-panel-mode.sggs-reader-theme-night,
body.sggs-reader-panel-mode.sggs-reader-theme-night #page,
body.sggs-reader-panel-mode.sggs-reader-theme-night #main,
body.sggs-reader-panel-mode.sggs-reader-theme-night .master_container,
body.sggs-reader-panel-mode.sggs-reader-theme-night .content,
body.sggs-reader-panel-mode.sggs-reader-theme-night .page_content {
  background: #0d0a14 !important;
}

/* Night text and translation block inversion. */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__eyebrow,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__heading h2,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-head h3,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-head p,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-info,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-info summary,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-info summary span,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-info p,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-pauri,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-author,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation-label,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation-part::before,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__bottom-nav-current,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__updates,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__status {
  color: var(--sggs-ink) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__shabad-info,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation-part,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__main,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__artistic,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__context_note,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__confidence_reason,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sahib_singh_pa,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sahib_singh_ru,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sevadars_ru,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sahib_singh_ru .sggs-reader__punjabi_comments,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__inline-editor,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__editor-preview,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__editor button {
  background: #0d0a14 !important;
  border-color: var(--sggs-border) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__main,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sahib_singh_ru .sggs-reader__main,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sahib_singh_pa .sggs-reader__main {
  color: var(--sggs-translation) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__context_note,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__inline-context,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation-part a,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__editor-preview a {
  color: var(--sggs-context) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__artistic {
  color: var(--sggs-artistic) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__confidence_reason,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__translation--sahib_singh_ru .sggs-reader__punjabi_comments {
  color: #f4d98a !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__inline-context {
  background: rgba(141, 189, 255, 0.14) !important;
  border-bottom-color: rgba(141, 189, 255, 0.5) !important;
}

/* Page-level SGGS theme immersion and side toggle. */
html[data-sggs-reader-theme="night"],
html[data-sggs-reader-theme="night"] body,
html[data-sggs-reader-theme="night"] #page,
html[data-sggs-reader-theme="night"] #main,
html[data-sggs-reader-theme="night"] .master_container,
html[data-sggs-reader-theme="night"] .fullwidth-container,
html[data-sggs-reader-theme="night"] .container,
html[data-sggs-reader-theme="night"] .content,
html[data-sggs-reader-theme="night"] .page_content,
html[data-sggs-reader-theme="night"] .entry-content,
html[data-sggs-reader-theme="night"] .wpb_wrapper {
  background-color: #0d0a14 !important;
}

html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day,
html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day #page,
html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day #main,
html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day .master_container,
html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day .fullwidth-container,
html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day .content,
html[data-sggs-reader-theme="day"] body.sggs-reader-theme-day .page_content {
  background-color: #fff7e6 !important;
}

.sggs-reader .sggs-reader__theme-toggle {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 2147483020;
  margin-left: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__theme-toggle {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.44);
}

@media (max-width: 560px) {
  .sggs-reader .sggs-reader__theme-toggle {
    right: 16px;
    bottom: 16px;
  }
}

/* Floating quick settings drawer. */
.sggs-reader .sggs-reader__floating-settings {
  position: fixed;
  right: 28px;
  bottom: 78px;
  z-index: 2147483020;
  width: 38px;
  height: 38px;
  border: 1px solid var(--sggs-border);
  border-radius: 999px;
  background: var(--sggs-surface);
  color: var(--sggs-muted);
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__floating-settings {
  background: #211827;
  color: #f7efe2;
  border-color: rgba(244, 185, 66, 0.28);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.44);
}

.sggs-reader .sggs-reader__floating-settings:hover,
.sggs-reader .sggs-reader__floating-settings:focus-visible {
  border-color: var(--sggs-rahao);
  color: var(--sggs-ink);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__floating-settings:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__floating-settings:focus-visible {
  color: #f4b942;
}

.sggs-reader .sggs-reader__settings-drawer-head {
  display: none;
}

.sggs-reader .sggs-reader__settings-close {
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  color: var(--sggs-ink);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sggs-reader .sggs-reader__settings.is-open.is-drawer {
  position: fixed;
  top: 96px;
  right: 28px;
  bottom: 128px;
  z-index: 2147483019;
  width: min(520px, calc(100vw - 56px));
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  overflow: auto;
  padding: 12px;
  margin-top: 0;
  background: var(--sggs-page);
  border: 1px solid var(--sggs-border);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.sggs-reader .sggs-reader__settings.is-open.is-drawer .sggs-reader__settings-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 10px;
  color: var(--sggs-ink);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings.is-open.is-drawer {
  background: #0d0a14 !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.58);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-close {
  background: #211827;
  color: #f7efe2;
  border-color: rgba(244, 185, 66, 0.34);
}

.sggs-reader.has-open-decorator .sggs-reader__floating-settings {
  display: none;
}

@media (max-width: 560px) {
  .sggs-reader .sggs-reader__floating-settings {
    right: 16px;
    bottom: 66px;
  }

  .sggs-reader .sggs-reader__settings.is-open.is-drawer {
    top: 72px;
    right: 16px;
    bottom: 112px;
    width: calc(100vw - 32px);
  }
}

/* Night inversion for related article references. */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-refs {
  background: #171120 !important;
  border-color: rgba(244, 185, 66, 0.3) !important;
  color: var(--sggs-ink) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-ref {
  background: #211827 !important;
  border-color: rgba(244, 185, 66, 0.24) !important;
  color: var(--sggs-ink) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-ref:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-ref:focus-visible {
  background: #2a2032 !important;
  border-color: rgba(244, 185, 66, 0.52) !important;
  color: var(--sggs-ink) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-refs-title,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-ref-title {
  color: var(--sggs-ink) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-ref-excerpt,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__article-ref-meta {
  color: var(--sggs-muted) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-link {
  background: #2a2032 !important;
  border-color: rgba(244, 185, 66, 0.36) !important;
  color: #f7efe2 !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-tools button:focus-visible,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line-panel-link:hover,
.sggs-reader[data-sggs-reader-theme="night"] .sggs-reader__line-panel-link:focus-visible {
  background: #34263d !important;
  border-color: rgba(244, 185, 66, 0.62) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------------
   Night mode: bottom nav buttons — bright, same style as Ссылка
---------------------------------------------------------------- */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__bottom-nav-button {
  background: #2a2032 !important;
  border-color: rgba(244, 185, 66, 0.36) !important;
  color: #f7efe2 !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__bottom-nav-button:hover:not(:disabled),
.sggs-reader[data-sggs-theme="night"] .sggs-reader__bottom-nav-button:focus-visible:not(:disabled) {
  background: #34263d !important;
  border-color: rgba(244, 185, 66, 0.62) !important;
  color: #ffffff !important;
  outline: none;
}

/* ----------------------------------------------------------------
   Night mode: settings and search panels — re-declare variables
   so fixed-position drawers resolve them even on older iOS/Safari
---------------------------------------------------------------- */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-panel {
  --sggs-ink: #f7efe2;
  --sggs-muted: #b7a8c9;
  --sggs-border: rgba(244, 185, 66, 0.18);
  --sggs-surface: #171120;
  --sggs-page: #0d0a14;
  --sggs-gurmukhi: #ffb06b;
}

/* ----------------------------------------------------------------
   Night mode: settings section headings and text
---------------------------------------------------------------- */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-section {
  color: var(--sggs-ink) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-section h3 {
  color: var(--sggs-muted) !important;
}

/* ----------------------------------------------------------------
   Floating settings drawer: sticky close-button head, safe z
---------------------------------------------------------------- */
.sggs-reader .sggs-reader__settings.is-open.is-drawer .sggs-reader__settings-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sggs-page);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sggs-border);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings.is-open.is-drawer .sggs-reader__settings-drawer-head {
  background: #0d0a14 !important;
}

/* Drawer top must clear the fixed navbar on all viewport sizes. */
.sggs-reader .sggs-reader__settings.is-open.is-drawer {
  top: 110px;
}

@media (max-width: 560px) {
  .sggs-reader .sggs-reader__settings.is-open.is-drawer {
    top: 80px;
  }
}

/* ----------------------------------------------------------------
   Page-level header theming (night + day immersion)
---------------------------------------------------------------- */
html[data-sggs-reader-theme="night"] header.navbar,
html[data-sggs-reader-theme="night"] #menu_top_bar,
html[data-sggs-reader-theme="night"] .nav-container,
html[data-sggs-reader-theme="night"] .navbar-fixed-top,
html[data-sggs-reader-theme="night"] .top-bar,
html[data-sggs-reader-theme="night"] #top-bar {
  background-color: #0d0a14 !important;
  border-bottom-color: rgba(244, 185, 66, 0.16) !important;
}

html[data-sggs-reader-theme="night"] header.navbar a,
html[data-sggs-reader-theme="night"] #menu_top_bar a,
html[data-sggs-reader-theme="night"] .nav-container a,
html[data-sggs-reader-theme="night"] .navbar-fixed-top a {
  color: #b7a8c9 !important;
}

html[data-sggs-reader-theme="day"] header.navbar,
html[data-sggs-reader-theme="day"] #menu_top_bar,
html[data-sggs-reader-theme="day"] .nav-container,
html[data-sggs-reader-theme="day"] .navbar-fixed-top {
  background-color: #fff7e6 !important;
  border-bottom-color: rgba(75, 42, 123, 0.14) !important;
}

/* ----------------------------------------------------------------
   Ang Go button (confirm navigation from number input)
---------------------------------------------------------------- */
.sggs-reader__ang-go {
  font-size: 18px;
}

/* ----------------------------------------------------------------
   Floating side navigation buttons (prev / next ang)
---------------------------------------------------------------- */
.sggs-reader__side-nav {
  position: fixed;
  top: 50%;
  z-index: 2147483015;
  transform: translateY(-50%);
  width: 40px;
  height: 80px;
  border: 1px solid var(--sggs-border);
  background: var(--sggs-surface);
  color: var(--sggs-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
}

.sggs-reader__side-nav--prev {
  left: 0;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

.sggs-reader__side-nav--next {
  right: 0;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.sggs-reader__side-nav:hover,
.sggs-reader__side-nav:focus-visible {
  opacity: 1;
  background: #fffaf1;
  color: #4f3b2e;
  outline: none;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__side-nav {
  background: #120d19;
  color: var(--sggs-muted);
  border-color: rgba(244, 185, 66, 0.22);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__side-nav:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__side-nav:focus-visible {
  background: #2a2032;
  color: #f7efe2;
}

/* ----------------------------------------------------------------
   Rahao line highlight — restore and strengthen in night mode
   (must beat the general .sggs-reader__line night overrides)
---------------------------------------------------------------- */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__line.is-rahao {
  border-color: var(--sggs-rahao) !important;
  box-shadow: inset 5px 0 0 var(--sggs-rahao) !important;
  background: rgba(255, 143, 189, 0.07) !important;
}

@media (max-width: 720px) {
  .sggs-reader__side-nav {
    width: 32px;
    height: 60px;
    font-size: 22px;
  }

  .sggs-reader__verse-up {
    right: 12px;
    top: calc(var(--sggs-site-header-h, 72px) + 12px);
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  body.sggs-header-collapsed .sggs-reader__verse-up {
    top: 12px;
  }

  .sggs-reader__smart-copy-panel {
    right: 12px;
    top: calc(var(--sggs-site-header-h, 72px) + 58px);
    grid-template-columns: 30px 40px 44px 30px;
    gap: 5px;
    padding: 6px;
  }

  .sggs-reader__smart-copy-count,
  .sggs-reader__smart-copy-panel button {
    height: 30px;
    min-width: 30px;
    font-size: 11px;
  }

  body.sggs-header-collapsed .sggs-reader__smart-copy-panel {
    top: 58px;
  }
}

/* ----------------------------------------------------------------
   Search panel: night mode theming
---------------------------------------------------------------- */
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-panel .sggs-reader__settings-section {
  background: #120d19 !important;
  box-shadow: none !important;
}

/* Active (expanded) state for toolbar icon buttons */
.sggs-reader__settings-toggle[aria-expanded="true"] {
  background: rgba(85, 0, 0, 0.07);
  border-color: var(--sggs-gurmukhi);
  color: var(--sggs-gurmukhi);
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-toggle[aria-expanded="true"] {
  background: #211827 !important;
  border-color: rgba(244, 185, 66, 0.5) !important;
  color: #f4b942 !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__kb-toggle,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-adv-toggle,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__kb-key,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__gurmukhi-keyboard,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-advanced {
  background: var(--sggs-surface) !important;
  color: var(--sggs-ink) !important;
  border-color: var(--sggs-border) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__kb-toggle.is-active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-adv-toggle.is-active {
  background: #f4b942 !important;
  color: #0d0a14 !important;
  border-color: #f4b942 !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__kb-key:hover {
  background: #211827 !important;
}

/* Settings drawer on mobile landscape (short viewport) */
@media (max-height: 500px) and (orientation: landscape) {
  .sggs-reader .sggs-reader__settings.is-open.is-drawer {
    top: 8px;
    bottom: 8px;
    right: 12px;
    width: min(400px, calc(100vw - 24px));
    overflow-y: auto;
  }
  .sggs-reader .sggs-reader__settings-drawer-head {
    position: sticky;
    top: 0;
    background: var(--sggs-page);
    z-index: 1;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sggs-border);
    margin-bottom: 4px;
  }
}


/* Click feedback for navigational blocks and compact action buttons. */
.sggs-reader__work,
.sggs-reader__search-result,
.sggs-reader__jap-pauri,
.sggs-reader__settings-toggle,
.sggs-reader__icon,
.sggs-reader__side-nav,
.sggs-reader__sggs-ref-block,
.sggs-reader__sggs-ref-chip,
.sggs-reader__ref-search-result {
  transition: background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, color 170ms ease, transform 170ms ease;
}

.sggs-reader__work:hover,
.sggs-reader__work:focus-visible,
.sggs-reader__work:active,
.sggs-reader__work.is-active,
.sggs-reader__work.is-loading,
.sggs-reader__work.is-action-feedback,
.sggs-reader__search-result:hover,
.sggs-reader__search-result:focus-visible,
.sggs-reader__search-result:active,
.sggs-reader__search-result.is-action-feedback,
.sggs-reader__jap-pauri:hover,
.sggs-reader__jap-pauri:focus-visible,
.sggs-reader__jap-pauri:active,
.sggs-reader__jap-pauri.is-active,
.sggs-reader__jap-pauri.is-action-feedback,
.sggs-reader__settings-toggle:active,
.sggs-reader__settings-toggle.is-action-feedback,
.sggs-reader__icon:active,
.sggs-reader__icon.is-action-feedback,
.sggs-reader__side-nav:active,
.sggs-reader__side-nav.is-action-feedback,
.sggs-reader__sggs-ref-block:active,
.sggs-reader__sggs-ref-block.is-action-feedback,
.sggs-reader__sggs-ref-chip:active,
.sggs-reader__sggs-ref-chip.is-action-feedback,
.sggs-reader__ref-search-result:active,
.sggs-reader__ref-search-result.is-action-feedback {
  border-color: rgba(244, 185, 66, 0.95) !important;
  background: #f4b942 !important;
  color: #1f1b24 !important;
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.22), 0 12px 28px rgba(75, 42, 123, 0.12) !important;
  transform: translateY(-1px);
  outline: none;
}

.sggs-reader__work.is-action-feedback,
.sggs-reader__search-result.is-action-feedback,
.sggs-reader__jap-pauri.is-action-feedback,
.sggs-reader__settings-toggle.is-action-feedback,
.sggs-reader__icon.is-action-feedback,
.sggs-reader__side-nav.is-action-feedback,
.sggs-reader__sggs-ref-block.is-action-feedback,
.sggs-reader__sggs-ref-chip.is-action-feedback,
.sggs-reader__ref-search-result.is-action-feedback {
  animation: sggs-reader-action-feedback 760ms ease;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__work:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work:focus-visible,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work.is-active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work.is-loading,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:focus-visible,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__jap-pauri:hover,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__jap-pauri:focus-visible,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__jap-pauri:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__jap-pauri.is-active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__jap-pauri.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-toggle:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__settings-toggle.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__icon:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__icon.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__side-nav:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__side-nav.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__sggs-ref-block:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__sggs-ref-block.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__sggs-ref-chip:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__sggs-ref-chip.is-action-feedback,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__ref-search-result:active,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__ref-search-result.is-action-feedback {
  background: #f4b942 !important;
  color: #120d19 !important;
  border-color: rgba(244, 185, 66, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.24), 0 12px 30px rgba(0, 0, 0, 0.38) !important;
}

.sggs-reader[data-sggs-theme="night"] .sggs-reader__work:hover small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work:focus-visible small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work:active small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work.is-active small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work.is-loading small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__work.is-action-feedback small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:hover small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:focus-visible small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:active small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result.is-action-feedback small,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:hover div,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:focus-visible div,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result:active div,
.sggs-reader[data-sggs-theme="night"] .sggs-reader__search-result.is-action-feedback div {
  color: #120d19 !important;
}

@keyframes sggs-reader-action-feedback {
  0% { transform: translateY(0) scale(1); }
  32% {
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.24), 0 12px 28px rgba(75, 42, 123, 0.12);
  }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sggs-reader__work,
  .sggs-reader__search-result,
  .sggs-reader__jap-pauri,
  .sggs-reader__settings-toggle,
  .sggs-reader__icon,
  .sggs-reader__side-nav,
  .sggs-reader__sggs-ref-block,
  .sggs-reader__sggs-ref-chip,
  .sggs-reader__ref-search-result {
    transition: none;
  }

  .sggs-reader__work.is-action-feedback,
  .sggs-reader__search-result.is-action-feedback,
  .sggs-reader__jap-pauri.is-action-feedback,
  .sggs-reader__settings-toggle.is-action-feedback,
  .sggs-reader__icon.is-action-feedback,
  .sggs-reader__side-nav.is-action-feedback,
  .sggs-reader__sggs-ref-block.is-action-feedback,
  .sggs-reader__sggs-ref-chip.is-action-feedback,
  .sggs-reader__ref-search-result.is-action-feedback {
    animation: none;
  }
}