/* NewsSutra R02.1.2 — desktop Owner Analytics access + mobile-first UAT layout */
.owner-header-link{height:34px;min-width:72px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);text-decoration:none;font-size:10.5px;font-weight:800;white-space:nowrap;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease}
.owner-header-link:hover,.owner-header-link:focus-visible{border-color:var(--orange);color:var(--orange);background:color-mix(in srgb,var(--orange) 4%,var(--panel));outline:none;transform:translateY(-1px)}
.owner-header-link .owner-lock{font-size:12px;line-height:1}
html[data-theme="dark"] .owner-header-link{background:var(--panel-soft)}
@media(max-width:1180px){.owner-header-link{min-width:34px;width:34px;padding:0}.owner-header-link .owner-label{display:none}}

/* Phone: one compact masthead + one bottom navigation. News begins materially higher. */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{overscroll-behavior-x:none}
  .owner-header-link,.menu-toggle,.channel-bar,.search-box{display:none!important}

  .topbar{padding:calc(7px + env(safe-area-inset-top,0px)) 12px 0!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand actions" "refresh refresh"!important;column-gap:8px!important;row-gap:0!important;align-items:center!important}
  .topbar-brand{min-width:0!important;display:flex!important;align-items:center!important}
  .brand-header{gap:7px!important;min-width:0!important}
  .brand-header .brand-mark{width:39px!important;height:39px!important;border-radius:9px!important;flex:0 0 39px!important}
  .brand-header .brand-name{font-size:21px!important;letter-spacing:-.7px!important;line-height:1!important}
  .brand-header .brand-tagline{display:none!important}
  .topbar-actions{gap:7px!important;min-width:max-content!important;align-items:center!important}

  #themeButton{width:39px!important;min-width:39px!important;flex-basis:39px!important;height:23px!important;min-height:23px!important}
  #themeButton:before{width:19px!important;height:19px!important;top:2px!important;left:2px!important}
  html[data-theme="dark"] #themeButton:before{transform:translateX(16px)!important}

  #refreshButton{position:relative!important;width:29px!important;min-width:29px!important;flex-basis:29px!important;height:29px!important;min-height:29px!important;padding:0!important;overflow:hidden!important;font-size:0!important;line-height:0!important;color:transparent!important;text-indent:-9999px!important}
  #refreshButton:after{content:'↻'!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;font-size:16px!important;line-height:1!important;color:var(--orange)!important;text-indent:0!important;font-weight:800!important}
  #refreshButton:disabled:after{content:'…'!important}
  .refresh-line{padding:2px 0 4px!important;font-size:8px!important;line-height:1.2!important;gap:6px!important}
  .refresh-line .status-dot{width:6px!important;height:6px!important}

  .content{padding:9px 12px calc(74px + env(safe-area-inset-bottom,0px))!important}
  .welcome-strip{display:block!important;padding:8px 0 9px!important;margin:0 0 7px!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
  .welcome-strip .eyebrow{font-size:8px!important;letter-spacing:1.35px!important}
  .welcome-strip h2{font-size:30px!important;line-height:1.01!important;letter-spacing:-.8px!important;margin:4px 0 7px!important;max-width:355px!important}
  .welcome-strip p{font-size:12.5px!important;line-height:1.34!important;max-width:none!important;margin:0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .subject-cta{margin-top:6px!important;min-height:27px!important;padding:3px 0!important;font-size:12.5px!important;line-height:1.2!important;white-space:normal!important;text-align:left!important}

  .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin:5px 0 10px!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  .market-card{padding:8px 9px!important;min-height:76px!important;border-radius:0!important}
  .market-card .label{font-size:8px!important;line-height:1.1!important;letter-spacing:.8px!important}
  .market-card .value{font-size:17px!important;line-height:1.1!important;margin:4px 0 3px!important}
  .market-card .change{font-size:9px!important;line-height:1.15!important}
  .market-card .note{font-size:7px!important;line-height:1.22!important;margin-top:3px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

  .hero{grid-template-columns:1fr!important;gap:0!important;margin:0 0 13px!important;border-top-width:3px!important}
  .hero-main{min-height:0!important;padding:14px 14px 12px!important;border-radius:0!important}
  .hero-main:before{top:10px!important;right:12px!important;font-size:10px!important}
  .hero-main h2{font-size:24px!important;line-height:1.08!important;margin:9px 0 7px!important;letter-spacing:-.35px!important}
  .hero-main p{font-size:12px!important;line-height:1.38!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .hero-side-card{padding:11px 13px!important}
  .hero-side-card h4{font-size:16px!important;line-height:1.22!important;margin:6px 0 4px!important}
  .hero-side-card p{font-size:9px!important}
  .tag{font-size:7px!important;padding:3px 7px!important}

  .section-heading{margin:18px 0 8px!important;padding-bottom:6px!important}
  .section-heading h3{font-size:19px!important}
  .story-card-body{padding:13px 14px 9px!important}
  .story-card h3{font-size:20px!important;line-height:1.2!important;margin:8px 0 6px!important}
  .story-card p{font-size:12px!important;line-height:1.4!important;-webkit-line-clamp:2!important}
  .story-card-foot{padding:0 14px 12px!important;font-size:8.5px!important}

  .bottom-nav{height:calc(60px + env(safe-area-inset-bottom,0px))!important;padding-bottom:env(safe-area-inset-bottom,0px)!important}
  .bottom-item{min-height:60px!important;padding:5px 2px!important}
  .bottom-item span{font-size:20px!important;line-height:1!important}
  .bottom-item small{font-size:10px!important;line-height:1.1!important}
  .sidebar{padding-top:env(safe-area-inset-top,0px)!important;padding-bottom:env(safe-area-inset-bottom,0px)!important}
  .modal-overlay{padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))!important}
}

@media(max-width:380px){
  .brand-header .brand-mark{width:36px!important;height:36px!important;flex-basis:36px!important}
  .brand-header .brand-name{font-size:19px!important}
  .welcome-strip h2{font-size:27px!important}
  .welcome-strip p{font-size:12px!important}
  .hero-main h2{font-size:22px!important}
  .market-card .value{font-size:16px!important}
}