/* LDT planner: document scan (js/ldt-scan.js) and group notes in the legend.
   Uses the app's emx tokens only, so the light theme follows on its own.
   Bump ?v= in index.html by hand when this file changes. */

/* line icons, same stroke and drawing rules as the planner's own (emx-app.css) */
body .lx-scan { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16'/%3E%3Cpath d='M8 9.5h8M8 12.5h8M8 15.5h5'/%3E%3C/svg%3E"); }
body .lx-upload { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4.5M7.5 9 12 4.5 16.5 9'/%3E%3Cpath d='M4 14.5v4A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5v-4'/%3E%3C/svg%3E"); }

/* ───────── the menu under the tab ───────── */
/* the last tab in the bar: the menu hangs from its right edge, not its
   centre, so it never runs off the screen */
body .ldt-cargo-menu.ldt-scan-menu { width: 360px; left: auto; right: 0; transform: translateY(-8px); }
body .ldt-cargo-menu.ldt-scan-menu.open { transform: translateY(0); }
body .ldt-cargo-menu.ldt-scan-menu::before { left: auto; right: 48px; transform: rotate(45deg); }
body .ldt-scan-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--emx-text-2); }
body .ldt-scan-drop {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 18px 14px; border: 1px dashed var(--emx-line-2); border-radius: 14px;
    background: var(--emx-bg); color: var(--emx-text-2); text-align: center; cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
body .ldt-scan-drop .lx { width: 24px; height: 24px; margin-bottom: 4px; color: var(--emx-accent); }
body .ldt-scan-drop:hover, body .ldt-scan-drop:focus-visible, body .ldt-scan-drop.dragover {
    outline: none; border-color: var(--emx-accent-base); background: var(--emx-tint); color: var(--emx-text);
}
body .ldt-scan-drop-title { font-size: 14px; font-weight: 600; }
body .ldt-scan-drop-hint { font-size: 11.5px; color: var(--emx-text-3); }
body .ldt-scan-chips:not(:empty) { margin-top: 10px; }
body .ldt-scan-text {
    display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; resize: vertical;
    min-height: 64px; max-height: 220px;
    border: 1px solid var(--emx-line-2); border-radius: 12px; background: var(--emx-bg);
    font-family: var(--emx-font-body); font-size: 13.5px; line-height: 1.45; color: var(--emx-text);
}
body .ldt-scan-text:focus { outline: none; border-color: var(--emx-accent-base); box-shadow: 0 0 0 3px var(--emx-tint-2); }
body .ldt-scan-text::placeholder { color: var(--emx-text-3); }
body .ldt-scan-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--emx-text-2); }
body .ldt-scan-msg.is-bad { color: var(--emx-bad); }
body .ldt-scan-menu #ldt-scan-run { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ───────── while reading ─────────
   The drop zone turns into a scanner: a sheet whose lines light up under a
   sweeping beam, inside the scan icon's corner brackets, with the step being
   worked on underneath (ldtScanSetBusy). The button shines, the inputs rest. */
body .ldt-scan-drop { position: relative; overflow: hidden; }
body .ldt-scan-live {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(120% 100% at 50% 0%, var(--emx-tint-2), transparent 70%), var(--emx-bg);
}
body .ldt-scan-menu.is-busy .ldt-scan-drop { border-style: solid; border-color: var(--emx-accent-base); cursor: progress; }
body .ldt-scan-menu.is-busy .ldt-scan-live { display: flex; animation: ldt-scan-in .35s var(--emx-ease, ease) both; }
body .ldt-scan-frame {
    position: relative; padding: 7px;
    --c: var(--emx-accent);
    background:
        linear-gradient(var(--c), var(--c)) top left / 10px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 2px 10px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 10px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 2px 10px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 10px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 2px 10px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 10px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 2px 10px no-repeat;
    animation: ldt-scan-breathe 2.4s ease-in-out infinite;
}
body .ldt-scan-sheet {
    position: relative; display: flex; flex-direction: column; gap: 5px; box-sizing: border-box;
    width: 44px; height: 54px; padding: 9px 7px; overflow: hidden;
    border: 1px solid var(--emx-line-2); border-radius: 5px; background: var(--emx-surface-2);
}
body .ldt-scan-sheet > span { display: block; height: 3px; border-radius: 2px; background: var(--emx-line-2); animation: ldt-scan-ink 2.4s ease-in-out infinite; }
body .ldt-scan-sheet > span:nth-child(1) { width: 65%; }
body .ldt-scan-sheet > span:nth-child(2) { width: 100%; animation-delay: .24s; }
body .ldt-scan-sheet > span:nth-child(3) { width: 85%; animation-delay: .48s; }
body .ldt-scan-sheet > span:nth-child(4) { width: 100%; animation-delay: .72s; }
body .ldt-scan-sheet > span:nth-child(5) { width: 50%; animation-delay: .96s; }
body .ldt-scan-beam {
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--emx-accent); box-shadow: 0 0 8px 2px var(--emx-accent);
    animation: ldt-scan-beam 2.4s ease-in-out infinite;
}
body .ldt-scan-beam::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 16px;
    background: linear-gradient(to top, var(--emx-tint-2), transparent);
}
body .ldt-scan-step { min-height: 1.3em; font-size: 12.5px; font-weight: 500; color: var(--emx-text); }
body .ldt-scan-step.is-new { animation: ldt-scan-step .4s ease both; }
body .ldt-scan-menu.is-busy .ldt-scan-text,
body .ldt-scan-menu.is-busy .ldt-scan-chips { opacity: .5; pointer-events: none; transition: opacity .2s; }
body .ldt-scan-menu.is-busy #ldt-scan-run { position: relative; overflow: hidden; opacity: 1; cursor: progress; }
body .ldt-scan-menu.is-busy #ldt-scan-run::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
    animation: ldt-scan-shine 1.6s ease-in-out infinite;
}
@keyframes ldt-scan-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ldt-scan-breathe { 50% { transform: scale(1.06); } }
@keyframes ldt-scan-beam { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translateY(52px); } 92% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes ldt-scan-ink { 0%, 12% { background: var(--emx-line-2); } 28%, 55% { background: var(--emx-accent); box-shadow: 0 0 5px var(--emx-accent); } 80%, 100% { background: var(--emx-line-2); } }
@keyframes ldt-scan-step { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ldt-scan-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    body .ldt-scan-frame, body .ldt-scan-sheet > span, body .ldt-scan-beam, body .ldt-scan-step.is-new,
    body .ldt-scan-menu.is-busy .ldt-scan-live, body .ldt-scan-menu.is-busy #ldt-scan-run::after { animation: none; }
    body .ldt-scan-beam { display: none; }
}

/* ───────── review window ───────── */
body .ldt-dialog.ldt-scan-dialog { width: min(900px, 100%); }
body .ldt-scan-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
body .ldt-scan-head .ldt-dialog-note { flex: 1 1 320px; }
body .ldt-scan-conf {
    flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--emx-line-2); color: var(--emx-text-2);
}
body .ldt-scan-conf.is-high { color: var(--emx-good); border-color: rgba(52, 211, 153, .35); }
body .ldt-scan-conf.is-medium { color: var(--emx-warn); border-color: rgba(232, 163, 61, .4); }
body .ldt-scan-conf.is-low { color: var(--emx-bad); border-color: rgba(248, 113, 113, .4); }
body .ldt-scan-warnings {
    display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; list-style: none;
    border: 1px solid rgba(232, 163, 61, .35); border-radius: 12px; background: rgba(232, 163, 61, .07);
}
body .ldt-scan-warnings li { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--emx-text); }
body .ldt-scan-warnings .lx { width: 15px; height: 15px; margin-top: 2px; color: var(--emx-warn); }

body .ldt-scan-list {
    display: flex; flex-direction: column; gap: 10px;
    max-height: min(56vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
}
body .ldt-scan-card {
    display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
    border: 1px solid var(--emx-line); border-radius: 14px; background: var(--emx-bg);
}
body .ldt-scan-card.has-error { border-color: rgba(248, 113, 113, .45); }
body .ldt-scan-card-head { display: flex; align-items: center; gap: 10px; }
body .ldt-scan-idx {
    display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px;
    background: var(--emx-tint-2); color: var(--emx-accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body .ldt-scan-card input[type="text"], body .ldt-scan-card input[type="number"], body .ldt-scan-kind {
    min-height: 40px; padding: 0 11px; box-sizing: border-box;
    border: 1px solid var(--emx-line-2); border-radius: 10px; background: var(--emx-surface);
    font: inherit; font-size: 14px; color: var(--emx-text);
    transition: border-color .2s, box-shadow .2s;
}
body .ldt-scan-card input:focus, body .ldt-scan-kind:focus { outline: none; border-color: var(--emx-accent-base); box-shadow: 0 0 0 3px var(--emx-tint-2); }
body .ldt-scan-name { flex: 1; min-width: 0; font-weight: 600 !important; }
body .ldt-scan-kind { flex: 0 0 170px; cursor: pointer; }
body .ldt-scan-remove {
    display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px;
    border: 1px solid transparent; border-radius: 10px; background: none; color: var(--emx-text-3); cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}
body .ldt-scan-remove .lx { width: 14px; height: 14px; }
body .ldt-scan-remove:hover { color: var(--emx-bad); border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .06); }
body .ldt-scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
body .ldt-scan-card .ldt-dialog-field > span { font-size: 10.5px; }
body .ldt-scan-card .ldt-dialog-field input { min-height: 40px; }
/* orange: the AI took it from a standard; red: still missing */
body .ldt-scan-card input.is-assumed { border-color: rgba(232, 163, 61, .75); background: rgba(232, 163, 61, .08); }
body .ldt-scan-card input.is-bad { border-color: rgba(248, 113, 113, .7); box-shadow: 0 0 0 3px rgba(248, 113, 113, .12); }
body .ldt-scan-card input.is-bad::placeholder { color: var(--emx-bad); opacity: .8; }
body .ldt-scan-extras { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
body .ldt-scan-top-field { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--emx-text-2); }
body .ldt-scan-top-field input { width: 120px; }
body .ldt-scan-top-field input:disabled { opacity: .45; }
body .ldt-scan-err { margin: 0; font-size: 12.5px; color: var(--emx-bad); }

body .ldt-scan-dialog .ldt-dialog-actions { row-gap: 8px; }
body .ldt-scan-summary { font-size: 14px; font-weight: 600; color: var(--emx-text); font-variant-numeric: tabular-nums; }
body .ldt-scan-check { flex-basis: 100%; font-size: 12.5px; line-height: 1.45; color: var(--emx-warn); text-align: right; }
body .ldt-scan-check.is-bad { color: var(--emx-bad); }
body .ldt-scan-dialog .ldt-dialog-btn.is-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* ───────── legend: the group's note under its sizes ───────── */
body .ldt-lg-note {
    margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--emx-text-2);
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* phones: with the scan tab four cargo tabs no longer fit one row (and the
   last one ran off the screen), so they wrap, and every cargo form hangs
   from the whole bar instead of its own tab, so none runs off the screen */
@media (max-width: 600px) {
    body .ldt-fs-header .ldt-cargo-bar { flex-wrap: wrap; justify-content: center; }
    body .ldt-fs-header .ldt-cargo-item { position: static; }
    body .ldt-fs-header .ldt-cargo-menu,
    body .ldt-fs-header .ldt-cargo-menu.ldt-scan-menu { left: 0; right: 0; width: auto; transform: translateY(-8px); }
    body .ldt-fs-header .ldt-cargo-menu.open,
    body .ldt-fs-header .ldt-cargo-menu.ldt-scan-menu.open { transform: translateY(0); }
    body .ldt-fs-header .ldt-cargo-menu::before { display: none; }
}

@media (max-width: 768px) {
    body .ldt-scan-menu { width: min(360px, calc(100vw - 32px)); }
    body .ldt-scan-kind { flex-basis: 130px; }
    body .ldt-scan-check { text-align: left; }
    body .ldt-scan-list { max-height: 50vh; }
}