:root {
        --ink: #14161A;
        --paper: #FBFAF7;
        --rule: #D9D5CC;
        --muted: #6E6A61;
        --press: #2B50E0;
        --mark: #FFE24D;
        --warn: #C43B22;
        --good: #1D7A4C;
        --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        --sans: "Helvetica Neue", Helvetica, Arial, sans-serif
    }

    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font-family: var(--sans);
        font-size: 15px;
        line-height: 1.45
    }

    .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 22px 20px 80px
    }

    header {
        border-bottom: 3px solid var(--ink);
        padding-bottom: 10px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 14px;
        flex-wrap: wrap
    }

    h1 {
        font-size: 26px;
        letter-spacing: -.02em;
        margin: 0;
        font-weight: 800;
        text-transform: uppercase
    }

    .tabs {
        display: flex;
        flex-wrap: wrap
    }

    .tab {
        border: 1.5px solid var(--ink);
        background: #fff;
        padding: 8px 14px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-left: -1.5px
    }

    .tab.on {
        background: var(--ink);
        color: var(--paper)
    }

    .tab .badge {
        background: var(--warn);
        color: #fff;
        padding: 1px 5px;
        margin-left: 6px;
        font-size: 9px
    }

    .tab.on .badge {
        background: var(--mark);
        color: var(--ink)
    }

    .lbl {
        font-family: var(--mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .13em;
        color: var(--muted);
        display: block;
        margin-bottom: 5px
    }

    .field {
        margin-bottom: 14px
    }

    .hint {
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 5px;
        line-height: 1.35
    }

    select, input, textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1.5px solid var(--ink);
        background: #fff;
        font-family: var(--mono);
        font-size: 14px;
        color: var(--ink);
        border-radius: 0;
        appearance: none
    }

    textarea {
        line-height: 1.5;
        min-height: 260px;
        resize: vertical
    }

    /* dropdowns: white with a yellow outline and a chevron; type-in fields: white with an ink outline */
    select {
        border: 2px solid var(--mark);
        background-color: #fff;
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314161A' stroke-width='1.6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 28px;
        cursor: pointer
    }

    select:focus, input:focus, button:focus, textarea:focus {
        outline: 2.5px solid var(--press);
        outline-offset: 1px
    }

    .g2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .g4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px
    }

    @media (max-width: 700px) {
        .g2, .g4 {
            grid-template-columns: 1fr
        }
    }

    h2 {
        font-size: 12px;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .13em;
        margin: 28px 0 5px;
        padding-top: 15px;
        border-top: 1px solid var(--rule)
    }

    h2:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border: 0
    }

    .note {
        font-size: 13px;
        color: var(--muted);
        margin: 0 0 12px;
        max-width: 74ch
    }

    .cols {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        align-items: start
    }

    @media (max-width: 980px) {
        .cols {
            grid-template-columns: 1fr
        }
    }

    .item {
        border: 1.5px solid var(--rule);
        background: #fff;
        padding: 10px 11px;
        margin-bottom: 8px
    }

    .item.csg {
        border-color: var(--press);
        border-left-width: 4px
    }

    .item .r1 {
        display: grid;
        grid-template-columns: 1fr 1fr 30px;
        gap: 8px;
        align-items: center
    }

    .item .r2 {
        display: grid;
        grid-template-columns: 1fr 118px 200px;
        gap: 8px;
        align-items: center;
        margin-top: 7px
    }

    @media (max-width: 640px) {
        .item .r2 {
            grid-template-columns: 1fr
        }
    }

    .item .r3 {
        margin-top: 7px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
    }

    .item .r3 span {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted)
    }

    .item .r3 input {
        max-width: 140px
    }

    .sizes {
        display: flex;
        gap: 6px;
        margin-top: 9px;
        flex-wrap: wrap
    }

    .sz {
        text-align: center
    }

    .sz span {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .04em;
        color: var(--muted);
        margin-bottom: 3px
    }

    .sz input {
        width: 54px;
        padding: 5px 4px;
        border-width: 1px;
        text-align: center;
        font-size: 13px
    }

    .sz.has input {
        border-color: var(--ink);
        font-weight: 700
    }

    .x {
        border: 1.5px solid var(--rule);
        background: transparent;
        cursor: pointer;
        padding: 8px 0;
        font-family: var(--mono);
        font-size: 14px;
        color: var(--muted);
        line-height: 1;
        width: 100%
    }

    .x:hover {
        border-color: var(--warn);
        color: var(--warn)
    }

    .add {
        border: 1.5px dashed var(--ink);
        background: transparent;
        padding: 8px 15px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-top: 6px
    }

    .add:hover {
        background: var(--ink);
        color: var(--paper);
        border-style: solid
    }

    .count {
        font-family: var(--mono);
        font-size: 12px;
        margin-top: 11px;
        padding-top: 9px;
        border-top: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px
    }

    .loc {
        border: 1.5px solid var(--rule);
        padding: 9px 11px;
        margin-bottom: 6px;
        background: #fff
    }

    .loc.on {
        border-color: var(--ink)
    }

    .loc .hdr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px
    }

    .loc .nm {
        font-family: var(--mono);
        font-size: 12px;
        text-transform: uppercase;
        cursor: pointer
    }

    .loc.off .nm {
        color: var(--muted)
    }

    .tick {
        width: 15px;
        height: 15px;
        border: 1.5px solid var(--ink);
        display: inline-block;
        margin-right: 8px;
        vertical-align: -3px;
        background: #fff
    }

    .loc.on .tick {
        background: var(--ink)
    }

    .opts {
        display: flex;
        gap: 14px;
        align-items: center;
        margin-top: 8px;
        flex-wrap: wrap
    }

    .loc.off .opts {
        display: none
    }

    .mini {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .mini span {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted)
    }

    .mini input {
        width: 80px;
        padding: 5px 7px;
        border-width: 1px;
        font-size: 13px
    }

    .fit {
        display:none;
        font-family: var(--mono);
        font-size: 10px;
        padding: 3px 7px;
        border: 1px solid var(--rule)
    }

    .fit.b {
        background: var(--mark);
        border-color: var(--ink)
    }

    .panel {
        position: sticky;
        top: 16px
    }

    .m {
        border: 1.5px solid var(--ink);
        padding: 14px 16px;
        margin-bottom: 10px;
        background: #fff
    }

    .m.best {
        border-width: 3px
    }

    /* the ask (Counter) is green; the floors (DTF, Screen) are yellow. The
       headline words carry the meaning on their own, so this survives print. */
    .m.ask {
        border-color: var(--good);
        background: #F1F8EE
    }

    .m.ask h3 {
        color: var(--good)
    }

    .m.ask .flag {
        background: var(--good);
        color: #fff;
        border-color: var(--good)
    }

    .m.low {
        border-color: var(--mark);
        background: #FFF9DC
    }

    .m.dim {
        opacity: .55
    }

    .m .top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px
    }

    .m h3 {
        margin: 0;
        font-size: 11px;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .1em
    }

    .flag {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .04em;
        text-transform: uppercase;
        background: var(--mark);
        border: 1px solid var(--ink);
        padding: 3px 7px;
        white-space: nowrap
    }

    .flag.bad {
        background: var(--warn);
        color: #fff;
        border-color: var(--warn)
    }

    .flag.off {
        background: transparent;
        color: var(--muted);
        border-color: var(--rule)
    }

    .m .p {
        font-family: var(--mono);
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.04em;
        margin: 6px 0 0
    }

    .m .u {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        margin-top: 3px
    }

    .m .ls {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        margin-top: 9px;
        border-top: 1px dashed var(--rule);
        padding-top: 8px
    }

    .m .ls div {
        display: flex;
        justify-content: space-between;
        padding: 1.5px 0;
        gap: 10px
    }

    .m .ls .em {
        color: var(--ink)
    }

    .m .ls .ok {
        color: var(--good);
        font-weight: 700
    }

    .m .ls .no {
        color: var(--warn);
        font-weight: 700
    }

    .m .ls select {
        width: auto;
        display: inline-block;
        padding: 2px 22px 2px 6px;
        font-size: 11px;
        margin-right: 6px;
        vertical-align: middle
    }

    .alert {
        font-size: 11.5px;
        color: var(--warn);
        margin-top: 8px;
        line-height: 1.35;
        font-weight: 600
    }

    .lev {
        border: 1.5px solid var(--ink);
        background: var(--mark);
        padding: 12px 14px;
        margin-bottom: 10px
    }

    .lev h3 {
        margin: 0 0 7px;
        font-size: 11px;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .1em
    }

    .lev div.l {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        font-family: var(--mono);
        font-size: 11.5px;
        padding: 2.5px 0
    }

    .logbar {
        border: 2px solid var(--ink);
        background: #fff;
        padding: 10px 12px;
        margin-bottom: 10px
    }

    .logbar .r1 {
        display: grid;
        grid-template-columns: 1fr 120px;
        gap: 8px;
        margin-bottom: 8px
    }

    .logbar .r2 {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center
    }

    .logbar .warnrow {
        color: var(--warn);
        font-weight: 700
    }

    button.act {
        padding: 10px 18px;
        border: 1.5px solid var(--ink);
        background: var(--ink);
        color: var(--paper);
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .1em;
        cursor: pointer;
        width: auto
    }

    button.act:hover {
        background: var(--press);
        border-color: var(--press)
    }

    button.act.ghost {
        background: transparent;
        color: var(--ink)
    }

    button.act.ghost:hover {
        background: var(--ink);
        color: var(--paper)
    }

    button.sm {
        padding: 5px 11px;
        font-size: 10px
    }

    button.win {
        background: var(--good);
        border-color: var(--good)
    }

    button.win:hover {
        background: #155e3a;
        border-color: #155e3a
    }

    button.lose {
        background: var(--warn);
        border-color: var(--warn)
    }

    button.lose:hover {
        background: #9c2d19;
        border-color: #9c2d19
    }

    table {
        border-collapse: collapse;
        width: 100%;
        font-family: var(--mono);
        font-size: 12.5px
    }

    th {
        text-align: right;
        font-size: 9.5px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 400;
        padding: 0 8px 6px 0;
        border-bottom: 1px solid var(--rule)
    }

    th:first-child, td:first-child {
        text-align: left
    }

    td {
        padding: 5px 8px 5px 0;
        border-bottom: 1px solid #EDEAE3;
        text-align: right
    }

    tfoot td {
        border-bottom: 0;
        border-top: 2px solid var(--ink);
        font-weight: 700;
        color: var(--ink)
    }

    table input {
        width: 100%;
        min-width: 60px;
        padding: 5px 7px;
        border: 1px solid var(--ink);
        background: #fff;
        font-family: var(--mono);
        font-size: 12.5px;
        text-align: right
    }

    table input.txt, table select {
        text-align: left
    }

    table select {
        padding: 4px 24px 4px 6px;
        border: 1.5px solid var(--mark);
        font-size: 12px;
        background-position: right 7px center
    }

    tr.sub td:first-child {
        padding-left: 18px;
        color: var(--muted)
    }

    tr.open td {
        background: #FFF9DC
    }

    .clsBox {
        border: 1.5px solid var(--rule);
        padding: 12px;
        margin-bottom: 10px;
        background: #fff
    }

    .clsBox .hd2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px
    }

    .clsBox .hd2 input {
        max-width: 240px;
        font-weight: 700
    }

    #aTurn input.txt {
        min-width: 170px
    }

    .bar {
        position: sticky;
        bottom: 0;
        background: var(--paper);
        border-top: 2px solid var(--ink);
        padding: 12px 0;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 24px
    }

    .msg {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted)
    }

    .scroll {
        overflow-x: auto
    }

    /* ---- contacts & requests ---- */
    .toolbar {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 14px
    }

    .toolbar input {
        width: auto;
        flex: 1 1 220px;
        max-width: 420px
    }

    .toolbar select {
        width: auto;
        flex: 0 0 auto
    }

    .g3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }

    @media (max-width: 700px) {
        .g3 {
            grid-template-columns: 1fr
        }
    }

    textarea.short {
        min-height: 90px
    }

    .msg.warnrow {
        color: var(--warn);
        font-weight: 700
    }

    .pill {
        display: inline-block;
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 2px 7px;
        border: 1px solid var(--ink);
        background: #fff;
        vertical-align: 1px
    }

    .pill.new, .pill.open {
        background: var(--mark)
    }

    .pill.quoted {
        background: #E3E9FF;
        border-color: var(--press)
    }

    .pill.won {
        background: var(--good);
        color: #fff;
        border-color: var(--good)
    }

    .pill.lost {
        background: var(--warn);
        color: #fff;
        border-color: var(--warn)
    }

    .pill.archived {
        color: var(--muted);
        border-color: var(--rule)
    }

    /* "the request behind it is archived" after a log, revise, won or lost */
    .archnote {
        color: var(--warn);
        font-weight: 700
    }

    .archnote button {
        margin-left: 4px
    }

    /* the line under an archived request's card header */
    .archived-note {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--warn);
        line-height: 1.4;
        margin: 0 0 12px
    }

    .card {
        border: 2px solid var(--ink);
        background: #fff;
        padding: 16px 18px;
        margin-bottom: 18px
    }

    .card .cardhd {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 10px
    }

    .card .big {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.01em
    }

    .card .btns {
        display: flex;
        gap: 8px;
        flex-wrap: wrap
    }

    .card .meta {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin: 10px 0 14px
    }

    @media (max-width: 700px) {
        .card .meta {
            grid-template-columns: 1fr 1fr
        }
    }

    .card .meta span {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 3px
    }

    .card .meta b {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 700
    }

    .card .meta select {
        padding: 4px 6px;
        font-size: 12px
    }

    .card h3 {
        font-size: 11px;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin: 18px 0 6px;
        padding-top: 10px;
        border-top: 1px solid var(--rule)
    }

    .card .notes {
        white-space: pre-wrap;
        font-size: 13px;
        color: var(--muted);
        margin: 0 0 6px
    }

    .verbatim {
        white-space: pre-wrap;
        overflow-wrap: break-word;
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.5;
        border: 1.5px solid var(--ink);
        background: var(--paper);
        padding: 12px 14px;
        max-height: 420px;
        overflow: auto
    }

    .found {
        border: 1.5px dashed var(--press);
        background: #fff;
        padding: 8px 12px;
        margin: -4px 0 14px;
        display: flex;
        gap: 6px 16px;
        flex-wrap: wrap;
        align-items: center;
        font-family: var(--mono);
        font-size: 12px
    }

    .found .k {
        color: var(--muted);
        font-size: 9px;
        letter-spacing: .11em;
        text-transform: uppercase;
        margin-right: 4px
    }

    .found .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

    .found button, .dupes button, .picked button {
        padding: 3px 8px;
        font-size: 9.5px
    }

    .pick {
        border: 1.5px solid var(--rule);
        background: #fff;
        padding: 12px;
        margin-bottom: 14px;
        position: relative
    }

    .pklist {
        position: absolute;
        left: 12px;
        right: 12px;
        z-index: 20;
        background: #fff;
        border: 1.5px solid var(--ink);
        max-height: 280px;
        overflow: auto
    }

    .pkrow {
        padding: 8px 10px;
        cursor: pointer;
        border-bottom: 1px solid var(--rule);
        font-size: 13.5px
    }

    .pkrow:hover {
        background: var(--mark)
    }

    .pkrow .sub {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted)
    }

    .pkrow.new {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

    .picked {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 8px 10px;
        border: 1.5px solid var(--ink);
        background: var(--paper)
    }

    .dupes {
        border: 1.5px solid var(--warn);
        background: #FCEEEB;
        padding: 8px 12px;
        margin: -4px 0 12px;
        font-size: 13px
    }

    .dupes div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        padding: 3px 0;
        flex-wrap: wrap
    }

    .thumb {
        width: 44px;
        height: 44px;
        object-fit: cover;
        display: block;
        border: 1px solid var(--rule);
        background: #fff
    }

    .ext {
        display: inline-block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .08em;
        border: 1px solid var(--rule);
        padding: 2px 5px;
        color: var(--muted)
    }

    .upl {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px
    }

    .upl input[type=file] {
        width: auto;
        flex: 1 1 260px;
        padding: 6px 8px;
        font-size: 12px
    }

    .upl select {
        width: auto
    }

    tr.row {
        cursor: pointer
    }

    tr.row:hover td {
        background: #FFF9DC
    }

    .ctx {
        border: 1.5px solid var(--press);
        background: #E3E9FF;
        padding: 6px 9px;
        margin-bottom: 8px;
        font-family: var(--mono);
        font-size: 11px;
        line-height: 1.4
    }

    .hide {
        display: none
    }

    #vLogin {
        position: fixed;
        inset: 0;
        background: var(--paper);
        z-index: 1000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 12vh
    }

    #vLogin.hide {
        display: none
    }

    #vLogin input {
        width: 260px
    }

    #offline {
        border: 1.5px solid var(--ink);
        background: #FFF9DC;
        padding: 8px 12px;
        margin-bottom: 14px;
        font-family: var(--mono);
        font-size: 12px
    }

    .lock {
        border: 2px solid var(--ink);
        padding: 24px;
        max-width: 360px;
        margin: 20px 0
    }

    #poDoc, #puDoc {
        background: #fff;
        border: 1.5px solid var(--ink);
        padding: 30px 32px;
        margin-top: 18px
    }

    #poDoc .ph, #puDoc .ph {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        border-bottom: 3px solid var(--ink);
        padding-bottom: 14px;
        margin-bottom: 18px;
        flex-wrap: wrap
    }

    #poDoc .ph h3, #puDoc .ph h3 {
        margin: 0;
        font-size: 22px;
        text-transform: uppercase;
        letter-spacing: -.01em
    }

    #poDoc .ph .sub, #puDoc .ph .sub {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px
    }

    #poDoc .meta, #puDoc .meta {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 20px
    }

    @media (max-width: 700px) {
        #poDoc .meta, #puDoc .meta {
            grid-template-columns: 1fr 1fr
        }
    }

    #poDoc .meta div span, #puDoc .meta div span {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 3px
    }

    #poDoc .meta div b, #puDoc .meta div b {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 700
    }

    #poDoc .tot, #puDoc .tot {
        margin-top: 16px;
        border-top: 3px solid var(--ink);
        padding-top: 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline
    }

    #poDoc .tot .k, #puDoc .tot .k {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .11em
    }

    #poDoc .tot .v, #puDoc .tot .v {
        font-family: var(--mono);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -.03em
    }

    #poDoc .terms, #puDoc .terms {
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 16px;
        line-height: 1.5
    }

    .stat {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 16px
    }

    @media (max-width: 700px) {
        .stat {
            grid-template-columns: 1fr 1fr
        }
    }

    .stat div {
        border: 1.5px solid var(--ink);
        background: #fff;
        padding: 12px
    }

    .stat span {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--muted)
    }

    .stat b {
        font-family: var(--mono);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -.03em
    }

    @media print {
        .noprint, header, .bar {
            display:none !important
        }

        body {
            background: #fff
        }

        .wrap {
            padding: 0;
            max-width:none
        }

        #poDoc, #puDoc {
            border: 0;
            padding: 0;
            margin: 0
        }

        /* Print under a document prints that one alone; the browser's own Print gives both, a page each */
        body.print-wo #puDoc, body.print-po #poDoc {
            display: none
        }

        #puDoc {
            page-break-before: always
        }
    }

    /* ---- customer share link (Quotes box on the Job File) and questions from the quote page ---- */
    .share .url {
        display: flex;
        gap: 8px;
        margin: 8px 0 12px
    }

    .share .url input {
        flex: 1;
        font-family: var(--mono);
        font-size: 12px
    }

    .share .meta input[type=date] {
        width: auto
    }

    .lk {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
        margin-left: 6px
    }

    .qmsg {
        border-left: 3px solid var(--mark);
        background: #fff;
        padding: 6px 10px;
        margin: 8px 0;
        white-space: pre-wrap
    }

    .qmsg .k {
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        margin-bottom: 3px
    }

    /* the Log: a quote number opens the quote on the Work Order page */
    a.qn {
        font-family: var(--mono);
        font-weight: 700;
        color: var(--ink)
    }

    /* an unanswered customer question, in the Log, the Requests list and the Job File */
    .pill.question {
        background: var(--mark);
        color: var(--ink);
        border-color: var(--ink)
    }

    .qmsg.open {
        background: #FFF9DC
    }

    #jobHead .card {
        margin-bottom: 14px
    }

    /* the Quotes box: the price terms lose their top rule when no logged quote sits above them */
    #poQuote.hide + #priceTerms h3 {
        margin-top: 0;
        padding-top: 0;
        border-top: 0
    }

    /* production block on the Job File, and mockups on the Job File and the printed work order */
    .subhd {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
        margin: 18px 0 4px
    }

    table.prod td:first-child {
        white-space: nowrap;
        color: var(--muted)
    }

    .mocks {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 8px 0 10px
    }

    .mocks img.mock {
        max-height: 160px;
        max-width: 240px;
        border: 1px solid var(--rule);
        background: #fff
    }

    .prodhd {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 14px;
        border-top: 1px solid var(--rule);
        padding-top: 8px
    }

    /* find a job from any tab: the search in the header and its results under it */
    .gsearch {
        position: relative;
        flex: 1 1 240px;
        max-width: 440px
    }

    .gsearch input {
        padding: 7px 10px;
        font-size: 12.5px
    }

    .gsearch .pklist {
        left: 0;
        right: 0;
        top: 100%;
        max-height: 360px
    }

    .gsearch .pkrow .pill {
        margin-left: 6px
    }

    /* the Log: the range, the report headings, the pager */
    .toolbar.rng .field {
        margin: 0
    }

    .toolbar.rng input[type=date] {
        flex: none;
        width: 170px
    }

    h3.rpt {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .1em;
        margin: 20px 0 6px
    }

    .pager {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px
    }

    /* the Inquiry box, edited in place: the contact picker under its meta line, the address box */
    #inqCard .pick {
        margin: 0 0 12px
    }

    .card .meta a.small {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-left: 6px
    }

    textarea.addr {
        min-height: 58px;
        line-height: 1.4
    }

    /* the rest of the in-store order form: seven fields per print position, the "other" text under its choice */
    table.prod input.txt {
        min-width: 120px
    }

    table.prod select {
        min-width: 104px
    }

    table.prod .other {
        margin-top: 4px
    }

    /* the customer-supplied policy, word for word, on the Job File and the printed Work Order */
    .verbatim.waiver {
        max-height: none;
        margin-bottom: 12px
    }

    #poDoc .waiver {
        font-family: var(--mono);
        font-size: 11px;
        line-height: 1.5;
        border: 1.5px solid var(--ink);
        padding: 10px 12px;
        margin: 8px 0 12px
    }

    /* the Purchase Order is internal: it shows CPG's rates and never goes to a customer */
    .note.internal {
        color: var(--warn);
        font-weight: 700
    }

    button.act.internal {
        background: var(--warn);
        border-color: var(--warn);
        color: #fff
    }

    button.act.internal:hover {
        background: #9c2d19;
        border-color: #9c2d19
    }

    .docwarn {
        border: 2px solid var(--warn);
        background: #FCEEEB;
        color: var(--warn);
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 8px 12px;
        margin-bottom: 16px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    @media print {
        .mocks img.mock {
            max-height: 200px
        }
    }