/* Powerlife BMS admin. Tokens carried across from the Vita-Lift design system. */
:root{
  --navy:#0C2652;--navy-deep:#06162F;--navy-2:#15376A;
  --green:#0E8A2A;--green-lt:#38B858;--green-deep:#054F14;
  --porcelain:#F4F6FA;--porcelain-2:#E7ECF3;--platinum:#C4CDDB;--platinum-lt:#DFE5EE;
  --gold:#BE9F5D;--ink:#0E1B33;--text:#3A465C;--mist:#9FB0C7;--white:#fff;
  --danger:#B3261E;--danger-bg:#FDECEA;--ok:#0E8A2A;--ok-bg:#E8F6EC;
  --warn:#8A6D1F;--warn-bg:#FCF4E0;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Figtree',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --shadow:0 20px 44px rgba(12,38,82,.12);--shadow-sm:0 6px 16px rgba(12,38,82,.08);

  /* Chart series. Steps of the brand navy and gold, moved until they cleared a
     colour-vision check against a white panel: --navy is too dark to read as a
     fill, and the brand green sits too close to the blue under tritanopia.
     Every value is printed beside its mark, so colour is never the only cue. */
  --chart-1:#2C6BC7;      /* the measure under the question */
  --chart-2:#B08A2F;      /* the second series, where there is one */
  --chart-cost:#C4CDDB;   /* the remainder, not a series: cost inside revenue */
  --chart-grid:#E7ECF3;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--porcelain);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.15}
a{color:inherit;text-decoration:none}
code,.mono{font-family:var(--mono);font-size:.86em}

.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
aside{background:var(--navy-deep);color:var(--mist);padding:22px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
aside .brand{font-family:var(--serif);font-size:1.24rem;color:#fff;padding:0 22px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
aside .brand b{color:var(--green-lt)}
aside .brand small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;color:var(--platinum);margin-top:4px}
aside h4{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-lt);padding:22px 22px 8px;font-weight:600}
aside a{display:block;padding:8px 22px;font-size:.88rem;color:var(--mist);border-left:2px solid transparent}
aside a:hover{color:#fff;background:rgba(255,255,255,.04)}
aside a.on{color:#fff;border-left-color:var(--green-lt);background:rgba(56,184,88,.1)}
aside a.s2{opacity:.45}
aside a .tag{font-size:.56rem;letter-spacing:.1em;background:rgba(190,159,93,.2);color:var(--gold);padding:1px 5px;border-radius:3px;margin-left:6px;vertical-align:middle}
/* A failed message is the one sidebar badge that should be alarming. */
aside a .tag.bad{background:rgba(179,38,30,.25);color:#FF9A93}

/* The rendered text exactly as the customer received it. Monospace and
   pre-wrap, because a reminder is evidence and its line breaks are part of it. */
.msg-body{font-family:var(--mono);font-size:.78rem;white-space:pre-wrap;line-height:1.5;
  background:var(--porcelain);border:1px solid var(--porcelain-2);border-radius:5px;
  padding:10px 12px;margin-top:8px;max-width:64ch;color:var(--ink)}
.msg-peek{cursor:pointer;font-size:.78rem;color:var(--navy-2);font-weight:600}
.msg-peek:hover{color:var(--green)}
details[open] .msg-peek{color:var(--green)}
.msg-err{color:var(--danger);font-size:.78rem;font-weight:600;max-width:52ch;display:block}

/* min-width:0 because a grid item defaults to min-width:auto, which lets it
   grow past its track rather than letting its contents scroll. Without it a
   report table wider than the screen stretches the whole page sideways and the
   sidebar goes with it. */
main{padding:0 0 60px;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--porcelain-2);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.topbar h1{font-size:1.4rem}
.topbar .who{font-size:.84rem;color:var(--mist);display:flex;align-items:center;gap:14px}
.topbar .who b{color:var(--navy);font-weight:600}
.wrap{padding:28px 32px;max-width:1400px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:28px}
.card{background:#fff;border:1px solid var(--porcelain-2);border-radius:6px;padding:20px 22px}
.card .k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:600}
.card .v{font-family:var(--serif);font-size:1.85rem;color:var(--navy);margin-top:6px;line-height:1.1}
.card .v.neg{color:var(--danger)}
.card .v.pos{color:var(--green)}
.card .sub{font-size:.78rem;color:var(--mist);margin-top:3px}

.panel{background:#fff;border:1px solid var(--porcelain-2);border-radius:6px;margin-bottom:24px;overflow:hidden}
.panel-head{padding:16px 22px;border-bottom:1px solid var(--porcelain-2);display:flex;align-items:center;justify-content:space-between}
.panel-head h3{font-size:1.12rem;color:var(--navy)}
.panel-head .note{font-size:.78rem;color:var(--mist)}
.panel-body{padding:22px}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-weight:600;padding:12px 22px;border-bottom:1px solid var(--porcelain-2);background:#FBFCFE}
td{padding:11px 22px;border-bottom:1px solid var(--porcelain-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FBFCFE}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:40px 22px;text-align:center;color:var(--mist);font-size:.9rem}

.pill{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:11px;text-transform:uppercase}
.pill.ok{background:var(--ok-bg);color:var(--green-deep)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--danger-bg);color:var(--danger)}
.pill.neutral{background:var(--porcelain-2);color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.88rem;padding:.7em 1.3em;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-lt)}
.btn-line{border-color:var(--platinum);color:var(--navy);background:#fff}.btn-line:hover{border-color:var(--navy)}
.btn-sm{font-size:.8rem;padding:.5em 1em}

.stage2{background:var(--warn-bg);border:1px solid rgba(190,159,93,.4);border-radius:6px;padding:22px;color:var(--warn)}
.stage2 h3{color:var(--warn);font-size:1.1rem;margin-bottom:8px}

.login{min-height:100vh;display:grid;place-items:center;background:var(--navy)}
.login-card{background:#fff;border-radius:10px;padding:40px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.login-card .brand{font-family:var(--serif);font-size:1.5rem;color:var(--navy);text-align:center;margin-bottom:4px}
.login-card .brand b{color:var(--green)}
.login-card .sub{text-align:center;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:28px}
label{display:block;font-size:.76rem;font-weight:600;color:var(--navy);margin-bottom:6px;letter-spacing:.02em}
input,select,textarea{width:100%;font-family:var(--sans);font-size:.94rem;padding:11px 13px;border:1px solid var(--platinum);border-radius:5px;color:var(--ink);margin-bottom:16px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(14,138,42,.13)}
.err{background:var(--danger-bg);border:1px solid rgba(179,38,30,.3);color:var(--danger);padding:11px 14px;border-radius:5px;font-size:.86rem;margin-bottom:18px}

.api-list{font-size:.86rem}
.api-list .grp{padding:14px 22px;border-bottom:1px solid var(--porcelain-2)}
.api-list .grp:last-child{border-bottom:none}
.api-list .grp h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.api-list .ep{display:flex;gap:12px;align-items:baseline;padding:4px 0;font-family:var(--mono);font-size:.8rem}
.api-list .m{width:56px;flex:none;font-weight:700;font-size:.68rem;letter-spacing:.06em}
.api-list .m.get{color:var(--green)}.api-list .m.post{color:var(--navy-2)}
.api-list .m.patch,.api-list .m.put{color:var(--gold)}.api-list .m.all{color:var(--mist)}
.api-list .d{color:var(--mist);font-family:var(--sans);font-size:.78rem;margin-left:auto}

/* ---- Data entry ---------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 18px;padding:22px}
.form-grid .field{display:flex;flex-direction:column}
.form-grid .field .hint{font-size:.74rem;color:var(--mist);margin:-10px 0 16px}
.form-grid input,.form-grid select{margin-bottom:14px}

/* Line tables carry their own inputs, so they sit tighter than a report table. */
table.lines td{padding:7px 10px;vertical-align:top}
table.lines th{padding:10px}
table.lines th:first-child,table.lines td:first-child{padding-left:22px;width:34px}
table.lines th:last-child,table.lines td:last-child{padding-right:22px}
table.lines input,table.lines select{margin:0;padding:8px 10px;font-size:.86rem}
table.lines input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
table.lines tbody tr:hover{background:transparent}
.bad-field{border-color:var(--danger) !important;background:var(--danger-bg)}

.actions{padding:16px 22px;border-top:1px solid var(--porcelain-2);display:flex;align-items:center;gap:12px;background:#FBFCFE}
.actions .spacer{margin-left:auto}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-line.rm{padding:.45em .8em;font-size:.76rem}

/* Read-only figure stacks: credit position, invoice totals, allocation state. */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;padding:18px 22px;background:#FBFCFE;border-top:1px solid var(--porcelain-2)}
.figures div{display:flex;flex-direction:column}
.figures .k{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-weight:600}
.figures .v{font-family:var(--serif);font-size:1.1rem;color:var(--navy);font-variant-numeric:tabular-nums}
.figures .v.big{font-size:1.5rem}
.figures .v.pos{color:var(--green)}.figures .v.neg{color:var(--danger)}
.figures .v.warn-text{color:var(--warn)}
.figures .hold{grid-column:1/-1;color:var(--danger);font-size:.84rem;font-weight:600}

.pick{display:flex;gap:10px;align-items:baseline;font-size:.82rem;padding:2px 0}
.pick .exp{color:var(--mist);font-size:.76rem}
.credit-bar{display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--porcelain-2)}
.credit-bar .note{font-size:.82rem;color:var(--text)}

.ok-box{background:var(--ok-bg);border:1px solid rgba(14,138,42,.3);color:var(--green-deep);padding:16px 18px;border-radius:5px;font-size:.9rem;margin-bottom:22px}
.ok-box .links{margin-top:12px;display:flex;gap:18px}
.ok-box .links a{color:var(--green-deep);font-weight:600;text-decoration:underline}
.ok-box .picked{margin-top:8px;font-size:.82rem;color:var(--text)}
.err{white-space:pre-line}
.note.bad-text{color:var(--danger);font-weight:600}
.stale{font-size:.82rem;color:var(--warn)}

/* ---- Business intelligence ----------------------------------------------- */
.period-bar{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.period-bar .spacer{margin-left:auto}
.tabs{display:inline-flex;background:#fff;border:1px solid var(--porcelain-2);border-radius:5px;overflow:hidden}
.tabs a{padding:8px 15px;font-size:.84rem;font-weight:600;color:var(--text);border-right:1px solid var(--porcelain-2)}
.tabs a:last-child{border-right:none}
.tabs a:hover{background:var(--porcelain)}
.tabs a.on{background:var(--navy);color:#fff}

.panel.q .panel-head h3{font-family:var(--serif);font-size:1.16rem;color:var(--navy)}
.answer{padding:14px 22px;background:var(--ok-bg);border-bottom:1px solid var(--porcelain-2);font-size:.95rem;color:var(--green-deep)}
.answer b{font-size:1.05rem}

/* Ranked bars. Long names read better across than up. */
.rank{display:flex;flex-direction:column;gap:9px}
.rank-row{display:grid;grid-template-columns:minmax(140px,1.5fr) minmax(80px,3fr) minmax(120px,auto);
  gap:14px;align-items:center;font-size:.88rem}
.rank-name{display:flex;align-items:center;gap:8px;min-width:0}
.rank-name span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-pos{flex:none;width:20px;font-size:.72rem;color:var(--mist);font-variant-numeric:tabular-nums;text-align:right}
.rank-track{background:var(--porcelain);border-radius:3px;height:17px;overflow:hidden}
.rank-bar{height:100%;background:var(--chart-1);border-radius:0 4px 4px 0;min-width:2px}
.rank-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.rank-meta{display:block;font-weight:400;font-size:.74rem;color:var(--mist)}
.rank-row.leader .rank-bar{background:var(--navy)}
.rank-row.leader .rank-name{font-weight:700;color:var(--navy)}
.rank-row.leader .rank-track{height:21px}

/* Cost and margin stacked to the width of revenue. The 2px gap keeps the two
   readable where they meet. */
.mbar-cell{min-width:150px;width:26%}
.mbar{display:flex;align-items:center;height:15px;background:var(--porcelain);border-radius:3px;overflow:hidden}
.mbar span{height:100%;display:block}
.mbar-cost{background:var(--chart-cost)}
.mbar-margin{background:var(--chart-2);border-radius:0 4px 4px 0;margin-left:2px}
.mbar-margin.loss{background:var(--danger)}
/* Revenue with no cost recorded: one neutral bar, deliberately not the margin
   colour, so nothing on the page reads as profit that has not been proved. */
.mbar-plain{background:var(--platinum);border-radius:0 4px 4px 0}
.neg-text{color:var(--danger)}
tfoot td{padding:12px 22px;border-top:2px solid var(--navy);font-weight:600;background:#FBFCFE}

.doc-links{white-space:nowrap}
.doc-links a{font-size:.8rem;font-weight:600;color:var(--navy-2);text-decoration:underline;margin-right:10px}
.doc-links a:hover{color:var(--green)}

tr.quiet td{color:var(--mist)}
tr.quiet td:first-child{color:var(--text)}
.none{font-size:.78rem;color:var(--mist);font-style:italic}
.panel-note{padding:12px 22px;border-top:1px solid var(--porcelain-2);font-size:.8rem;color:var(--mist)}
/* A note that states a figure is missing rather than merely explaining one.
   It has to survive being printed, so it carries a tint and not just a colour:
   a grey caption under a column of blanks reads as a rendering fault. */
.panel-note.warn-note{background:var(--warn-bg);color:var(--warn);border-top-color:var(--warn)}
.unknown{color:var(--mist);font-style:italic}

.legend{display:flex;gap:20px;font-size:.8rem;color:var(--text);margin-bottom:12px}
.legend-inline{padding:12px 22px;border-top:1px solid var(--porcelain-2);margin-bottom:0}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw-1{background:var(--chart-1)}.sw-2{background:var(--chart-2)}.sw-cost{background:var(--chart-cost)}

.chart-scroll{overflow-x:auto}
svg.chart{width:100%;min-width:620px;height:auto;display:block}
svg.chart .grid{stroke:var(--chart-grid);stroke-width:1}
svg.chart .axis-line{stroke:var(--platinum);stroke-width:1}
svg.chart .axis{font-family:var(--sans);font-size:11px;fill:var(--mist)}
svg.chart .col{fill:var(--chart-1)}
svg.chart .line{fill:none;stroke:var(--chart-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg.chart .dot{fill:var(--chart-2);stroke:#fff;stroke-width:2}

/* ---- Reports -------------------------------------------------------------
   Every card and every panel head on the dashboard opens the report behind it,
   so both have to look like the doors they are without turning the dashboard
   into a wall of links. The affordance is the border and the lift on hover,
   plus one small phrase on the panel heads. */
a.card{display:block;color:inherit;transition:.15s}
a.card:hover{border-color:var(--navy-2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
a.card::after{content:'View report \203A';display:block;font-size:.7rem;font-weight:600;
  letter-spacing:.06em;color:var(--navy-2);margin-top:10px;opacity:0;transition:.15s}
a.card:hover::after{opacity:1}
a.panel-head{cursor:pointer}
a.panel-head:hover{background:#FBFCFE}
a.panel-head .open{display:block;color:var(--navy-2);font-weight:600;margin-top:2px}
a.panel-head:hover .open{color:var(--green)}

/* A link inside a report row. Underlined rather than coloured alone, because
   the row it sits in is already carrying colour for something else. */
.rlink{color:var(--navy-2);text-decoration:underline;font-weight:600}
.rlink:hover{color:var(--green)}

/* The line that says what this report ties back to. First thing on the page:
   an operator checks the foot against the card they clicked before they read
   a single row, and if it disagrees nothing below it matters. */
.tie{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--porcelain-2);border-left:3px solid var(--green);
  border-radius:6px;padding:14px 20px;margin-bottom:22px}
.tie-k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:600}
.tie-v{font-family:var(--serif);font-size:1.3rem;color:var(--navy);font-variant-numeric:tabular-nums}
.tie-note{font-size:.82rem;color:var(--text)}

/* Sorting is a link, so the header is one. The caret is the only thing that
   changes, and it is present on every sortable column so nothing shifts when
   the sort moves. */
th.sortable{padding:0}
th.sortable a{display:block;padding:12px 22px;color:inherit;white-space:nowrap}
th.sortable a:hover{color:var(--navy);background:var(--porcelain)}
th.sortable.on a{color:var(--navy)}
th.sortable .caret{margin-left:6px;opacity:.45;font-size:.8em}
th.sortable.on .caret{opacity:1;color:var(--green)}
th.num.sortable a{text-align:right}

/* A report table carries twice the columns of a list screen, so it sits tighter
   and nothing that is a single token is allowed to break inside itself: an
   invoice number split over two lines is not a number anybody can read back,
   and a figure with its thousands on the line below is worse. Which means the
   table can outgrow the panel, so it scrolls inside it rather than pushing the
   page sideways. On paper the sheet is turned instead. */
.table-scroll{overflow-x:auto}
.panel.long td,.panel.long th{padding-left:14px;padding-right:14px}
.panel.long th.sortable a{padding-left:14px;padding-right:14px}
.panel.long td.num,.panel.long td.mono,.panel.long td.nowrap{white-space:nowrap}

/* Grouped reports: a product with its invoices under it. The group row is the
   sum of the rows beneath, so it wears the weight. */
table.grouped tr.grp td{border-top:1px solid var(--platinum-lt);background:#FBFCFE}
table.grouped tr.sub td{font-size:.84rem;color:var(--text)}
table.grouped tr.sub td:nth-child(2){padding-left:34px}
.sub-head{padding:14px 22px 0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);font-weight:600}
.pos-text{color:var(--green)}

.print-head{display:none}

@media(max-width:900px){.shell{grid-template-columns:1fr}aside{position:static;height:auto}.wrap,.topbar{padding-left:20px;padding-right:20px}
  .form-grid{grid-template-columns:1fr}
  table.lines{display:block;overflow-x:auto}
  .rank-row{grid-template-columns:1fr;gap:4px}
  .rank-val{text-align:left}
  .rank-meta{display:inline;margin-left:8px}}

/* ---- Print: the dashboard as an A4 management report ---------------------- */
@page{size:A4 portrait;margin:14mm 12mm}

/* Reports turn the sheet. A register with eleven columns of money does not fit
   across the 186mm of an A4 portrait at any type size a person can read, and
   the answer to that is landscape, not a smaller font or a dropped column. */
@page report{size:A4 landscape;margin:12mm 10mm}

@media print{
  /* Colour matters here: the margin shading and the two chart series carry
     meaning. Ask for it and keep the values printed beside every mark so the
     report still reads on a mono printer. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  body{background:#fff;font-size:9.5pt;line-height:1.4}
  .shell{display:block}
  aside,.topbar,.no-print,.period-bar,.btn{display:none !important}
  main{padding:0}
  .wrap{padding:0;max-width:none}

  .print-head{display:block;border-bottom:2pt solid var(--navy);padding-bottom:6pt;margin-bottom:12pt}
  .ph-brand{font-family:var(--serif);font-size:15pt;color:var(--navy)}
  .ph-title{font-size:10pt;font-weight:600;color:var(--ink);margin-top:2pt}
  .ph-period{font-size:9pt;color:var(--text)}

  /* A panel split across a page break is unreadable as a report. */
  .panel{break-inside:avoid;page-break-inside:avoid;border:1px solid var(--platinum-lt);
    box-shadow:none;margin-bottom:10pt;border-radius:0}
  .panel-head{padding:7pt 10pt}
  .panel-head h3{font-size:11pt}
  .panel-body{padding:9pt 10pt}
  .answer{padding:7pt 10pt;background:#fff;border-bottom:1px solid var(--platinum-lt)}
  table{font-size:8.5pt}
  th,td{padding:4pt 10pt}
  tfoot td{padding:5pt 10pt}
  .cards{grid-template-columns:repeat(3,1fr);gap:8pt;margin-bottom:10pt}
  .card{padding:7pt 9pt;border-radius:0}
  .card .v{font-size:13pt}
  .rank{gap:5pt}
  .rank-row{font-size:8.5pt}
  .rank-track{height:11px}
  .rank-row.leader .rank-track{height:14px}
  svg.chart{min-width:0}
  .chart-scroll{overflow:visible}
  a[href]::after{content:none}
  a.card::after{display:none}
  a.panel-head .open{display:none}

  /* A report is a long table and must be allowed to run over a page, unlike a
     dashboard panel which is unreadable split. The header row repeats on every
     sheet, and a single row never breaks across two: a figure with its label on
     the previous page is a figure nobody can use. */
  body[data-report]{page:report;font-size:8.5pt}
  .table-scroll{overflow:visible}
  .panel.long{break-inside:auto;page-break-inside:auto}
  .panel.long thead{display:table-header-group}
  .panel.long tfoot{display:table-row-group}
  .panel.long tr{break-inside:avoid;page-break-inside:avoid}
  th.sortable a{padding:4pt 10pt}
  th.sortable .caret{display:none}

  /* The tie line prints: whoever reads the paper version cannot click the card
     it came from, so the figure it foots to has to be on the sheet. */
  .tie{border:1px solid var(--platinum-lt);border-left:2pt solid var(--navy);
    border-radius:0;padding:6pt 9pt;margin-bottom:9pt}
  .tie-v{font-size:12pt}
  .sub-head{padding:7pt 10pt 0}
  table.grouped tr.sub td{font-size:8pt}
}