/* Order overview shares the existing controls, with one scroll surface. */
#order-modal:has(.oc-saved) {padding:14px}
#order-modal:has(.oc-saved) .order-workspace-modal {width:min(1440px,100%);height:96dvh;max-height:96dvh;overflow:hidden}
#order-form.oc-saved {display:flex;flex-direction:column;height:100%;min-height:0}
#order-form.oc-saved>.modal-head {flex:none;background:#fff;color:var(--ink);padding:15px 24px}
#order-form.oc-saved>.modal-head .eyebrow {color:#b53933;font-size:10px}
#order-form.oc-saved>.modal-head h2 {font-size:23px;letter-spacing:-.5px}
#order-form.oc-saved>.modal-body {flex:1;min-height:0;overflow:auto;padding:14px 24px 28px;background:#f4f5f7;scroll-behavior:smooth}
#order-form.oc-saved>.modal-foot {flex:none;background:white;padding:12px 24px;box-shadow:0 -5px 18px #14213d06}
#oc-settings {border:1px solid var(--line);border-radius:12px;background:white;margin:0 0 12px}
#oc-settings>summary {padding:12px 16px;font-weight:650;font-size:12px;cursor:pointer;color:#5d6473}
#oc-settings .order-main-fields {border:0;background:white;margin:0;padding:16px}
#order-form.oc-saved #order-unified-controls {display:none}
.oc-intro {display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:15px}
.oc-intro>div:first-child {display:grid;gap:5px;min-width:0}
.oc-intro b {font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.oc-intro span,.oc-intro small {font-size:12px;color:#626b79}
.oc-balance {text-align:right;flex-shrink:0;display:grid;gap:4px;max-width:260px}
.oc-balance b {font-size:23px;color:#263c40}
.oc-balance.oc-unpaid b {color:#a23828}
.oc-essentials {display:grid;grid-template-columns:minmax(180px,2fr) minmax(150px,1fr) minmax(130px,.8fr) minmax(110px,.7fr);gap:10px;background:white;border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 12px}
.oc-essentials .field {margin:0;min-width:0;grid-column:auto}
.oc-essentials .field>label {font-size:11px;color:#697282}
.oc-essentials .field>small {display:none}
.oc-essentials input,.oc-essentials select {width:100%;min-width:0;font-size:13px;padding:9px}
.oc-nav {display:flex;gap:5px;position:sticky;top:-14px;z-index:5;padding:10px 0 12px;margin:0;background:#f4f5f7;overflow:auto;scrollbar-width:thin}
.oc-nav button {flex:1;white-space:nowrap;cursor:pointer;border:1px solid #e0e3e9;border-radius:10px;padding:10px 13px;background:#fff;color:#303c4c;font-size:12px;font-weight:700}
.oc-nav button:hover,.oc-nav button:focus-visible {border-color:#e43832;color:#b72d27;background:#fff8f6}
.oc-columns {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,.9fr);gap:16px;align-items:start}
.oc-main,.oc-side {display:grid;gap:16px;min-width:0}
.oc-card {min-width:0;border:1px solid #e1e5eb;border-radius:16px;background:#fff;padding:18px;scroll-margin-top:65px}
.oc-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.oc-heading h3,.oc-payment h3 {font-size:17px;margin:3px 0 0}
.oc-heading small {color:#7a8290;font-size:9px;letter-spacing:1.1px;font-weight:750}
.oc-draft-hint {font-size:10px;color:#7a8290;text-align:right;max-width:170px;line-height:1.5}
#oc-composition #order-storefront-panel>.settings-box {padding:12px;margin-top:10px!important;border-radius:11px;background:#fafbfc;box-shadow:none}
#oc-composition #order-storefront-panel>.settings-box:first-child {margin-top:0!important}
#oc-composition .data-head {flex-wrap:wrap;gap:10px;align-items:start}
#oc-composition .data-head h3 {font-size:13px}
#oc-composition .data-head small {font-size:11px;line-height:1.5}
#oc-composition .btn {font-size:11px;padding:8px 10px;min-height:32px}
#oc-composition .data-table {min-width:540px;font-size:12px}
#oc-composition .data-table input {width:100%;min-width:80px;padding:8px;font-size:12px}
#oc-composition .data-table th {font-size:9px;padding:9px 6px}
#oc-composition .data-table td {padding:8px 6px}
#oc-composition #free-order-total {font-size:20px!important}
#oc-payment #billing-order-panel {padding:0!important;margin:0!important;border:0!important;box-shadow:none}
#oc-payment #billing-order-panel>.data-head {align-items:start;flex-wrap:wrap;gap:12px}
#oc-payment small {font-size:11px;color:#727b88}
#oc-payment p {font-size:12px;line-height:1.6;color:#647080;margin:8px 0}
#oc-payment .actions {justify-content:flex-start;flex-wrap:wrap;gap:6px}
#oc-payment .btn,.oc-document .btn {font-size:11px;padding:8px 10px;min-height:32px}
#oc-payment article {padding:12px 0!important}
#oc-payment article>strong {font-size:13px;line-height:1.5}
#oc-payment [aria-live]>div:first-child {gap:16px!important;justify-content:space-between}
#oc-payment [aria-live]>div:first-child strong {font-size:17px}
#oc-overview .oc-mounted {display:block!important}
#oc-overview>.order-workspace-pane {display:none}
.oc-artwork>.oc-mounted>.crm-panel,.oc-proposals .oc-mounted>.crm-panel {padding:0;border:0;background:transparent;box-shadow:none;margin:0}
.oc-proposals .oc-heading {margin-bottom:9px}
.oc-proposals [data-order-proposals]>.data-head h3 {display:none}
.oc-proposals [data-order-proposals]>.data-head {justify-content:flex-end}
.oc-proposals [data-order-proposals]>p {font-size:11px;color:#7a8290;line-height:1.5}
.oc-proposals [data-order-proposals]>article,.oc-proposals [data-order-companions]>article {border:1px solid #e7e9ee;border-radius:11px;padding:12px;margin-top:10px}
.oc-proposals article>b {font-size:13px}
.oc-proposals article small {color:#7a8290;font-size:10px;margin-top:4px}
.oc-proposals article p {font-size:12px;color:#667180;line-height:1.5}
.oc-proposals .actions {flex-wrap:wrap;gap:6px;justify-content:flex-start}
.oc-proposals .btn {font-size:11px;padding:8px 10px;min-height:32px}
.oc-proposals>details {border-top:1px solid #eceef2;margin-top:14px;padding-top:12px}
.oc-proposals>details>summary {font-size:12px;font-weight:700;cursor:pointer}
.oc-artwork h3 {margin:0;font-size:17px}
.oc-artwork .data-head {align-items:start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.oc-artwork .data-head small {display:block;color:#7a8290;font-size:11px;line-height:1.5;margin-top:4px}
.oc-artwork .order-layout-grid {grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.oc-artwork .order-layout-preview {height:210px}
.oc-artwork .order-layout-card header {flex-wrap:wrap;align-items:start}
.oc-artwork .order-layout-card header b {font-size:12px;overflow-wrap:anywhere}
.oc-artwork .order-layout-card header small {font-size:10px;margin-top:4px}
.oc-artwork .order-layout-card .btn {font-size:10px;padding:7px 9px;min-height:30px}
.oc-document {display:flex;align-items:start;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #eceef2}
.oc-document>div:first-child {display:grid;gap:4px;min-width:0}
.oc-document b {font-size:13px}.oc-document small,.oc-document span {font-size:11px;color:#697282;overflow-wrap:anywhere}
.oc-document .actions {flex-wrap:wrap;gap:5px}
#oc-contract .privacy-note {font-size:11px;padding:12px;margin-bottom:12px;line-height:1.6;background:#f5f8fb;border:0;border-radius:10px;color:#4e6179}
#oc-contract>button {font-size:11px;margin-top:10px}
.oc-empty {font-size:12px;line-height:1.7;color:#7b8390;padding:8px 0}
.oc-correspondence .oc-heading {flex-wrap:wrap;align-items:start}
.oc-correspondence .btn {font-size:11px;padding:8px 10px;min-height:32px}
.oc-correspondence [data-oc-messages] {max-height:570px;overflow:auto;scrollbar-width:thin}
.oc-correspondence [data-oc-conversations] {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.oc-message {padding:13px 0;border-top:1px solid #e7eaf0;display:grid;gap:6px}
.oc-message>b {font-size:13px;overflow-wrap:anywhere}
.oc-message>small,.oc-message>span {font-size:10px;color:#758090;overflow-wrap:anywhere}
.oc-message.outgoing {border-left:2px solid #d9e7da;padding-left:12px}
.oc-message details summary {cursor:pointer;color:#51667f;font-size:11px}
.oc-message p {white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.65;margin:7px 0}
.oc-reply {background:#f4f7f9;border-radius:9px;padding:10px}
.oc-reply-editor textarea {display:block;width:100%;margin:8px 0;padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit}
.oc-reply-editor [role=alert],.oc-error {color:#a5392e;font-size:12px}
.oc-refresh {margin-top:12px}.oc-documents,.oc-advanced,.oc-tools {margin-top:16px}
.oc-documents>summary,.oc-advanced>summary,.oc-tools>summary {cursor:pointer;font-size:13px;font-weight:700;color:#515d70}
.oc-documents[open]>summary,.oc-advanced[open]>summary,.oc-tools[open]>summary {margin-bottom:16px}
.oc-tools {border:1px dashed #d6dce5;border-radius:12px;background:#f9fafb;padding:14px}
#oc-advanced .order-workspace-tabs {flex-wrap:wrap;overflow:visible}
#oc-advanced .order-doc-grid {grid-template-columns:1fr}
#oc-advanced [data-order-workspace-tab="overview"],#oc-advanced [data-order-workspace-tab="layout"],#oc-advanced [data-order-workspace-tab="documents"],#oc-advanced [data-order-workspace-tab="production"],#oc-advanced [data-order-workspace-tab="proposals"],#oc-advanced [data-order-workspace-tab="companions"] {display:none}
.oc-documents .order-doc-grid {grid-template-columns:1fr}
.oc-highlight {animation:oc-highlight 1.2s ease-out}
@keyframes oc-highlight {from{box-shadow:0 0 0 3px #e9453538}to{box-shadow:0 0 0 3px transparent}}
@media(prefers-reduced-motion:reduce){.oc-highlight{animation:none}.oc-nav, #order-form.oc-saved>.modal-body{scroll-behavior:auto}}
@media(max-width:1050px){.oc-columns{grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:12px}.oc-card{padding:14px}.oc-essentials{grid-template-columns:1.7fr 1fr 1fr}.oc-essentials [data-oc-field=total]{grid-column:3}.oc-essentials [data-oc-field=title]{grid-column:1/3}}
@media(max-width:820px){#order-modal:has(.oc-saved){padding:0}#order-modal:has(.oc-saved) .order-workspace-modal{height:100dvh;max-height:100dvh;border-radius:0}.oc-columns{grid-template-columns:1fr}.oc-intro{flex-wrap:wrap}.oc-balance{text-align:left}.oc-essentials{grid-template-columns:1fr 1fr}.oc-essentials [data-oc-field=title]{grid-column:1/-1}.oc-essentials [data-oc-field=total]{grid-column:auto}.oc-nav{top:-14px}.oc-nav button{flex:0 0 auto}#order-form.oc-saved>.modal-body{padding:14px}.oc-document{flex-wrap:wrap}.oc-draft-hint{max-width:140px}#order-form.oc-saved>.modal-head,#order-form.oc-saved>.modal-foot{padding:12px 15px}.oc-tools .order-doc-grid{grid-template-columns:1fr}}

#oc-composition .settings-box:has(#order-manager-message){display:none}.oc-external-assets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.oc-external-assets small{width:100%;color:#788291;font-size:11px}

/* Keep the actual working area visible on ordinary laptop displays. */
#order-form.oc-saved>.modal-head {padding:10px 24px}
#order-form.oc-saved>.modal-head h2 {margin:3px 0;font-size:21px}
#oc-settings>summary {padding:8px 12px}
#oc-settings {margin-bottom:9px}
.oc-intro {margin-bottom:9px}
.oc-intro>div:first-child {grid-template-columns:auto auto;gap:3px 12px;align-items:baseline}
.oc-intro>div:first-child>small {grid-column:1/-1}
.oc-essentials {padding:10px;margin-bottom:5px}
.oc-nav {padding:6px 0 9px}
#oc-composition #order-storefront-panel>.settings-box {padding:0;border:0;background:transparent}
#oc-composition #order-storefront-panel>.settings-box>.data-head {margin-bottom:10px}
#oc-composition #order-storefront-panel>.settings-box:first-child>.data-head>div:first-child {display:none}
#oc-composition #order-storefront-panel>.settings-box:first-child>.data-head {justify-content:flex-start}
@media(max-width:820px){.oc-intro>div:first-child{grid-template-columns:1fr}.oc-intro>div:first-child>small{grid-column:auto}}

.oc-nav button {display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,border-color .15s,color .15s}
.oc-nav button[aria-current] {background:#d93830;border-color:#d93830;color:#fff;box-shadow:0 3px 9px #d9383020}
.oc-count {display:inline-flex;min-width:20px;height:20px;padding:0 5px;align-items:center;justify-content:center;background:#edf0f4;color:#657184;border-radius:6px;font-size:10px;font-variant-numeric:tabular-nums}
.oc-count[hidden] {display:none}.oc-nav [aria-current] .oc-count {background:#ffffff28;color:white}
#oc-composition .data-table {table-layout:fixed;min-width:600px}
#oc-composition .data-table th:first-child {width:28%}
#oc-composition .data-table th:last-child {width:35px}
#oc-composition .data-table input {min-width:60px;border-radius:8px;border-color:#e1e5eb;font-variant-numeric:tabular-nums}
#oc-composition .data-table textarea {display:block;width:100%;min-width:0;min-height:58px;resize:vertical;padding:8px;font:inherit;font-size:12px;line-height:1.5;border:1px solid #e1e5eb;border-radius:8px;background:#fff;overflow:hidden;box-sizing:border-box}
#oc-composition .data-table textarea:focus,#oc-composition .data-table input:focus {outline:2px solid #d9383025;border-color:#d93830;background:#fffdfb}
#oc-composition .data-table td {vertical-align:top}
#oc-composition #order-storefront-panel>.settings-box>.data-head h3 {display:none}
#oc-composition #order-storefront-panel>.settings-box>.data-head small {font-size:10px;color:#7a8290}
#oc-composition #order-storefront-panel>.settings-box>.data-head {border:0;padding:0}
#oc-composition #order-storefront-panel>.settings-box:first-child>.data-head {margin-bottom:9px}
#oc-composition #order-storefront-panel>.settings-box:last-child>.data-head:last-child {background:#f5f7f9;border-radius:10px;padding:12px;margin-top:9px!important}
.oc-quote-terms {margin:10px 0;border-top:1px solid #edf0f4;padding-top:9px}
.oc-quote-terms summary {font-size:11px;color:#69778a;cursor:pointer}
.oc-quote-terms p {margin-bottom:0}
.oc-intro b {font-size:17px}.oc-intro small {font-size:11px}
.oc-card {box-shadow:0 2px 6px #14213d03}
@media(prefers-reduced-motion:reduce){.oc-nav button{transition:none}}

@media(min-width:521px) and (max-width:820px){.oc-essentials [data-oc-field=title]{grid-column:auto}.oc-intro>div:first-child{grid-template-columns:auto auto}.oc-intro>div:first-child>small{grid-column:1/-1}}

.oc-online-payment{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #eceff3;font-size:11px;color:#687487}
.oc-online-payment b{padding:5px 8px;border-radius:6px;font-size:10px}.oc-online-payment .paid{background:#e8f4eb;color:#2d6840}.oc-online-payment .pending{background:#fff3df;color:#8c641b}

.oc-standard-items{margin-top:14px;border-top:1px solid #eceff3;padding-top:8px}.oc-standard-items[hidden]{display:none}.oc-standard-items .data-table{min-width:480px;table-layout:auto}.oc-standard-items .data-table td{font-size:12px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}.oc-standard-items .data-table th:first-child{width:auto}.oc-standard-items .data-table th:last-child{width:auto}.oc-standard-items .data-table td:last-child{white-space:nowrap;font-weight:700}
.op-proposal-toggle{display:flex!important;gap:10px;align-items:flex-start;font-weight:700}.op-proposal-toggle input{width:18px!important;height:18px;flex:none;margin:0}.op-proposal-field{padding:14px;border:1px solid #e1e5eb;border-radius:12px}.op-proposal-field small{line-height:1.6;color:#6c7380}.op-is-proposal{background:#fff8e6;border-color:#efd18a}.op-proposal-badge{display:inline-block!important;background:#fff1cf;color:#8a5c00;border-radius:6px;padding:3px 7px;margin-top:5px}