/* The CSV Editor's layout: the bar, the table, the drop card and the foot. */
main.fr { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-elev); font-size: .8125rem; color: var(--text-dim); }
.fr-bar label { display: inline-flex; align-items: center; gap: 6px; }
.fr-bar .control { min-height: 28px; font-size: .8125rem; }
.fr-bar .grow { flex: 1 1 auto; }
.fr-body { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }
.fr-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 6px 14px; border-top: 1px solid var(--border); background: var(--bg-elev); font: .75rem var(--mono); color: var(--text-dim); }
.fr-foot .warn { color: var(--warning); }
.fr-foot .grow { flex: 1 1 auto; }
.fr-note { margin: 0; padding: 8px 14px; font-size: .8125rem; color: var(--text-dim); background: var(--bg-elev-2); border-bottom: 1px solid var(--border); }

/* The card is centred by its auto margins, not by align-items: a card taller than the space (a phone) then starts
   at the top and scrolls, instead of spilling upwards over the bar above it. */
.fr-drop { position: absolute; inset: 0; display: flex; padding: 20px; background: var(--bg); z-index: 2; overflow: auto; }
.fr-drop[hidden] { display: none; }
.fr-drop-card { margin: auto; width: min(640px, 100%); border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 28px; background: var(--bg-elev); text-align: center; }
.fr-drop-card.over { border-color: var(--accent); background: var(--accent-soft); }
.fr-drop-card h2 { margin: 0 0 8px; font-size: 1.25rem; letter-spacing: -.02em; }
.fr-drop-card p { margin: 0 0 16px; color: var(--text-dim); font-size: .875rem; line-height: 1.5; }
.fr-drop-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fr-formats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
.fr-formats span { padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font: .75rem var(--mono); color: var(--text-dim); }

.fr-grid { flex: 1 1 auto; min-width: 0; overflow: auto; }
.fr-grid table { border-collapse: separate; border-spacing: 0; font: .8125rem var(--mono); min-width: 100%; }
.fr-grid th, .fr-grid td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 8px; min-width: 64px; max-width: 420px; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: top; text-align: left; }
.fr-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-elev-2); font-weight: 650; cursor: pointer; user-select: none; }
.fr-grid thead th.rn, .fr-grid tbody th { width: 1%; position: sticky; left: 0; z-index: 1; min-width: 44px; background: var(--bg-elev-2); color: var(--text-dim); font-weight: 500; text-align: right; cursor: default; }
.fr-grid thead th.rn { z-index: 2; }
.fr-grid td:focus, .fr-grid thead th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.fr-grid td.num { text-align: right; }
/* A cell a spreadsheet would run as a formula (see #formula-note on the CSV page). */
.fr-grid td.formula { box-shadow: inset 3px 0 0 var(--warning); }
.fr-warn-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text); border-left: 3px solid var(--warning); animation: pop-in .18s ease; }
.fr-warn-note[hidden] { display: none; }
.fr-warn-note .btn { min-height: 28px; padding: 2px 10px; font-size: .75rem; }
.fr-grid tr.sel td { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.fr-grid .empty { padding: 28px; color: var(--text-dim); font-family: var(--sans); }
.fr-pager { display: inline-flex; align-items: center; gap: 6px; }
.fr-pager .btn { min-height: 26px; padding: 0 9px; }

@media (max-width: 760px) {
  .fr-body { flex-direction: column; }
}

@media print {
  .topbar, .toolbar, .fr-bar, .fr-foot, .fr-drop { display: none !important; }
  main.fr, .fr-body { display: block; overflow: visible; background: none; padding: 0; }
}