/* ============================================================================
   DevPlan — Files
   A list of what the client has sent, with a way to open each one.

   A REAL TABLE, WITH A <tbody> PER GROUP.
   Not a grid of divs dressed as one: the header cells genuinely label the
   columns, the filename is the row header every other cell is read against,
   and a group is a section of the table rather than a decorative row inside
   it. That is what a screen reader needs to say "Size, 2.3 MB, charter.pdf".

   CONTAINER QUERIES, NOT MEDIA QUERIES. THIS IS NOT A STYLE PREFERENCE.
   Content width on this screen is NOT monotonic in viewport width. The rail at
   >=980px is position:fixed and .app-shell pays for it with padding-left, so
   the content column DROPS as the window grows — measured on this build:

        960px viewport  ->  848px of content
       1000px viewport  ->  656px of content     (the rail appears)

   A viewport media query therefore switches to the widest column set at the
   exact point the column is narrowest. Worse, [data-side="collapsed"] changes
   --side-w at runtime with no viewport change at all, so a media query cannot
   see it happen. Every layout question here is asked of .fx-root, the box that
   actually holds the table.

   The viewer dialog these rows open lives in filekit.css.
   ========================================================================= */

.fx-root {
  display: flex;
  flex-direction: column;
  gap: 14px;

  /* The query subject. See the header note — this is load-bearing. */
  container-type: inline-size;
  container-name: fx;
}

/* ------------------------------------------------------------------ head -- */

.fx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.fx-head__titles {
  flex: 1 1 14rem;
  min-width: 0;
}

.fx-head__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.fx-head__sub { margin: 3px 0 0; }

.fx-tools {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 16rem;
  gap: 8px;
  min-width: 0;
}

.fx-search,
.fx-select {
  min-height: var(--tap);
  padding: 0 12px;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}

.fx-search {
  flex: 1 1 auto;
  min-width: 0;
}

.fx-field { display: contents; }

.fx-select {
  flex: 0 1 auto;
  min-width: 0;
  cursor: pointer;
}

.fx-search:focus-visible,
.fx-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ----------------------------------------------------------------- empty -- */

.fx-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.fx-empty h3 { margin: 0; }
.fx-empty p { margin: 0; max-width: 42rem; }

/* ----------------------------------------------------------------- table -- */

.fx-count { margin: 0; }
.fx-count:empty { display: none; }

.fx-listwrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx-t {
  width: 100%;
  border-collapse: separate;      /* separate, so a row can keep a radius */
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Clips the first and last rows to the card's corners without having to
     special-case them. Also why there is no overflow-x wrapper: one would
     break position:sticky on the header. */
  overflow: hidden;
}

/* ---- column headers ---- */

.fx-t__head { background: var(--surface-2); }

.fx-t__h {
  position: sticky;
  top: var(--qn-stick, 0px);      /* the app's pinned header, measured by client.js */
  z-index: 1;
  padding: 9px 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-muted);
  white-space: nowrap;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.fx-t__h--size { text-align: right; }
.fx-t__h--act  { width: 1%; }

/* ---- group heading ---- */

.fx-grp__cell {
  padding: 0;
  text-align: left;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.fx-grp:first-of-type .fx-grp__cell { border-top: 0; }

.fx-grp__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.fx-grp__btn:hover { background: var(--surface-sunk); }
.fx-grp__btn:focus-visible {
  outline: none;
  box-shadow: inset var(--ring);
}

.fx-grp__caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform var(--speed) ease;
}
.fx-grp--closed .fx-grp__caret { transform: rotate(-90deg); }

.fx-grp__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.fx-grp__title {
  font-weight: 700;
  /* Seeded part titles run to 65 characters. Two lines, then ellipsis —
     a heading that pushes the file count off screen is worse than a clipped
     heading. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fx-grp__sub { color: var(--text-muted); }

.fx-grp__meta {
  flex: 0 0 auto;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Collapsing hides the files, never the heading that says how many there are. */
.fx-grp--closed .fx-t__row { display: none; }

/* ---- rows ---- */

.fx-t__row + .fx-t__row .fx-t__c { border-top: 1px solid var(--border); }
.fx-t__row:hover .fx-t__c { background: var(--surface-2); }

.fx-t__c {
  padding: 10px 12px;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
  color: var(--text);
}

.fx-t__c--file {
  /* No min-width. An earlier version set 11rem here to stop the column
     collapsing to one character — but that collapse was `display:flex` on the
     <th>, fixed properly above, and the min-width then forced the table 11px
     wider than a 375px screen. The column shrinks as far as the wrapped
     filename allows and no further, which is what a table column should do. */
  min-width: 0;
}

.fx-t__file {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-t__names { min-width: 0; }

.fx-t__name {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  /* A filename has no spaces to break at; without this one long name widens
     the table until the action buttons leave the screen. */
  overflow-wrap: anywhere;

  /* Clamped on a phone, where driver-contract-template-final-v2-signed.docx
     wraps to five lines and makes one row 216px tall — three files then fill
     the screen and the list stops being scannable. The full name is still on
     the row: it is the button's aria-label and its title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fx-t__meta {
  margin: 2px 0 0;
  color: var(--text-muted);
  /* Backstop: whatever it ends up saying, it never grows a row past a
     readable height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fx-t__msg { margin: 4px 0 0; }
.fx-t__msg:empty { display: none; }

.fx-t__c--size {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fx-t__c--type,
.fx-t__c--when {
  white-space: nowrap;
  color: var(--text-muted);
}

.fx-t__q {
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fx-t__q:hover { text-decoration: underline; }
.fx-t__q:focus-visible { outline: none; box-shadow: var(--ring); }

.fx-t__c--act { width: 1%; }

.fx-t__acts {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.fx-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 10px;
}

.fx-act__icon { width: 19px; height: 19px; flex: 0 0 auto; }

/* The word is hidden, never removed — a screen reader still hears
   "Download charter.jpg" from the aria-label at every width. */
.fx-act__word { display: none; }

/* Earlier versions: reachable, legible, quieter. */
.fx-t--quiet { background: var(--surface-2); }
.fx-t--quiet .fx-t__name { font-weight: 500; }

.fx-more {
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0 4px;
  font: inherit;
  font-size: .9rem;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fx-more:hover { color: var(--text); }
.fx-more:focus-visible { outline: none; box-shadow: var(--ring); }

.fx-none { margin: 4px 0 0; }

/* ------------------------------------------------------------ the tiers -- */
/* Three, not two, because the content column here is small at exactly the
   moment the window is large. Measured on this build: a 980px viewport gives
   636px of content (39.7rem) once the fixed rail and the shell padding are
   paid for. A single 46rem switch would leave the NARROWEST desktop showing
   the phone's three columns across 636px of empty table.

     base            File · Size · Actions            (phone, ~358px)
     >= 34rem        + Question                       (980px viewport lands here)
     >= 46rem        + Type · Sent, action words      (wide, or rail collapsed)

   Each fact is rendered exactly once at any width: a column and its folded
   copy in the meta line are never both visible. */

.fx-t__h--type, .fx-t__c--type,
.fx-t__h--q,    .fx-t__c--q,
.fx-t__h--when, .fx-t__c--when { display: none; }

@container fx (min-width: 34rem) {
  .fx-t__h--q, .fx-t__c--q { display: table-cell; }
  .fx-t__m--q { display: none; }        /* the column says it now */
}

@container fx (min-width: 46rem) {
  .fx-t__h--type, .fx-t__c--type,
  .fx-t__h--when, .fx-t__c--when { display: table-cell; }

  /* Every part of it now has a column of its own. */
  .fx-t__meta { display: none; }

  .fx-act__word { display: inline; }
  .fx-act { padding: 0 12px; }
  .fx-t__name { -webkit-line-clamp: 3; }
}

/* At the widest, the filename gets the slack rather than the metadata. */
@container fx (min-width: 62rem) {
  .fx-t__c--file, .fx-t__h--file { width: 42%; }
}