/* The open file's header: identity (name + path breadcrumb), the meta chips,
   the Read/Raw segment and the action toolbar — everything in .fn-preview-head
   and the breadcrumb it owns.

   Split out of styles.css, which had reached the 1000-line cap
   (test_t235g_static) and was being kept under it by shortening comments. This
   is the one block in that file with a boundary of its own: a single element
   and its descendants, with no rule outside it reaching in. Loaded immediately
   after styles.css and before phone.css, so every rule here keeps the cascade
   position it had, and these rules were already the last word on their own
   selectors within that file. */
#files-tab .fn-preview-id { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex: 1; }
/* Round-5 (operator: "the open item goes over the tabs" — a long filename bled into the
   Download/Full view/Copy row): .fn-preview-title had flex:none + no overflow handling,
   so past a point it just kept growing full-width, past .fn-preview-path (which already
   truncated correctly) and under .fn-preview-actions. Gave it shrink+truncation, capped at
   55%, so a long name couldn't crowd out the toolbar.
   Round 9 (operator: shrink priority was backwards — the FILE NAME shrank first when space
   ran out; it must be the LAST thing to shrink, with the path ellipsizing first and a
   title-attribute tooltip carrying the full path). Flexbox has no true "shrink A completely
   before B starts" primitive — flex-shrink only does WEIGHTED proportional distribution of
   the deficit — so priority here is approximated two ways: (1) .fn-preview-path's shrink
   factor is 24x .fn-preview-title's, so in every realistic crowding scenario the deficit is
   overwhelmingly absorbed by the path first; (2) .fn-preview-title's min-width is a generous
   88px floor (was 40px) and its max-width raised from 55% to 78% (was an artificial ceiling
   from round 5, back when path had no defined priority at all) — the name only ever
   ellipsizes once the path is ALREADY at its own min-width:0 floor and space is still short.
   fn-preview-actions/.fn-pv-btn get flex:none (matching the modeseg/zoomseg pattern already
   used elsewhere in this file) so the toolbar's button labels are never a shrink candidate at
   all — "Action buttons keep their labels" is enforced structurally, not by hoping the other
   two items give way first. Full path/name shown via native title-attribute tooltips (see
   renderPreview() in files-tabs.js) — belt-and-braces even for the name, which should
   essentially never truncate now. */
#files-tab .fn-preview-title {
  font-size: 13.5px; font-weight: 650; white-space: nowrap; color: var(--ui-text);
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 88px; max-width: 78%;
}
#files-tab .fn-preview-path {
  display: flex; align-items: baseline; gap: 0;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ui-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 24 auto; min-width: 0;
}
/* The floor that makes "/ / / / /" unreachable: separators do not shrink, so
   collapsible labels lost the whole deficit to them. */
#files-tab .fn-preview-path-segment {
  flex: 0 1 auto; min-width: 3.5ch; padding: 0; overflow: hidden;
  border: 0; border-radius: 2px; text-overflow: ellipsis; white-space: nowrap;
  background: transparent; color: inherit; font: inherit; line-height: inherit;
  cursor: pointer;
}
#files-tab .fn-preview-path-segment:hover,
#files-tab .fn-preview-path-segment:focus-visible {
  color: var(--ui-accent); text-decoration: underline; text-underline-offset: 2px;
}
#files-tab .fn-preview-path-segment:focus-visible {
  outline: 1px solid var(--ui-accent); outline-offset: 2px;
}
#files-tab .fn-preview-path-separator { flex: 0 0 auto; padding: 0 0.2em; }
/* The ellipsis stands for the elided ancestors; it must never ellipsise. */
#files-tab .fn-preview-path-more { flex: none; min-width: 0; }
/* Room is decided from rendered geometry, not a threshold — breadcrumbs.js. */
#files-tab .fn-preview-path[hidden] { display: none; }
#files-tab .fn-preview-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

/* Placed AFTER the header rules above: `.fn-preview-id { flex: 1 }` is the same
   specificity, so a wrap rule written earlier lost to it and the header never
   wrapped. The phone @media block this replaces had been dead for that reason,
   which is why the overlap it describes was still reachable. */
/* The preview header wraps when too narrow for one row. Was a phone @media
   rule — the right fix asked at the wrong question, since what overflows is the
   HEADER, sized by the list divider and the docked panel. Asked of the column
   now. .fn-preview-meta joins the list: left out, it stayed on the title's row
   and the title painted over the "JSON" pill — measured at 1280, title right
   500px against the chip's left 463px. */
#files-tab .fn-preview-col { container: fn-preview / inline-size; }
@container fn-preview (max-width: 480px) {
  #files-tab .fn-preview-head { flex-wrap: wrap; row-gap: 8px; }
  #files-tab .fn-preview-id { flex: 1 1 100%; }
  #files-tab .fn-preview-meta,
  #files-tab .fn-pdf-zoomseg,
  #files-tab .fn-preview-modeseg,
  #files-tab .fn-preview-actions {
    flex: 0 0 auto; margin-left: 0; flex-wrap: wrap;
  }
}
@media (max-width: 480px) { #files-tab .fn-preview-actions { width: 100%; } }
#files-tab .fn-pv-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--ui-line); color: var(--ui-text-soft);
  font-family: inherit; font-size: 12px; font-weight: 600;
}
#files-tab .fn-pv-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
/* Round-16 (operator decision, orchestrator concurs): icon-ify the preview toolbar —
   Copy/Download/Full view are icon-only now (Read/Raw stays textual — a mode word, not an
   action). Square, centered padding replaces the text button's asymmetric horizontal
   padding; the icon itself is sized down from the shell's 1.25rem .ui-icon default to keep
   this compact row from growing. */
#files-tab .fn-pv-icon-btn { padding: 6px; }
#files-tab .fn-pv-icon-btn .ui-icon { width: 18px; height: 18px; }
#files-tab .fn-pv-icon-btn[aria-pressed="true"] {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
/* AR-round6 (doc 65, coordinator addendum): full-view-only Refresh — same spin convention as
   the tree's own #fn-refresh-tree (fn-refresh-spin, already defined above), scoped to this
   button's own id rather than a shared class since it lives in a different toolbar row. */
#files-tab .fn-pv-btn:disabled { opacity: 0.5; cursor: default; }
#fn-fullview-refresh.fn-refreshing .ui-icon { animation: fn-refresh-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  #fn-fullview-refresh.fn-refreshing .ui-icon { animation: none; }
}
#files-tab .fn-preview-close { margin-left: 0; border: 0; background: transparent; color: var(--ui-muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
#files-tab .fn-preview-close:hover { background: var(--ui-hover); color: var(--ui-text); }