/* Mobile magazine + overlay chrome. Phone only. Does not touch Press
   lockup / rail / dock, and does not change desktop (>= 960px). */

@media (max-width: 959px) {
  /* ============================================================
     MAGAZINE — kill leftover 200px rail, hide side-nav, app tabs
     ============================================================ */
  html[data-layout="magazine"],
  html[data-layout="magazine"] body {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: var(--mag-bg, var(--ws-bg, #0E0F12)) !important;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
  }

  html[data-layout="magazine"] body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  html[data-layout="magazine"] main,
  html[data-layout="magazine"] #main-content,
  html[data-layout="magazine"] .pane,
  html[data-layout="magazine"] #frontpage,
  html[data-layout="magazine"] #frontpage.press-sheet-wrap,
  html[data-layout="magazine"] header.press-mast,
  html[data-layout="magazine"] header.ws-header,
  html[data-layout="magazine"] .ws-header {
    padding-left: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-layout="magazine"] #side-nav,
  html[data-layout="magazine"] aside#side-nav,
  html[data-layout="magazine"] aside#side-nav.flex-col {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  html[data-layout="magazine"] .mobile-bottom-nav,
  html[data-layout="magazine"] nav.mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 45;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    background: var(--mag-surface, var(--ws-surface, #16181D)) !important;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
    border: 0 !important;
    border-top: 1px solid var(--mag-line, var(--ws-line, #2A2D34)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-layout="magazine"] .mobile-bottom-nav button,
  html[data-layout="magazine"] .mobile-bottom-nav a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mag-mute, var(--ws-muted, #9CA0AB)) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  html[data-layout="magazine"] .mobile-bottom-nav button .icn,
  html[data-layout="magazine"] .mobile-bottom-nav a .icn {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
  }

  html[data-layout="magazine"] .mobile-bottom-nav button.active,
  html[data-layout="magazine"] .mobile-bottom-nav a.active {
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
    background: transparent !important;
  }

  html[data-layout="magazine"] .mobile-bottom-nav button.active::after,
  html[data-layout="magazine"] .mobile-bottom-nav a.active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: var(--mag-accent, var(--ws-accent, #C8302C)) !important;
    display: block !important;
  }

  /* ============================================================
     MAGAZINE HEADER — compact strip, search stays usable
     ============================================================ */
  html[data-layout="magazine"] header.press-mast,
  html[data-layout="magazine"] header.ws-header,
  html[data-layout="magazine"] .ws-header {
    position: sticky !important;
    top: 0;
    z-index: 40;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: var(--mag-bg, var(--ws-bg, #0E0F12)) !important;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mag-line, var(--ws-line, #2A2D34)) !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  html[data-layout="magazine"] .press-flag,
  html[data-layout="magazine"] header.press-mast > div:first-child,
  html[data-layout="magazine"] .ws-header > div:first-child {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "mark search tools" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    background: none !important;
    background-image: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
  }

  html[data-layout="magazine"] .press-mark,
  html[data-layout="magazine"] .ws-brand {
    grid-area: mark;
    min-width: 0;
    gap: 0 !important;
  }

  html[data-layout="magazine"] .press-mark img,
  html[data-layout="magazine"] .ws-brand img {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-color: var(--mag-line, var(--ws-line, #2A2D34)) !important;
    background: var(--mag-surface, var(--ws-surface, #16181D)) !important;
  }

  html[data-layout="magazine"] .press-word,
  html[data-layout="magazine"] .press-word-we,
  html[data-layout="magazine"] .ws-brand-name.press-word-we,
  html[data-layout="magazine"] .press-word-deck,
  html[data-layout="magazine"] .press-flag-folio {
    display: none !important;
  }

  html[data-layout="magazine"] .press-search,
  html[data-layout="magazine"] #search-form.press-search,
  html[data-layout="magazine"] #search-form {
    grid-area: search;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html[data-layout="magazine"] #search-input,
  html[data-layout="magazine"] .search-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 36px 8px 34px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    background: var(--mag-surface, var(--ws-surface, #16181D)) !important;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
    border: 1px solid var(--mag-line, var(--ws-line, #2A2D34)) !important;
  }

  html[data-layout="magazine"] #search-input::placeholder {
    color: var(--mag-mute, var(--ws-muted, #9CA0AB)) !important;
  }

  html[data-layout="magazine"] .press-tools {
    grid-area: tools;
    display: flex !important;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
  }

  html[data-layout="magazine"] #wall-btn,
  html[data-layout="magazine"] #wall-btn-mobile,
  html[data-layout="magazine"] #donate-btn,
  html[data-layout="magazine"] #donate-btn-mobile,
  html[data-layout="magazine"] #install-btn,
  html[data-layout="magazine"] #ws-balance-pill,
  html[data-layout="magazine"] .ws-globe {
    display: none !important;
  }

  html[data-layout="magazine"] .press-tools #bell-btn,
  html[data-layout="magazine"] .press-tools #refresh-btn,
  html[data-layout="magazine"] .press-tools #settings-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
    background: transparent !important;
  }

  /* ============================================================
     MAGAZINE MASTHEAD — not a wall of type
     ============================================================ */
  html[data-layout="magazine"] #home-masthead {
    display: block !important;
    overflow: hidden;
    border-bottom: 1px solid var(--mag-line, var(--ws-line, #2A2D34));
  }

  html[data-layout="magazine"] #home-masthead .max-w-6xl {
    padding: 10px 16px 12px !important;
    max-width: 100% !important;
  }

  html[data-layout="magazine"] #home-masthead .masthead-rule {
    margin: 0 0 6px !important;
    padding: 4px 0 !important;
    font-size: 10px !important;
    letter-spacing: .12em;
  }

  html[data-layout="magazine"] #home-masthead .masthead-title {
    display: block !important;
    margin: 0 !important;
  }

  html[data-layout="magazine"] #home-masthead .masthead-brand {
    display: block !important;
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em;
  }

  html[data-layout="magazine"] #home-masthead .masthead-deck {
    display: block !important;
    margin-top: 2px !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    color: var(--mag-mute, var(--ws-muted, #9CA0AB)) !important;
  }

  html[data-layout="magazine"] #home-masthead .masthead-sub,
  html[data-layout="magazine"] #home-masthead .masthead-actions,
  html[data-layout="magazine"] #home-masthead .ws-pulse,
  html[data-layout="magazine"] #press-fountain {
    display: none !important;
  }

  html.returning[data-layout="magazine"] #home-masthead .max-w-6xl {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ============================================================
     MAGAZINE CARDS — one column, wrap titles, no giant thumbs
     ============================================================ */
  html[data-layout="magazine"] #frontpage,
  html[data-layout="magazine"] #frontpage.press-sheet-wrap {
    padding: 12px 16px 24px !important;
    max-width: 100% !important;
  }

  html[data-layout="magazine"] .edition-nav-inner,
  html[data-layout="magazine"] .frontpage-section,
  html[data-layout="magazine"] .latest-section,
  html[data-layout="magazine"] .feed-toolbar,
  html[data-layout="magazine"] #editors-note-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-layout="magazine"] #frontpage-grid,
  html[data-layout="magazine"] #frontpage-grid.broadsheet-form,
  html[data-layout="magazine"] #frontpage-grid.press-form,
  html[data-layout="magazine"] #frontpage-grid.feed-magazine,
  html[data-layout="magazine"] #feed-grid,
  html[data-layout="magazine"] #feed-grid.feed-magazine,
  html[data-layout="magazine"] #news-grid,
  html[data-layout="magazine"] #saved-grid,
  html[data-layout="magazine"] #ssr-frontpage-fallback.feed-magazine,
  html[data-layout="magazine"] .feed-magazine {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    row-gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
  }

  html[data-layout="magazine"] .feed-magazine > .hero,
  html[data-layout="magazine"] .feed-magazine > .feature,
  html[data-layout="magazine"] .feed-magazine > .standard,
  html[data-layout="magazine"] .feed-magazine > .front-feature,
  html[data-layout="magazine"] #frontpage-grid > *,
  html[data-layout="magazine"] #feed-grid > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-layout="magazine"] #frontpage-grid .ed-card,
  html[data-layout="magazine"] #feed-grid .ed-card,
  html[data-layout="magazine"] #news-grid .ed-card,
  html[data-layout="magazine"] #saved-grid .ed-card,
  html[data-layout="magazine"] #ssr-frontpage-fallback .ed-card,
  html[data-layout="magazine"] .feed-magazine .ed-card {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb body"
      "strip strip" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    margin: 0 !important;
    background: var(--mag-surface, var(--ws-surface, #16181D)) !important;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
    border: 1px solid var(--mag-line, var(--ws-line, #2A2D34)) !important;
    border-radius: 8px !important;
    overflow: hidden;
  }

  html[data-layout="magazine"] .ed-card > .story-media-link,
  html[data-layout="magazine"] .ed-card > .thumb-wrap-outer,
  html[data-layout="magazine"] .ed-card > .thumb-wrap {
    grid-area: thumb;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  html[data-layout="magazine"] .ed-card .ed-card-body {
    grid-area: body;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-layout="magazine"] .ed-card > .react-strip {
    grid-area: strip;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  html[data-layout="magazine"] .ed-card .thumb-wrap,
  html[data-layout="magazine"] .ed-card .thumb {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    overflow: hidden;
    background: var(--mag-surface, var(--ws-surface-raised, #1A1B22)) !important;
  }

  html[data-layout="magazine"] .ed-card .thumb-wrap img,
  html[data-layout="magazine"] .ed-card .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html[data-layout="magazine"] .ed-card.hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb"
      "body"
      "strip" !important;
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 0 8px !important;
  }

  html[data-layout="magazine"] .ed-card.hero > .story-media-link,
  html[data-layout="magazine"] .ed-card.hero > .thumb-wrap-outer,
  html[data-layout="magazine"] .ed-card.hero > .thumb-wrap,
  html[data-layout="magazine"] .ed-card.hero .thumb-wrap,
  html[data-layout="magazine"] .ed-card.hero .thumb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 160px !important;
    aspect-ratio: 16 / 9 !important;
  }

  html[data-layout="magazine"] .ed-title,
  html[data-layout="magazine"] .ed-card .ed-title,
  html[data-layout="magazine"] .ed-card h2,
  html[data-layout="magazine"] .ed-card h3 {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    writing-mode: horizontal-tb !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
    margin-top: 4px !important;
    color: var(--mag-text, var(--ws-text, #ECEDEF)) !important;
  }

  html[data-layout="magazine"] .ed-card.hero .ed-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  html[data-layout="magazine"] .ed-excerpt,
  html[data-layout="magazine"] .ed-meta,
  html[data-layout="magazine"] .ed-source {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    color: var(--mag-mute, var(--ws-muted, #9CA0AB)) !important;
  }

  html[data-layout="magazine"] .ed-card.standard .ed-excerpt,
  html[data-layout="magazine"] .ed-card.front-feature .ed-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px !important;
  }

  /* Containment without locking the document scroller (iOS). */
  html[data-layout="magazine"] .ed-card,
  html[data-layout="magazine"] .ed-card-body,
  html[data-layout="magazine"] .react-strip,
  html[data-layout="magazine"] .edition-nav {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ============================================================
     SETTINGS — full-width sheet, 16px gutters, 44px taps
     ============================================================ */
  #settings-drawer {
    --set-bg: var(--ws-surface, #16181D);
    --set-ink: var(--ws-text, #ECEDEF);
    --set-mute: var(--ws-muted, #9CA0AB);
    --set-line: var(--ws-line, #2A2D34);
    --set-accent: var(--ws-accent, #C8302C);
    --set-raised: var(--ws-surface-raised, #1A1B22);
  }

  #settings-drawer .set-panel,
  #settings-drawer > div.set-panel,
  #settings-drawer > div:last-child {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(82dvh, 640px) !important;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: var(--set-bg) !important;
    color: var(--set-ink) !important;
    border: 0 !important;
    border-top: 1px solid var(--set-line) !important;
    box-sizing: border-box !important;
  }

  #settings-drawer .set-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 10px;
    padding: 0 0 8px;
    background: var(--set-bg);
  }

  #settings-drawer #settings-title {
    font-size: 15px !important;
  }

  #settings-theme,
  #layout-picks {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #settings-drawer .theme-toggle,
  #settings-drawer .theme-btn,
  #settings-drawer [data-layout-pick] {
    min-height: 34px !important;
    width: auto !important;
  }

  #settings-drawer .cat-toggle {
    min-height: 28px !important;
    padding: 4px 9px !important;
  }

  #settings-drawer #settings-reset {
    min-height: 0 !important;
    padding: 0 !important;
  }

  #settings-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #settings-drawer .set-foot {
    padding-bottom: 8px;
    overflow-wrap: anywhere;
  }

  #settings-drawer .set-block,
  #settings-drawer .set-help,
  #settings-drawer #settings-account {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* ============================================================
     COMMENTS — full-width sheet, composer not clipped
     ============================================================ */
  #comments-drawer .drawer-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-left: 0 !important;
    background: var(--ws-surface, #16181D) !important;
    color: var(--ws-text, #ECEDEF) !important;
    padding-bottom: 0 !important;
  }

  #comments-drawer [data-close],
  #comments-drawer #gif-close,
  #comments-drawer .sort-btn,
  #comments-drawer #gif-toggle,
  #comments-drawer #drawer-form button {
    min-width: 44px;
    min-height: 44px;
  }

  #comments-drawer .sort-btn {
    padding: 8px 10px;
  }

  #comments-drawer #drawer-thread {
    min-width: 0;
    overflow-x: hidden;
  }

  #comments-drawer .comment,
  #comments-drawer .comment.reply,
  #comments-drawer .comment.reply.depth-2,
  #comments-drawer .comment.reply.depth-3 {
    margin-left: 0 !important;
    padding-left: 16px !important;
    max-width: 100%;
    min-width: 0;
  }

  #comments-drawer .comment.reply {
    border-left-width: 2px;
    padding-left: 14px !important;
  }

  #comments-drawer #drawer-form {
    flex-shrink: 0;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px) + env(keyboard-inset-height, 0px)) !important;
    background: var(--ws-surface, #16181D);
  }

  #comments-drawer #drawer-input,
  #comments-drawer #gif-search {
    min-width: 0 !important;
    font-size: 16px !important;
    min-height: 44px;
  }

  #comments-drawer .gif-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ============================================================
     SHARE — bottom sheet, not a centered desktop card
     ============================================================ */
  #share-sheet > div:last-child {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid var(--ws-line, #2A2D34) !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--ws-surface, #16181D) !important;
    color: var(--ws-text, #ECEDEF) !important;
    box-sizing: border-box !important;
    max-height: min(86dvh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #share-sheet [data-share-close] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #share-sheet .grid,
  #share-sheet .grid.grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }

  #share-sheet .share-tile {
    min-width: 0 !important;
    min-height: 64px;
    padding: 8px 4px;
    overflow: hidden;
  }

  #share-sheet #share-target-title,
  #share-sheet #share-target-url {
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  /* ============================================================
     NOTIFICATIONS — full-bleed bottom sheet
     ============================================================ */
  #notif-panel {
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(82dvh, 640px) !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: var(--ws-surface, #16181D) !important;
    color: var(--ws-text, #ECEDEF) !important;
    box-sizing: border-box !important;
  }

  #notif-panel .head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
  }

  #notif-panel .head .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  #notif-panel .head .icon-btn,
  #notif-panel .foot .notif-push-cta,
  #notif-panel .foot a,
  #notif-panel .foot button {
    min-height: 44px;
    padding: 8px 12px;
  }

  #notif-panel .notif-row {
    padding: 12px 16px;
    min-width: 0;
  }

  #notif-panel .list {
    min-width: 0;
    overflow-x: hidden;
  }

  /* ============================================================
     MORE MENU — full-width sheet, reachable close
     ============================================================ */
  #bottom-nav-sheet {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  #bottom-nav-sheet .bns-card {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(82dvh, 720px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    background: var(--ws-bg, #0E0F12) !important;
    color: var(--ws-text, #ECEDEF) !important;
    border-top-color: var(--ws-line, #2A2D34) !important;
  }

  #bottom-nav-sheet #bns-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
  }

  #bottom-nav-sheet .bns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  #bottom-nav-sheet .bns-item {
    min-width: 0 !important;
    min-height: 44px !important;
    overflow: hidden;
  }

  #bottom-nav-sheet .bns-item span {
    overflow-wrap: anywhere;
  }

  /* ============================================================
     LIGHT + JOURNALIST — keep overlay chrome on tokens
     ============================================================ */
  html[data-theme="light"] #settings-drawer .set-panel,
  html[data-theme="light"] #settings-drawer > div:last-child,
  html[data-theme="journalist"] #settings-drawer .set-panel,
  html[data-theme="journalist"] #settings-drawer > div:last-child {
    background: var(--set-bg, var(--ws-surface)) !important;
    color: var(--set-ink, var(--ws-text)) !important;
    border-color: var(--set-line, var(--ws-line)) !important;
  }

  html[data-theme="light"] #settings-drawer .set-head,
  html[data-theme="journalist"] #settings-drawer .set-head {
    background: var(--set-bg, var(--ws-surface));
    border-bottom-color: var(--set-line, var(--ws-line));
  }

  html[data-theme="light"] #comments-drawer .drawer-panel,
  html[data-theme="journalist"] #comments-drawer .drawer-panel,
  html[data-theme="light"] #share-sheet > div:last-child,
  html[data-theme="journalist"] #share-sheet > div:last-child,
  html[data-theme="light"] #notif-panel,
  html[data-theme="journalist"] #notif-panel {
    background: var(--ws-surface) !important;
    color: var(--ws-text) !important;
    border-color: var(--ws-line) !important;
  }

  html[data-theme="light"] #comments-drawer #drawer-form,
  html[data-theme="journalist"] #comments-drawer #drawer-form {
    background: var(--ws-surface) !important;
  }

  html[data-theme="light"] #bottom-nav-sheet .bns-card,
  html[data-theme="journalist"] #bottom-nav-sheet .bns-card {
    background: var(--ws-bg) !important;
    color: var(--ws-text) !important;
    border-top-color: var(--ws-line) !important;
  }

  html[data-layout="magazine"][data-theme="light"] .mobile-bottom-nav,
  html[data-layout="magazine"][data-theme="journalist"] .mobile-bottom-nav,
  html[data-layout="magazine"][data-theme="light"] nav.mobile-bottom-nav,
  html[data-layout="magazine"][data-theme="journalist"] nav.mobile-bottom-nav {
    background: var(--mag-surface, var(--ws-surface)) !important;
    color: var(--mag-text, var(--ws-text)) !important;
    border-top-color: var(--mag-line, var(--ws-line)) !important;
  }

  html[data-layout="magazine"][data-theme="light"] header.press-mast,
  html[data-layout="magazine"][data-theme="light"] .ws-header,
  html[data-layout="magazine"][data-theme="journalist"] header.press-mast,
  html[data-layout="magazine"][data-theme="journalist"] .ws-header {
    background: var(--mag-bg, var(--ws-bg)) !important;
    color: var(--mag-text, var(--ws-text)) !important;
    border-bottom-color: var(--mag-line, var(--ws-line)) !important;
  }
}

@media (max-width: 380px) {
  #settings-theme {
    grid-template-columns: 1fr !important;
  }

  #share-sheet .grid,
  #share-sheet .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}