/* next-files.css (2026-10-30): Files (#/files), on the workspace's own tokens (next-v6.css and next-v7.css: ink, line, fill, surface,
   blue, the 12/13/14/15/19/28 scale). The layout is the mock's (design-proto/app/files.html): a renewals panel, the folders beside
   the table, and the open file docked at the right. Every class is prefixed fl-; nothing here restyles another page. Phone rules last,
   scoped to 699px. */

/* the wide template (next-v7-work.css, Mercury's Transactions): the table at the full width */
#view .page.fl-page { position: relative; max-width: none !important; padding-left: 32px !important; padding-right: 32px !important; }
#view .fl-page .fl-n { color: var(--v6-ink-4); }
#view .fl-page .v89-head .acts { align-items: center; }
#view .fl-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--v6-line-2); border-radius: var(--v6-r-ctl, 8px); background: var(--v6-surface); color: var(--v6-ink-4); }
#view .fl-search svg { width: 16px; height: 16px; flex: none; }
#view .fl-search input { width: 150px; height: 34px; border: 0 !important; padding: 0; background: transparent; font: inherit; font-size: 14px; color: var(--v6-ink); outline: none; box-shadow: none !important; }
#view .fl-search:focus-within { border-color: var(--v6-blue); }
#view .fl-box { background: var(--v6-surface); border: 1px solid var(--v6-line); border-radius: var(--v6-r-panel, 12px); }
#view .fl-mute { color: var(--v6-ink-4); }
#view .fl-small { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .fl-center { text-align: center; }
#view .fl-strong { font-weight: 500; color: var(--v6-ink); }
#view .fl-boundary { margin: 24px 0 40px; max-width: 90ch; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .fl-hint { margin-top: 16px; }

/* ---------- the renewals over the next 120 days ---------- */
#view .fl-rn { margin: 24px 0 0; padding: 20px 24px 16px; }
#view .fl-page > :is(.phead, .v89-head) { margin-bottom: 12px; }
@media (max-width: 1199px) { #view .fl-page > :is(.phead, .v89-head) { margin-bottom: 16px; } }
#view .fl-rn-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
#view .fl-rn-h h2 { margin: 0; font-size: 15px; line-height: 24px; font-weight: 500; color: var(--v6-ink); }
#view .fl-rn-sub { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .fl-sp { flex: 1 1 auto; }
#view .fl-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .fl-leg i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--v6-ink-5); vertical-align: 0; }
#view .fl-leg [data-tone="critical"] i { background: var(--v6-red); }
#view .fl-leg [data-tone="attention"] i { background: var(--attention-dot, #d9a300); }
#view .fl-tl { position: relative; height: 156px; margin: 16px 0 0; }
#view .fl-tl-none { margin: 16px 0 4px; font-size: 14px; line-height: 20px; color: var(--v6-ink-4); }
#view .fl-ax { position: absolute; left: 0; right: 0; top: 118px; height: 1px; background: var(--v6-line-2); }
#view .fl-tick { position: absolute; top: 114px; width: 1px; height: 9px; background: var(--v6-line-2); }
#view .fl-mo { position: absolute; top: 128px; transform: translateX(-50%); font-size: 12px; line-height: 16px; color: var(--v6-ink-4); font-variant-numeric: tabular-nums; }
#view .fl-now { position: absolute; left: 0; top: 0; bottom: 30px; width: 2px; border-radius: 1px; background: var(--v6-ink); }
#view .fl-now span { position: absolute; left: 8px; top: -2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--v6-ink); white-space: nowrap; }
#view .fl-zone { position: absolute; left: 0; top: 0; bottom: 38px; border-radius: 6px; background: color-mix(in srgb, var(--attention-dot, #d9a300) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--attention-dot, #d9a300) 22%, transparent); }
#view .fl-zone span { position: absolute; left: 10px; bottom: 6px; font-size: 12px; line-height: 16px; color: var(--attention-fg, #8a5a00); white-space: nowrap; }
#view .fl-ev { position: absolute; display: flex; flex-direction: column; align-items: flex-start; transform: translateX(-4px); text-decoration: none; z-index: 1; }
#view .fl-ev[data-lvl="0"] { top: 8px; } #view .fl-ev[data-lvl="1"] { top: 42px; } #view .fl-ev[data-lvl="2"] { top: 74px; }
#view .fl-ev i { width: 9px; height: 9px; border-radius: 50%; background: var(--v6-ink-3); box-shadow: 0 0 0 3px var(--v6-surface); }
#view .fl-ev[data-tone="attention"] i { background: var(--attention-dot, #d9a300); }
#view .fl-ev::before { content: ""; position: absolute; left: 4px; top: 9px; width: 1px; background: var(--v6-line-2); z-index: -1; }
#view .fl-ev[data-lvl="0"]::before { height: 101px; } #view .fl-ev[data-lvl="1"]::before { height: 67px; } #view .fl-ev[data-lvl="2"]::before { height: 35px; }
#view .fl-ev b { margin: -13px 0 0 15px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--v6-ink); white-space: nowrap; }
#view .fl-ev small { margin-left: 15px; font-size: 12px; line-height: 16px; color: var(--v6-ink-4); white-space: nowrap; }
#view .fl-ev:hover b { color: var(--v6-link); }
#view .fl-ev.flip { align-items: flex-end; transform: translateX(calc(-100% + 5px)); }
#view .fl-ev.flip b, #view .fl-ev.flip small { margin-left: 0; margin-right: 15px; }
#view .fl-ev.flip::before { left: auto; right: 4px; }
#view .fl-ev.flip i { align-self: flex-end; }
#view .fl-ev.bare :is(b, small) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the folders beside the table ---------- */
#view .fl-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
#view .fl-folders { padding: 8px; }
#view .fl-folders hr { height: 1px; margin: 8px 4px; border: 0; background: var(--v6-line); }
#view .fl-fd { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--v6-ink-2); text-align: left; cursor: pointer; }
#view .fl-fd span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .fl-fd svg { width: 16px; height: 16px; flex: none; color: var(--v6-ink-4); }
#view .fl-fd em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--v6-ink-4); font-variant-numeric: tabular-nums; }
#view .fl-fd:hover { background: var(--v6-fill); color: var(--v6-ink); }
#view .fl-fd[aria-pressed="true"] { background: var(--v6-fill); color: var(--v6-ink); font-weight: 500; }
#view .fl-fd[data-tone="critical"] svg { color: var(--v6-red); }

/* ---------- the table ---------- */
#view .fl-tbl { overflow: hidden; min-width: 0; }
#view .fl-tbl .tablewrap { overflow-x: auto; }
#view .fl-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
#view .fl-t th { padding: 12px 16px; text-align: left; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--v6-ink-4); border-bottom: 1px solid var(--v6-line); white-space: nowrap; }
#view .fl-t td { padding: 0 16px; height: 60px; border-bottom: 1px solid var(--v6-line); color: var(--v6-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
#view .fl-t .r { text-align: right; }
#view .fl-t tbody tr:last-child td { border-bottom: 0; }
#view .fl-t tbody tr[data-go], #view .fl-t tbody tr[data-dialog] { cursor: pointer; }
#view .fl-t tbody tr:hover td, #view .fl-t tbody tr:focus-visible td { background: var(--v6-fill); }
#view .fl-t tbody tr:focus-visible { outline: none; }
#view .fl-t tbody tr.sel td { background: var(--v6-fill); }
#view .fl-t tr.fl-none td { height: 56px; color: var(--v6-ink-4); }
#view .fl-fn { display: flex; align-items: center; gap: 12px; min-width: 0; }
#view .fl-fn > span:last-child { min-width: 0; }
#view .fl-fn b { display: block; font-weight: 400; color: var(--v6-ink); overflow: hidden; text-overflow: ellipsis; }
#view .fl-fn small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--v6-ink-4); overflow: hidden; text-overflow: ellipsis; }
#view .fl-ty { flex: none; display: grid; place-items: end center; width: 34px; height: 40px; padding-bottom: 5px; border-radius: 5px; background: var(--v6-fill); box-shadow: inset 0 0 0 1px var(--v6-line); font-size: 12px; line-height: 12px; font-weight: 600; letter-spacing: 0; color: var(--v6-ink-3); }
#view .fl-ty-miss { background: transparent; box-shadow: none; border: 1px dashed var(--v6-line-2); }
#view .fl-rw { display: flex; flex-direction: column; }
#view .fl-rw b { font-weight: 400; color: var(--v6-ink); }
#view .fl-rw small { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--v6-ink-4); }
#view .fl-rw:is([data-state="lapsed"], [data-state="no_record"]) :is(b, small) { color: var(--v6-red); }
#view .fl-rw[data-state="due_soon"] b { color: var(--v6-amber); }
#view .fl-rw[data-state="none"] b { color: var(--v6-ink-4); }
#view .fl-bk { display: inline-flex; align-items: center; gap: 8px; color: var(--v6-ink-3); }
#view .fl-bk i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--v6-ink-5); }
#view .fl-ow { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--v6-fill); box-shadow: 0 0 0 1px var(--v6-line); font-size: 12px; line-height: 12px; font-weight: 600; color: var(--v6-ink-2); }
#view .fl-empty { padding: 24px; margin-top: 24px; }

/* ---------- the open file, docked at the right ---------- */
#view .fl-panel { position: fixed; top: 56px; right: 0; bottom: 0; z-index: 205; width: 440px; max-width: 100vw; display: flex; flex-direction: column; background: var(--v6-surface); border-left: 1px solid var(--v6-line-2); box-shadow: -24px 0 48px -24px rgba(16, 18, 27, .18); }
/* under a dialog's scrim while one is open (an edit opened from the panel) */
body:has(#dialog[open]) #view .fl-panel { z-index: 59; }
#view .fl-ph { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--v6-line); flex: none; }
#view .fl-ph > div { flex: 1 1 auto; min-width: 0; }
#view .fl-ph h2 { margin: 0; font-size: 19px; line-height: 28px; font-weight: 500; color: var(--v6-ink); overflow-wrap: anywhere; }
#view .fl-ph p { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .fl-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--v6-ink-4); flex: none; }
#view .fl-x svg { width: 16px; height: 16px; }
#view .fl-x:hover { background: var(--v6-fill); color: var(--v6-ink); }
#view .fl-pb { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px 24px; }
#view .fl-pf { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 16px; border-top: 1px solid var(--v6-line); }
/* the labelled lines, as the document prints them: a sheet, with the lines a date was read from marked */
#view .fl-sheet { padding: 14px 16px 12px 36px; border-radius: 8px; background: #fff; color: #23262e; box-shadow: 0 0 0 1px var(--v6-line), 0 12px 28px -16px rgba(16, 18, 27, .35); font-size: 13px; line-height: 20px; }
#view .fl-sheet-t { margin: 0 -2px 6px -22px; padding: 0 0 8px; border-bottom: 1.5px solid #23262e; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
#view .fl-sheet-r { position: relative; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid #ece7dc; }
#view .fl-sheet-r:last-child { border-bottom: 0; }
#view .fl-sheet-r span:first-child { color: #6c707b; }
#view .fl-sheet-r .full { grid-column: 1 / -1; color: #23262e !important; }
#view .fl-sheet-r em { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; line-height: 16px; color: #8a8f9a; font-variant-numeric: tabular-nums; }
#view .fl-sheet-r.hl { margin: 0 -6px; padding: 4px 6px; border-radius: 3px; background: #eef3ff; box-shadow: 0 0 0 1px #8fb0ff; }
#view .fl-sheet-none { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--v6-fill); font-size: 13px; line-height: 20px; color: var(--v6-ink-3); }
#view .fl-sheet-none svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--v6-ink-4); }
#view .fl-ds { padding: 16px 0; border-bottom: 1px solid var(--v6-line); }
#view .fl-ds:last-of-type { border-bottom: 0; }
#view .fl-ds h3 { margin: 0; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--v6-ink-4); }
#view .fl-dl { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--v6-ink-2); }
#view .fl-dl > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--v6-ink-4); }
#view .fl-dl-l small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--v6-ink-4); overflow-wrap: anywhere; }
#view .fl-dl-v { font-size: 14px; color: var(--v6-ink); white-space: nowrap; text-align: right; }
#view .fl-dl.win > svg { color: var(--v6-ink); }
#view .fl-dl.win .fl-dl-l { color: var(--v6-ink); font-weight: 500; }
#view .fl-dl.win .fl-dl-v b { font-weight: 500; }
#view .fl-word { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 500; }
#view .fl-word[data-tone="positive"] { color: var(--positive-fg, #15803d); }
#view .fl-word[data-tone="attention"] { color: var(--attention-fg, #8a5a00); }
#view .fl-word[data-tone="critical"] { color: var(--v6-red); }
#view .fl-rem { display: flex; gap: 6px; margin-top: 10px; }
#view .fl-rem span { flex: 1 1 0; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--v6-fill); font-size: 12px; line-height: 16px; color: var(--v6-ink-3); }
#view .fl-rem span[data-past] { opacity: .72; }
#view .fl-rem b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v6-ink); }
#view .fl-rem small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--positive-fg, #15803d); }
#view .fl-rem small[data-tone="critical"] { color: var(--v6-red); }
#view .fl-sug { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--v6-fill); font-size: 13px; line-height: 20px; color: var(--v6-ink-2); }
#view .fl-sug b { font-weight: 500; color: var(--v6-ink); }
#view .fl-sug-a { display: flex; gap: 8px; }
#view .fl-sha { font-variant-numeric: tabular-nums; }
#view .fl-page.fl-open .fl-body, #view .fl-page.fl-open .fl-rn { margin-right: 0; }
#dialog .fl-dlg { width: min(620px, 100%); }

/* dark: the sheet stays paper, the marks keep their contrast */
:root[data-theme="dark"] #view .fl-sheet { background: #f7f4ed; }

/* ---------- narrower screens ---------- */
/* below 1280 the folders sit above the table as a row of chips, so the table keeps its width */
@media (max-width: 1279px) {
  #view .fl-body { grid-template-columns: minmax(0, 1fr); }
  #view .fl-folders { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  #view .fl-folders hr { display: none; }
  #view .fl-fd { width: auto; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--v6-line); }
  #view .fl-fd[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--v6-line-2); }
}
@media (max-width: 699px) {
  #view .fl-panel { top: 0; width: 100vw; z-index: 230; }
  #view .fl-rn { padding: 16px; }
  #view .fl-tl { display: none; }
  #view .fl-search input { width: 110px; }
  #view .fl-t col:nth-child(2), #view .fl-t th:nth-child(2), #view .fl-t td:nth-child(2), #view .fl-t th:nth-child(4), #view .fl-t td:nth-child(4) { display: none; }
}