/* Where the customs module says what it does not do.

   Two things are styled here: the strip that stands above every customs screen, and the window
   that shows the checklist of one authorisation in two columns. Both are read by somebody who is
   deciding whether to do the next thing here or somewhere else, so they are quiet rather than
   alarming: this is a boundary and not a fault. */

.customs-boundary-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 14px;
    border: 1px solid var(--s-border-color, #ccd2d8);
    border-inline-start: 3px solid var(--s-primary-color, #0d6efd);
    border-radius: 4px;
    background: var(--s-panel-bg, #fff);
    color: var(--s-text-color, #23282c);
    font-size: 13px;
    line-height: 1.5;
}

.customs-boundary-banner > .fa {
    margin-top: 2px;
    color: var(--s-primary-color, #0d6efd);
}

.customs-boundary-words p {
    margin: 0;
}

.customs-boundary-words p + p {
    margin-top: 6px;
    color: var(--s-text-muted-color, #5b6570);
}

/* The whole window scrolls rather than each column on its own, so the two lists stay level with
   each other. The point of a checklist in two columns is the comparison, and a column that has
   scrolled away from the one beside it is two lists. */
.customs-boundary-dialog .modal-body {
    padding: 18px 20px 6px;
    max-height: 70vh;
    overflow-y: auto;
}

.customs-boundary-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.customs-boundary-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--s-text-muted-color, #5b6570);
}

/* Two columns side by side, because the point of the checklist is the comparison. On a narrow
   screen they stack, and then the left column is read first, which is the right order. */
.customs-boundary-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.customs-boundary-column {
    flex: 1 1 320px;
    min-width: 280px;
}

.customs-boundary-column h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--s-text-muted-color, #5b6570);
}

.customs-boundary-column ul {
    margin: 0;
    padding-inline-start: 18px;
}

.customs-boundary-column li {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.customs-boundary-does h4 {
    color: var(--s-success, #157347);
}

.customs-boundary-does-not h4 {
    color: var(--s-danger, #b02a37);
}

/* The sentence a placement shows when the status somebody picked is one this product carries and
   does not run, and when a consignment in temporary storage is counting down. */
.customs-boundary-note {
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid var(--s-border-color, #ccd2d8);
    border-inline-start: 3px solid var(--s-warning, #cc9a06);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.customs-boundary-note:empty {
    display: none;
}