/*
    The client portal wears the Excel add-in's unified pane, not the marketing site.

    Every token below is taken from the add-in's own theme so the two surfaces resolve to the
    same values rather than merely resembling each other:

        Formuly Addin/src/apps/Add-in/User interface/Task panes/PaneV2/PaneV2Theme.xaml
        Formuly Addin/src/apps/Add-in/User interface/Task panes/PaneV2/PaneV2Theme.Dark.xaml

    The Settings dialog is the add-in's other styled surface and it disagrees with the pane on
    ground, accent, radius and type scale — it is iOS-flavoured where the pane is Fluent. The pane
    wins here: it is the surface an analyst spends the day in, so it is the one the portal has to
    feel continuous with.
*/

:root {
    --ground:        #F3F3F3;              /* PaneGround       */
    --card:          #FFFFFF;              /* PaneCard         */
    --card-alt:      #F9F9F9;              /* PaneCardAlt      */
    --ink:           #1B1B1B;              /* PaneInk          */
    --muted:         #5D5D5D;              /* PaneMuted        */
    --stroke:        rgba(0, 0, 0, 0.06);  /* PaneStroke       */
    --stroke-strong: rgba(0, 0, 0, 0.16);  /* PaneStrokeStrong */
    --fill:          rgba(0, 0, 0, 0.04);  /* PaneFill         */
    --tile:          #E6E6E6;              /* PaneTile         */
    --accent:        #0067C0;              /* PaneAccent       */
    --accent-tint:   rgba(0, 103, 192, 0.09);
    --task-mark:     #7048AA;              /* PaneTaskMark     */

    --sev-high:      #FF453A;              /* PaneSeverityHigh   */
    --sev-medium:    #FF9F0A;              /* PaneSeverityMedium */
    --sev-low:       #98989F;              /* PaneSeverityLow    */
    --sev-high-ink:  #C42B1C;              /* High as text on a light ground */
    --good:          #0B7350;              /* TraceKindLink      */

    --brand-wordmark: #111111;             /* Brand guidelines: Black on light */

    --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

    --fs-title:   20px;    /* PaneTitleSize         */
    --fs-body:    14px;    /* PaneBodySize          */
    --fs-caption: 12px;    /* PaneCaptionSize       */
    --fs-label:   9px;     /* PaneSectionLabelStyle */
    --fs-link:    9.5px;   /* PaneLinkStyle         */
    --fs-chip:    10px;    /* PaneChipStyle         */

    --radius-card: 8px;    /* PaneCardStyle */
    --radius-chip: 3px;    /* TaskChipStyle */
    --radius-ctl:  4px;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground:        #202020;
        --card:          #2B2B2B;
        --card-alt:      #323232;
        --ink:           #FFFFFF;
        --muted:         #CFCFCF;
        --stroke:        rgba(255, 255, 255, 0.07);
        --stroke-strong: rgba(255, 255, 255, 0.10);
        --fill:          rgba(255, 255, 255, 0.06);
        --tile:          #171717;
        --accent:        #60CDFF;
        --accent-tint:   rgba(96, 205, 255, 0.14);
        --good:          #45C79A;
        --sev-high-ink:  #FF7A70;
        --brand-wordmark: #FFFFFF;         /* Brand guidelines: White on dark */
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- shell */

.shell {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: 100vh;
}

.rail {
    background: var(--tile);
    border-right: 1px solid var(--stroke);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rail .wordmark {
    display: block;
    padding: 4px 9px 14px;
}

.wordmark-svg {
    color: var(--brand-wordmark);
    width: auto;
    display: block;
}

.rail .wordmark .wordmark-svg { height: 16px; }

.rail a.nav-item,
.rail .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 30px;
    padding: 0 9px;
    border-radius: var(--radius-ctl);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

.rail a.nav-item:hover { background: var(--fill); }

.rail a.nav-item.on {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

/* The pane's selection bar. */
.rail a.nav-item.on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 1.5px;
    background: var(--accent);
}

.rail .spacer { flex: 1; }

.rail .who {
    padding: 8px 9px 4px;
    border-top: 1px solid var(--stroke);
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--fs-caption);
}

.rail .who .org { color: var(--ink); font-weight: 600; }
.rail .who .person { color: var(--muted); }

.rail .who a {
    color: var(--accent);
    font-size: var(--fs-link);
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}

.rail .who a:hover { text-decoration: underline; }

.content { padding: 20px 20px 60px; min-width: 0; }
.col { max-width: 660px; margin: 0 auto; }

/* A verification is a document with tables in it: wider page, prose held to a readable measure. */
.col.wide { max-width: 960px; }

@media (max-width: 760px) {
    .shell { grid-template-columns: 1fr; align-content: start; }
    .rail {
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--stroke);
    }
    .rail .wordmark { padding: 0 9px 0 0; }
    .rail .who { border-top: 0; padding: 0 9px; }
    .rail .who .person { display: none; }
    .content { padding: 16px 16px 48px; }
}

/* ------------------------------------------------------------- headings */

h1 {
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

h2 { font-size: var(--fs-body); font-weight: 600; margin: 0; }

.lede {
    margin: 2px 0 4px;
    color: var(--muted);
    font-size: var(--fs-caption);
    max-width: 66ch;
}

/* PaneSectionLabelStyle — 9px semibold, muted. */
.label {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 14px 0 7px;
}

/* ---------------------------------------------------------------- cards */

/* PaneCardStyle — radius 8, 1px hairline, 12/10 padding, 6px gap below. */
.card {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    margin-bottom: 6px;
}

a.card {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.card:hover { background: var(--card-alt); }

a.card:focus-visible,
.rail a:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.card-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.card-top .name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.card-sub {
    color: var(--muted);
    font-size: var(--fs-caption);
    margin-top: 2px;
}

.num {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: var(--fs-caption);
    white-space: nowrap;
}

.summary { margin-top: 6px; }

/* ---------------------------------------------------------- chips, pills */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.chip {
    font-size: var(--fs-chip);
    font-weight: 600;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-chip);
    padding: 1px 5px 2px;
    color: var(--ink);
}

.chip.task {
    border-color: var(--task-mark);
    color: var(--task-mark);
}

/* A trace readout's tones: an alarm is something to look at, muted is present but not to act on. */
.chip.alarm {
    border-color: var(--sev-high);
    color: var(--sev-high);
}

.chip.muted {
    border-color: var(--stroke);
    color: var(--muted);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-caption);
    white-space: nowrap;
    color: var(--muted);
}

.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.pill-completed { color: var(--good); }
.pill-running,
.pill-inprogress { color: var(--accent); }
.pill-failed,
.pill-cancelled { color: var(--sev-high); }
.pill-awaitingapproval,
.pill-pending { color: var(--sev-medium); }

/* ---------------------------------------------------------------- stats */

.stats { display: flex; }

.stat {
    flex: 1;
    padding: 2px 0;
    position: relative;
}

.stat + .stat {
    padding-left: 14px;
    margin-left: 14px;
}

.stat + .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    border-left: 1px solid var(--stroke);
}

.stat .n {
    display: block;
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat .k {
    color: var(--muted);
    font-size: var(--fs-caption);
}

/* ---------------------------------------------------------------- tables */

/* A wide table scrolls inside its own box; the page never scrolls sideways. */
.table-scroll {
    /* Positioned, so a visually hidden header inside is clipped with the table, not the page. */
    position: relative;
    overflow-x: auto;
    margin: 8px 0 6px;
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-caption);
}

table.data th,
table.data td {
    text-align: left;
    vertical-align: top;
    padding: 6px 12px;
    border-bottom: 1px solid var(--stroke);
}

table.data tbody tr:last-child td { border-bottom: 0; }

table.data thead th {
    color: var(--muted);
    font-weight: 600;
    background: var(--card-alt);
    white-space: nowrap;
}

table.data .n {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.data .k,
table.data .group .k {
    color: var(--muted);
    font-weight: 400;
}

table.data .group th {
    background: var(--fill);
    color: var(--ink);
    font-weight: 600;
    border-bottom: 1px solid var(--stroke);
}

table.data .group .k { margin-left: 8px; }

table.findings { min-width: 560px; }
table.findings td.cell { font-family: var(--mono); white-space: nowrap; width: 110px; }
table.findings td:nth-child(n+3) { white-space: nowrap; width: 1%; }

/* Severity is a shape and the word: ▲ High, ◆ Medium, ● Low. The colour only helps find it. */
.sev {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.sev .glyph {
    font-size: 10px;
    line-height: 1;
    color: var(--sev-low);
}

.sev-high .glyph { color: var(--sev-high); }
.sev-medium .glyph { color: var(--sev-medium); }

/* Category is a chip; the word carries it. */
.chip.cat { white-space: nowrap; }

.chip.cat-error {
    color: var(--sev-high-ink);
    border-color: color-mix(in srgb, var(--sev-high-ink) 40%, transparent);
    background: color-mix(in srgb, var(--sev-high) 9%, transparent);
}

.chip.cat-practice {
    color: var(--muted);
    border-color: var(--stroke-strong);
    background: var(--fill);
}

.unplaced { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------- verification */

.masthead { margin-bottom: 8px; }

.eyebrow {
    margin: 0 0 2px;
    font-size: var(--fs-caption);
    color: var(--muted);
}

.eyebrow a { color: var(--muted); }

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 10px 0 0;
    font-size: var(--fs-caption);
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.facts dd .why { display: block; max-width: 40ch; color: var(--muted); font-weight: 400; }

.section {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--stroke-strong);
}

.section h2 {
    font-size: 16px;
    margin: 0 0 10px;
    letter-spacing: -0.005em;
}

.section h3 {
    font-size: var(--fs-body);
    font-weight: 600;
    margin: 18px 0 0;
}

.section .stats { margin: 4px 0 10px; }

.prose {
    margin: 6px 0;
    max-width: 72ch;
}

.section .notice { margin: 8px 0; max-width: 72ch; }

.lineage {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.lineage li {
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--stroke-strong);
}

.lineage .step {
    display: block;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.lineage .term { font-size: var(--fs-caption); margin-top: 2px; }
.lineage .term .k { color: var(--muted); }

/* Four counts in four units: each bar is its own, scaled to the longest of the four. */
.countbars {
    list-style: none;
    margin: 4px 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 18px;
}

.countbars li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}

.countbars .n {
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.countbars .k { color: var(--muted); font-size: var(--fs-caption); }

.countbars svg {
    flex-basis: 100%;
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 4px;
}

.countbars .track { fill: var(--tile); }
.countbars .fill { fill: var(--muted); opacity: 0.55; }
.countbars li:last-child .fill { fill: var(--accent); opacity: 1; }

/* The comparison, in one line, on the signed-in page only. */
.compare-line {
    margin: 0 0 10px;
    max-width: 72ch;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.compare-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The document's own histogram bins, each column with its count above and its band below. */
.hists {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 12px 0 4px;
}

/* Bins shrink to fit; a chart wider than the page scrolls inside itself, never the page. */
.hist { margin: 0; min-width: 0; max-width: 100%; overflow-x: auto; }

.hist figcaption {
    font-size: var(--fs-caption);
    font-weight: 600;
    margin-bottom: 6px;
}

.hist figcaption .k { color: var(--muted); font-weight: 400; margin-left: 4px; }

.hist ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.hist li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 34px;
    max-width: 52px;
}

.hist .c,
.hist .l {
    font-size: var(--fs-chip);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hist svg { display: block; width: 16px; height: 65px; margin: 2px 0 3px; }
.hist .fill { fill: var(--accent); opacity: 0.55; }
.hist .base { fill: var(--stroke-strong); }
.hist .tiny { fill: var(--muted); }

/* A sheet's count shaded against the largest in its column. The number stays the measure. */
table.data td.heat { font-weight: 600; }
.heat-e1 { background: color-mix(in srgb, var(--sev-high) 12%, transparent); }
.heat-e2 { background: color-mix(in srgb, var(--sev-high) 22%, transparent); }
.heat-e3 { background: color-mix(in srgb, var(--sev-high) 33%, transparent); }
.heat-e4 { background: color-mix(in srgb, var(--sev-high) 44%, transparent); }
.heat-p1 { background: color-mix(in srgb, var(--sev-low) 14%, transparent); }
.heat-p2 { background: color-mix(in srgb, var(--sev-low) 25%, transparent); }
.heat-p3 { background: color-mix(in srgb, var(--sev-low) 36%, transparent); }
.heat-p4 { background: color-mix(in srgb, var(--sev-low) 47%, transparent); }

.table-scroll.fit { width: fit-content; max-width: 100%; }
table.bysheet { min-width: 420px; }

.limits { margin: 0; max-width: 72ch; }
.limits dt { font-weight: 600; margin-top: 10px; }
.limits dt:first-child { margin-top: 0; }
.limits dd { margin: 2px 0 0; color: var(--muted); }

.back { margin-top: 28px; }

@media (max-width: 760px) {
    .section .stats { flex-wrap: wrap; row-gap: 8px; }
    .section .stat { flex: 1 1 40%; }
    .section .stat:nth-child(odd) { padding-left: 0; margin-left: 0; }
    .section .stat:nth-child(odd)::before { display: none; }
    table.findings { min-width: 0; }
    table.findings td.cell { width: auto; }
    table.bysheet { min-width: 0; }
    .hist .c, .hist .l { font-size: var(--fs-label); }
    .countbars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    table.data th, table.data td { padding: 6px 8px; }
}

/* A verification is often printed: one light, unboxed column, no navigation. */
@media print {
    :root {
        --ground: #FFFFFF;
        --card: #FFFFFF;
        --card-alt: #F5F5F3;
        --ink: #1B1B1B;
        --muted: #4A4A4A;
        --stroke: rgba(0, 0, 0, 0.14);
        --stroke-strong: rgba(0, 0, 0, 0.3);
        --fill: #F0F0EE;
        --accent: #1B1B1B;
        --accent-tint: transparent;
        --tile: #E6E6E6;
        --sev-high-ink: #C42B1C;
        color-scheme: light;
    }

    body { font-size: 10pt; }
    .shell { display: block; }
    .rail, .back, .eyebrow a { display: none; }
    .content { padding: 0; }
    .col, .col.wide { max-width: none; }
    .table-scroll { overflow: visible; border-radius: 0; }
    table.findings { min-width: 0; }
    table.data tr, .lineage li, .limits dd, .countbars, .hist { break-inside: avoid; }
    .heat-e1, .heat-e2, .heat-e3, .heat-e4, .heat-p1, .heat-p2, .heat-p3, .heat-p4, .chip.cat {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    table.data thead { display: table-header-group; }
    .section { break-before: auto; }
    .section h2, .section h3 { break-after: avoid; }
    a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------- notices, empty */

.foot {
    color: var(--muted);
    font-size: var(--fs-caption);
    margin: 2px 0 0;
    max-width: 66ch;
}

.empty,
.notice {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.notice { border-left: 3px solid var(--sev-medium); }

/* --------------------------------------------------------- sign-in page */

.signin {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.signin-card {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 28px;
    max-width: 420px;
    width: 100%;
}

.signin-card .wordmark-svg { height: 18px; margin-bottom: 18px; }
.signin-card h1 { margin-bottom: 6px; }

.button {
    display: inline-block;
    background: var(--accent);
    color: #FFFFFF;
    border-radius: var(--radius-ctl);
    padding: 6px 14px 7px;
    font-size: var(--fs-body);
    font-weight: 600;
    text-decoration: none;
    margin-top: 14px;
}

.button:hover { filter: brightness(1.08); }

@media (prefers-color-scheme: dark) {
    .button { color: #10222E; }
}

/* ------------------------------------------------------------- controls */

button.button {
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
}

.button.secondary {
    background: transparent;
    color: var(--accent);
    border-color: var(--stroke-strong);
}

.button.danger {
    background: transparent;
    color: var(--sev-high-ink);
    border-color: color-mix(in srgb, var(--sev-high-ink) 45%, transparent);
}

.button.small {
    margin-top: 0;
    padding: 2px 8px 3px;
    font-size: var(--fs-caption);
}

.button.secondary:hover,
.button.danger:hover { filter: none; background: var(--fill); }

.button:focus-visible,
input:focus-visible,
a:focus-visible,
.table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
}

.field label {
    font-size: var(--fs-caption);
    font-weight: 600;
}

.field input {
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-ctl);
    padding: 6px 9px;
    width: 100%;
    min-width: 0;
}

/* Six digits, read at a glance and typed without looking back. */
.field input.code {
    font-family: var(--mono);
    letter-spacing: 0.2em;
    max-width: 12ch;
}

.field input[aria-invalid="true"] { border-color: var(--sev-high-ink); }

.field-error {
    margin: 0;
    color: var(--sev-high-ink);
    font-size: var(--fs-caption);
}

.field input.share-url {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    background: var(--card-alt);
}

.choices {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.choices legend {
    padding: 0;
    margin-bottom: 6px;
    font-size: var(--fs-caption);
    color: var(--muted);
}

.choice {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.choice input { accent-color: var(--accent); margin: 0; }

.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;
}

/* ------------------------------------------------------------- sharing */

/* A link holder's steps before the report: one card, the form and what it costs them. */
.signin { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.signin-card.gate { min-width: 0; overflow-wrap: anywhere; }
.signin-card.gate .lede { font-size: var(--fs-body); color: var(--muted); margin-top: 6px; }
.signin-card.gate .stack .button { margin-top: 14px; }
.signin-card.gate .again { margin-top: 6px; }
.signin-card.gate .again .button { margin-top: 0; }

.signin-card .why {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--stroke);
    color: var(--muted);
    font-size: var(--fs-caption);
}

.share {
    margin-top: 20px;
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 12px 14px;
}

.share h2 { font-size: var(--fs-body); margin: 0 0 6px; }
.share p { margin: 6px 0; max-width: 72ch; }
.share .field { margin-top: 8px; max-width: 72ch; }
.share .button { margin-top: 10px; }
.share .foot { margin-top: 10px; }

table.links { min-width: 680px; }
table.links thead th { white-space: normal; vertical-align: bottom; }
table.links td:nth-child(5) { white-space: nowrap; }
table.data .why { display: block; color: var(--muted); }

.row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.row-actions form { margin: 0; }

.access-log { margin-top: 24px; }
.access-log h2 { font-size: 16px; margin: 0 0 6px; }

@media print {
    .share { display: none; }
}

.mono { font-family: var(--mono); }