/* Shared phone / laptop shell. Loaded last; desktop retains the two-column player. */
:root{--safe-top:max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px));--safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));--content-top:var(--tg-content-safe-area-inset-top,0px);--content-bottom:var(--tg-content-safe-area-inset-bottom,0px)}
html{scroll-padding-bottom:100px}body{overflow-wrap:break-word}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }
button{touch-action:manipulation}button,a,summary{scroll-margin:80px 0}
.telegram-app #app{padding-top:calc(var(--safe-top) + var(--content-top));padding-bottom:var(--content-bottom)}
.project-select,select{max-width:100%;min-width:0}
.auth-gate{max-width:480px;margin:8vh auto;text-align:left;padding:28px;background:#fff;border:1px solid var(--line);border-radius:18px}
.auth-gate .auth-symbol{font-size:32px;display:block;margin-bottom:18px}.auth-gate p{line-height:1.65}.auth-gate a{display:block;margin-top:22px;background:#344d3d;color:#fff;padding:13px 18px;border-radius:10px;text-align:center;text-decoration:none}
.author-tabs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.page-heading>div,.review-title,.review-top>*{min-width:0}
.reference-info h3,.project-card h3{overflow-wrap:anywhere}
.review-sources{margin:8px 0;padding:0;border:0}.review-sources>summary{font-size:12px;min-height:38px;color:var(--muted)}.review-sources[open]{padding-bottom:12px}
.viewer-header button,.player-controls button{min-height:44px}
.viewer-header{padding-top:var(--content-top)}
.media-viewer{padding-bottom:calc(16px + var(--safe-bottom) + var(--content-bottom))}
@media(min-width:651px){
  #navigation{max-height:calc(100dvh - 20px);overflow-y:auto}
  .review-mode .review-workspace .swipe-card{height:clamp(320px,calc(100dvh - 390px),600px)}
  .review-mode .review-workspace .swipe-stage{max-width:360px}
  .review-workspace{grid-template-columns:minmax(255px,.9fr) minmax(240px,1.1fr)}
  .reference-info{position:sticky;top:20px}
}
@media(min-width:1000px){
  .swipe-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);column-gap:18px;align-items:start}
  .swipe-review>.review-top{grid-column:1/-1}
  .swipe-review>.review-title{grid-column:1;grid-row:2;min-height:44px;align-items:center;margin:0}
  .swipe-review>label{grid-column:2;grid-row:2;font-size:0;margin:0}.swipe-review>label select{margin:0;min-height:44px;font-size:14px}
  .swipe-review>.goal-banner,.swipe-review>.demo-banner{grid-column:1/-1;grid-row:3}
  .swipe-review>.review-sources{grid-column:1;grid-row:4;margin:4px 0}
  .swipe-review>.review-toolbar{grid-column:2;grid-row:4;margin:4px 0;min-height:44px}
  .swipe-review>.review-tabs{grid-column:1/-1;grid-row:5}
  #review-main,.swipe-review>.spy-status,.swipe-review>.review-more,.swipe-review>.format-filter{grid-column:1/-1}
  .review-mode .review-workspace .swipe-card{height:clamp(270px,calc(100dvh - 520px),550px)}
  .review-workspace .swipe-actions{margin-top:10px}
}
@media(max-width:650px){
  #app,.review-mode #app{min-height:100dvh;padding-bottom:calc(82px + var(--safe-bottom) + var(--content-bottom))}
  header.brand,.review-mode header.brand{padding:14px 16px;gap:10px}
  .brand-mark,.review-mode .brand-mark{width:34px;height:34px;font-size:26px;border-radius:10px;flex-shrink:0}
  .brand-mark span{font-size:16px}.brand p,.review-mode .brand p{font-size:10px}
  header.brand h1,.review-mode header.brand h1{font-size:20px}
  #connection,.review-mode #connection{font-size:10px;padding:6px 8px;max-width:136px;white-space:normal;text-align:center}
  .wallet,.review-mode .wallet{padding:12px 16px 0;gap:7px}
  .wallet-label,.review-mode .wallet-label{display:none}
  .wallet button,.review-mode .wallet button,.authors-mode .wallet button{padding:10px;min-height:64px;border-radius:11px;min-width:0}
  .wallet button span,.review-mode .wallet button span:first-child{font-size:10px}
  .wallet strong,.review-mode .wallet strong{font-size:21px;margin:5px 0 0}
  .wallet .paid-lock strong,.review-mode .wallet .paid-lock strong{font-size:13px;margin-top:9px}
  .wallet button>span:last-child,.review-mode .wallet button>span:last-child{display:none}
  main,.review-mode main{padding:20px 16px 12px}
  #navigation,.review-mode #navigation{position:fixed;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 10px calc(8px + var(--safe-bottom) + var(--content-bottom));border-top:1px solid var(--line);background:#fefefbf5;backdrop-filter:blur(18px);z-index:20;border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #25262308}
  #navigation button,.review-mode #navigation button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:52px;margin:0;padding:6px 4px;font-size:11px;border-radius:11px}
  #navigation .nav-caption,#navigation .nav-foot{display:none}#navigation button b{font-size:22px}
  #navigation button[aria-pressed=true]{background:#e9eee5;color:#2d573c}
  .page-heading{gap:12px}.page-heading>button{font-size:12px;padding:10px 12px;white-space:normal}
  .swipe-review{position:relative}.review-top{position:absolute;right:0;top:-7px;margin:0}.review-top>span,.review-top>.back-link{display:none}.review-top>.refresh-icon{min-width:44px;min-height:44px}
  .review-title{padding-right:44px;min-height:35px}.review-title h2{font-size:19px}.review-title>span{white-space:nowrap}.swipe-review>label{font-size:0;margin:6px 0 10px}.swipe-review>label select{font-size:16px;min-height:44px;margin-top:0}
  .review-sources{margin:4px 0}.review-sources>summary{font-size:11px;min-height:36px;padding:8px 0}
  .review-tabs{gap:3px}.review-tabs button{font-size:11px;min-height:44px;padding:8px 5px}
  .review-toolbar{flex-wrap:wrap;gap:8px}.layout-switch button{min-height:42px;font-size:12px;padding:9px 12px}
  .review-toolbar>.quiet{min-height:42px;max-width:none;font-size:11px}
  .review-mode .review-workspace .swipe-stage{max-width:340px;width:100%;margin:0 auto 14px}
  .review-mode .review-workspace .swipe-card{height:clamp(330px,53dvh,560px)}
  .review-workspace{gap:24px}.review-workspace .swipe-guide{font-size:10px}
  .review-workspace .swipe-actions{gap:30px}.review-workspace .swipe-actions button>span{width:58px;height:58px}
  .player-controls{gap:6px;flex-wrap:wrap}.player-controls input[type=range]{flex:1;min-width:52px}
  .player-controls button{font-size:11px;padding:8px;min-width:44px}.expand-video{flex-shrink:0}
  .reference-info{padding:18px}.reference-caption p{font-size:14px;max-height:240px}
  .tile-copy>span{font-size:12px}.tile-copy small{font-size:10px}.reference-grid{gap:10px}
  .author-tabs{flex-wrap:nowrap;padding:2px 0 8px;margin:12px 0;scroll-snap-type:x proximity}
  .author-tabs button{flex:0 0 auto;min-height:44px;font-size:12px;scroll-snap-align:start}
  .feed-switch button{min-height:44px;font-size:12px}.author-actions button{min-height:44px;font-size:12px}
  .spy-status{padding:12px 14px}.spy-status p{font-size:12px}.spy-status button{min-height:44px}
  input:not([type=checkbox]),textarea,select{font-size:16px!important}
  .fields{grid-template-columns:1fr}.money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journal .row{overflow-wrap:anywhere;min-width:0}.journal strong{overflow-wrap:anywhere}
  #message{top:calc(12px + var(--safe-top) + var(--content-top));width:calc(100% - 24px);max-height:40dvh;overflow:auto;z-index:30}
  #request-status{bottom:calc(84px + var(--safe-bottom) + var(--content-bottom));max-width:calc(100vw - 24px)}
  #modal{width:calc(100% - 24px);max-height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));padding:20px;border-radius:16px;overflow-y:auto}
  .media-viewer{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:calc(12px + var(--safe-top) + var(--content-top)) 12px calc(12px + var(--safe-bottom) + var(--content-bottom))}
  .media-viewer .viewer-header{padding-top:0}.media-viewer .viewer-header h2{font-size:15px}
  .media-viewer #viewer-stage{height:calc(100dvh - 230px - var(--safe-top) - var(--safe-bottom) - var(--content-top) - var(--content-bottom));min-height:200px;max-height:none}
  .viewer-decisions button{min-height:44px;font-size:12px}.viewer-footer a{min-height:44px;display:flex;align-items:center;font-size:13px}
  .auth-gate{margin:3vh auto;padding:24px}.auth-gate h2{font-size:22px}
  footer{line-height:1.6;padding:16px}
}
@media(max-width:370px){.brand p{display:none!important}.review-top{flex-wrap:wrap}.review-top label{width:100%}.player-controls .expand-video{width:100%}.review-mode .review-workspace .swipe-card{height:350px}.viewer-decisions button{font-size:11px;padding:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.archive-info {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #d7ddd7;
  border-radius: 14px;
  background: #f1f5ef;
  overflow-wrap: anywhere;
}
.archive-info strong, .archive-tile-badge { color: #315e46; }
.archive-info p { margin: 0; font-size: 14px; }
.archive-info small { color: #626a62; line-height: 1.4; }
.archive-info button { width: 100%; min-height: 44px; white-space: normal; }
.archive-navigation { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.archive-navigation small { color: #626a62; flex: 1 1 220px; }
.media-unavailable h3 { color: #fff; }
.media-unavailable p { color: #e5e7df; }