/* ============================================================
   LUMEN FIXES ,  Opera GX + rail + mobile safety
   Loaded LAST (after core-styles-02.css). Every rule is scoped
   or !important so it wins over every earlier conflicting one.
   ============================================================ */

/* ---------- 1. THE RAIL ,  one authoritative definition ----------
   The repo previously defined .rail as 78px / 60px / 72px / 52px in
   separate blocks; the last one (52px) won and clipped the labels.
   This reset forces one width and guarantees labels never truncate. */
.rail{
  width:84px !important;
  min-width:84px !important;
  max-width:84px !important;
  align-items:stretch !important;
  flex:0 0 84px !important;
  padding:8px 4px !important;
  gap:3px !important;
}
.rail button{
  width:100% !important;
  height:auto !important;
  min-height:52px !important;
  max-height:none !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:9px 2px !important;
  border-radius:10px !important;
  flex:none !important;
}
.rail button svg,
.rail button i[data-lucide],
.rail button > svg{
  width:19px !important;
  height:19px !important;
  flex:none !important;
}
.rail button span{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-align:center !important;
  font:600 9.5px/1 var(--mono,monospace) !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:inherit !important;
  padding:0 2px !important;
}
.rail button.on{
  background:color-mix(in srgb,var(--accent) 12%,transparent) !important;
  color:var(--accent) !important;
  box-shadow:none !important;
}
.rail button.on::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:12px !important;
  bottom:12px !important;
  width:3px !important;
  border-radius:0 3px 3px 0 !important;
  background:var(--accent) !important;
  transform:none !important;
}

/* ---------- 2. OPERA GX / low-power sweep ---------- */
html.opr-gx .tool-nav,
html.opr-gx .tool-head,
html.opr-gx .vbar,
html.opr-gx .rail,
html.opr-gx .composer,
html.opr-gx .home-search,
html.opr-gx .chat-nav,
html.opr-gx .pop,
html.opr-gx dialog,
html.opr-gx .toast,
html.opr-gx .chat-nav-shell,
html.opr-gx .wb-chat,
html.opr-gx .calc-panel{
  background:var(--surface,var(--bg)) !important;
  box-shadow:0 1px 0 var(--border,transparent) inset !important;
}
html.opr-gx #space-canvas{ display:none !important; }

/* ---------- 3. TOOL-CARD HOT PATH ----------
   content-visibility:auto only when the compositor is trusted. */
html.opr-gx #view-home .tool-card{
  content-visibility:visible !important;
  contain:none !important;
}
@media (min-width:1100px) and (pointer:fine){
  #view-home .tool-card{
    content-visibility:auto;
    contain-intrinsic-size:120px 96px;
    contain:layout style paint;
  }
}
@media (max-width:1099px), (pointer:coarse){
  #view-home .tool-card{
    content-visibility:visible !important;
    contain:none !important;
  }
}

/* ---------- 4. MOBILE / TOUCH SAFETY ---------- */
@media (pointer:coarse){
  .rail button:hover,
  .rail button:active{ transform:none !important; }
  .tool-card:hover{ transform:none !important; }
  .tool-card:hover .tc-icon{ transform:none !important; }
  .btn:hover,
  .ibtn:hover{ transform:none !important; }
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  textarea,
  select{ font-size:16px !important; }
  #pages,
  .msgs,
  .vbody,
  .library-grid,
  .guide-wrap{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}

/* Collapse the rail on phones ,  the content is reachable via
   in-view navigation and the study rail's secondary buttons. */
@media (max-width:720px){
  .rail{ width:64px !important; min-width:64px !important; max-width:64px !important; flex-basis:64px !important; }
  .rail button{ min-height:48px !important; padding:8px 2px !important; }
  .rail button span{ font-size:8px !important; }
}

/* ---------- 5. SAFE AREA + STUDY DESK MOBILE ---------- */
#studyMain, #view-study .shell{ padding-bottom:env(safe-area-inset-bottom,0px); }
@media (max-width:720px){
  #homeDesk{ margin:14px 12px 4px; border-radius:12px; }
  #homeDesk .desk-toggle{ padding:11px 14px; }
  #homeDesk .desk-toggle .desk-hint{ display:none; }
  #homeDesk .dash-qa{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:12px 14px 0; }
  #homeDesk .dash-qa::-webkit-scrollbar{ display:none; }
  #homeDesk .dash-qa .btn{ flex:none; }
  /* The scrollbar is hidden, so on a phone the last buttons simply ran off the
     right edge with nothing to suggest they were there. Wrapping keeps every
     shortcut reachable. */
  @media (max-width:820px){
    /* Applies to every desk quick-action row, not just the home one: the one
       under the Study Desk card had the same hidden scrollbar and pushed its
       last shortcuts off the right edge on a phone. !important because three
       stylesheets load after this one and re-assert nowrap. */
    .dash-qa{ flex-wrap:wrap !important; overflow-x:visible !important; flex-direction:row !important; }
    .dash-qa .btn{ flex:0 1 auto !important; max-width:100% !important; }
  }
  #homeDeskGrid.dash-grid{ grid-template-columns:1fr; gap:10px; padding:12px 14px 14px; }
  #view-home .pt-10{ padding-top:1.75rem; }
  #view-home .hero-title{ font-size:clamp(38px,12vw,52px); }
  #view-home .hero-note{ font-size:9px; margin-top:12px; }
  #view-home .home-search{ margin-top:20px; padding:10px 12px; }
}

/* ---------- 6. STARFIELD ,  kill on reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #space-canvas{ display:none !important; }
}

/* ============================================================
   RAIL ,  FINAL. Loaded last. Nothing after this touches .rail
   ============================================================ */

/* Desktop: 96px ,  one-word labels fit without any ellipsis logic. */
.rail{
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  flex:0 0 96px !important;
  padding:8px 6px !important;
  gap:2px !important;
  /* Scrolls rather than clipping. Ten destinations plus the calendar footer
     overflow a short viewport, and `visible` pushed the tail out of reach
     with no way to get to it. The bar looks identical because the scrollbar
     is transparent until the rail is hovered. */
  overflow-x:hidden !important;
  overflow-y:auto !important;
  min-height:0 !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  background:var(--surface);
}
.rail:hover{scrollbar-color:var(--line2) transparent}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.rail:hover::-webkit-scrollbar-thumb{background:var(--line2)}
.rail button{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:100% !important;
  height:auto !important;
  min-height:54px !important;
  padding:9px 4px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--soft) !important;
  cursor:pointer !important;
  flex:none !important;
  overflow:visible !important;
}
.rail button > svg,
.rail button > i[data-lucide],
.rail button > i{
  width:20px !important;
  height:20px !important;
  flex:none !important;
  color:inherit !important;
}
.rail button > span{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font:600 10px/1.1 var(--mono,ui-monospace,monospace) !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  color:inherit !important;
  text-align:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
.rail button:hover{
  color:var(--fg) !important;
  background:color-mix(in srgb,var(--accent) 8%,transparent) !important;
  border-color:color-mix(in srgb,var(--accent) 32%,transparent) !important;
  transform:none !important;
}
.rail button.on{
  color:var(--accent) !important;
  background:color-mix(in srgb,var(--accent) 12%,transparent) !important;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent) !important;
  box-shadow:none !important;
}
.rail button.on::before{
  content:'' !important;
  position:absolute !important;
  left:-6px !important; top:12px !important; bottom:12px !important;
  width:3px !important; border-radius:0 3px 3px 0 !important;
  background:var(--accent) !important;
  transform:none !important;
}

/* ── Tablet / phone: 84px is enough for a 6-char label at 10px ── */
@media (max-width:900px){
  .rail{
    width:84px !important; min-width:84px !important; max-width:84px !important;
    flex-basis:84px !important;
    padding:6px 4px !important;
  }
  .rail button{ min-height:50px !important; padding:8px 3px !important; gap:4px !important; }
  .rail button > span{ font-size:9.5px !important; }
  .rail button > svg,
  .rail button > i[data-lucide]{ width:18px !important; height:18px !important; }
}

/* ── Very narrow phone: drop the label entirely, icon-only ── */
@media (max-width:520px){
  .rail{
    width:60px !important; min-width:60px !important; max-width:60px !important;
    flex-basis:60px !important;
    padding:6px 4px !important;
  }
  .rail button{ min-height:46px !important; padding:8px 2px !important; gap:0 !important; }
  .rail button > span{ display:none !important; }
  .rail button > svg,
  .rail button > i[data-lucide]{ width:22px !important; height:22px !important; }
  .rail button.on::before{ left:-4px !important; }
}

/* ============================================================
   CHAT VIEW ,  defensive sizing for shrunken/zoomed viewports
   ============================================================ */
#view-study .vbar .seg{ flex:0 0 auto !important; }
#view-study .vbar .seg button{ padding:6px 12px !important; font-size:11px !important; }
#view-study .vbar .btn{ padding:7px 12px !important; font-size:12px !important; }
#chatMsgs .sugs .btn{ max-width:280px !important; margin:0 auto !important; }
.composer{ flex:0 0 auto !important; max-height:44vh !important; }
#chatIn{ min-height:44px !important; max-height:150px !important; }
/* ---------- RAIL: stop the labels overlapping ----------
   Four stylesheets set .rail button sizes with !important (84/96/60px widths,
   min-height 48/50/46px here, 54px + 40px in lumen-mobile.css, plus
   core-styles-01). Worse, the rail is a COLUMN flex container with a bounded
   height, so its buttons could be flex-shrunk below their own content: the
   icon and label kept their size while the box got smaller, and the label
   spilled onto the button underneath. That is the REVIEW / INSIGHT / LIBRARY
   / JOURNAL pile-up.

   One authoritative rule instead of four: let each button size itself and
   refuse to shrink. The rail already scrolls, so a long list is fine and
   overlap is not possible. */
.rail{ align-items:stretch !important; }
.rail button{
  flex:0 0 auto !important;          /* never shrink -> never overlap */
  height:auto !important;            /* content decides the height */
  min-height:0 !important;           /* kill the fighting !important mins */
  align-self:stretch !important;
  overflow:visible !important;
}
.rail button > span{
  line-height:1.15 !important;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* Images->PDF large previews */
.ip-card{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--panel)}
.ip-preview{width:320px;height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:var(--bg)}
.frow .ip-preview img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s}
.ip-card.dragging{opacity:.4}
.ip-card.drop-target{outline:2px dashed var(--accent)}

/* Images->PDF larger previews */
.ip-card{flex-wrap:wrap;justify-content:flex-start}
.ip-preview{flex:0 0 320px}
.ip-card .meta{flex:1 1 200px}

/* Accessibility: visible focus + reduced motion */
:root{ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
*:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}