/* ============================================================
   Workbench module, workstation 03: drawing sheet + nomenclature.
   Loaded after styles.css, so it overrides the
   "POSTE 03 - NOMENCLATURE" banner there.
   Two entries only (REF 012 / REF 013), shown bigger, each with a
   main view and a secondary view.
   ============================================================ */

/* ---------- Drawing sheet: figures ---------- */

/* The bottom band holds the numbered dots under the figures; it must
   clear the corner cartouche, which is anchored bottom right. */
.nomen-plate { margin: 1.2rem 0 5.9rem; }

/* Two figures: more air between them than between the views of one figure */
.nomen-figs { gap: clamp(1.8rem, 5vw, 3.2rem); }

/* The button carries the whole figure (views + captions) */
.nomen-fig .fiche-open {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Two views per figure: a main view, then a smaller secondary view
   sitting on the same baseline, as on a technical drawing. */
.nomen-views {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(0.5rem, 1.4vw, 0.9rem);
  align-items: end;
}

/* .nomen-shot is a <span> here, so the <button> content stays valid */
.nomen-shot {
  display: block;
  background: var(--card);            /* CAD renders are on white: seamless */
}
.nomen-shot.is-main { aspect-ratio: 4 / 3; }
/* Square: fits the landscape view 1b and the portrait view 2b alike */
.nomen-shot.is-sub  { aspect-ratio: 1 / 1; }

.nomen-shot img {
  object-fit: contain;                /* never crop a CAD render */
  padding: 0.45rem;
  background: var(--card);
}

/* View tag, like a view label on a drawing */
.nomen-view-tag {
  position: absolute; z-index: 2;
  left: 0; bottom: 0;
  padding: 0.12rem 0.38rem;
  font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--card);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s;
}

/* FIG. n / project name caption: readable, not tiny */
.nomen-cap {
  align-items: baseline;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.nomen-cap b { font-size: 0.72rem; letter-spacing: 0.1em; }
.nomen-cap > span { text-align: right; }

/* View list under the caption */
.nomen-views-legend {
  display: block;
  margin-top: -0.2rem;
  font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* Circled item mark, a bit larger now that the figures are larger */
.nomen-rep { width: 1.75rem; height: 1.75rem; font-size: 0.95rem; }

/* Leader band: 3rem tall for a 48 unit viewBox, so the vertical scale is
   1 and the dot is a real circle, not a squashed ellipse. The SVG is still
   stretched horizontally to follow the plate width. */
.nomen-leaders { bottom: -3rem; height: 3rem; }
.nomen-dot-num { bottom: -2.06rem; font-size: 0.72rem; }

/* Lit state: the view tag follows the brass accent */
.nomen-fig.is-lit .nomen-view-tag { color: var(--brass); border-color: var(--brass); }

/* Mouse hover on the figure: same signal as .is-lit, without JS */
.nomen-fig .fiche-open:hover .nomen-shot { border-color: var(--brass); }

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

.nomen-col-rep { width: 3.2rem; }
.nomen-col-sta { width: 9.5rem; }

/* The whole row is the target, and it has to look like it */
.nomen-row { cursor: pointer; }
.nomen-row td { padding: 0.95rem 0.9rem; vertical-align: top; }

.nomen-cell-rep .fiche-open {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.nomen-rep-mark { font-size: 1.15rem; }

.nomen-cell-des { line-height: 1.45; }
.nomen-ref { display: block; margin: 0 0 0.15rem; font-size: 0.68rem; }
.nomen-title {
  display: block;
  font-size: 0.86rem;
  color: var(--ink);
  transition: color 0.2s;
}
.nomen-sub {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
}

/* Hierarchy: description in ink, tooling and deliverable in grey.
   Specificity has to beat `.nomen-row td { color: var(--ink) }`. */
.nomen-row td.nomen-cell-out,
.nomen-row td.nomen-cell-liv { color: var(--ink-soft); }

.nomen-cell-sta { white-space: nowrap; }

/* A thin outline keeps the pill readable once the row is tinted on
   hover or focus (the IN PROGRESS pill shares that tint). */
.nomen-status { border: 1px solid transparent; }
.nomen-status.is-done { border-color: color-mix(in srgb, var(--brass) 35%, transparent); }
.nomen-status.is-wip  { border-color: color-mix(in srgb, var(--blue-deep) 30%, transparent); }

.nomen-go {
  display: inline-block;
  margin-left: 0.45rem;
  font-family: var(--font-mono);
  font-size: 1rem; line-height: 1;
  color: color-mix(in srgb, var(--ink-soft) 60%, transparent);
  transition: transform 0.2s, color 0.2s;
}

/* Hover and keyboard focus: the whole row responds */
.nomen-row:hover .nomen-title,
.nomen-row:focus-within .nomen-title { color: var(--brass); }
.nomen-row:hover .nomen-go,
.nomen-row:focus-within .nomen-go { color: var(--brass); transform: translateX(3px); }
.nomen-row:hover .nomen-cell-rep,
.nomen-row:focus-within .nomen-cell-rep { box-shadow: inset 3px 0 0 var(--brass); }
.nomen-row:hover .nomen-rep-mark { color: var(--brass); }
.nomen-row:has(.fiche-open:focus-visible) { background: var(--blue-tint); }

/* ---------- Tablets: stack the views, or the main one gets too small ---------- */
@media (max-width: 900px) {
  .nomen-views { grid-template-columns: 1fr; gap: 0.55rem; }
  .nomen-shot.is-sub { width: 72%; justify-self: end; }
}

/* ---------- Phones: one figure per row, table becomes stacked cards ---------- */
@media (max-width: 640px) {

  /* Leaders are hidden here, so no band to reserve under the plate */
  .nomen-plate { margin: 0.6rem 0 3.4rem; }
  .nomen-figs { grid-template-columns: 1fr; gap: 2.4rem; }
  .nomen-cap { font-size: 0.62rem; }
  .nomen-views-legend { font-size: 0.55rem; }

  /* Table: every row becomes a stacked card, in mono */
  .nomen-table { margin-top: 1.8rem; font-size: 0.78rem; }
  .nomen-table thead { display: none; }
  .nomen-table,
  .nomen-table tbody,
  .nomen-row,
  .nomen-row td { display: block; width: 100%; }

  .nomen-row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    grid-template-areas:
      "rep des"
      "out out"
      "liv liv"
      "sta sta";
    gap: 0.5rem 0.55rem;
    align-items: start;
    margin: 0 0 0.9rem;
    padding: 0.85rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--card);
  }
  .nomen-row:last-child { margin-bottom: 0; }
  .nomen-row td { padding: 0; }

  .nomen-row td.nomen-cell-rep { grid-area: rep; }
  .nomen-cell-rep .fiche-open { width: 2.1rem; height: 2.1rem; }
  .nomen-row td.nomen-cell-des { grid-area: des; }
  .nomen-row td.nomen-cell-out { grid-area: out; }
  .nomen-row td.nomen-cell-liv { grid-area: liv; }
  .nomen-row td.nomen-cell-sta { grid-area: sta; white-space: normal; }

  /* Label / value pairs (specificity must beat `.nomen-row td { display: block }`) */
  .nomen-row td.nomen-cell-out,
  .nomen-row td.nomen-cell-liv,
  .nomen-row td.nomen-cell-sta {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
  }
  .nomen-cell-out::before,
  .nomen-cell-liv::before,
  .nomen-cell-sta::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
  }
  .nomen-cell-sta .nomen-status { justify-self: start; }
  .nomen-go { display: none; }        /* the whole card is already the target */

  /* There is no hover with a finger: keep the brass cue for focus only */
  .nomen-row:hover .nomen-cell-rep,
  .nomen-row:focus-within .nomen-cell-rep { box-shadow: none; }
  .nomen-row:has(.fiche-open:focus-visible) { border-color: var(--brass); }
}

/* Slightly tighter labels below 380 px */
@media (max-width: 380px) {
  .nomen-row td.nomen-cell-out,
  .nomen-row td.nomen-cell-liv,
  .nomen-row td.nomen-cell-sta { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.4rem; }
  .nomen-cell-out::before,
  .nomen-cell-liv::before,
  .nomen-cell-sta::before { font-size: 0.55rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nomen-go,
  .nomen-title,
  .nomen-view-tag,
  .nomen-cell-rep .fiche-open { transition: none; }
  .nomen-row:hover .nomen-go,
  .nomen-row:focus-within .nomen-go { transform: none; }
}