/* per-page polish: approvals
   Scoped exclusively to structures in approvals.html.
*/

/* -- Page header: CANON sec 10  -  h1 = 28/660/-.025em. Override proto's 26px. -- */
.wrap .ph h1 {
  font-size: 28px;
  font-weight: 660;
  letter-spacing: -.025em;
  line-height: 1.12;
}

/* -- Eyebrow in section headers: CANON sec 10 (10.5/500/.12em). -- */
.sec-head .eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sec-head .ct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}

/* -- Review cards: tighten glass + spacing -- */
.review-card {
  transition: box-shadow .2s var(--ease);
}
.review-card .rc-head {
  background: var(--surface-3);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.review-card.settled .rc-head {
  background: var(--bg-2) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Skill name in review card header */
.review-card .skill-name {
  font-size: 13px;
  color: var(--ink);
}

/* Badge in review card id (review requested / approved / rejected) */
.review-card .rc-id .badge {
  font-size: 10.5px;
  font-weight: 580;
  letter-spacing: .02em;
}

/* -- Snapshot block -- */
.snapshot-pre {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
  font-size: 11.5px;
  line-height: 1.6;
}

/* -- Decision textarea: CANON sec 6 input  -  line border (not line-strong). -- */
.decision-ta:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}
.decision-ta {
  border-color: var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* -- Action buttons in review cards -- */
/* Approve: primary (already btn-primary = solid black -> correct)
   Reject: secondary with negative color -> keep but tighten */
.rc-actions .btn-secondary[style*="negative"] {
  border-color: color-mix(in srgb, var(--negative) 28%, transparent) !important;
}
.rc-actions .btn-secondary[style*="negative"]:hover {
  background: color-mix(in srgb, var(--negative) 6%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--negative) 44%, transparent) !important;
}

/* -- History table: badge status -- */
/* badge-approved = steel accent (matches one-accent rule) */
.hist-table .badge-approved {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
  font-weight: 560;
}
/* badge-rejected = negative (semantic danger, preserved) */
.hist-table .badge-rejected {
  background: color-mix(in srgb, var(--negative) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--negative) 22%, transparent) !important;
  color: var(--negative) !important;
  font-weight: 560;
}
/* base badge = neutral mute */
.hist-table .badge:not(.badge-approved):not(.badge-rejected) {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--ink-mute);
  font-weight: 560;
}

/* -- Hint line -- */
.hint-line {
  color: var(--ink-faint);
  border-top-color: var(--line-soft) !important;
}

/* CSS-side defense: any .hnote that's empty after runtime trim collapses
   to zero-width. Pairs with the _apply.py P2 orphan-comma strip. */
.hist-table td.hnote:empty { display: none !important; }

/* -- Mobile: approvals cards stack cleanly -- */
@media (max-width: 680px) {
  .review-card .rc-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .review-card .rc-actions {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .review-card .rc-actions .btn {
    flex: 1 1 auto;
    min-width: 120px;
    justify-content: center;
  }

  /* History table: hide note + decided-by on mobile to prevent overflow */
  .hist-table th:nth-child(3),
  .hist-table td:nth-child(3),
  .hist-table th:nth-child(5),
  .hist-table td:nth-child(5) {
    display: none !important;
  }
  /* The proto table carries NO data-l attributes, so the shared E4
     table->block rule (td flex, justify space-between, text right)
     would leave each cell as an unlabelled right-aligned value.
     Override for .hist-table only: each row is a readable left-aligned
     card -- skill name as the title line, status + date below it. No
     horizontal overflow, no clipped/orphaned values. Scoped to
     .hist-table so it cannot leak to other tables. */
  /* GAP-D: the prior block left each cell on its own full-width line,
     so a decided row (name + status + date + View) became a ~290px
     tall, sparse card -- raw / unfinished. Rebuild as a compact
     2-line card: skill name on line 1, then a single inline meta row
     (status badge + date + View) on line 2. Visible columns are
     1 (skill), 2 (status), 4 (when), 6 (View); 3 and 5 are already
     hidden above. Scoped to .hist-table only. */
  .hist-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    padding: 12px 14px !important;
  }
  .hist-table td {
    display: block !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    width: auto !important;
  }
  .hist-table td:first-child {
    flex: 1 0 100% !important;
    margin-bottom: 2px !important;
  }
  .hist-table td:nth-child(6) {
    margin-left: auto !important;
  }
  .hist-table td:nth-child(6) .btn {
    min-height: 36px !important;
  }
  /* Skill name: wrap to 2 lines instead of a hard 140px clip */
  .hist-table .hsk {
    font-size: 12.5px !important;
    font-weight: 560 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    display: block !important;
  }
  .hist-table .hwhen {
    font-size: 11.5px !important;
    color: var(--ink-mute) !important;
  }

  /* stat-row: wrap */
  .stat-row {
    flex-wrap: wrap;
  }
}