/* ==========================================================================
   Two-step sign-in (round 5): the account card, the second-step page and
   the passkey button on the sign-in page. Colours come from the --hx-*
   tokens, so the dark "library" theme follows; logical properties keep it
   right for Arabic (RTL). Every rule wins on specificity alone.
   ========================================================================== */

.hp-2s-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Heading and state ---------- */
body.hp-ui .hp-2s .hp-2s-heading { align-items: flex-start; }
body.hp-ui .hp-2s .hp-2s-heading-copy { flex: 1 1 auto; min-width: 0; }
body.hp-ui .hp-2s .hp-2s-state {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    margin: 4px 0 0; padding: 5px 12px 5px 10px; border-radius: 999px;
    border: 1px solid var(--hx-line-2); background: var(--hx-surface-2);
    color: var(--hx-ink-3); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
body.hp-ui .hp-2s .hp-2s-state.is-on {
    color: var(--hx-ok); border-color: color-mix(in srgb, var(--hx-ok) 34%, transparent); background: var(--hx-ok-soft);
}
body.hp-ui .hp-2s .hp-2s-state-dot {
    width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55;
}
body.hp-ui .hp-2s .hp-2s-state.is-on .hp-2s-state-dot {
    opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-ok) 22%, transparent);
}
body.hp-ui .hp-2s .hp-2s-notice { margin-top: 18px; }

/* ---------- The ledger of methods ---------- */
body.hp-ui .hp-2s .hp-2s-ledger {
    margin: 22px 0 0; padding: 4px 16px; border-radius: 18px;
    border: 1px solid var(--hx-line); background: var(--hx-surface-2);
}
body.hp-ui .hp-2s .hp-2s-ledger-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
    padding: 12px 0;
}
body.hp-ui .hp-2s .hp-2s-ledger-row + .hp-2s-ledger-row { border-top: 1px solid var(--hx-line); }
body.hp-ui .hp-2s .hp-2s-ledger dt {
    display: flex; align-items: center; gap: 12px; margin: 0; color: var(--hx-ink); font-size: .92rem; font-weight: 650;
}
body.hp-ui .hp-2s .hp-2s-ledger dd { margin: 0; }
body.hp-ui .hp-2s .hp-2s-ledger-icon,
body.hp-ui .hp-2s .hp-2s-item-icon {
    flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); color: var(--hx-royal-ink);
}
body.hp-ui .hp-2s .hp-2s-ledger-icon .icon,
body.hp-ui .hp-2s .hp-2s-item-icon .icon { width: 18px; height: 18px; }

body.hp-ui .hp-2s-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
    background: var(--hx-surface); border: 1px solid var(--hx-line-2);
    color: var(--hx-ink-3); font-size: .76rem; font-weight: 700; white-space: nowrap;
}
body.hp-ui .hp-2s-chip.is-ok { color: var(--hx-ok); background: var(--hx-ok-soft); border-color: transparent; }
body.hp-ui .hp-2s-chip.is-warn { color: var(--hx-warn); background: var(--hx-warn-soft); border-color: transparent; }
body.hp-ui .hp-2s-chip.is-soft { color: var(--hx-quill-ink); background: var(--hx-quill-soft); border-color: transparent; }

/* ---------- Sections ---------- */
body.hp-ui .hp-2s .hp-2s-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hx-line); }
body.hp-ui .hp-2s .hp-2s-subtitle { margin: 0; color: var(--hx-ink); font-size: 1.02rem; font-weight: 700; line-height: 1.4; }
body.hp-ui .hp-2s .hp-2s-section-head p,
body.hp-ui .hp-2s .hp-2s-lead { margin: 6px 0 0; color: var(--hx-ink-2); font-size: .88rem; line-height: 1.65; }
body.hp-ui .hp-2s .hp-2s-fine,
body.hp-ui.hp-2s-page .hp-2s-fine { margin: 8px 0 0; color: var(--hx-ink-3); font-size: .78rem; line-height: 1.55; }
body.hp-ui .hp-2s .hp-2s-empty {
    margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--hx-line-2);
    color: var(--hx-ink-3); font-size: .86rem; line-height: 1.55;
}
body.hp-ui .hp-2s .hp-2s-turn-on { margin-top: 24px; display: grid; gap: 14px; }
body.hp-ui .hp-2s .hp-2s-confirmed {
    display: flex; align-items: center; gap: 8px; margin: 0; color: var(--hx-ok); font-size: .84rem; font-weight: 600;
}
body.hp-ui .hp-2s .hp-2s-confirmed .icon { width: 16px; height: 16px; flex: none; }

/* ---------- Buttons ---------- */
body.hp-ui .hp-2s .hp-2s-button-soft {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
    font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: transform .18s var(--hx-ease), border-color .18s ease, color .18s ease;
}
body.hp-ui .hp-2s .hp-2s-button-soft .icon { width: 1rem; height: 1rem; flex: none; }
body.hp-ui .hp-2s .hp-2s-button-soft:hover { transform: translateY(-1px); }
body.hp-ui .hp-2s .hp-2s-button-soft.is-copied { color: var(--hx-ok); }
body.hp-ui .hp-2s .hp-2s-button-danger {
    color: var(--hx-danger); background: var(--hx-danger-soft); border: 1px solid color-mix(in srgb, var(--hx-danger) 26%, transparent);
    border-radius: 999px; box-shadow: none; cursor: pointer;
}
body.hp-ui .hp-2s .hp-2s-button-danger:hover { border-color: var(--hx-danger); }
body.hp-ui .hp-2s-text-button {
    padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
    color: var(--hx-quill-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hx-quill) 55%, transparent);
    text-underline-offset: 4px;
}
body.hp-ui .hp-2s-text-button:hover { text-decoration-color: var(--hx-quill); }
body.hp-ui .hp-2s-text-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--hx-royal-ink);
    font-size: .86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--hx-royal-ink) 35%, transparent);
}
body.hp-ui .hp-2s-text-link .icon { width: 1rem; height: 1rem; flex: none; }
body.hp-ui .hp-2s .hp-2s-icon-button {
    flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--hx-line-2); background: var(--hx-surface); color: var(--hx-royal-ink);
    transition: border-color .18s ease, color .18s ease;
}
body.hp-ui .hp-2s .hp-2s-icon-button:hover { border-color: var(--hx-royal); }
body.hp-ui .hp-2s .hp-2s-icon-button.is-copied { color: var(--hx-ok); border-color: var(--hx-ok); }
body.hp-ui .hp-2s .hp-2s-icon-button .icon { width: 18px; height: 18px; }

/* ---------- Code fields ---------- */
body.hp-ui .hp-2s-code-input {
    font-family: var(--hx-f-mono); font-variant-numeric: tabular-nums; letter-spacing: .14em;
}
body.hp-ui .hp-2s .hp-2s-inline-form {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 12px;
}
body.hp-ui .hp-2s .hp-2s-inline-form .control { flex: 1 1 180px; min-width: 0; max-width: 320px; }
body.hp-ui .hp-2s .hp-2s-inline-form .hp-2s-code-input { max-width: 200px; text-align: center; font-size: 1.15rem; }

/* ---------- Setup steps ---------- */
body.hp-ui .hp-2s .hp-2s-setup {
    margin-top: 24px; padding: 22px; border-radius: 22px; outline: none;
    border: 1px solid color-mix(in srgb, var(--hx-quill) 40%, var(--hx-line));
    background: linear-gradient(180deg, var(--hx-surface), var(--hx-surface-2));
}
body.hp-ui .hp-2s .hp-2s-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 22px; }
body.hp-ui .hp-2s .hp-2s-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
body.hp-ui .hp-2s .hp-2s-step-number {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--hx-quill-soft); color: var(--hx-quill-ink); border: 1px solid color-mix(in srgb, var(--hx-quill) 45%, transparent);
    font-family: var(--hx-f-display); font-size: 1.1rem; line-height: 1;
}
body.hp-ui .hp-2s .hp-2s-step-body h4 { margin: 5px 0 0; color: var(--hx-ink); font-size: .95rem; font-weight: 700; }
body.hp-ui .hp-2s .hp-2s-step-body > p { margin: 6px 0 0; color: var(--hx-ink-2); font-size: .86rem; line-height: 1.6; }
body.hp-ui .hp-2s .hp-2s-qr-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 24px; margin-top: 14px; }
body.hp-ui .hp-2s .hp-2s-qr {
    flex: none; margin: 0; padding: 10px; border-radius: 18px; background: #ffffff; line-height: 0;
    border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow);
}
body.hp-ui .hp-2s .hp-2s-qr svg { display: block; width: 188px; height: 188px; }
body.hp-ui .hp-2s .hp-2s-key { flex: 1 1 220px; min-width: 0; }
body.hp-ui .hp-2s .hp-2s-key-label { margin: 2px 0 8px; color: var(--hx-ink-2); font-size: .84rem; font-weight: 600; }
body.hp-ui .hp-2s .hp-2s-key-row { display: flex; align-items: center; gap: 8px; }
body.hp-ui .hp-2s .hp-2s-key-value {
    flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--hx-line-2); background: var(--hx-surface);
    color: var(--hx-ink); font-family: var(--hx-f-mono); font-size: .9rem; letter-spacing: .06em; line-height: 1.6;
    overflow-wrap: anywhere; user-select: all;
}
body.hp-ui .hp-2s .hp-2s-cancel { margin-top: 16px; }

/* ---------- Recovery codes, shown once ---------- */
body.hp-ui .hp-2s .hp-2s-codes {
    margin-top: 22px; padding: 20px; border-radius: 22px; outline: none;
    border: 1px solid color-mix(in srgb, var(--hx-quill) 55%, transparent);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--hx-quill) 12%, transparent), transparent 60%),
        var(--hx-quill-soft);
}
body.hp-ui .hp-2s .hp-2s-codes-head { display: flex; align-items: flex-start; gap: 12px; }
body.hp-ui .hp-2s .hp-2s-codes-head > .icon { width: 22px; height: 22px; margin-top: 2px; flex: none; color: var(--hx-quill-ink); }
body.hp-ui .hp-2s .hp-2s-codes-head h3 { margin: 0; color: var(--hx-ink); font-size: 1.02rem; }
body.hp-ui .hp-2s .hp-2s-codes-head p { margin: 4px 0 0; color: var(--hx-ink-2); font-size: .86rem; line-height: 1.55; }
body.hp-ui .hp-2s .hp-2s-code-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
    margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; list-style: none; counter-reset: hp2s;
    background: var(--hx-surface); border: 1px solid var(--hx-line);
}
body.hp-ui .hp-2s .hp-2s-code-grid li { counter-increment: hp2s; display: flex; align-items: baseline; gap: 10px; }
body.hp-ui .hp-2s .hp-2s-code-grid li::before {
    content: counter(hp2s, decimal-leading-zero); color: var(--hx-ink-3); font-size: .7rem; font-variant-numeric: tabular-nums;
}
body.hp-ui .hp-2s .hp-2s-code-grid code {
    color: var(--hx-ink); font-family: var(--hx-f-mono); font-size: 1rem; letter-spacing: .08em; background: none; padding: 0;
    white-space: nowrap; /* a code split at its hyphen gets copied wrong */
}
body.hp-ui .hp-2s .hp-2s-codes-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
body.hp-ui .hp-2s .hp-2s-codes-actions .button { text-decoration: none; }

/* ---------- Lists: passkeys and trusted browsers ---------- */
body.hp-ui .hp-2s .hp-2s-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
body.hp-ui .hp-2s .hp-2s-item {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 14px 16px; border-radius: 16px; background: var(--hx-surface-2); border: 1px solid var(--hx-line);
}
body.hp-ui .hp-2s .hp-2s-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
body.hp-ui .hp-2s .hp-2s-item-text { display: grid; gap: 3px; min-width: 0; }
body.hp-ui .hp-2s .hp-2s-item-text strong {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--hx-ink); font-size: .94rem; overflow-wrap: anywhere;
}
body.hp-ui .hp-2s .hp-2s-item-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--hx-ink-3); font-size: .78rem;
}
body.hp-ui .hp-2s .hp-2s-item-tools { flex: 1 1 100%; }
body.hp-ui .hp-2s .hp-2s-item-tools > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    color: var(--hx-quill-ink); font-size: .8rem; font-weight: 700;
}
body.hp-ui .hp-2s .hp-2s-item-tools > summary::-webkit-details-marker { display: none; }
body.hp-ui .hp-2s .hp-2s-item-tools > summary .icon { width: 14px; height: 14px; }
body.hp-ui .hp-2s .hp-2s-item-panel {
    display: grid; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hx-line-2);
}
body.hp-ui .hp-2s .hp-2s-item-panel .hp-2s-inline-form { margin-top: 0; }
body.hp-ui .hp-2s .hp-2s-remove { display: grid; gap: 10px; justify-items: start; }
body.hp-ui .hp-2s .hp-2s-remove .field { width: 100%; max-width: 360px; }
body.hp-ui .hp-2s .hp-2s-after-list { margin-top: 10px; }

body.hp-ui .hp-2s .hp-2s-add { margin-top: 16px; display: grid; gap: 12px; }
body.hp-ui .hp-2s .hp-2s-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
body.hp-ui .hp-2s .hp-2s-add-grid .hp-2s-confirmed { grid-column: 1 / -1; }
body.hp-ui .hp-2s-status { min-height: 1.2em; margin: 0; color: var(--hx-ink-2); font-size: .84rem; line-height: 1.5; }
body.hp-ui .hp-2s-status:empty { min-height: 0; }
body.hp-ui .hp-2s-status.is-error { color: var(--hx-danger); }
body.hp-ui .hp-2s-status.is-busy { color: var(--hx-ink-3); }

/* ---------- Disclosures ---------- */
body.hp-ui .hp-2s .hp-2s-disclosure { margin-top: 14px; }
body.hp-ui .hp-2s .hp-2s-disclosure > summary,
body.hp-ui .hp-2s-help > summary {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    color: var(--hx-royal-ink); font-size: .88rem; font-weight: 700;
}
body.hp-ui .hp-2s .hp-2s-disclosure > summary::-webkit-details-marker,
body.hp-ui .hp-2s-help > summary::-webkit-details-marker { display: none; }
body.hp-ui .hp-2s .hp-2s-disclosure > summary::before,
body.hp-ui .hp-2s-help > summary::before {
    content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .2s var(--hx-ease); flex: none;
}
[dir="rtl"] body.hp-ui .hp-2s .hp-2s-disclosure > summary::before,
[dir="rtl"] body.hp-ui .hp-2s-help > summary::before { transform: rotate(45deg); }
body.hp-ui .hp-2s .hp-2s-disclosure[open] > summary::before,
body.hp-ui .hp-2s-help[open] > summary::before { transform: rotate(45deg); }
[dir="rtl"] body.hp-ui .hp-2s .hp-2s-disclosure[open] > summary::before,
[dir="rtl"] body.hp-ui .hp-2s-help[open] > summary::before { transform: rotate(-45deg); }
body.hp-ui .hp-2s .hp-2s-danger-zone .hp-2s-disclosure > summary { color: var(--hx-danger); }
body.hp-ui .hp-2s .hp-2s-off { display: grid; gap: 14px; margin-top: 14px; }
body.hp-ui .hp-2s .hp-2s-off .field { max-width: 420px; }

body.hp-ui .hp-2s-help { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hx-line); }
body.hp-ui .hp-2s-help > summary { color: var(--hx-ink-2); font-size: .86rem; }
body.hp-ui .hp-2s-help-body { margin-top: 10px; }
body.hp-ui .hp-2s-help-body p { margin: 8px 0 0; color: var(--hx-ink-2); font-size: .86rem; line-height: 1.65; }

/* ---------- Second-step page ---------- */
body.hp-ui .hp-2s-challenge .form-copy strong { color: var(--hx-ink); font-weight: 700; unicode-bidi: isolate; }
body.hp-ui .hp-2s-challenge .notice { display: flex; align-items: flex-start; gap: 10px; }
body.hp-ui .hp-2s-challenge .notice .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
body.hp-ui .hp-2s-passkey-button { gap: 10px; width: 100%; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; }
body.hp-ui .hp-2s-passkey-button .icon { width: 20px; height: 20px; color: var(--hx-quill-ink); }
body.hp-ui .hp-2s-passkey-button[aria-busy="true"] { opacity: .7; cursor: progress; }
body.hp-ui .hp-2s-signin { margin-top: 10px; }
body.hp-ui .hp-2s-signin .google-button { margin-top: 0; }
body.hp-ui .hp-2s-signin .hp-2s-status:not(:empty),
body.hp-ui .hp-2s-passkey-block .hp-2s-status:not(:empty) { margin-top: 8px; text-align: center; }
body.hp-ui .hp-2s-passkey-block { margin-top: 22px; }
body.hp-ui .hp-2s-passkey-block .google-button { margin-top: 0; }
body.hp-ui .hp-2s-challenge-form { margin-top: 22px; }
body.hp-ui .hp-2s-challenge .hp-2s-passkey-block + .hp-2s-challenge-form { margin-top: 0; }
body.hp-ui .hp-2s-challenge .hp-2s-code-big {
    font-size: 1.55rem; letter-spacing: .3em; text-align: center; font-weight: 600;
}
/* The auth pages give every input 48px; a checkbox only needs its own box. */
body.hp-ui .hp-2s-challenge .hp-2s-trust .checkbox-label input[type="checkbox"] { min-height: 0; }
body.hp-ui .hp-2s-challenge .hp-2s-trust .hp-2s-fine { margin: 2px 0 0; padding-inline-start: 24px; }
body.hp-ui .hp-2s-challenge .hp-2s-switch { margin: 2px 0 0; text-align: center; color: var(--hx-ink-3); font-size: .84rem; }
body.hp-ui .hp-2s-challenge .hp-2s-switch .text-link { margin-inline-start: 4px; }
body.hp-ui .hp-2s-help-auth { margin-top: 26px; padding-top: 16px; }
body.hp-ui .hp-2s-help-auth .text-link { display: inline-block; margin-top: 10px; }
body.hp-ui .hp-2s-cancel-auth { margin-top: 16px; text-align: center; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    /* The state goes under the title, lined up with it. */
    body.hp-ui .hp-2s .hp-2s-heading { flex-wrap: wrap; row-gap: 10px; }
    body.hp-ui .hp-2s .hp-2s-heading-copy { flex: 1 1 calc(100% - 64px); }
    body.hp-ui .hp-2s .hp-2s-state { margin: 0; margin-inline-start: 55px; }
    body.hp-ui .hp-2s .hp-2s-setup { padding: 16px; }
    body.hp-ui .hp-2s .hp-2s-step { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    body.hp-ui .hp-2s .hp-2s-step-number { width: 28px; height: 28px; font-size: .95rem; }
    body.hp-ui .hp-2s .hp-2s-qr { margin-inline: auto; }
    body.hp-ui .hp-2s .hp-2s-add-grid { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui .hp-2s .hp-2s-inline-form .control,
    body.hp-ui .hp-2s .hp-2s-inline-form .hp-2s-code-input { max-width: none; flex-basis: 100%; }
    body.hp-ui .hp-2s .hp-2s-inline-form .button,
    body.hp-ui .hp-2s .hp-2s-inline-form .hp-2s-button-soft { width: 100%; }
    body.hp-ui .hp-2s .hp-2s-codes { padding: 16px; }
    body.hp-ui .hp-2s .hp-2s-code-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 16px; }
    body.hp-ui .hp-2s .hp-2s-code-grid li { justify-content: flex-start; }
    body.hp-ui .hp-2s .hp-2s-code-grid code { font-size: 1.02rem; letter-spacing: .1em; }
    body.hp-ui .hp-2s .hp-2s-codes-actions > * { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hp-2s .hp-2s-button-soft,
    body.hp-ui .hp-2s .hp-2s-icon-button,
    body.hp-ui .hp-2s .hp-2s-disclosure > summary::before,
    body.hp-ui .hp-2s-help > summary::before { transition: none; }
    body.hp-ui .hp-2s .hp-2s-button-soft:hover { transform: none; }
}

/* ---------- Printing the recovery codes only ---------- */
@media print {
    body.hp-2s-printing * { visibility: hidden; }
    body.hp-2s-printing .hp-2s-codes,
    body.hp-2s-printing .hp-2s-codes * { visibility: visible; }
    body.hp-2s-printing .hp-2s-codes {
        position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; background: #ffffff; color: #000000;
    }
    body.hp-2s-printing .hp-2s-codes-actions,
    body.hp-2s-printing .hp-2s-fine { display: none; }
    body.hp-2s-printing .hp-2s-code-grid code { color: #000000; font-size: 14pt; }
}