/* recon: doc 208 item 3, the reconciliation: each UK day's payments, orders and accounts matched, and the daily close. A
   PREVIEW screen's own styles, loaded only where it is switched on. Every rule is scoped to the screen
   (#view[data-recon], which recon.js sets on each of its pages) or to a class of its own (rc-), on the frame's tokens.
   No side stripes; status is a dot and a label. */
#view[data-recon] .card{margin:0 0 1rem}
.rc-nav{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem;border:1px solid var(--line);border-radius:999px}
.rc-nav .btn.small{width:36px;padding:0;justify-content:center;border-color:transparent;background:transparent}
.rc-here{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:0 .9rem;border-radius:999px;background:rgba(50,95,255,.22);
  border:1px solid rgba(120,150,255,.4);font:600 .82rem/1 var(--sans);color:#fff;white-space:nowrap}
.rc-here .ui2-icon,.rc-nav .ui2-icon{width:16px;height:16px}
#view[data-recon] .ui2-actions .btn .ui2-icon{width:16px;height:16px}
#view[data-recon] .ui2-actions .btn{gap:.5rem}
.rc-said{margin-bottom:1rem}

.rc-kpis .stat .note{display:block;margin-top:.6rem}
.rc-kpis .stat dd{font-family:var(--figures,var(--austin))}
.rc-good dd{color:var(--teal)}
.rc-attn dd{color:var(--warn)}

.rc-chead{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 1rem}
.rc-chead .eyebrow,.rc-chead h2{margin:0}
.rc-chead > :last-child:not(:first-child){margin-left:auto}
.rc-chead .ui2-iconbtn{margin-right:-.6rem}

/* the three records, one line each */
.rc-flow{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr) 150px minmax(0,1fr);align-items:stretch}
.rc-node{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:18px;background:rgba(8,14,30,.4)}
.rc-node .eyebrow{margin-bottom:.5rem}
.rc-big{font:400 2.1rem/1 var(--figures,var(--austin));color:#fff;margin:0 0 .35rem}
.rc-node ul{list-style:none;margin:.8rem 0 0;padding:.7rem 0 0;border-top:1px solid var(--row);font-size:.8rem;color:var(--muted);display:grid;gap:.35rem}
.rc-link{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.45rem;padding:0 .6rem;text-align:center}
.rc-line{position:relative;width:100%;height:2px;background:linear-gradient(90deg,rgba(0,199,197,.15),rgba(0,199,197,.75))}
.rc-line::after{content:"";position:absolute;right:-1px;top:-4px;width:7px;height:10px;background:rgba(0,199,197,.8);clip-path:polygon(0 0,100% 50%,0 100%)}
.rc-m{font:400 1.15rem/1 var(--figures,var(--austin));color:#fff}
.rc-m small{display:block;font:500 .7rem/1.3 var(--sans);color:var(--quiet);margin-top:.2rem}
.rc-link .st{font-size:.74rem;white-space:normal;align-items:flex-start;text-align:left}
.rc-link .st::before{margin-top:.3em}

/* the breaks, the close, the days */
.rc-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1rem;align-items:start}
.rc-split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rc-with-panel{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:1rem;align-items:start}
.rc-flush{padding:0;overflow:hidden}
.rc-flush .rc-chead{padding:1.3rem 1.45rem 0}
.rc-tabs{display:inline-flex;gap:.4rem}
.rc-tabs .btn b{margin-left:.35rem;font-weight:400;color:var(--quiet)}
.rc-tabs .btn.primary b{color:#dfe6ff}
.rc-table{width:100%}
.rc-table th,.rc-three th{position:static}
.rc-nowrap{white-space:nowrap}
.rc-table td:first-child{min-width:13rem}
.rc-table .st{align-items:flex-start;white-space:normal}
.rc-table .st::before{margin-top:.45em}
.rc-with-panel .rc-table th:last-child,.rc-with-panel .rc-table td:last-child{display:none}
.rc-with-panel .rc-table th:nth-last-child(2),.rc-with-panel .rc-table td:nth-last-child(2){padding-right:1.45rem}
.rc-table th,.rc-table td{padding:.85rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--row)}
.rc-table th{font:500 .74rem/1.2 var(--sans);color:var(--quiet);white-space:nowrap}
.rc-table th:first-child,.rc-table td:first-child{padding-left:1.45rem}
.rc-table th:last-child,.rc-table td:last-child{padding-right:1.45rem}
.rc-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-table .sub{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted)}
.rc-table .sub.rc-warn{color:var(--warn)}
.rc-table a.rc-open{text-decoration:none}
.rc-table a.rc-open:hover span{text-decoration:underline}
.rc-table tbody tr:last-child td{border-bottom:0}
.rc-foot{margin:0;padding:.9rem 1.45rem 1.2rem;border-top:1px solid var(--row)}
.rc-warn{color:var(--warn)}
.rc-b{margin:0 0 .6rem;font-size:1rem}
.rc-meter{height:6px;border-radius:6px;background:rgba(209,221,255,.12);overflow:hidden;margin:.2rem 0 .9rem}
.rc-meter i{display:block;height:100%;width:0;background:var(--azure);border-radius:6px}
.rc-bars{display:flex;gap:6px;align-items:flex-end;height:110px;margin:.4rem 0 0}
.rc-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;font-size:.62rem;color:var(--quiet);text-decoration:none}
.rc-bar i{display:block;width:100%;max-width:22px;border-radius:5px 5px 2px 2px;background:rgba(0,199,197,.55)}
.rc-bar.open i{background:var(--warn)}
.rc-bar.zero i{background:rgba(209,221,255,.16)}
.rc-bar.open.zero i{background:rgba(240,204,140,.5)}
.rc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;margin:.8rem 0 0;font-size:.78rem;color:var(--quiet)}
.rc-chead .rc-legend{margin:0}
.rc-legend .k{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.45rem;vertical-align:-1px}
.rc-legend .k.closed{background:rgba(0,199,197,.55)}
.rc-legend .k.open{background:var(--warn)}
.rc-legend .sum{margin-left:auto}
.rc-dots{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0 0 1rem;font-size:.9rem}
.rc-dots .st,.rc-signer .st{white-space:normal;overflow-wrap:anywhere;align-items:flex-start}
.rc-dots .st::before,.rc-signer .st::before{margin-top:.45em}
.rc-signer b{overflow-wrap:anywhere}

/* a break beside the list */
.rc-panel{padding:1.4rem}
.rc-panel h2{margin:.2rem 0 .5rem}
.rc-panel > .eyebrow{margin:1.4rem 0 .6rem}
.rc-panel .rc-chead{margin-bottom:.4rem}
.rc-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0}
.rc-three{width:100%;border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:.84rem}
.rc-three th,.rc-three td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--row);vertical-align:top}
.rc-three thead th{font:500 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.rc-three tbody th{font-weight:400;color:var(--quiet)}
.rc-three tbody tr:last-child > *{border-bottom:0}
.rc-three td.rc-diff{background:rgba(233,193,123,.1)}
.rc-tag{display:block;margin-top:.2rem;font:600 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
.rc-callout,.rc-step{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:rgba(8,14,30,.35)}
.rc-callout p,.rc-step p{margin:0 0 .4rem;font-size:.9rem;line-height:1.45}
.rc-callout p:last-child,.rc-step p:last-child{margin:0}
.rc-step{border-color:rgba(120,150,255,.38)}
.rc-late{margin:0 0 1rem;border-color:var(--warn-line);background:var(--warn-tint)}
.rc-clear{display:grid;gap:.6rem}
.rc-clear .eyebrow{margin:1.4rem 0 0}
.rc-clear select,.rc-clear textarea,.rc-reopen input{width:100%;min-height:46px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(8,14,30,.5);color:var(--text);font:400 .92rem/1.4 var(--sans)}
.rc-clear .btn{justify-self:start}
.rc-history{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rc-history li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--row);font-size:.84rem}
.rc-history time{color:var(--quiet)}

/* the close */
.rc-steps{list-style:none;margin:0;padding:0}
.rc-steps li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:1rem;padding:1rem 0;border-top:1px solid var(--row)}
.rc-steps li:first-child{border-top:0;padding-top:0}
.rc-steps b{display:block;font-weight:600;margin-bottom:.25rem}
.rc-num{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--line);
  font:400 .95rem/1 var(--sans);color:var(--quiet)}
.rc-steps li.done .rc-num{border-color:rgba(0,199,197,.5);color:var(--teal);background:rgba(0,199,197,.08)}
.rc-steps li.stop .rc-num{border-color:var(--warn-line);color:var(--warn);background:var(--warn-tint)}
.rc-num .ui2-icon{width:16px;height:16px}
.rc-by{font-size:.78rem;color:var(--quiet);text-align:right;white-space:nowrap}
.rc-steps .note{display:block}
.rc-signer{display:flex;gap:.8rem;padding:1rem;margin:0 0 .8rem;border:1px dashed var(--line);border-radius:14px}
.rc-signer b{display:block;margin-bottom:.15rem}
.rc-signer .note{display:block;margin:0 0 .3rem}
.rc-kv{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(0,auto);gap:0;margin:0 0 1rem;font-size:.86rem}
.rc-kv dt,.rc-kv dd{margin:0;padding:.6rem 0;border-bottom:1px solid var(--row)}
.rc-kv dt{color:var(--quiet)}
.rc-kv dd{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;padding-left:1rem}
.rc-kv dd.rc-net{font:400 1.35rem/1 var(--figures,var(--austin))}
.rc-locked .eyebrow{display:flex;align-items:center;gap:.5rem}
.rc-locked .eyebrow .ui2-icon{width:16px;height:16px}
.rc-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:0 0 1rem}
.rc-mini .card{margin:0;padding:.9rem 1rem}
.rc-mini dl{margin:0}
.rc-mini dt{font-size:.72rem;color:var(--quiet)}
.rc-mini dd{margin:.3rem 0 0;font:400 1.5rem/1 var(--figures,var(--austin))}
.rc-reopen{display:flex;gap:.6rem;margin:0 0 .6rem}
.rc-reopen input{flex:1}
.rc-list{list-style:none;margin:0 0 .8rem;padding:0}
.rc-list li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--row);font-size:.9rem}
.rc-list .st{white-space:normal;align-items:flex-start}
.rc-list .st::before{margin-top:.45em}
.rc-list li .note{flex:0 1 auto;max-width:38%;margin:0;text-align:right}

/* the month */
.rc-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem}
.rc-wd{font:500 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);padding:0 .3rem}
.rc-cell{display:flex;flex-direction:column;gap:.25rem;min-height:128px;padding:.7rem .8rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(8,14,30,.35);text-decoration:none;font-size:.78rem;min-width:0}
.rc-cell b{font:400 1.5rem/1 var(--figures,var(--austin));color:#fff;margin-bottom:.2rem}
.rc-cell .st{font-size:.78rem}
.rc-cell .note{font-size:.72rem;margin:0}
.rc-cell.blank{border:0;background:transparent}
.rc-cell.later{border-style:dashed;background:transparent}
.rc-cell.later b{color:var(--quiet)}
.rc-cell.today{border-color:rgba(120,150,255,.55);background:rgba(50,95,255,.14)}
.rc-amt{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.rc-who{color:var(--quiet);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.rc-cell:hover{border-color:rgba(209,221,255,.34)}

@media (max-width:1180px){
  .rc-flow{grid-template-columns:minmax(0,1fr)}
  .rc-link{flex-direction:row;justify-content:flex-start;padding:.7rem .2rem;gap:.9rem}
  .rc-line{display:none}
  .rc-m small{display:inline;margin-left:.3rem}
  .rc-with-panel{grid-template-columns:minmax(0,1fr)}
  .rc-with-panel > .rc-panel{order:-1}
}
@media (max-width:1000px){.rc-split,.rc-split.even{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  #view[data-recon] .ui2-actions{gap:.5rem}
  .rc-big{font-size:1.8rem}
  .rc-table thead{display:none}
  .rc-table,.rc-table tbody,.rc-table tr,.rc-table td{display:block;width:100%}
  .rc-table tr{padding:.8rem 1.1rem;border-bottom:1px solid var(--row)}
  .rc-table tbody tr:last-child{border-bottom:0}
  .rc-table td,.rc-table td:first-child,.rc-table td:last-child{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border:0;text-align:right}
  .rc-table td::before{content:attr(data-label);font-size:.74rem;color:var(--quiet);text-align:left}
  .rc-table td:first-child{display:block;text-align:left;padding-bottom:.4rem}
  .rc-table td:first-child::before{content:none}
  .rc-table td:empty{display:none}
  .rc-with-panel .rc-table td:nth-last-child(2){padding-right:0}
  .rc-flush .rc-chead{padding:1.1rem 1.1rem 0}
  .rc-foot{padding:.9rem 1.1rem 1.1rem}
  .rc-panel{padding:1.1rem}
  .rc-three thead{display:none}
  .rc-three,.rc-three tbody,.rc-three tr{display:block}
  .rc-three tr{display:grid;grid-template-columns:minmax(0,1fr);padding:.5rem .75rem;border-bottom:1px solid var(--row)}
  .rc-three tbody tr:last-child{border-bottom:0}
  .rc-three th,.rc-three td{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0;border:0}
  .rc-three tbody th{font-weight:600;color:#fff}
  .rc-three td::before{content:attr(data-label);color:var(--quiet)}
  .rc-three td.rc-diff{background:transparent;color:var(--warn)}
  .rc-tag{display:inline;margin:0 0 0 .4rem}
  .rc-history li{grid-template-columns:minmax(0,1fr) auto}
  .rc-history time{grid-column:1 / -1}
  .rc-steps li{grid-template-columns:2.2rem minmax(0,1fr)}
  .rc-by{grid-column:2;text-align:left}
  .rc-mini{grid-template-columns:minmax(0,1fr)}
  .rc-reopen{flex-direction:column}
  .rc-cal{gap:.3rem}
  .rc-wd{font-size:.58rem;letter-spacing:.04em;padding:0;text-align:center}
  .rc-cell{min-height:58px;padding:.4rem .3rem;align-items:center;gap:.2rem}
  .rc-cell b{font-size:1.05rem;margin:0}
  .rc-cell .st span,.rc-cell .note,.rc-cell .rc-amt,.rc-cell .rc-who{display:none}
  .rc-cell .st{gap:0}
  .rc-list li{flex-direction:column;gap:.2rem}
  .rc-list li .note{max-width:none;text-align:left}
}