/* tenure screens. Owned by workstream H; the tenure bar itself and the shared
   card, table, note and chip rules live in css/screens.css and
   css/components.css. Only what the tenure TAB and the awards screen add is
   here.

   Every width below is a minmax with `min(100%, N)` as the floor rather than a
   bare N. A grid column whose minimum is wider than the phone is the single
   commonest way a page starts scrolling sideways, and the geometry audit
   reports it as overflow whether or not anything is visibly cut off. */

/* ------------------------------------------------------------ the tab head */

.tn-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--s-4) var(--s-6);
  margin: 0 0 var(--s-6);
}
.tn-facts .fact-label {
  font-size: var(--t-2xs); color: var(--c-text-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.tn-facts .fact-value { margin: var(--s-1) 0 0; font-size: var(--t-sm); min-width: 0; overflow-wrap: anywhere; }
.tn-hint { display: block; margin-top: var(--s-1); font-size: var(--t-2xs); color: var(--c-text-3); }

.tn-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.tn-head-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Inside a table cell, so it may not force the row wider than the viewport. */
.tn-row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }

.tn-sub {
  margin: var(--s-7) 0 var(--s-4);
  font-size: var(--t-xs); font-weight: var(--t-semibold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-3);
}

/* The next step, and the reason a control is absent. The second one is the
   whole point of this screen: a missing button with no explanation becomes a
   support ticket, and the explanation costs one line. */
.tn-next { margin: 0; font-size: var(--t-sm); color: var(--c-text-2); }
.tn-reason {
  margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--c-bg); border-radius: var(--r-md);
  font-size: var(--t-sm); white-space: pre-wrap; overflow-wrap: anywhere;
}
.tn-barred {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--c-text-3);
}
.tn-barred svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* A reversed ledger row stays in the table and stops counting. Struck through
   rather than removed, because an append-only ledger that hides its
   corrections is not a ledger anybody can replay. */
.table tr[data-reversed="1"] td { opacity: .62; }

/* The document link is the only tappable thing in a .doc-row, and inline text
   at this size is a 15px target. scripts/audit-geometry.mjs holds the floor at
   24px and reported this one; inline-flex with a min-height is what makes the
   box match the text rather than only the glyphs. */
.tn-doc-link { display: inline-flex; align-items: center; min-height: 24px; }

/* ----------------------------------------------------------------- the exit */

.tn-elig { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--bw) solid var(--c-border); }
.tn-checks { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.tn-checks li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--c-text-2); }
.tn-checks svg { width: 14px; height: 14px; flex: none; }
.tn-checks li[data-ok="1"] svg { color: var(--c-success); }
.tn-checks li[data-ok="0"] svg { color: var(--c-danger); }

.tn-handover { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.tn-handover li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-xs); min-width: 0; }
.tn-handover svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.tn-handover li[data-ok="1"] svg { color: var(--c-success); }
.tn-handover li[data-ok="0"] svg { color: var(--c-warn); }
.tn-handover span { min-width: 0; overflow-wrap: anywhere; }

.tn-benefits { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tn-benefit {
  display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg);
}
.tn-benefit[data-released="1"] { border-color: color-mix(in srgb, var(--c-success) 40%, var(--c-border)); }
.tn-benefit-mark { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--c-text-3); }
.tn-benefit[data-released="1"] .tn-benefit-mark { color: var(--c-success); }
.tn-benefit-body { flex: 1 1 min(100%, 240px); min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.tn-benefit-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.tn-benefit-body p { margin: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------- awards screen */

.aw-head { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-start; }
.aw-head .page-head-text { flex: 1 1 min(100%, 380px); min-width: 0; }
.aw-head-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.aw-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-5); }
.aw-filter {
  padding: 0 var(--s-4); height: 30px; border-radius: var(--r-full);
  border: var(--bw) solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); font-size: var(--t-xs); font-weight: var(--t-medium);
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
.aw-filter:hover { background: var(--c-hover); color: var(--c-text); }
.aw-filter[aria-pressed="true"] {
  background: var(--c-accent-quiet); border-color: var(--c-accent);
  color: var(--c-text); font-weight: var(--t-semibold);
}

.aw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }
.aw-card .card-body { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.aw-card[data-active="false"] { opacity: .68; }
.aw-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.aw-card-title { margin: 0; font-size: var(--t-md); font-weight: var(--t-semibold); min-width: 0; overflow-wrap: anywhere; }
/* The primary ink, not a grey. At 10px the third step of the ramp measures
   2.96:1 against the paper and the floor is 4.5:1; the second step is 3.53:1
   and also fails. Nothing below body size can afford a quiet colour, so the
   hierarchy here is carried by size and by the mono face. */
.aw-key { font-family: var(--t-mono); font-size: var(--t-2xs); color: var(--c-text); }
.aw-effects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.aw-effects li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--t-xs); color: var(--c-text); min-width: 0;
}
.aw-effects svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--c-text-3); }
.aw-effects span { min-width: 0; overflow-wrap: anywhere; }
.aw-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-3); }

.aw-grants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.aw-grant {
  display: flex; gap: var(--s-5); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
}
.aw-grant[data-reversed="1"] { background: var(--c-bg); border-style: dashed; }
.aw-grant[data-reversed="1"] .aw-grant-title { text-decoration: line-through; }
.aw-grant-body { flex: 1 1 min(100%, 260px); min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.aw-grant-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.aw-grant-title { font-weight: var(--t-semibold); font-size: var(--t-sm); min-width: 0; overflow-wrap: anywhere; }
.aw-grant-why { margin: 0; font-size: var(--t-sm); color: var(--c-text-2); overflow-wrap: anywhere; }
.aw-grant-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-2xs); color: var(--c-text); align-items: center; }
.aw-grant-effects { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.aw-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.aw-task {
  display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg);
}
.aw-task[data-overdue="1"] { border-left: 3px solid var(--c-warn); }
/* An icon dropped straight into a flex row has no intrinsic width, so without
   `flex: none` and a size it stretches to fill the row. That shipped once as a
   clock the height of the whole card, and it was obvious in the screenshot and
   invisible in the markup. Every flex row in this file that can hold a bare
   icon gets the same three properties. */
.aw-task > svg, .aw-grant > svg, .tn-benefit > svg {
  flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--c-text-3);
}
.aw-task-body { flex: 1 1 min(100%, 240px); min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.aw-task-body p { margin: 0; font-size: var(--t-xs); color: var(--c-text-2); overflow-wrap: anywhere; }

/* The effect builder. One row per effect, and the fields a row shows depend on
   its type, so the row is a grid that reflows rather than a fixed table. */
.aw-builder-wrap { min-width: 0; }
.aw-builder { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); }
/* align-self, or the column's default `stretch` makes the Add button as wide
   as the dialog and the icon inside it grows to match. That shipped once as a
   plus sign the height of a card. */
.aw-builder > button { align-self: flex-start; }
.aw-builder > button svg { flex: none; width: 15px; height: 15px; }
.aw-effect-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg);
}
.aw-effect-row .field { min-width: 0; }
.aw-effect-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.aw-effect-says { font-size: var(--t-2xs); color: var(--c-text-3); min-width: 0; overflow-wrap: anywhere; }