* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; background: #f3f4f6; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; background: #111827; color: #fff; }
.topbar h1 { font-size: 18px; margin: 0; }
.btn-link { color: #fff; text-decoration: none; background: #2563eb; padding: 6px 12px; border-radius: 6px; font-size: 13px; }

#app { padding: 24px; max-width: 900px; margin: 0 auto; }
.muted { color: #9ca3af; font-size: 13px; }
.error { color: #fecaca; font-size: 13px; }

.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pub-card { background: #fff; border-radius: 10px; padding: 18px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; text-decoration: none; color: inherit; display: block; }
.pub-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); }

.edition-list { display: flex; flex-direction: column; gap: 10px; }
.edition-row { background: #fff; padding: 14px 18px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-decoration: none; color: inherit; }

.reader-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.reader-toolbar button { padding: 8px 14px; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
.page-nav { display: flex; align-items: center; gap: 10px; }

.page-view { background: #fff; padding: 12px; border-radius: 10px; text-align: center; }
.page-view canvas, .page-view img { max-width: 100%; border: 1px solid #e5e7eb; }

/* ---------- Paywall (locked page popup) ----------
   Styled as its own distinct "premium" moment rather than a plain flat
   dark box, since this is the one screen actually asking someone to pay
   - it's worth it looking intentional rather than generic. A genuine
   full-screen popup (not just an inline card sitting in the page flow,
   easy to miss or mistake for regular page content) - see #paywall-area
   further down and read.php's buildPaywallHtml(). */
.paywall-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,12,20,0.78); z-index: 220;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.paywall {
  background: linear-gradient(165deg, #1a2035 0%, #0d1120 100%);
  color: #fff; padding: 40px 36px; border-radius: 20px; text-align: center;
  width: 100%; max-width: 920px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  border-top: 3px solid var(--auth-accent, #c0121a); position: relative;
}
.paywall-close-btn {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.paywall-close-btn:hover { background: rgba(255,255,255,0.2); }
.paywall-lock-badge {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  background: linear-gradient(145deg, var(--auth-accent, #c0121a), #7a0c10);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 6px 16px rgba(192,18,26,0.4);
}
.paywall h3 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
.paywall .muted { color: #9ca3af; }

.plan-groups { margin-top: 30px; display: flex; flex-direction: column; gap: 30px; }
.plan-group-label {
  text-align: left; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--auth-accent, #c0121a); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.plan-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  padding: 22px 18px; border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.plan-card:hover { border-color: var(--auth-accent, #c0121a); background: rgba(255,255,255,0.08); transform: translateY(-3px); }
.plan-card-icon { font-size: 26px; margin-bottom: 8px; }
.plan-card-name { font-weight: 700; font-size: 15px; }
.plan-card-price { font-size: 24px; font-weight: 800; margin-top: 10px; letter-spacing: -0.3px; }
.plan-card-duration { color: #9ca3af; font-size: 13px; margin-top: 2px; }
.plan-card button {
  margin-top: 16px; width: 100%; padding: 11px 14px; border: none; border-radius: 8px;
  background: var(--auth-accent, #c0121a); color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.plan-card button:hover { background: #970e12; transform: translateY(-1px); }

@media (max-width: 700px) {
  .paywall { padding: 28px 20px; border-radius: 16px; }
  .paywall h3 { font-size: 21px; }
  .plan-list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.auth-card { background: #fff; padding: 28px; border-radius: 12px; max-width: 340px; margin: 40px auto; }
.auth-card input { width: 100%; padding: 10px; margin-top: 10px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 14px; }
.auth-card button { padding: 10px 16px; border: none; border-radius: 6px; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; }

/* ---------- Branded auth pages (login / signup) ---------- */
.auth-page-wrap { min-height: 100vh; background: #f3f4f6; display: flex; flex-direction: column; align-items: center; padding: 40px 16px; }
.auth-page-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-page-brand img { max-height: 56px; }
.auth-page-brand h1 { font-size: 22px; margin: 0; color: #111827; }
.auth-page-card {
  background: #fff; width: 100%; max-width: 420px; border-radius: 14px; padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.auth-page-card h2 { margin: 0 0 6px; font-size: 20px; color: #111827; }
.auth-page-card p.auth-subtitle { margin: 0 0 22px; color: #6b7280; font-size: 14px; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.auth-field input {
  width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 14px; box-sizing: border-box;
}
.auth-field input:focus { outline: none; border-color: var(--auth-accent, #c0121a); }
.auth-submit-btn {
  width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--auth-accent, #c0121a);
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px;
}
.auth-submit-btn:hover { filter: brightness(0.92); }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #9ca3af; font-size: 12px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }

.google-auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px; border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; color: #1f2937; font-weight: 600; font-size: 14px;
  text-decoration: none; box-sizing: border-box;
}
.google-auth-btn:hover { background: #f9fafb; }
.auth-error { background: #fef2f2; color: #b91c1c; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.auth-success { background: #f0fdf4; color: #15803d; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: #6b7280; }
.auth-switch a { color: var(--auth-accent, #c0121a); font-weight: 600; text-decoration: none; }
.auth-back-link { text-align: center; margin-top: 16px; font-size: 13px; }
.auth-back-link a { color: #6b7280; text-decoration: none; }
.g-recaptcha { margin: 6px 0 16px; }

/* ---------- User dashboard ---------- */
.dash-wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 60px; }
.dash-header { margin-bottom: 24px; }
.dash-header h2 { margin: 0 0 4px; font-size: 22px; }
.dash-header p { margin: 0; color: #6b7280; font-size: 14px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.dash-card h3 { margin: 0 0 16px; font-size: 16px; color: #111827; }
.sub-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.sub-row:last-child { border-bottom: none; }
.sub-row-name { font-weight: 600; font-size: 14px; }
.sub-row-dates { font-size: 12px; color: #6b7280; }
.sub-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; }
.sub-status.active { background: #f0fdf4; color: #15803d; }
.sub-status.expired { background: #f3f4f6; color: #6b7280; }
.plan-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }
.plan-pick-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; text-align: center; }
.plan-pick-card .plan-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.plan-pick-card .plan-price { font-size: 18px; font-weight: 800; color: var(--auth-accent, #c0121a); margin-bottom: 10px; }
.plan-pick-card button { width: 100%; padding: 8px; border: none; border-radius: 6px; background: var(--auth-accent, #c0121a); color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }

/* ---------- Edition reader page (thumbnail-sidebar layout) ---------- */
.reader-body { background: #e9e9e9; margin: 0; }

.masthead { background: #c0121a; color: #fff; padding: 14px 24px; text-align: center; }
.masthead-inner { display: flex; align-items: center; justify-content: center; gap: 10px; }
.masthead-logo { height: 32px; width: auto; }
.masthead-title { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; }

.edition-info-strip {
  background: #fff; border-bottom: 2px solid #f5a623; padding: 10px 20px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
}
.edition-bar {
  background: #fff; border-bottom: 1px solid #ddd; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.edition-bar-left { font-size: 14px; color: #333; display: flex; align-items: center; gap: 10px; }
.edition-bar-right { display: flex; align-items: center; gap: 10px; font-size: 13px; }

#page-pager { display: flex; gap: 4px; flex-wrap: wrap; }
.page-num {
  border: 1px solid #ddd; background: #fff; color: #333; padding: 4px 10px;
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.page-num.active { background: #c0121a; color: #fff; border-color: #c0121a; }

.pill-btn {
  background: #c0121a; color: #fff; text-decoration: none; padding: 6px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
}

.reader-layout { display: flex; gap: 16px; padding: 20px; max-width: 1200px; margin: 0 auto; }

.thumb-rail {
  width: 220px; flex-shrink: 0; background: #fff; border-radius: 8px; padding: 14px 10px;
  max-height: 220vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}
.thumb-item { cursor: pointer; text-align: center; padding: 6px; border-radius: 6px; border: 2px solid transparent; }
.thumb-item.active { border-color: #f5a623; background: #fff8ee; }
.thumb-item canvas, .thumb-item img { width: 100%; height: auto; border: 1px solid #e5e7eb; display: block; }
.thumb-label { font-size: 13px; color: #c0121a; margin-top: 6px; font-weight: 600; }
/* Locked thumbnails now render the real page (same as any other
   thumbnail) rather than a blank gray box, just blurred and dimmed with
   a lock badge on top - so the rail still gives a sense of what's on
   each page instead of an unhelpful empty placeholder. */
.thumb-canvas-wrap { position: relative; }
.thumb-canvas-wrap canvas, .thumb-canvas-wrap img { filter: blur(3px) brightness(0.55); }
.thumb-lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,17,32,0.15);
}
.thumb-lock-icon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--auth-accent, #c0121a);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}

.page-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.page-stage-inner { position: relative; background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.page-stage-inner canvas, .page-stage-inner img { max-width: 100%; display: block; margin: 0 auto; cursor: zoom-in; }
.page-stage-inner canvas.clip-mode-active, .page-stage-inner img.clip-mode-active { cursor: crosshair; }

/* Locked main page: back to the simple, compact behavior - the canvas
   stays hidden (not rendered at all) and the Subscribe card just sits in
   normal document flow where the page would be, sized to its own
   content rather than stretched to cover the full page area. */
#paywall-area { display: flex; justify-content: center; }


.page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 300px; color: #6b7280; font-size: 14px;
}
.spinner {
  width: 36px; height: 36px; border: 4px solid #e5e7eb; border-top-color: #c0121a;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stage-nav { display: flex; gap: 10px; }
.stage-nav button { padding: 8px 16px; border: none; border-radius: 6px; background: #c0121a; color: #fff; cursor: pointer; font-weight: 600; }

.zoom-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,20,0.55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.archive-cal-close-btn {
  position: absolute; top: -14px; right: -14px; z-index: 10;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #dc2626; color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.archive-cal-card {
  background: #fff; border-radius: 10px; padding: 20px; width: 340px; max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3); position: relative;
}
.archive-cal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.archive-cal-nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d1d5db; background: #fff;
  color: #c0121a; font-size: 16px; cursor: pointer;
}
.archive-cal-label { font-weight: 700; font-size: 15px; }
.archive-cal-selects { display: flex; gap: 6px; }
.archive-cal-select {
  padding: 4px 6px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 13px;
  font-weight: 600; background: #fff;
}
.archive-cal-weekdays, .archive-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 4px;
}
.archive-cal-weekdays span { font-size: 12px; color: #6b7280; font-weight: 600; padding-bottom: 6px; }
.archive-cal-day {
  display: block; padding: 8px 0; border-radius: 6px; font-size: 13px; color: #d1d5db;
  text-decoration: none;
}
.archive-cal-day.has-edition {
  background: #16a34a; color: #fff; font-weight: 700; cursor: pointer;
}
.archive-cal-day.has-edition:hover { background: #15803d; }
.archive-cal-hint { font-size: 12px; color: #6b7280; text-align: center; margin: 14px 0 0; }
.zoom-popup-card {
  position: relative; background: #fff; border-radius: 10px; overflow: hidden;
  width: 90vw; height: 88vh; height: 88dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.zoom-close-btn {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #dc2626; color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.zoom-scroll-area {
  flex: 1; overflow: auto; text-align: center; padding: 20px; background: #f3f4f6;
  min-height: 0; /* required for flex children to actually scroll instead of growing */
}
.zoom-canvas-wrap { position: relative; display: inline-block; min-height: 300px; }
.zoom-scroll-area canvas, .zoom-scroll-area img {
  display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.zoom-overlay-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.zoom-overlay-nav:hover { background: rgba(0,0,0,0.65); }
.zoom-overlay-nav-left { left: 14px; }
.zoom-overlay-nav-right { right: 14px; }

.zoom-page-label-overlay {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 13px; font-weight: 600;
  padding: 4px 12px; border-radius: 12px;
}

@media (max-width: 700px) {
  .zoom-modal-backdrop { padding: 6px; }
  /* height:92vh alone is the well-known mobile browser problem: vh is
     calculated as if the browser's address bar/toolbar were never
     visible, so on a phone where that chrome IS showing, 92vh ends up
     TALLER than the actual visible area, leaving the modal looking too
     short with gaps above/below it (or, on some browsers, getting cut
     off) - it doesn't track the real, currently-usable viewport height
     the way it visually should. dvh (dynamic viewport height) is the
     modern fix - it always reflects whatever's actually visible right
     now, toolbar included. Declared second on purpose: a vh value first
     keeps this working on older browsers that don't understand dvh yet,
     which then get overridden by the dvh line on anything that does. */
  .zoom-popup-card { width: 95vw; height: 92vh; height: 92dvh; }
  .zoom-scroll-area { padding: 10px; }
}


/* ---------- Site home page (publication grid, nav, decorative masthead) ---------- */
.site-body { background: #f4f4f4; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

.topline { height: 4px; background: linear-gradient(90deg, #f5a623, #e8590c); }
.license-grace-banner {
  background: #fef3c7; color: #92400e; text-align: center; padding: 10px 16px;
  font-size: 13px; font-weight: 600;
}

.muted-dark { color: #4b5563; font-size: 13px; }
.login-pill {
  background: #c0121a; color: #fff; text-decoration: none; padding: 8px 16px;
  border-radius: 4px; font-size: 13px; font-weight: 600; border: 1px solid #c0121a;
}

/* Logged-in profile chip + dropdown (reuses .site-nav-dropdown's existing
   JS - click to open, tap outside/scroll/resize to close, fixed-position
   menu so it's never clipped, all already working correctly on both
   mobile and desktop for the main nav dropdowns) */
.profile-dropdown-toggle {
  background: none; border: none; color: #fff; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 999px;
}
.profile-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.profile-name { font-size: 13px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dropdown .site-nav-caret { color: rgba(255,255,255,0.8); }
.profile-dropdown .site-nav-dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }

.lang-dropdown-toggle { font-size: 13px; }
.lang-dropdown .site-nav-dropdown-menu a.active { font-weight: 700; background: #f8f8f8; }
@media (max-width: 767px) {
  .lang-current { display: none; } /* icon-only on mobile, keeps the row compact alongside the profile/login pill */
}

/* Basic RTL support (Urdu) - covers the highest-impact layout pieces
   (text direction, nav flow, dropdown alignment) rather than mirroring
   every single component exhaustively. Applied automatically whenever
   the reader's selected language is right-to-left. */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .main-nav-bar { flex-direction: row-reverse; }
[dir="rtl"] .site-nav { flex-direction: row-reverse; }
[dir="rtl"] .main-nav-login { flex-direction: row-reverse; }
[dir="rtl"] .site-nav-dropdown-menu a { text-align: right; }
[dir="rtl"] .profile-dropdown-toggle, [dir="rtl"] .lang-dropdown-toggle { flex-direction: row-reverse; }

/* .profile-dropdown-toggle shares the .site-nav-dropdown-toggle class
   (reusing that dropdown's existing JS), but that shared rule is defined
   further down this file and would otherwise win the cascade (equal
   specificity, later source order) - squashing this button's padding
   down to 4px 2px and adding a text-link-style underline border that
   doesn't belong on a rounded avatar pill. Scoping through the
   .profile-dropdown parent gives these the specificity to actually stick,
   on both mobile and desktop. */
.profile-dropdown .site-nav-dropdown-toggle {
  padding: 4px 6px !important; border-bottom: none !important; border-radius: 999px;
}
.profile-dropdown.active .site-nav-dropdown-toggle,
.profile-dropdown.open .site-nav-dropdown-toggle {
  background: rgba(255,255,255,0.15);
}

.site-masthead {
  position: relative; background: #fff; text-align: center; padding: 30px 20px;
  overflow: hidden;
}
.site-title { display: inline-block; font-size: 36px; font-weight: 800; color: #e8590c; margin: 0; letter-spacing: 0.5px; }

/* Standard visually-hidden pattern (matches Bootstrap's own .visually-hidden) -
   present in the HTML for screen readers and search engine crawlers, but
   takes up no visible space. Used for page-level H1s on pages whose visual
   design already shows the same information elsewhere (e.g. read.php's own
   edition-info-strip), where adding a second, visible heading would just be
   redundant clutter - display:none isn't a substitute here, since some
   assistive tech and crawlers treat display:none content as not part of the
   page at all. */
.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-logo { max-height: 70px; width: auto; }
.masthead-logo-link { text-decoration: none; display: inline-block; }
.masthead-logo-link .site-title { color: #e8590c; }
.corner {
  position: absolute; top: 0; width: 220px; height: 160px;
  background: linear-gradient(135deg, #ec4899 0%, #f97316 60%, #fbbf24 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.corner-left { left: 0; }
.corner-right { right: 0; transform: scaleX(-1); }

/* ---------- Combined nav + login bar: nav on the left, login on the right ---------- */
.main-nav-bar {
  background: #d3141c; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; flex-wrap: wrap; gap: 10px;
}
.site-nav {
  background: none; display: flex; align-items: center; gap: 28px;
  padding: 14px 0; flex-wrap: wrap;
}
.site-nav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 4px 2px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 4px;
}
.site-nav a.active, .site-nav a:hover { border-bottom-color: #fbbf24; }
.main-nav-login { display: flex; align-items: center; gap: 10px; padding: 10px 0; }

/* ---------- Dynamic navbar dropdown (Theme Setup -> Navbar Setup) ---------- */
.site-nav-dropdown { position: relative; }
.site-nav-dropdown-toggle {
  background: none; border: none; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
  padding: 4px 2px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
}
.site-nav-dropdown.active > .site-nav-dropdown-toggle { border-bottom-color: #fbbf24; }
.site-nav-caret { font-size: 10px; }
.site-nav-dropdown-menu {
  display: none; position: fixed; min-width: 180px;
  background: #fff; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); overflow: hidden; z-index: 200;
}
.site-nav-dropdown.open .site-nav-dropdown-menu { display: block; }
.site-nav-dropdown-menu a {
  display: block; color: #333 !important; padding: 10px 16px; font-size: 14px; font-weight: 500;
  border-bottom: 1px solid #f0f0f0 !important;
}
.site-nav-dropdown-menu a:last-child { border-bottom: none !important; }
.site-nav-dropdown-menu a:hover, .site-nav-dropdown-menu a.active { background: #f8f8f8; }

@media (max-width: 767px) {
  .site-nav-dropdown-menu { min-width: 200px; max-width: calc(100vw - 24px); }
  .site-nav-dropdown-menu a { padding: 13px 16px; font-size: 15px; }
  .profile-dropdown .site-nav-dropdown-menu { min-width: 170px; }
}

.mobile-nav-toggle {
  display: none; background: none; border: none; color: #1a1a1a; font-size: 22px;
  cursor: pointer; padding: 10px 4px;
}

.site-main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 50px; flex: 1 0 auto; width: 100%; }

.site-footer {
  background: #c0121a; color: #fff; text-align: center; padding: 14px 20px;
  font-size: 13px;
}
.site-footer p { margin: 0; }
.footer-social { display: flex; justify-content: center; gap: 14px; margin-bottom: 8px; }
.footer-social a { color: #fff; text-decoration: none; font-size: 12px; opacity: 0.9; border-bottom: 1px solid rgba(255,255,255,0.4); }
.footer-social a:hover { opacity: 1; }
.footer-credit { margin-top: 4px !important; font-size: 11px; opacity: 0.8; }

.ad-slot { text-align: center; padding: 10px 20px; background: #fafafa; }
.ad-slot img { max-width: 100%; height: auto; }

/* ---------- Homepage templates (Company Website mode) ---------- */
.home-tpl-hero {
  color: #fff; text-align: center; padding: 80px 24px; border-radius: 0 0 24px 24px;
}
.home-tpl-hero h1 { font-size: 40px; margin: 0 0 12px; font-weight: 800; }
.home-tpl-hero p { font-size: 18px; opacity: 0.9; margin: 0 0 28px; }
.home-tpl-cta {
  display: inline-block; background: #fff; color: #111827 !important; text-decoration: none;
  padding: 14px 32px; border-radius: 999px; font-weight: 700; font-size: 15px;
}
.home-tpl-cta:hover { opacity: 0.9; }
.home-tpl-section { max-width: 900px; margin: 0 auto; padding: 50px 24px; }
.home-tpl-section h2 { font-size: 26px; margin: 0 0 16px; color: #111827; }
.home-tpl-section p { font-size: 15px; line-height: 1.7; color: #374151; }
.home-tpl-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 10px; }
.home-tpl-contact-grid strong { display: block; color: #111827; margin-bottom: 4px; }
.home-tpl-contact-grid p { margin: 0; color: #6b7280; }

.home-tpl-modern-hero { text-align: center; padding: 70px 24px 50px; }
.home-tpl-modern-logo { max-height: 70px; margin-bottom: 20px; }
.home-tpl-modern-hero h1 { font-size: 36px; margin: 0 0 10px; color: #111827; font-weight: 800; }
.home-tpl-modern-hero p { font-size: 17px; color: #6b7280; margin: 0 0 26px; }
.home-tpl-modern-hero .home-tpl-cta { color: #fff !important; }

@media (max-width: 600px) {
  .home-tpl-hero { padding: 50px 20px; }
  .home-tpl-hero h1 { font-size: 28px; }
  .home-tpl-hero p { font-size: 15px; }
}

/* ---------- Professional template: slider + extra sections ---------- */
.home-tpl-slider {
  position: relative; color: #fff; text-align: center; padding: 100px 24px 70px;
  border-radius: 0 0 24px 24px; min-height: 320px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.home-tpl-slides { position: relative; width: 100%; max-width: 700px; min-height: 130px; }
.home-tpl-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.home-tpl-slide.active { opacity: 1; pointer-events: auto; position: relative; }
.home-tpl-slide h1 { font-size: 38px; margin: 0 0 12px; font-weight: 800; }
.home-tpl-slide p { font-size: 17px; opacity: 0.9; margin: 0; }
.home-tpl-slider .home-tpl-cta { margin-top: 28px; }
.home-tpl-slider-dots { display: flex; gap: 8px; margin-top: 24px; }
.home-tpl-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.home-tpl-dot.active { background: #fff; }

.home-tpl-stats {
  display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; padding: 36px 24px;
  background: #fff; text-align: center;
}
.home-tpl-stats strong { display: block; font-size: 32px; font-weight: 800; color: #111827; }
.home-tpl-stats span { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }

.home-tpl-pubs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.home-tpl-pub-card {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 10px;
  background: #f9fafb; text-decoration: none; border: 1px solid #eee; transition: box-shadow 0.15s;
}
.home-tpl-pub-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.home-tpl-pub-card span { color: #111827; font-weight: 700; font-size: 15px; }
.home-tpl-pub-card small { color: #6b7280; font-size: 12px; }

.home-tpl-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.home-tpl-feature-card { text-align: center; padding: 24px 16px; }
.home-tpl-feature-card i { font-size: 32px; color: var(--auth-accent, #c0121a); margin-bottom: 12px; display: block; }
.home-tpl-feature-card h3 { font-size: 17px; margin: 0 0 8px; color: #111827; }
.home-tpl-feature-card p { font-size: 14px; color: #6b7280; margin: 0; }

@media (max-width: 600px) {
  .home-tpl-slider { padding: 70px 20px 50px; }
  .home-tpl-slide h1 { font-size: 26px; }
  .home-tpl-stats { gap: 30px; }
  .home-tpl-stats strong { font-size: 24px; }
}

/* ---------- Mobile responsiveness ---------- */

.section-heading {
  text-align: center; font-size: 20px; color: #444; margin: 10px 0 24px; position: relative;
}
.section-heading::after {
  content: ''; display: block; width: 60px; height: 3px; background: #e8590c;
  margin: 8px auto 0;
}

.pub-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 300px)); gap: 20px; justify-content: center; }
.pub-thumb-card {
  background: #fff; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1); display: block; border-bottom: 3px solid #e8590c;
  transition: transform 0.15s ease;
}
.pub-thumb-card:hover { transform: translateY(-3px); }
.pub-thumb-frame { background: #f3f4f6; min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; }
.pub-thumb-frame canvas { max-width: 100%; height: auto; }
.pub-thumb-frame img { max-width: 100%; height: auto; display: block; }
.pub-thumb-label { text-align: center; padding: 12px; color: #c0121a; font-weight: 700; font-size: 15px; }
.pub-thumb-sublabel { text-align: center; padding: 0 12px 12px; margin-top: -8px; color: #6b7280; font-size: 12px; }
.pub-thumb-empty .pub-thumb-frame { color: #9ca3af; }

/* Full-width edition feed - each edition's whole front page shown large
   and readable. Single column on mobile (matches the reference image -
   one edition per row, divider line between each), 3 per row on desktop
   (see the min-width media query near the bottom of this file) - a
   fixed 3-column count there, not auto-fill/auto-fit, since the request
   was specifically for 3 per row, not however many happen to fit. */
.pub-feed-list { max-width: 620px; margin: 0 auto; }
.pub-feed-item {
  display: block; text-decoration: none; color: inherit;
  margin-bottom: 28px; padding-bottom: 28px;
  border-bottom: 3px solid #e8590c;
}
.pub-feed-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pub-feed-frame {
  background: #f3f4f6; text-align: center; overflow: hidden;
  border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 10px;
}
.pub-feed-frame img,
.pub-feed-frame canvas { max-width: 100%; height: auto; display: inline-block; border-radius: 4px; }
/* Two-line label: the edition TYPE (Main Edition, Sports Edition, etc.)
   is the more meaningful distinction for a reader browsing several
   sections of the same city's paper, so it's the bold, prominent line -
   city name/date/page count are genuinely useful but secondary detail,
   not the primary thing being chosen between. */
.pub-feed-label { text-align: center; padding: 16px 12px 2px; color: #c0121a; font-weight: 700; font-size: 19px; }
.pub-feed-sublabel { text-align: center; padding: 0 12px; color: #6b7280; font-size: 14px; }

/* Every other breakpoint in this file is max-width (desktop-first,
   mobile overrides) - this one is min-width on purpose, since the feed
   rules above are themselves mobile-first (single column is the base/
   default state, desktop is the override switching it to 3 columns). */
@media (min-width: 992px) {
  .pub-feed-list {
    max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  /* The bottom-border divider works well for a single vertical column
     (matches the reference image exactly), but wouldn't line up neatly
     across a grid row where cards can differ in height - grid gap
     already provides clean separation there instead. */
  .pub-feed-item { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
}

.back-link { display: inline-block; margin-bottom: 14px; color: #c0121a; text-decoration: none; font-size: 13px; }

.static-page { background: #fff; border-radius: 8px; padding: 24px; max-width: 800px; margin: 0 auto; line-height: 1.6; }

.archive-form { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.archive-form select, .archive-form input { padding: 8px 10px; border-radius: 6px; border: 1px solid #d1d5db; }

.archive-layout {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; max-width: 900px; margin: 0 auto;
}
.archive-panel {
  background: #fff; border-radius: 10px; padding: 20px; flex: 1; min-width: 300px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.archive-form-v2 { display: flex; flex-direction: column; gap: 4px; }
.archive-form-label { font-size: 12px; font-weight: 600; color: #6b7280; margin-top: 8px; }
.archive-select-v2 { padding: 8px 10px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 14px; }
.archive-result {
  flex: 0 0 230px; background: #fff; border-radius: 10px; padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; justify-content: center;
}
.archive-result-grid {
  flex: 1 1 460px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px; align-items: start; justify-content: normal;
}
.archive-result-grid p.muted { grid-column: 1 / -1; text-align: center; }

@media (max-width: 700px) {
  .archive-layout { flex-direction: column; }
  .archive-panel { width: 100%; }
  .archive-result { flex: 1 1 auto; width: 100%; }
}
.pill-btn-inline { background: #c0121a; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }

/* ---------- Reader toolbar additions: dropdown, fast-forward, clip, archive ---------- */
.mobile-toolbar-arrow {
  display: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d1d5db;
  background: #fff; color: #c0121a; font-size: 16px; cursor: pointer; align-items: center; justify-content: center;
}
.page-dropdown {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 14px;
  min-width: 120px; background: #fff;
}
.edition-label {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #1a1a1a;
}
.pdf-download-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff; font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 6px; text-decoration: none; margin-left: 8px;
}
.pdf-download-btn:hover { background: #b91c1c; color: #fff; }

.ff-btn {
  border: none; background: #c0121a; color: #fff; padding: 6px 10px;
  border-radius: 4px; cursor: pointer; font-weight: 700; margin-left: 6px;
}

.clip-btn {
  background: #f5871f; color: #fff; border: none; padding: 8px 16px;
  border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.clip-btn.active { background: #d9660c; }

.archive-btn {
  background: #c0121a; color: #fff; text-decoration: none; padding: 8px 16px;
  border-radius: 4px; font-weight: 600; font-size: 13px; display: inline-block;
}

.night-mode-btn {
  background: #374151; color: #fff; border: none; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.night-mode-btn:hover { background: #1f2937; }

/* Night mode: dims the page chrome and the actual PDF canvas itself
   (which is otherwise just a bright white rendered image no CSS filter on
   the page background alone could touch) for more comfortable low-light
   reading, not just a darker toolbar around a still-blinding white page.

   Deliberately NOT using filter:invert() on the canvas - the canvas is
   one flat rendered image with both text AND photos baked into it
   together, so any invert that makes text read light-on-dark also
   inverts every photo on the page into a literal photographic negative
   (dark skin turns light, light backgrounds turn dark, colors go wrong)
   with no way to invert one without the other. brightness()+contrast()
   alone just dims the page evenly instead - the page itself stays a
   normal (if dimmer) light page rather than a true dark background, but
   nothing on it - text or photos - gets visually corrupted. */
body.night-mode { background: #15181c; color: #d1d5db; }
body.night-mode .edition-info-strip, body.night-mode .edition-bar,
body.night-mode .thumb-rail {
  background: #1f2328 !important; color: #d1d5db;
}
/* The edition name/date badge and page counter default to near-black
   text (meant for the normal white strip) - without this override that
   text is still near-black against the dark strip above, i.e.
   effectively invisible. */
body.night-mode .edition-label,
body.night-mode .edition-bar-left,
body.night-mode .edition-info-strip,
body.night-mode .edition-bar {
  color: #e5e7eb;
}
body.night-mode #pdf-canvas, body.night-mode #zoom-canvas, body.night-mode #page-image, body.night-mode #zoom-image {
  filter: brightness(0.85) contrast(1.05);
}
body.night-mode .night-mode-btn { background: #f5871f; }

.clip-overlay {
  position: absolute; border: 2px dashed #f5871f;
}
.clip-overlay-movable {
  pointer-events: auto; cursor: move;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); /* dims everything outside the box without extra overlay elements */
}

.clip-handle {
  position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #f5871f;
  border-radius: 2px; pointer-events: auto; /* overlay disables pointer-events - handles must re-enable it to be clickable/draggable */
}
.clip-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.clip-handle-n { top: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.clip-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.clip-handle-e { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }
.clip-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.clip-handle-s { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.clip-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.clip-handle-w { top: calc(50% - 6px); left: -6px; cursor: ew-resize; }

.area-hotspot {
  position: absolute; display: block; z-index: 5;
}
.area-hotspot:hover {
  background: rgba(37, 99, 235, 0.12);
  outline: 1px dashed rgba(37, 99, 235, 0.5);
}

.area-hotspot-continue {
  border: none; padding: 0; cursor: pointer; background: rgba(192, 18, 26, 0.06);
  display: flex; align-items: flex-end; justify-content: center;
}
.area-hotspot-continue:hover { background: rgba(192, 18, 26, 0.14); outline: 1px dashed rgba(192, 18, 26, 0.6); }
.continue-label {
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 4px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.clip-toolbar {
  position: absolute; display: flex; gap: 6px; margin-top: 4px; z-index: 20;
}
.clip-toolbar button {
  border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px;
  font-weight: 600; cursor: pointer;
}
.clip-toolbar-share { background: #16a34a; color: #fff; }
.clip-toolbar-cancel { background: #dc2626; color: #fff; }

.share-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.share-modal { background: #fff; border-radius: 10px; width: 360px; max-width: 92vw; overflow: hidden; }
.share-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 16px;
}
.share-modal-x { border: none; background: none; font-size: 20px; cursor: pointer; color: #6b7280; }
.share-modal-body { padding: 18px; }

.share-preview-frame {
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px;
  text-align: center; margin-bottom: 14px;
}
.share-preview-caption { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.share-preview-frame img { max-width: 100%; max-height: 220px; }

#share-url-input {
  width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;
  font-size: 13px; margin-bottom: 14px; color: #2563eb; text-align: center;
}

.share-icon-row { display: flex; gap: 8px; margin-bottom: 14px; }
.share-icon {
  flex: 1; text-align: center; padding: 10px 4px; border-radius: 6px; font-size: 12px;
  font-weight: 700; color: #fff; text-decoration: none;
}
.share-icon.fb { background: #1877f2; }
.share-icon.tw { background: #1da1f2; }
.share-icon.wa { background: #25d366; }
.share-icon.em { background: #6b7280; }

.share-modal-actions { display: flex; gap: 10px; }
.share-action-btn {
  flex: 1; text-align: center; padding: 10px; border-radius: 6px; border: none;
  background: #374151; color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 13px;
}

/* ---------- Public clip page ---------- */
.clip-page-wrap { max-width: 480px; margin: 30px auto; text-align: center; padding: 0 16px 40px; }
.clip-branded-header { margin-bottom: 16px; }
.clip-pub-name { font-size: 24px; font-weight: 800; color: #e8590c; }
.clip-edition-meta { font-size: 13px; color: #6b7280; margin-top: 4px; }
.clip-image-frame {
  background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  margin-bottom: 18px;
}
.clip-image-frame img { max-width: 100%; }
.clip-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.share-row { display: flex; gap: 8px; justify-content: center; }
.share-row .share-icon { flex: 0 0 auto; padding: 10px 16px; }

@media (max-width: 760px) {
  .reader-layout { flex-direction: column; padding-bottom: 70px; /* room for the fixed bottom bar */ }
  .site-footer { margin-bottom: 60px; /* the footer is outside reader-layout, needs its own clearance from the fixed bar */ }

  /* Thumbnail rail moves to the bottom on mobile instead of appearing above the main page */
  .page-stage { order: 1; }
  .thumb-rail { order: 2; width: 100%; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .thumb-item { min-width: 70px; }

  /* Masthead: logo centered, no hamburger - nav now lives directly in the green bar below */
  .site-masthead {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 14px; text-align: center;
  }
  .site-masthead .corner { display: none; }
  .site-logo { max-height: 52px; }
  .site-title { font-size: 20px; }
  .mobile-nav-toggle { display: none !important; }

  .main-nav-login .profile-name { display: none; } /* name hidden on mobile - just the avatar + dropdown, keeps the row compact */
  .main-nav-login .login-pill { padding: 6px 12px; font-size: 12px; }

  /* Compact info strip stays at the top, right under the masthead */
  .edition-info-strip { padding: 8px 12px; font-size: 13px; gap: 8px; }
  .edition-label { font-size: 13px; }

  /* Page controls + actions become a slim fixed bar pinned to the bottom
     of the screen, like a native app's bottom toolbar */
  .edition-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 8px 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  .edition-bar-left { gap: 6px; }
  .edition-bar-right { gap: 6px; flex-wrap: nowrap; }

  /* Replace the numbered pager + fast-forward with two simple arrows */
  #page-pager, #ff-btn { display: none; }
  .mobile-toolbar-arrow { display: flex; }

  /* Icon-only action buttons - hide the text label, keep the icon, square shape */
  .edition-bar-right .clip-btn, .edition-bar-right .archive-btn, .edition-bar-right .pdf-download-btn {
    width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
    font-size: 17px;
  }
  .edition-bar-right .btn-label { display: none; }

  .masthead-title { font-size: 16px; }

  /* Nav links now shown directly in the green bar - horizontally scrollable
     if they don't all fit, with Login pinned to the right */
  .main-nav-bar { position: relative; flex-wrap: nowrap; padding: 0 12px; }
  .site-nav {
    display: flex !important; position: static; flex-direction: row; flex-wrap: nowrap;
    gap: 18px; overflow-x: auto; overflow-y: hidden; background: none; padding: 12px 0;
    box-shadow: none; border-radius: 0; min-width: 0; flex: 1;
  }
  .site-nav a {
    padding: 4px 2px; border-bottom: 2px solid transparent; width: auto; white-space: nowrap;
    color: #fff; font-size: 13px; font-weight: 600;
  }
  .site-nav a:last-child { border-bottom: 2px solid transparent; }
  .site-nav a.active, .site-nav a:hover { background: none; border-bottom-color: #fbbf24; color: #fff; }
  .site-nav-dropdown { flex-shrink: 0; }
  .site-nav-dropdown-toggle { font-size: 13px; padding: 4px 2px; white-space: nowrap; }
  .main-nav-login { flex-shrink: 0; margin-left: 10px; }

  .page-view canvas { max-width: 100%; }
}

@media (max-width: 700px) {
  .site-title { font-size: 22px; }
  .site-logo { max-height: 40px; }
  .site-masthead { padding: 20px 12px; }
  .corner { width: 100px; height: 70px; }
  .site-nav { gap: 14px; padding: 10px 12px; }
  .site-nav a { font-size: 12px; }
  .topbar-strip { padding: 8px 12px; flex-wrap: wrap; }
  .site-main { padding: 16px 12px 30px; }
  .pub-card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 220px)); gap: 10px; justify-content: center; }
  .pub-thumb-frame { min-height: 160px; }
  .pub-feed-list { max-width: 100%; }
}