/* ============================================================
   Lopaostab — desktop.css

   The desktop edition's layout. Loaded after style.css so it only ever
   overrides.

   SCOPED BY EDITION, NOT BY WIDTH. Every rule sits under
   html[data-edition="desktop"], which the inline gate in index.html sets
   only on the desktop host (web-lopaostab.zallixor.com) or when
   ?desktop=1 forces it.

   That is deliberately not a normal responsive breakpoint:

   - On lopaostab.zallixor.com this file contributes NOTHING at any
     window size, so the mobile edition stays the mobile app even on a
     3440px monitor and the two subdomains never blur together.
   - On the desktop host the layout holds at any window size. Keying it
     to min-width would have collapsed the desktop site back to a phone
     layout the moment someone snapped the window to half the screen —
     exactly when a desktop layout is most useful.

   Real phones never reach this file: the gate redirects them to the
   mobile host before first paint.

   ONE BUILD, TWO SUBDOMAINS. Deploy the same zip to both. Two builds
   would mean two copies of every screen to keep in step forever.

   THE APPROACH: the same DOM app.js already renders is re-laid-out, and
   js/desktop.js adds the chrome a phone has no room for — a full
   sidebar, a search field, an account menu, a right rail. No screen is
   rebuilt; every one of them is the same code the mobile edition runs.

   PALETTE: this file introduces no colours of its own. Every value below
   is one of the app's existing tokens (--panel, --line, --accent-a,
   --accent-soft, ...), so the desktop edition inherits light mode, dark
   mode and the accent setting for free, and a future palette change
   reaches it without anyone remembering to update this file.
   ============================================================ */

html[data-edition="desktop"] {
  /* Wider than the first pass (252px): the sidebar now carries real
     labels like "Safety & scam reports", and a rail that wraps or
     truncates its own navigation is worse than one that costs 16px. */
  --dt-rail: 268px;
  --dt-right: 312px;
  --dt-feed: 640px;
}

/* The mobile shell centres everything in a phone-shaped column. Here the
   shell is the whole window and the column moves inside it, so the
   sidebar can sit against the left edge. */
html[data-edition="desktop"] #app { max-width: none; margin: 0; }

/* ── Top bar ──────────────────────────────────────────────────────── */
html[data-edition="desktop"] .topbar {
  padding-left: 20px; padding-right: 20px;
  height: var(--top-h);
  gap: 16px;
}
html[data-edition="desktop"] .topbar-left { gap: 10px; cursor: pointer; flex: 0 0 auto; }
html[data-edition="desktop"] .topbar-right { gap: 6px; flex: 0 0 auto; }

/* Search: on a phone this is an icon that opens a screen containing a
   field. There are several hundred spare pixels here, so it is just the
   field. The icon button beside it is left in place — it still works,
   and removing it would move a control people have already learned. */
html[data-edition="desktop"] .dt-search {
  flex: 1 1 auto; max-width: 340px;
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
html[data-edition="desktop"] .dt-search:focus-within {
  border-color: var(--accent-a);
  background: var(--panel);
}
html[data-edition="desktop"] .dt-search-ico { display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
html[data-edition="desktop"] .dt-search-ico .icon { width: 18px; height: 18px; }
html[data-edition="desktop"] .dt-search-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: .92rem;
}
html[data-edition="desktop"] .dt-search-input::placeholder { color: var(--muted-2); }
/* Safari draws its own clear button inside type=search. */
html[data-edition="desktop"] .dt-search-input::-webkit-search-decoration,
html[data-edition="desktop"] .dt-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Account button — avatar + caret, the corner every desktop web app
   puts the account menu in. */
html[data-edition="desktop"] .dt-account-btn {
  width: auto; padding: 0 6px 0 3px; gap: 2px;
  display: flex; align-items: center;
  border-radius: 999px;
}
html[data-edition="desktop"] .dt-account-btn:hover { background: var(--panel-2); }
html[data-edition="desktop"] .dt-account-caret { display: grid; place-items: center; color: var(--muted); }
html[data-edition="desktop"] .dt-account-caret .icon { width: 15px; height: 15px; }

/* ── The mobile nav pill is hidden, not deleted ───────────────────────
   app.js still renders .bottom-nav, it still holds its handlers, and
   updateNavActive() still drives it. It is hidden here only because the
   sidebar below is a strict SUPERSET of it: every one of its five
   destinations is in that sidebar, alongside fifteen more. Showing both
   would be the same five buttons twice.

   Keeping it in the DOM matters — it is what js/desktop.js watches for
   to know the app shell has mounted. */
html[data-edition="desktop"] .bottom-nav { display: none; }

/* ── Left sidebar (js/desktop.js) ─────────────────────────────────────
   The phone's thumb bar holds five destinations because five is what
   fits under a thumb. This holds every section in the app, because the
   reason to open the web version is to reach more of it in fewer clicks.

   Rows are .nav-item, the same class the phone's nav uses, so
   updateNavActive() highlights them with no second implementation. */
html[data-edition="desktop"] .dt-sidebar {
  position: fixed;
  left: 0; top: var(--top-h); bottom: 0;
  width: var(--dt-rail);
  display: flex; flex-direction: column; align-items: stretch;
  gap: 2px;
  padding: 14px 12px 24px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
html[data-edition="desktop"] .dt-sidebar::-webkit-scrollbar { width: 8px; }
html[data-edition="desktop"] .dt-sidebar::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
html[data-edition="desktop"] .dt-sidebar::-webkit-scrollbar-track { background: transparent; }

html[data-edition="desktop"] .dt-side-item {
  flex: 0 0 auto;
  display: flex; flex-direction: row;
  justify-content: flex-start; align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 12px;
  background: transparent; border: 0;
  color: var(--text); text-align: left;
  border-radius: 12px;
  cursor: pointer; position: relative;
  transition: background var(--dur-fast);
}
html[data-edition="desktop"] .dt-side-item .nav-icon {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  color: var(--muted);
}
html[data-edition="desktop"] .dt-side-item .nav-icon .icon,
html[data-edition="desktop"] .dt-side-item .nav-icon svg { width: 23px; height: 23px; }
html[data-edition="desktop"] .dt-side-item .nav-label {
  display: block;
  font-size: .93rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-edition="desktop"] .dt-side-item:hover { background: var(--panel-2); }
html[data-edition="desktop"] .dt-side-item.active { background: var(--accent-soft); }
html[data-edition="desktop"] .dt-side-item.active .nav-icon { color: var(--accent-a); }
html[data-edition="desktop"] .dt-side-item.active .nav-label { font-weight: 700; }
html[data-edition="desktop"] .dt-side-item:focus-visible {
  outline: 2px solid var(--accent-a); outline-offset: -2px;
}

/* Your own row, at the top — the same place the Menu screen puts it. */
html[data-edition="desktop"] .dt-side-me {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 8px 10px; margin-bottom: 4px;
  background: transparent; border: 0; color: var(--text);
  text-align: left; border-radius: 12px; cursor: pointer;
  transition: background var(--dur-fast);
}
html[data-edition="desktop"] .dt-side-me:hover { background: var(--panel-2); }
html[data-edition="desktop"] .dt-side-me .nav-label {
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

html[data-edition="desktop"] .dt-side-group { display: contents; }

/* Unread counts. These carry data-badge rather than the top bar's ids —
   app.js finds those by getElementById, so a duplicate id would break
   the original lookup. */
html[data-edition="desktop"] .dt-side-badge {
  margin-left: auto; flex: 0 0 auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--accent-b); color: #2A1A00;
  font-size: .7rem; font-weight: 800; line-height: 20px;
  text-align: center; border-radius: 10px;
}
html[data-edition="desktop"] .dt-side-badge.hidden { display: none; }

/* See more / See less. The long tail is collapsed on first load so the
   sidebar reads as navigation rather than a wall of twenty rows — but
   one click opens it and the choice is remembered. */
html[data-edition="desktop"] .dt-side-toggle .nav-icon { transition: transform var(--dur-med); }
html[data-edition="desktop"] .dt-side-toggle.flipped .nav-icon { transform: rotate(180deg); }
html[data-edition="desktop"] .dt-side-more { display: none; flex-direction: column; gap: 2px; }
html[data-edition="desktop"] .dt-side-more.open { display: flex; }

html[data-edition="desktop"] .dt-side-ai-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
}

/* Create. The corner FAB still exists and still works; this is the same
   sheet, in the place a mouse expects to find it. */
html[data-edition="desktop"] .dt-side-create {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 12px 2px 4px; padding: 11px 14px;
  background: var(--grad); color: #fff;
  border: 0; border-radius: 14px;
  font-size: .93rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; box-shadow: var(--glow);
}
html[data-edition="desktop"] .dt-side-create .nav-icon { display: grid; place-items: center; }
html[data-edition="desktop"] .dt-side-create .icon { width: 19px; height: 19px; }
html[data-edition="desktop"] .dt-side-create:hover { filter: brightness(1.06); }

html[data-edition="desktop"] .dt-side-foot {
  margin-top: auto; padding: 16px 12px 0;
  border-top: 1px solid var(--line);
}
html[data-edition="desktop"] .dt-foot-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-bottom: 6px;
}
html[data-edition="desktop"] .dt-foot-link {
  background: transparent; border: 0; padding: 0;
  color: var(--muted-2); font: inherit; font-size: .72rem;
  cursor: pointer; text-decoration: none;
}
html[data-edition="desktop"] .dt-foot-link:hover { color: var(--accent-a); text-decoration: underline; }
html[data-edition="desktop"] .dt-foot-dot { color: var(--muted-2); font-size: .72rem; }
html[data-edition="desktop"] .dt-foot-copy { color: var(--muted-2); font-size: .72rem; }

/* ── Account dropdown ─────────────────────────────────────────────── */
html[data-edition="desktop"] .dt-menu {
  position: fixed; z-index: 60;
  width: 320px; max-height: calc(100dvh - var(--top-h) - 24px);
  overflow-y: auto;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
html[data-edition="desktop"] .dt-menu-me {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; width: 100%;
  background: transparent; border: 0; color: var(--text);
  text-align: left; border-radius: 14px; cursor: pointer;
  transition: background var(--dur-fast);
}
html[data-edition="desktop"] .dt-menu-me:hover { background: var(--panel-2); }
html[data-edition="desktop"] .dt-menu-me-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-edition="desktop"] .dt-menu-me-name {
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-edition="desktop"] .dt-menu-me-sub { color: var(--muted); font-size: .82rem; }
html[data-edition="desktop"] .dt-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
html[data-edition="desktop"] .dt-menu-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px;
  background: transparent; border: 0; color: var(--text);
  text-align: left; border-radius: 12px; cursor: pointer;
  transition: background var(--dur-fast);
}
html[data-edition="desktop"] .dt-menu-row:hover { background: var(--panel-2); }
html[data-edition="desktop"] .dt-menu-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel-2); color: var(--text);
}
html[data-edition="desktop"] .dt-menu-row:hover .dt-menu-ico { background: var(--panel-3); }
html[data-edition="desktop"] .dt-menu-ico .icon { width: 18px; height: 18px; }
html[data-edition="desktop"] .dt-menu-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
html[data-edition="desktop"] .dt-menu-label { font-size: .92rem; font-weight: 600; }
html[data-edition="desktop"] .dt-menu-sub { color: var(--muted); font-size: .76rem; }
html[data-edition="desktop"] .dt-menu-chev { color: var(--muted-2); display: grid; place-items: center; }
html[data-edition="desktop"] .dt-menu-chev .icon { width: 16px; height: 16px; }
html[data-edition="desktop"] .dt-menu-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 10px 8px 4px; margin-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--muted-2); font-size: .72rem;
}

/* Switch — used by the dark mode row. */
html[data-edition="desktop"] .dt-switch {
  flex: 0 0 auto; position: relative;
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--line-2);
  transition: background var(--dur-med);
}
html[data-edition="desktop"] .dt-switch.on { background: var(--accent-a); }
html[data-edition="desktop"] .dt-switch-dot {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform var(--dur-med);
}
html[data-edition="desktop"] .dt-switch.on .dt-switch-dot { transform: translateX(18px); }

/* ── Centre column ───────────────────────────────────────────────── */
html[data-edition="desktop"] .view {
  margin-left: var(--dt-rail);
  min-height: calc(100dvh - var(--top-h));
  /* Mobile reserves room for the floating nav pill. There is no pill. */
  padding-bottom: 40px;
}
html[data-edition="desktop"] .page {
  max-width: var(--dt-feed);
  margin: 0 auto;
  padding: 22px 16px 40px;
}

/* Both FABs sat above the nav pill; with it gone they drop to the
   corner, clear of the centre column. */
html[data-edition="desktop"] .create-fab { right: 28px; bottom: 28px; }
html[data-edition="desktop"] .ai-fab { right: 28px; bottom: 96px; }

/* Lopa Clips is a phone-shaped vertical video feed. Stretched to 1920px
   it would letterbox every clip into a strip, so it keeps a narrow frame
   and centres itself in the space instead. */
html[data-edition="desktop"] .reels-screen {
  max-width: 460px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* Modals were sized for a phone viewport. */
html[data-edition="desktop"] .modal { max-width: 560px; }
html[data-edition="desktop"] .composer-modal { max-width: 620px; }
html[data-edition="desktop"] .sheet { max-width: 560px; margin: 0 auto; border-radius: 18px 18px 0 0; }

/* ── Right rail (js/desktop.js) ─────────────────────────────────── */
html[data-edition="desktop"] .dt-rail {
  position: fixed; right: 0; top: var(--top-h); bottom: 0;
  width: var(--dt-right);
  padding: 20px 16px 40px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
html[data-edition="desktop"] .dt-rail-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
html[data-edition="desktop"] .dt-rail-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--muted); margin: 0;
}
html[data-edition="desktop"] .dt-me { display: flex; align-items: center; gap: 11px; cursor: pointer; }
html[data-edition="desktop"] .dt-me-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
html[data-edition="desktop"] .dt-me-handle { color: var(--muted); font-size: .8rem; }

/* Contacts — real people you follow, not a "you may know" model this
   app doesn't have. */
html[data-edition="desktop"] .dt-contact {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 8px;
  background: transparent; border: 0; color: var(--text);
  text-align: left; border-radius: 10px; cursor: pointer;
  transition: background var(--dur-fast);
}
html[data-edition="desktop"] .dt-contact:hover { background: var(--panel); }
html[data-edition="desktop"] .dt-contact-name {
  font-size: .88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

html[data-edition="desktop"] .dt-tag {
  background: transparent; border: 0; color: var(--text);
  text-align: left; padding: 7px 9px; border-radius: 10px;
  font-size: .9rem; font-weight: 600; cursor: pointer;
}
html[data-edition="desktop"] .dt-tag:hover { background: var(--panel); color: var(--accent-a); }
html[data-edition="desktop"] .dt-rail-foot { color: var(--muted-2); font-size: .72rem; line-height: 1.5; padding: 0 4px; }

/* The one place a width test is still the right test: whether three
   columns physically fit is a space question, not an edition question.
   Below 1280px the rail is hidden and the feed reclaims the room —
   a squeezed feed is worse than no rail.

   The SIDEBAR is not width-gated the same way. It is the app's
   navigation, so it holds at every window size; only the third column,
   which is supplementary, gives way. */
@media (min-width: 1280px) {
  html[data-edition="desktop"] .view { margin-right: var(--dt-right); }
}
@media (max-width: 1279px) {
  html[data-edition="desktop"] .dt-rail { display: none; }
}

/* Very narrow desktop windows: the search field is the first thing that
   can go, since the search icon button beside it does the same job. */
@media (max-width: 900px) {
  html[data-edition="desktop"] .dt-search { display: none; }
}

/* Respect the OS "reduce motion" setting — the only motion here is the
   caret flip and the theme switch, both of which are fine as jumps. */
@media (prefers-reduced-motion: reduce) {
  html[data-edition="desktop"] .dt-side-toggle .nav-icon,
  html[data-edition="desktop"] .dt-switch,
  html[data-edition="desktop"] .dt-switch-dot { transition: none; }
}

/* ── Channels on desktop ──────────────────────────────────────────────
   The channel screen is the one place the desktop edition should NOT
   simply reuse the 640px feed column. A channel is a browse surface —
   a wall of video thumbnails — and that is exactly what a wide window
   is good for. YouTube gives it the full width, and so does this.

   Nothing here loads extra data: it is the same tabs, the same grid and
   the same 40-post snapshot the phone renders, laid out wider. */
html[data-edition="desktop"] .page-channel,
html[data-edition="desktop"] .page-channels {
  max-width: 1100px;
}

/* Three across at the standard desktop width, four on a very wide
   monitor. auto-fill with a min track means it reflows on its own
   instead of needing a breakpoint per column count. */
html[data-edition="desktop"] .channel-vid-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
html[data-edition="desktop"] .channel-vid-title { font-size: .93rem; }

/* A banner is the first thing you see on a channel, and at this width a
   phone-height cover looks like a stripe. */
html[data-edition="desktop"] .channel-cover { height: 200px; border-radius: 16px; }
html[data-edition="desktop"] .channel-head-body { gap: 16px; padding: 0 4px; }
html[data-edition="desktop"] .channel-avatar { width: 112px; height: 112px; }
html[data-edition="desktop"] .channel-name { font-size: 1.6rem; letter-spacing: -.02em; }

html[data-edition="desktop"] .channel-tabs { gap: 6px; margin-bottom: 18px; }
html[data-edition="desktop"] .channel-tab { padding: 12px 18px; font-size: .95rem; }
html[data-edition="desktop"] .channel-tab:hover { background: var(--panel-2); border-radius: 10px 10px 0 0; }

/* About is prose. Full width would run past a comfortable measure, so
   it keeps a readable line length while the grid uses the whole space. */
html[data-edition="desktop"] .channel-about { max-width: 640px; }

/* The directory reads better as cards than as a single tall list once
   there is room for more than one column. */
html[data-edition="desktop"] .page-channels .fp-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* A QR shown on a monitor is usually being scanned by a phone held up to
   it, so it can afford to be bigger than on a phone screen. */
html[data-edition="desktop"] .qr-art { width: 300px; }

/* ── Wide screens: channels reclaim the right rail ────────────────────
   The rail is supplementary; a channel's video grid is the content. On
   every other screen the rail earns its 312px, but here it would push a
   thumbnail wall into two thirds of the window for no gain — so on the
   channel directory and a channel page it stands down and the grid takes
   the room.

   body[data-route] is set by updateNavActive() in app.js, so this
   follows real navigation rather than duplicating the route table. */
html[data-edition="desktop"] body[data-route="channel"] .dt-rail,
html[data-edition="desktop"] body[data-route="channels"] .dt-rail { display: none; }

@media (min-width: 1280px) {
  html[data-edition="desktop"] body[data-route="channel"] .view,
  html[data-edition="desktop"] body[data-route="channels"] .view { margin-right: 0; }
}

/* A pointer exists here, so the grid can answer it. Kept to a border and
   a slight lift — a thumbnail that jumps is distracting when there are
   twenty of them on screen. */
html[data-edition="desktop"] .channel-vid-thumb {
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
html[data-edition="desktop"] .channel-vid:hover .channel-vid-thumb {
  transform: translateY(-2px);
  border-color: var(--accent-a);
}
html[data-edition="desktop"] .channel-vid:hover .channel-vid-title { color: var(--accent-a); }

@media (prefers-reduced-motion: reduce) {
  html[data-edition="desktop"] .channel-vid-thumb { transition: none; }
  html[data-edition="desktop"] .channel-vid:hover .channel-vid-thumb { transform: none; }
}