/* StartFill FFN Portal
 * ---------------------------------------------------------------------------
 * Everything is scoped under .sf-ffn and inherits the theme's typeface. The
 * page template this sits in (Hello Elementor, default template) supplies no
 * container at all, so the shell has to provide its own width and gutters —
 * without one, the form runs edge to edge on a 1800px screen.
 *
 * Colours are declared as custom properties on .sf-ffn so a site or a customer
 * skin can override them in one place instead of fighting selectors.
 * ------------------------------------------------------------------------ */

.sf-ffn {
    --sf-brand: #ff8c00;
    --sf-brand-ink: #b35f00;
    --sf-ink: #16191d;
    --sf-muted: #5b6470;
    --sf-line: #e3e7ec;
    --sf-line-strong: #c9d0d8;
    --sf-soft: #f7f8fa;
    --sf-good: #1b6b3a;
    --sf-good-soft: #eaf5ee;
    --sf-bad: #b3261e;
    --sf-bad-soft: #fdeeed;
    --sf-warn: #b26a00;
    --sf-warn-soft: #fff6e8;
    --sf-radius: 10px;
    --sf-radius-sm: 5px;

    color: var(--sf-ink);
    line-height: 1.6;
}

.sf-ffn *,
.sf-ffn *::before,
.sf-ffn *::after { box-sizing: border-box; }

/* Several boxes here are flex or grid, and a display rule beats the [hidden]
 * attribute. Without this, every "hidden" panel renders as an empty band. */
.sf-ffn [hidden] { display: none !important; }

.sf-ffn a:not(.sf-ffn-btn):not(.sf-ffn-download) {
    color: var(--sf-brand-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

.sf-ffn a:not(.sf-ffn-btn):not(.sf-ffn-download):hover { color: var(--sf-ink); }

.sf-ffn-shell {
    max-width: 58rem;
    margin: 0 auto;
    padding: 2.75rem 1.25rem 4rem;
}

/* The admin screen brings its own heading, width and padding. */
.sf-ffn-bare .sf-ffn-shell { max-width: none; padding: 0; }

/* ------------------------------------------------------------------ heading */

.sf-ffn-masthead { margin-bottom: 1.75rem; }

.sf-ffn-eyebrow {
    margin: 0 0 .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sf-brand-ink);
}

.sf-ffn-title {
    margin: 0 0 .6rem;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--sf-ink);
}

.sf-ffn-lede {
    margin: 0;
    max-width: 44rem;
    font-size: 1.0625rem;
    color: var(--sf-muted);
}

/* --------------------------------------------------------------- step rail */

.sf-ffn-rail {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.35rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.sf-ffn-rail-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--sf-muted);
}

.sf-ffn-rail-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--sf-line-strong);
    background: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

.sf-ffn-rail-step.is-current { color: var(--sf-ink); font-weight: 600; }
.sf-ffn-rail-step.is-current .sf-ffn-rail-n {
    border-color: var(--sf-brand);
    background: var(--sf-brand);
    color: #fff;
}

.sf-ffn-rail-step.is-done { color: var(--sf-good); }
.sf-ffn-rail-step.is-done .sf-ffn-rail-n {
    border-color: var(--sf-good);
    background: var(--sf-good);
    color: #fff;
}

/* --------------------------------------------------------------------- help */

.sf-ffn-help {
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: var(--sf-soft);
    margin-bottom: 1.25rem;
}

.sf-ffn-help-summary {
    cursor: pointer;
    padding: .85rem 1.1rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sf-ffn-help-summary::-webkit-details-marker { display: none; }

.sf-ffn-help-summary::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--sf-brand);
    border-bottom: 2px solid var(--sf-brand);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    flex: none;
}

.sf-ffn-help[open] .sf-ffn-help-summary::before { transform: rotate(45deg); }

.sf-ffn-help-body {
    padding: 0 1.1rem 1.1rem 1.1rem;
    font-size: .9375rem;
    color: var(--sf-muted);
}

.sf-ffn-help-steps { margin: 0 0 .85rem; padding-left: 1.3rem; }
.sf-ffn-help-steps li { margin-bottom: .4rem; }

.sf-ffn-help-warn {
    margin: 0 0 .75rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--sf-warn);
    border-radius: 0 var(--sf-radius-sm) var(--sf-radius-sm) 0;
    background: var(--sf-warn-soft);
    color: #6b4500;
}

.sf-ffn-help-note { margin: 0; }

/* --------------------------------------------------------------------- form */

.sf-ffn-card {
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(22, 25, 29, .04);
}

.sf-ffn-row { margin: 0 0 1.35rem; }
.sf-ffn-row:last-child { margin-bottom: 0; }

.sf-ffn-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .45rem;
    font-weight: 600;
}

.sf-ffn-pill,
.sf-ffn-opt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sf-muted);
    border: 1px solid var(--sf-line-strong);
    border-radius: 999px;
    padding: .05rem .5rem;
}

.sf-ffn-pill { color: var(--sf-brand-ink); border-color: #f4c98f; background: #fff6ea; }

.sf-ffn .sf-ffn-input {
    width: 100%;
    max-width: 32rem;
    padding: .6rem .7rem;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm);
    background: #fff;
    font: inherit;
    color: inherit;
}

.sf-ffn .sf-ffn-input:focus {
    outline: none;
    border-color: var(--sf-brand);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, .18);
}

.sf-ffn-hint {
    display: block;
    margin-top: .45rem;
    max-width: 44rem;
    font-size: .875rem;
    color: var(--sf-muted);
}

.sf-ffn-bound {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.35rem;
    padding: .55rem .8rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-soft);
    font-size: .9375rem;
    color: var(--sf-muted);
}

.sf-ffn-bound-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--sf-good);
    flex: none;
}

/* The sign-out sits at the far end of the "uploading into X" line, where the
 * account is named — the one place a wrong account is visible. margin-left:auto
 * pushes it right on a wide screen and it simply wraps underneath on a phone. */

.sf-ffn-signout {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .875rem;
}

.sf-ffn-signout-who { color: var(--sf-muted); }

.sf-ffn-notice-foot {
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--sf-line);
}

.sf-ffn-notice-foot .sf-ffn-signout { margin-left: 0; }

/* ---------------------------------------------------------------- dropzone */

.sf-ffn-drop { position: relative; }

.sf-ffn .sf-ffn-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.sf-ffn-drop-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-align: center;
    padding: 1.9rem 1.25rem;
    border: 2px dashed var(--sf-line-strong);
    border-radius: var(--sf-radius);
    background: var(--sf-soft);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.sf-ffn-drop-face:hover { border-color: var(--sf-brand); background: #fffaf3; }

.sf-ffn-file:focus-visible + .sf-ffn-drop-face,
.sf-ffn-drop.is-over .sf-ffn-drop-face {
    border-color: var(--sf-brand);
    background: #fff6ea;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, .18);
}

.sf-ffn-drop-icon {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: var(--sf-brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-ffn-drop-title { font-weight: 600; }
.sf-ffn-drop-meta { font-size: .8125rem; color: var(--sf-muted); }

.sf-ffn-chosen {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius);
    background: #fff;
}

.sf-ffn-chosen-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
    fill: none;
    stroke: var(--sf-good);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-ffn-chosen-text { min-width: 0; flex: 1 1 auto; }
.sf-ffn-chosen-name {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.sf-ffn-chosen-size { display: block; font-size: .8125rem; color: var(--sf-muted); }

.sf-ffn .sf-ffn-clear {
    flex: none;
    border: 0;
    background: none;
    padding: .2rem .1rem;
    font: inherit;
    font-size: .875rem;
    color: var(--sf-muted);
    text-decoration: underline;
    cursor: pointer;
}

.sf-ffn .sf-ffn-clear:hover { color: var(--sf-bad); }

/* --------------------------------------------------------- optional fields */

.sf-ffn-optional {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--sf-line);
}

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

.sf-ffn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 0;
}

.sf-ffn .sf-ffn-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    padding: .7rem 1.3rem;
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-brand);
    background: var(--sf-brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sf-ffn .sf-ffn-btn:hover { background: #ef8200; border-color: #ef8200; color: #fff; }

.sf-ffn .sf-ffn-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, .3);
}

.sf-ffn .sf-ffn-ghost {
    background: #fff;
    color: var(--sf-ink);
    border-color: var(--sf-line-strong);
}

.sf-ffn .sf-ffn-ghost:hover { background: var(--sf-soft); color: var(--sf-ink); border-color: var(--sf-line-strong); }

.sf-ffn .sf-ffn-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.sf-ffn-explain {
    margin: .7rem 0 0;
    font-size: .875rem;
    color: var(--sf-muted);
    max-width: 44rem;
}

/* --------------------------------------------------------- inline confirm */

.sf-ffn-confirm {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #f0c9a0;
    border-left: 4px solid var(--sf-brand);
    border-radius: var(--sf-radius);
    background: #fff6ea;
}

.sf-ffn-confirm-text { margin: 0 0 .8rem; font-weight: 600; }

.sf-ffn-confirm-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------------ status */

.sf-ffn-status {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.25rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--sf-line);
    border-left: 4px solid var(--sf-line-strong);
    border-radius: var(--sf-radius);
    background: var(--sf-soft);
    font-size: .9375rem;
}

.sf-ffn-status.is-busy { border-left-color: var(--sf-brand); }
.sf-ffn-status.is-warn { border-left-color: var(--sf-warn); background: var(--sf-warn-soft); }
.sf-ffn-status.is-error { border-left-color: var(--sf-bad); background: var(--sf-bad-soft); color: #7c1a15; }

.sf-ffn-status-text { flex: 1 1 auto; }
.sf-ffn-status-clock { display: block; margin-top: .2rem; font-size: .8125rem; color: var(--sf-muted); }

.sf-ffn-spin {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .18rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 140, 0, .25);
    border-top-color: var(--sf-brand);
    animation: sf-ffn-spin .8s linear infinite;
}

@keyframes sf-ffn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sf-ffn-spin { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------------ result */

.sf-ffn-result { margin-top: 1.5rem; }

.sf-ffn-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .4rem;
}

.sf-ffn-head-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.sf-ffn-head.is-good .sf-ffn-head-title { color: var(--sf-good); }
.sf-ffn-head.is-bad .sf-ffn-head-title { color: var(--sf-bad); }

.sf-ffn-tag {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    border: 1px solid var(--sf-line-strong);
    border-radius: 999px;
    padding: .1rem .6rem;
    color: var(--sf-muted);
    background: #fff;
}

.sf-ffn-file-ref { margin: 0 0 1rem; font-size: .875rem; color: var(--sf-muted); word-break: break-all; }

.sf-ffn-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.sf-ffn-stat {
    flex: 1 1 8rem;
    padding: .8rem 1rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: #fff;
}

.sf-ffn-stat-n {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sf-ffn-stat-l {
    display: block;
    margin-top: .1rem;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sf-muted);
}

.sf-ffn-stat.is-good { background: var(--sf-good-soft); border-color: #cbe5d5; }
.sf-ffn-stat.is-good .sf-ffn-stat-n { color: var(--sf-good); }
.sf-ffn-stat.is-bad { background: var(--sf-bad-soft); border-color: #f2c9c6; }
.sf-ffn-stat.is-bad .sf-ffn-stat-n { color: var(--sf-bad); }

.sf-ffn-cause,
.sf-ffn-detail { margin: 0 0 .9rem; }
.sf-ffn-detail { white-space: pre-wrap; }

.sf-ffn-next {
    margin: 0 0 1.1rem;
    padding: .8rem 1rem;
    border-radius: var(--sf-radius);
    background: var(--sf-soft);
    border: 1px solid var(--sf-line);
    font-size: .9375rem;
    color: var(--sf-muted);
}

.sf-ffn-table {
    width: 100%;
    border-collapse: collapse;
    margin: .9rem 0;
    font-size: .9375rem;
}

.sf-ffn-table th,
.sf-ffn-table td {
    text-align: left;
    padding: .5rem .55rem;
    border-bottom: 1px solid var(--sf-line);
    vertical-align: top;
}

.sf-ffn-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sf-muted);
    border-bottom-color: var(--sf-line-strong);
}

.sf-ffn-table tr.is-bad { color: var(--sf-bad); }
.sf-ffn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-ffn-mark { width: 1.6rem; font-weight: 700; }
.sf-ffn-note-cell { color: var(--sf-muted); font-size: .875rem; }

.sf-ffn-report { margin: 1rem 0; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.sf-ffn-report > summary {
    cursor: pointer;
    padding: .7rem 1rem;
    font-size: .9375rem;
    font-weight: 600;
    list-style: none;
}
.sf-ffn-report > summary::-webkit-details-marker { display: none; }
.sf-ffn-report > summary::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .55rem;
    border-right: 2px solid var(--sf-brand);
    border-bottom: 2px solid var(--sf-brand);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.sf-ffn-report[open] > summary::before { transform: rotate(45deg); }

.sf-ffn-pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    background: var(--sf-soft);
    padding: .9rem 1rem;
    border-top: 1px solid var(--sf-line);
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    font-size: .8125rem;
    line-height: 1.55;
    overflow-x: auto;
}

.sf-ffn-notes {
    margin: .9rem 0;
    padding: .8rem 1rem .8rem 2.1rem;
    border: 1px solid #f0dcb8;
    border-radius: var(--sf-radius);
    background: var(--sf-warn-soft);
    color: #6b4500;
    font-size: .9rem;
}

.sf-ffn-notes li { margin-bottom: .35rem; }
.sf-ffn-notes li:last-child { margin-bottom: 0; }

.sf-ffn-after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.1rem;
}

.sf-ffn .sf-ffn-download {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm);
    background: #fff;
    color: var(--sf-ink);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
}

.sf-ffn .sf-ffn-download:hover { border-color: var(--sf-brand); color: var(--sf-brand-ink); }

.sf-ffn-ref { margin: .9rem 0 0; color: var(--sf-muted); font-size: .8125rem; }

.sf-ffn-notice {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--sf-line);
    border-left: 4px solid var(--sf-brand);
    border-radius: var(--sf-radius);
    background: var(--sf-soft);
}


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

.sf-ffn-signin { max-width: 30rem; }

.sf-ffn-signin-title { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 700; }

.sf-ffn-signin-lede {
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    color: var(--sf-muted);
}

.sf-ffn-signin-error {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--sf-bad);
    border-radius: 0 var(--sf-radius-sm) var(--sf-radius-sm) 0;
    background: var(--sf-bad-soft);
    color: #7c1a15;
    font-size: .9375rem;
}

/* wp_login_form() markup, given the same shape as the rest of the page. */
.sf-ffn #sf-ffn-loginform p { margin: 0 0 1rem; }
.sf-ffn #sf-ffn-loginform label { display: block; font-weight: 600; margin-bottom: .35rem; }

.sf-ffn #sf-ffn-loginform input[type="text"],
.sf-ffn #sf-ffn-loginform input[type="email"],
.sf-ffn #sf-ffn-loginform input[type="password"] {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm);
    background: #fff;
    font: inherit;
    color: inherit;
}

.sf-ffn #sf-ffn-loginform input[type="text"]:focus,
.sf-ffn #sf-ffn-loginform input[type="email"]:focus,
.sf-ffn #sf-ffn-loginform input[type="password"]:focus {
    outline: none;
    border-color: var(--sf-brand);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, .18);
}

.sf-ffn #sf-ffn-loginform .login-remember label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    font-size: .9375rem;
    color: var(--sf-muted);
    margin: 0;
}

.sf-ffn #sf-ffn-loginform .login-remember input { margin: 0; }
.sf-ffn #sf-ffn-loginform .login-submit { margin-bottom: 0; }

.sf-ffn #sf-ffn-loginform input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    padding: .7rem 1.3rem;
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-brand);
    background: var(--sf-brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
}

.sf-ffn #sf-ffn-loginform input[type="submit"]:hover { background: #ef8200; border-color: #ef8200; }

.sf-ffn-signin-foot {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--sf-line);
    font-size: .875rem;
    color: var(--sf-muted);
}

.sf-ffn-signin-sep { margin: 0 .35rem; }

.sf-ffn-notice-action { margin: .9rem 0 0; }
.sf-ffn-notice p:first-child { margin-top: 0; }
.sf-ffn-notice p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 640px) {
    .sf-ffn-shell { padding: 1.75rem 1rem 3rem; }
    .sf-ffn-card { padding: 1.1rem; }
    .sf-ffn-actions { flex-direction: column; align-items: stretch; }
    .sf-ffn .sf-ffn-btn { width: 100%; }
    .sf-ffn-stat { flex: 1 1 5rem; padding: .7rem .75rem; }
    .sf-ffn-stat-n { font-size: 1.35rem; }
    .sf-ffn-stat-l { font-size: .6875rem; }
    /* The inbound result table drops its 4th column on a narrow screen. The
     * tracking table must not: its 4th column is the tracking number, which is
     * the entire reason that table is on the page. */
    .sf-ffn-table:not(.sf-ffn-trk-table) th:nth-child(4),
    .sf-ffn-table:not(.sf-ffn-trk-table) td:nth-child(4) { display: none; }
}

/* ---------------------------------------------------------------- tracking */

.sf-ffn-trk {
    margin: 2rem 0 0;
    padding: 1.5rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: var(--sf-soft);
}

.sf-ffn-trk-head { margin-bottom: 1.1rem; }

.sf-ffn-trk-title {
    margin: 0 0 .35rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

.sf-ffn-trk-lede {
    margin: 0;
    color: var(--sf-muted);
    font-size: .9375rem;
}

.sf-ffn-trk-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.sf-ffn-trk-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.sf-ffn-trk-label {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sf-muted);
}

/* Safari and iOS ignore width on a date input unless it is told not to size
 * itself from its own content, which is how one ends up twice the width of
 * the other. */
.sf-ffn input[type="date"].sf-ffn-input {
    width: auto;
    min-width: 10.5rem;
    -webkit-appearance: none;
    appearance: none;
}

.sf-ffn-trk-hint {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--sf-muted);
}

.sf-ffn-trk-status { margin-top: 1rem; font-size: .9375rem; }
.sf-ffn-trk-status.is-error { color: var(--sf-bad); }
.sf-ffn-trk-status.is-busy { color: var(--sf-muted); }

.sf-ffn-trk-out { margin-top: 1.25rem; }

.sf-ffn-trk-count { margin: 0 0 .35rem; font-weight: 600; }

.sf-ffn-trk-empty,
.sf-ffn-trk-amz {
    margin: .25rem 0 0;
    color: var(--sf-muted);
    font-size: .9375rem;
}

.sf-ffn-trk-warn {
    margin: .25rem 0 0;
    padding: .55rem .75rem;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-warn-soft);
    color: var(--sf-warn);
    font-size: .9375rem;
}

.sf-ffn-trk-files {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1rem 0 .25rem;
}

.sf-ffn-trk-table { margin-top: 1.1rem; background: #fff; }

.sf-ffn-trk-when { white-space: nowrap; }

/* Tracking numbers are long and must stay readable as one unbroken string —
 * a number that wraps mid-digit gets copied wrong. */
.sf-ffn-trk-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.sf-ffn-trk-link { font-variant-numeric: tabular-nums; }

.sf-ffn-trk-none { color: var(--sf-bad); font-size: .875rem; }

.sf-ffn-trk-help { margin-top: 1.25rem; }

/* ----------------------------------------------------------------- account */

.sf-ffn-acct {
    margin: 1.5rem 0 0;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
}

.sf-ffn-acct-summary {
    padding: .85rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .9375rem;
    list-style: none;
}

.sf-ffn-acct-summary::-webkit-details-marker { display: none; }

.sf-ffn-acct-summary::before {
    content: "+";
    display: inline-block;
    width: 1rem;
    color: var(--sf-muted);
    transition: transform .15s ease;
}

.sf-ffn-acct[open] .sf-ffn-acct-summary::before { transform: rotate(45deg); }

.sf-ffn-acct-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--sf-line); }

.sf-ffn-acct-lede {
    margin: .9rem 0 1rem;
    color: var(--sf-muted);
    font-size: .9375rem;
}

.sf-ffn-acct .sf-ffn-input { max-width: 22rem; }

.sf-ffn-pw-status { margin-top: .9rem; font-size: .9375rem; }
.sf-ffn-pw-status.is-error { color: var(--sf-bad); }
.sf-ffn-pw-status.is-warn { color: var(--sf-warn); }
.sf-ffn-pw-status.is-good { color: var(--sf-good); }
.sf-ffn-pw-status.is-busy { color: var(--sf-muted); }

@media (max-width: 640px) {
    .sf-ffn-trk { padding: 1.1rem; }
    .sf-ffn-trk-controls { align-items: stretch; flex-direction: column; }
    .sf-ffn-trk-field { width: 100%; }
    .sf-ffn input[type="date"].sf-ffn-input { width: 100%; }
    .sf-ffn-trk-files { flex-direction: column; }
    .sf-ffn-acct .sf-ffn-input { max-width: none; }
}