/* ==========================================================================
   Premium layer (2026-09-30, Joseph: "scope and implement all 13").
   Loaded AFTER styles.css and overrides it. Everything visual from the
   premium pass lives here so it can be reviewed, tuned, or rolled back by
   removing one <link> in index.html. Structural changes (home hero,
   roadmap filtering, section layout, lead-time summary, sidebar rail,
   mobile tab bar, skeletons, toast, search) are in index.html and read
   these classes.
   Principles: one surface level, fewer borders, spacing and type do the
   grouping; neutral palette with Yokogawa blue as the single accent and
   the yellow diamond as a rare signature; section colours only as small
   markers; calm motion.
   ========================================================================== */

/* ---- 1. Tokens ---- */
:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#0c1a30; --muted:#5d6878; --line:#e3e7ed; --line-soft:#eef1f5;
  --navy:#0c1a30;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(12,26,48,.04), 0 2px 8px rgba(12,26,48,.035);
  --shadow-hover:0 2px 6px rgba(12,26,48,.06), 0 14px 32px rgba(12,26,48,.10);
  --sidebar:#fbfbfc; --sidebar-line:#eceff3; --sidebar-hover:#f1f3f6;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c111a; --panel:#141a25; --ink:#e7ecf3; --muted:#8e99aa; --line:#243044; --line-soft:#1d2636;
    --navy:#e7ecf3; --sidebar:#0f1520; --sidebar-line:#1f2838; --sidebar-hover:#182131;
    --shadow:0 0 0 1px var(--line); --shadow-hover:0 0 0 1px color-mix(in srgb, var(--blue) 45%, var(--line)), 0 12px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0c111a; --panel:#141a25; --ink:#e7ecf3; --muted:#8e99aa; --line:#243044; --line-soft:#1d2636;
  --navy:#e7ecf3; --sidebar:#0f1520; --sidebar-line:#1f2838; --sidebar-hover:#182131;
  --shadow:0 0 0 1px var(--line); --shadow-hover:0 0 0 1px color-mix(in srgb, var(--blue) 45%, var(--line)), 0 12px 30px rgba(0,0,0,.35);
}
body{background:var(--bg);}

/* ---- 6. Typography ---- */
body{font-family:var(--font); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01";}
h1,h2,h3,.page-head h1,.sec-hero h1{letter-spacing:-.022em;}
.page-head{margin-bottom:28px;}
.page-head h1{font-size:32px; font-weight:650; line-height:1.15; margin:0 0 8px;}
.page-head p{font-size:15.5px; max-width:68ch; line-height:1.55;}
.card-head h3{font-size:16px; font-weight:600;}
.home-card-head h3{font-size:18px; font-weight:650; letter-spacing:-.015em; color:var(--ink);}
:root[data-theme="light"] .home-card-head h3{color:var(--ink);}
table, .num, td.num, .meter-pct, .meter-ytd, .lt-table td, .anx-table td, .sec-fresh, .date{font-variant-numeric:tabular-nums;}
/* Sentence-case labels instead of shouted ALL CAPS */
.nav-group-label, .sec-group-label, .sec-hero .crumb, .lt-table th, .lt-dm-table th, .sidebar-classification, .sample-tag{
  text-transform:none; letter-spacing:0;
}
.nav-group-label{font-size:12.5px; font-weight:600; color:var(--sidebar-text-dim); margin:22px 12px 6px;}
.lt-table th{font-size:12.5px; font-weight:600;}
.sidebar-classification{font-size:11px; font-weight:500;}

/* ---- 3. Chrome: one surface level, fewer borders, more air ---- */
main.content{padding:40px 48px 88px;}
.content-inner{max-width:1200px;}
.card{border:none; border-radius:var(--radius); box-shadow:var(--shadow);}
.card .card{box-shadow:none; border:1px solid var(--line-soft);}
.card + .card, .card + .home-hero, .home-hero + .card{margin-top:20px;}
header.topbar{background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line-soft); height:68px;}
.gsearch{background:var(--bg); border-color:transparent; border-radius:12px;}
.gsearch:focus-within{border-color:color-mix(in srgb, var(--blue) 55%, transparent); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);}
nav.sidebar{border-right:1px solid var(--sidebar-line);}
.nav-item{border-radius:10px; font-size:14.5px; padding:10px 12px 10px 14px; transition:background .18s var(--ease), color .18s var(--ease);}
.nav-item:hover{transform:none;}
.nav-item.active{box-shadow:none; background:var(--panel); box-shadow:var(--shadow);}
.news-card .card-head{padding:22px 24px 10px;}
.news-item{padding:15px 24px; border-top-color:var(--line-soft);}
.news-item:hover{background:none;}
.news-item:hover .nbody b{color:var(--blue);}
.news-item .nic{border-radius:10px; background:var(--bg); color:var(--muted);}
.news-more{border-top-color:var(--line-soft); background:none;}
.btn.ghost{border-color:var(--line); border-radius:10px;}
.chip{border-radius:999px;}
.lt-tip{border-radius:var(--radius-sm); border-color:transparent;}
.quota-card{border:none !important; background:var(--bg); border-radius:var(--radius-sm);}

/* ---- 4. Colour restraint: neutral surfaces, blue accent, section colour
   only as a small marker ---- */
.qlink .qic{color:var(--muted) !important;}
.qlink:hover{background:var(--bg);}
.qlink:hover .qic{color:var(--blue) !important;}
.lp-tile .li-ic{background:var(--bg) !important; color:var(--tc, var(--blue)) !important;}
.sec-cover{background:var(--bg) !important;}
.sec-cover-ic{color:var(--tc, var(--muted)) !important; opacity:.9;}
.sec-tile[data-status="ext"]{border-top:none;}
.sec-tile[data-status="doc"]{background-image:none;}
.sec-tile .tl::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--tc, var(--blue)); flex:none; opacity:.85;}
.avatar{background:var(--bg); color:var(--ink);}
.bell .dot-badge{background:var(--blue); border-color:var(--panel);}

/* ---- 5. Section pages: plain large title; one tile style per group ---- */
.sec-hero{background:none !important; border:none !important; box-shadow:none !important; padding:0; margin:0 0 26px; gap:0;}
.sec-hero .sec-ic{display:none;}
.sec-hero h1{font-size:32px; font-weight:650;}
.sec-hero .crumb{font-size:13px; font-weight:500; color:var(--muted); margin-bottom:2px;}
.sec-hero-desc{margin:6px 0 0; color:var(--muted); font-size:15.5px; max-width:68ch;}
.lp-tile, .sec-tile{border:none; border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow);}
.lp-tile:hover{border-color:transparent; box-shadow:var(--shadow-hover); transform:translateY(-2px);}
.sec-tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.sec-cover{height:128px;}
.sec-tile-body{padding:14px 18px 16px;}
.sec-tile .tl{font-size:14.5px; font-weight:600;}
.sec-group-label{border-top:none; font-size:13px; font-weight:600; color:var(--muted); margin:18px 0 0; padding-top:0;}
/* Tool/link tiles: a compact list instead of mixed tile species */
.sec-list{grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px 18px;}
.sec-row{display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--panel); border:none; border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:14px 16px; transition:box-shadow .2s var(--ease), transform .2s var(--ease);}
.sec-row:hover{box-shadow:var(--shadow-hover); transform:translateY(-1px);}
.sec-row .sr-ic{width:38px; height:38px; border-radius:10px; background:var(--bg); color:var(--tc, var(--blue)); display:flex; align-items:center; justify-content:center; flex:none;}
.sec-row .sr-main{flex:1; min-width:0;}
.sec-row .sr-main b{display:block; font-size:14.5px; font-weight:600;}
.sec-row .sr-main small{display:block; color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sec-row .sr-go{color:var(--muted); flex:none;}
.sec-row .sr-go .icon{width:15px; height:15px;}
.sec-row:hover .sr-go{color:var(--blue);}
.sec-roadmap{margin-top:30px; font-size:13px; color:var(--muted);}
.sec-roadmap b{font-weight:600; color:var(--ink);}

/* ---- 1. Home hero ---- */
.home-hero{padding:6px 2px 4px; margin-bottom:26px;}
.home-hero .hh-date{font-size:13px; color:var(--muted); font-weight:500;}
.home-hero h1{font-size:34px; font-weight:650; letter-spacing:-.025em; margin:2px 0 0; line-height:1.15;}
.home-hero h1 .hh-diamond{display:inline-block; width:14px; height:14px; margin-left:8px; vertical-align:.18em; color:var(--yellow);}
.hh-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:22px;}
.hh-stat{display:flex; flex-direction:column; gap:4px; text-align:left; font:inherit; color:inherit; cursor:pointer; border:none;
  background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; transition:box-shadow .2s var(--ease), transform .2s var(--ease);}
.hh-stat:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px);}
.hh-stat .hs-k{font-size:28px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1;}
.hh-stat .hs-l{font-size:13.5px; font-weight:600;}
.hh-stat .hs-s{font-size:12.5px; color:var(--muted); line-height:1.4;}
.hh-stat.hh-warn .hs-k{color:var(--coral, #d9485a);}

/* Quick links: tidy row, 3x2 grid on phones */
.qlinks-card{padding:22px 24px;}
.qlinks-row{display:grid; grid-template-columns:repeat(6,1fr); gap:6px;}
.qlink{min-width:0; flex-direction:column; align-items:flex-start; gap:10px; padding:14px; border-radius:var(--radius-sm); font-weight:600; font-size:13.5px;}
.qlink .qic{width:34px; height:34px; border-radius:10px; background:var(--bg);}
@media (max-width:1100px){ .qlinks-row{grid-template-columns:repeat(3,1fr);} }

/* ---- 7. Lead times ---- */
.lt-summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 18px;}
.lt-sum{background:var(--panel); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:14px 16px; text-align:left; font:inherit; color:inherit; border:none; cursor:pointer; transition:box-shadow .2s var(--ease);}
.lt-sum:hover{box-shadow:var(--shadow-hover);}
.lt-sum b{display:block; font-size:24px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.lt-sum span{font-size:12.5px; color:var(--muted); font-weight:500;}
.lt-sum.is-bad b{color:var(--coral, #d9485a);}
.lt-sum.is-warn b{color:var(--orange);}
.lt-sum.is-good b{color:var(--green);}
.lt-sum.active{box-shadow:0 0 0 2px var(--blue);}
.lt-howto{position:relative; display:inline-block;}
.lt-howto summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--blue);}
.lt-howto summary::-webkit-details-marker{display:none;}
.lt-howto .lt-howto-body{position:absolute; z-index:30; top:calc(100% + 8px); left:0; width:min(520px, 86vw); background:var(--panel); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-hover); padding:16px 18px; font-size:13.5px; line-height:1.55; color:var(--ink);}
.lt-card{padding:0; overflow:hidden;}
.lt-wrap{max-height:calc(100vh - 230px); overflow:auto;}
.lt-table th{background:color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter:blur(6px); z-index:2;}
.lt-table tr.lt-row:hover td{background:var(--bg);}
@media (max-width:880px){ .lt-wrap{max-height:none;} }

/* ---- 8. Sidebar rail (collapsible; hover to peek) ---- */
.nav-collapse{display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; cursor:pointer; color:var(--sidebar-text-dim);
  font:inherit; font-size:13px; padding:8px 14px; border-radius:10px; margin-top:6px;}
.nav-collapse:hover{background:var(--sidebar-hover); color:var(--ink);}
.nav-collapse .icon{transform:rotate(180deg); transition:transform .2s var(--ease); width:16px; height:16px;}
@media (min-width:881px){
  body.nav-rail nav.sidebar{width:76px; padding:20px 12px; overflow-x:hidden; transition:width .22s var(--ease), box-shadow .22s var(--ease);}
  body.nav-rail nav.sidebar .nav-item{justify-content:flex-start; padding:10px 17px; white-space:nowrap;}
  body.nav-rail nav.sidebar .nav-item > span:not(.nav-unread-dot), body.nav-rail nav.sidebar .nav-group-label, body.nav-rail nav.sidebar .sidebar-classification,
  body.nav-rail nav.sidebar .nav-collapse span, body.nav-rail nav.sidebar .nav-item .ext{opacity:0; transition:opacity .12s ease;}
  body.nav-rail nav.sidebar .nav-group-label{height:1px; margin:12px 8px; background:var(--sidebar-line); overflow:hidden; color:transparent;}
  body.nav-rail nav.sidebar:hover{position:absolute; top:0; bottom:0; left:0; z-index:30; width:272px; box-shadow:var(--shadow-hover);}
  body.nav-rail nav.sidebar:hover .nav-item > span:not(.nav-unread-dot), body.nav-rail nav.sidebar:hover .nav-group-label, body.nav-rail nav.sidebar:hover .sidebar-classification,
  body.nav-rail nav.sidebar:hover .nav-collapse span, body.nav-rail nav.sidebar:hover .nav-item .ext{opacity:1;}
  body.nav-rail nav.sidebar:hover .nav-group-label{height:auto; margin:22px 12px 6px; background:none; color:var(--sidebar-text-dim);}
  body.nav-rail .body-row{padding-left:76px;}
  body.nav-rail nav.sidebar{position:absolute; top:0; bottom:0; left:0; z-index:30;}
  body.nav-rail .nav-collapse .icon{transform:none;}
  body.nav-rail nav.sidebar .nav-unread-dot{position:absolute; top:9px; left:36px;}
}

/* ---- 9. Mobile: bottom tab bar, 3x2 quick links ---- */
.tabbar{display:none;}
@media (max-width:880px){
  main.content{padding:22px 16px calc(96px + env(safe-area-inset-bottom));}
  .page-head h1, .sec-hero h1, .home-hero h1{font-size:26px;}
  .qlinks-row{grid-template-columns:repeat(3,1fr);}
  .qlink{align-items:center; text-align:center; padding:12px 6px;}
  .hh-strip{grid-template-columns:repeat(2,1fr); gap:10px;}
  .hh-stat{padding:14px;}
  .hh-stat .hs-k{font-size:24px;}
  .hh-stat .hs-s{display:none;}
  .sec-list{grid-template-columns:1fr;}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; justify-content:space-around;
    background:color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--line-soft); padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; font:inherit; font-size:10.5px; font-weight:600;
    color:var(--muted); padding:6px 2px; cursor:pointer; border-radius:10px;}
  .tabbar button .icon{width:21px; height:21px;}
  .tabbar button.active{color:var(--blue);}
  body:has(nav.sidebar.open) .tabbar, body.gsearch-open .tabbar{display:none;}
}

/* ---- 10. Skeletons ---- */
.skel{position:relative; overflow:hidden; background:var(--line-soft); border-radius:8px;}
.skel::after{content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 70%, transparent), transparent); animation:skelShine 1.3s ease-in-out infinite;}
@keyframes skelShine{to{transform:translateX(100%);}}
.skel-page .skel-title{height:34px; width:38%; margin:6px 0 12px;}
.skel-page .skel-sub{height:14px; width:62%; margin-bottom:30px;}
.skel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.skel-card{height:196px; border-radius:var(--radius);}
.skel-rows{display:flex; flex-direction:column; gap:12px; padding:4px 0;}
.skel-row{height:16px;}
.skel-row:nth-child(3n+2){width:86%;}
.skel-row:nth-child(3n){width:64%;}

/* ---- 11. Status message as a quiet toast, not a black bar ---- */
.status-banner{position:fixed; right:20px; bottom:20px; left:auto; top:auto; z-index:80; max-width:min(420px, calc(100vw - 32px));
  background:var(--panel); color:var(--ink); box-shadow:var(--shadow-hover); border-radius:12px; padding:13px 44px 13px 16px;
  font-size:13.5px; font-weight:500; letter-spacing:0; text-align:left; align-items:center; gap:10px; animation:toastIn .35s var(--ease);}
.status-banner::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none;}
.status-banner span{opacity:1;}
.status-banner .sb-reload{background:none; border:none; color:var(--blue); font:inherit; font-weight:600; cursor:pointer; padding:0 0 0 4px; white-space:nowrap;}
.status-banner .sb-close:hover{background:var(--bg);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);}}
@media (max-width:880px){ .status-banner{left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); max-width:none;} }

/* ---- 12. Motion: one calm fade-and-lift per page, nothing bouncy ---- */
.route-enter{animation:pageIn .32s var(--ease) backwards;}
.route-enter .card{animation:none;}
@keyframes pageIn{from{opacity:0; transform:translateY(6px);}}
.lp-tile:hover .li-ic{transform:none;}
@media (prefers-reduced-motion: reduce){
  .route-enter, .status-banner, .skel::after{animation:none;}
  .lp-tile:hover, .hh-stat:hover, .sec-row:hover{transform:none;}
}

/* ---- 13. Search results ---- */
#gsearchResults{border:none; border-radius:16px; box-shadow:0 0 0 1px var(--line-soft), var(--shadow-hover); padding:6px;}
.gs-head{padding:8px 12px 4px; font-size:12px; color:var(--muted); font-weight:500;}
.gs-row{border-bottom:none; border-radius:10px; padding:10px 12px; gap:12px; align-items:center;}
.gs-row:hover, .gs-row.gs-active{background:var(--bg);}
.gs-thumb{width:44px; height:44px; border-radius:8px; flex:none; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--muted);}
.gs-thumb{position:relative;}
.gs-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--bg);}
.gs-thumb img:not([src]){display:none;}
.gs-thumb .icon{width:18px; height:18px;}
.gs-main b{font-size:14px; font-weight:600;}
.gs-main b mark, .gs-snippet mark{background:color-mix(in srgb, var(--yellow) 45%, transparent); color:inherit; border-radius:3px; padding:0 1px;}
.gs-meta{font-size:11.5px; color:var(--muted); font-weight:500; margin-top:1px;}
.gs-meta i{font-style:normal; color:var(--tc, var(--muted));}
.gs-snippet{font-size:12.5px;}
.gs-foot{border-top:1px solid var(--line-soft); margin-top:4px;}

/* Dark mode: the header is no longer forced white, so the lockup's fixed
   navy wordmark needs the theme ink colour there. */
:root[data-theme="dark"] .brand-lockup .bl-top .wordmark, :root[data-theme="dark"] .brand-lockup .bl-mid, :root[data-theme="dark"] .brand-text .wordmark{color:var(--ink);}
:root[data-theme="dark"] .brand-lockup .bl-mid span{color:var(--muted);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-lockup .bl-top .wordmark, :root:not([data-theme="light"]) .brand-lockup .bl-mid, :root:not([data-theme="light"]) .brand-text .wordmark{color:var(--ink);}
  :root:not([data-theme="light"]) .brand-lockup .bl-mid span{color:var(--muted);}
}
@media (max-width:880px){ .hh-stat:last-child:nth-child(odd){grid-column:1/-1;} }

/* ---- Home shortcuts + What's new (2026-10-01; replaced the quick-links card) ---- */
.hh-shortcuts{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.hh-sc{display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:none; box-shadow:var(--shadow); border-radius:999px;
  padding:9px 16px 9px 12px; font:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; transition:box-shadow .2s var(--ease), transform .2s var(--ease);}
.hh-sc .icon{width:16px; height:16px; color:var(--blue);}
.hh-sc:hover{box-shadow:var(--shadow-hover); transform:translateY(-1px);}
.wn-card{padding:22px 24px 14px;}
.wn-card .card-head a{font-size:13.5px; font-weight:600;}
.wn-list{display:flex; flex-direction:column;}
.wn-row{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none; border:none; font:inherit; color:inherit;
  cursor:pointer; padding:11px 8px; border-radius:10px; transition:background .15s var(--ease);}
.wn-row:hover{background:var(--bg);}
.wn-row:hover .wn-main b{color:var(--blue);}
.wn-ic{width:34px; height:34px; border-radius:10px; background:var(--bg); color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none;}
.wn-ic .icon{width:16px; height:16px;}
.wn-main{min-width:0; flex:1;}
.wn-main b{display:block; font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wn-main small{display:block; font-size:12.5px; color:var(--muted);}
.wn-row .wn-main b::before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--yellow); margin-right:8px; vertical-align:.12em;}
.wn-docs{display:flex; flex-wrap:wrap; gap:6px; padding:0 8px 10px 55px;}
.wn-doc{background:var(--bg); border:none; border-radius:999px; padding:5px 11px; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wn-doc:hover{color:var(--blue);}
.wn-doc.wn-more{color:var(--blue); font-weight:600;}
.wn-empty{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; padding:6px 2px 12px;}
.wn-empty .icon{color:var(--green);}
.wn-bell{padding:4px 6px;}
.wn-row.wn-read .wn-main b{font-weight:500; color:var(--muted);}
.wn-row.wn-read .wn-main b::before{display:none;}
.wn-bell .wn-row{padding:9px 8px;}
.wn-bell .wn-row .wn-main b::before{display:none;}
.wn-bell .notif-unread-wrap .wn-row .wn-main b::before{display:inline-block; background:var(--blue);}
@media (max-width:880px){ .wn-docs{padding-left:8px;} .hh-sc{flex:1 1 auto; justify-content:center;} }
/* What's new length cap: one-line title chips, "Also new" summary row */
.wn-docs{flex-wrap:nowrap; overflow:hidden;}
.wn-doc{flex:0 1 auto; min-width:0;}
.wn-doc.wn-more{flex:none;}
.wn-also{display:flex; align-items:baseline; gap:14px; justify-content:space-between; padding:10px 8px 6px; margin-top:2px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--muted);}
.wn-also span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wn-also a{flex:none; font-weight:600;}
.wn-card .card-head a{white-space:nowrap; margin-left:12px;}
@media (max-width:880px){ .wn-card .wn-docs{display:none;} }