/* XNewsAi shell — UI mock-up v5 (docs/design/xnewsai-ui-v5/). One header + headline line… */
:root {
  --xn-ink: #0c0c0e; --xn-dim: #8b8f98; --xn-sig: #d7d9de; --xn-red: #E10600; --xn-red-hot: #ff2a1f;
  --xn-chrome: linear-gradient(135deg, #c0c8d1 0%, #f8fafc 40%, #87939f 100%);
  --xn-zap: linear-gradient(90deg, transparent, #E10600 22%, #ff2a1f 50%, #E10600 78%, transparent);
  --xn-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --xn-bar-h: 52px; --xn-line-h: 32px; --xn-dock-h: 56px;
}

/* Header: bar + headline line + electric line, one block */
.xn-head { position: sticky; top: 0; z-index: 40; background: var(--xn-ink); color: #fff; padding-top: env(safe-area-inset-top); font-family: var(--xn-font);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1); }
.xn-bar { display: flex; align-items: center; height: var(--xn-bar-h); padding: 0 8px 0 20px; max-width: 1440px; margin: 0 auto; }
.xn-logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.xn-wordmark { display: block; height: 18px; width: auto; }
.xn-sp { flex: 1; }
.xn-nav, .xn-ask, .xn-search-t { display: none; }
.xn-search, .xn-menu { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: none; border: 0; padding: 0; border-radius: 12px; cursor: pointer; }
.xn-search svg, .xn-menu svg { width: 22px; height: 22px; }
.xn-search:hover, .xn-menu:hover { background: rgba(255, 255, 255, .08); }
.xn-search:focus-visible, .xn-menu:focus-visible, .xn-ask:focus-visible, .xn-logo:focus-visible, .xn-dock a:focus-visible, .xn-dock button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.xn-head .signal-bar { background: var(--xn-ink); border: 0; border-top: 1px solid rgba(255, 255, 255, .07); backdrop-filter: none; -webkit-backdrop-filter: none; }
.xn-head .sb-row { display: flex; align-items: center; height: var(--xn-line-h); max-width: 1440px; margin: 0 auto; padding: 0 8px 0 20px; }
.xn-head .sb-rail { flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; overflow: hidden; padding: 0; -webkit-mask-image: none; mask-image: none; }
.xn-head .sb-item { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 0; height: 100%; padding: 0 12px 0 0; gap: 8px; display: inline-flex; align-items: center; color: var(--xn-sig); text-decoration: none; white-space: nowrap; }
.xn-head .sb-item:hover { background: none; color: #fff; }
.xn-head .sb-state { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--xn-font); letter-spacing: .14em; color: #fff; flex: none; }
.xn-head .sb-state.dev, .xn-head .sb-state.lat { color: #fff; }
.xn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--xn-red); flex: none; }
.xn-head .sb-t { font: 500 13px/1 var(--xn-font); letter-spacing: 0; color: var(--xn-sig); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xn-head .sb-d { display: none; }
.xn-head .sb-toggle { flex: none; width: 36px; height: var(--xn-line-h); min-height: 0; padding: 0; display: grid; place-items: center; color: var(--xn-dim); background: none; border: 0; }
.xn-head .sb-peek { background: var(--xn-ink); border-top: 1px solid rgba(255, 255, 255, .07); }
.xn-head .sb-peek-in { max-width: 1440px; margin: 0 auto; }
.xn-zap { height: 1px; background: var(--xn-zap); box-shadow: 0 0 10px 0 rgba(225, 6, 0, .55); }
.xn-progress { display: none; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none; }
.xn-progress i { display: block; height: 100%; width: 0; background: var(--xn-ink); }

/* Reading mode: scrolling down hides header and dock; any scroll up or the end of the… */
html.xn-hidden .xn-head { transform: translateY(-100%); }
html.xn-hidden .xn-dock { transform: translateY(100%); }
/* the hairline lives inside the header, which slides up by its own height: hang it that… */
html.xn-hidden .xn-progress { display: block; top: 100%; }
body[data-view="article"] .xn-progress { display: block; }
@media (prefers-reduced-motion: reduce) { .xn-head, .xn-dock { transition: none; } }

/* Dock (phone) */
.xn-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--xn-ink); padding-bottom: env(safe-area-inset-bottom); font-family: var(--xn-font);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1); }
.xn-zap--dock { position: absolute; left: 0; right: 0; top: 0; }
.xn-dock ul { list-style: none; margin: 0; padding: 0 8px; height: var(--xn-dock-h); display: grid; grid-template-columns: repeat(5, 1fr); }
.xn-dock li { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
.xn-dock .di { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 44px; padding: 0; background: none; border: 0; border-radius: 0;
  font: 600 12px/1 var(--xn-font); letter-spacing: -.01em; text-transform: none; color: var(--xn-dim); white-space: nowrap; cursor: pointer; text-decoration: none; }
.xn-dock .di.on, .xn-dock .di[aria-current="page"] { color: #fff; }
.xn-dock .di.on::after, .xn-dock .di[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--xn-red); }
.xn-dock #dockListen { color: #fff; }
.xn-dock #dockListen::before { content: ""; position: absolute; left: 50%; top: 10px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--xn-red); box-shadow: 0 0 8px rgba(225, 6, 0, .8); }
.askring { display: block; width: 46px; height: 46px; border-radius: 15px; padding: 2px; background: var(--xn-chrome); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 16px 1px rgba(225, 6, 0, .45); flex: none; }
.askring img { display: block; width: 100%; height: 100%; border-radius: 13px; }
.xn-dock .di.ask { overflow: visible; }
.xn-dock .slot-listen { display: none; }
/* Listen takes the fourth slot on a story once the player exists (js/listen.js adds… */
html.xn-listen body[data-view="article"] .xn-dock .slot-listen { display: flex; }
html.xn-listen body[data-view="article"] .xn-dock .slot-learn { display: none; }
body { padding-bottom: calc(var(--xn-dock-h) + 16px + env(safe-area-inset-bottom)); }
.only-story { display: none !important; }
body[data-view="article"] .only-story { display: flex !important; }

/* Desktop: full-width header, 60px, square, flush to the top; no dock */
@media (min-width: 821px) {
  :root { --xn-bar-h: 60px; --xn-line-h: 34px; }
  .xn-dock { display: none; }
  body { padding-bottom: 0; }
  .xn-bar { padding: 0 48px; gap: 16px; }
  .xn-wordmark { height: 20px; }
  .xn-nav { display: flex; gap: 4px; margin-left: 24px; }
  .xn-nav .tab { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px; font: 600 14px/1 var(--xn-font); letter-spacing: 0; text-transform: none; color: var(--xn-dim);
    background: none; border: 0; border-radius: 10px; text-decoration: none; }
  .xn-nav .tab:hover { color: #fff; }
  .xn-nav .tab.on, .xn-nav .tab[aria-current="page"] { color: #fff; }
  .xn-nav .tab.on::after, .xn-nav .tab[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--xn-red); }
  .xn-search { width: 260px; height: 38px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); color: var(--xn-dim); font: 500 13px/1 var(--xn-font); }
  .xn-search svg { width: 16px; height: 16px; }
  .xn-search-t { display: inline; }
  .xn-ask { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 5px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 600 14px/1 var(--xn-font); text-decoration: none; }
  .xn-ask .askring { width: 30px; height: 30px; border-radius: 9px; padding: 1.5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 10px rgba(225, 6, 0, .45); }
  .xn-ask .askring img { border-radius: 7.5px; }
  .xn-head .sb-row { padding: 0 48px; }
  .xn-head .sb-toggle { margin-right: -12px; }
  .xn-head .sb-peek-in { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 820px) { .xn-ask { display: none; } }

/* The More sheet, in the shell's colours */
.xn-more.ui-sheet--device { background: var(--xn-ink); color: #fff; }
.xn-more .sheet-item { min-height: 48px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 16px; font: 600 15px/1 var(--xn-font); color: #fff; background: none; border: 0; border-radius: 12px; text-decoration: none; cursor: pointer; }
.xn-more .sheet-item:hover { background: rgba(255, 255, 255, .08); }
.xn-more .sheet-item .ar { color: var(--xn-dim); font-weight: 500; }

/* Cleanups the v5 shell needs on top of the app's older rules */
.xn-head .sb-item:not(:first-child) { display: none; }                    /* one headline, one line */
.xn-head .sb-peek[data-rail-state="parked"] { display: none; }            /* no empty black band under the line */
body.static-page .xn-head .sb-toggle, body.static-page .xn-head .sb-peek { display: none; }  /* generated pages have no live-signal panel */
.xn-nav .tab, .xn-nav .tab.on { background: none; box-shadow: none; }
.xn-nav .tab.on::before { display: none; }
/* The story's own button row is gone: Share and Save live in More, Listen in the dock,… */
.art-toolbar .art-tools { display: none !important; }
.art-toolbar { position: static !important; top: auto !important; }
.float-orb { display: none !important; }   /* nothing floats over the article, ever */
@media (max-width: 820px) { section.block.art-block { padding-top: 24px; } .xn-head ~ main section.block:first-child { padding-top: 24px; } }

/* Desktop shows two headlines on the line, as in the mock-up: LATEST first, then a slash… */
@media (min-width: 821px) {
  .xn-head .sb-rail { gap: 0; }
  .xn-head .sb-item:nth-child(2) { display: inline-flex; padding-left: 0; }
  .xn-head .sb-item:nth-child(2) .sb-state { display: none; }
  .xn-head .sb-item:nth-child(2)::before { content: "/"; color: #4a4d55; margin-right: 10px; }
}