/* Phone navigation and watch sheets. Tablet/desktop keep the existing layout. */
.mobile-navigation, .mobile-search-toggle, .mobile-search-back, .mobile-notifications,
.mobile-account-hub, .comments-preview, .discovery-filter-toggle { display:none; }
.mobile-comments-sheet:not([open]) { display:none; }
@media (max-width:700px) {
  html:root { --header-height:calc(56px + var(--safe-area-top)); --mobile-nav-height:calc(58px + var(--safe-area-bottom)); }
  /* Stop the document stretching past its edges during fast phone swipes. */
  html, body { overscroll-behavior-y:none; }
  html { scroll-padding-top:calc(var(--header-height) + 12px); scroll-padding-bottom:calc(var(--mobile-nav-height) + 16px); }
  body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-text-size-adjust:100%; }
  .topbar { display:flex; justify-content:space-between; gap:8px; height:var(--header-height); padding:var(--safe-area-top) max(12px,var(--safe-area-right)) 0 max(16px,var(--safe-area-left)); background:#0f0f0f; }
  .header-brand { flex:1; gap:0; }
  .brand { gap:7px; font-size:22px; font-weight:750; letter-spacing:-.9px; }
  .brand::before { content:''; width:27px; height:20px; background:url('./mark.svg') center / contain no-repeat; }
  #menu-toggle, .sidebar, #sidebar-backdrop { display:none!important; }
  .header-actions { gap:2px; }
  .header-actions .interface-language, .header-actions #account-menu, .header-account, .header-create { display:none; }
  .mobile-search-toggle, .mobile-notifications { display:inline-grid; width:44px; height:44px; }
  .mobile-search-toggle svg, .mobile-notifications svg, .mobile-search-back svg { width:23px; height:23px; }
  .topbar .global-search { display:none; }
  body.mobile-search-open .header-brand, body.mobile-search-open .header-actions { display:none; }
  body.mobile-search-open .mobile-search-back { display:inline-grid; flex-shrink:0; width:40px; height:44px; }
  body.mobile-search-open .global-search { display:flex; height:40px; flex:1; }
  .global-search input { font-size:16px; padding:8px 14px; background:#272727; border-color:transparent; }
  .global-search button { width:44px; background:#272727; border-color:transparent; }
  .app-shell { padding-bottom:var(--mobile-nav-height); }
  .workspace { padding-left:var(--safe-area-left); min-height:calc(100dvh - var(--header-height) - var(--mobile-nav-height)); }
  main { max-width:none; padding:20px 16px 28px; }
  body[data-view='discovery'] main { padding:0 0 24px; }
  body[data-page='watch'] { --header-height:var(--safe-area-top); }
  /* Keep scrolling content out of the status-bar area above the pinned video. */
  body[data-page='watch']::before { content:''; position:fixed; z-index:21; inset:0 0 auto; height:var(--safe-area-top); background:#000; pointer-events:none; }
  body[data-page='watch'] .topbar, body[data-page='watch'] #pwa-status { display:none; }
  body[data-page='watch'] main { padding:0 0 24px; }
  body[data-page='channel'] main { padding-right:0; padding-left:0; }

  .mobile-navigation { position:fixed; z-index:60; inset:auto 0 0; display:flex; align-items:flex-start; justify-content:space-around; height:var(--mobile-nav-height); padding:0 max(4px,var(--safe-area-right)) var(--safe-area-bottom) max(4px,var(--safe-area-left)); border-top:1px solid #ffffff14; background:#0f0f0ff5; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .mobile-nav-link { display:flex; flex:1; min-width:0; height:57px; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#ddd; font-size:10px; line-height:1.2; letter-spacing:0; }
  .mobile-nav-link svg { width:24px; height:24px; flex-shrink:0; stroke-width:1.65; }
  .mobile-nav-link.active { color:#fff; font-weight:700; }
  .mobile-nav-link.active svg { stroke-width:2.6; }
  .mobile-nav-link[data-tab='create'] svg { width:33px; height:33px; padding:6px; border-radius:50%; background:#303030; }
  .mobile-nav-link[data-tab='create'] { gap:0; }
  .mobile-nav-link[data-tab='you'] .avatar { width:24px; height:24px; font-size:10px; background:var(--avatar-background, #555); }
  .mobile-nav-link[data-tab='you'].active .avatar { outline:1.5px solid #fff; outline-offset:2px; }
  .mobile-nav-link:focus-visible { outline-offset:-4px; border-radius:8px; }
  #toast { bottom:calc(var(--mobile-nav-height) + 12px); width:max-content; max-width:calc(100vw - 24px); padding:12px 16px; }
  .pwa-status { margin:0 12px; }
  .pwa-notice { padding:14px; font-size:12px; border-radius:8px; }
  .pwa-notice .pwa-actions { width:100%; }
  .pwa-notice .button { white-space:normal; }

  /* Horizontal feed chips leave the screen to the videos. */
  .discovery-controls { position:relative; display:flex; flex-wrap:nowrap; align-items:center; gap:8px; margin:0; padding:7px 12px 12px; background:var(--canvas); }
  .discovery-tabs.tabs { flex:1 1 auto; min-width:0; gap:7px; padding:0; margin:0; scrollbar-width:none; }
  .discovery-tabs::-webkit-scrollbar { display:none; }
  .discovery-tabs .tab { display:inline-flex; align-items:center; min-height:36px; padding:7px 12px; border-radius:8px; font-size:13px; font-weight:600; }
  .discovery-filters { flex-shrink:0; }
  .discovery-filter-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 11px; border:0; border-radius:8px; background:#272727; color:var(--ink); font-size:12px; }
  .discovery-filter-toggle[aria-expanded='true'] { background:#f1f1f1; color:#0f0f0f; }
  .discovery-filter-toggle[aria-expanded='false'] + .discovery-toolbar { display:none; }
  .discovery-toolbar { position:absolute; z-index:5; top:100%; right:12px; left:12px; display:flex; flex-wrap:wrap; width:auto; padding:14px; border:1px solid #3d3d3d; border-radius:12px; background:#212121; box-shadow:0 8px 25px #0007; }
  .discovery-search { flex:1; }
  .discovery-search .field { flex:1; }
  .discovery-search .field select { min-height:42px; max-width:100%; font-size:16px; }
  .discovery-search .button, .discovery-toolbar > .button { min-height:42px; }
  .discovery-heading { margin:2px 12px 14px; gap:8px; }
  .discovery-heading h1 { font-size:18px; line-height:1.4; }
  .discovery-heading .text-link, .discovery-info { font-size:11px; }
  body[data-page='home'] .discovery-shell[data-query='false'] .discovery-heading { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  body[data-page='home'] .discovery-shell[data-query='false'] .discovery-heading:focus-within { position:static; width:auto; height:auto; margin:0 12px 14px; overflow:visible; clip-path:none; }
  .video-grid { grid-template-columns:1fr; gap:23px; }
  .video-art { border-radius:0; }
  .video-card-body { gap:11px; padding:11px 12px 0; }
  .video-channel-avatar { width:36px; height:36px; font-size:15px; background:var(--avatar-background, #555); }
  .video-card h3 { margin-bottom:3px; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:0; }
  .video-channel.text-link { display:inline; font-size:12px; line-height:1.5; }
  .video-card-meta { display:inline; margin:0; font-size:12px; line-height:1.5; }
  .video-card-meta::before { content:' · '; }
  .video-art > span:not(:empty) { right:8px; bottom:8px; font-size:11px; font-weight:600; }
  .video-grid + .table-footer { padding:16px 12px; }
  .channel-header { margin:0 16px; gap:14px; padding:0 0 16px; }
  .channel-header .eyebrow { display:none; }
  .channel-header h1 { font-size:24px; }
  .channel-header .subscription-form { width:100%; }
  .channel-header .subscription-form .button { width:100%; }
  .channel-header + .safety-actions, body[data-page='channel'] .section-title { margin-right:16px; margin-left:16px; }

  /* Player and thumbnails run to the screen edges, with compact information below. */
  .watch-page { display:flex; flex-direction:column; gap:0; }
  .watch-layout, .watch-recommendations { width:100%; }
  .video-player { border-radius:0; }
  .watch-details { padding:12px 12px 0; }
  .watch-details h1 { margin:0; font-size:18px; line-height:1.3; font-weight:650; letter-spacing:-.15px; }
  .watch-metadata-row { gap:10px; margin:12px 0; }
  .watch-channel-row { flex-basis:100%; gap:9px; }
  .watch-channel-avatar { width:34px; height:34px; font-size:13px; }
  .watch-channel-identity { flex:1; }
  .watch-channel-name { font-size:13px; line-height:1.35; }
  .watch-channel-handle { font-size:11px; }
  .watch-channel-row .button, .channel-header .subscription-form .button { min-height:36px; border:0; border-radius:22px; padding:8px 12px; font-size:12px; }
  .channel-header .subscription-form .button.primary { color:#0f0f0f; background:#f1f1f1; }
  .channel-header .subscription-form .button.secondary { background:#272727; }
  .watch-actions { position:relative; margin-left:0; }
  .video-reaction { min-height:36px; padding:7px 10px; font-size:12px; }
  .watch-more { position:static; }
  .watch-more-menu { left:0; right:auto; }
  .watch-actions > .button.small, .watch-more > summary.button { min-height:36px; padding:8px 13px; font-size:12px; }
  .watch-more > summary { width:36px; padding:8px; }
  .watch-description { margin:12px 0; padding:12px; }
  .watch-description-meta, .watch-description-preview, #watch-description-body, .watch-description-toggle { font-size:13px; }
  .comments-preview { display:block; width:100%; margin:14px 0 18px; padding:11px 12px; border:0; border-radius:11px; background:#272727; color:var(--ink); text-align:left; }
  .comments-preview-heading { display:flex; align-items:baseline; gap:8px; margin-bottom:7px; font-size:13px; font-weight:650; }
  .comments-preview-heading::after { content:'⌃'; margin-left:auto; font-size:17px; }
  .comments-preview-heading > span[aria-hidden] { display:none; }
  .comments-preview-heading [data-comment-preview-count] { color:#aaa; font-size:11px; font-weight:400; }
  .comments-preview-body { display:flex; align-items:center; gap:8px; min-height:24px; font-size:12px; }
  .comments-preview-avatar { display:grid; place-items:center; width:23px; height:23px; flex-shrink:0; border-radius:50%; background:var(--avatar-background, #555); color:#fff; font-size:10px; }
  .comments-preview-text { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; overflow-wrap:anywhere; }
  .watch-page > #watch-comments:not([hidden]) { padding:20px 16px; margin:0; }
  .watch-recommendations { margin:0; padding-top:4px; border-top:1px solid #ffffff12; }
  .recommendations-heading { margin:12px 12px 14px; }
  .recommendations-heading h2 { font-size:15px; font-weight:600; }
  .recommendations-heading > a { font-size:11px; }
  .watch-recommendations .video-grid { grid-template-columns:1fr; gap:23px; }
  .watch-recommendations .video-card { display:block; }
  .watch-recommendations .video-card-body { display:flex; gap:11px; padding:11px 12px 0; }
  .watch-recommendations .video-channel-avatar { display:grid; }
  .watch-recommendations .video-card h3 { font-size:15px; margin-bottom:3px; }
  .watch-recommendations .video-channel { font-size:12px; }
  .watch-recommendations .video-card-meta { margin:0; font-size:12px; }
  .watch-recommendations .video-art { border-radius:0; }
  .watch-recommendations > div > .hint { margin:12px; }

  body.comments-sheet-open { overflow:hidden; }
  dialog.mobile-comments-sheet { position:fixed; inset:auto 0 0; display:none; width:100%; max-width:none; height:min(72dvh,760px); max-height:calc(100dvh - var(--safe-area-top) - 16px); margin:0; padding:0 0 var(--safe-area-bottom); overflow:hidden; border:0; border-radius:16px 16px 0 0; background:#0f0f0f; box-shadow:0 -10px 48px #0006; }
  dialog.mobile-comments-sheet[open] { display:flex; flex-direction:column; }
  dialog.mobile-comments-sheet::backdrop { background:#0006; }
  .mobile-comments-panel { display:flex; flex:1; min-height:0; flex-direction:column; }
  .mobile-comments-handle { width:34px; height:4px; flex-shrink:0; margin:9px auto 0; border-radius:3px; background:#777; }
  .mobile-comments-header { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; padding:6px 12px 8px 16px; border-bottom:1px solid #ffffff1a; }
  .mobile-comments-header h2 { margin:0; font-size:19px; letter-spacing:-.2px; }
  .mobile-comments-close { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink); }
  .mobile-comments-close svg { width:24px; height:24px; }
  .mobile-comments-content { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 max(16px,var(--safe-area-right)) 20px max(16px,var(--safe-area-left)); -webkit-overflow-scrolling:touch; }
  .mobile-comments-content #video-comments > h2, .mobile-comments-content #video-comments > .hint { display:none; }
  .mobile-comments-content #video-comments > p { margin:18px 0; font-size:13px; }
  .mobile-comments-content form { margin:16px 0; }
  .mobile-comments-content .field { margin-bottom:12px; font-size:13px; }
  .mobile-comments-content textarea { min-height:76px; font-size:16px; background:#272727; border:1px solid #444; }
  .mobile-comments-content .field > .hint { font-size:11px; }
  .mobile-comments-content .button { border-radius:20px; min-height:36px; }
  .mobile-comments-content .button.primary { background:#f1f1f1; border:0; color:#0f0f0f; }
  .mobile-comments-content .comment-card { padding:12px 0; grid-template-columns:32px minmax(0,1fr); column-gap:12px; }
  .mobile-comments-content .comment-avatar { width:32px; height:32px; font-size:18px; }
  .mobile-comments-content .comment-replies .comment-card { grid-template-columns:24px minmax(0,1fr); gap:10px; }
  .mobile-comments-content .comment-replies .comment-avatar { width:24px; height:24px; font-size:13px; }
  .mobile-comments-content .comment-body { font-size:13px; line-height:1.55; margin:7px 0; }
  .mobile-comments-content .comment-author { gap:2px 7px; font-size:11px; }
  .mobile-comments-content .comment-author strong { font-size:12px; }
  .mobile-comments-content .comment-author time { font-size:10px; }
  .mobile-comments-content .comment-actions { margin:6px 0; gap:3px 8px; }
  .mobile-comments-content .comment-actions .button { padding:6px 10px; font-size:11px; }
  .mobile-comments-content .comment-actions .text-link { font-size:11px; }
  .mobile-comments-content .comment-editor { padding:12px; }
  .mobile-comments-content .comment-reply-editor { padding:0; gap:9px; }
  .mobile-comments-content .comment-reply-editor textarea { min-height:30px; font-size:16px; background:transparent; border:0; border-bottom:1px solid #777; }
  .mobile-comments-content .comment-reply-editor .button.primary { background:#3ea6ff; color:#0f0f0f; }
  .mobile-comments-content .comment-reply-editor .button.primary:disabled { background:#272727; color:#777; }
  .mobile-comments-content .comment-composer { grid-template-columns:32px minmax(0,1fr); gap:12px; }
  .mobile-comments-content .comment-composer-avatar { width:32px; height:32px; font-size:18px; }
  .mobile-comments-content .comment-composer textarea { min-height:30px; padding:3px 0 6px; border:0; border-bottom:1px solid #777; border-radius:0; background:transparent; font-size:16px; }
  .mobile-comments-content .comment-composer .button.primary { background:#3ea6ff; color:#0f0f0f; }
  .mobile-comments-content .comment-composer .button.primary:disabled { background:#272727; color:#777; }

  /* You is the phone's account and settings hub, including role-gated tools. */
  .mobile-account-hub { display:block; }
  body[data-page='account'] main { display:flex; flex-direction:column; }
  body[data-page='account'] main > .security-notice { order:2; margin-top:20px; }
  body[data-page='account'] main > .section-note { order:3; }
  .desktop-account-details { display:none; }
  .mobile-account-profile { display:flex; align-items:center; gap:14px; padding:4px 0 22px; }
  .mobile-account-profile > div { min-width:0; }
  .mobile-account-profile > svg { width:64px; height:64px; flex-shrink:0; padding:16px; border-radius:50%; background:#303030; }
  .mobile-account-profile .avatar { width:64px; height:64px; font-size:24px; background:var(--avatar-background, #555); }
  .mobile-account-profile h1, .mobile-account-profile h2 { margin:0 0 4px; font-size:24px; overflow-wrap:anywhere; }
  .mobile-account-profile p { margin:0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
  .mobile-account-profile .muted { font-size:11px; }
  .mobile-account-auth { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .mobile-account-auth .button.primary { background:#f1f1f1; border-color:transparent; color:#0f0f0f; }
  .mobile-account-hub h2 { margin:22px 0 10px; font-size:17px; letter-spacing:0; }
  .mobile-account-links { display:grid; gap:2px; margin:0 -4px 16px; padding:8px 0 16px; border-bottom:1px solid #ffffff1a; }
  .mobile-account-link { display:flex; align-items:center; gap:16px; min-height:48px; width:100%; padding:10px 4px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:14px; text-align:left; }
  .mobile-account-link:hover { background:#272727; }
  .mobile-account-link svg { width:22px; height:22px; flex-shrink:0; }
  .mobile-account-link > svg:last-child:not(:first-child) { margin-left:auto; width:18px; color:#aaa; }
  .mobile-account-details { padding:0 0 16px; border-bottom:1px solid #ffffff1a; }
  .mobile-account-details > summary { padding:8px 0; color:var(--muted); cursor:pointer; font-size:12px; }
  .mobile-account-details .detail-list { margin-top:8px; }
  .mobile-account-hub .field select { font-size:16px; }
  .mobile-account-hub .button { border-radius:22px; }
  .field input,.field textarea,.field select { font-size:16px; }
}

@media (max-width:360px) {
  .brand { font-size:20px; }
  .brand::before { width:24px; }
  .watch-channel-row { gap:7px; }
  .watch-channel-name { font-size:12px; }
  .watch-channel-row .button { padding:8px 10px; font-size:11px; }
  .mobile-nav-link { font-size:9px; }
}