/* 注文書PDFの取り込みの体験版。色は common/base.css のトークンだけを使う（Excel の見本色を再現する表の見出しだけ例外） */
.op { max-width: 1280px; margin: 0 auto; padding: 20px var(--gutter) 56px; }

/* 作業の流れ（1→2→3） */
.op-steps { display: flex; align-items: center; gap: 10px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; margin: 0 auto 22px; box-shadow: var(--shadow-s); }
.op-steps button { display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.op-steps button:disabled { cursor: default; opacity: .55; }
.op-steps button:not(:disabled):hover { background: var(--sunken); color: var(--ink); }
.op-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: 13px; }
.op-steps button[aria-current="step"] { background: var(--brand); color: #fff; }
.op-steps button[aria-current="step"] .n { background: var(--accent); color: #fff; }
.op-steps button.done .n { background: var(--ok-soft); color: var(--ok); }
.op-steps-line { width: 22px; height: 2px; background: var(--line-2); flex: none; }

.scr-head { max-width: 760px; margin-bottom: 18px; }
.scr-head h2 { font-size: 24px; font-weight: 800; line-height: 1.4; }
.scr-lead { margin-top: 6px; color: var(--ink-2); line-height: 1.85; }

/* 1. 注文書を選ぶ */
.pick-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pick-count { font-weight: 700; margin-right: auto; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 14px; }
.doc-card {
  position: relative; display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-m); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.doc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-s); }
.doc-card[aria-pressed="true"] { border-color: var(--brand-2); box-shadow: 0 0 0 2px var(--brand-soft); }
.doc-card .thumb { display: block; aspect-ratio: 4 / 3; background: var(--sunken); overflow: hidden; border-bottom: 1px solid var(--line); }
.doc-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doc-card[aria-pressed="false"] .thumb img { opacity: .45; filter: grayscale(.6); }
.doc-card .check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); border: 1.5px solid var(--line-2); }
.doc-card[aria-pressed="true"] .check { background: var(--brand); border-color: var(--brand); }
.doc-card .check svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.doc-card[aria-pressed="false"] .check svg { display: none; }
.doc-card .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px 11px; min-width: 0; }
.doc-card .kind { font-size: 11px; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card .ttl { font-size: 14px; font-weight: 700; line-height: 1.4; }
.doc-card .chips { margin-top: 3px; }
.doc-card .chips .chip { height: 21px; font-size: 11.5px; }
.doc-card .pt { display: inline-block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; padding: 2px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-deep); }
.doc-card .mbadge { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(16, 32, 42, .25); }
.doc-card .mbadge.m-ai { background: var(--accent); }
.doc-card .mbadge.m-none { background: var(--ink-3); }
.doc-card[data-m="ai"] .thumb { box-shadow: inset 0 -4px 0 var(--accent); }
.strip button[data-m="ai"]::after { content: "AI"; position: absolute; left: 3px; top: 3px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 15px; }
.lines .ln input.recalc { animation: recalc 1.4s ease-out; }
@keyframes recalc { from { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); } }
/* 表が横にはみ出すとき：「左右に動かせます」の合図と、切れている側の影 */
.scroll-hint { display: none; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); }
.scroll-hint:not([hidden]) { display: block; }
.table-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(23, 57, 74, .22), rgba(23, 57, 74, 0)) 0 0 / 12px 100% no-repeat scroll,
    linear-gradient(to left, rgba(23, 57, 74, .22), rgba(23, 57, 74, 0)) 100% 0 / 12px 100% no-repeat scroll;
  background-color: var(--surface);
}
.pick-foot {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px; margin: 20px calc(var(--gutter) * -1) 0; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: rgba(246, 244, 238, .94); backdrop-filter: blur(6px); border-top: 1px solid var(--line);
}
.pick-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; flex: 1; }
.btn-big { min-height: 50px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.btn-big-s { min-height: 50px; padding: 0 22px; font-size: 15px; border-radius: 12px; }

/* 取り込み中 */
.reading { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; background: rgba(22, 36, 44, .45); padding: 16px; }
.reading-card { width: min(360px, 100%); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-l); padding: 22px 24px 20px; text-align: center; }
.reading-thumb { position: relative; width: 120px; height: 90px; margin: 0 auto; border-radius: 8px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); }
.reading-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scan { position: absolute; left: 0; right: 0; height: 22px; background: linear-gradient(rgba(194, 106, 23, 0), rgba(194, 106, 23, .45), rgba(194, 106, 23, 0)); animation: scan 1s ease-in-out infinite alternate; }
@keyframes scan { from { top: -8px; } to { top: 76px; } }
.reading-title { margin-top: 14px; font-weight: 700; font-size: 16px; }
.reading-kind { margin-top: 2px; font-size: 12.5px; color: var(--accent-deep); font-weight: 600; min-height: 1.6em; }
.reading-bar { height: 6px; border-radius: 3px; background: var(--sunken); margin-top: 10px; overflow: hidden; }
.reading-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.reading-count { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.reading-note { margin-top: 8px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }

/* 2. 確かめて直す */
.strip-wrap { margin: 0 calc(var(--gutter) * -1) 16px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: thin; }
.strip { display: flex; gap: 8px; padding: 2px 0 8px; width: max-content; }
.strip button { position: relative; width: 62px; flex: none; border-radius: 8px; border: 2px solid transparent; padding: 0; background: var(--surface); box-shadow: var(--shadow-s); }
.strip button img { width: 100%; height: 50px; object-fit: cover; object-position: top; border-radius: 6px 6px 0 0; }
.strip button .sdot { display: block; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; border-radius: 0 0 6px 6px; background: var(--sunken); color: var(--ink-3); }
.strip button[aria-current="true"] { border-color: var(--accent); }
.strip .s-ok .sdot { background: var(--ok-soft); color: var(--ok); }
.strip .s-hold .sdot { background: var(--bad-soft); color: var(--bad); }

.review-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px; min-width: 0; box-shadow: var(--shadow-s); }
.img-panel { position: sticky; top: 12px; }
.img-wrap { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-m); height: min(620px, calc(100vh - 220px)); overflow: auto; display: flex; align-items: flex-start; justify-content: center; cursor: zoom-in; }
.img-wrap img { max-width: 100%; height: auto; }
.img-wrap.zoom { display: block; cursor: zoom-out; }
.img-wrap.zoom img { max-width: none; width: 170%; }
.pages { display: flex; gap: 6px; margin-top: 8px; }
.pages .btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.img-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.img-cap span:first-child { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.img-hint { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

.statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.doc-pos { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.st { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.st.ok { background: var(--ok-soft); color: var(--ok); }
.st.hold { background: var(--bad-soft); color: var(--bad); }
.st-note { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.method { font-size: 12.5px; line-height: 1.6; padding: 7px 10px; border-radius: 6px; background: var(--sunken); color: var(--ink-2); margin-bottom: 4px; }
.method.m-ai { background: var(--accent-soft); color: var(--accent-deep); }
.sec { font-size: 14.5px; font-weight: 800; margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; }
.sec::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--accent); }
.sec-hint { font-size: 12.5px; color: var(--ink-3); margin: -2px 0 8px; line-height: 1.6; }

.head-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.hi { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: center; min-height: 40px; }
.hi .hl { color: var(--ink-3); font-size: 12.5px; }
.hi .hv { min-width: 0; overflow-wrap: anywhere; }
.hi input { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); font-size: 14px; }
.hi.ng input { background: var(--bad-soft); border-color: var(--bad-line); }
.hi:nth-child(5) { grid-column: 1 / -1; }

/* 明細（PC は表のように、スマホは1行を1枚のカードに） */
.lines { display: grid; gap: 4px; }
.ln { display: grid; grid-template-columns: 26px 142px minmax(0, 1fr) 82px 88px 104px; gap: 6px; align-items: start; padding: 5px 6px; border-radius: 8px; border: 1px solid transparent; }
.ln.head { font-size: 11.5px; color: var(--ink-3); padding-top: 0; padding-bottom: 0; align-items: end; }
.ln.head .r { text-align: right; padding-right: 4px; }
.ln:not(.head) { background: var(--paper); }
.ln.low { background: var(--warn-soft); border-color: var(--warn-line); }
.ln.ng { background: var(--bad-soft); border-color: var(--bad-line); }
.ln-no { color: var(--ink-3); font-size: 12.5px; padding-top: 8px; text-align: center; }
.ln-name { font-size: 13px; line-height: 1.5; padding-top: 6px; overflow-wrap: anywhere; }
.ln input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); font-size: 13.5px; }
.ln input::placeholder { color: var(--ink-3); opacity: .8; }
.ln input.r { text-align: right; }
.ln-code { min-width: 0; }
.ln-sub { display: block; font-size: 11px; line-height: 1.4; color: var(--ink-3); margin-top: 2px; min-height: 0; overflow-wrap: anywhere; }
.ln-sub:empty { display: none; }
.cand { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent); }
.cand:hover { background: var(--accent); color: #fff; }
.ln-q { display: flex; align-items: center; gap: 3px; }
.ln-q small { font-size: 11px; color: var(--ink-3); flex: none; }
.ln-p, .ln-a { display: block; }
.empty-lines { padding: 14px; text-align: center; color: var(--ink-3); background: var(--paper); border-radius: 8px; font-size: 13.5px; }

/* 合計の照合 */
.chk { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.chk th, .chk td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.chk thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; text-align: left; }
.chk thead th.r, .chk td.r { text-align: right; }
.chk tbody th { text-align: left; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rs { display: inline-block; font-weight: 700; font-size: 12.5px; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.rs.ok { background: var(--ok-soft); color: var(--ok); }
.rs.ng { background: var(--bad-soft); color: var(--bad); }
.rs.none { background: var(--sunken); color: var(--ink-3); }

/* 確認すること */
.issues { list-style: none; display: grid; gap: 8px; }
.issues li { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); font-size: 13.5px; line-height: 1.6; }
.issues li.hold { background: var(--bad-soft); border-color: var(--bad-line); }
.issues li.note { background: var(--warn-soft); border-color: var(--warn-line); }
.issues li.done { background: var(--ok-soft); border-color: var(--line); opacity: .85; }
.issues li.info { color: var(--ink-3); }
.is-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.is-top b { font-weight: 700; }
.is-line { font-size: 12px; color: var(--ink-3); }
.is-msg { margin-top: 3px; }
.is-act { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.is-btn { margin-top: 7px; }
.legend { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.75; }
.actions {
  display: flex; gap: 8px; align-items: center; margin: 16px -14px -14px; padding: 12px 14px; border-top: 1px solid var(--line);
  background: var(--surface); border-radius: 0 0 var(--r-l) var(--r-l); position: sticky; bottom: 0; z-index: 4;
}
.actions .nav { display: flex; gap: 6px; }
.actions #btnToExport { margin-left: auto; }
.empty-msg { padding: 48px 20px; text-align: center; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-l); }

/* 3. まとめる */
.ex-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; box-shadow: var(--shadow-s); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { padding: 12px 14px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); }
.tile b { display: block; font-size: 26px; line-height: 1.3; font-weight: 800; }
.tile span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.tile.ok b { color: var(--ok); } .tile.warn b { color: var(--warn); } .tile.bad b { color: var(--bad); } .tile.none b { color: var(--ink-3); }
.recon { margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-size: 13.5px; font-weight: 600; }
.recon.ng { background: var(--bad-soft); color: var(--bad); }
.ex-warn { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; font-weight: 600; }
.ex-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ex-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.preview { margin-top: 24px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); }
.tabs button { padding: 9px 16px; font-size: 14px; font-weight: 700; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.tabs button:hover { color: var(--ink); background: var(--sunken); }
.tabs button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--accent); }
.table-wrap { margin-top: 6px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.table-wrap th { background: #1f4e78; color: #fff; font-weight: 700; text-align: left; padding: 7px 9px; white-space: nowrap; }
.table-wrap td { padding: 6px 9px; border-top: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.table-wrap td.wrap { white-space: normal; min-width: 220px; max-width: 360px; }
.table-wrap td.r { text-align: right; }
.table-wrap td.empty-cell { white-space: normal; text-align: center; color: var(--ink-3); padding: 28px; }
.table-wrap tr.h td { background: #fce4e4; }
.table-wrap tr.y td { background: #fff2cc; }
.table-wrap tr.g td { background: #ededed; }
.table-wrap tr.sum td { font-weight: 800; border-top: 2px solid var(--line-2); }

@media (max-width: 1100px) {
  .ln { grid-template-columns: 26px 128px minmax(0, 1fr) 72px 80px 94px; }
}
@media (max-width: 900px) {
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .img-panel { position: static; }
  .img-wrap { height: 300px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .op { padding-top: 14px; }
  .op-steps { gap: 2px; padding: 4px; width: 100%; justify-content: space-between; margin-bottom: 18px; }
  .op-steps button { flex-direction: column; gap: 2px; padding: 5px 4px; font-size: 11.5px; flex: 1; border-radius: 14px; }
  .op-steps-line { width: 10px; }
  .scr-head h2 { font-size: 20px; }
  .scr-lead { font-size: 14px; line-height: 1.8; }
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .doc-card .ttl { font-size: 13px; }
  .pick-foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .pick-note { font-size: 11.5px; }
  .btn-big, .btn-big-s { width: 100%; }
  /* まとめる：ダウンロードの2つのボタンを、数字のすぐ下（最初の画面）に置く。警告の文は、その下 */
  .ex-box { display: flex; flex-direction: column; padding: 14px; }
  .ex-box .tiles { order: 0; gap: 8px; }
  .ex-box .ex-btns { order: 1; margin-top: 12px; }
  .ex-box .recon { order: 2; } .ex-box .ex-warn { order: 3; }
  .ex-box #sheetsNote { order: 4; } .ex-box #csvNote { order: 5; }
  .tile { padding: 6px 10px; display: flex; align-items: baseline; gap: 8px; }
  .tile b { font-size: 20px; line-height: 1.2; white-space: nowrap; }
  .tile span { font-size: 12px; }
  .panel { padding: 12px; border-radius: var(--r-m); }
  .img-wrap { height: 260px; }
  .head-info { grid-template-columns: minmax(0, 1fr); }
  .hi:nth-child(5) { grid-column: auto; }
  .hi input { font-size: 16px; height: 40px; }
  /* 明細：1行を1枚のカードに */
  .ln.head { display: none; }
  .ln:not(.head) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "code qty" "price amount"; gap: 8px; padding: 10px;
  }
  .ln-no { display: none; }
  .ln-name { grid-area: name; padding-top: 0; font-weight: 700; }
  .ln-name::before { content: attr(data-no); display: inline-block; margin-right: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
  .ln-code { grid-area: code; }
  .ln-q { grid-area: qty; }
  .ln-p { grid-area: price; }
  .ln-a { grid-area: amount; }
  .ln-code::before, .ln-q::before, .ln-p::before, .ln-a::before { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }
  .ln-code::before { content: "品番"; }
  .ln-q, .ln-p, .ln-a { position: relative; }
  .ln-q { display: block; }
  .ln-q::before { content: "数量"; }
  .ln-p::before { content: "単価（円）"; }
  .ln-a::before { content: "金額（円）"; }
  .ln-q small { position: absolute; right: 10px; bottom: 10px; }
  .ln input { height: 42px; font-size: 16px; }
  .ln-q input { padding-right: 38px; }
  .actions { margin: 14px -12px -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 6px; border-radius: 0 0 var(--r-m) var(--r-m); }
  .actions .btn { padding: 0 8px; font-size: 13.5px; min-width: 0; }
  .actions .nav .btn { width: 36px; padding: 0; }
  .actions #btnNextHold { flex: 1; }
  .actions #btnToExport { margin-left: 0; flex: none; }
  .ex-box { padding: 14px; }
  .tile b { font-size: 22px; }
  .ex-btns .btn { width: 100%; }
  .tabs button { padding: 9px 10px; font-size: 13px; }
}

/* スマホ：押せる物は高さ44px以上 */
@media (max-width: 640px) {
  .op-pick .btn-s, #btnAllOn, #btnAllOff, #btnPrev, #btnNextDoc, #btnNextHold, #btnToExport, [data-resolve], .tabs button, #tabCsv, #tabIssues { min-height: 44px; }
  #btnPrev, #btnNextDoc { min-width: 44px; }
  main input, main select { min-height: 44px; }
}

.is-help { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.is-help.fixed { padding: 8px 10px; border-radius: 8px; background: var(--paper); border: 1px dashed var(--line-2); }
.recon.warn { background: var(--warn-soft); color: var(--warn); }