/* =========================================================
   Zeal Portal — Rows
   The portal's copy primitive. Any value a staff member might
   paste somewhere else (VAT, IBAN, wifi password, API key) uses
   this row pattern. Whole row is the clipboard target.

   Markup shape:
     <div class="row" data-copy="GB12 3456…" data-sensitive="1">
       <div class="row__label">account number</div>
       <div class="row__value is-masked">•• •• ••</div>
       <div class="row__actions">
         <button class="reveal" aria-label="reveal">…eye…</button>
       </div>
       <div class="row__copied">copied</div>
       <span class="row__flag row__flag--sensitive">sensitive</span>
     </div>

   JS partners:
     /js/system/copy-on-click.js     — whole-row clipboard target
     /js/system/sensitive-values.js  — mask / reveal / revealAll
   ========================================================= */

.row {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: var(--s-4, 16px);
  padding: 10px 0;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  cursor: default;
  transition: background var(--dur-fast) var(--ease-std);
}
.row:first-child { border-top: 0; }
.row[data-copy] { cursor: pointer; }
.row[data-copy]:hover { background: var(--warm, #f2ede2); }
.row[data-hidden="1"] { display: none; }

.row__label {
  font-family: var(--font-std);
  font-size: var(--t-small, 13px);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.01em;
}

.row__value {
  font-family: var(--font-cd);
  font-size: var(--t-body, 16px);
  font-weight: var(--w-medium, 500);
  color: var(--ink, #000);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Masked state is a styling hook only — the textContent itself is
   already mask characters when a sensitive row is masked (see
   js/system/sensitive-values.js). Kept muted + regular-weight so
   the bullets read as placeholder, not emphasis. */
.row__value.is-masked {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: var(--font-std);
  font-weight: var(--w-regular, 400);
}
.row__value .hint {
  display: block;
  margin-top: 2px;
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  font-weight: var(--w-regular, 400);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.02em;
  font-style: italic;
}

/* --- Row actions: reveal eye, copy icon, pin etc. ---
       Hidden until row is hovered / focused. Click on an action
       button doesn't trigger the row's copy handler (JS stops
       propagation there). */
.row__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-std);
}
.row:hover .row__actions,
.row:focus-within .row__actions { opacity: 1; }

.row__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  border-radius: var(--r-1, 2px);
  transition:
    color var(--dur-fast) var(--ease-std),
    background var(--dur-fast) var(--ease-std);
}
.row__actions button:hover {
  color: var(--ink, #000);
  background: var(--paper, #fff);
}
.row__actions button svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
}

/* --- "copied" flash badge ---
       Wired by copy-on-click.js: toggles .is-copied on the row,
       fading .row__copied in and the actions out for ~1s. */
.row__copied {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green, #1F7A4A);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-std);
}
.row.is-copied .row__copied { opacity: 1; }
.row.is-copied .row__actions { opacity: 0; }

/* --- Status flags ---
       Tiny chip-like indicators at the end of a row.
       Green = ok/verified. Amber = stale. Warm-grey = sensitive. */
.row__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  font-weight: var(--w-medium, 500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  white-space: nowrap;
}
.row__flag--ok {
  color: var(--green, #1F7A4A);
  background: var(--green-soft, #E8F3EC);
}
.row__flag--stale {
  color: var(--amber, #A66F0F);
  background: var(--amber-soft, #FBF1DC);
}
.row__flag--sensitive {
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  background: var(--warm, #f2ede2);
}

/* Section-level "reveal all" button (placed in a section header
   alongside other controls). JS wires it to toggle every masked
   row inside the section. */
.row-section__reveal-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  text-transform: uppercase;
  letter-spacing: var(--track-wide, 0.08em);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-std),
    border-color var(--dur-fast) var(--ease-std);
}
.row-section__reveal-all:hover {
  color: var(--ink, #000);
  border-color: var(--ink-3, rgba(0, 0, 0, 0.55));
}