{{-- Shared print styling for the two documents a payroll run issues: an
    employee's payslip and a consultant's payment advice. They are different
    documents with different contents, but they come off the same letterhead
    and must look like one house issued both, so the chrome lives here.

    Expects the caller's palette variables: $accent, $ink, $muted, $soft,
    $line, $wash, $font. --}}
    @page { margin: 0; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { color: {{ $ink }}; font-family: {{ $font }}; line-height: 1.5; background: #fff; font-size: 11px; }

    .sheet { padding: 34px 42px 90px 42px; }

    /* --- Masthead ---------------------------------------------------- */
    .mast { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
    .mast td { vertical-align: top; }
    .logo { max-height: 52px; max-width: 190px; }
    .co-name { font-size: 15px; font-weight: bold; color: {{ $accent }}; letter-spacing: -0.2px; }
    .co-meta { font-size: 9.5px; color: {{ $muted }}; line-height: 1.45; margin-top: 3px; }

    .doc-title { font-size: 20px; font-weight: bold; color: {{ $ink }}; letter-spacing: -0.4px; text-align: right; }
    .doc-sub { font-size: 9.5px; color: {{ $muted }}; text-align: right; margin-top: 2px; }
    .doc-ref { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 9px;
               background: {{ $accent }}; color: #fff; font-size: 9.5px; font-weight: bold; letter-spacing: 0.4px; }

    .rule { height: 3px; background: {{ $accent }}; border-radius: 2px; margin: 14px 0 0 0; }

    /* --- Employee panel ---------------------------------------------- */
    .panel { width: 100%; border-collapse: collapse; margin-top: 18px;
             background: {{ $wash }}; border: 1px solid {{ $line }}; border-radius: 6px; }
    .panel td { padding: 9px 12px; vertical-align: top; width: 25%; }
    .panel .k { font-size: 8px; text-transform: uppercase; letter-spacing: 0.7px; color: {{ $soft }}; font-weight: bold; }
    .panel .v { font-size: 11px; color: {{ $ink }}; font-weight: bold; margin-top: 2px; }
    .panel .v.light { font-weight: normal; color: {{ $muted }}; }

    /* --- Money tables ------------------------------------------------- */
    .cols { width: 100%; border-collapse: collapse; margin-top: 16px; }
    .cols > tbody > tr > td { vertical-align: top; width: 50%; }
    .cols > tbody > tr > td.left { padding-right: 9px; }
    .cols > tbody > tr > td.right { padding-left: 9px; }

    .blk { width: 100%; border-collapse: collapse; border: 1px solid {{ $line }}; border-radius: 6px; }
    .blk caption { caption-side: top; text-align: left; font-size: 9px; font-weight: bold;
                   text-transform: uppercase; letter-spacing: 0.8px; color: {{ $muted }};
                   padding: 0 0 5px 1px; }
    .blk th { background: {{ $wash }}; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.6px;
              color: {{ $soft }}; text-align: left; padding: 6px 10px; border-bottom: 1px solid {{ $line }}; font-weight: bold; }
    .blk th.num, .blk td.num { text-align: right; }
    .blk td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; font-size: 10.5px; }
    .blk tr:last-child td { border-bottom: none; }
    .blk .desc { color: {{ $ink }}; }
    .blk .rule-note { color: {{ $soft }}; font-size: 8.5px; display: block; }
    .blk .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .blk tfoot td { background: {{ $wash }}; font-weight: bold; font-size: 10.5px;
                    border-top: 1px solid {{ $line }}; border-bottom: none; padding: 7px 10px; }
    .blk .none { color: {{ $soft }}; font-style: italic; }

    /* --- Net pay ------------------------------------------------------ */
    .net { width: 100%; border-collapse: collapse; margin-top: 16px;
           background: {{ $accent }}; border-radius: 6px; }
    .net td { padding: 13px 16px; color: #fff; vertical-align: middle; }
    .net .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.82; }
    .net .amt { font-size: 22px; font-weight: bold; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
    .net .pay-k { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.7px; opacity: 0.75; }
    .net .pay-v { font-size: 11px; font-weight: bold; }
    .net .right { text-align: right; }

    /* --- Notes / footer ----------------------------------------------- */
    .notes { margin-top: 14px; font-size: 9px; color: {{ $muted }}; line-height: 1.55; }
    .sig { width: 100%; border-collapse: collapse; margin-top: 30px; }
    .sig td { width: 50%; padding-top: 26px; border-top: 1px solid {{ $line }}; font-size: 9px; color: {{ $muted }}; }
    .sig td:last-child { padding-left: 24px; }

    .foot { position: fixed; bottom: 22px; left: 42px; right: 42px;
            border-top: 1px solid {{ $line }}; padding-top: 7px;
            font-size: 8.5px; color: {{ $soft }}; }
    .foot .r { float: right; }

    .confidential { position: fixed; bottom: 46px; left: 42px; right: 42px; text-align: center;
                    font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase; color: {{ $soft }}; }