/* ==========================================================================
   10 · CLINICNOTE — soul
   Calm, careful, sign-off sacred. The coolest, quietest bone in the set and a
   clinical sage accent.

   MOTION BUDGET: the gate, and nothing else.
   Every decorative transition is stripped from this product. What remains is
   two changes of state, both attached to the moment a clinician takes
   responsibility: the Approve button moving from muted to ink over 200ms, and
   the AWAITING SIGN-OFF watermark fading over 300ms. Slow where the human
   decides, instant where the system responds. Motion here signals
   responsibility.

   DEVIATION FROM BRIEF: the brief gives ClinicNote the sage #5A7A5E, which the
   spine already uses to mean "pass". A clinical note is the last place a
   brand colour should read as an all-clear, so ClinicNote takes a cooler
   sage; SupplierESG takes olive.
   ========================================================================== */
/* The recording panel was previously pinned to a fixed 21rem sidebar via an
   inline style at every viewport, which left the note column with 0 width
   to work with below the shared .grid-2 desktop breakpoint. */
@media (min-width:900px){ .du-stage{grid-template-columns:minmax(0,21rem) minmax(0,1fr);} }

:root{
  --accent:#5E8279;
  --accent-rgb:94,130,121;
  --paper:#F3F5F5;          /* the calmest, coolest bone */
  --paper-rgb:243,245,245;
  --card:#FFFFFF;
}

/* Nothing decorative moves in the note itself. */
.du-note *,
.du-note *::before,
.du-note *::after{ transition:none; animation:none; }

/* ---------- the recording ------------------------------------------------- */
.du-said{list-style:none;margin:0;padding:0;max-height:var(--said-h,22rem);overflow:auto;}
.du-said li{
  display:grid;grid-template-columns:3rem 1fr;gap:.7rem;
  padding:.5rem .85rem;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-small);line-height:1.6;color:var(--muted);cursor:pointer;
}
.du-said li:last-child{border-bottom:0;}
.du-said li.is-linked{background:rgba(var(--accent-rgb),.14);color:var(--ink);}
.du-said time{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);padding-top:.12rem;}

/* ---------- the note ------------------------------------------------------ */
.du-note{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.du-note__hd{padding:1rem 1.15rem;border-bottom:1px solid var(--line);background:var(--surface);}
.du-note__hd h3{margin:0 0 .2rem;font-family:var(--font-body);font-weight:600;font-size:var(--t-h3);}
.du-note__hd p{margin:0;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}

.du-field{
  padding:.85rem 1.15rem;border-bottom:1px solid var(--line-soft);
  display:grid;gap:.4rem;position:relative;z-index:1;
}
.du-field:last-child{border-bottom:0;}
.du-field__k{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);display:flex;gap:.5rem;align-items:center;
}
.du-field__b{margin:0;font-size:var(--t-small);line-height:1.72;color:var(--ink);}
.du-field__src{display:flex;gap:.3rem;flex-wrap:wrap;}
.du-field__src .chip{cursor:pointer;}
.du-field__note{
  font-size:var(--t-small);line-height:1.6;color:#6f4810;
  border-left:2px solid rgba(var(--amber-rgb),.5);padding-left:.7rem;
}
.du-field[data-missing="1"]{background:rgba(var(--amber-rgb),.075);}
.du-field__miss{
  display:grid;gap:.5rem;font-size:var(--t-small);line-height:1.6;color:#6f4810;
}
.du-field__miss b{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;
}
.du-in{
  width:100%;font-family:var(--font-body);font-size:var(--t-small);line-height:1.6;
  color:var(--ink);background:var(--card);border:1px solid rgba(var(--amber-rgb),.45);
  border-radius:var(--radius-sm);padding:.5rem .6rem;
}
.du-in:focus{outline:2px solid var(--accent);outline-offset:1px;}
textarea.du-in{min-height:4rem;resize:vertical;}

/* ---------- the watermark ------------------------------------------------
   Under every draft, on every field, until a clinician has signed. It is the
   one thing on the page allowed to fade, and it fades exactly once. */
.du-note .watermark{
  z-index:0;opacity:1;
  transition:opacity 300ms var(--ease-out);
}
.du-note.is-signed .watermark{opacity:0;}

/* ---------- the gate ------------------------------------------------------
   Structure and wiring are the shared .signoff/.btn/IND.gate() spine helper
   (see indivesta-spine.css) — not forked here. Colour and timing below are
   ClinicNote's own: not-allowed until the box is ticked, then muted → ink
   (not the accent) over 200ms, the slowest transition in the ten-product set,
   on purpose. */
.signoff .btn{
  transition:background-color 200ms var(--ease-out),
             border-color 200ms var(--ease-out),
             color 200ms var(--ease-out),
             transform 120ms var(--ease-out);
}
.signoff .btn--accent{background:var(--ink);border-color:var(--ink);color:var(--paper);}
/* Slow where the human decides (200ms muted -> ink), fast where the system
   responds. The press is the system responding, so it is not decoration and
   it survives this product's motion strip. */
.signoff .btn--accent:active{transform:scale(.97);transition-duration:120ms;}
.signoff .btn.is-signed{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default;}
.du-signed{
  display:none;padding:.85rem 1.15rem;border-top:1px solid var(--line);
  background:rgba(var(--accent-rgb),.08);
  font-family:var(--font-mono);font-size:var(--t-micro);
  color:color-mix(in oklab,var(--accent) 70%,var(--ink));
}
.du-note.is-signed .du-signed{display:block;}
.du-out{
  width:100%;min-height:15rem;resize:vertical;white-space:pre-wrap;
  font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.7;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.8rem;
}
@media print{
  .ind-nav,.wb__bar,.signoff,.no-print{display:none !important;}
  .du-note{border:0;}
  body{background:#fff;}
}