/* Transaction Coordination page. Extends platform.css shared system.
   External file by CSP requirement. Radii use var(--r) only. */

/* Hero: first section under the nav, no doubled rule. */
.tc-hero{ padding-block:var(--s-20); }

/* Capabilities definition table. */
.tc-caps tbody th{ width:30%; padding-right:var(--s-6); }
.tc-caps tbody th .chip{ margin-left:var(--s-2); vertical-align:middle; }
.tc-note{ margin-top:var(--s-4); }

/* Command center panel: header facts row. */
.tc-facts{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-bottom:1px solid var(--rule);
}
.tc-fact{ padding:var(--s-4) var(--s-5); border-left:1px solid var(--rule); }
.tc-fact:first-child{ border-left:0; }
.tc-fact > span{
  display:block; font-size:var(--fs-1); font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
}
.tc-fact b{ display:block; font-size:var(--fs-3); font-weight:600; margin-top:var(--s-1); }

/* Thin progress bar. Width matches the 82% figure beside it. */
.tc-bar{
  height:4px; margin-top:var(--s-2); background:var(--sunk);
  border-radius:var(--r); overflow:hidden;
}
.tc-bar-fill{ width:82%; height:100%; background:var(--accent); border-radius:var(--r); }

/* Two columns: timeline and attention list. */
.tc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.tc-col{ padding:var(--s-5); }
.tc-col + .tc-col{ border-left:1px solid var(--rule); }
.tc-sub{
  font-size:var(--fs-1); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); margin-bottom:var(--s-4);
}

/* Five-step timeline: dots and a hairline connector. */
.tc-steps{ list-style:none; }
.tc-steps li{ position:relative; padding:0 0 var(--s-5) 26px; }
.tc-steps li:last-child{ padding-bottom:0; }
.tc-steps li::before{
  content:""; position:absolute; left:0; top:5px; width:10px; height:10px;
  border-radius:var(--r); background:var(--accent);
}
.tc-steps li::after{
  content:""; position:absolute; left:4px; top:20px; bottom:0;
  width:1px; background:var(--rule);
}
.tc-steps li:last-child::after{ display:none; }
.tc-steps .tc-due::before{ background:var(--paper); border:2px solid var(--warn); }
.tc-steps .tc-next::before{ background:var(--paper); border:2px solid var(--rule-firm); }
.tc-steps b{ display:block; font-size:var(--fs-2); font-weight:600; line-height:1.35; }
.tc-when{ display:block; font-size:var(--fs-1); color:var(--ink-3); margin-top:2px; }
.tc-due .tc-when{ color:var(--warn); font-weight:600; }

/* Attention list inside the panel column: no double padding, chip at right. */
.tc-panel .attn li{
  grid-template-columns:20px minmax(0,1fr) auto;
  padding-inline:0;
}
.tc-panel .attn li:first-child{ padding-top:0; }
.tc-panel .attn .chip{ align-self:start; }

/* Citation block: extracted item traced to document, section, page. */
.tc-cite{ border-top:1px solid var(--rule); padding:var(--s-5); }
.tc-cite-row{
  display:grid; grid-template-columns:minmax(0,5fr) 20px minmax(0,7fr);
  gap:var(--s-4); align-items:start;
}
.tc-cite-k{
  display:block; font-size:var(--fs-1); font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  margin-bottom:var(--s-1);
}
.tc-cite-row b{ font-size:var(--fs-2); font-weight:600; line-height:1.4; }
.tc-cite-arrow{ margin-top:20px; }
.tc-quote{
  display:block; margin-top:var(--s-2); padding-left:var(--s-3);
  border-left:2px solid var(--accent-line);
  font-size:var(--fs-1); color:var(--ink-3); line-height:1.5;
}

/* Review principle aside. */
.tc-plain{ margin-top:var(--s-8); }

/* Responsive. */
@media (max-width:900px){
  .tc-facts{ grid-template-columns:1fr 1fr; }
  .tc-fact{ border-top:1px solid var(--rule); }
  .tc-fact:nth-child(-n+2){ border-top:0; }
  .tc-fact:nth-child(odd){ border-left:0; }
  .tc-grid{ grid-template-columns:1fr; }
  .tc-col + .tc-col{ border-left:0; border-top:1px solid var(--rule); }
  .tc-cite-row{ grid-template-columns:1fr; gap:var(--s-3); }
  .tc-cite-arrow{ display:none; }
}
@media (max-width:700px){
  .tc-caps thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .tc-caps tbody tr{ display:block; padding-block:var(--s-4); border-bottom:1px solid var(--rule); }
  .tc-caps tbody th, .tc-caps tbody td{ display:block; width:auto; border-bottom:0; padding:0; }
  .tc-caps tbody th{ padding-bottom:var(--s-1); }
}