:root{--brand:#8b1118;--brand-dark:#650b10;--ink:#1d2025;--muted:#6b7280;--paper:#f4f5f7;--line:#e5e7eb;--card:#fff;--shadow:0 12px 34px rgba(17,24,39,.12);--radius:16px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:"Noto Sans Kannada","Nirmala UI",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.brand-wrap{max-width:1500px;margin:auto;min-height:76px;display:flex;align-items:center;gap:24px;padding:8px 20px}.brand{display:flex;align-items:center}.brand img{width:210px;height:auto;display:block}.site-nav{display:flex;gap:18px;margin-left:auto}.site-nav a{color:var(--ink);font-weight:700}.header-search{display:flex;gap:0}.header-search input{width:220px;border:1px solid #d1d5db;border-right:0;border-radius:9px 0 0 9px;padding:10px 12px;font:inherit}.header-search button{background:var(--brand);color:#fff;border:0;border-radius:0 9px 9px 0;padding:0 14px;font-weight:700;cursor:pointer}.nav-toggle{display:none;background:none;border:0;font-size:25px}.site-main{min-height:70vh}.site-footer{max-width:1500px;margin:30px auto 0;padding:24px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.ad-slot{max-width:1280px;margin:12px auto;text-align:center;padding:0 16px}.ad-slot img{max-height:180px;object-fit:contain;border-radius:10px}.page-shell{max-width:1500px;margin:0 auto;padding:14px 18px 28px}.edition-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;padding:12px 14px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}.edition-title{font-weight:800;font-size:17px;margin-right:auto}.edition-date{display:flex;align-items:center;gap:8px}.edition-date input,.edition-date select{border:1px solid #d1d5db;border-radius:9px;padding:8px 10px;background:#fff}.viewer-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(255,251,252,.98);color:#650b10;border-radius:14px 14px 0 0;padding:9px 10px}.viewer-toolbar button,.viewer-toolbar a,.toolbar-control{border:1px solid rgba(139,17,24,.12);background:rgba(139,17,24,.045);color:#8b1118;border-radius:9px;padding:8px 11px;font:inherit;font-weight:650;cursor:pointer;text-decoration:none}.viewer-toolbar button:hover,.viewer-toolbar a:hover{background:rgba(139,17,24,.10);text-decoration:none}.viewer-toolbar .danger{background:#7d1720;border-color:#a32935}.toolbar-spacer{flex:1}.page-counter{min-width:94px;text-align:center;font-weight:700}.viewer-stage{position:relative;background:#fff;height:min(79vh,1050px);min-height:520px;overflow:hidden;border-radius:0 0 14px 14px;touch-action:none;user-select:none}.paper-surface{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 7px 30px rgba(139,17,24,.10);background:#fff}.paper-surface img.tile{position:absolute;display:block;pointer-events:none}.article-layer{position:absolute;inset:0;pointer-events:none}.article-hotspot{position:absolute;border:2px solid rgba(139,17,24,.15);background:rgba(255,255,255,.01);pointer-events:auto;cursor:pointer;transition:.2s}.article-hotspot:hover{border-color:#f9cc55;background:rgba(249,204,85,.10);box-shadow:0 0 0 2px rgba(139,17,24,.08)}.article-hotspot span{display:none;position:absolute;left:0;bottom:100%;background:rgba(255,250,251,.98);color:#650b10;padding:5px 7px;border-radius:6px;font-size:12px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.article-hotspot:hover span{display:block}.viewer-loading{position:absolute;inset:0;display:grid;place-items:center;color:#8b1118;z-index:15;pointer-events:none}.viewer-loading.hidden{display:none}.spinner{width:44px;height:44px;border:4px solid #ffffff45;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.clip-selection{position:absolute;border:2px dashed #ffd24a;background:rgba(255,210,74,.12);z-index:30;pointer-events:none}.clip-help{position:absolute;left:12px;bottom:12px;background:rgba(255,249,250,.96);color:#650b10;padding:8px 10px;border-radius:9px;z-index:35;font-size:13px}.thumb-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 4px 4px}.thumb{flex:0 0 96px;background:#fff;border:2px solid transparent;border-radius:8px;padding:4px;text-align:center;color:var(--muted);font-size:12px}.thumb.active{border-color:var(--brand);color:var(--brand);font-weight:700}.thumb img{width:86px;height:118px;object-fit:cover;background:#eee;display:block;margin:auto}.empty-state{max-width:740px;margin:70px auto;background:#fff;padding:44px;border-radius:20px;box-shadow:var(--shadow);text-align:center}.empty-state h1{margin-top:0;color:var(--brand)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #cbd0d7;border-radius:9px;background:#fff;color:var(--ink);padding:9px 14px;font-weight:700;cursor:pointer;text-decoration:none}.btn:hover{text-decoration:none;background:#f8f9fa}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand-dark)}.archive-wrap,.search-wrap{max-width:1240px;margin:0 auto;padding:28px 18px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-head h1{margin:0;font-size:29px}.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}.edition-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.04);transition:.2s}.edition-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.09);text-decoration:none}.edition-card img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#e8e9eb}.edition-card .meta{padding:12px}.edition-card .date{font-weight:800}.edition-card .name{font-size:13px;color:var(--muted)}.archive-filter,.search-form{display:flex;gap:8px;flex-wrap:wrap}.archive-filter input,.archive-filter select,.search-form input,.search-form select{border:1px solid #d1d5db;border-radius:9px;padding:10px 12px;background:#fff;font:inherit}.search-form input[type=search]{min-width:min(500px,70vw)}.result-list{display:grid;gap:14px}.search-result{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:110px 1fr;gap:16px}.search-result img{width:110px;height:145px;object-fit:cover;border-radius:8px}.search-result h2{font-size:18px;margin:0 0 4px}.search-result .small{font-size:13px;color:var(--muted)}.search-result mark{background:#ffe67a}.article-view{max-width:1250px;margin:0 auto;padding:18px}.article-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);gap:22px}.article-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.article-card h1{font-size:27px;line-height:1.35;margin:4px 0 8px}.article-meta{color:var(--muted);font-size:13px;margin-bottom:14px}.article-image-wrap{position:relative;background:#fff;border-radius:12px;overflow:auto;min-height:220px;display:grid;place-items:center}.article-image-wrap canvas{max-width:100%;height:auto;background:#fff}.article-text{white-space:pre-wrap;font-size:17px;line-height:1.9;margin-top:18px}.share-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.related-list{display:grid;gap:10px}.related-item{padding:10px;border:1px solid var(--line);border-radius:10px}.related-item strong{display:block}.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#8b1118;color:#fff;padding:10px 15px;border-radius:9px;z-index:200;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1}.modal-backdrop{position:fixed;inset:0;background:rgba(139,17,24,.12);display:grid;place-items:center;z-index:150;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(560px,100%);background:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow)}.modal h2{margin-top:0}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.kbd{font-family:ui-monospace,monospace;border:1px solid #aaa;border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-size:12px;background:#fff;color:#222}@media(max-width:900px){.brand-wrap{flex-wrap:wrap;gap:10px}.brand img{width:170px}.nav-toggle{display:block;margin-left:auto}.site-nav{display:none;order:3;width:100%;margin:0;padding:8px 0}.site-nav.open{display:flex}.header-search{order:4;width:100%;display:none}.site-nav.open+.header-search{display:flex}.header-search input{flex:1;width:auto}.viewer-stage{height:72vh;min-height:430px}.article-layout{grid-template-columns:1fr}.site-footer{flex-direction:column;gap:12px}}@media(max-width:600px){.brand-wrap{padding:7px 12px}.page-shell{padding:8px}.edition-bar{border-radius:10px}.edition-title{width:100%;margin:0}.viewer-toolbar{border-radius:10px 10px 0 0;gap:5px}.viewer-toolbar button,.viewer-toolbar a{padding:8px 9px;font-size:13px}.viewer-stage{height:70vh;min-height:390px;border-radius:0 0 10px 10px}.toolbar-spacer{display:none}.page-counter{min-width:auto}.thumb{flex-basis:76px}.thumb img{width:66px;height:92px}.search-result{grid-template-columns:82px 1fr}.search-result img{width:82px;height:110px}.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.article-card{padding:13px}.article-card h1{font-size:22px}.article-text{font-size:16px}}

.small-note{font-size:12px;color:var(--muted)}.pagination{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* ===== e-Paper mobile reader v1.1 ===== */
.toolbar-control.is-disabled,
.viewer-toolbar .is-disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

.viewer-stage {
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.paper-surface {
  will-change: transform;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

.article-hotspot {
  -webkit-tap-highlight-color: transparent;
}

.viewer-stage.is-cropping .article-hotspot {
  pointer-events: none;
}

.viewer-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 35;
  max-width: min(560px, calc(100% - 24px));
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}

.clip-selection {
  position: absolute;
  z-index: 45;
  border: var(--viewer-border-size, 2px) solid #ffd24a;
  background: rgba(255, 210, 74, .13);
  box-shadow: 0 0 0 var(--viewer-border-size, 2px) rgba(0, 0, 0, .55);
  pointer-events: none;
}

.clip-handle {
  position: absolute;
  z-index: 46;
  width: var(--viewer-handle-size, 20px);
  height: var(--viewer-handle-size, 20px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: var(--viewer-border-size, 2px) solid #111;
  border-radius: 50%;
  background: #ffd24a;
  box-shadow: 0 0 var(--viewer-shadow-size, 5px) rgba(0, 0, 0, .45);
  pointer-events: auto;
  touch-action: none;
}

.viewer-stage:not(.is-cropping) .clip-handle {
  display: none;
}

.clip-handle--nw { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.clip-handle--n  { left: 50%; top: 0; transform: translate(-50%, -50%); cursor: ns-resize; }
.clip-handle--ne { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.clip-handle--e  { right: 0; top: 50%; transform: translate(50%, -50%); cursor: ew-resize; }
.clip-handle--se { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.clip-handle--s  { left: 50%; bottom: 0; transform: translate(-50%, 50%); cursor: ns-resize; }
.clip-handle--sw { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.clip-handle--w  { left: 0; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }

.crop-action-bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 60;
  display: flex;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 8px;
  overflow-x: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  background: rgba(17, 19, 22, .94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  scrollbar-width: none;
}

.crop-action-bar::-webkit-scrollbar { display: none; }
.crop-action-bar[hidden] { display: none !important; }

.crop-action {
  flex: 0 0 auto;
  border: 1px solid #555d68;
  border-radius: 9px;
  background: #2c3138;
  color: #fff;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.crop-action.primary {
  border-color: #ffd24a;
  background: #ffd24a;
  color: #181818;
}

.mobile-page-nav {
  display: none;
}

.reader-strip-section {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.reader-strip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.reader-strip-heading h2 {
  margin: 0;
  font-size: 17px;
}

.reader-strip-heading span {
  color: var(--muted);
  font-size: 12px;
}

.page-thumb-strip {
  padding: 2px;
}

.thumb-card {
  position: relative;
  flex: 0 0 104px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #f8f9fa;
  overflow: hidden;
}

.thumb-card.active {
  border-color: var(--brand);
}

.thumb-card .thumb {
  display: block;
  width: 100%;
  padding: 5px 5px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.thumb-card .thumb img {
  width: 90px;
  height: 122px;
}

.thumb-share {
  width: calc(100% - 10px);
  margin: 3px 5px 6px;
  border: 1px solid #d3d7dc;
  border-radius: 7px;
  background: #fff;
  color: var(--brand);
  padding: 5px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.news-clip-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 7px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.news-clip-card {
  flex: 0 0 210px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: start;
  box-shadow: 0 3px 10px rgba(17, 24, 39, .05);
}

.news-clip-thumb-wrap {
  position: relative;
  display: grid;
  width: 100%;
  height: 142px;
  place-items: center;
  overflow: hidden;
  background: #e9ebee;
}

.news-clip-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.news-clip-thumb-placeholder {
  color: var(--muted);
  font-size: 12px;
}

.news-clip-card__body {
  padding: 9px;
}

.news-clip-title {
  display: -webkit-box;
  min-height: 42px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-clip-title:hover {
  color: var(--brand);
  text-decoration: none;
}

.news-clip-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.news-clip-actions a,
.news-clip-actions button {
  min-width: 0;
  border: 1px solid #d7dbe0;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 6px 4px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.news-clip-actions button:hover,
.news-clip-actions a:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.clip-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
}

.clip-preview-modal[hidden] {
  display: none !important;
}

.clip-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
}

.clip-preview-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100% - 28px));
  max-height: min(90dvh, 900px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.clip-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.clip-preview-header h2 {
  margin: 0;
  font-size: 18px;
}

.clip-preview-close {
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: #f0f1f3;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.clip-preview-image-wrap {
  display: grid;
  flex: 1 1 auto;
  min-height: 220px;
  overflow: auto;
  place-items: center;
  padding: 12px;
  background: #25282d;
}

.clip-preview-image-wrap img {
  display: block;
  max-width: 100%;
  max-height: 66dvh;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}

.clip-preview-loading {
  color: #fff;
  text-align: center;
}

.clip-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

body.clip-preview-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .viewer-stage {
    height: calc(100dvh - 190px);
    min-height: 470px;
    max-height: none;
  }

  .viewer-hint {
    bottom: 66px;
  }

  .crop-action-bar {
    bottom: 66px;
  }
}

@media (max-width: 760px) {
  .page-shell {
    padding-bottom: 92px;
  }

  .edition-bar {
    gap: 8px;
  }

  .edition-date {
    width: 100%;
  }

  .edition-date select {
    min-width: 0;
    flex: 1;
  }

  .viewer-toolbar {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .viewer-toolbar::-webkit-scrollbar {
    display: none;
  }

  .viewer-toolbar > * {
    flex: 0 0 auto;
  }

  .viewer-toolbar .toolbar-spacer {
    display: none;
  }

  .viewer-stage {
    height: calc(100dvh - 178px);
    min-height: 450px;
  }

  .mobile-page-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 125;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;
    background: rgba(20, 22, 25, .96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
  }

  .mobile-page-nav__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    border-radius: 10px;
    background: #30343a;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-page-nav__button:hover {
    text-decoration: none;
  }

  .mobile-page-nav__button.is-disabled {
    opacity: .32;
  }

  .mobile-page-nav__arrow {
    font-size: 25px;
    line-height: 1;
  }

  .mobile-page-nav__label {
    font-size: 12px;
  }

  .mobile-page-nav__counter {
    min-width: 56px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
  }

  .reader-strip-heading {
    display: block;
  }

  .reader-strip-heading span {
    display: block;
    margin-top: 2px;
  }

  .thumb-card {
    flex-basis: 90px;
  }

  .thumb-card .thumb img {
    width: 76px;
    height: 104px;
  }

  .news-clip-card {
    flex-basis: min(76vw, 240px);
  }

  .news-clip-thumb-wrap {
    height: 158px;
  }

  .clip-preview-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 18px);
  }

  .clip-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clip-preview-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .viewer-stage {
    height: calc(100dvh - 162px);
    min-height: 430px;
  }

  .viewer-hint {
    left: 8px;
    bottom: 65px;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    font-size: 11px;
  }

  .crop-action-bar {
    left: 8px;
    right: 8px;
    bottom: 64px;
    max-width: none;
    transform: none;
  }

  .crop-action {
    padding: 8px 10px;
    font-size: 12px;
  }

  .mobile-page-nav__label {
    display: none;
  }

  .mobile-page-nav__button {
    min-height: 50px;
  }
}

/* =========================================================
   MOBILE LIGHT THEME HARD OVERRIDES - v1.3
   These rules intentionally use !important so older cached/base
   dark reader rules cannot win in the mobile reader.
   ========================================================= */

:root{
  --reader-red:#9f1019;
  --reader-red-dark:#741018;
  --reader-red-soft:rgba(159,16,25,.055);
  --reader-red-soft-2:rgba(159,16,25,.10);
  --reader-red-line:rgba(159,16,25,.14);
  --reader-white:rgba(255,255,255,.98);
}

body{
  background:#fffafa !important;
  color:#342629 !important;
}

.site-header{
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid var(--reader-red-line) !important;
  box-shadow:0 5px 18px rgba(159,16,25,.06) !important;
}

/* Header calendar + archive */
.header-reader-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

.header-date-form{margin:0;}

.header-icon-button{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:5px 10px;
  border:1px solid var(--reader-red-line) !important;
  border-radius:13px;
  background:var(--reader-red-soft) !important;
  color:var(--reader-red-dark) !important;
  text-decoration:none !important;
  overflow:hidden;
}

.header-icon-button svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

.header-date-button input[type=date]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.001;
  cursor:pointer;
}

.header-date-copy,
.header-action-copy{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.header-action-caption{
  color:#9a6d70;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.header-date-copy strong,
.header-action-copy strong{
  color:var(--reader-red-dark);
  font-size:12px;
}

/* Reader chrome: force away every dark base style. */
.viewer-toolbar{
  background:rgba(255,251,252,.98) !important;
  color:var(--reader-red-dark) !important;
  border:1px solid var(--reader-red-line) !important;
  border-bottom:0 !important;
  box-shadow:0 4px 14px rgba(159,16,25,.05) !important;
}

.viewer-toolbar button,
.viewer-toolbar a,
.viewer-toolbar .toolbar-control{
  background:var(--reader-red-soft) !important;
  color:var(--reader-red) !important;
  border:1px solid var(--reader-red-line) !important;
  box-shadow:none !important;
}

.viewer-toolbar button:hover,
.viewer-toolbar a:hover{
  background:var(--reader-red-soft-2) !important;
}

.page-counter{
  color:var(--reader-red-dark) !important;
}

.viewer-stage{
  background:#fff !important;
  border:1px solid rgba(159,16,25,.09) !important;
  box-shadow:inset 0 0 48px rgba(159,16,25,.025) !important;
}

.paper-surface{
  background:#fff !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 7px 24px rgba(159,16,25,.10) !important;
}

.article-hotspot{
  border:1.5px solid rgba(159,16,25,.19) !important;
  background:rgba(159,16,25,.008) !important;
  -webkit-touch-callout:none !important;
}

.article-hotspot:hover,
.article-hotspot:focus-visible{
  border-color:rgba(159,16,25,.62) !important;
  background:rgba(159,16,25,.055) !important;
  box-shadow:0 0 0 2px rgba(159,16,25,.08) !important;
}

.article-hotspot.is-selected{
  border-color:#b3131c !important;
  background:rgba(179,19,28,.12) !important;
  box-shadow:0 0 0 3px rgba(179,19,28,.14) !important;
}

.article-hotspot span{
  background:rgba(255,250,251,.98) !important;
  color:var(--reader-red-dark) !important;
  border:1px solid var(--reader-red-line) !important;
  box-shadow:0 5px 16px rgba(159,16,25,.10) !important;
}

.viewer-loading{
  background:rgba(255,255,255,.86) !important;
  color:var(--reader-red) !important;
}

.spinner{
  border-color:rgba(159,16,25,.12) !important;
  border-top-color:var(--reader-red) !important;
}

.viewer-hint{
  background:rgba(255,249,250,.94) !important;
  color:var(--reader-red-dark) !important;
  border:1px solid var(--reader-red-line) !important;
  box-shadow:0 5px 16px rgba(159,16,25,.08) !important;
}

.clip-selection{
  border:var(--viewer-border-size,2px) solid #b3131c !important;
  background:rgba(179,19,28,.07) !important;
  box-shadow:0 0 0 var(--viewer-border-size,2px) rgba(179,19,28,.11) !important;
}

.clip-handle{
  background:#b3131c !important;
  border:var(--viewer-border-size,2px) solid #fff !important;
  box-shadow:0 0 var(--viewer-shadow-size,5px) rgba(159,16,25,.24) !important;
}

/* Bottom navigation: white / transparent red only. */
.mobile-page-nav{
  border:1px solid var(--reader-red-line) !important;
  background:rgba(255,249,250,.96) !important;
  box-shadow:0 10px 28px rgba(159,16,25,.12) !important;
}

.mobile-page-nav__button{
  border:1px solid rgba(159,16,25,.10) !important;
  background:rgba(159,16,25,.065) !important;
  color:var(--reader-red) !important;
}

.mobile-page-nav__counter{
  color:var(--reader-red-dark) !important;
}

/* Floating share */
.share-fab-wrap{
  position:fixed;
  right:18px;
  bottom:22px;
  z-index:150;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.share-fab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:112px;
  min-height:52px;
  padding:0 17px;
  border:0 !important;
  border-radius:999px;
  background:linear-gradient(135deg,#981019,#bf1822) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(159,16,25,.28) !important;
  font-weight:850;
  cursor:pointer;
}

.share-fab svg,
.share-fab-option svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.share-fab-menu{
  width:min(315px,calc(100vw - 24px));
  overflow:hidden;
  border:1px solid var(--reader-red-line) !important;
  border-radius:16px;
  background:rgba(255,252,252,.99) !important;
  box-shadow:0 14px 38px rgba(159,16,25,.17) !important;
}

.share-fab-menu[hidden]{display:none !important;}

.share-fab-option{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:10px;
  width:100%;
  border:0 !important;
  border-bottom:1px solid rgba(159,16,25,.08) !important;
  background:transparent !important;
  color:#38282b !important;
  padding:11px;
  text-align:left;
}

.share-fab-option:last-child{border-bottom:0 !important;}
.share-fab-option:active{background:var(--reader-red-soft) !important;}

.share-fab-option__thumb,
.share-fab-option__icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:11px;
  background:var(--reader-red-soft) !important;
  color:var(--reader-red) !important;
}

.share-fab-option__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.share-fab-option__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

.share-fab-option__copy strong{color:var(--reader-red-dark) !important;}
.share-fab-option__copy small{color:#8d6568 !important;font-size:11px;line-height:1.35;}
.share-fab-wrap.is-crop-active{opacity:.18;pointer-events:none;}

/* Crop/share panel */
.crop-share-panel{
  position:fixed;
  right:16px;
  bottom:86px;
  z-index:148;
  width:min(360px,calc(100vw - 24px));
  max-height:min(72dvh,650px);
  overflow:auto;
  padding:11px;
  border:1px solid var(--reader-red-line) !important;
  border-radius:16px;
  background:rgba(255,252,252,.99) !important;
  color:#39292c !important;
  box-shadow:0 16px 40px rgba(159,16,25,.16) !important;
}

.crop-share-panel[hidden]{display:none !important;}
.crop-share-panel__thumb{
  position:relative;
  display:grid;
  min-height:120px;
  max-height:34dvh;
  overflow:auto;
  place-items:center;
  border:1px solid rgba(159,16,25,.09) !important;
  border-radius:12px;
  background:#fff8f9 !important;
}
.crop-share-panel__thumb img{display:block;max-width:100%;height:auto;background:#fff;}
.crop-share-panel__loading{padding:20px;color:var(--reader-red) !important;text-align:center;}
.crop-share-panel__copy{display:flex;flex-direction:column;gap:2px;padding:9px 2px 7px;}
.crop-share-panel__copy strong{color:var(--reader-red-dark) !important;}
.crop-share-panel__copy span{font-size:11px;color:#8d6568 !important;}
.crop-share-panel__actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.crop-share-panel__actions button{
  min-height:42px;
  border:1px solid var(--reader-red-line) !important;
  border-radius:10px;
  background:var(--reader-red-soft) !important;
  color:var(--reader-red) !important;
  font-weight:800;
}
.crop-share-panel__actions .crop-share-primary{
  grid-column:1 / -1;
  background:var(--reader-red) !important;
  color:#fff !important;
  border-color:var(--reader-red) !important;
}
.crop-share-panel__actions button:disabled{opacity:.38;}

/* Full-screen selected-news reader */
.news-reader-modal{
  position:fixed;
  inset:0;
  z-index:300;
}

.news-reader-modal[hidden]{display:none !important;}

.news-reader-backdrop{
  position:absolute;
  inset:0;
  background:rgba(159,16,25,.13) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.news-reader-sheet{
  position:absolute;
  inset:10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--reader-red-line) !important;
  border-radius:19px;
  background:#fff !important;
  color:#342629 !important;
  box-shadow:0 22px 60px rgba(159,16,25,.18) !important;
}

.news-reader-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:0 0 auto;
  padding:11px 12px;
  border-bottom:1px solid rgba(159,16,25,.09) !important;
  background:rgba(255,250,251,.98) !important;
}

.news-reader-heading{min-width:0;flex:1;}
.news-reader-kicker{display:block;color:var(--reader-red) !important;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em;}
.news-reader-header h2{margin:1px 0 2px;color:var(--reader-red-dark) !important;font-size:19px;line-height:1.3;}
.news-reader-header p{margin:0;color:#90686b !important;font-size:11px;}
.news-reader-close{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid var(--reader-red-line) !important;
  border-radius:50%;
  background:var(--reader-red-soft) !important;
  color:var(--reader-red) !important;
  font-size:27px;
  line-height:1;
}

.news-reader-content{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:10px;
  background:#fff !important;
  -webkit-overflow-scrolling:touch;
}

.news-reader-content img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  border:0 !important;
  outline:0 !important;
  background:#fff !important;
  box-shadow:0 5px 18px rgba(159,16,25,.08) !important;
}

.news-reader-loading{
  min-height:55dvh;
  display:grid;
  place-items:center;
  color:var(--reader-red) !important;
  text-align:center;
}

.news-reader-actions{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(159,16,25,.09) !important;
  background:rgba(255,250,251,.99) !important;
}

.news-reader-actions button,
.news-reader-actions a{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--reader-red-line) !important;
  border-radius:10px;
  background:var(--reader-red-soft) !important;
  color:var(--reader-red) !important;
  padding:6px 7px;
  font-size:11px;
  font-weight:850;
  text-align:center;
  text-decoration:none !important;
}

.news-reader-actions .news-reader-primary{
  background:var(--reader-red) !important;
  color:#fff !important;
  border-color:var(--reader-red) !important;
}
.news-reader-actions button:disabled{opacity:.38;}
body.news-reader-open{overflow:hidden !important;}

/* Remove remaining legacy dark modal/toast reader colours on mobile. */
@media(max-width:900px){
  .viewer-stage,
  .clip-preview-image-wrap,
  .article-image-wrap{
    background:#fff !important;
  }

  .clip-preview-backdrop,
  .modal-backdrop{
    background:rgba(159,16,25,.12) !important;
  }

  .clip-preview-dialog,
  .modal{
    background:#fff !important;
    color:#342629 !important;
    box-shadow:0 18px 45px rgba(159,16,25,.16) !important;
  }

  .clip-preview-loading{
    color:var(--reader-red) !important;
  }

  .toast{
    background:var(--reader-red) !important;
    color:#fff !important;
    box-shadow:0 8px 24px rgba(159,16,25,.24) !important;
  }
}

@media(max-width:760px){
  .brand-wrap{
    min-height:58px;
    padding:5px 7px !important;
    gap:5px !important;
    flex-wrap:nowrap !important;
  }

  .brand img{width:135px !important;}
  .header-reader-actions{gap:4px;}
  .header-icon-button{min-height:38px;padding:4px 7px;border-radius:11px;}
  .header-icon-button svg{width:20px;height:20px;}
  .header-date-copy .header-action-caption,
  .header-archive-button .header-action-copy{display:none;}
  .header-date-copy strong{font-size:11px;}
  .header-archive-button{width:39px;padding:0;justify-content:center;}
  .nav-toggle{margin-left:0 !important;width:32px;padding:0 !important;color:var(--reader-red) !important;}

  .page-shell{padding:5px 6px 92px !important;}
  .edition-bar{display:none !important;}

  .viewer-toolbar{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none;
    padding:5px !important;
    gap:5px !important;
  }
  .viewer-toolbar::-webkit-scrollbar{display:none;}
  .viewer-toolbar > *{flex:0 0 auto;}
  .viewer-toolbar .toolbar-spacer{display:none !important;}
  .viewer-toolbar button,
  .viewer-toolbar a,
  .viewer-toolbar .toolbar-control{min-height:34px;padding:6px 9px !important;font-size:12px !important;}

  .viewer-stage{
    height:calc(100dvh - 128px) !important;
    min-height:430px !important;
  }

  .mobile-page-nav{
    display:grid !important;
    left:9px !important;
    right:9px !important;
    bottom:calc(7px + env(safe-area-inset-bottom)) !important;
    padding:6px !important;
  }

  .share-fab-wrap{
    right:13px;
    bottom:calc(76px + env(safe-area-inset-bottom));
  }
  .share-fab{
    width:55px;
    min-width:55px;
    height:55px;
    min-height:55px;
    padding:0;
    border-radius:50%;
  }
  .share-fab span{display:none;}
  .share-fab svg{width:26px;height:26px;}

  .crop-share-panel{
    left:8px;
    right:8px;
    bottom:calc(72px + env(safe-area-inset-bottom));
    width:auto;
    max-height:52dvh;
  }

  .viewer-hint{
    left:8px !important;
    bottom:67px !important;
    max-width:calc(100% - 82px) !important;
    font-size:10px !important;
    padding:5px 7px !important;
  }

  .news-reader-sheet{
    inset:0;
    border:0 !important;
    border-radius:0;
  }
  .news-reader-header{padding-top:calc(9px + env(safe-area-inset-top));}
  .news-reader-content{padding:6px;}
  .news-reader-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .news-reader-actions .news-reader-primary{grid-column:span 2;}
  .news-reader-actions a{grid-column:span 2;}
}

@media(max-width:430px){
  .brand img{width:118px !important;}
  .header-date-copy strong{font-size:10px;}
  .header-icon-button{padding:3px 6px;}
  .viewer-stage{height:calc(100dvh - 121px) !important;}
  .mobile-page-nav__label{display:none !important;}
  .news-reader-header h2{font-size:17px;}
  .news-reader-actions{grid-template-columns:1fr 1fr;}
  .news-reader-actions .news-reader-primary,
  .news-reader-actions a{grid-column:span 1;}
}

/* =========================================================
   v1.4 additive compatibility overrides
   Keep all legacy reader functions while mobile uses the
   new light-red interaction model.
   ========================================================= */
.desktop-reader-control.is-active{
  background:var(--reader-red) !important;
  border-color:var(--reader-red) !important;
  color:#fff !important;
}

/* Final reader chrome guard: legacy dark declarations above may not bleed through. */
.viewer-toolbar{
  background:rgba(255,251,252,.985) !important;
  color:var(--reader-red-dark) !important;
  border-color:rgba(159,16,25,.12) !important;
}
.viewer-toolbar button,
.viewer-toolbar a,
.viewer-toolbar .toolbar-control{
  background:rgba(159,16,25,.055) !important;
  color:var(--reader-red) !important;
  border-color:rgba(159,16,25,.14) !important;
}
.viewer-stage,
.article-image-wrap,
.clip-preview-image-wrap{
  background:#fff !important;
  border-color:rgba(159,16,25,.10) !important;
}
.paper-surface{
  background:#fff !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 7px 24px rgba(159,16,25,.10) !important;
}
.article-hotspot span,
.clip-help,
.viewer-hint{
  background:rgba(255,249,250,.96) !important;
  color:var(--reader-red-dark) !important;
  border-color:rgba(159,16,25,.12) !important;
}
.viewer-loading{
  background:rgba(255,255,255,.88) !important;
  color:var(--reader-red) !important;
}
.toast{
  background:var(--reader-red) !important;
  color:#fff !important;
}
.modal-backdrop,
.clip-preview-backdrop,
.news-reader-backdrop{
  background:rgba(159,16,25,.12) !important;
}

@media(max-width:760px){
  /* Desktop legacy actions remain available on larger screens but do not clutter mobile. */
  .desktop-reader-control{
    display:none !important;
  }

  .viewer-stage,
  .viewer-toolbar,
  .paper-surface,
  .news-reader-sheet,
  .news-reader-content,
  .crop-share-panel,
  .share-fab-menu,
  .mobile-page-nav{
    border-color:rgba(159,16,25,.10) !important;
  }
}

/* =========================================================
   ADDITIVE SHARE + CROP ENHANCEMENTS v2.2.0
   Existing reader/site styles above are intentionally retained.
   ========================================================= */

/* The old floating red share control is intentionally retired.
   Keeping this defensive rule prevents a cached/legacy markup copy
   from showing it. */
.share-fab-wrap{
  display:none !important;
}

.reader-primary-action{
  min-height:36px;
  padding:7px 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(139,17,24,.20) !important;
  border-radius:9px;
  background:#fff !important;
  color:#8b1118 !important;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(139,17,24,.06);
  -webkit-tap-highlight-color:transparent;
}

.reader-primary-action:hover{
  background:#fff5f6 !important;
}

.reader-primary-action:disabled{
  opacity:.52;
  cursor:wait;
}

.reader-primary-action.is-active{
  background:#8b1118 !important;
  border-color:#8b1118 !important;
  color:#fff !important;
}

.reader-action-icon{
  width:20px;
  height:20px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 3-second mapped-news hold progress. */
.article-hotspot{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  padding:0;
  font:inherit;
  -webkit-touch-callout:none;
}

.article-hotspot.is-holding{
  border-color:#8b1118 !important;
  animation:satyamityaHoldProgress 3s linear forwards;
}

@keyframes satyamityaHoldProgress{
  0%{
    background:rgba(139,17,24,.02);
    box-shadow:inset 0 0 0 0 rgba(139,17,24,.05);
  }
  50%{
    background:rgba(139,17,24,.07);
  }
  100%{
    background:rgba(139,17,24,.14);
    box-shadow:inset 0 0 0 4px rgba(139,17,24,.11);
  }
}

/* Existing crop side panel remains available so no old crop action is lost. */
.crop-share-panel__actions{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.crop-share-panel__actions [data-crop-preview-open]{
  background:#8b1118 !important;
  border-color:#8b1118 !important;
  color:#fff !important;
}

/* Full-screen manual crop preview. */
.crop-preview-modal{
  position:fixed;
  inset:0;
  z-index:275;
  display:grid;
  place-items:center;
  padding:14px;
}

.crop-preview-modal[hidden]{
  display:none !important;
}

.crop-preview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(139,17,24,.14);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.crop-preview-dialog{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  max-height:calc(100dvh - 28px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(139,17,24,.16);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(139,17,24,.18);
}

.crop-preview-header{
  flex:0 0 auto;
  padding:11px 13px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,#fff 0%,#fff8f9 100%);
  border-bottom:1px solid rgba(139,17,24,.09);
}

.crop-preview-kicker{
  display:block;
  color:#8b1118;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.crop-preview-header h2{
  margin:2px 0 0;
  color:#681017;
  font-size:19px;
  line-height:1.3;
}

.crop-preview-header p{
  margin:3px 0 0;
  color:#8d6568;
  font-size:11px;
}

.crop-preview-close{
  width:39px;
  height:39px;
  flex:0 0 auto;
  padding:0;
  border:1px solid rgba(139,17,24,.16);
  border-radius:50%;
  background:#fff4f5;
  color:#8b1118;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.crop-preview-image-area{
  flex:1 1 auto;
  min-height:250px;
  overflow:auto;
  display:grid;
  place-items:center;
  padding:12px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

.crop-preview-image-area img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
  max-height:calc(100dvh - 310px);
  object-fit:contain;
  background:#fff;
  box-shadow:0 6px 22px rgba(139,17,24,.10);
}

.crop-preview-loading{
  padding:20px;
  color:#8b1118;
  font-weight:750;
  text-align:center;
}

.crop-preview-message{
  flex:0 0 auto;
  padding:8px 12px;
  background:#fffafb;
  border-top:1px solid rgba(139,17,24,.07);
}

.crop-preview-message strong{
  display:block;
  color:#681017;
  font-size:11px;
}

.crop-preview-message p{
  margin:2px 0 0;
  color:#8d6568;
  font-size:11px;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.crop-preview-actions{
  flex:0 0 auto;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
  background:#fff;
  border-top:1px solid rgba(139,17,24,.09);
}

.crop-preview-actions button{
  min-height:42px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(139,17,24,.16);
  border-radius:10px;
  background:#fff5f6;
  color:#8b1118;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.crop-preview-actions button:disabled{
  opacity:.4;
  cursor:default;
}

.crop-preview-share{
  background:#8b1118 !important;
  border-color:#8b1118 !important;
  color:#fff !important;
}

body.crop-preview-open{
  overflow:hidden !important;
}

@media(max-width:760px){
  /* Put the two requested actions first in the reader toolbar on phones. */
  .reader-primary-action{
    order:-5;
    min-width:65px;
    min-height:38px;
    padding:5px 8px !important;
    gap:4px;
    font-size:10px !important;
  }

  .reader-primary-action .reader-action-icon{
    width:21px;
    height:21px;
  }

  .crop-preview-modal{
    padding:0;
  }

  .crop-preview-dialog{
    width:100%;
    height:100dvh;
    max-width:none;
    max-height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .crop-preview-header{
    padding:calc(9px + env(safe-area-inset-top)) 10px 9px;
  }

  .crop-preview-header h2{
    font-size:16px;
  }

  .crop-preview-image-area{
    min-height:0;
    padding:7px;
    align-content:start;
    background:#fff;
  }

  .crop-preview-image-area img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    margin:0 auto;
    object-fit:contain;
  }

  .crop-preview-message{
    padding:6px 9px;
  }

  .crop-preview-message p{
    font-size:10px;
  }

  .crop-preview-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .crop-preview-actions button{
    width:100%;
    min-height:43px;
    padding:7px 8px;
    font-size:11px;
  }

  .crop-preview-share{
    grid-column:1 / -1;
  }
}

/* =========================================================
   v2.4 - Easy automatic Crop & Share controls
   Additive overrides only. Existing reader features remain.
   ========================================================= */
.viewer-stage.is-cropping .clip-selection{
  pointer-events:auto !important;
  cursor:move !important;
  border:var(--viewer-border-size,2px) solid #9f1019 !important;
  background:rgba(159,16,25,.075) !important;
  box-shadow:
    0 0 0 var(--viewer-border-size,2px) rgba(255,255,255,.96),
    0 0 var(--viewer-shadow-size,7px) rgba(159,16,25,.24) !important;
  touch-action:none !important;
}

.viewer-stage.is-cropping .clip-handle{
  background:#ffffff !important;
  border:var(--viewer-border-size,2px) solid #9f1019 !important;
  box-shadow:0 0 var(--viewer-shadow-size,6px) rgba(159,16,25,.30) !important;
}

.crop-quick-actions{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:78;
  width:min(760px,calc(100% - 20px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px;
  border:1px solid rgba(159,16,25,.18);
  border-radius:14px;
  background:rgba(255,250,251,.98);
  box-shadow:0 10px 30px rgba(159,16,25,.13);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.crop-quick-actions[hidden]{display:none!important}

.crop-quick-actions__hint{
  margin-right:auto;
  color:#7e0c14;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}

.crop-quick-actions button{
  flex:0 0 auto;
  min-height:40px;
  padding:7px 11px;
  border:1px solid rgba(159,16,25,.17);
  border-radius:10px;
  background:#fff;
  color:#9f1019;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.crop-quick-actions button:hover{
  background:rgba(159,16,25,.06);
}

.crop-quick-actions .crop-quick-actions__primary{
  border-color:#9f1019;
  background:#9f1019;
  color:#fff;
}

@media(max-width:760px){
  .crop-quick-actions{
    left:7px;
    right:7px;
    bottom:72px;
    width:auto;
    transform:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:6px;
    padding:7px;
  }

  .crop-quick-actions__hint{
    grid-column:1 / -1;
    margin:0;
    text-align:center;
    font-size:10px;
  }

  .crop-quick-actions button{
    min-height:42px;
    padding:7px 9px;
    font-size:11px;
  }

  .crop-quick-actions__primary{
    min-width:0;
  }

  .viewer-stage.is-cropping .viewer-hint{
    display:none;
  }
}

/* =========================================================
   v2.5 - mobile-safe crop selection overlay
   The crop box lives directly inside viewer-stage, outside the
   transformed newspaper surface, so it remains visible and easy
   to resize at every zoom level.
   ========================================================= */
.viewer-stage.is-cropping .clip-selection{
  position:absolute !important;
  z-index:72 !important;
  pointer-events:auto !important;
  touch-action:none !important;
  cursor:move !important;
  border:3px solid #9f1019 !important;
  border-radius:10px !important;
  background:rgba(159,16,25,.055) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.98),
    0 0 0 9999px rgba(96,16,22,.11),
    0 8px 28px rgba(159,16,25,.20) !important;
}

.viewer-stage.is-cropping .clip-handle{
  position:absolute !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  padding:0 !important;
  border:3px solid #9f1019 !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 3px 12px rgba(159,16,25,.28) !important;
  pointer-events:auto !important;
  touch-action:none !important;
}

@media(max-width:760px){
  .viewer-stage.is-cropping .clip-selection{
    border-width:3px !important;
    border-radius:8px !important;
  }

  .viewer-stage.is-cropping .clip-handle{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
  }

  .crop-quick-actions{
    z-index:90 !important;
  }
}

/* =========================================================
   v2.6 - mobile crop-first flow
   Crop opens on the paper. Preview opens only after the user
   taps Preview Crop. Desktop legacy tools remain available.
   ========================================================= */
.crop-quick-actions .crop-quick-actions__primary[hidden]{
  display:none !important;
}

.crop-quick-actions button:disabled{
  opacity:.45;
  cursor:default;
}

@media(max-width:760px){
  /* Avoid duplicate crop controls on phones: use the controls over the page. */
  .crop-share-panel{
    display:none !important;
  }

  .crop-quick-actions{
    left:8px !important;
    right:8px !important;
    bottom:74px !important;
    width:auto !important;
    transform:none !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    padding:8px !important;
    border-radius:15px !important;
  }

  .crop-quick-actions__hint{
    grid-column:1 / -1 !important;
    margin:0 !important;
    padding:1px 4px 2px !important;
    white-space:normal !important;
    line-height:1.3 !important;
    text-align:center !important;
    font-size:10px !important;
  }

  .crop-quick-actions .crop-quick-actions__primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:46px !important;
    font-size:13px !important;
  }

  .crop-quick-actions button:not(.crop-quick-actions__primary){
    width:100% !important;
    min-height:42px !important;
  }

  .viewer-stage.is-cropping .clip-selection{
    z-index:82 !important;
  }

  .viewer-stage.is-cropping .clip-handle{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
  }
}


/* =========================================================
   v2.7 mobile compact header + edition row
   Mobile-only presentation. Existing desktop reader behavior,
   crop/share logic and navigation JS remain untouched.
   ========================================================= */
@media (max-width:760px){
  .site-header{
    overflow:visible !important;
    border-bottom:1px solid rgba(139,17,24,.10) !important;
    box-shadow:0 4px 18px rgba(101,11,16,.06) !important;
  }

  .site-header .brand-wrap{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    min-height:52px !important;
    padding:5px 7px !important;
    overflow:visible !important;
  }

  .site-header .brand{
    flex:0 0 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .site-header .brand img{
    width:112px !important;
    max-width:112px !important;
    height:auto !important;
  }

  .reader-header-tools{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
    margin-left:auto !important;
  }

  .reader-header-date{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
    margin:0 !important;
  }

  /* The date input already provides the native calendar picker on mobile. */
  .reader-header-calendar-label{
    display:none !important;
  }

  .reader-header-date input[type="date"]{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:106px !important;
    max-width:118px !important;
    height:36px !important;
    margin:0 !important;
    padding:0 5px !important;
    border:1px solid rgba(139,17,24,.18) !important;
    border-radius:10px !important;
    background:linear-gradient(180deg,#fff 0%,#fff8f9 100%) !important;
    color:#650b10 !important;
    font:700 10.5px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    box-shadow:0 2px 9px rgba(139,17,24,.06) !important;
  }

  .reader-header-open,
  .reader-header-archive,
  .nav-toggle{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(139,17,24,.16) !important;
    border-radius:10px !important;
    background:linear-gradient(180deg,#fff 0%,#fff7f8 100%) !important;
    color:#8b1118 !important;
    box-shadow:0 2px 9px rgba(139,17,24,.06) !important;
    text-decoration:none !important;
  }

  .reader-header-open:active,
  .reader-header-archive:active,
  .nav-toggle:active{
    transform:translateY(1px);
    background:#fdeff1 !important;
  }

  .reader-header-open svg,
  .reader-header-archive svg{
    display:block;
    width:19px;
    height:19px;
  }

  .reader-header-open-label,
  .reader-header-label{
    display:none !important;
  }

  .reader-header-archive-icon,
  .reader-header-open-icon{
    display:grid !important;
    place-items:center !important;
    line-height:1 !important;
  }

  .nav-toggle{
    font-size:0 !important;
    line-height:1 !important;
  }
  .nav-toggle::before{
    content:"";
    width:18px;
    height:14px;
    display:block;
    background:
      linear-gradient(currentColor,currentColor) 0 0/18px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 6px/18px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 12px/18px 2px no-repeat;
    border-radius:2px;
  }

  /* Mobile navigation opens as a true vertical dropdown card. */
  .site-nav{
    display:none !important;
  }
  .site-nav.open{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    position:absolute !important;
    top:calc(100% + 6px) !important;
    right:7px !important;
    left:auto !important;
    z-index:130 !important;
    width:min(245px,calc(100vw - 14px)) !important;
    margin:0 !important;
    padding:7px !important;
    gap:3px !important;
    border:1px solid rgba(139,17,24,.13) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.99) !important;
    box-shadow:0 16px 38px rgba(101,11,16,.16) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .site-nav.open a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:42px !important;
    margin:0 !important;
    padding:9px 11px !important;
    border-radius:9px !important;
    color:#650b10 !important;
    font-size:14px !important;
    font-weight:800 !important;
    text-decoration:none !important;
  }
  .site-nav.open a:hover,
  .site-nav.open a:focus-visible{
    background:#fff1f3 !important;
    color:#8b1118 !important;
    outline:none !important;
  }

  /* Search remains available through the vertical Search menu link. */
  .header-search,
  .site-nav.open + .header-search{
    display:none !important;
  }

  /* Main edition + page count: one compact premium row. */
  .reader-edition-strip{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    min-height:40px !important;
    margin:3px 0 7px !important;
    padding:6px 8px !important;
    overflow:hidden !important;
    border:1px solid rgba(139,17,24,.11) !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#fff 0%,#fff7f8 58%,#fff 100%) !important;
    box-shadow:0 5px 16px rgba(139,17,24,.07) !important;
  }

  .reader-edition-strip__title{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:5px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }
  .reader-edition-strip__title strong{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#650b10 !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
  }
  .reader-edition-strip__title > span:not(.reader-live-dot){
    flex:0 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    color:#9a565c !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }
  .reader-live-dot{
    flex:0 0 7px !important;
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    background:#b10f1a !important;
    box-shadow:0 0 0 3px rgba(177,15,26,.10) !important;
  }
  .reader-edition-strip__page{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    margin-left:auto !important;
    padding:5px 8px !important;
    border:1px solid rgba(139,17,24,.12) !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#8b1118 !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    line-height:1 !important;
    box-shadow:0 2px 7px rgba(139,17,24,.05) !important;
  }
}

@media (max-width:360px){
  .site-header .brand img{
    width:92px !important;
    max-width:92px !important;
  }
  .reader-header-date input[type="date"]{
    width:88px !important;
    max-width:94px !important;
    padding:0 3px !important;
    font-size:9.5px !important;
  }
  .reader-header-open,
  .reader-header-archive,
  .nav-toggle{
    flex-basis:32px !important;
    width:32px !important;
    min-width:32px !important;
    height:34px !important;
    min-height:34px !important;
    border-radius:9px !important;
  }
  .reader-edition-strip__title strong{font-size:11px !important;}
  .reader-edition-strip__title > span:not(.reader-live-dot){font-size:9px !important;}
  .reader-edition-strip__page{font-size:9.5px !important;padding:5px 6px !important;}
}

/* =========================================================
   v2.8.0 — mobile continuous reader + Kannada news reader
   Additive overrides only. Desktop reader/share/crop remain intact.
   ========================================================= */

.voice-quick-actions,
.voice-player{
  font-family:"Noto Sans Kannada","Nirmala UI",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.voice-quick-actions[hidden],
.voice-player[hidden]{display:none!important;}

.reader-primary-action--listen.is-active{
  background:#8b1118!important;
  border-color:#8b1118!important;
  color:#fff!important;
}

.viewer-stage.is-reading-select .clip-selection{
  pointer-events:auto!important;
  cursor:move!important;
  border:var(--viewer-border-size,2px) solid #8b1118!important;
  background:rgba(139,17,24,.07)!important;
  box-shadow:0 0 0 var(--viewer-border-size,2px) rgba(255,255,255,.96),0 0 var(--viewer-shadow-size,7px) rgba(139,17,24,.24)!important;
  touch-action:none!important;
  z-index:83!important;
}
.viewer-stage.is-reading-select .clip-handle{
  background:#fff!important;
  border:var(--viewer-border-size,2px) solid #8b1118!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
.viewer-stage.is-reading-select .article-hotspot{pointer-events:none!important;}

.voice-quick-actions{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:88;
  width:min(760px,calc(100% - 20px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px;
  border:1px solid rgba(139,17,24,.18);
  border-radius:14px;
  background:rgba(255,250,251,.98);
  box-shadow:0 10px 30px rgba(139,17,24,.13);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.voice-quick-actions__hint{
  margin-right:auto;
  color:#650b10;
  font-size:12px;
  font-weight:750;
}
.voice-quick-actions button{
  min-height:38px;
  border:1px solid rgba(139,17,24,.16);
  border-radius:10px;
  background:#fff;
  color:#8b1118;
  padding:7px 10px;
  font:750 12px/1.2 inherit;
  cursor:pointer;
}
.voice-quick-actions__primary{
  background:#8b1118!important;
  border-color:#8b1118!important;
  color:#fff!important;
}

.voice-player{
  position:fixed;
  left:50%;
  bottom:58px;
  z-index:145;
  width:min(560px,calc(100% - 18px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid rgba(139,17,24,.16);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 36px rgba(101,11,16,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.voice-player__copy{min-width:0;display:grid;gap:1px;flex:1 1 auto;}
.voice-player__eyebrow{color:#9a565c;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.04em;}
.voice-player__copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#650b10;font-size:12px;}
.voice-player__copy [data-voice-player-status]{color:#6b4a4d;font-size:10px;}
.voice-player__actions{display:flex;gap:5px;flex:0 0 auto;}
.voice-player__actions button{
  min-height:32px;
  border:1px solid rgba(139,17,24,.14);
  border-radius:9px;
  background:#fff7f8;
  color:#8b1118;
  padding:5px 8px;
  font:800 10px/1 inherit;
  cursor:pointer;
}
.voice-player__actions button:disabled{opacity:.42;cursor:default;}

@media(max-width:760px){
  html{scroll-behavior:smooth;}
  body{overflow-x:hidden!important;}

  /* Header: a little more logo presence, then compact controls aligned right. */
  .site-header .brand-wrap{
    gap:7px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  .site-header .brand{margin-right:3px!important;}
  .site-header .brand img{
    width:122px!important;
    max-width:122px!important;
  }
  .reader-header-tools{
    justify-content:flex-end!important;
    margin-left:auto!important;
    gap:4px!important;
  }
  .reader-header-date{
    flex:0 1 auto!important;
    justify-content:flex-end!important;
  }
  .reader-header-date input[type="date"]{
    width:104px!important;
    max-width:104px!important;
  }

  /* Toolbar joins directly to the paper: no blank visual band. */
  .viewer-toolbar{
    margin:0!important;
    border-radius:10px 10px 0 0!important;
    padding-bottom:4px!important;
  }
  .reader-edition-strip{margin-bottom:4px!important;}
  .ad-slot:empty{display:none!important;}

  /* Continuous mobile newspaper reading. JS supplies exact full-page height. */
  .viewer-stage{
    height:var(--mobile-stage-height,70vh)!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch;
    border-radius:0 0 10px 10px!important;
    overscroll-behavior-x:none;
  }
  .viewer-stage.is-cropping,
  .viewer-stage.is-reading-select{
    touch-action:none!important;
  }
  .paper-surface{
    top:0!important;
  }

  /* Selection actions stay visible while the page itself is tall. */
  .crop-quick-actions,
  .voice-quick-actions{
    position:fixed!important;
    left:7px!important;
    right:7px!important;
    bottom:52px!important;
    width:auto!important;
    transform:none!important;
    z-index:142!important;
    gap:5px!important;
    padding:7px!important;
    border-radius:13px!important;
  }
  .crop-quick-actions__hint,
  .voice-quick-actions__hint{
    grid-column:1 / -1!important;
    width:100%!important;
    margin:0!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
  .crop-quick-actions,
  .voice-quick-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
  }
  .crop-quick-actions[hidden],
  .voice-quick-actions[hidden]{display:none!important;}
  .crop-quick-actions__primary,
  .voice-quick-actions__primary{
    min-height:38px!important;
    width:100%!important;
  }
  .voice-quick-actions button{min-height:38px!important;padding:6px 8px!important;}

  /* Tiny transparent bottom navigation: does not cover newspaper text. */
  .mobile-page-nav{
    left:0!important;
    right:0!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    width:100%!important;
    min-height:36px!important;
    display:grid!important;
    grid-template-columns:36px 1fr 36px!important;
    align-items:center!important;
    gap:5px!important;
    padding:0 8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important;
  }
  .mobile-page-nav__button,
  .mobile-page-nav__counter{
    pointer-events:auto!important;
  }
  .mobile-page-nav__button{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(139,17,24,.13)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.68)!important;
    color:#8b1118!important;
    box-shadow:0 2px 9px rgba(101,11,16,.10)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
  }
  .mobile-page-nav__button.is-disabled{opacity:.32!important;}
  .mobile-page-nav__label{display:none!important;}
  .mobile-page-nav__arrow{font-size:17px!important;line-height:1!important;}
  .mobile-page-nav__counter{
    justify-self:center!important;
    min-width:42px!important;
    padding:4px 8px!important;
    border:1px solid rgba(139,17,24,.10)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.62)!important;
    color:#650b10!important;
    font-size:9.5px!important;
    font-weight:900!important;
    line-height:1!important;
    box-shadow:0 2px 8px rgba(101,11,16,.08)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
  }

  .voice-player{
    bottom:50px!important;
    width:calc(100% - 14px)!important;
    padding:7px 8px!important;
    gap:6px!important;
  }
  .voice-player__actions{gap:4px!important;}
  .voice-player__actions button{padding:5px 6px!important;font-size:9.5px!important;}
}

@media(max-width:360px){
  .site-header .brand img{
    width:100px!important;
    max-width:100px!important;
  }
  .reader-header-date input[type="date"]{
    width:86px!important;
    max-width:86px!important;
  }
  .reader-header-open,
  .reader-header-archive,
  .nav-toggle{
    flex-basis:31px!important;
    width:31px!important;
    min-width:31px!important;
  }
  .voice-player__copy strong{font-size:11px;}
  .voice-player__actions button{padding:5px!important;}
}

/* =========================================================
   v2.9.0 — reliable one-finger mobile scroll + visible Read
   selection + desktop header alignment. Additive only.
   ========================================================= */

/* Desktop: logo is the only left-aligned header item; all tools stay right. */
@media (min-width:761px){
  .site-header .brand-wrap{
    display:flex !important;
    align-items:center !important;
  }
  .site-header .brand{
    margin-right:auto !important;
    flex:0 0 auto !important;
  }
  .site-header .reader-header-tools{
    margin-left:0 !important;
    flex:0 0 auto !important;
  }
  .site-header .site-nav{
    margin-left:0 !important;
    flex:0 0 auto !important;
  }
  .site-header .header-search{
    flex:0 0 auto !important;
  }
}

/* Read mode must visibly show the same easy resize handles as Crop mode. */
.viewer-stage.is-reading-select .clip-selection{
  display:block !important;
  position:absolute !important;
  z-index:92 !important;
  pointer-events:auto !important;
  touch-action:none !important;
  cursor:move !important;
  border:3px solid #8b1118 !important;
  border-radius:10px !important;
  background:rgba(139,17,24,.055) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.98),
    0 0 0 9999px rgba(96,16,22,.10),
    0 8px 28px rgba(139,17,24,.20) !important;
}
.viewer-stage.is-reading-select .clip-handle{
  display:block !important;
  position:absolute !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  padding:0 !important;
  border:3px solid #8b1118 !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 3px 12px rgba(139,17,24,.28) !important;
  pointer-events:auto !important;
  touch-action:none !important;
}

@media (max-width:760px){
  /* JS handles the gesture so a single finger always scrolls the long page. */
  .viewer-stage{
    touch-action:none !important;
  }
  .viewer-stage.is-reading-select .clip-handle{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
  }
  .viewer-stage.is-reading-select .viewer-hint{
    display:none !important;
  }
}