/* =============================================================================
   OMNIFILE — the desk's own furniture
   -----------------------------------------------------------------------------
   Everything the shared sheet already draws is drawn by the shared sheet. This
   file adds only the four things it has no shape for:

       the queue row      a file, what its bytes say, and what will happen to it
       the detail panel   the measurements, and the per-file overrides
       the run panel      the engine, the bar, the counters
       the ledger         in, out, saving, and why

   THE ONE RULE, the same one site.css states: prefer a token. Every colour
   below is var(--ink), var(--line), var(--accent) or one of the four semantic
   hues, which means the dark edition needed nothing added to dark.css for any
   of it. The two exceptions are commented where they appear, and both are
   alpha-on-currentColor rather than a literal, so they invert with the ground.
   ========================================================================== */

/* ---------------------------------------------------------------- the ways in
   Four of them, and they sit as one block because they are one decision: how
   the files get here. The drop zone is the searcher's .fs-drop; these are the
   buttons under it. */
.of-ways { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: .8rem; }
.of-ways .btn { flex: 0 1 auto; }

/* The summary strip above the list: counts and bytes, all measured. */
.of-sum {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: .5rem; margin: 1.1rem 0 .8rem;
}

/* -------------------------------------------------------------- the queue row
   A grid rather than a table, because the row has to fold on a narrow screen
   and a <td> cannot. Track 2 is minmax(0, 1fr): without the 0 a long unbroken
   filename sets the width of every other track and the document grows sideways
   — the failure this estate has hit enough times to have a name for.

   1fr is NOT a safe default here. See labs-grid-track-minmax0. */
.of-list { border-top: 1px solid var(--line); }
.of-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .55rem .7rem; align-items: center;
    padding: .6rem .2rem;
    border-bottom: 1px solid var(--line-soft);
}
.of-row:hover { background: rgba(30, 38, 43, .022); }
.of-row.is-open { background: rgba(30, 38, 43, .03); }
.of-row.is-off { opacity: .5; }

/* The name block. `overflow-wrap: anywhere` is what lets a 90-character
   filename with no spaces in it wrap instead of widening the page. */
.of-name { min-width: 0; }
.of-name b {
    display: block; font-weight: 600; color: var(--ink); font-size: .87rem;
    line-height: 1.3; overflow-wrap: anywhere;
}
/* THE DIRECT CHILD, not any descendant. `.of-name span` also matched every
   .of-flag inside the flag block — and `display: block` on an inline-flex pill
   beats it on specificity, so every flag stretched the full width of the row
   and read as a banner rather than as a chip. */
.of-name > span {
    display: block; font-size: .72rem; color: var(--ink-55);
    overflow-wrap: anywhere; line-height: 1.45;
}
.of-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* The row's right-hand end: the state chip, then the disclosure. */
.of-row__end { display: flex; align-items: center; gap: .4rem; }
.of-disc {
    font: inherit; font-size: .7rem; line-height: 1;
    padding: .34rem .5rem; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--ink-55);
    border: 1px solid var(--line);
}
.of-disc:hover { color: var(--ink); border-color: var(--ink); }
.of-disc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The flags that hang off a name: what the bytes say when the extension
   disagrees, and what a photograph is carrying. Hairline, never a fill —
   the same grammar as .fs-badge, one size down. */
/* A FLAG CARRIES A SENTENCE, NOT A WORD. `white-space: nowrap` kept the pill
   shape and, on a flag long enough to say something — a skip reason, or the
   colour a transparent picture is about to land on — pushed the text off the
   right of a 360 px screen where nobody could read it. It wraps instead, and
   is held inside the column it belongs to. */
.of-flag {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; padding: .1rem .42rem;
    border-radius: 999px; border: 1px solid currentColor;
    margin: .18rem .25rem 0 0;
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.of-flag--warn { color: var(--unsure); }
.of-flag--priv { color: var(--info); }
.of-flag--note { color: var(--ink-55); }
.of-flag--over { color: var(--accent); }

/* ------------------------------------------------------------ the detail panel
   Opened per row. Two halves: what was measured, and what to do differently
   for this one file. */
.of-detail {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line-soft);
    margin-top: .35rem; padding: .85rem 0 .3rem;
}
.of-detail[hidden] { display: none; }
.of-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: .5rem .9rem; margin-bottom: .9rem;
}
.of-fact { min-width: 0; }
.of-fact b {
    display: block; font-size: .6rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-55);
}
.of-fact span {
    display: block; font-size: .82rem; color: var(--ink);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.of-over {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: .55rem .8rem; align-items: end;
}
.of-over .lbl { margin-bottom: .3rem; }

/* -------------------------------------------------------------- the settings
   FIVE CARDS OF VERY DIFFERENT HEIGHTS, and that is the whole problem. Images
   carries a dozen controls, Audio carries two. As a grid of equal columns the
   row was as tall as its tallest card, Audio sat in a column of white space,
   and Naming — the fifth — was pushed onto a row of its own where it read as a
   narrow orphan with an empty half-page beside it.

   Multi-column instead of grid, because balancing column heights is what
   multicol is FOR: the browser fills to an even height rather than to a fixed
   row. `columns: 4 17rem` means "as many columns as will hold 17rem, but never
   more than four" — so it is four on a wide screen, two on a tablet and one on
   a phone, with no breakpoint written down and nothing to keep in step.

   `break-inside: avoid` keeps a card whole; the bottom margin does the row gap,
   because multicol has no row-gap of its own. */
.of-cards {
    columns: 4 17rem;
    column-gap: 1.4rem;
}
.of-card {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    margin: 0 0 1.1rem;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem; background: var(--paper);
    display: grid; gap: .7rem; align-content: start;
    /* NAMED, not left implicit. A grid with no template gets one `auto` column,
       and `auto` means max-content: the widest thing in the card sets the card's
       width and the card sets the document's. Two number inputs side by side —
       each about 190px at its intrinsic size — made this page 381px wide inside
       a 270px column, which is the whole of the horizontal overflow this estate
       keeps re-learning about. minmax(0, 1fr) is the fix, here and below. */
    grid-template-columns: minmax(0, 1fr);
}

/* AND THE INPUTS THEMSELVES. .field carries no width in the shared sheet — it
   is used inside .field-row, which is a flexbox that gives it one. Standing on
   its own in a grid cell it falls back to the browser's default size attribute,
   which is about twenty characters wide whatever the cell can afford. */
.of-card .field,
.of-detail .field,
.of-card input[type="text"],
.of-card input[type="number"],
.of-card select { width: 100%; min-width: 0; max-width: 100%; }
.of-over > div { min-width: 0; }
.of-card > h3 {
    font-size: .625rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-55); margin: 0;
}
.of-card .hint { margin: 0; }

/* Every control on this page is at least 16px, because under 16px iOS Safari
   zooms the viewport on focus and carries the fixed header off-screen. This is
   the site rule, restated here because this page is nothing but controls. */
.of-card select,
.of-card input[type="text"],
.of-card input[type="number"],
.of-detail select,
.of-detail input[type="text"],
.of-detail input[type="number"] { font-size: 16px; }

.of-range { display: flex; align-items: center; gap: .7rem; }
.of-range input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.of-range output {
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink);
    font-size: .85rem; min-width: 2.6rem; text-align: right;
}

/* The naming preview. Mono, because the point of it is the exact characters. */
.of-preview {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem; color: var(--ink); background: var(--tint);
    border: 1px solid var(--line); border-radius: 8px;
    padding: .5rem .65rem; overflow-wrap: anywhere;
    white-space: pre-wrap;   /* the preview can carry a second line */
    line-height: 1.7;
}

/* ------------------------------------------------------------- the run panel */
.of-engine {
    border: 1px solid var(--line); border-left: 3px solid var(--unsure);
    border-radius: 10px; padding: .9rem 1rem; background: var(--tint);
    display: grid; gap: .6rem;
}
.of-engine.is-ready { border-left-color: var(--free); }
.of-engine h3 {
    font-size: .625rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-55); margin: 0;
}
.of-engine .hint { margin: 0; }
.of-urls {
    margin: 0; padding: 0; list-style: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem; color: var(--ink-55); overflow-wrap: anywhere;
}
.of-urls li + li { margin-top: .2rem; }

.of-runbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; }
.of-runbar .btn { flex: 0 1 auto; }
.of-counts {
    display: flex; flex-wrap: wrap; gap: .3rem .9rem;
    font-size: .74rem; color: var(--ink-55); margin: .55rem 0 0;
    font-variant-numeric: tabular-nums;
}
.of-counts b { color: var(--ink); font-weight: 600; }
.of-now {
    font-size: .78rem; color: var(--ink-55); margin: .5rem 0 0;
    overflow-wrap: anywhere; min-height: 1.3em;
}

/* --------------------------------------------------------------- the ledger */
.of-ledger-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.of-ledger { width: 100%; border-collapse: collapse; font-size: .8rem; }
.of-ledger th {
    text-align: left; padding: .45rem .55rem; white-space: nowrap;
    font-size: .58rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-55);
    border-bottom: 1px solid var(--line);
}
.of-ledger td {
    padding: .45rem .55rem; border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
.of-ledger td.of-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-ledger tfoot td { font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 0; }
.of-ledger .of-file { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; min-width: 12rem; }
.of-save-up { color: var(--taken); }   /* the output got BIGGER — say so in the colour that means it */
.of-save-down { color: var(--free); }

/* The capability table: what this browser was measured to be able to do. */
.of-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .45rem; }
.of-cap {
    border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem;
    font-size: .74rem; color: var(--ink-55);
}
.of-cap b { display: block; color: var(--ink); font-weight: 600; font-size: .8rem; }
.of-cap.is-no { opacity: .55; }

/* --------------------------------------------------------------- the modal
   Reuses .fsm from the shared sheet; this is only the preview inside it. */
.of-shot { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 0 auto; }

/* ------------------------------------------------------------------ motion
   Two transitions on this page and both are decoration. Somebody who has asked
   the operating system to stop moving things has asked this page too. */
@media (prefers-reduced-motion: reduce) {
    .fs-progress > div { transition: none; }
    .of-row, .of-disc { transition: none; }
}

/* ------------------------------------------------------------------ narrow
   At 360px the row folds to two lines and the disclosure keeps its own line.
   Nothing here may set a min-width in px: one unwrappable row widens the
   document and every fixed element on it. */
@media (max-width: 33rem) {
    .of-row { grid-template-columns: auto minmax(0, 1fr); }
    .of-row__end { grid-column: 2; justify-content: flex-start; }
    .of-badge-cell { grid-column: 2; }
}