.delivery-page { min-width: 0; }
.delivery-placement-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 0 3px 17px; margin-top: -7px; color: #7b8ba1; font-size: 11px; line-height: 1.8; }
.delivery-placement-strip > span { flex: 1 1 240px; overflow-wrap: anywhere; }
.delivery-placement-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px; background: #f6f9fd; border-radius: 9px; margin: 19px 0; font-size: 12px; }
.delivery-placement-path dt { color: #8393a8; font-size: 11px; margin-bottom: 6px; }
.delivery-placement-path dd { margin: 0; color: #43678f; line-height: 1.8; overflow-wrap: anywhere; }
.delivery-placement { min-width: 0; }
.delivery-heading { margin: 2px 0 26px; }
.delivery-heading h1 { margin: 9px 0 10px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.7px; }
.delivery-heading > p { max-width: 820px; color: #79889c; font-size: 13px; line-height: 1.8; }
.delivery-page h2, .delivery-tutor h2 { font-size: 18px; line-height: 1.5; }
.delivery-page h3, .delivery-tutor h3 { font-size: 14px; line-height: 1.6; }
.delivery-toolbar { margin: 0 0 20px; border: 1px solid #dce8f5; border-radius: 13px; background: #f7faff; overflow: hidden; }
.delivery-toolbar-top, .delivery-toolbar-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 18px; }
.delivery-toolbar-top { border-bottom: 1px solid #e5edf6; }
.delivery-course-id { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #5c769c; overflow-wrap: anywhere; }
.delivery-device { display: inline-flex; padding: 3px; background: #e9eff7; border-radius: 8px; gap: 3px; }
.delivery-device button { padding: 7px 11px; border: 0; border-radius: 6px; color: #6a7e99; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.delivery-device button.active { color: #1666bc; background: #fff; box-shadow: 0 1px 4px #15365f12; font-weight: 700; }
.delivery-toolbar-bottom p { color: #71829a; font-size: 12px; line-height: 1.75; margin: 0; flex: 1 1 320px; }
.delivery-toolbar-bottom b { color: #335a87; }
.delivery-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.delivery-buttons .btn { min-height: 35px; padding: 8px 13px; font-size: 11px; }
.delivery-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 18px; }
.delivery-field { display: flex; flex-direction: column; min-width: 0; gap: 7px; margin: 14px 0 0; font-size: 12px; color: #526783; }
.delivery-form-grid .delivery-field { margin-top: 0; }
.delivery-field > span { font-weight: 600; line-height: 1.6; }
.delivery-field input, .delivery-field select, .delivery-field textarea { display: block; width: 100%; min-width: 0; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; color: #2e4562; font: inherit; font-size: 12px; line-height: 1.75; padding: 9px 11px; box-sizing: border-box; }
.delivery-field textarea { resize: vertical; min-height: 78px; }
.delivery-field :is(input, select, textarea):focus { outline: 2px solid #98bff3; outline-offset: 1px; border-color: #397fd4; }
.delivery-material-list { display: grid; gap: 17px; }
.delivery-material { border: 1px solid #e2eaf3; background: #fbfcfe; border-radius: 12px; padding: 20px; min-width: 0; }
.delivery-material h3 { margin-bottom: 4px; }
.delivery-material .delivery-form-grid { margin-top: 17px; }
.delivery-inline-note { font-size: 11px; line-height: 1.75; color: #8492a5; margin-top: 12px; }
.delivery-check { display: flex; align-items: flex-start; gap: 9px; width: 100%; border: 0; background: transparent; color: #657a94; text-align: left; padding: 10px 0; font: inherit; font-size: 12px; line-height: 1.7; cursor: pointer; }
.delivery-check > span:first-child { display: grid; place-items: center; width: 17px; height: 17px; min-width: 17px; border: 1px solid #cddaea; border-radius: 5px; margin-top: 2px; font-size: 11px; line-height: 1; color: #fff; background: #fff; }
.delivery-check.is-checked { color: #286ba9; }
.delivery-check.is-checked > span:first-child { background: #2f78cb; border-color: #2f78cb; }
.delivery-check:focus-visible, .delivery-device button:focus-visible, .delivery-upload-preview:focus-visible { outline: 2px solid #528ddd; outline-offset: 3px; }
.delivery-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.delivery-level { padding: 18px; border: 1px solid #e3ebf5; border-radius: 11px; background: #f8fafd; min-width: 0; }
.delivery-level h3 { color: #236bb9; }
.delivery-standard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 24px; }
.delivery-standard { min-width: 0; border: 1px solid #e1eaf4; border-radius: 11px; padding: 19px; }
.delivery-weight { color: #286bc0; font-size: 30px; font-weight: 750; }
.delivery-weight small { font-size: 13px; padding-left: 3px; }
.delivery-decisions, .delivery-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.delivery-decisions > *, .delivery-status-grid > * { min-width: 0; }
.delivery-decisions ul { padding-left: 18px; margin: 18px 0 0; color: #73849a; font-size: 12px; line-height: 1.9; }
.delivery-decisions li + li { margin-top: 9px; }
.delivery-status-grid h2 { font-size: 30px; margin: 13px 0 7px; color: #245d9c; }
.delivery-status-grid > section > p:not(.delivery-inline-note) { color: #74869e; font-size: 12px; line-height: 1.8; margin-bottom: 15px; }
.delivery-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.delivery-schedule > div { border-left: 2px solid #bbd2ee; padding: 3px 0 6px 14px; min-width: 0; }
.delivery-schedule time { color: #2b6aaf; font-size: 14px; font-weight: 700; }
.delivery-schedule p { color: #71839b; margin: 6px 0 9px; font-size: 12px; line-height: 1.6; }
.delivery-schedule .pill { white-space: normal; line-height: 1.7; }
.delivery-upload-box { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; padding: 17px; background: #f7faff; border-radius: 10px; margin-top: 18px; }
.delivery-upload-box .delivery-field { flex: 1 1 170px; margin: 0; }
.delivery-upload-box .btn { min-height: 40px; }
.delivery-upload-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.delivery-upload-groups > div { min-width: 0; }
.delivery-upload-groups h3 { margin-bottom: 9px; }
.delivery-upload-previews { display: grid; gap: 7px; }
.delivery-upload-preview { display: flex; gap: 9px; align-items: center; min-width: 0; width: 100%; padding: 8px; text-align: left; border: 1px solid #e2eaf3; border-radius: 8px; background: #fff; color: #617896; font: inherit; font-size: 11px; cursor: pointer; }
.delivery-upload-preview img { width: 32px; height: 39px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.delivery-upload-preview > span:last-child { overflow-wrap: anywhere; }
.delivery-check-stack { display: grid; gap: 2px; margin-top: 11px; }
.delivery-tutor-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7edf5; }
.delivery-tutor-progress > div { min-width: 0; }
.delivery-tutor-progress p { font-size: 11px; color: #7c8ba1; margin-bottom: 13px; line-height: 1.8; }
.delivery-manual { display: grid; gap: 20px; margin-top: 24px; }
.delivery-manual-step { border: 1px solid #e2eaf3; border-radius: 12px; overflow: hidden; min-width: 0; }
.delivery-manual-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 18px; background: #f8fafd; }
.delivery-manual-title > span { display: grid; place-items: center; width: 30px; height: 30px; background: #e5effc; border-radius: 8px; color: #3472b9; font-size: 16px; font-weight: 700; }
.delivery-manual-title > .delivery-check { width: auto; margin-left: auto; }
.delivery-manual-step dl { padding: 6px 18px 14px; margin: 0; }
.delivery-manual-step dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid #eef2f7; font-size: 12px; line-height: 1.85; }
.delivery-manual-step dl > div:last-child { border-bottom: 0; }
.delivery-manual-step dt { font-weight: 600; color: #57708e; }
.delivery-manual-step dd { color: #74859b; margin: 0; overflow-wrap: anywhere; }
.delivery-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.delivery-case { border: 1px solid #e1eaf4; border-radius: 11px; padding: 18px; min-width: 0; }
.delivery-case > .text-button { margin-top: 9px; }
.delivery-pre { font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; font-size: 13px; }
.delivery-page :is(p, h1, h2, h3), .delivery-tutor p { overflow-wrap: anywhere; }

/* The tutor can compare the original and manually verify text in one place. */
.delivery-tutor .delivery-upload-groups { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.delivery-tutor .delivery-upload-groups > [data-tutor-summary-kind] { padding-top: 17px; border-top: 1px solid var(--ui-border, #d9e2ec); }
.delivery-tutor .delivery-upload-groups > [data-tutor-summary-kind] h3 { font-size: 15px; color: var(--ui-ink, #182c43); }
.delivery-tutor [data-tutor-summary-kind] .delivery-upload-preview { display: flex; flex-direction: column; align-items: stretch; padding: 10px; font-size: 12px; border-color: var(--ui-border, #d9e2ec); border-radius: 6px; color: var(--ui-muted, #607287); }
.delivery-tutor [data-tutor-summary-kind] .delivery-upload-preview img { width: 100%; height: auto; max-height: 240px; object-fit: contain; border-radius: 3px; background: #f6f8fa; }
.delivery-summary-review { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; color: var(--ui-ink, #182c43); font-size: 13px; font-weight: 500; }
.delivery-summary-review textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 160px; resize: vertical; padding: 12px; font-family: inherit; font-size: 14px; line-height: 1.8; font-weight: 400; color: var(--ui-ink, #182c43); background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #d9e2ec); border-radius: 6px; outline: none; }
.delivery-summary-review textarea::placeholder { color: var(--ui-muted, #607287); opacity: 1; }
.delivery-summary-review textarea:focus { border-color: var(--ui-blue, #245b91); box-shadow: 0 0 0 3px #245b9110; }
.delivery-summary-review textarea:disabled { background: #f0f3f6; color: var(--ui-muted, #607287); opacity: 1; }
.delivery-summary-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.6; font-weight: 400; color: var(--ui-muted, #607287); }
.delivery-summary-review-foot b { font-weight: 600; font-variant-numeric: tabular-nums; }
.delivery-model-context { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 12px; font-size: 12px; color: var(--ui-muted, #607287); background: var(--ui-bg, #f4f6f8); border: 1px solid var(--ui-border, #d9e2ec); border-radius: 6px; }
.delivery-model-context > b { font-size: 13px; font-weight: 500; color: var(--ui-ink, #182c43); }
.delivery-model-context > span { color: var(--ui-blue, #245b91); }
.delivery-tutor .delivery-model-context p { margin: 4px 0 0; font-size: 13px; line-height: 1.75; color: var(--ui-muted, #607287); }
.delivery-tutor .delivery-tutor-progress { grid-template-columns: minmax(0, 1fr); }
.delivery-tutor .delivery-tutor-progress p { font-size: 12px; color: var(--ui-muted, #607287); }
@media (max-width: 1100px) {
  .delivery-upload-groups { grid-template-columns: 1fr; }
  .delivery-standard-grid, .delivery-levels { gap: 13px; }
}
@media (max-width: 680px) {
  .delivery-placement-path { grid-template-columns: minmax(0, 1fr); }
  .delivery-form-grid, .delivery-levels, .delivery-standard-grid, .delivery-decisions, .delivery-status-grid, .delivery-schedule, .delivery-tutor-progress, .delivery-case-grid { grid-template-columns: minmax(0, 1fr); }
  .delivery-material { padding: 15px; }
  .delivery-toolbar-top, .delivery-toolbar-bottom { padding: 12px; }
  .delivery-device { width: 100%; }
  .delivery-device button { flex: 1; }
  .delivery-buttons { width: 100%; justify-content: space-between; gap: 9px; }
  .delivery-manual-title { padding: 12px; }
  .delivery-manual-title > .delivery-check { margin-left: 0; width: 100%; }
  .delivery-manual-step dl { padding: 3px 12px 10px; }
  .delivery-manual-step dl > div { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  .delivery-upload-box .btn { width: 100%; justify-content: center; }
  .delivery-page .actions { align-items: stretch; flex-direction: column; }
  .delivery-page .actions > .btn { justify-content: center; }
}