/* =============================================================================
   OMNIFILE — the desk's own furniture
   -----------------------------------------------------------------------------
   Everything the shared sheet already draws is drawn by the shared sheet. This
   file adds only the five 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 link intake    a pasted link, its fetch, and what came of it

   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
   Five of them, and they sit as one block because they are one decision: how
   the files get here — four buttons under the drop zone, and a link below it. 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; }

/* ------------------------------------------------------------ the link intake
   The fifth way in: a link, pasted, fetched by this tab. It sits under the drop
   zone because it is the same decision the drop zone is, and it hands what it
   fetches to the same queue. Flat, 4px, a hairline and tokens only — the house
   grammar for a new surface, and nothing the dark edition has to answer for.

   Every track is minmax(0, 1fr) and every text node may wrap anywhere: a pasted
   address is one unbroken string of two hundred characters, and it is exactly
   the thing that widens a document. See labs-grid-track-minmax0. */
.of-link {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem;
    margin-top: .9rem; padding: .85rem 1rem .95rem;
    border: 1px solid var(--line); border-radius: 4px;
}
/* A .btn is inline-flex, and inline-flex beats the browser's own [hidden] rule
   — so the attribute the script toggles would hide nothing without this. */
.of-link [hidden] { display: none !important; }
.of-link .lbl, .of-link .hint, .of-link .of-now { margin: 0; }
.of-link__urls {
    width: 100%; min-width: 0; max-width: 100%;
    min-height: 3.4rem; border-radius: 4px;
    font-size: 16px;            /* under 16px iOS zooms the page on focus */
}
.of-link__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; }
.of-link__bar .btn { flex: 0 1 auto; }
.of-link__bar .hint { flex: 1 1 14rem; min-width: 0; }

.of-fetches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.of-fetch {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem;
    padding: .65rem .1rem; border-bottom: 1px solid var(--line-soft); min-width: 0;
}
.of-fetch__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.of-fetch__name {
    flex: 1 1 12rem; min-width: 0;
    font-weight: 600; font-size: .87rem; line-height: 1.3; color: var(--ink);
    overflow-wrap: anywhere;
}
.of-fetch .st { border-radius: 4px; }
.of-fetch__url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem; color: var(--ink-55); overflow-wrap: anywhere;
}
.of-fetch__msg {
    margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink);
    overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.of-fetch__acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.of-fetch .fs-progress { border-radius: 0; }
/* A host that does not say how large the file is gets a bar that moves rather
   than one that lies about a percentage. */
.of-fetch .fs-progress.is-open > div { width: 30%; animation: of-fetch-slide 1.3s linear infinite; }
@keyframes of-fetch-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* THE TWO CHIP HUES, ONE STEP DARKER ON PAPER — the commented exception to the
   token rule. A status chip is ten-pixel uppercase text, and the shared amber
   and green measured 4.21:1 against their own wash on this page's tinted band,
   short of the 4.5:1 small text needs. These are the same two hues a step
   darker, 5.9:1 and 6.0:1. Paper only: data-dark is what marks the other
   edition, whose tokens already measure 8:1, so it is left exactly as it was.
   The queue rows and the ledger carry the same chips and get the same answer. */
html:not([data-dark]) .of-fetch .st--unknown,
html:not([data-dark]) .of-row .st--unknown,
html:not([data-dark]) .of-ledger .st--unknown { color: #92400E; }
html:not([data-dark]) .of-fetch .st--free,
html:not([data-dark]) .of-row .st--free,
html:not([data-dark]) .of-ledger .st--free { color: #166534; }

/* ------------------------------------------------------------------ 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; }
    .of-fetch .fs-progress.is-open > div { animation: none; width: 100%; opacity: .35; }
}

/* ------------------------------------------------------------------ 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; }
}