/* ---------------------------------------------------------------
   Admin and installer styles.

   No web fonts and no build step: staff use this on cheap Android
   phones over patchy data, so the system stack loads instantly and
   never blocks a screen. Brand colours arrive as custom properties
   written by the Brand service, so a rebrand never touches this file.
   --------------------------------------------------------------- */

:root {
    --brand-primary: #00557A;
    --brand-accent:  #E87870;
    --brand-ink:     #0E2A3B;

    --ink:      #14211C;
    --ink-soft: #55655C;
    --ink-faint:#7C8B83;
    --paper:    #FFFFFF;
    --surface:  #F3F6F4;
    --line:     #DCE5E0;
    --danger:   #A32D22;

    --rail: 15rem;
    --gap:  1.5rem;

    --radius: 3px;

    box-sizing: border-box;
    padding-top:    env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -0.011em; }
p { margin: 0 0 0.75rem; }
a { color: var(--brand-primary); }

.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 50;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

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

.shell { display: flex; min-height: 100vh; }

.rail {
    flex: 0 0 var(--rail);
    background: var(--brand-ink);
    color: #DDE7E1;
    padding: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
}

.rail__brand {
    display: block;
    padding: 0 1.25rem 1.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.rail__list { list-style: none; margin: 0; padding: 0; flex: 1; }

.rail__link {
    display: block;
    padding: 0.5rem 1.25rem;
    color: #B9CBC2;
    text-decoration: none;
    font-size: 0.95rem;
}
.rail__link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.rail__link.is-here {
    color: #fff;
    background: rgba(255,255,255,0.07);
    font-weight: 500;
}

.rail__who { padding: 1rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1rem; }
.rail__name { display: block; color: #fff; font-size: 0.9rem; }

.main {
    flex: 1;
    min-width: 0;
    padding: 2rem var(--gap) 4rem;
    max-width: 66rem;
}

/* ---------- top bar (mobile) ---------- */

.topbar { display: none; }
.nav-toggle { display: none; }

/* ---------- page furniture ---------- */

.head { margin-bottom: 1.75rem; }
.head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.head__title { font-size: 1.5rem; }
.head__sub { color: var(--ink-soft); margin: 0.25rem 0 0; font-size: 0.95rem; }
.head__back { margin: 0 0 0.5rem; font-size: 0.9rem; }

.stack { margin-bottom: 2rem; }
.stack__title { font-size: 1.05rem; margin-bottom: 0.65rem; }
.stack__note { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0.75rem; }

.prose { max-width: 42rem; color: var(--ink-soft); }
.link { color: var(--brand-primary); }
.sub { display: block; color: var(--ink-faint); font-size: 0.85rem; }
/* A table cell may also be muted. Without this, display:block drops the cell
   out of the table's layout and its row border sits at the wrong height. */
td.sub, th.sub { display: table-cell; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty {
    background: var(--paper); border: 1px solid var(--line);
    padding: 2rem; text-align: center; color: var(--ink-soft);
}

/* ---------- flash ---------- */

.flash {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    background: #EAF4EE; color: #17402F;
    font-size: 0.95rem;
}
.flash--error { background: #FBEDEB; color: #7A2119; }

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

.table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); }
.table th, .table td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; background: var(--surface); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tr.is-off { color: var(--ink-faint); }
.row-actions { text-align: right; white-space: nowrap; }

.tag {
    display: inline-block; margin-top: 0.2rem;
    font-size: 0.75rem; color: var(--danger);
    border: 1px solid currentColor; padding: 0 0.35rem;
}

.pager { display: flex; gap: 0.35rem; margin-top: 1rem; }
.pager__link { padding: 0.3rem 0.6rem; border: 1px solid var(--line); background: var(--paper); text-decoration: none; }
.pager__link.is-here { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* ---------- forms ---------- */

.form { max-width: 26rem; }
.form--wide { max-width: 34rem; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.3rem; }
.field__opt { font-weight: 400; color: var(--ink-faint); }
.field__hint { font-size: 0.83rem; color: var(--ink-soft); margin: 0.3rem 0 0; }
.field__error { font-size: 0.85rem; color: var(--danger); margin: 0.3rem 0 0; }
.field--inline { display: flex; align-items: center; gap: 0.75rem; }
.field--inline label { margin: 0; min-width: 5rem; }
.field--inline .field__hint { margin: 0; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=search], select, textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid #C3D0C9;
    border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); outline-offset: 1px; }
input[type=color] { width: 3rem; height: 2rem; padding: 2px; border: 1px solid #C3D0C9; background: var(--paper); }

.filters { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filters input[type=search] { flex: 1 1 14rem; }
.filters select { flex: 0 0 11rem; }

.form__actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.5rem; }

.more summary { cursor: pointer; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.6rem; }

/* ---------- buttons ---------- */

.btn {
    display: inline-block;
    padding: 0.55rem 1rem;
    font: inherit;
    font-size: 0.93rem;
    line-height: 1.3;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn--primary { background: var(--brand-primary); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--quiet { background: var(--paper); color: var(--ink); border-color: #C3D0C9; }
.btn--quiet:hover { background: var(--surface); }
.btn--sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- centred panel (login, errors) ---------- */

.page-centred {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1.5rem;
}
.panel {
    background: var(--paper); border: 1px solid var(--line);
    padding: 2rem; width: 100%; max-width: 24rem;
}
.panel__brand { color: var(--ink-faint); font-size: 0.85rem; margin-bottom: 1.25rem; }
.panel__title { font-size: 1.35rem; }
.panel__lede { color: var(--ink-soft); font-size: 0.93rem; margin-bottom: 1.5rem; }

.notice { background: var(--paper); border: 1px solid var(--line); padding: 2.5rem; max-width: 30rem; }
.notice__code { color: var(--ink-faint); font-size: 0.85rem; margin-bottom: 0.5rem; }

/* ---------- installer ---------- */

.install { background: var(--surface); }
.install__wrap {
    max-width: 44rem; margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    display: grid; gap: 2rem;
}

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.steps__item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-faint); }
.steps__no {
    display: grid; place-items: center;
    width: 1.35rem; height: 1.35rem;
    border: 1px solid currentColor; border-radius: 50%;
    font-size: 0.75rem;
}
.steps__item--done { color: var(--brand-primary); }
.steps__item--done .steps__no { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.steps__item--now { color: var(--ink); font-weight: 500; }
.steps__item--now .steps__no { border-color: var(--ink); border-width: 2px; }

.install__panel { background: var(--paper); border: 1px solid var(--line); padding: 2rem; }
.install__title { font-size: 1.4rem; margin-bottom: 0.4rem; }
.install__lede { color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 38rem; }
.install__actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.5rem; }

.checks { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--line); }
.checks__item { display: flex; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.checks__mark {
    flex: 0 0 1.35rem; height: 1.35rem;
    display: grid; place-items: center;
    border-radius: 50%; font-size: 0.8rem; color: #fff;
}
.checks__item--ok .checks__mark { background: var(--brand-primary); }
.checks__item--no .checks__mark { background: var(--danger); }
.checks__body { display: flex; flex-direction: column; }
.checks__label { font-size: 0.95rem; }
.checks__detail { font-size: 0.83rem; color: var(--ink-faint); }
.checks__fix { font-size: 0.83rem; color: var(--danger); margin-top: 0.15rem; }

.note { background: var(--surface); border-radius: 8px; padding: 0.75rem 0.95rem; font-size: 0.9rem; }
.note--warn { background: #FBEDEB; color: #6E1F17; }

.codebox {
    background: #14211C; color: #D6E4DC;
    padding: 1rem; overflow-x: auto;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    max-height: 22rem;
}

.summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 0 0 1rem; font-size: 0.95rem; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; }
code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); padding: 0.1em 0.3em; }

/* ---------- small screens ---------- */

@media (max-width: 47rem) {
    .topbar {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.6rem 1rem;
        padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
        background: var(--brand-ink); color: #fff;
        position: sticky; top: 0; z-index: 20;
    }
    .topbar__brand { color: #fff; font-weight: 600; text-decoration: none; flex: 1; }
    .topbar__menu { display: grid; gap: 4px; padding: 0.4rem; cursor: pointer; }
    .topbar__menu span { display: block; width: 20px; height: 2px; background: #fff; }
    .topbar__out { margin: 0; }

    .shell { display: block; }

    .rail {
        display: none;
        padding-top: 0.5rem;
    }
    .nav-toggle:checked ~ .shell .rail { display: flex; }
    .rail__brand { display: none; }
    .rail__who { display: none; }

    .main { padding: 1.25rem 1rem 3rem; max-width: none; }

    .table, .table thead, .table tbody, .table tr, .table th, .table td { display: block; }
    .table thead { display: none; }
    .table tr { border-bottom: 1px solid var(--line); padding: 0.5rem 0; }
    .table td, .table th { border: 0; padding: 0.2rem 0.85rem; }
    .row-actions { text-align: left; padding-top: 0.5rem; }

    .install__wrap { padding: 1.5rem 1rem 3rem; }
    .install__panel { padding: 1.25rem; }
    .steps__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- media ---------- */

.mediagrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
}
.mediagrid__item { margin: 0; background: var(--paper); border: 1px solid var(--line); }
.mediagrid__item img { display: block; width: 100%; height: 8rem; object-fit: cover; }
.mediagrid__item figcaption {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; padding: 0.4rem 0.5rem;
}

.imgfield { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.imgfield__preview { display: block; width: 4.5rem; height: 4.5rem; background: var(--surface); border: 1px solid var(--line); }
.imgfield__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imgfield__buttons { display: flex; gap: 0.4rem; }

/* ---------- picker modal ---------- */

.picker { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; }
.picker[hidden] { display: none; }
.picker__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 24, 0.55); }
.picker__panel {
    position: relative;
    background: var(--paper);
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(38rem, calc(100vh - 3rem));
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
}
.picker__head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
.picker__title { font-size: 1.05rem; }
.picker__close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 0.3rem; }
.picker__upload { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.picker__upload input[type=file] { flex: 1 1 12rem; font-size: 0.9rem; }
.picker__status { font-size: 0.85rem; color: var(--ink-soft); }
.picker__grid {
    overflow-y: auto; padding: 1rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.6rem;
}
.picker__item { padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.picker__item img { display: block; width: 100%; height: 6rem; object-fit: cover; }
.picker__item:hover { border-color: var(--brand-primary); }
.picker__empty { grid-column: 1 / -1; color: var(--ink-soft); text-align: center; padding: 2rem 0; margin: 0; }

/* ---------- repeating rows ---------- */

.repeater td { vertical-align: middle; }
.repeater select { min-width: 12rem; }
.repeater input[type=number] { width: 5rem; }

.is-thin { color: var(--danger); font-weight: 500; }

.danger-zone { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 34rem; }

@media (max-width: 47rem) {
    .repeater, .repeater thead, .repeater tbody, .repeater tr, .repeater th, .repeater td { display: block; }
    .repeater thead { display: none; }
    .repeater__row { border: 1px solid var(--line); padding: 0.6rem; margin-bottom: 0.6rem; }
    .repeater select, .repeater input[type=number] { width: 100%; min-width: 0; }
    .picker__panel { width: 100vw; height: 100%; max-height: none; }
}

/* ---------------------------------------------------------------
   Customer-facing pages.

   Deliberately quieter than the admin: one column, generous measure,
   and no sidebar. The people using this are often on a phone, at
   night, in another country.
   --------------------------------------------------------------- */

.site { background: var(--paper); }

.sitebar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 1.25rem;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.linkbutton {
    background: none; border: 0; padding: 0; font: inherit;
    color: var(--brand-primary); cursor: pointer; text-decoration: underline;
}

.site__main { padding: 2rem 1.25rem 4rem; }
.narrow { max-width: 34rem; margin: 0 auto; }

.page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page__title { font-size: 1.6rem; margin-bottom: 0.3rem; }
.page__subtitle { font-size: 1.05rem; margin: 2rem 0 0.75rem; }
.page__lede { color: var(--ink-soft); margin: 0; }
.page__back { font-size: 0.9rem; margin-bottom: 0.75rem; }
.page__foot { margin-top: 1.5rem; font-size: 0.93rem; color: var(--ink-soft); }

.sitefoot {
    border-top: 1px solid var(--line); padding: 1.5rem 1.25rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    color: var(--ink-faint); font-size: 0.88rem;
}

.hero { max-width: 36rem; margin: 3rem auto 0; }
.hero__title { font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 0.75rem; }
.hero__lede { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.75rem; }
.hero__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.cards__item { border: 1px solid var(--line); padding: 0.9rem 1rem; }
.cards__link { text-decoration: none; display: block; }
.cards__name { display: block; font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.cards__meta { display: block; color: var(--ink-soft); font-size: 0.88rem; margin: 0.15rem 0 0; }

.addresses { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.addresses__item { border: 1px solid var(--line); padding: 0.8rem 0.9rem; }
.addresses__line { margin: 0 0 0.3rem; }
.addresses__actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.addresses__actions form { margin: 0; }

.tag--quiet { color: var(--ink-faint); }

@media (max-width: 47rem) {
    .sitebar { flex-wrap: wrap; }
    .site__main { padding: 1.5rem 1rem 3rem; }
}

/* ---------- storefront ---------- */

.shelf { max-width: 60rem; margin: 3rem auto 0; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tile { border: 1px solid var(--line); background: var(--paper); }
.tile__link { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); height: 100%; }
.tile__img { display: block; aspect-ratio: 4 / 3; background: var(--surface); }
.tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__name { font-weight: 600; padding: 0.75rem 0.9rem 0; }
.tile__meta { color: var(--ink-soft); font-size: 0.88rem; padding: 0.15rem 0.9rem 0; }
.tile__price { padding: 0.35rem 0.9rem 0.9rem; font-variant-numeric: tabular-nums; color: var(--brand-primary); font-weight: 600; margin-top: auto; }

.how { max-width: 40rem; padding-left: 1.2rem; color: var(--ink-soft); }
.how li { margin-bottom: 0.6rem; }
.how strong { color: var(--ink); }

.chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.chip:hover { border-color: var(--brand-primary); }
.chip.is-here { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

.shelfgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.item { border: 1px solid var(--line); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; }

.product { max-width: 60rem; margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
.product__media img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.product__price { font-size: 1.6rem; font-weight: 600; color: var(--brand-primary); margin: 1rem 0 0.25rem; font-variant-numeric: tabular-nums; }
.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contents li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }

/* ---------- basket and checkout ---------- */

.narrow--wide { max-width: 42rem; }
/* Quantities in a list are the shared stepper now; see site.css 16c. */
.totals { margin-top: 1rem; max-width: 22rem; margin-left: auto; }

.choice {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.75rem 0.9rem; border: 1px solid var(--line); margin-bottom: 0.5rem; cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--brand-primary); background: var(--surface); }
.choice input { margin-top: 0.25rem; }
.choice .sub { margin-top: 0.1rem; }
.guestaddr { margin-top: 1rem; }
.checkout .page__subtitle { margin-top: 1.5rem; }

.confirm { padding-top: 1rem; }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }

.track { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

@media (max-width: 47rem) {
    .product { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; gap: 0; }

    .totals { max-width: none; }
}

/* ---------------------------------------------------------------
   Operations screens.

   Used standing up, one-handed, on a cheap phone in a market or at a
   gate. Big targets, one decision per row, nothing that needs a
   steady hand or a fast connection.
   --------------------------------------------------------------- */

.btn--big { padding: 0.85rem 1.2rem; font-size: 1rem; min-height: 3rem; }

.board { display: grid; grid-template-columns: repeat(4, minmax(13rem, 1fr)); gap: 1rem; overflow-x: auto; align-items: start; }
.board__col { background: var(--paper); border: 1px solid var(--line); padding: 0.75rem; min-width: 13rem; }
.board__title { font-size: 0.95rem; margin-bottom: 0.75rem; display: flex; justify-content: space-between; }
.board__count { color: var(--ink-faint); font-weight: 400; }
.board__empty { color: var(--ink-faint); font-size: 0.88rem; margin: 0; }

.ticket { border: 1px solid var(--line); padding: 0.65rem 0.7rem; margin-bottom: 0.6rem; background: var(--paper); display: grid; gap: 0.35rem; }
.ticket p { margin: 0; }
.ticket--held { background: #FDF3F1; }
.ticket__ref { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.ticket__who { font-weight: 600; }
.ticket__row { display: flex; gap: 0.35rem; }
.ticket__row select { flex: 1; padding: 0.35rem 0.4rem; font-size: 0.85rem; }
.ticket form { margin: 0; }

.worklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.worklist__link {
    display: block; padding: 1rem; background: var(--paper); border: 1px solid var(--line);
    text-decoration: none; color: var(--ink);
}
.worklist__main { display: block; font-weight: 600; font-size: 1.02rem; }

.progress { font-weight: 600; margin-bottom: 1rem; }

.picks { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.6rem; }
.pick { background: var(--paper); border: 1px solid var(--line); padding: 0.9rem; scroll-margin-top: 4rem; }
.pick__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-bottom: 0.6rem; }
.pick__qty { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pick__name { font-size: 1.05rem; font-weight: 500; }
.pick__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pick__actions form { margin: 0; }
.pick__actions .btn { width: 100%; }
.pick__replace { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.pick__state { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.pick--bought, .pick--substituted { background: #F1F8F4; }
.pick--bought .pick__state, .pick--substituted .pick__state { color: var(--brand-primary); font-weight: 600; }
.pick--unavailable { background: #F4F5F4; opacity: 0.75; }
.pick--asking { background: #FFF8E6; }

.packstep { background: var(--paper); border: 1px solid var(--line); padding: 1rem; }
.packstep form { margin: 0.6rem 0; }
.photoform { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.photoform input[type=file] { flex: 1 1 12rem; }

.proofs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.proofs img { display: block; width: 7rem; height: 7rem; object-fit: cover; border: 1px solid var(--line); }
.proofs figure { margin: 0; }
.proofs--large img { width: 100%; height: auto; max-width: 30rem; }
.proofs--large figure { flex: 1 1 18rem; }

.bigline { font-size: 1.15rem; font-weight: 600; }
.callrow { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.question { border: 1px solid #EAD9A9; background: #FFFBEF; border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.question__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.question__actions form { margin: 0; }

@media (max-width: 47rem) {
    .board { grid-template-columns: 1fr; overflow: visible; }
    .board__col { min-width: 0; }
    .pick__actions { grid-template-columns: 1fr; }
}

/* ---------- history and sharing ---------- */

.cards__item--row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cards__item--row form { margin: 0; flex-shrink: 0; }

.share { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.share input { font-size: 0.85rem; color: var(--ink-soft); background: var(--surface); }

/* ---------- prepared baskets and the recipient portal ---------- */

.inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.inline-form select, .inline-form input[type=text] { flex: 1 1 12rem; width: auto; }
.inline-form input[type=number] { width: 4.5rem; }

.cards__meta--flag { color: var(--brand-accent); font-weight: 600; }
.cards__thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }

.contents--big li { font-size: 1.05rem; padding: 0.7rem 0; }

.actions-block { display: grid; gap: 0.5rem; justify-items: start; }
.actions-block form { margin: 0; }
.panel__foot { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   Page builder: the editor (admin) and the widgets (site).
   Widgets reuse the storefront's own classes — .shelf, .tiles,
   .shelfgrid, .hero — so a designed page looks like the shop.
   --------------------------------------------------------------- */

.form--full { max-width: none; }

.we-palette { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.we-add { padding: 0.4rem 0.7rem; font: inherit; font-size: 0.85rem; background: var(--paper);
          border: 1px dashed var(--brand-primary); color: var(--brand-primary); cursor: pointer; }
.we-add:hover { background: var(--surface); }

.we-list { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.we-empty { color: var(--ink-faint); border: 1px dashed var(--line); padding: 2rem; text-align: center; margin: 0; }

.we-block { background: var(--paper); border: 1px solid var(--line); }
.we-head { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem;
           background: var(--surface); border-bottom: 1px solid var(--line); }
.we-type { font-weight: 600; font-size: 0.92rem; }
.we-tools { display: flex; gap: 0.25rem; }
.we-tool { width: 2rem; height: 2rem; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 1rem; line-height: 1; }
.we-tool--del:hover { color: var(--danger); border-color: var(--danger); }
.we-body { padding: 0.9rem; display: grid; gap: 0.75rem; }

.we-field { display: grid; gap: 0.25rem; }
.we-field--check { display: flex; align-items: center; gap: 0.4rem; }
.we-flabel { font-size: 0.88rem; font-weight: 500; }
.we-hint { font-size: 0.8rem; color: var(--ink-soft); }
.we-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }

.we-rep { border-left: 3px solid var(--line); padding-left: 0.75rem; display: grid; gap: 0.5rem; }
.we-rep-rows { display: grid; gap: 0.5rem; }
.we-rep-row { display: flex; gap: 0.5rem; align-items: flex-start; background: var(--surface); padding: 0.6rem; }
.we-rep-fields { flex: 1; display: grid; gap: 0.5rem; }
.we-rep-del { border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--ink-soft); padding: 0 0.3rem; }

.we-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.3rem; }
.we-tb { padding: 0.2rem 0.5rem; font-size: 0.8rem; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.we-rich-area { min-height: 6rem; padding: 0.6rem; border: 1px solid #C3D0C9; background: var(--paper); }
.we-rich-area:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }

/* widgets on the site */
.designed > .w:first-child { margin-top: 0; }

.w-proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.w-proof__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.6rem; }
.w-proof__item blockquote { margin: 0 0 0.3rem; font-size: 1.02rem; }

.prose-body h3 { margin: 1.25rem 0 0.5rem; }
.prose-body ul { padding-left: 1.2rem; }

.w-cta { max-width: 60rem; margin: 3rem auto 0; padding: 2rem; background: var(--brand-ink); color: #fff; text-align: center; }
.w-cta__title { font-size: 1.4rem; margin-bottom: 0.5rem; }
.w-cta p { color: #D6E4DC; }
.w-cta .btn--primary { background: #fff; color: var(--brand-ink); }

.w-faq { max-width: 42rem; border-top: 1px solid var(--line); }
.w-faq__item { border-bottom: 1px solid var(--line); padding: 0.75rem 0; }
.w-faq__item summary { cursor: pointer; font-weight: 500; }
.w-faq__item p { margin: 0.6rem 0 0; color: var(--ink-soft); }

.w-html { max-width: 60rem; margin: 2rem auto 0; }

/* designed menu and footer */
.navdrop { position: relative; }
.navdrop summary { cursor: pointer; color: var(--brand-primary); list-style: none; }
.navdrop summary::-webkit-details-marker { display: none; }
.navdrop__panel { position: absolute; top: 1.8rem; left: 0; z-index: 10; background: var(--paper); border: 1px solid var(--line);
                  padding: 0.4rem 0; min-width: 12rem; display: grid; }
.navdrop__panel a { padding: 0.35rem 0.9rem; }

.footgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 1rem; }
.footgrid__title { font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.footgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.footgrid p { margin: 0 0 0.25rem; }

@media (max-width: 47rem) {

    .navdrop__panel { position: static; border: 0; padding-left: 0.5rem; }
}

/* ---------------------------------------------------------------
   The live map.

   Tiles are plain <img> elements positioned in a layer that the
   script moves; pins are absolutely placed over them. No library,
   so nothing here depends on a stylesheet we do not ship.
   --------------------------------------------------------------- */

.livemap {
    position: relative;
    height: 30rem;
    border-radius: 10px;
    overflow: hidden;
    background: #E8EDE9;
    border: 1px solid #DCE5DE;
    margin-bottom: 1.25rem;
}
.livemap--small { height: 18rem; }
.livemap__fallback { padding: 2rem; text-align: center; color: #5B6B62; margin: 0; }
.livemap--ready .livemap__fallback { display: none; }

.livemap__canvas { position: absolute; inset: 0; cursor: grab; }
.livemap__canvas.is-dragging { cursor: grabbing; }
.livemap__tiles { position: absolute; inset: 0; }
.livemap__tiles img { position: absolute; width: 256px; height: 256px; user-select: none; }
.livemap__pins { position: absolute; inset: 0; pointer-events: none; }

.pin { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 0.2rem; }
.pin__dot {
    width: 0.95rem; height: 0.95rem; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.pin--rider .pin__dot { background: #00557A; }
.pin--stop  .pin__dot { background: #C23B22; }
.pin--stale .pin__dot { background: #8A9690; }
.pin__label {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.74rem;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.livemap__controls { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; gap: 0.3rem; }
.livemap__btn {
    width: 2rem; height: 2rem; border-radius: 6px; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.95);
    font-size: 1rem; line-height: 1; color: #0E2A3B;
}
.livemap__btn:hover { background: #fff; }

.livemap__credit {
    position: absolute; bottom: 0; right: 0; margin: 0;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.68rem; padding: 0.1rem 0.35rem; border-top-left-radius: 4px;
}
.livemap__status {
    position: absolute; left: 0.6rem; bottom: 0.6rem; margin: 0;
    background: rgba(255, 255, 255, 0.94); border-radius: 6px;
    padding: 0.3rem 0.6rem; font-size: 0.82rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------
   Money at the door, and money by hand.

   Shared by the rider's screen, the order screen in the control
   panel and the storefront, so it lives here rather than in either
   skin.
   --------------------------------------------------------------- */

/* A tick box with its sentence, for "I have the money" and the like. */
.check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.25rem 0 1rem; font-weight: 500; cursor: pointer; }
.check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: none; }

.note--ok { background: #EAF4EE; color: #17402F; }

/* An order nobody has been paid for yet, on the operations board. */
.tag--due { background: #FCEFC7; color: #6B4A00; font-weight: 600; }

.collect .bigline { font-size: 1.5rem; margin-bottom: 0.25rem; }

/* A position the device was not sure of: a ring, not a dot. */
.pin--rough .pin__dot { background: transparent; border: 3px solid #00557A; box-shadow: 0 0 0 10px rgba(0, 85, 122, 0.14); }

/* ---------------------------------------------------------------
   A person: a picture and a name

   Used wherever someone is shown, in the shop and in the control
   panel, so a person always looks like a person and never like a
   line of text that happens to be a link.
   --------------------------------------------------------------- */

.avatar {
    display: inline-grid; place-items: center; flex: none;
    border-radius: 50%; overflow: hidden; font-weight: 700; line-height: 1;
    background: #E5EDF2; color: #0E2A3B;
}
.avatar--sm { width: 2.1rem; height: 2.1rem; font-size: 0.8rem; }
.avatar--md { width: 2.6rem; height: 2.6rem; font-size: 0.95rem; }
.avatar--lg { width: 5.5rem; height: 5.5rem; font-size: 1.8rem; }
.avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__initials { display: block; }
.avatar--t0 { background: #DCEAE0; color: #0F4930; }
.avatar--t1 { background: #FEF0CC; color: #8A5E0B; }
.avatar--t2 { background: #DCE7F1; color: #2A4F70; }
.avatar--t3 { background: #F3E1DD; color: #7A3B30; }
.avatar--t4 { background: #E4E2F1; color: #443C72; }
.avatar--t5 { background: #DFEDEA; color: #1F5A52; }

.person {
    display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; max-width: 100%;
    color: inherit; text-decoration: none; vertical-align: middle; text-align: left;
}
.person__text { display: grid; min-width: 0; line-height: 1.25; }
.person__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__sub { font-size: 0.82rem; opacity: 0.7; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__tag {
    display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.4rem; border-radius: 999px;
    border: 1px solid currentColor; font-size: 0.68rem; font-weight: 600; opacity: 0.65; vertical-align: 0.1em;
}
.person--sm { gap: 0.5rem; }
.person--sm .person__name { font-size: 0.92rem; }
a.person--link:hover .person__name { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------------------------------------------------------------
   Delivery areas: a tint per region, the same everywhere — board,
   rider's round, the customer's area box — so Kampala always looks
   like Kampala.
   --------------------------------------------------------------- */

.zone--1 { --z: #1F6F54; --zb: #E6F2EC; }
.zone--2 { --z: #2458A6; --zb: #E8EFFA; }
.zone--3 { --z: #9A5B0B; --zb: #FBF0E1; }
.zone--4 { --z: #7A3E9D; --zb: #F3EAF8; }
.zone--5 { --z: #A3322A; --zb: #FBEAE8; }
.zone--6 { --z: #0E7C86; --zb: #E3F4F5; }
.zone--7 { --z: #5E6B12; --zb: #F1F4E2; }
.zone--8 { --z: #8A3A63; --zb: #F8E9F0; }

.zonetag {
    display: inline-flex; align-items: baseline; gap: 0.35rem;
    padding: 0.18rem 0.6rem; border-radius: 999px;
    background: var(--zb, #F1F3F2); color: var(--z, #33413A);
    font-size: 0.82rem; font-weight: 600; line-height: 1.35;
}
.zonetag span { font-weight: 400; opacity: 0.8; }
.zonehead__dot {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
    background: var(--z, #7C8B83); margin-right: 0.45rem; vertical-align: 0.05em; flex: none;
}

/* The area box: a list to type into. */
.areapick__box { position: relative; display: grid; }
.areapick__input { width: 100%; max-width: none; box-sizing: border-box; }
.areapick.is-chosen .areapick__input { font-weight: 600; }
.areapick.is-wrong .areapick__input { background: #FDF3F1; box-shadow: 0 0 0 3px rgba(163, 45, 34, 0.14); }
.areapick.is-wrong .areapick__note { color: #A32D22; font-weight: 600; }
.areapick__list {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
    max-height: min(22rem, 55vh); overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none;
    background: #fff; border: 1px solid #CBD6CF; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 33, 28, 0.16);
}
.areapick__region {
    position: sticky; top: -0.3rem; z-index: 1;
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0.2rem -0.3rem 0; padding: 0.45rem 0.85rem 0.3rem;
    background: #fff; color: var(--z); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.areapick__region::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--z); }
.areapick__opt {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name fee" "where fee";
    gap: 0 0.75rem; align-items: center;
    padding: 0.5rem 0.65rem; border-radius: 7px; cursor: pointer;
}
.areapick__opt:hover, .areapick__opt.is-active { background: var(--zb, #F1F3F2); }
.areapick__name { grid-area: name; font-weight: 600; color: #0E2A3B; }
.areapick__where { grid-area: where; font-size: 0.8rem; color: #6B7280; }
.areapick__fee { grid-area: fee; font-size: 0.88rem; font-weight: 600; color: var(--z); font-variant-numeric: tabular-nums; }
.areapick__empty { padding: 0.75rem 0.8rem; color: #4A5A52; }
.areapick__note { font-weight: 500; }
.areapick.is-chosen .areapick__note { color: var(--z, #1F6F54); }
.areapick__missing { margin-top: 0.15rem; }
/* Lists narrowed by a search, and the area box's list, really disappear. */
[data-filter-item][hidden], [data-filter-group][hidden], [data-filter-none][hidden], [data-filter][hidden],
.areapick__list[hidden], [data-areapick-select][hidden], [data-total-row][hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Invoices and receipts: a sheet of paper, on screen and printed.
   --------------------------------------------------------------- */

.doctools { display: flex; justify-content: space-between; gap: 0.75rem; max-width: 52rem; margin: 0 auto 1rem; }
.doc {
    max-width: 52rem; margin: 0 auto; padding: 2.75rem 3rem; background: #fff; color: #0E2A3B;
    border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 40, 28, 0.06), 0 14px 40px rgba(16, 40, 28, 0.08);
    font-size: 0.95rem; line-height: 1.5;
}
.doc__head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.doc__logo { max-height: 3rem; max-width: 12rem; margin-bottom: 0.6rem; display: block; }
.doc__shop { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.2rem; }
.doc__line { margin: 0; color: #55655C; }
.doc__id { text-align: right; }
.doc__title { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0; }
.doc__number { margin: 0.2rem 0 0.6rem; color: #55655C; font-variant-numeric: tabular-nums; }
.doc__stamp { display: inline-block; margin: 0; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; background: #F1F3F2; color: #55655C; }
.doc__stamp--paid { background: #E6F2EC; color: #1F6F54; }
.doc__stamp--issued { background: #FBF4E2; color: #5C4510; }
.doc__stamp--refunded, .doc__stamp--part_refunded { background: #EEF1FA; color: #2F4A86; }
.doc__stamp--void { background: #F4F4F4; color: #7C8B83; text-decoration: line-through; }
.doc__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 1.5rem; margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-radius: 10px; background: #F5F7F9; }
.doc__meta dt { font-size: 0.8rem; color: #7C8B83; margin-bottom: 0.15rem; }
.doc__meta dd { margin: 0; }
.doc__table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.doc__table th { text-align: left; font-size: 0.8rem; font-weight: 600; color: #7C8B83; padding: 0 0 0.55rem; border-bottom: 1px solid #DCE5E0; }
.doc__table td { padding: 0.65rem 0; border-bottom: 1px solid #EEF2F0; vertical-align: top; }
.doc__table .num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 1rem; white-space: nowrap; }
.doc__table--small { font-size: 0.9rem; }
.doc__totals { margin: 0 0 2rem auto; min-width: min(100%, 20rem); border-collapse: collapse; }
.doc__totals th { text-align: left; font-weight: 400; color: #55655C; padding: 0.3rem 2rem 0.3rem 0; }
.doc__totals td { text-align: right; padding: 0.3rem 0; font-variant-numeric: tabular-nums; }
.doc__grand th, .doc__grand td { font-weight: 700; color: #0E2A3B; font-size: 1.05rem; padding-top: 0.7rem; border-top: 1px solid #DCE4EA; }
.doc__aside th, .doc__aside td { font-size: 0.85rem; color: #7C8B83; }
.doc__due td { color: #00557A; }
.doc__sub { font-size: 1rem; margin: 0 0 0.6rem; }
.doc__paid { margin: 0 0 2rem; padding: 1.5rem; border-radius: 10px; background: #F5F7F9; }
.doc__amount { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.3rem; font-variant-numeric: tabular-nums; }
.doc__ref { color: #55655C; font-size: 0.88rem; }
.doc__foot { padding-top: 1.25rem; border-top: 1px solid #EEF2F0; color: #7C8B83; font-size: 0.88rem; }
.doc__foot p { margin: 0; }
@media (max-width: 40rem) {
    .doc { padding: 1.5rem 1.15rem; border-radius: 10px; }
    .doc__id { text-align: left; }
    .doc__table thead { display: none; }
}

.docstatus { display: inline-block; margin-left: 0.25rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #F1F3F2; color: #55655C; white-space: nowrap; }
.docstatus--paid { background: #E6F2EC; color: #1F6F54; }
.docstatus--issued { background: #FBF4E2; color: #5C4510; }
.docstatus--refunded, .docstatus--part_refunded { background: #EEF1FA; color: #2F4A86; }
.docstatus--void { color: #7C8B83; }

@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; }
    .utilitybar, .sitebar, .sitefoot, .promisestrip, .joinband, .appbar, .campaignbar, .rail, .sectiontabs, .fieldbar,
    .doctools, .flash, .debugnote, .page__head .crumbs, .head__actions, .skip, .shell > :not(.main) { display: none !important; }
    .shell, .main, .main__inner, .site__main { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .doc { box-shadow: none !important; padding: 0 !important; max-width: none; border-radius: 0; }
    .doc__meta, .doc__paid { background: #F5F7F9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { color: inherit !important; text-decoration: none !important; }
}