/* =========================================================================
   home.css - the first page as a news page (his order, 2026-10-11)

   Loaded AFTER theme-desk.css, and every colour here is one of its tokens
   (--dk-*), so the page is right in dark and in light without a second set of
   rules. Signed out, #screen-welcome has no .is-home class and none of the
   layout below applies - the greeting and the log-in choice look as they did.
   ========================================================================= */

/* The thin scrolling news line is not shown on the first page: the page itself
   is the news. Every other screen keeps it. */
body.on-first-page .news-ticker{ display:none; }

/* Signed out these two wrappers must not exist as boxes, so the greeting, the
   log-in panel and the search stay direct children of the centred screen. */
.home-top, .home-left{ display:contents; }
.home-news{ display:none; }

/* ---- THE LOGO (his artwork, 2026-10-12) -----------------------------------
   Two pictures, one per mode. Whichever does not match the page is not drawn -
   a white logo on the light grey page, or a black one on the dark page, would
   simply be invisible. Dark is the default when no mode is recorded. */
.brand-logo{ display:block; width:auto; max-width:86vw; object-fit:contain;
  -webkit-user-select:none; user-select:none; }
html[data-theme="light"] .brand-logo.for-dark,
html:not([data-theme="light"]) .brand-logo.for-light{ display:none; }
/* Signed out, it stands above the greeting: the front door of the app. */
.home-logo{ display:flex; justify-content:center; order:-1; margin:0 0 30px; }
.home-logo .brand-logo{ height:190px; }

/* ---- signed in: the page ------------------------------------------------- */
#screen-welcome.is-home{
  justify-content:flex-start; align-items:stretch;
  padding:14px 22px 48px; }
/* Three places in one row: search on the left, the logo in the MIDDLE, Profile
   on the right. Each has its own column, so the logo is centred on the page
   itself - not on whatever room the two sides happen to leave. */
#screen-welcome.is-home .home-top{
  display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center; column-gap:16px;
  width:100%; max-width:1320px; margin:0 auto;
  padding-bottom:12px; border-bottom:1px solid var(--dk-line); }
#screen-welcome.is-home .home-left{
  grid-column:1; display:flex; align-items:center; min-width:0; }
/* no typed line on the news page - the search bar stands alone */
#screen-welcome.is-home .welcome-line{ display:none; }
/* THE LOGO'S PLACE on the news page: the middle of the top row. Tall enough
   that the name under the house can be read. (No `display` on the picture
   here - which of the two shows is decided by the mode, above.) */
#screen-welcome.is-home .home-logo{
  grid-column:2; order:0; margin:0; align-items:center; }
#screen-welcome.is-home .home-logo .brand-logo{ height:88px; }
#screen-welcome.is-home .global-search-wrap{
  display:block; position:relative; width:300px; max-width:100%; margin:0; z-index:60;
  animation:none; }
#screen-welcome.is-home #globalSearch{
  font-family:Inter, system-ui, sans-serif; font-size:13px; padding:8px 12px; }
#screen-welcome.is-home .global-results{ z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.25); }
#screen-welcome.is-home .auth-corner{ position:static; grid-column:3; justify-self:end;
  align-items:center; gap:8px; }
/* Dark / Light sits to the left of Profile, the same height as it. Signed out
   the corner is empty by design, so the switch is not shown there. */
.auth-corner .look-switch{ display:none; }
#screen-welcome.is-home .auth-corner .look-switch{ display:inline-flex; }
#screen-welcome.is-home .auth-corner .look-switch button{ padding:8px 10px; }
#screen-welcome.is-home .auth-corner .auth-link{
  background:var(--dk-hover); color:var(--dk-text); border-radius:6px;
  padding:7px 14px; font-size:13px; font-weight:500; }
#screen-welcome.is-home .auth-corner .auth-link:hover{ background:var(--dk-line-strong); }

#screen-welcome.is-home .home-news.show{
  display:block; width:100%; max-width:1320px; margin:0 auto; }

/* ---- section tabs + "live" ----------------------------------------------- */
.hn-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:14px 0 16px; }
.hn-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.hn-tab{ background:var(--dk-row); color:var(--dk-muted); border:0; border-radius:6px;
  font:500 13px Inter, system-ui, sans-serif; padding:7px 13px; cursor:pointer; }
.hn-tab:hover{ color:var(--dk-text); }
.hn-tab.on{ background:var(--dk-hover); color:var(--dk-text); }
/* WHAT he is looking at - All / Stocks / Forex / Crypto / World (his order,
   2026-10-12: "by seen this boxes to choose what you actually want to see my
   eye it goes directly where i want"). Bigger than any other box on the page,
   and the chosen one is the page's own ink turned inside out, so there is never
   a moment's doubt which is on. */
#hnTabs{ gap:8px; }
#hnTabs .hn-tab{ font-size:14px; font-weight:600; padding:9px 18px; color:var(--dk-text-2); }
#hnTabs .hn-tab:hover{ background:var(--dk-hover); color:var(--dk-text); }
#hnTabs .hn-tab.on{ background:var(--dk-text); color:var(--dk-page); }
/* WHEN - the newest, or one day. Quieter than the row above: it is the second
   question, and its chosen box is marked without shouting. */
.hn-days{ display:flex; gap:6px; flex-wrap:wrap; margin:-4px 0 18px; }
.hn-day{ background:transparent; color:var(--dk-muted); border:0; border-radius:6px; cursor:pointer;
  font:500 12.5px Inter, system-ui, sans-serif; padding:6px 11px;
  box-shadow:inset 0 0 0 1px var(--dk-line); }
.hn-day:hover{ color:var(--dk-text); box-shadow:inset 0 0 0 1px var(--dk-line-strong); }
.hn-day.on{ background:var(--dk-hover); color:var(--dk-text); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--dk-line-strong); }
.hn-updated{ font:12px Inter, system-ui, sans-serif; color:var(--dk-muted);
  display:inline-flex; align-items:center; gap:7px; }
.hn-dot{ width:7px; height:7px; border-radius:50%; background:var(--dk-green);
  display:inline-block; animation:hnPulse 2s ease-in-out infinite; }
@keyframes hnPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---- two columns ---------------------------------------------------------- */
.hn-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:22px;
  align-items:start; }
.hn-main{ min-width:0; }
.hn-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:12px; }
/* THE SIDE COLUMN MUST FIT THE WINDOW (his reports, 2026-10-12 "the slidedown
   is buggin together with the main page" and 2026-10-13 the search bar and the
   TV box "close each other - leave a space"). It stays in view while the news on
   the left scrolls, and a column that stays put cannot be scrolled - so it may
   never be taller than the window.

   NOTHING HERE SHRINKS BY ITSELF. The first version let the browser squeeze the
   first box; when the TV began playing by itself the box shrank under its own
   contents, and the search bar and a pair's news were drawn against, and on
   top of, the TV box. home.js (homeFitSide) now sets every size outright: the
   TV picture gets smaller first, then the pair news scrolls INSIDE its box,
   and when nothing fits the column goes with the page (.flows). Scrolling the
   list does not drag the page along when it reaches its end. */
.hn-side > .hn-box{ flex:none; }
#hnMine{ overflow-y:auto; overscroll-behavior:contain;
  margin-right:-8px; padding-right:8px;              /* the scrollbar sits clear of the text */
  scrollbar-width:thin; scrollbar-color:var(--dk-line-strong) transparent; }
.hn-side.flows{ position:static; }
.hn-side.flows #hnMine{ overflow:visible; margin-right:0; padding-right:0; }
/* while a pair's news is open and room is short, the channel buttons step aside */
.hn-box.compact .hn-tv-chans{ display:none; }
/* A very short window cannot hold both boxes whatever is done: there the column
   simply goes with the page, so everything in it can still be reached. */
@media (max-height:540px){
  .hn-side{ position:static; }
  #hnMine{ overflow:visible; margin-right:0; padding-right:0; }
}

/* ---- stories -------------------------------------------------------------- */
.hn-story{ display:block; color:inherit; text-decoration:none; min-width:0; }
.hn-pic{ background:var(--dk-row); border-radius:8px; overflow:hidden; aspect-ratio:16/9; }
.hn-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.hn-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font:12px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.hn-src{ font-weight:500; color:var(--dk-text-2); }
.hn-sec{ font-weight:600; }
.hn-sec-world{ color:var(--dk-blue); }
.hn-sec-markets{ color:var(--dk-green); }
.hn-sec-crypto{ color:var(--dk-amber); }
.hn-sec-forex{ color:var(--dk-text-2); }
.hn-newtag{ background:var(--dk-green-bg); color:var(--dk-green); border-radius:4px;
  padding:1px 6px; font-weight:600; font-size:11px; }
.hn-title{ font:600 15px/1.35 Inter, system-ui, sans-serif; color:var(--dk-text);
  margin-top:6px; }
.hn-sum{ font:13px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hn-story:hover .hn-title{ text-decoration:underline; text-underline-offset:3px; }

/* the lead: one big story and up to four beside it */
.hn-lead{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:20px;
  margin-bottom:8px; }
.hn-lead > .hn-hero:only-child{ grid-column:1 / -1; }
.hn-hero .hn-body{ margin-top:12px; }
.hn-hero .hn-title{ font-size:24px; line-height:1.25; }
.hn-hero .hn-sum{ font-size:14px; -webkit-line-clamp:4; }
.hn-lead-more{ display:flex; flex-direction:column; gap:14px; }
.hn-small{ display:grid; grid-template-columns:118px minmax(0, 1fr); gap:12px; align-items:start; }
.hn-small.no-pic{ grid-template-columns:minmax(0, 1fr); }
.hn-small .hn-title{ font-size:14px; margin-top:4px; }
.hn-small .hn-pic{ border-radius:6px; }

.hn-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:26px 0 12px; padding-top:16px; border-top:1px solid var(--dk-line); }
.hn-sec-title{ font:600 17px Inter, system-ui, sans-serif; color:var(--dk-text); }
.hn-more{ background:none; border:0; padding:0; cursor:pointer; color:var(--dk-muted);
  font:500 12px Inter, system-ui, sans-serif; text-decoration:underline;
  text-underline-offset:3px; }
.hn-more:hover{ color:var(--dk-text); }
.hn-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px 18px; }
.hn-card .hn-body{ margin-top:10px; }
.hn-empty{ padding:60px 0; text-align:center; color:var(--dk-muted);
  font:14px Inter, system-ui, sans-serif; }

/* ---- the last 7 days ------------------------------------------------------ */
/* the day on screen, said once at the top of its list */
.hn-day-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 4px; }
.hn-day-title{ font:600 20px Inter, system-ui, sans-serif; color:var(--dk-text); }
.hn-day-sub{ font:13px Inter, system-ui, sans-serif; color:var(--dk-muted); }
/* "401 analyst notes folded away - show": says what was left out, and undoes it */
/* THE WEEK (his order, 2026-10-12): each day under its own bar, one open at a
   time - "seperate the days clearly to see". */
.hn-wk-bar{ display:flex; align-items:baseline; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--dk-row); color:var(--dk-text); border:0; border-radius:8px;
  padding:14px 16px; margin:0 0 8px; scroll-margin-top:10px;
  font:14px Inter, system-ui, sans-serif; }
.hn-wk-bar:hover{ background:var(--dk-hover); }
.hn-wk-bar.open{ background:var(--dk-text); color:var(--dk-page); margin-bottom:0;
  border-radius:8px 8px 0 0; }
.hn-wk-name{ font-weight:600; font-size:16px; white-space:nowrap; }
.hn-wk-date{ flex:1; min-width:0; color:var(--dk-muted); font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hn-wk-count{ color:var(--dk-muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hn-wk-bar.open .hn-wk-date, .hn-wk-bar.open .hn-wk-count{ color:inherit; opacity:.75; }
.hn-wk-arrow{ width:14px; text-align:center; font-weight:600; font-size:16px; line-height:1; }
.hn-wk-body{ margin:0 0 14px; padding:4px 16px 16px; border-radius:0 0 8px 8px;
  box-shadow:inset 0 0 0 1px var(--dk-line-strong); }
.hn-wk-fold{ display:flex; padding:10px 0 0; }
.hn-wk-body .hn-tl-day{ background:var(--dk-page); }
@media (max-width:600px){
  .hn-wk-bar{ flex-wrap:wrap; gap:4px 10px; padding:12px; }
  .hn-wk-date{ flex:1 1 60%; }
  .hn-wk-body{ padding:2px 10px 12px; }
}
.hn-fold{ margin-left:auto; background:none; border:0; padding:0; cursor:pointer;
  font:12.5px Inter, system-ui, sans-serif; color:var(--dk-muted);
  text-decoration:underline; text-underline-offset:3px; }
.hn-fold:hover{ color:var(--dk-text); }
/* Evening / Afternoon / Morning / Night: stays at the top of the window while
   that part of the day scrolls by, so he always knows where in the day he is */
.hn-tl-day{ position:sticky; top:0; z-index:5; background:var(--dk-page);
  font:600 13px Inter, system-ui, sans-serif; color:var(--dk-text-2);
  padding:12px 0 7px; margin-top:8px; border-bottom:1px solid var(--dk-line); }
.hn-trow{ display:grid; grid-template-columns:64px 132px minmax(0, 1fr); gap:14px;
  align-items:start; padding:12px 0; border-bottom:1px solid var(--dk-line); }
.hn-trow.no-pic{ grid-template-columns:64px minmax(0, 1fr); }
.hn-ttime{ font:500 12px Inter, system-ui, sans-serif; color:var(--dk-muted);
  font-variant-numeric:tabular-nums; padding-top:2px; white-space:nowrap; }
.hn-trow .hn-pic{ border-radius:6px; }
.hn-trow .hn-title{ font-size:14.5px; margin-top:4px; }
.hn-trow.is-new{ animation:hnArrive 2.4s ease-out 1; }
@keyframes hnArrive{ from{ background:var(--dk-green-bg); } to{ background:transparent; } }
.hn-tl-more{ display:block; width:100%; margin:16px 0 0; padding:11px; cursor:pointer;
  background:var(--dk-row); color:var(--dk-text); border:0; border-radius:8px;
  font:500 13px Inter, system-ui, sans-serif; }
.hn-tl-more:hover{ background:var(--dk-hover); }
.hn-tl-more:disabled{ cursor:default; color:var(--dk-muted); }
.hn-tl-end{ text-align:center; padding:22px 0 0; }

/* the "N new stories" button: only while he is reading further down */
.hn-pill{ display:none; position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:90; cursor:pointer; border:0; border-radius:999px; padding:9px 18px;
  background:var(--dk-text); color:var(--dk-page);
  font:600 13px Inter, system-ui, sans-serif; box-shadow:0 6px 20px rgba(0,0,0,.28); }
.hn-pill.show{ display:block; animation:hnDrop .25s ease-out 1; }
/* It only slides - it never fades in. A fade that stalls (a throttled tab does
   that) would leave the button there but invisible. */
@keyframes hnDrop{ from{ transform:translate(-50%, -10px); }
                   to{ transform:translate(-50%, 0); } }

/* ---- the side boxes ------------------------------------------------------- */
.hn-box{ background:var(--dk-panel); border-radius:8px; padding:16px 16px 14px;
  box-shadow:var(--dk-shadow); }
.hn-box-title{ font:600 15px Inter, system-ui, sans-serif; color:var(--dk-text);
  margin-bottom:10px; }
/* Open positions live (his order, 2026-10-12): one row per open position; the
   whole row is the button that opens that pair's chart. */
.hn-positions{ display:flex; flex-direction:column; gap:4px; }
.hn-pos{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer;
  background:var(--dk-row); color:var(--dk-text); border:0; border-radius:6px;
  padding:8px 10px; font:13px Inter, system-ui, sans-serif; }
.hn-pos:hover{ background:var(--dk-hover); box-shadow:inset 0 0 0 1px var(--dk-line-strong); }
.hn-pos-sym{ font-weight:600; white-space:nowrap; }
.hn-pos-side{ font-size:11px; white-space:nowrap; }
.hn-pos-side.long{ color:var(--dk-green); }
.hn-pos-side.short{ color:var(--dk-red); }
.hn-pos-name{ flex:1; min-width:0; color:var(--dk-muted); font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hn-pos-go{ color:var(--dk-muted); font-size:16px; line-height:1; }
.hn-pos:hover .hn-pos-go{ color:var(--dk-text); }
.hn-positions .hn-note{ padding:2px 0; }
/* the news of the one pair he searched for - nothing is here until he does */
.hn-found-head{ display:flex; align-items:baseline; gap:10px; padding:8px 0 2px; }
.hn-found-title{ flex:1; min-width:0; font:600 13.5px Inter, system-ui, sans-serif; color:var(--dk-text); }
.hn-found-x{ background:none; border:0; padding:0; cursor:pointer; color:var(--dk-muted);
  font:12.5px Inter, system-ui, sans-serif; }
.hn-found-x:hover{ color:var(--dk-text); }
.hn-add{ position:relative; margin:10px 0 0; }
.hn-add input{ width:100%; font-size:13px; padding:8px 10px; }
.hn-add-results{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px);
  background:var(--dk-panel); border:1px solid var(--dk-line-strong); border-radius:8px;
  max-height:260px; overflow-y:auto; z-index:40; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.hn-add-results.show{ display:block; }
.hn-add-row{ display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--dk-line); padding:9px 10px;
  cursor:pointer; font:13px Inter, system-ui, sans-serif; color:var(--dk-text); }
.hn-add-row:last-child{ border-bottom:0; }
.hn-add-row:hover{ background:var(--dk-row); }
.hn-add-row.none{ cursor:default; color:var(--dk-muted); }
.hn-add-sym{ font-weight:600; }
.hn-add-name{ color:var(--dk-muted); flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.hn-add-cat{ color:var(--dk-faint); font-size:11px; text-transform:capitalize; }
.hn-line{ padding:11px 0; border-top:1px solid var(--dk-line); }
.hn-line:first-child{ border-top:0; }
.hn-line .hn-title{ font-size:13.5px; font-weight:500; margin-top:4px; }
.hn-about{ background:var(--dk-hover); color:var(--dk-text); border-radius:4px;
  padding:1px 6px; font-weight:600; font-size:11px; }
.hn-note{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); padding:10px 0 2px; }
#hnMine .hn-more{ display:block; margin:8px 0 2px; }

/* live TV */
.hn-tv-chans{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.hn-tv-chans .hn-tab{ padding:5px 10px; font-size:12px; }
.hn-tv-off{ color:var(--dk-red); }
/* Until he presses play the screen is only a button, so it is only as tall as
   one: an empty 16:9 box took 170px of the column that the pair news needs.
   It opens to a full picture the moment something plays. */
.hn-tv{ position:relative; min-height:64px; padding:8px 0; border-radius:8px; overflow:hidden;
  margin:0 auto; max-width:100%;
  background:var(--dk-row); display:flex; align-items:center; justify-content:center; }
.hn-tv.playing{ aspect-ratio:16/9; min-height:0; padding:0; }
.hn-tv iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hn-tv-play{ display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--dk-hover); color:var(--dk-text); border:0; border-radius:999px;
  padding:10px 18px; font:500 13px Inter, system-ui, sans-serif; }
.hn-tv-play:hover{ background:var(--dk-line-strong); }
.hn-tv-tri{ color:var(--dk-red); font-size:12px; }
.hn-tv .hn-note{ padding:0 14px; text-align:center; }
.hn-sources{ margin:34px 0 0; padding-top:14px; border-top:1px solid var(--dk-line);
  font:12px/1.5 Inter, system-ui, sans-serif; color:var(--dk-faint); }

/* ---- narrower screens ----------------------------------------------------- */
@media (max-width:1100px){
  .hn-grid{ grid-template-columns:minmax(0, 1fr) 300px; }
  .hn-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* no room for stories beside the big one: they go underneath, two across */
  .hn-lead{ grid-template-columns:minmax(0, 1fr); }
  .hn-lead-more{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
}
@media (max-width:860px){
  #screen-welcome.is-home{ padding:12px 14px 40px; }
  .hn-grid{ grid-template-columns:minmax(0, 1fr); }
  /* one column: the side boxes come after the news and go with the page */
  .hn-side{ position:static; }
  #hnMine{ overflow:visible; margin-right:0; padding-right:0; }
  .hn-lead{ grid-template-columns:minmax(0, 1fr); }
  .hn-hero .hn-title{ font-size:20px; }
}
@media (max-width:560px){
  /* phone: the logo takes its own line above; search and Profile share the next */
  #screen-welcome.is-home .home-top{ grid-template-columns:minmax(0, 1fr) auto; row-gap:10px; }
  #screen-welcome.is-home .home-logo{ grid-column:1 / -1; grid-row:1; }
  #screen-welcome.is-home .home-logo .brand-logo{ height:72px; }
  .home-logo .brand-logo{ height:150px; }
  .home-logo{ margin-bottom:22px; }
  #screen-welcome.is-home .home-left{ grid-column:1; }
  #screen-welcome.is-home .auth-corner{ grid-column:2; }
  #screen-welcome.is-home .global-search-wrap{ width:100%; }
  /* no room for the words beside the search on a phone: the moon and the sun
     alone say which is which */
  #screen-welcome.is-home .auth-corner .look-switch button{ font-size:0; gap:0; padding:8px 9px; }
  #screen-welcome.is-home .auth-corner .look-switch button svg{ width:15px; height:15px; }
  .hn-cards{ grid-template-columns:minmax(0, 1fr); }
  .hn-lead-more{ grid-template-columns:minmax(0, 1fr); }
  .hn-small{ grid-template-columns:96px minmax(0, 1fr); }
  .hn-trow{ grid-template-columns:56px 88px minmax(0, 1fr); gap:10px; }
  .hn-trow.no-pic{ grid-template-columns:56px minmax(0, 1fr); }
  .hn-ttime{ font-size:11px; }
}

/* ---- the logo is the refresh button (his order, 2026-10-15) ----------------
   The logo on every page reloads the app and brings him back to the same page
   (js/ui/refresh.js). It used to be a picture only (pointer-events:none on
   .page-logo / .dash-logo in theme-desk.css); the two-class rules below win
   over that. A short press dims it so the tap is seen. */
.logo-refresh{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.page-logo.logo-refresh, .dash-logo.logo-refresh{ pointer-events:auto; }
.logo-refresh .brand-logo{ transition:opacity .12s ease, transform .12s ease; }
.logo-refresh:active .brand-logo,
html.is-refreshing .logo-refresh .brand-logo{ opacity:.55; transform:scale(.97); }
.logo-refresh:focus{ outline:none; }
.logo-refresh:focus-visible{ outline:2px solid var(--dk-text); outline-offset:4px; border-radius:8px; }

/* the one line shown when a refresh is held back (a meme sale being signed) */
.refresh-note{ position:fixed; left:50%; top:12px; transform:translate(-50%, -140%);
  z-index:9999; max-width:calc(100vw - 32px); padding:10px 14px; border-radius:8px;
  background:var(--dk-panel); color:var(--dk-text); box-shadow:var(--dk-shadow);
  font-size:13px; transition:transform .2s ease; }
.refresh-note.show{ transform:translate(-50%, 0); }