/* Filename: /var/www/vhosts/webflow.pt/httpdocs/house.css
   ONE STYLESHEET, WORN BY EVERY PAGE OF THE NEW DESIGN - THE PUBLIC PAGES AND THE CUSTOMER
   LOGIN ALIKE. The pages BEHIND the login keep their own Bootstrap + styles.css stack and are
   not touched by this file at all. Two designs, two sheets, and no page ever wears both.
   SELECTOR DISCIPLINE, AND IT IS THE WHOLE REASON THIS FILE READS THE WAY IT DOES:
   base ELEMENT rules (p, a, h2, li) stay unscoped at specificity 0-0-1, and every component
   that needs to override them is a CLASS at 0-1-0. A single class outranks any number of
   elements, so .colophon beats p and .btn beats a without a prefix, a parent, or !important.
   Scoping the base rules to a wrapper inverts that - `.wrap p` at 0-1-1 silently outranks
   `.colophon`, and the component loses to the thing it was written to override.
   ABSOLUTE UNITS THROUGHOUT. Bootstrap 3 sets html{font-size:10px}, so any rem here would
   render at 62.5% wherever that stack is present and 100% where it is not - one rule, two
   sizes, which is the one thing a shared house style exists to prevent.
   THE PALETTE IS BLACK AND ONE ACCENT. Every background is pure #000 and structure is drawn in
   hairline borders, so nothing reads as a lighter box floating on the page. The two exceptions
   are deliberate and loud: a message that succeeded is solid green, one that failed is solid
   red, both in white text, because a result the visitor might miss is a result wasted. */
/* #region tokens: TWO COLOURS, ONE ACCENT, AND THE TWO VERDICTS [Foundation Layer] */
  :root { --bg: #000; --ink: #fff; --body: #d0d0d0; --mute: #8a8a8a; --faint: #4a4a4a;
    --line: #232323; --accent: #386da0; --accent-lift: #4a83bd;
    --good: #1f7a45; --bad: #a02929; }
/* #endregion */
/* #region reset: A PREDICTABLE BOX ON EVERY DEVICE [UI Layer] */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; font-size: 16px; }
  html, body { margin: 0; padding: 0; }
/* #endregion */
/* #region canvas: BLACK EVERYWHERE, ONE COLUMN, ONE WIDTH [UI Layer] */
  body { min-height: 100vh; background: var(--bg); color: var(--ink); font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; }
  .wrap, .main-container { max-width: 640px; width: auto; margin: 0 auto;
    padding: 56px 24px 48px; }
/* #endregion */
/* #region mark: THE LOGO AND THE TITLE - THE ONLY CENTRED THINGS [UI Layer] */
  .mark, .logo { text-align: center; margin: 0 0 48px; padding: 0; }
  .mark img, .logo img { width: 220px; max-width: 60vw; height: auto; display: inline-block; }
  /* The mark is the way back to the front door from every page, including the login. */
  .mark a, .logo a { display: inline-block; text-decoration: none; line-height: 0; }
  .mark a:hover, .logo a:hover { opacity: .82; }
  h1, .form-signin-heading { text-align: center; font-size: 16px; font-weight: 600;
    letter-spacing: 3.2px; text-transform: uppercase; color: var(--ink); margin: 0 0 10px;
    border: 0; padding: 0; }
  .lede { text-align: center; color: var(--mute); font-size: 14.4px; line-height: 1.65;
    margin: 0 auto 44px; max-width: 448px; }
/* #endregion */
/* #region prose: LEFT ALIGNED, ONE IDEA PER PARAGRAPH, UNSCOPED ON PURPOSE [Content Layer] */
  p { line-height: 1.75; margin: 0 0 22px; color: var(--body); font-size: 15.2px; }
  a { color: var(--accent); }
  a:hover { color: var(--accent-lift); }
  strong { color: var(--ink); font-weight: 600; }
  h2 { font-size: 12.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--mute); margin: 44px 0 18px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line); }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em;
    color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
    padding: 2px 6px; white-space: nowrap; }
  ul { margin: 0 0 22px; padding-left: 18px; color: var(--body); }
  li { line-height: 1.75; margin-bottom: 9px; font-size: 15.2px; }
/* #endregion */
/* #region facts: MACHINE TRUTHS AS ROWS, BECAUSE THEY ARE NOT PROSE [Content Layer] */
  .facts { margin: 0 0 22px; border-top: 1px solid var(--line); }
  .facts div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0;
    border-bottom: 1px solid var(--line); }
  /* 184px, not 144: the basis has to clear the LONGEST label at 12.5px uppercase with 1.1px
     tracking, and "DNS or zone question" needs ~177px. A basis sized to the average label
     wraps the one outlier onto two lines while the value column sits half empty. */
  .facts dt { flex: 0 0 184px; color: var(--mute); font-size: 12.5px; letter-spacing: 1.1px;
    text-transform: uppercase; margin: 0; padding-top: 2px; }
  .facts dd { flex: 1 1 192px; margin: 0; color: var(--ink); font-size: 15.2px; }
/* #endregion */
/* #region form: BLACK FIELDS, ACCENT ON FOCUS AND ON THE ONE BUTTON [UI Layer] */
  form { margin: 36px 0 0; }
  label { display: block; font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--mute); margin: 22px 0 7px; }
  .form-group { margin: 0 0 18px; }
  input[type=email], input[type=text], input[type=password], textarea, .form-control {
    width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
    border-radius: 4px; padding: 13px; font: inherit; font-size: 15.2px; height: auto;
    box-shadow: none; }
  input:focus, textarea:focus, .form-control:focus { border-color: var(--accent);
    outline: 2px solid rgba(56, 109, 160, .35); outline-offset: 0; box-shadow: none; }
  ::placeholder { color: #6a6a6a; opacity: 1; }
  textarea { min-height: 152px; resize: vertical; line-height: 1.65; }
  /* Chrome paints a saved-credential field with its own near-white fill that no background rule
     can reach. The inset shadow is the only surface it leaves us. */
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
  input:-webkit-autofill:active { -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset;
    transition: background-color 9999s ease-in-out 0s; }
  .btn, .btn-black { margin-top: 28px; width: 100%; background: var(--accent); color: #fff;
    border: 0; border-radius: 4px; padding: 14px; font: inherit; font-weight: 600;
    letter-spacing: .8px; cursor: pointer; display: block; text-align: center;
    text-decoration: none; text-shadow: none; box-shadow: none; }
  .btn:hover, .btn-black:hover, .btn-black:focus, .btn-black:active, .btn-black:active:focus {
    background: var(--accent-lift); color: #fff; }
  .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* The honeypot: off-screen, tab-skipped, invisible to anything with eyes. */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  /* Invisible renders a zero-size widget, so it must claim no layout at all. */
  .g-recaptcha { margin: 0; display: block; }
/* #endregion */
/* #region verdicts: SOLID RED OR SOLID GREEN, WHITE TEXT, EVERY FORM ON THE DOMAIN [UI Layer] */
  /* A result the visitor can miss is a result wasted, so these are the only filled surfaces in
     the whole design. .note is ours, .alert is what the login's JS injects - same look, because
     a customer and a complainant should never have to learn two vocabularies. */
  .note, .alert { margin: 20px 0 0; padding: 14px 17px; border: 0; border-radius: 4px;
    font-size: 14.4px; line-height: 1.65; color: #fff; }
  .note.ok, .alert-success { background: var(--good); color: #fff; }
  .note.bad, .alert-danger { background: var(--bad); color: #fff; }
  .note a, .alert a { color: #fff; text-decoration: underline; }
  /* The validator's per-field message, same vocabulary at a smaller scale. */
  .help-block { margin: 7px 0 0; padding: 8px 12px; border-radius: 4px; background: var(--bad);
    color: #fff; font-size: 13px; line-height: 1.5; }
  /* validator.min.js hardcodes $('<ul class="list-unstyled">') around every field error -
     there is no option to change it, so the list is flattened to plain text here. Without
     this the base ul rule adds 22px under the last line and the box reads bottom-heavy. */
  .help-block ul { margin: 0; padding: 0; list-style: none; }
  .help-block li { margin: 0; font-size: inherit; line-height: inherit; }
  /* Nothing inside a verdict box may leave a trailing margin behind it. */
  .note > *:last-child, .alert > *:last-child, .help-block > *:last-child { margin-bottom: 0; }
  .help-block:empty { display: none; padding: 0; }
  .messages:empty { display: none; }
  .progress { background: #111; border-radius: 4px; height: 6px; margin: 13px 0 0;
    box-shadow: none; overflow: hidden; }
  .progress-bar { background: var(--accent); box-shadow: none; height: 100%; }
/* #endregion */
/* #region legal: THE reCAPTCHA NOTICE AND THE CLOSING LINES, DELIBERATELY QUIET [Layout Layer] */
  /* Google's floating badge may be hidden ONLY where the branding is stated in the flow, which
     .attribution does. Without that sentence on the page, this rule breaches their terms. */
  .grecaptcha-badge { visibility: hidden; }
  .attribution { margin: 14px 0 0; color: var(--faint); font-size: 12px; line-height: 1.7;
    text-align: center; }
  .attribution a { color: #5a5a5a; }
  .attribution a:hover { color: var(--accent-lift); }
/* #endregion */
/* #region foot: THE MAP EVERY PAGE CARRIES, VISIBLE AND NOT APOLOGETIC [Layout Layer] */
  footer { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
    text-align: center; }
  /* The login's footer is a sibling of its container rather than a child, so it restates the
     column width - otherwise it would run the full width of the viewport. */
  body > footer { max-width: 640px; margin: 56px auto 0; padding: 26px 24px 48px; }
  footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
    margin-bottom: 22px; }
  footer nav a { color: var(--body); text-decoration: none; font-size: 13.6px;
    letter-spacing: .6px; }
  footer nav a:hover { color: var(--accent-lift); text-decoration: underline; }
  footer nav a[aria-current] { color: var(--ink); font-weight: 600; }
  .colophon { color: var(--faint); font-size: 12px; line-height: 1.85; margin: 0; }
  .colophon code { background: none; border: 0; padding: 0; color: #5a5a5a; }
  .colophon a { color: #5a5a5a; }
  .colophon a:hover { color: var(--accent-lift); }
/* #endregion */
/* #region account: THE LOGIN'S OWN MARKUP, MAPPED ONTO THE SAME RESULT [UI Layer] */
  /* This page loads NO Bootstrap, so the utilities its markup still names must exist here.
     .sr-only especially - without it every visually-hidden label renders as body copy. */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .text-center { text-align: center; }
  /* The card was a #222 panel ringed in a pale shadow. It is the black page now, like every
     other page on the domain - the form floats on the same void the prose does. */
  .content-card, .content-card.dark-bg { background: var(--bg); color: var(--ink);
    box-shadow: none; border: 0; border-radius: 0; padding: 0; }
  .form-signin { margin: 0 auto; max-width: none; }
  .form-signin p.text-center { margin: 22px 0 0; font-size: 14.4px; }
  .form-signin p.text-center a { font-weight: 600; }
/* #endregion */
/* #region app: THE BILLING APPLICATION BEHIND THE LOGIN, WEARING THE SAME BLACK [UI Layer] */
  /* EVERY SELECTOR IN THIS REGION IS SCOPED TO body.wf-app, AND THAT SCOPE IS LOAD-BEARING
     RATHER THAN TIDY. This one stylesheet is worn by the public pages, the customer login, the
     DPA and this application - so an unscoped rule written "for the account area" is in fact a
     rule for the whole domain. Measured the hard way: a bare `form { margin: 0 }` in here
     silently flattened the 36px of air above the shared contact form on /postmaster/, /abuse/
     and /hostmaster/, none of which anybody was looking at. Nothing announced it.
     index.php is the only document that opens <body class="wf-app">.
     WHAT THIS REGION EXISTS FOR: /account/ still loads Bootstrap and styles.css and still needs
     them - the grid, .pull-right, the text utilities and the JS dropdown behind the invoice-year
     picker are all theirs. This takes the SURFACES back, and the scope prefix also buys a class
     of specificity, which is what lets a single-class rule here beat styles.css's doubled
     `.btn.btn-black` without having to mirror it. */
  /* Bootstrap's status colours were mixed for white paper - #a94442, #3c763d and #8a6d3b are
     mud on #000. These are the same three verdicts lifted until they carry on black. */
  :root { --ok-lift: #3fa16b; --bad-lift: #d05a5a; --warn-lift: #c79a3f; }
  /* #region appButtons: ONE BUTTON, AND THE WORD ON IT CARRIES THE MEANING [UI Layer] */
    /* THERE IS NO BLUE IN THIS APPLICATION, AND THAT IS A PALETTE DECISION RATHER THAN A TASTE
       ONE. The page already says everything it needs with three colours on black: WHITE for
       what is, GREEN for what went right, RED for what went wrong. An accent introduces a
       FOURTH term with no meaning attached to it, so the eye has to learn that blue signifies
       nothing - and it never quite does.
       AND A FILLED BUTTON REPEATED DOWN A LIST STOPS BEING A BUTTON. Six rows of solid colour
       against a dark page read as the content, and the customer names beside them read as
       captions. The list inverted itself: it was all about the controls.
       SO EVERY BUTTON IS THE SAME OBJECT - a hairline box on the void, no fill, no shadow - and
       the only thing that varies is the COLOUR OF THE WORD, which is the part that actually
       differs from one control to the next.
         WHITE  navigates or steps back. OPEN, BACK, EDIT, SHOW INACTIVE, the year picker.
                Nothing is committed, so nothing is announced.
         GREEN  commits something, and it is BOLD because it is the one action on the screen
                worth finding without reading. Save, Send, Generate, Download, Add.
         RED    destroys. Delete, and removing a row.
       THE INTENT IS SPOKEN IN THE MARKUP, never inferred from a class combination here. A
       committing button carries .text-success in index.php exactly as ADD always has, so the
       rule below stays two lines and a new button declares what it is at the site where it is
       written rather than by matching a pattern in a stylesheet. */
    .wf-app .btn, .wf-app .btn-black, .wf-app .btn-white {
      background: transparent; color: var(--ink); border: 1px solid var(--line);
      border-radius: 4px; padding: 10px 14px; font-weight: 600; letter-spacing: .6px;
      box-shadow: none; text-shadow: none; text-decoration: none; }
    /* Intent, at rest. Beats the base rule above at 0-3-0 including the scope. */
    .wf-app .btn.text-success, .wf-app .btn .text-success { color: var(--ok-lift);
      font-weight: 700; }
    .wf-app .btn.text-danger, .wf-app .btn .text-danger { color: var(--bad-lift);
      font-weight: 700; }
    /* AND UNDER THE HAND, THE BUTTON INVERTS: the colour that was the WORD becomes the GROUND.
       A hairline box lightening slightly is a hover state you have to look for; a control that
       flips to solid is one you cannot miss, and it confirms what you are about to commit at the
       exact moment your finger is on it - green fills green, red fills red, and a neutral one
       goes white on black to black on white.
       :hover AND :active ONLY, never :focus. Bootstrap 3's :focus fires on mouse press and
       persists after the click, so inverting there would paint the last-clicked control solid
       and leave it that way - the exact stuck-selected state that was removed one commit ago. */
    .wf-app .btn:hover, .wf-app .btn:active, .wf-app .btn.active {
      background: var(--body); color: var(--bg); border-color: var(--body); }
    .wf-app .btn.text-success:hover, .wf-app .btn.text-success:active,
    .wf-app .btn.text-success.active { background: var(--ok-lift); color: #fff;
      border-color: var(--ok-lift); }
    .wf-app .btn.text-danger:hover, .wf-app .btn.text-danger:active,
    .wf-app .btn.text-danger.active { background: var(--bad-lift); color: #fff;
      border-color: var(--bad-lift); }
    /* NO FRAME SURVIVES THE CLICK. Bootstrap 3 fires `.btn:focus` on MOUSE press, not only on
       keyboard, so its focus ring stayed painted around whichever control was last pressed and
       read as a selected state that nothing had selected. Its :active also stamps an inset
       shadow meant for a raised button that no longer exists here.
       :focus-visible is deliberately left standing: it fires for keyboard navigation ONLY and
       never once appears on a click, so it cannot produce the frame this rule removes while
       still leaving somebody tabbing through a form able to see where they are. */
    .wf-app .btn:focus, .wf-app .btn:active:focus, .wf-app .btn.active:focus,
    .wf-app .btn:visited { outline: 0; box-shadow: none; }
    /* .btn is a full-width block because that is what the LOGIN needs - login.php:168 carries a
       bare `btn btn-black` with no .btn-block on it. The inline behaviour hangs off .btn-sm,
       which every inline control in this application already wears. .btn-block is declared after
       it because `invoice-paid` carries BOTH and wants the block, and later-wins is the only
       thing that decides between them. */
    .wf-app .btn-sm { display: inline-block; width: auto; margin-top: 0; padding: 7px 12px;
      font-size: 12.5px; vertical-align: middle; }
    .wf-app .btn-block { display: block; width: 100%; margin-top: 0; }
    .wf-app .btn-group { display: inline-block; vertical-align: middle; }
    .wf-app .dropdown-menu { background: #0b0b0b; border: 1px solid var(--line);
      border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .7); padding: 6px 0; }
    .wf-app .dropdown-menu > li > a { color: var(--body); padding: 8px 16px; font-size: 14.4px; }
    .wf-app .dropdown-menu > li > a:hover, .wf-app .dropdown-menu > li > a:focus {
      background: #171717; color: var(--ink); }
    .wf-app .dropdown-menu > .active > a, .wf-app .dropdown-menu > .active > a:hover,
    .wf-app .dropdown-menu > .active > a:focus { background: #1c1c1c; color: var(--ink); }
    /* A form is a block with 36px of air above it on the public pages. In here forms are inline
       fragments inside cards and table cells, so they claim no leading margin - and this rule is
       scoped precisely because the unscoped version reached the public contact form. */
    .wf-app form { margin: 0; }
    .wf-app .buttons { margin: 26px 0 0; }
    .wf-app .buttons .row { margin: 0 -6px; }
    .wf-app .buttons .col-xs-6 { padding: 0 6px; }
  /* #endregion */
  /* #region appTables: ROWS DRAWN IN HAIRLINES, NEVER IN FILLED BANDS [Layout Layer] */
    /* Bootstrap stripes with #f9f9f9 - a near-white band. On black the stripe becomes the
       loudest thing in the table, so the banding drops to a whisper and the row rule underneath
       carries the real structure. */
    /* ONE EDGE, AND NOTHING IS EXEMPT FROM IT. Every rule on this page - the breadcrumb's
       underline, each row's border, the tfoot line, the hr in the invoice editor - spans exactly
       the same span as every block of text above and below it, because they all start life on
       the card's own edge and nothing widens or narrows itself.
       THE EARLIER VERSION LET THE TABLE BLEED 8px PAST THAT EDGE so its striped rows ran wider
       than the text they held. It looked deliberate in isolation and it was structurally wrong:
       it created a SECOND width, which then had to be matched by hand on the breadcrumb, the hr,
       the invoice detail table and the footer - four separate places, each of them a mismatch
       waiting to be noticed. The breadcrumb was the one that got noticed.
       The gutters that bleed was buying come from the INNER cells instead: every cell keeps its
       8px of horizontal padding so columns never touch, and only the first and last drop theirs,
       which puts the outermost content flush on the shared edge. Same visual separation, no
       second width anywhere in the design. */
    .wf-app .table { width: 100%; margin: 0 0 8px; background: transparent; color: var(--body); }
    .wf-app .table > thead > tr > th, .wf-app .table > tbody > tr > th,
    .wf-app .table > tfoot > tr > th, .wf-app .table > thead > tr > td,
    .wf-app .table > tbody > tr > td, .wf-app .table > tfoot > tr > td {
      border-top: 1px solid var(--line); padding: 11px 8px; font-size: 14.4px;
      line-height: 1.55; color: var(--body); }
    /* The outermost cells give their horizontal padding back to the edge, so the first icon and
       the last button sit exactly where the heading and the breadcrumb's rule begin and end. */
    .wf-app .table > * > tr > :first-child { padding-left: 0; }
    .wf-app .table > * > tr > :last-child { padding-right: 0; }
    .wf-app .table > thead > tr > th { border-bottom: 1px solid var(--line); color: var(--mute);
      font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600; }
    .wf-app .table > tfoot > tr > td, .wf-app .table > tfoot > tr > th {
      border-top: 1px solid var(--line); color: var(--ink); }
    .wf-app .table > tbody > tr > td b, .wf-app .table > tbody > tr > td strong {
      color: var(--ink); }
    .wf-app .table-striped > tbody > tr:nth-of-type(odd) { background: #0a0a0a; }
    .wf-app .table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }
    .wf-app .table > tbody > tr:hover { background: #131313; }
    .wf-app .table .form-control { display: inline-block; margin: 0; padding: 8px 10px;
      font-size: 14.4px; }
    .wf-app hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0 26px; }
  /* #endregion */
  /* #region appChrome: THE BREADCRUMB, THE SECTION LABELS AND THE STATUS COLOURS [UI Layer] */
    /* Bootstrap's breadcrumb is a filled #f5f5f5 pill. Here it is the top rule of the page. */
    /* 14px, not 26px. The heading below sits vertically centred in a band as tall as its
       buttons, so it already carries ~10px of its own air above the text. At 26px there was 36px
       of space above the label and 17px below it, and a block with twice as much room above as
       below reads as sitting LOW no matter how perfectly it is centred inside itself. */
    .wf-app .breadcrumb { background: transparent; border-radius: 0; padding: 0 0 14px;
      margin: 0 0 14px; border-bottom: 1px solid var(--line); font-size: 13.6px; }
    .wf-app .breadcrumb > li + li::before { color: var(--faint); }
    .wf-app .breadcrumb > .active { color: var(--ink); font-weight: 600; }
    .wf-app .breadcrumb > li > a { color: var(--mute); text-decoration: none; }
    .wf-app .breadcrumb > li > a:hover { color: var(--ink); }
    /* THE SECTION LABEL CARRIES NO RULE UNDER IT, AND THAT IS THE DIFFERENCE BETWEEN A DOCUMENT
       AND AN APPLICATION. h2 is underlined on the public pages because it divides long prose
       that has no other structure. In here every heading is followed IMMEDIATELY by a table
       opening with its own hairline, so an underline puts two lines a few pixels apart and
       reads as a mistake rather than as structure. Worse, the h5 sits inside a Bootstrap column
       beside the ADD and EDIT buttons, so the rule stopped dead a third of the way across and
       looked like a border that had failed to finish - a rule whose LENGTH is decided by an
       unrelated grid was never describing the section above it. */
    /* THE HEADING AND ITS BUTTONS ARE ONE ROW, so they share a centre line. Bootstrap's .row is
       float-based, which stacks a 12px label and a 30px button on the same top edge and leaves
       them visibly off-axis. Both markup shapes exist in this file - <header class="row"> and
       <header><div class="row"> - so both are named. */
    /* THE GUTTERS ARE ZEROED, AND THIS IS THE BUG THAT MADE THE ROW LOOK WRONG. Bootstrap's
       .row carries margin: 0 -15px purely to cancel the 15px padding its columns carry, and the
       `margin: 40px 0 6px` shorthand below sets the horizontal margins to ZERO - so on every
       <header class="row"> the compensation vanished while the column padding did not, and the
       heading sat 15px right of the table, the buttons and everything else on the page.
       Measured: card and table both at x=137.5, the h5 at x=160.5.
       It hit only ONE of the two markup shapes. <header><div class="row"> kept its negative
       margin because the shorthand lands on the <header>, not the inner .row - so some headings
       were indented and others were not, which is what read as "the padding is too much".
       Both gutters are removed outright rather than restored: this row holds a label and a
       button, never a grid, so it has no use for a 15px trough on each side. */
    .wf-app header.row, .wf-app header > .row { display: flex; align-items: center;
      flex-wrap: wrap; margin-left: 0; margin-right: 0; }
    .wf-app header [class^="col-"], .wf-app header [class*=" col-"] { padding-left: 0;
      padding-right: 0; }
    .wf-app header { margin: 40px 0 12px; }
    .wf-app header:first-of-type { margin-top: 0; }
    /* NO PADDING ON ONE SIDE, and this is why the row looked off-axis even though the flex was
       doing its job perfectly. Measured: the label's BOX and the button's BOX shared a centre
       line exactly - offset 0.00 - while the label's GLYPHS sat 2.67px high of the button's,
       because padding-bottom:4px made the h5 box 17.2px tall around a 13.2px line and centring
       the box therefore pushed the text up by half the padding.
       That 4px was spacing for the underline this heading used to carry. The rule went; the
       clearance for it did not, and it went on quietly skewing every heading in the application.
       DETECTOR: alignment that is provably correct at the BOX level and still looks wrong means
       asymmetric padding inside one of the boxes - centring aligns boxes, never ink. */
    .wf-app header h5 { font-size: 12px; font-weight: 600; letter-spacing: 2.6px;
      text-transform: uppercase; color: var(--body); margin: 0; padding: 0; border: 0; }
    /* THE VERDICT GLYPH, AND ITS SYMBOL IS ACTUALLY WHITE. Font Awesome's fa-check-circle is a
       filled disc with the tick KNOCKED OUT - the symbol is a hole, not a shape, so it showed the
       near-black row behind it and read as a black tick on a green disc. Nothing could colour it
       because there was nothing there to colour. Drawn as SVG they are two shapes: the disc takes
       the verdict through currentColor, the symbol is stroked white over the top. */
    .wf-app .statusmark { vertical-align: -4px; }
    .wf-app .statusmark circle { fill: currentColor; }
    .wf-app .statusmark path { fill: none; stroke: #fff; stroke-width: 2.6;
      stroke-linecap: round; stroke-linejoin: round; }
    .wf-app .statusmark.ok { color: var(--ok-lift); }
    .wf-app .statusmark.warn { color: var(--warn-lift); }
    .wf-app .statusmark.bad { color: var(--bad-lift); }
    .wf-app .text-danger, .wf-app a.text-danger, .wf-app .text-danger:hover {
      color: var(--bad-lift); }
    .wf-app .text-success, .wf-app a.text-success, .wf-app .text-success:hover {
      color: var(--ok-lift); }
    .wf-app .text-warning, .wf-app a.text-warning, .wf-app .text-warning:hover {
      color: var(--warn-lift); }
    .wf-app .text-right { text-align: right; }
    .wf-app small, .wf-app .small { color: var(--mute); }
    /* AND GIVE IT BACK INSIDE A BUTTON. The rule above is a DIRECT hit on the <small> element
       and a direct hit beats an inherited colour outright - specificity never enters it. Every
       label here is `<a class="btn"><small>OPEN</small> <i class="fa"></i></a>`, so the button's
       own colour reached the icon while mute grey landed on the word beside it: one control,
       two colours, and the text was the half that lost.
       DETECTOR: a colour correct on the icon and wrong on the label beside it means an inner
       element carries its own rule - stop adjusting the parent, it was never the thing read. */
    .wf-app .btn small, .wf-app .btn .small { color: inherit; font-weight: inherit; }
    .wf-app b, .wf-app strong { color: var(--ink); }
    /* THE BARE ICON LINKS ARE WHITE, because they are navigation and navigation is not a verdict.
       The edit pencil beside every invoice and subscription was reading as an accent link, which
       put a fourth colour in a row that already had a green tick and a black button in it.
       Scoped INSIDE .content-card on purpose: the footer map and the breadcrumb live outside it
       and keep their own quieter treatment. An <i> carrying .text-danger or .text-success still
       wins here - a class on the icon is a direct hit and this only ever reaches it by
       inheritance, which is exactly how the trash stays red and the add-line plus stays green. */
    /* :not(.btn) IS LOAD-BEARING. Without it this pair sits at the identical 0-3-0 as the button
       hover rules above AND appears later in the file, so it won a tie it had no business
       entering and repainted an inverted button's text back to white - the black-on-light state
       simply never rendered. A bare <a> and a button that happens to be an <a> are different
       objects; naming that here is what stops one from silently governing the other. */
    .wf-app .content-card a:not(.btn) { color: var(--ink); }
    .wf-app .content-card a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
  /* #endregion */
  /* #region appForm: FIELDS THAT ANSWER IN THE HOUSE PALETTE RATHER THAN IN AN ACCENT [UI Layer] */
    /* house.css rings a focused field in accent - correct on a public form where the accent is
       the page's one colour, wrong in here where blue means nothing. A focused field is stated
       in plain light instead, which is the same thing the rest of this application does. */
    .wf-app .form-control:focus, .wf-app input:focus, .wf-app textarea:focus,
    .wf-app select:focus { border-color: #4a4a4a;
      outline: 2px solid rgba(255, 255, 255, .16); outline-offset: 0; box-shadow: none; }
    .wf-app .progress-bar { background: var(--ok-lift); }
  /* #endregion */
  /* #region appInvoice: THE STRIPE-DERIVED RECEIPT, REPAINTED RATHER THAN REBUILT [Content Layer] */
    /* This markup was lifted from a Stripe receipt years ago and its class vocabulary encodes a
       light palette BY NAME - gray400, gray500, gray800 - which is why each one has to be
       remapped here rather than left describing a colour the page no longer has. */
    .wf-app .InvoiceSummary { margin: 8px 0 30px; }
    .wf-app .InvoiceSummaryPostPayment { padding: 26px 0 0; }
    .wf-app .InvoiceSummaryPostPayment-text { color: var(--mute); }
    /* The amount is the largest thing on the receipt and the one number a customer came to read.
       It drops h1's uppercase tracking, which is written for short label headings and puts
       visible gaps inside a currency figure. */
    .wf-app h1.InvoiceSummaryPostPaymentAmount { color: var(--ink); font-size: 36px;
      font-weight: 600; letter-spacing: 0; text-transform: none; margin: 6px 0 0; }
    .wf-app h1.InvoiceSummaryPostPaymentAmount.text-danger { color: var(--bad-lift); }
    /* THE DOCUMENT IS DRAWN FOR THIS PAGE RATHER THAN INHERITED FROM A WHITE ONE. What was here
       was a solid white rect wearing three stacked drop-shadow filters - machinery for lifting a
       white card off a white page, which on #000 renders nothing and leaves a bright rectangle
       doing exactly what .content-card used to do to this design. The sheet is now near-black
       held by a hairline, like every other surface here.
       THE HALO IS A SECOND COPY OF THE MARK AT A WIDER STROKE, painted underneath in the page's
       own black. It is what lets a 7px stroke cross the document's content lines and stay legible
       without cutting a hole in the artwork or dimming the sheet behind it. */
    .wf-app .InvoiceThumbnail-image { display: block; margin: 0 auto; }
    /* A flat grey slab with square corners. The grey IS the edge, so it needs no outline, and
       squaring it makes the document read as paper rather than as another rounded UI card. */
    .wf-app .doc-sheet { fill: #262626; }
    .wf-app .doc-seal { fill: #4a4a4a; }
    .wf-app .doc-line { fill: #3d3d3d; }
    .wf-app .doc-rule { fill: #333; }
    /* THE MARK IS FILLED, NOT STROKED, AND THAT IS THE WHOLE DIFFERENCE. A stroked path has ONE
       width for its entire length, which is why it read as geometry - a line, drawn by a machine,
       at constant volume. A filled outline can swell and taper, so this one starts thin, is
       fattest through the elbow where a real stroke slows and presses, and runs out to an actual
       point at the tip. Same gesture a hand makes.
       AND IT CARRIES NO OUTLINE. It ran past the paper's right edge onto the page's own black,
       so an outline would only be visible along the half still crossing the sheet - present on
       one part of the stroke and invisible on the other, which reads as a rendering fault rather
       than a choice. Green on grey and green on black are both legible unaided, so nothing is
       being bought with it. */
    .wf-app .doc-mark { stroke: none; }
    .wf-app .doc-mark.ok { fill: var(--ok-lift); }
    .wf-app .doc-mark.bad { fill: var(--bad-lift); }
    .wf-app .InvoiceDetails-table { width: 100%; margin: 0 0 8px; }
    .wf-app .InvoiceDetails-table td { padding: 9px 0; font-size: 14.4px; color: var(--body); }
    .wf-app .LabeledTableRow td { border-bottom: 1px solid var(--line); }
    /* The LAST labelled row is "Details:", which is a heading for the line-items table directly
       beneath it - and that table opens with its own hairline. A border here puts two rules a few
       pixels apart, which is the identical defect the section headings had. The label introduces
       what follows; it does not close what came before. */
    .wf-app .LabeledTableRow:last-child td { border-bottom: 0; padding-bottom: 2px; }
    .wf-app .Text-color--gray400, .wf-app .Text-color--gray500 { color: var(--mute); }
    .wf-app .Text-color--gray800, .wf-app .Text-color--default { color: var(--ink); }
    .wf-app .InvoiceDetailsRow-Container { margin: 18px 0 0; }
  /* #endregion */
  /* #region appFoot: THE PUBLIC FOOTER, INSIDE THE APPLICATION, WITHOUT A SECOND COPY [Layout Layer] */
    /* index.php closes its own document rather than calling wfFoot(), so its footer restates the
       column width the way the login's does - otherwise it runs the full width of the viewport
       while everything above it sits in a 640px column.
       IT RESTATES THE CONTENT WIDTH, NOT THE COLUMN WIDTH, and that distinction is the whole
       reason this rule differs from the login's. On a public page the footer sits INSIDE .wrap,
       so its border-top spans the wrap's content box - 640 less 48 of padding. Here it is a
       SIBLING of .main-container, so at 640 wide with 24px of its own padding its border spanned
       the full 640 and came out 48px wider than every other rule on the page. 592 with no
       horizontal padding puts it on exactly the span the breadcrumb and the table rows use. */
    body.wf-app > footer { max-width: 592px; margin: 46px auto 0; padding: 26px 0 48px; }
  /* #endregion */
/* #endregion */