/* ============================================================
   Zallixor — desktop.css
   The desktop shell: fixed top bar, left navigation rail, centred
   feed column, right context rail.

   Loads LAST, after ui.css, and every rule is scoped to
   `html.zx-desktop` (set by js/device-gate.js before first paint).
   Nothing here can reach a phone: if the gate never runs, the class
   is never added and the original single-column app is untouched.

   `.zx-chrome` is added by js/desktop.js only once the rails have
   actually been built, so the centre column never reserves space for
   a sidebar that failed to mount.

   Palette, radii and motion tokens all come from style.css. This
   file introduces no new colours — it is a layout and chrome layer,
   not a re-skin. The one piece of new visual language is the
   gradient rail that marks the active destination (top bar underline
   + left rail edge), which is the app's own --grad doing the one job
   a desktop shell needs that a phone shell doesn't: showing you
   where you are in a nav that's always on screen.
   ============================================================ */

html.zx-desktop {
  /* Matches --top-h so anything already anchored below the mobile top
     bar (.refresh-hint, sticky sub-headers) lines up with no changes. */
  --dt-top:      58px;
  --dt-left-w:   300px;
  --dt-right-w:  320px;
  --dt-feed-w:   640px;
  --dt-gutter:   20px;
  --dt-rail-pad: 12px;
  --dt-row-r:    10px;
}

/* ── Handoff / narrow states ─────────────────────────────────
   While the redirect to app.zallixor.com is in flight the old
   layout would flash for a frame. Hold the paint instead. */
html.zx-handoff body { visibility: hidden; }

/* ── 1. Document ─────────────────────────────────────────────
   The phone build centres a 680px column inside #app. On desktop
   #app is the whole window and the columns are positioned inside it. */

html.zx-desktop body {
  background: var(--bg-2);
  overflow-y: scroll;             /* reserve the bar so opening a modal doesn't shift the layout */
}

html.zx-desktop #app {
  max-width: none;
  margin: 0;
  border-left: 0;
  border-right: 0;
}

/* The signed-out screen is full-bleed artwork and owns the viewport
   on its own — no chrome, no rails, no reserved gutters. */
html.zx-desktop #app:has(.auth-screen) { background: var(--bg); }

/* Phone chrome. All three are replaced by the desktop bar and rails. */
html.zx-desktop .topbar,
html.zx-desktop .bottom-nav,
html.zx-desktop .ai-fab { display: none !important; }

/* Thin, quiet scrollbars — the rails scroll independently and three
   fat default bars on one screen reads as clutter. */
html.zx-desktop * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
html.zx-desktop *::-webkit-scrollbar { width: 10px; height: 10px; }
html.zx-desktop *::-webkit-scrollbar-track { background: transparent; }
html.zx-desktop *::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
html.zx-desktop *:hover::-webkit-scrollbar-thumb { background: var(--line-2); background-clip: content-box; }
html.zx-desktop *::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; }

/* ── 2. Top bar ──────────────────────────────────────────────
   Three zones on one row: brand + search, destination tabs,
   account actions. The tabs are absolutely centred on the VIEWPORT
   rather than flexed between the two side zones, so they don't
   drift sideways when the notification badge appears or the
   account name is long. */

html.zx-desktop .dt-bar {
  position: fixed; inset: 0 0 auto 0; height: var(--dt-top); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 16px;
  background: rgba(10, 14, 23, .88);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
html.zx-desktop[data-theme="light"] .dt-bar { background: rgba(255, 255, 255, .9); }

html.zx-desktop .dt-bar::before {
  content: ""; position: absolute; inset: 0;
  background: var(--aurora); pointer-events: none; z-index: -1;
}

html.zx-desktop .dt-bar-left,
html.zx-desktop .dt-bar-right { display: flex; align-items: center; gap: 8px; }
/* Equal flex-basis on both side zones is what centres the tabs: they are
   flex:0 0 auto between two zones that always claim the same share.
   Absolute centring was tried first and collided with the search pill
   around 1200px, because an absolutely-positioned element can't push
   anything out of its way. */
html.zx-desktop .dt-bar-left { flex: 1 1 0; min-width: 0; justify-content: flex-start; }
html.zx-desktop .dt-bar-right { flex: 1 1 0; min-width: 0; justify-content: flex-end; }

html.zx-desktop .dt-brand {
  display: flex; align-items: center; gap: 9px;
  background: 0; border: 0; padding: 2px 4px; cursor: pointer;
  flex: 0 0 auto;
}
html.zx-desktop .dt-brand .logo-mark { border-radius: 10px; }
html.zx-desktop .dt-brand .wordmark { font-size: 1.18rem; }

/* Search. Collapsed it is a pill; focused it widens and lifts, which
   is the one place on the bar that rewards a click with movement. */
html.zx-desktop .dt-search {
  display: flex; align-items: center; gap: 9px;
  flex: 0 1 232px; min-width: 44px; height: 40px; padding: 0 14px;
  background: var(--panel-2); border: 1px solid transparent;
  border-radius: 999px;
  transition: width var(--dur-slow) cubic-bezier(.2, .8, .3, 1),
              background var(--dur-fast), border-color var(--dur-fast);
}
html.zx-desktop .dt-search:focus-within {
  flex-basis: 320px; background: var(--panel); border-color: var(--accent-a);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html.zx-desktop .dt-search .icon { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
html.zx-desktop .dt-search input {
  flex: 1; min-width: 0; background: 0; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: .92rem;
}
html.zx-desktop .dt-search input::placeholder { color: var(--muted-2); }

/* Destination tabs. */
html.zx-desktop .dt-tabs {
  flex: 0 0 auto;
  display: flex; align-items: stretch; height: 100%; gap: 2px;
}
html.zx-desktop .dt-tab {
  position: relative; background: 0; border: 0; cursor: pointer;
  width: 78px; display: grid; place-items: center;
  color: var(--muted); padding: 0;
  transition: color var(--dur-fast), background var(--dur-fast);
}
html.zx-desktop .dt-tab svg { width: 25px; height: 25px; display: block; }
html.zx-desktop .dt-tab:hover { color: var(--text); background: var(--panel-2); }
html.zx-desktop .dt-tab:focus-visible { outline: 2px solid var(--accent-a); outline-offset: -3px; }
html.zx-desktop .dt-tab.active { color: var(--accent-a); }
/* The signature: the brand gradient as a 3px seat under the tab
   you're on. Scales from the centre so switching tabs reads as the
   marker growing into place rather than a block appearing. */
html.zx-desktop .dt-tab::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--grad);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-med) cubic-bezier(.2, .8, .3, 1);
}
html.zx-desktop .dt-tab.active::after { transform: scaleX(1); }

/* Right-hand actions. */
html.zx-desktop .dt-act {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--panel-2); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
html.zx-desktop .dt-act:hover { background: var(--panel-3); }
html.zx-desktop .dt-act:active { transform: scale(.94); }
html.zx-desktop .dt-act:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; }
html.zx-desktop .dt-act .icon { width: 21px; height: 21px; }
html.zx-desktop .dt-act svg { width: 21px; height: 21px; }
html.zx-desktop .dt-act.dt-create { background: var(--grad); color: #fff; box-shadow: var(--glow); }
html.zx-desktop .dt-act.dt-create:hover { filter: brightness(1.08); background: var(--grad); }
html.zx-desktop .dt-act.dt-ai { color: var(--accent-b); }

html.zx-desktop .dt-badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--danger); color: #fff; font-size: .64rem; font-weight: 800;
  border-radius: 9px; display: grid; place-items: center; line-height: 1;
  border: 2px solid var(--bg); pointer-events: none;
}
html.zx-desktop .dt-badge.hidden { display: none; }

/* Account chip — avatar plus a chevron, opens the account panel. */
html.zx-desktop .dt-me {
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 8px 0 3px; margin-left: 4px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; color: var(--text);
  transition: background var(--dur-fast);
}
html.zx-desktop .dt-me:hover { background: var(--panel-3); }
html.zx-desktop .dt-me:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; }
html.zx-desktop .dt-me .avatar { flex: 0 0 auto; }
html.zx-desktop .dt-me-chev { display: inline-flex; color: var(--muted); transition: transform var(--dur-med); }
html.zx-desktop .dt-me-chev .icon { width: 16px; height: 16px; }
html.zx-desktop .dt-me[aria-expanded="true"] .dt-me-chev { transform: rotate(180deg); }

/* ── 3. Account panel ────────────────────────────────────────
   Drops from the account chip. Everything in it already exists
   elsewhere in the app; this is a shorter path to it, not a new
   surface with new powers. */

html.zx-desktop .dt-menu {
  position: fixed; top: calc(var(--dt-top) + 8px); right: 14px; width: 344px; z-index: 60;
  max-height: calc(100dvh - var(--dt-top) - 24px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  transform-origin: top right;
  animation: dt-pop var(--dur-med) cubic-bezier(.2, .8, .3, 1);
}
@keyframes dt-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
html.zx-desktop .dt-menu-scrim { position: fixed; inset: 0; z-index: 59; }

html.zx-desktop .dt-menu-me {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--panel-2); color: var(--text); text-align: left;
  transition: background var(--dur-fast);
}
html.zx-desktop .dt-menu-me:hover { background: var(--panel-3); }
html.zx-desktop .dt-menu-me-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.zx-desktop .dt-menu-me-name {
  font-weight: 650; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

html.zx-desktop .dt-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

html.zx-desktop .dt-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px; cursor: pointer;
  background: 0; color: var(--text); font-size: .93rem; text-align: left;
  transition: background var(--dur-fast);
}
html.zx-desktop .dt-menu-row:hover { background: var(--panel-2); }
html.zx-desktop .dt-menu-row:focus-visible { outline: 2px solid var(--accent-a); outline-offset: -2px; }
html.zx-desktop .dt-menu-ico {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--text);
}
html.zx-desktop .dt-menu-row:hover .dt-menu-ico { background: var(--panel-3); }
html.zx-desktop .dt-menu-ico .icon { width: 18px; height: 18px; }
html.zx-desktop .dt-menu-label { flex: 1; min-width: 0; }
html.zx-desktop .dt-menu-label small { display: block; color: var(--muted); font-size: .76rem; margin-top: 1px; }
html.zx-desktop .dt-menu-chev { color: var(--muted-2); display: inline-flex; }
html.zx-desktop .dt-menu-chev .icon { width: 17px; height: 17px; }
html.zx-desktop .dt-menu-row.danger .dt-menu-ico { color: var(--danger); }

/* Toggle switch — dark mode, matching the app's own switch language. */
html.zx-desktop .dt-switch {
  width: 44px; height: 25px; flex: 0 0 auto; border-radius: 999px;
  background: var(--panel-3); border: 1px solid var(--line-2);
  position: relative; transition: background var(--dur-med), border-color var(--dur-med);
}
html.zx-desktop .dt-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--muted);
  transition: transform var(--dur-med) cubic-bezier(.2, .8, .3, 1), background var(--dur-med);
}
html.zx-desktop .dt-switch.on { background: var(--accent-a); border-color: var(--accent-a); }
html.zx-desktop .dt-switch.on::after { transform: translateX(19px); background: #fff; }

/* ── 4. Rails ────────────────────────────────────────────────
   Both are fixed and scroll on their own, so the feed keeps the
   document scroll the app already relies on for scroll memory. */

html.zx-desktop .dt-rail {
  position: fixed; top: var(--dt-top); bottom: 0; z-index: 30;
  width: var(--dt-left-w);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px var(--dt-rail-pad) 24px;
  display: flex; flex-direction: column; gap: 4px;
}
html.zx-desktop .dt-left { left: 0; }
html.zx-desktop .dt-right {
  right: 0; width: var(--dt-right-w);
  border-left: 1px solid var(--line);
  gap: 14px;
}

/* Rail navigation rows. */
html.zx-desktop .dt-nav {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--dt-row-r); cursor: pointer;
  background: 0; color: var(--text); font-size: .94rem; text-align: left;
  transition: background var(--dur-fast);
}
html.zx-desktop .dt-nav:hover { background: var(--panel-2); }
html.zx-desktop .dt-nav:focus-visible { outline: 2px solid var(--accent-a); outline-offset: -2px; }
html.zx-desktop .dt-nav-ico {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; background: var(--panel-2); color: var(--text);
}
html.zx-desktop .dt-nav-ico .icon,
html.zx-desktop .dt-nav-ico svg { width: 18px; height: 18px; }
html.zx-desktop .dt-nav-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.zx-desktop .dt-nav-count {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700;
  border-radius: 10px; display: grid; place-items: center;
}
html.zx-desktop .dt-nav-count.hidden { display: none; }

/* Active destination: tinted row plus the same gradient rail as the
   top bar, so "where I am" is stated identically in both places. */
html.zx-desktop .dt-nav.active { background: var(--accent-soft); color: var(--text); font-weight: 620; }
html.zx-desktop .dt-nav.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--grad);
}
html.zx-desktop .dt-nav.active .dt-nav-ico { background: rgba(124, 92, 255, .22); color: var(--accent-a); }

/* Icon tints, so a fifteen-row rail is scannable by colour the way
   the mobile menu grid already is. Reuses the menu's tone names. */
html.zx-desktop .dt-nav-ico.mi-violet { color: #a78bfa; background: rgba(167, 139, 250, .14); }
html.zx-desktop .dt-nav-ico.mi-cyan   { color: #22c7e0; background: rgba(34, 199, 224, .14); }
html.zx-desktop .dt-nav-ico.mi-amber  { color: #f6b545; background: rgba(246, 181, 69, .14); }
html.zx-desktop .dt-nav-ico.mi-mint   { color: #2fd8a4; background: rgba(47, 216, 164, .14); }
html.zx-desktop .dt-nav-ico.mi-rose   { color: #ff5d73; background: rgba(255, 93, 115, .14); }
html.zx-desktop .dt-nav-ico.mi-gold   { color: #ffd166; background: rgba(255, 209, 102, .14); }
html.zx-desktop .dt-nav-ico.mi-slate  { color: var(--muted); background: var(--panel-2); }

/* The "me" row at the top of the left rail reads as a person, not a
   destination — bigger avatar, no icon tile. */
html.zx-desktop .dt-me-row { padding: 8px 10px; gap: 11px; }
html.zx-desktop .dt-me-row .avatar { flex: 0 0 auto; }
html.zx-desktop .dt-me-row .dt-nav-label { font-weight: 650; letter-spacing: -.015em; font-size: .98rem; }

html.zx-desktop .dt-rail-sep { height: 1px; background: var(--line); margin: 9px 10px; }

html.zx-desktop .dt-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px 2px; color: var(--muted);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html.zx-desktop .dt-rail-head button {
  background: 0; border: 0; color: var(--accent-a); cursor: pointer;
  font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 4px 6px; border-radius: 8px;
}
html.zx-desktop .dt-rail-head button:hover { background: var(--panel-2); }

/* Rail footer: the legal/company line every desktop social product
   carries, and the app's own links rather than invented ones. */
html.zx-desktop .dt-rail-foot {
  margin-top: auto; padding: 14px 10px 0; color: var(--muted-2);
  font-size: .72rem; line-height: 1.7;
}
html.zx-desktop .dt-rail-foot a { color: inherit; text-decoration: none; }
html.zx-desktop .dt-rail-foot a:hover { text-decoration: underline; color: var(--muted); }
html.zx-desktop .dt-rail-foot .dt-foot-dot { opacity: .5; padding: 0 3px; }
html.zx-desktop .dt-rail-foot .dt-foot-copy { display: block; margin-top: 6px; }

/* ── 5. Right rail cards ─────────────────────────────────────
   Trending, contacts, suggestions. Every row here is a real
   Firestore document; an empty collection shows an empty state
   rather than filler. */

html.zx-desktop .dt-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
html.zx-desktop .dt-card > .dt-rail-head { padding: 2px 8px 6px; }

html.zx-desktop .dt-person {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: var(--dt-row-r); cursor: pointer;
  background: 0; color: var(--text); text-align: left;
  transition: background var(--dur-fast);
}
html.zx-desktop .dt-person:hover { background: var(--panel-2); }
html.zx-desktop .dt-person:focus-visible { outline: 2px solid var(--accent-a); outline-offset: -2px; }
html.zx-desktop .dt-person .avatar { flex: 0 0 auto; }
html.zx-desktop .dt-person-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.zx-desktop .dt-person-name {
  font-size: .9rem; font-weight: 580; letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.zx-desktop .dt-person-sub {
  font-size: .76rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.zx-desktop .dt-person .btn { flex: 0 0 auto; }

html.zx-desktop .dt-tag {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--dt-row-r); cursor: pointer;
  background: 0; color: var(--text); text-align: left;
  transition: background var(--dur-fast);
}
html.zx-desktop .dt-tag:hover { background: var(--panel-2); }
html.zx-desktop .dt-tag strong { font-weight: 620; font-size: .9rem; letter-spacing: -.012em; }
html.zx-desktop .dt-tag span { font-size: .74rem; color: var(--muted); }

html.zx-desktop .dt-empty {
  padding: 10px 10px 14px; color: var(--muted); font-size: .82rem; line-height: 1.5;
}
html.zx-desktop .dt-skel { padding: 4px 8px; display: flex; flex-direction: column; gap: 10px; }
html.zx-desktop .dt-skel-row { display: flex; align-items: center; gap: 10px; }
html.zx-desktop .dt-skel-row .skel-block:first-child {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
}
html.zx-desktop .dt-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* ── 6. Centre column ────────────────────────────────────────
   Only applied once the rails exist (`.zx-chrome`). */

html.zx-desktop.zx-chrome .view {
  margin-left: var(--dt-left-w);
  margin-right: var(--dt-right-w);
  padding-top: var(--dt-top);
  padding-bottom: 40px;
  min-height: 100dvh;
}

html.zx-desktop.zx-chrome .view .page {
  max-width: var(--dt-feed-w);
  margin-inline: auto;
  padding: var(--dt-gutter) 0 48px;
  gap: 16px;
}

/* Full-bleed routes. Watch is video-first and Messages is a two-pane
   conversation UI — neither wants a 640px column or a context rail,
   so the right rail steps aside and the centre takes the space. */
html.zx-desktop.zx-chrome[data-route="watch"] .view,
html.zx-desktop.zx-chrome[data-route="messages"] .view { margin-right: 0; }
html.zx-desktop.zx-chrome[data-route="watch"] .dt-right,
html.zx-desktop.zx-chrome[data-route="messages"] .dt-right { display: none; }
html.zx-desktop.zx-chrome[data-route="messages"] .view .page { max-width: 1080px; }
html.zx-desktop.zx-chrome[data-route="watch"] .view .page { max-width: none; padding-inline: var(--dt-gutter); }
html.zx-desktop.zx-chrome[data-route="marketplace"] .view .page,
html.zx-desktop.zx-chrome[data-route="discover"] .view .page,
html.zx-desktop.zx-chrome[data-route="search"] .view .page { max-width: 900px; }

/* Cards gain a hairline and real hover feedback now that there is a
   cursor to give it to. */
html.zx-desktop .post-card,
html.zx-desktop .composer {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
html.zx-desktop .post-card { transition: border-color var(--dur-med); }
html.zx-desktop .post-card:hover { border-color: var(--line-2); }

/* The greeting is a phone affordance (it fills an otherwise bare
   header). On desktop the left rail already names you. */
html.zx-desktop.zx-chrome .page-home > .greeting { display: none; }

/* Stories read as a row of cards rather than an edge-to-edge strip. */
html.zx-desktop.zx-chrome .stories-row { padding-inline: 0; }

/* ── 7. Too-narrow panel ─────────────────────────────────────
   A mouse desktop that drags its window under 1024px is not
   redirected — it is offered the handoff. Shown by device-gate.js
   adding `zx-narrow`. */

html.zx-desktop.zx-narrow .dt-toonarrow { display: grid; }
html.zx-desktop .dt-toonarrow {
  display: none; position: fixed; inset: 0; z-index: 95;
  place-items: center; padding: 24px; text-align: center;
  background: var(--bg); background-image: var(--aurora);
}
html.zx-desktop .dt-toonarrow-box { max-width: 380px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
html.zx-desktop .dt-toonarrow h2 { margin: 0; font-family: var(--font-display); letter-spacing: -.02em; }
html.zx-desktop .dt-toonarrow p { margin: 0; color: var(--muted); line-height: 1.55; }

/* ── 8. Width steps ──────────────────────────────────────────
   The right rail is context, not navigation, so it is the first
   thing to go when the window can't hold everything. */

@media (max-width: 1279px) {
  html.zx-desktop.zx-chrome .dt-right { display: none; }
  html.zx-desktop.zx-chrome .view { margin-right: 0; }
  html.zx-desktop { --dt-left-w: 264px; }
}

/* Below this the inline search field and the tab strip start competing
   for the same pixels. The field becomes a button that opens the search
   page — a smaller target for the same job, rather than an input so
   narrow you can't read what you typed. desktop.js checks whether the
   input is actually visible before deciding which behaviour to run. */
@media (max-width: 1365px) {
  html.zx-desktop .dt-search { flex-basis: 44px; padding-inline: 11px; cursor: pointer; }
  html.zx-desktop .dt-search input { display: none; }
  html.zx-desktop .dt-search:focus-within { flex-basis: 44px; box-shadow: none; }
  html.zx-desktop .dt-search:hover { background: var(--panel-3); }
  html.zx-desktop .dt-tab { width: 64px; }
  html.zx-desktop .dt-tab svg { width: 23px; height: 23px; }
}

@media (max-width: 1199px) {
  /* The wordmark is the first thing to go: the logo alone still says
     Zallixor, and the tabs need the room more than the word does. */
  html.zx-desktop .dt-brand .wordmark { display: none; }
}

@media (max-width: 1119px) {
  /* Collapse the left rail to icons. Labels go, the rail stays —
     losing navigation entirely is worse than losing its words.
     Shortcuts go with them: three identical community glyphs with no
     names attached is noise, not navigation. */
  html.zx-desktop { --dt-left-w: 76px; --dt-rail-pad: 10px; }
  html.zx-desktop .dt-nav-label,
  html.zx-desktop .dt-nav-count,
  html.zx-desktop .dt-rail-head,
  html.zx-desktop .dt-rail-foot,
  html.zx-desktop .dt-rail-sep,
  html.zx-desktop .dt-shortcuts { display: none; }
  html.zx-desktop .dt-nav { justify-content: center; padding-inline: 0; }
}

@media (min-width: 1600px) {
  html.zx-desktop { --dt-left-w: 324px; --dt-right-w: 348px; --dt-feed-w: 680px; }
}

/* ── 9. Motion preference ────────────────────────────────────
   The app already honours both the OS setting and its own
   Accessibility toggle; the desktop chrome follows the same rule. */

@media (prefers-reduced-motion: reduce) {
  html.zx-desktop .dt-menu { animation: none; }
  html.zx-desktop .dt-tab::after,
  html.zx-desktop .dt-search,
  html.zx-desktop .dt-switch::after { transition: none; }
}
html.force-reduce-motion.zx-desktop .dt-menu { animation: none; }
html.force-reduce-motion.zx-desktop .dt-tab::after,
html.force-reduce-motion.zx-desktop .dt-search,
html.force-reduce-motion.zx-desktop .dt-switch::after { transition: none; }