/* The interactive demo's calculator, scoped.

   The demo now sits inside the public site's own layout: the shared
   masthead, a navy page head, the closing call to action and the footer.
   Every rule here is therefore prefixed with .bw-demo. Unscoped, its element
   rules (body, header, button, table, label) restyled the whole page around
   it, and its variables would have shadowed the design system's tokens of
   the same name, so they carry a --demo- prefix. See D-064. */

.bw-demo{
  /* The tester's drafting file (D-071): a deep navy, a warm sandy gold
     kept for accents, never a button fill, and an amber rather than a red
     for anything flagged. Red is kept for the one destructive action. */
  --demo-navy:#0A1C33;
  --demo-navy-light:#152a49;
  --demo-gold:#d7a763;
  --demo-paper:#fdfcf9;
  --demo-line:#d8d3c7;
  --demo-ink:#20242b;
  --demo-warn-bg:#fbecd4;
  --demo-warn-border:#d7a763;
  --demo-warn-text:#8a5a2b;
  --demo-ok-bg:#eaf3ea;
  --demo-mono:ui-monospace,"IBM Plex Mono","JetBrains Mono","SF Mono","Cascadia Code",Consolas,"Courier New",monospace;

  display:block;
  font-family:"Georgia","Cambria","Times New Roman",serif;
  background:#eef0f3;
  color:var(--demo-ink);
  padding:0 0 60px 0;
}
.bw-demo *{box-sizing:border-box}

/* The one control the demo's own header used to carry. */
.bw-demo-toolbar{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:20px}

/* Solid navy is the primary action; every neutral action is white with a
   navy outline; red only for clearing everything. */
.bw-demo button{
  font-family:Arial, sans-serif;
  font-size:0.85em;
  border:1px solid var(--demo-navy);
  border-radius:4px;
  padding:9px 16px;
  cursor:pointer;
  background:var(--demo-navy);
  color:#fff;
  font-weight:bold;
}
.bw-demo button.secondary{background:#fff;color:var(--demo-navy);border:1px solid var(--demo-navy)}
.bw-demo button.secondary:hover{background:#f2f4f7}
.bw-demo button.danger{background:#a53d3d;color:#fff;border-color:#a53d3d}
.bw-demo button:hover{filter:brightness(1.15)}
.bw-demo button:disabled{opacity:.55;cursor:default;filter:none}

/* The navy header the tester's file opens on, with its toolbar. */
.bw-demo-header{
  background:var(--demo-navy);color:#fff;
  padding:22px 30px;margin:0 0 22px;border-radius:6px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.bw-demo-header h1{margin:0;font-size:1.6em;letter-spacing:0.5px;color:#fff;font-family:Georgia,"Times New Roman",serif}
.bw-demo-header .tag{font-family:Arial, sans-serif;font-size:0.78em;color:#c9d2e0;margin-top:4px}
.bw-demo-header .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bw-demo-header .draft-save{font-family:Arial, sans-serif;font-size:0.8em;color:#c9d2e0;margin-right:4px}
.bw-demo-header .draft-save.is-bad{color:#ffb4a8}
.bw-demo-header .draft-save.is-ok{color:#b9e3c3}

/* Matter details and advocates fold away once filled in. */
.bw-demo h2.collapsible-h2{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.bw-demo .section-fold-btn{
  background:var(--demo-navy);border:none;color:#fff;
  font-size:1.05em;font-weight:bold;padding:4px 15px;border-radius:4px;cursor:pointer;
  text-transform:none;letter-spacing:0;box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.bw-demo .section-fold-btn:hover{background:var(--demo-navy-light)}

/* Every figure and code in the monospace face. */
.bw-demo .mono,.bw-demo input.mono{font-family:var(--demo-mono)}
.bw-demo .date-badge{
  margin-top:3px;font-family:var(--demo-mono);font-size:0.76em;font-weight:500;
  padding:2px 6px;border-radius:3px;background:#1b6b3a;color:#fff;
}
.bw-demo .warn-text{color:#a53d3d}

/* A missing date, time, scale head or advocate is marked on the field. */
.bw-demo .field-issue{outline:2px solid var(--demo-warn-border);outline-offset:1px;border-radius:3px;background:var(--demo-warn-bg)}
.bw-demo tr.row-jumped{animation:bwRowJump 1.8s ease}
@keyframes bwRowJump{
  0%{box-shadow:inset 0 0 0 999px rgba(201,162,39,0.35)}
  100%{box-shadow:inset 0 0 0 999px rgba(201,162,39,0)}
}

.bw-demo-main{max-width:1480px;margin:24px auto 0;padding:0 20px}

/* Bootstrap has a .card component (a flex column). The calculator's
   section.card is not one, so it is put back to a plain block. */
.bw-demo section.card{
  display:block;
  min-width:0;
  background:var(--demo-paper);
  border:1px solid var(--demo-line);
  border-radius:6px;
  padding:20px 24px;
  margin-bottom:22px;
}
.bw-demo section.card h2{
  font-family:Arial, sans-serif;
  font-size:1.05em;
  font-weight:bold;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--demo-navy);
  border-bottom:2px solid var(--demo-gold);
  padding-bottom:8px;
  margin-top:0;
}
.bw-demo .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
  gap:14px 20px;
}
.bw-demo label{
  font-family:Arial, sans-serif;
  font-size:0.75em;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:#555;
  display:block;
  margin-bottom:4px;
}
.bw-demo input[type=text],
.bw-demo input[type=date],
.bw-demo input[type=number],
.bw-demo select,
.bw-demo textarea{
  width:100%;
  padding:7px 8px;
  border:1px solid #b9b9b9;
  border-radius:3px;
  font-family:Arial, sans-serif;
  font-size:0.9em;
  background:#fff;
  color:var(--demo-ink);
}
.bw-demo .checkline{display:flex;align-items:center;gap:8px;margin-top:6px}
.bw-demo .checkline input{width:auto}
.bw-demo table{
  width:100%;
  border-collapse:collapse;
  font-family:Arial, sans-serif;
  font-size:0.76em;
  margin-top:12px;
}
.bw-demo th,
.bw-demo td{
  border:1px solid #c8c8c8;
  padding:6px 6px;
  vertical-align:top;
  text-align:left;
}
.bw-demo #entryTable th,
.bw-demo #entryTable td{padding:4px 4px}
.bw-demo th{
  background:var(--demo-navy-light);
  color:#fff;
  font-weight:normal;
  text-transform:uppercase;
  font-size:0.78em;
  letter-spacing:0.3px;
}
.bw-demo td input,
.bw-demo td select,
.bw-demo td textarea{
  border:1px solid #ddd;
  padding:4px;
  font-size:0.95em;
  min-width:70px;
}
.bw-demo td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--demo-mono)}
.bw-demo tr.weekend-row{background:#fdecec}
.bw-demo tr.page-break-row td{
  background:var(--demo-navy);
  color:#fff;
  font-weight:bold;
  text-align:right;
  font-family:Arial, sans-serif;
}
.bw-demo .small-btn{padding:4px 8px;font-size:0.75em}
.bw-demo #errorPanel{font-family:Arial, sans-serif;font-size:0.88em;max-height:340px;overflow-y:auto;padding-right:4px}
.bw-demo .err-item{
  background:var(--demo-warn-bg);
  border-left:4px solid var(--demo-warn-border);
  color:var(--demo-warn-text);
  padding:8px 12px;
  margin-bottom:6px;
  border-radius:3px;
  cursor:pointer;
}
.bw-demo .err-item:hover{background:#f7dfb8}
.bw-demo .err-item.err-group{cursor:default}
.bw-demo .err-item .jump-hint{float:right;font-size:0.85em;color:var(--demo-warn-text);font-weight:normal}
.bw-demo .err-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.bw-demo .err-chip{
  background:#fff;border:1px solid var(--demo-warn-border);color:var(--demo-warn-text);
  padding:2px 8px;border-radius:10px;font-size:0.82em;cursor:pointer;
}
.bw-demo .err-chip:hover,.bw-demo .err-chip:focus{background:var(--demo-warn-border);color:#fff}
.bw-demo .err-ok{
  background:var(--demo-ok-bg);
  border-left:4px solid #4a8a4a;
  padding:8px 12px;
  border-radius:3px;
}
.bw-demo .summary-table{max-width:560px;margin-left:auto;font-family:Arial,sans-serif;font-size:0.95em}
.bw-demo .summary-table td{border:none;padding:6px 4px}
.bw-demo .summary-table tr.total-row td{
  border-top:2px solid var(--demo-navy);
  font-weight:bold;
  font-size:1.1em;
  color:var(--demo-navy);
}
.bw-demo .note{
  font-family:Arial, sans-serif;
  font-size:0.78em;
  color:#777;
  margin-top:6px;
}
.bw-demo .rate-hint{
  font-family:Arial, sans-serif;
  font-size:0.78em;
  color:var(--demo-navy);
  background:#eef1f6;
  padding:6px 10px;
  border-radius:3px;
  margin-top:6px;
  display:inline-block;
}

.bw-demo .pagebar{
  display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;
  background:#eef1f6;border:1px solid #dfe3ea;border-radius:4px;
  padding:10px 14px;margin:10px 0;
}
.bw-demo .pagebar-grp{display:flex;flex-direction:column;gap:4px}
.bw-demo .pagebar-grp label{margin-bottom:0}
.bw-demo .pagebar-grp select{width:auto;min-width:150px}
.bw-demo #pageNav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding-bottom:2px}

.bw-demo .fold-btn{
  background:transparent;border:1px solid rgba(255,255,255,0.4);color:#fff;
  font-size:0.8em;padding:1px 6px;margin-right:8px;border-radius:3px;cursor:pointer;
}
.bw-demo .fold-btn:hover{background:rgba(255,255,255,0.15)}
.bw-demo tr.folded-row td{background:#eef1f6;padding:6px 8px}
.bw-demo tr.folded-row button{width:100%;text-align:left}

@media (prefers-reduced-motion: reduce){
  .bw-demo *{animation:none !important;transition:none !important}
}

@media print{
  @page{ size: A4 portrait; margin: 12mm; }

  /* The site's own chrome has no place on a printed Bill. */
  .billwise-masthead, .billwise-footer, .page-head, .billwise-cta-band,
  .skip-link, #welcomeModal, .bw-demo-toolbar, .bw-demo-header,
  .bw-demo .card.no-print, .bw-demo button, .bw-demo #entryForm, .bw-demo #advocateForm,
  .bw-demo .edit-only, .bw-demo .note{display:none !important;}

  body, .bw-demo{background:#fff;font-family:"Times New Roman", Times, serif;font-size:10pt;padding:0;}
  .bw-demo-main{max-width:100%;margin:0;padding:0;}
  .bw-demo section.card{border:none;padding:0;margin-bottom:10px;}
  .bw-demo table{font-size:10pt;font-family:"Times New Roman", Times, serif;}
  .bw-demo #entryTable{table-layout:fixed;width:186mm;}
  .bw-demo #entryTable td, .bw-demo #entryTable th{padding:2px 3px;word-wrap:break-word;overflow-wrap:break-word;}
  /* The matter details and advocates block is the bill's header page. It
     gets a sheet of its own, so bill page 1 starts clean and its total
     carried forward cannot be pushed onto the following sheet. */
  .bw-demo #entriesSection{page-break-before:always;}
  .bw-demo #summarySection{page-break-before:always;}
  .bw-demo th{background:#333 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .bw-demo tr{page-break-inside:avoid;}
  .bw-demo tr.page-break-row{page-break-after:always;page-break-inside:avoid;}
}