/* ==========================================================================
   Quercia viva — the job sheet, «Il Cantiere».

   One job, read rather than edited: a hero band that says who, where, when and
   which status, then a board of tiles — one subject each, named by one noun,
   drawn only when it has something to say — and one button.

   Global rather than page-scoped, like help.css: the sheet opens from the
   calendar, the day, the board and the job lists, so it belongs to the layout.

   `--st` is the status's own token, set on the fragment by the template. Every
   accent in here comes off it, so a company that renames its statuses and
   recolours them repaints this with them and nothing here knows.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * The container: a wide dialog on a desk, the whole screen on a phone
 * ------------------------------------------------------------------ */
.qc-sheet .modal-content {
    overflow: hidden;
    border-radius: var(--qc-radius-panel);
}

.qc-sheet--wide .qc-sheet__dialog {
    max-width: min(1100px, calc(100vw - 3rem));
}

.qc-sheet__slot {
    min-height: 12rem;
}

.qc-sheet__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    border: 1px solid var(--qc-border);
    color: var(--qc-text-secondary);
    background: color-mix(in srgb, var(--qc-surface-raised) 86%, transparent);
    box-shadow: var(--qc-shadow-sm);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: color var(--qc-dur-fast) var(--qc-ease-fast),
                border-color var(--qc-dur-fast) var(--qc-ease-fast);
}

.qc-sheet__close:hover {
    color: var(--qc-primary);
    border-color: color-mix(in srgb, var(--qc-primary) 40%, var(--qc-border));
}

/* ------------------------------------------------------------------ *
 * The hero: the place, and when the work is
 * ------------------------------------------------------------------ */
.qc-sheet__hero {
    /* Where the pin sits, measured from the band's right edge. */
    --qc-sheet-pin-inset: 7rem;
    position: relative;
    min-height: 11rem;
    background: var(--qc-surface-light);
    border-bottom: 1px solid var(--qc-divider);
}

.qc-sheet__map {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* The 2×2 mosaic. The presenter gives the site's place in it as percentages
   of the mosaic (--pin-x, --pin-y, plain numbers); the mosaic is moved until
   that point lies on a fixed spot of the band — 7rem from the right edge, half
   way down — and the pin is drawn on that spot. So the pin is always on the
   right, clear of the title, however wide the sheet is.

   The point falls between a quarter and three quarters of the mosaic by
   construction, so the tiles always reach past the spot on every side; their
   own left edge is faded out rather than left as a seam, which a wide sheet
   would otherwise show where the veil thins.

   The pin is not inside the mosaic: the mask makes the mosaic a stacking
   context, and a pin inside it would sink under the hero's veil. Offsets and
   not a transform, for the same reason. */
.qc-sheet__tiles {
    position: absolute;
    left: calc(100% - var(--qc-sheet-pin-inset) - 512px * var(--pin-x, 50) / 100);
    top: calc(50% - 512px * var(--pin-y, 50) / 100);
    display: grid;
    grid-template-columns: repeat(2, 256px);
    grid-template-rows: repeat(2, 256px);
    width: 512px;
    height: 512px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
    mask-image: linear-gradient(90deg, transparent, #000 20%);
}

.qc-sheet__map img {
    display: block;
    width: 256px;
    height: 256px;
    /* The ground is a backdrop, not a document: it must never pull the eye off
       the words sitting on it — but it has to be a place, and a wash nobody can
       read a street off is decoration pretending to be information.

       That balance moved when the basemap gained its colour: the ground used to
       be desaturated to .75 because it was grey either way and the only thing
       to protect was the reading. Now the green *is* the information — this is
       a company that cuts it — so the picture is left close to itself and the
       veil over the words does the protecting, which was always its job.

       There is one edition of this sheet and it is a daylight one, so the dark
       theme settles it in rather than fetching a different world — see the rule
       below and the note on WorkSheetPresenter::tileUrl(). */
    opacity: .95;
    filter: none;
}

[data-bs-theme="dark"] .qc-sheet__map img {
    opacity: .78;
    filter: brightness(.72) saturate(.85);
}

/* The veil that makes the title legible whatever the tiles happen to show, and
   the only place the status tints the hero. */
.qc-sheet__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--qc-card-bg) 96%, transparent) 0 38%,
            color-mix(in srgb, var(--qc-card-bg) 55%, transparent) 62%,
            color-mix(in srgb, var(--qc-card-bg) 12%, transparent) 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--st) 10%, transparent), transparent 60%);
}

.qc-sheet__pin {
    position: absolute;
    z-index: 1;
    left: calc(100% - var(--qc-sheet-pin-inset));
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -20px 0 0 -10px;
    border-radius: 50% 50% 50% 0;
    background: var(--st);
    border: 2px solid var(--qc-card-bg);
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* "Open in Google Maps": the one thing in the band that is pressable, so it
   looks it — the tiles behind it are `aria-hidden` scenery. A link out: nobody
   pans a job sheet, and whoever wants a real map wants directions too. */
.qc-sheet__mapbtn {
    position: absolute;
    z-index: 3;
    right: .6rem;
    bottom: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-btn);
    background: color-mix(in srgb, var(--qc-surface-raised) 88%, transparent);
    backdrop-filter: blur(6px);
    font: 600 var(--qc-fs-xs) var(--qc-font-body);
    color: var(--qc-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--qc-dur-fast) var(--qc-ease-fast), border-color var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-sheet__mapbtn:hover { color: var(--qc-primary); border-color: color-mix(in srgb, var(--qc-primary) 40%, var(--qc-border)); }
.qc-sheet__mapbtn:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-sheet__mapbtn i { width: 15px; height: 15px; font-size: 15px; }

.qc-sheet__title {
    position: relative;
    z-index: 2;
    max-width: 42rem;
    padding: 1.25rem 3rem 1.25rem 1.5rem;
}

.qc-sheet__draft {
    padding: .1rem .5rem;
    border-radius: var(--qc-radius-pill);
    font-size: var(--qc-fs-xs);
    font-weight: 600;
    color: var(--qc-warning-text);
    background: color-mix(in srgb, var(--qc-warning) 20%, transparent);
}

.qc-sheet__h {
    margin: .35rem 0 0;
    font-family: var(--qc-font-display);
    font-weight: 800;
    font-size: var(--qc-fs-3xl);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--qc-text-primary);
    text-wrap: balance;
}

.qc-sheet__h:focus-visible {
    outline: 2px solid var(--qc-primary);
    outline-offset: 4px;
    border-radius: var(--qc-radius-sm);
}

.qc-sheet__where,
.qc-sheet__when {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .5rem 0 0;
    font-size: var(--qc-fs-md);
    line-height: 1.35;
    color: var(--qc-text-secondary);
}

.qc-sheet__where .ti,
.qc-sheet__when .ti {
    flex: none;
    margin-top: .1rem;
    color: var(--qc-text-tertiary);
}

.qc-sheet__when b {
    color: var(--qc-text-primary);
    font-weight: 600;
}

.qc-sheet__sitelabel {
    padding: .05rem .4rem;
    border-radius: var(--qc-radius-pill);
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-secondary);
    background: color-mix(in srgb, var(--qc-text-tertiary) 14%, transparent);
}

/* The status it is in — only the current one — above the customer's name. */
.qc-sheet__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin: 0 0 .15rem;
}

/* A row of pills: the services under the name, a machine and its warnings. */
.qc-sheet__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qc-sheet__services { margin-top: .6rem; }

/* ------------------------------------------------------------------ *
 * The board: one tile per subject
 * ------------------------------------------------------------------ */
/* A sunken well with the tiles standing on it, the way the home's widgets
   stand on the page. auto-fit decides the columns (three on a desk, one on a
   phone) and `dense` lets a short tile fill a hole left by a long one; the
   tiles that carry prose or a list of rows span the whole line.

   The well is `--qc-field-bg` and the tile `--qc-card-bg`, never a surface by
   name: the two themes swap which surface is raised — in the dark one
   `card-bg` *is* `surface-light` — and a well named by surface disappeared
   under its own tiles there. */
.qc-sheet__board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-auto-flow: row dense;
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--qc-field-bg);
    border-top: 1px solid var(--qc-divider);
}

.qc-sblk {
    min-width: 0;
    padding: .85rem 1rem 1rem;
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-card);
    background: var(--qc-card-bg);
    box-shadow: var(--qc-shadow-sm);
}

.qc-sblk--wide { grid-column: 1 / -1; }

.qc-sblk__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .65rem;
    font: 600 var(--qc-fs-sm)/1.2 var(--qc-font-body);
    color: var(--qc-text-secondary);
}

.qc-sblk__head .ti { font-size: 1rem; color: var(--qc-primary); }

.qc-sblk__aside {
    margin-left: auto;
    font-weight: 500;
    font-size: var(--qc-fs-xs);
    color: var(--qc-text-tertiary);
}

.qc-sheet__empty {
    margin: 0;
    font-size: var(--qc-fs-md);
    color: var(--qc-text-tertiary);
}

.qc-facts { display: grid; gap: .45rem; }

.qc-fact {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    font-size: var(--qc-fs-md);
    line-height: 1.35;
    color: var(--qc-text-primary);
}

.qc-fact > .ti {
    flex: none;
    margin-top: .1rem;
    color: var(--qc-text-tertiary);
}

.qc-fact small {
    display: block;
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-tertiary);
}

/* ------------------------------------------------------------------ *
 * The two figures, which are two different questions
 * ------------------------------------------------------------------ */
.qc-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: .5rem;
}

.qc-fig {
    padding: .55rem .7rem;
    border-radius: var(--qc-radius-input);
    background: var(--qc-field-bg);
    min-width: 0;
}

.qc-fig b {
    display: block;
    font-family: var(--qc-font-display);
    font-weight: 800;
    font-size: var(--qc-fs-2xl);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--qc-text-primary);
}

.qc-fig span {
    display: block;
    margin-top: .25rem;
    font-size: var(--qc-fs-xs);
    line-height: 1.25;
    color: var(--qc-text-tertiary);
}

/* The crew: its name beside its own colour, then a person chip each — whole
   names, the leader's chip outlined and saying so. */
.qc-sheet__crewname {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .6rem;
    font: 600 var(--qc-fs-lg)/1.25 var(--qc-font-body);
    color: var(--qc-text-primary);
}

.qc-sheet__crewname i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--qc-crew-accent, var(--qc-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc-crew-accent, var(--qc-primary)) 22%, transparent);
}

.qc-sheet__people {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qc-sheet__people .qc-cm { background: var(--qc-field-bg); min-width: 0; }
.qc-sheet__people .qc-cm.is-lead { border-color: var(--qc-primary); }
.qc-sheet__people .qc-cm small { flex: none; font: 600 var(--qc-fs-xs) var(--qc-font-body); color: var(--qc-primary); }

/* The agreement and the estimate: one well each, the whole of it the link to
   the page it names — a mark, two lines, and an arrow where it can be opened.
   An amount is one line: the currency code beside the figure, never over it. */
.qc-sheet__doc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .65rem .7rem;
    border: 1px solid transparent;
    border-radius: var(--qc-radius-input);
    background: var(--qc-field-bg);
    color: var(--qc-text-primary);
    text-decoration: none;
    transition: border-color var(--qc-dur-fast) var(--qc-ease-fast);
}

a.qc-sheet__doc:hover,
a.qc-sheet__doc:focus-visible { border-color: var(--qc-primary); color: var(--qc-text-primary); text-decoration: none; }

.qc-sheet__doc > .ti:first-child { font-size: 1.5rem; color: var(--qc-primary); }
.qc-sheet__doc > .ti:last-child { color: var(--qc-text-tertiary); }

.qc-sheet__doc b {
    display: block;
    font-family: var(--qc-font-display);
    font-weight: 800;
    font-size: var(--qc-fs-xl);
    line-height: 1.05;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A name rather than a figure: body type, and it may take two lines. */
.qc-sheet__doc--name b {
    font: 600 var(--qc-fs-lg)/1.25 var(--qc-font-body);
    letter-spacing: 0;
    white-space: normal;
}

.qc-sheet__doc small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .4rem;
    margin-top: .25rem;
    font-size: var(--qc-fs-xs);
    line-height: 1.25;
    color: var(--qc-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .qc-sheet__doc { transition: none; }
}

/* The machines: a pill each, the hours it ran on this job inside the pill
   behind a hairline. The fleet's warnings are sentences under them — words
   and an icon, never colour alone. */
.qc-sheet__machines .tpill { height: 26px; max-width: 100%; font-size: var(--qc-fs-xs); }
.qc-sheet__machines .tpill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.qc-sheet__machines .tpill > b {
    flex: none;
    margin-left: .1rem;
    padding-left: .4rem;
    border-left: 1px solid color-mix(in srgb, var(--qc-info) 36%, transparent);
    font-weight: 800;
}

.qc-sheet__machinewarns {
    display: grid;
    gap: .3rem;
    margin: .65rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--qc-fs-sm);
    line-height: 1.35;
    color: var(--qc-warning-text);
}

.qc-sheet__machinewarns li { display: flex; align-items: flex-start; gap: .35rem; }
.qc-sheet__machinewarns .ti { flex: none; margin-top: .1rem; }

/* ------------------------------------------------------------------ *
 * The materials sheet, read-only
 * ------------------------------------------------------------------ */
.qc-mat {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--qc-fs-sm);
    line-height: 1.3;
}

.qc-mat th {
    padding: 0 .5rem .35rem 0;
    text-align: left;
    font: 600 var(--qc-fs-xs) var(--qc-font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qc-text-tertiary);
    border-bottom: 1px solid var(--qc-divider);
    white-space: nowrap;
}

.qc-mat td {
    padding: .35rem .5rem .35rem 0;
    border-bottom: 1px solid var(--qc-divider);
    vertical-align: top;
}

.qc-mat tr:last-child td { border-bottom: 0; }

/* The margin tile reuses the materials table: its last row is what is left, and
   under it the verdict against what the estimate expected. */
.qc-mat__total td {
  border-top: 1px solid var(--qc-border);
  font-weight: 600;
  color: var(--qc-text-primary);
}
.qc-sblk__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: .75rem 0 0;
  font-size: var(--qc-fs-sm);
}

.qc-mat__num { text-align: right; white-space: nowrap; }
.qc-mat__unit { color: var(--qc-text-tertiary); }

/* A dash is not a zero: not filled in yet, and it is what bars the report. */
.qc-mat__num.is-missing { color: var(--qc-warning-text); font-weight: 700; }

/* ------------------------------------------------------------------ *
 * What is missing — the home's own rows, on one job
 * ------------------------------------------------------------------ */
.qc-sheet__flags {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qc-flag {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border-radius: var(--qc-radius-input);
    font-size: var(--qc-fs-sm);
    line-height: 1.3;
    background: color-mix(in srgb, var(--sev) 10%, transparent);
}

.qc-flag > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sev);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sev) 25%, transparent);
}

.qc-flag a {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: var(--qc-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Notes, contacts, the dates
 * ------------------------------------------------------------------ */
.qc-note {
    padding: .6rem .75rem;
    border-radius: var(--qc-radius-input);
    font-size: var(--qc-fs-md);
    line-height: 1.45;
    color: var(--qc-text-primary);
    background: var(--qc-field-bg);
}

.qc-note--office {
    background: color-mix(in srgb, var(--st) 10%, var(--qc-card-bg));
    border: 1px solid color-mix(in srgb, var(--st) 24%, transparent);
    border-left: 3px solid var(--st);
}

.qc-note__body > :last-child { margin-bottom: 0; }

.qc-sheet__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.qc-cc {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.9rem;
    padding: 0 .6rem;
    border-radius: var(--qc-radius-input);
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-primary);
    background: var(--qc-field-bg);
    border: 1px solid var(--qc-border);
    text-decoration: none;
    white-space: nowrap;
    /* A long address must not leave the tile: the chip stops at the tile's
       width and its text ends in an ellipsis, the whole of it in the title. */
    max-width: 100%;
    min-width: 0;
}

.qc-cc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qc-cc .ti { flex: none; }

.qc-cc:hover { color: var(--qc-primary); border-color: var(--qc-primary); }
.qc-cc .ti { color: var(--qc-text-tertiary); }

/* ------------------------------------------------------------------ *
 * The bar that closes it
 * ------------------------------------------------------------------ */
.qc-sheet__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border-top: 1px solid var(--qc-divider);
    background: color-mix(in srgb, var(--qc-surface-light) 55%, transparent);
}

.qc-sheet__foot form { margin: 0; }
.qc-sheet__foot-sp { flex: 1 1 auto; }

.qc-sheet__soon {
    margin: 0;
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-tertiary);
}

.qc-sheet__error {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--qc-text-secondary);
}

.qc-sheet__error .ti {
    font-size: 1.6rem;
    color: var(--qc-warning-text);
}

/* ------------------------------------------------------------------ *
 * On a phone the sheet is the page
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .qc-sheet .modal-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .qc-sheet .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .qc-sheet__hero { min-height: 8.5rem; }
    /* The band is as narrow as the title here, so the Google Maps button takes
       a line of its own under the words rather than sitting on the last one,
       and the pin moves closer to the edge, clear of the name. */
    .qc-sheet__title { padding: 1rem 3rem 3rem 1rem; }
    .qc-sheet__hero { --qc-sheet-pin-inset: 3.5rem; }
    .qc-sheet__h { font-size: var(--qc-fs-2xl); }
    .qc-sheet__board,
    .qc-sheet__foot { padding-left: .75rem; padding-right: .75rem; }
}

/* ------------------------------------------------------------------ *
 * The row the sheet is showing, marked out there
 * ------------------------------------------------------------------ */
/* Both containers leave part of the page in view, and stepping through a list
   with the arrow keys is hard to follow when nothing moves behind the sheet. */
[data-work-sheet].is-current {
    box-shadow: 0 0 0 2px var(--qc-primary),
                0 0 0 5px color-mix(in srgb, var(--qc-primary) 20%, transparent);
    border-radius: var(--qc-radius-input);
}

@media (prefers-reduced-motion: reduce) {
    .qc-sheet .modal-dialog { transition: none; }
}

/* The machine hours at price, under the machines: a quiet line, a figure to
   read rather than a total of the job. */
.qc-sheet__machinecharge {
  margin: .5rem 0 0;
  font-size: var(--qc-fs-sm);
  color: var(--qc-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* The customer's signature under the note from the site: the drawing on its
   paper (white in both themes, like the report's pad), the name and the
   moment under it. */
.qc-sheet__sig { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 0; }
.qc-sheet__sigimg {
    display: block;
    width: min(100%, 14rem);
    padding: .35rem;
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-input);
    background: var(--qc-paper);
}
.qc-sheet__sigimg img { display: block; width: 100%; height: auto; }
.qc-sheet__sig figcaption { color: var(--qc-text-secondary); font-size: var(--qc-fs-sm); }

/* The diary's tile: the two latest posts, one line each, and the way in. */
.qc-sheet__diary { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .45rem; }
.qc-sheet__diary li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: start; }
.qc-sheet__diary p {
    margin: 0;
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qc-sheet__diary b { color: var(--qc-text-primary); font-weight: 600; }
.qc-sheet__more { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--qc-fs-sm); font-weight: 600; text-decoration: none; }