/* ==========================================================================
   generated-file.css — the in-conversation generated file row
   --------------------------------------------------------------------------
   Source of truth: Figma rMEk1pvm3hlrn2JuW5Sw34, node 166:3466
   ("Generating Indicator"), 483 x 82.

   TWO STATES, ONE NODE. 166:3466 carries both marks: 166:3473 "file-code" is
   visible and 166:3477 "logo-generating" sits in the same frame hidden, parked
   below it at (16, 98). That hidden layer is the component's other state — the
   file is not in the reader's hands yet, so the Orcheum mark stands in the 32
   slot instead of the type mark. Nothing else about the row changes between
   them, so this file is one component with a state class, not two components.

   THE TYPE MARK IS A FAMILY. §3 publishes 166:3521 "Artifact icons" —
   file-code, file-text, file-pdf, file-spreadsheet — which maps one-to-one
   onto the formats this product actually produces. 166:3466 states file-code
   because its example is an HTML draft; a PDF row takes file-pdf from the same
   family rather than wearing the code mark. See the note in generated-file.js.

   REPLACES `.msg-file` — the row that stood in project-workspace.css (268-286)
   and artifact-viewer.css (9-54, 297-304), and its second copy inline in
   index.html. What actually changed:
     fill      card/background (#e1e5e680)   ->  #f5f4f0
     edge      card/border (#bdc4c680)       ->  #f0eeec
     radius    12                            ->  12 (unchanged)
     height    content (approx 41)           ->  82
     padding   12 / 14                       ->  0 / 16
     mark      file.svg, 16, left            ->  the type family, 32, RIGHT
     text      one ellipsised label, 13      ->  name over type, 14 / 1.6
     action    two 10px chips on a tint      ->  one 25-tall white chip, r6
     order     mark, label, actions          ->  text, action, mark
   Nothing of that row survives; the selectors are gone from both stylesheets.

   TYPOGRAPHY — A KIT CONTRADICTION, RESOLVED BY THE KIT. 166:3467 names
   `Styrene B Trial: Regular`. That face appears nowhere else in the file and is
   absent from §2 "Typography System" (158:894), which is the kit's own
   authority on type and sets 14px sans as Geist Regular (158:912 "Body
   Small"). It is also a trial licence this product does not hold and does not
   load. So the row is set in the product's --font-sans (Geist) at the size,
   line-height and tracking 166:3467 states. No global type token is touched
   and no font is added. Reported as a kit conflict rather than silently
   resolved.

   COLOUR. Four values styles/colors.css does not carry are declared as
   component variables here rather than pushed into the global token layer,
   following projects-index.css and artifacts-index.css.
   ========================================================================== */

.ocgf {
  /* 166:3466 — the row's fill and hairline. */
  --ocgf-bg: #f5f4f0;
  --ocgf-edge: #f0eeec;
  /* 166:3468 / 166:3469 — the name and the type line. */
  --ocgf-name: #141413;
  --ocgf-type: #3d3d3a;
  /* 166:3470 / 166:3472 — the chip: white on a #d9d1cb hairline, ink #19213d.
     The edge is the same value §3's outline button uses; nothing else about
     the two controls agrees, so this is a coincidence of palette and not a
     reason to share the component. See the note on .ocgf__download. */
  --ocgf-chip-bg: #ffffff;
  --ocgf-chip-edge: #d9d1cb;
  --ocgf-chip-ink: #19213d;

  display: flex;
  align-items: center;
  gap: 12px;
  /* The node is placed at 483. In the thread the row is as wide as the answer
     body; only the HEIGHT is fixed, which is what 166:3466 actually pins. */
  width: 100%;
  height: 82px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 12px;
  /* Inside stroke, as everywhere else in the kit: a real border would make the
     row 84 tall and move the 16 padding 1px in. */
  box-shadow: inset 0 0 0 1px var(--ocgf-edge);
  background: var(--ocgf-bg);
  /* The row is a container, not a control — 166:3466 draws no whole-row
     affordance. `.ocgf--openable` below adds one only where the product has a
     real open action to attach. */
  text-align: left;
}

/* Rows stack in the answer body the way the other blocks there do. */
.ocgf + .ocgf { margin-top: 8px; }

/* ---- Info ---------------------------------------------------- 166:3467 ---
   Flexes into whatever the row has left, its two lines 16 apart, the pair
   centred on the row's height. 166:3467 sets `overflow-clip`, so a long name
   is cut here rather than pushing the chip or the mark out of the row. */
.ocgf__info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

/* 166:3468 / 166:3469 — 14 / 1.6, tracking -0.28, and a CAP-TRIMMED box.
   166:3467 sets `text-box-trim: trim-both` with `text-box-edge: cap
   alphabetic`, which is why the two text nodes measure 10 tall rather than the
   22.4 a 14/1.6 line box would be: 10 + 16 + 10 = 36, centred in 82, puts the
   name's cap box at y 23 and the type's at y 49 — exactly where the frame
   draws them. Reproduced with the real property where the browser has it, and
   with an explicit 10px box the glyphs centre on where it does not; the
   fallback differs from cap-trim by well under a pixel at this size, because
   Geist's cap height is 0.72em = 10.08 at 14. */
.ocgf__name,
.ocgf__type {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 10px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);     /* 14 */
  line-height: 1.6;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

@supports (text-box: trim-both cap alphabetic) {
  .ocgf__name,
  .ocgf__type {
    display: block;
    height: auto;
    text-box: trim-both cap alphabetic;
  }
}

/* A name longer than the row ellipsises rather than clipping mid-glyph. */
.ocgf__name,
.ocgf__type {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ocgf__name { color: var(--ocgf-name); }   /* 166:3468 */
.ocgf__type { color: var(--ocgf-type); }   /* 166:3469 */

/* ---- Download ------------------------------------------------ 166:3470 ---
   NOT the shared button. §3's outline variant (160:2844) is 8/10 padding,
   Geist Regular 14 over an 18 line box, radius 8, 34 tall. 166:3470 is 2/8,
   Geist Medium 12 over a 16 line box, radius 6, 25 tall. The two share a
   hairline colour and a word and nothing else, so this control is the node's
   own — forcing components/ui/button.css onto it would need a local override
   for every value it states.

   Width hugs its label: 8 + 57 + 8 = 73 for "Download", which is 166:3470's
   measured width. */
.ocgf__download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 25px;
  margin: 0;
  padding: 2px 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--ocgf-chip-edge);
  background: var(--ocgf-chip-bg);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-xs);     /* 12 */
  line-height: 16px;             /* 166:3471 is 16 tall */
  color: var(--ocgf-chip-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease;
}

/* 166:3466 draws no hover for the chip. Rather than ship a control with no
   feedback or invent a colour, it takes the tint the product's other secondary
   surfaces already use. */
.ocgf__download:hover:not(:disabled) {
  background: var(--color-button-secondary-hover-bg);
}

.ocgf__download:focus-visible {
  outline: 2px solid #838b8e;
  outline-offset: 2px;
}

.ocgf__download:disabled {
  cursor: default;
  opacity: 0.5;
}

/* ---- The mark ------------------------------------------------ 166:3473 ---
   32 x 32 at the row's tail, 16 in from the edge and centred on the height.
   The asset carries its own inner geometry (each file in
   assets/icons/generated-file/ is authored at this slot), so the box is set
   once and no descendant rule reaches into the drawing. */
.ocgf__mark {
  flex: 0 0 auto;
  display: block;
  width: 32px;
  height: 32px;
}

/* 166:3477's own box is 31.6832 x 32 — the logo is NOT square, and stretching
   it to 32 would round its rays. It keeps its width and stays centred in the
   32 the slot reserves. */
.ocgf__mark--logo {
  width: 31.6832px;
  margin: 0 0.1584px;            /* (32 - 31.6832) / 2, so the slot stays 32 */
  animation: ocgf-turn 1.4s linear infinite;
}

@keyframes ocgf-turn {
  to { transform: rotate(360deg); }
}

/* ---- States --------------------------------------------------------------
   `.is-busy` is the 166:3477 state: the logo stands in the slot and the chip
   cannot be pressed, because the thing it would hand over is still on its way.
   Which real moments those are is decided in generated-file.js, not here. */
.ocgf.is-busy .ocgf__download {
  cursor: progress;
  opacity: 0.5;
}

/* ---- Openable variant ----------------------------------------------------
   166:3466 draws ONE control, the chip, and this component ships one. But the
   product has a second real action for some artifacts — open the generated
   file in the Code panel, or open a PDF/spreadsheet in the artifact viewer —
   and dropping it would lose behaviour the conversation already had. Rather
   than add a chip the kit does not draw, that action is attached to the row
   itself. It changes no geometry: a pointer, a focus ring, and the hover the
   row's own fill already suggests. Rows with no open action stay inert. */
.ocgf--openable { cursor: pointer; }

.ocgf--openable:hover { background: #f0eeea; }

.ocgf--openable:focus-visible {
  outline: 2px solid #838b8e;
  outline-offset: 2px;
}

/* ---- Narrow thread -------------------------------------------------------
   The row keeps its height and its three parts; only the gaps and the side
   padding close up, so the name still gets the remainder. 166:3466 states no
   narrow variant — this is the minimum needed for the row to survive the
   conversation's own narrow width rather than a redesign of it. */
@media (max-width: 620px) {
  .ocgf { gap: 8px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ocgf__mark--logo { animation-duration: 4s; }
}