/* 購買と在庫。style.css・flow.css・fm.css の上に重ねる（接頭辞 pu-） */
.pu-sub { margin: 22px 0 8px; font-size: 15.5px; }
.pu-go { margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.pu-go a, .pu-panel a, .pu-mfb a, .pu-stated a { color: #1d4ed8; text-underline-offset: 2px; }
main.flow .fm-card { scroll-margin-top: 16px; }
main.flow .fm-card:target { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
.pu-card ul { margin: 6px 0 0; padding-left: 1.15em; display: grid; gap: 4px; font-size: 13px; color: var(--ink2); }

/* 切り替え */
.pu-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: var(--line2); margin-bottom: 10px; }
.pu-seg button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink2); border-radius: 11px; padding: 6px 14px; cursor: pointer; }
.pu-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }

/* 業務の流れ */
.pu-flow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.pu-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pu-stepbtn { appearance: none; width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.pu-stepbtn:hover { border-color: #94a3b8; }
.pu-stepbtn[aria-pressed="true"] { border-color: #0d9488; background: #f0fdfa; }
.pu-sn { width: 26px; height: 26px; border-radius: 50%; background: var(--line2); color: var(--ink2); font: 600 12.5px/26px var(--latin); text-align: center; display: inline-block; }
.pu-stepbtn[aria-pressed="true"] .pu-sn { background: #0d9488; color: #fff; }
.pu-st { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pu-st b { font-size: 14px; }
.pu-st small { font-size: 12px; color: var(--muted); }
.pu-st em { font-style: normal; font-size: 11px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 0 7px; }
.pu-panel { position: sticky; top: 12px; padding: 14px 16px; min-width: 0; }
.pu-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pu-panel h3 { margin: 6px 0 6px; font-size: 17px; }
.pu-panel > p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.pu-dl { margin: 0; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }
.pu-dl dt { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 2px; }
.pu-dl dd { margin: 0; color: var(--ink2); }
.pu-nav { display: flex; gap: 6px; margin-top: 12px; }
.pu-nav button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.pu-nav button[disabled] { color: #94a3b8; cursor: default; }
.pu-panel .fm-go { margin-top: 8px; }

/* 書類を 1 行ずつ読む */
.pu-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 6px; }
.pu-docbox { background: #fffef9; border: 1px solid #e7e2cf; border-radius: 12px; padding: 10px 0 12px; min-width: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.pu-path { margin: 0 14px 8px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pu-lines { font-family: var(--latin); font-size: 13px; line-height: 1.55; }
.pu-ln { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 14px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink); font: inherit; text-align: left; }
button.pu-ln { cursor: pointer; }
button.pu-ln:hover { background: #f4f1e4; }
.pu-ln[aria-pressed="true"] { background: #fef9c3; border-left-color: #ca8a04; }
.pu-ln.plain { color: var(--ink2); font-weight: 600; }
.pu-tx { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; flex: 1; }
.pu-tag { flex: none; min-width: 22px; height: 22px; border-radius: 50%; background: #e7e2cf; color: var(--ink); font: 600 12px/22px var(--sans); text-align: center; }
.pu-ln[aria-pressed="true"] .pu-tag { background: #ca8a04; color: #fff; }
.pu-no { width: 24px; height: 24px; border-radius: 50%; background: #ca8a04; color: #fff; font: 600 12.5px/24px var(--sans); text-align: center; }

/* 評価の方法の計算 */
.pu-val { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.pu-vin { padding: 12px 14px; min-width: 0; }
.pu-vhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.pu-vhead span { font-size: 12px; color: var(--muted); }
.pu-vrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pu-vrow { display: grid; grid-template-columns: 4.6em minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) 30px; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 9px; background: #f8fafc; }
.pu-vrow.in { background: #f0fdfa; }
.pu-vrow.out { background: #fff7ed; }
.pu-vrow.bad { outline: 2px solid #f87171; }
.pu-vk { font-size: 12px; font-weight: 700; color: var(--ink2); }
.pu-vrow input { width: 100%; min-width: 0; font: 600 13.5px var(--latin); color: var(--ink); background: var(--paper); border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 7px; }
.pu-vrow input:disabled { background: transparent; border-color: transparent; color: var(--muted); }
.pu-vdel { appearance: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); font: 600 14px/1 var(--latin); cursor: pointer; }
.pu-vdel:hover { border-color: #f87171; color: #b91c1c; }
.pu-vdel[disabled] { visibility: hidden; }
.pu-vlab { display: grid; grid-template-columns: 4.6em minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) 30px; gap: 6px; padding: 0 6px 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.pu-vadd { margin-top: 8px; }
.pu-mkt { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink2); }
.pu-mkt input { width: 10em; max-width: 100%; font: 600 14px var(--latin); color: var(--ink); background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px; }
.pu-vout { display: grid; gap: 12px; min-width: 0; }
.pu-vsum { padding: 12px 14px; }
.pu-vsum dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.pu-vsum dt { color: var(--muted); font-weight: 700; font-size: 12px; }
.pu-vsum dd { margin: 0; font-family: var(--latin); }
.pu-err { margin: 0; font-size: 13px; color: #7f1d1d; background: #fef2f2; border-radius: 8px; padding: 8px 10px; }
.pu-vcmp { padding: 12px 14px; display: grid; gap: 10px; }
.pu-meth { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.pu-meth:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pu-mh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pu-mh b { font-size: 14px; }
.pu-mh small { font-size: 12px; color: var(--muted); }
.pu-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 8px; background: #e2f6f3; color: #0b4f49; }
.pu-badge.law { background: #fef3c7; color: #92400e; }
.pu-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pu-nums div { background: var(--line2); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.pu-nums small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.pu-nums span { font: 600 14px var(--latin); overflow-wrap: anywhere; }
.pu-bar { height: 8px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.pu-bar i { display: block; height: 100%; background: #0d9488; border-radius: 999px; }
.pu-low { margin: 0; font-size: 12.5px; color: var(--ink2); }
.pu-cnote { margin: 0; font-size: 12px; color: var(--muted); }
.pu-vdet { margin-top: 12px; padding: 10px 14px; }
.pu-vdet summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink2); }
.pu-vdet .fm-wrap { margin-top: 8px; }
.pu-vdet h4 { margin: 12px 0 4px; font-size: 13px; }
.pu-vdet .fm-table td, .pu-vdet .fm-table th { white-space: nowrap; }
.pu-vdet .fm-table td.n, .pu-vdet .fm-table th.n { text-align: right; font-family: var(--latin); }

/* 発注点 */
.pu-rop { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; margin-top: 10px; }
.pu-rin { margin: 0; padding: 12px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pu-rin label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink2); min-width: 0; }
.pu-rin input { width: 100%; box-sizing: border-box; font: 600 15px var(--latin); color: var(--ink); background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 9px; padding: 6px 9px; }
.pu-rlv { grid-column: 1 / -1; display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink2); }
.pu-rout { display: grid; gap: 12px; min-width: 0; }
.pu-rres { padding: 12px 14px; display: grid; gap: 8px; }
.pu-rnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pu-rnums div { background: var(--line2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.pu-rnums small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pu-rnums b { font: 600 19px var(--latin); }
.pu-rnums span { display: block; font-size: 11.5px; color: var(--ink2); }
.pu-f { margin: 0; font: 500 12.5px/1.7 var(--latin); color: var(--ink2); overflow-wrap: anywhere; }
.pu-v { border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.pu-v b { display: block; font-size: 15px; }
.pu-v.go { background: #fff7ed; color: #7c2d12; }
.pu-v.wait { background: #f0fdf4; color: #14532d; }
.pu-chart { margin: 0; padding: 10px 12px; min-width: 0; }
.pu-chart figcaption { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.pu-chart svg { display: block; width: 100%; height: auto; }
.pu-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 11.5px; color: var(--ink2); }
.pu-legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }

/* 3 点照合の練習 */
.pu-mbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pu-score { font: 600 14px var(--latin); color: var(--ink2); }
.pu-mlist { display: grid; gap: 10px; }
.pu-mcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.pu-mcard h3 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-mcard h3 .pu-sn { width: 22px; height: 22px; font-size: 11.5px; line-height: 22px; }
.pu-mdocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pu-mdoc { border-radius: 10px; padding: 6px 10px; background: #f8fafc; border: 1px solid var(--line2); min-width: 0; }
.pu-mdoc small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.pu-mdoc span { font: 600 13px var(--latin); overflow-wrap: anywhere; }
.pu-mdoc.diff { background: #fffbeb; border-color: #fcd34d; }
.pu-mdoc.none { background: #fef2f2; border-color: #fecaca; }
.pu-mopts { display: grid; gap: 5px; }
.pu-mopt { appearance: none; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; cursor: pointer; }
.pu-mopt:hover { border-color: #94a3b8; }
.pu-mopt[aria-pressed="true"].ok { background: #f0fdf4; border-color: #22c55e; }
.pu-mopt[aria-pressed="true"].ng { background: #fef2f2; border-color: #f87171; }
.pu-mopt.right { border-color: #22c55e; }
.pu-mfb { margin: 0; font-size: 13px; border-radius: 10px; padding: 8px 11px; background: var(--line2); color: var(--ink2); }
.pu-mfb.ok { background: #f0fdf4; color: #14532d; }
.pu-mfb.ng { background: #fef2f2; color: #7f1d1d; }
.pu-mfb b { display: block; }
.pu-mfb .srcl { margin-top: 4px; }
.pu-mfb:empty { display: none; }

/* データの形 */
.pu-sm { padding: 14px 16px; }
.pu-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pu-state { appearance: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.pu-state:hover { border-color: #94a3b8; }
.pu-state[aria-pressed="true"] { background: #0d9488; border-color: #0d9488; color: #fff; }
.pu-arrow { color: #94a3b8; font-size: 13px; }
.pu-stated { margin-top: 12px; }
.pu-stated h3 { margin: 4px 0 4px; font-size: 16px; }
.pu-stated p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.pu-next { margin-top: 8px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pu-next span { font-size: 12px; font-weight: 700; color: var(--muted); }
.pu-next button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.pu-next em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.pu-tbl dl { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; }
.pu-tbl dt { font-family: var(--latin); font-weight: 600; font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.pu-tbl dd { margin: 0; color: var(--ink2); }

.pu-seg button:focus-visible, .pu-stepbtn:focus-visible, .pu-nav button:focus-visible, button.pu-ln:focus-visible, .pu-vrow input:focus-visible, .pu-vdel:focus-visible, .pu-mkt input:focus-visible, .pu-vdet summary:focus-visible, .pu-rin input:focus-visible, .pu-mopt:focus-visible, .pu-state:focus-visible, .pu-next button:focus-visible, .pu-go a:focus-visible, .pu-panel a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .pu-flow, .pu-read, .pu-val, .pu-rop { grid-template-columns: minmax(0, 1fr); }
  .pu-panel { position: static; }
}
@media (max-width: 760px) {
  .pu-seg { display: flex; }
  .pu-seg button { flex: 1 1 auto; }
  .pu-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pu-dl dd { margin-bottom: 6px; }
  .pu-vlab { display: none; }
  .pu-vrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; }
  .pu-vrow .pu-vk { grid-column: 1 / 3; }
  .pu-vrow .pu-vdel { grid-column: 3; grid-row: 1; }
  .pu-vrow input[data-f="date"] { grid-column: 1 / -1; }
  .pu-nums, .pu-rnums { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pu-rin { grid-template-columns: minmax(0, 1fr); }
  .pu-mdocs { grid-template-columns: minmax(0, 1fr); }
}