/* NYT-style mobile UI tokens and components */
:root{
  --color-primary:#0f66bd;
  --bg-light:#F5F5F5;
  --bg-dark:#101922;
  --text-primary:#121212;
  --text-secondary:#666666;
  --surface:#ffffff;
  --border:#e5e7eb;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg-light:var(--bg-dark);
    --text-primary:#ffffff;
    --text-secondary:#9ca3af;
    --surface:#0b1219;
    --border:#1f2937;
  }
}

/* Containers */
.app-header{position:sticky;top:0;z-index:10;background:var(--bg-light);}
.app-header__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);} 
.app-title{color:var(--text-primary);font-weight:700;font-size:20px;margin:0;}

/* Tabs */
.tabs{display:flex;gap:24px;padding:0 16px;border-bottom:1px solid var(--border);} 
.tab{appearance:none;background:none;border:none;padding:14px 0;margin:0 0 -3px 0;color:var(--text-secondary);font-weight:700;cursor:pointer;border-bottom:3px solid transparent;}
.tab[aria-selected="true"]{color:var(--color-primary);border-bottom-color:var(--color-primary);} 
.tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px;}

/* List */
.news-list{list-style:none;margin:0;padding:0;background:transparent;}
.news-card{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--border);background:transparent;align-items:flex-start;}
.news-card:focus-within{box-shadow:0 0 0 2px var(--color-primary) inset;border-radius:8px;}
.news-card__unread{width:8px;height:8px;border-radius:9999px;background:var(--color-primary);margin-top:4px;flex:0 0 auto;}
.news-card__meta{color:var(--text-secondary);font-size:12px;margin:0;}
.news-card__title{color:var(--text-primary);font-weight:800;font-size:18px;line-height:1.2;margin:2px 0 4px 0;}
.news-card__summary{color:var(--text-secondary);font-size:14px;line-height:1.4;margin:0;}
.news-card__thumb{flex:0 0 100px;inline-size:100px;block-size:100px;border-radius:8px;background:#ddd center/cover no-repeat;}

/* Utilities */
.hidden{display:none !important;}
.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;}

/* Mobile spacing adjustments */
@media (max-width: 400px){
  .news-card{padding:12px;gap:10px;}
  .news-card__title{font-size:16px;}
  .news-card__summary{font-size:13px;}
  .news-card__thumb{inline-size:88px;block-size:88px;}
}

/* Segmented control (settings) */
.segmented{display:flex;gap:6px;background:#e5e7eb;border-radius:8px;padding:4px;}
.segmented button{flex:1 1 0;border:0;background:transparent;padding:6px 8px;border-radius:6px;font-weight:600;color:var(--text-primary);} 
.segmented button[aria-pressed="true"]{background:var(--color-primary);color:#fff;}

/* Support components */
.empty-state{padding:24px;color:var(--text-secondary);text-align:center;}