/* Hamiltonn unified site design contract — v0.35.42
   Loaded last on every custom route and after the Desk brand stylesheet. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --oc-ui-navy-950: #0a1420;
  --oc-ui-navy-900: #0e1b29;
  --oc-ui-navy-800: #16273a;
  --oc-ui-navy-700: #22384d;
  --oc-ui-gold-600: #8a6a2f;
  --oc-ui-gold-500: #b8924e;
  --oc-ui-gold-400: #c9a15c;
  --oc-ui-gold-300: #dcb97e;
  --oc-ui-gold-100: #f4ecdc;
  --oc-ui-paper: #f6f3ee;
  --oc-ui-paper-2: #efeae2;
  --oc-ui-surface: #ffffff;
  --oc-ui-ink: #14202e;
  --oc-ui-muted: #4d5a68;
  --oc-ui-line: #e3ddd2;
  --oc-ui-line-strong: #cfc7b8;
  --oc-ui-success: #176b45;
  --oc-ui-success-bg: #e5f5ed;
  --oc-ui-warning: #7b5716;
  --oc-ui-warning-bg: #fff0cf;
  --oc-ui-danger: #a7353d;
  --oc-ui-danger-bg: #fdebec;
  --oc-ui-info: #245c86;
  --oc-ui-info-bg: #eaf2f8;
  --oc-ui-radius-sm: 8px;
  --oc-ui-radius: 12px;
  --oc-ui-radius-lg: 16px;
  --oc-ui-radius-xl: 22px;
  --oc-ui-shadow-sm: 0 2px 8px rgba(10, 20, 32, 0.05);
  --oc-ui-shadow: 0 12px 32px rgba(10, 20, 32, 0.08);
  --oc-ui-shadow-lg: 0 24px 60px rgba(10, 20, 32, 0.16);
  --oc-ui-focus: 0 0 0 3px rgba(201, 161, 92, 0.25);
  --oc-ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Alias every historical page token to the production design system. */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch) {
  --ink: var(--oc-ui-navy-900);
  --orange: var(--oc-ui-gold-400);
  --paper: var(--oc-ui-surface);
  --muted: var(--oc-ui-muted);
  --line: var(--oc-ui-line);
  --wash: var(--oc-ui-paper-2);
  --green: var(--oc-ui-success);
  --red: var(--oc-ui-danger);
  --blue: var(--oc-ui-info);
  --wf-navy: var(--oc-ui-navy-900);
  --wf-gold: var(--oc-ui-gold-400);
  --wf-bg: var(--oc-ui-paper);
  --wf-border: var(--oc-ui-line);
  --wf-muted: var(--oc-ui-muted);
  --wf-green: var(--oc-ui-success);
  --wf-red: var(--oc-ui-danger);
  color: var(--oc-ui-ink);
  font-family: var(--oc-font-ui, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:has(:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)),
body:has(:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)) {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  color: var(--oc-ui-ink) !important;
  background: var(--oc-ui-paper) !important;
}

body:has(:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch))
:is(.navbar,.web-footer,.page-header,.page-breadcrumbs) {
  display: none !important;
}

body:has(:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch))
:is(.web-page-content,.page_content,.web-page-content>.container,.page_content>.container) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch),
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch) * {
  box-sizing: border-box;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)
:is(h1,h2,h3,h4,p,ul,ol,dl,figure) {
  max-width: 100%;
}

/* `break-word`, never `anywhere`.

   Both break inside a word that cannot fit on a line, but `anywhere` ALSO drops
   the element's min-content width to a single character. Every one of these
   elements is a flex or grid child somewhere, and the shell separately sets
   `min-width: 0` on flex children, so `anywhere` let them collapse to a sliver
   and wrap real words one letter per line: the project detail back button
   rendered "Pr/oj/ec/ts" in 15px, and a "1 worker" count in 23px.

   `break-word` keeps min-content at the longest word, so the layout reserves
   room for it, while still wrapping genuinely unbreakable strings such as long
   reference codes. */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)
:is(h1,h2,h3,h4,p,strong,span,label,a,button,th,td,dd) {
  overflow-wrap: break-word;
}

/* Site canvas */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch) {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 100% 0, rgba(201,161,92,.11), transparent 28rem),
    radial-gradient(circle at 0 100%, rgba(184,146,78,.08), transparent 30rem),
    var(--oc-ui-paper) !important;
}

/* Primary display titles only use the heritage serif. */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)
:is(.ocuk-today-copy>h1,.ocwf-heading h1,.ocwa-intro h1,.ocwl-copy h1,.ocdp-title h1,.ocqr-title h1,.och-title h1,.oca-title h1,.oc-launch h1,.oc-page-display-title) {
  color: var(--oc-ui-navy-900) !important;
  font-family: var(--oc-font-display, "Fraunces", Georgia, serif) !important;
  font-weight: 560 !important;
  line-height: 1.08 !important;
  letter-spacing: -.028em !important;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)
:is(h2,h3,h4) {
  color: var(--oc-ui-navy-900);
  font-family: var(--oc-font-ui, "Hanken Grotesk", sans-serif) !important;
  letter-spacing: -.012em;
}

/* Operational labels / eyebrows */
:is(.ocuk-eyebrow,.ocwf-eyebrow,.ocwf-heading>div>span,.ocwa-kicker,.ocwl-heading>span,.ocwl-copy>span,.ocdp-title span,.ocdp-address span,.ocdp-bank-grid span,.ocqr-title span,.ocqr-address span,.och-title span,.och-address span,.och-block>span,.oca-title span,.oca-label) {
  color: var(--oc-ui-gold-600) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

/* Shared top bars and secure public headers */
:is(.ocuk-topbar,.ocwf-topbar,.ocwa-topbar) {
  background:
    radial-gradient(100% 180% at 100% 0, rgba(201,161,92,.17), transparent 58%),
    var(--oc-ui-navy-900) !important;
  border-bottom: 1px solid rgba(201,161,92,.30) !important;
  box-shadow: 0 8px 24px rgba(10,20,32,.16) !important;
}

:is(.ocuk-brand,.ocwf-brand,.ocwa-brand,.ocwl-brand) img,
:is(.ocdp-header,.ocqr-header,.och-header,.oca-header) img {
  object-fit: contain !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 18px rgba(10,20,32,.16) !important;
}

:is(.ocuk-brand,.ocwf-brand,.ocwa-brand,.ocwl-brand) strong,
:is(.ocuk-brand,.ocwf-brand,.ocwa-brand,.ocwl-brand) small {
  display: block;
}

:is(.ocuk-brand,.ocwf-brand,.ocwa-brand) strong { color: #fff !important; }
:is(.ocuk-brand,.ocwf-brand,.ocwa-brand) small { color: rgba(255,255,255,.64) !important; }

:is(.ocdp-header,.ocqr-header,.och-header,.oca-header) {
  padding: 13px 16px !important;
  color: #fff !important;
  background:
    radial-gradient(100% 180% at 100% 0, rgba(201,161,92,.18), transparent 58%),
    var(--oc-ui-navy-900) !important;
  border: 1px solid rgba(201,161,92,.26) !important;
  border-radius: var(--oc-ui-radius-lg) !important;
  box-shadow: var(--oc-ui-shadow) !important;
}

:is(.ocdp-header,.ocqr-header,.och-header,.oca-header) strong { color: #fff !important; }
:is(.ocdp-header,.ocqr-header,.och-header,.oca-header) span { color: rgba(255,255,255,.66) !important; }

/* Cards / content surfaces */
:is(.ocuk-card,.ocwf-card,.ocwa-card,.ocdp-card,.ocqr-card,.och-card,.oca-card,.ocwl-form-panel) {
  background: var(--oc-ui-surface) !important;
  border: 1px solid var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius-lg) !important;
  box-shadow: var(--oc-ui-shadow-sm) !important;
}

:is(.ocuk-card,.ocwf-card,.ocwa-card,.ocdp-card,.ocqr-card,.och-card,.oca-card,.ocwl-form-panel) {
  transition: border-color .22s ease, box-shadow .25s var(--oc-ui-ease), transform .25s var(--oc-ui-ease);
}

:is(.ocuk-card,.ocwf-card,.ocwa-card):hover {
  border-color: #d7c9ae !important;
  box-shadow: var(--oc-ui-shadow) !important;
}

/* Public secure portals */
:is(.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell) {
  padding: clamp(14px, 3vw, 30px) 14px 48px !important;
}

:is(.ocdp-card,.ocqr-card,.och-card,.oca-card) {
  padding: clamp(17px, 3vw, 28px) !important;
  box-shadow: var(--oc-ui-shadow-lg) !important;
}

:is(.ocdp-title,.ocqr-title,.och-title,.oca-title) {
  border-color: var(--oc-ui-line) !important;
}

:is(.ocdp-address,.ocdp-summary,.ocdp-bank-grid>div,.ocdp-file,
    .ocqr-address,.ocqr-totals,.ocqr-copy,.ocqr-scope>div span,
    .och-address,.och-summary,.och-list li,.och-file,
    .oca-address,.oca-warranty,.oca-ticket) {
  color: var(--oc-ui-ink) !important;
  background: var(--oc-ui-paper-2) !important;
  border-color: var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius-sm) !important;
}

:is(.ocdp-bank-grid .reference,.ocqr-scope>div span,.ocqr-check,.och-check,.oca-file,
    .ocdp-message,.ocqr-message,.och-message,.oca-message) {
  color: var(--oc-ui-warning) !important;
  background: var(--oc-ui-gold-100) !important;
  border-color: var(--oc-ui-gold-400) !important;
}

:is(.ocdp-bank,.ocdp-form,.ocqr-response,.och-response,.oca-form) {
  border-color: var(--oc-ui-navy-900) !important;
  border-radius: var(--oc-ui-radius) !important;
}

:is(.ocdp-summary .grand,.ocqr-totals .grand) {
  border-color: var(--oc-ui-gold-400) !important;
}

:is(.ocqr-table-wrap,.och-block,.oca-block) {
  border-color: var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius) !important;
}

:is(.ocqr-table-wrap th) {
  color: #fff !important;
  background: var(--oc-ui-navy-900) !important;
}

:is(.ocqr-table-wrap td,.ocqr-table-wrap th) { border-color: var(--oc-ui-line) !important; }
:is(.ocqr-table-wrap td span) { color: var(--oc-ui-gold-600) !important; }

/* Forms */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  color: var(--oc-ui-ink) !important;
  background: #fff !important;
  border: 1px solid var(--oc-ui-line-strong) !important;
  border-radius: var(--oc-ui-radius-sm) !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
  border-color: var(--oc-ui-gold-400) !important;
  box-shadow: var(--oc-ui-focus) !important;
  outline: none !important;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
:is(input,textarea)::placeholder {
  color: #7c8792 !important;
  opacity: 1;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell)
label {
  color: var(--oc-ui-muted) !important;
  font-weight: 700;
}

/* Shared buttons */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
button,
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
a[class*="button"] {
  min-height: 42px;
  border-radius: var(--oc-ui-radius-sm) !important;
  font-family: var(--oc-font-ui, "Hanken Grotesk", sans-serif) !important;
  font-weight: 750;
  transition: transform .18s var(--oc-ui-ease), box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
button:not(:disabled):active { transform: translateY(1px); }

:is(.ocuk-primary,.ocwf-primary,.ocwa-primary,.ocwl-submit,.ocdp-submit,
    .oc-stitch-shell button.bg-secondary-container,.oc-stitch-shell a.bg-secondary-container) {
  color: var(--oc-ui-navy-950) !important;
  background: linear-gradient(135deg,var(--oc-ui-gold-300),var(--oc-ui-gold-500)) !important;
  border-color: var(--oc-ui-gold-500) !important;
  box-shadow: 0 7px 18px rgba(184,146,78,.25) !important;
}

:is(.ocuk-primary,.ocwf-primary,.ocwa-primary,.ocwl-submit,.ocdp-submit,
    .oc-stitch-shell button.bg-secondary-container,.oc-stitch-shell a.bg-secondary-container):not(:disabled):hover {
  filter: brightness(1.035);
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(184,146,78,.34) !important;
}

:is(.ocuk-secondary,.ocwa-outline,.ocwf-back,.ocwl-manager,.ocdp-bank-grid button,.och-file button) {
  color: var(--oc-ui-navy-900) !important;
  background: #fff !important;
  border: 1px solid var(--oc-ui-line-strong) !important;
  box-shadow: none !important;
}

:is(.ocuk-secondary,.ocwa-outline,.ocwf-back,.ocwl-manager,.ocdp-bank-grid button,.och-file button):hover {
  color: var(--oc-ui-navy-950) !important;
  background: var(--oc-ui-gold-100) !important;
  border-color: var(--oc-ui-gold-400) !important;
}

:is(.ocuk-danger,.ocqr-actions .reject,.och-actions .changes) {
  color: var(--oc-ui-danger) !important;
  background: #fff !important;
  border: 1px solid #d7aeb1 !important;
}

:is(.ocuk-danger,.ocqr-actions .reject,.och-actions .changes):hover {
  color: #fff !important;
  background: var(--oc-ui-danger) !important;
  border-color: var(--oc-ui-danger) !important;
}

:is(.ocqr-actions .accept,.och-actions .accept,.oca-actions button) {
  color: #fff !important;
  background: var(--oc-ui-success) !important;
  border-color: var(--oc-ui-success) !important;
}

:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
button:disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
  filter: grayscale(.15);
  transform: none !important;
}

/* Worker */
.ocuk-page,
.ocwf-page,
.ocwa-page {
  width: min(calc(100% - 28px), 1180px) !important;
  margin-inline: auto !important;
}

.ocuk-today-hero {
  color: #fff !important;
  background:
    radial-gradient(90% 160% at 100% 0, rgba(201,161,92,.23), transparent 56%),
    linear-gradient(145deg,var(--oc-ui-navy-800),var(--oc-ui-navy-950)) !important;
  border: 1px solid rgba(201,161,92,.30) !important;
  border-radius: var(--oc-ui-radius-xl) !important;
  box-shadow: var(--oc-ui-shadow-lg) !important;
}

.ocuk-today-hero :is(h1,p,strong,span) { color: inherit; }
.ocuk-today-hero .ocuk-eyebrow { color: var(--oc-ui-gold-300) !important; }
.ocuk-today-rate { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.08) !important; }

:is(.ocuk-pay-grid>div,.ocuk-timer-panel,.ocuk-presence-metrics span,.ocuk-location-card,.ocuk-evidence,.ocuk-permission,.ocuk-mini-list>*,.ocuk-history>*) {
  background: var(--oc-ui-paper-2) !important;
  border-color: var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius) !important;
}

.ocuk-pay-due {
  color: var(--oc-ui-navy-950) !important;
  background: var(--oc-ui-gold-100) !important;
  border-color: var(--oc-ui-gold-400) !important;
}

.ocuk-break-panel {
  background: var(--oc-ui-gold-100) !important;
  border-color: #decaa5 !important;
}

.ocuk-presence-panel {
  background: var(--oc-ui-info-bg) !important;
  border-color: #c7d8e5 !important;
}

.ocuk-bottom-nav {
  color: rgba(255,255,255,.68) !important;
  background: rgba(10,20,32,.97) !important;
  border-top: 1px solid rgba(201,161,92,.30) !important;
  box-shadow: 0 -8px 28px rgba(10,20,32,.28) !important;
  backdrop-filter: blur(12px);
}

.ocuk-bottom-nav a { color: rgba(255,255,255,.62) !important; }
.ocuk-bottom-nav a.active { color: var(--oc-ui-gold-300) !important; }

/* Workforce */
.ocwf-heading h1 { color: var(--oc-ui-navy-900) !important; }
.ocwf-month,
.ocwf-review-summary span {
  background: #fff !important;
  border-color: var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius) !important;
}

:is(.ocwf-balances article,.ocwf-list article) {
  background: #fbfaf7 !important;
  border-color: var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius) !important;
}

.ocwf-status { background: var(--oc-ui-paper-2) !important; }
.ocwf-status:is(.paid,.completed,.approved,.on-site) { color: var(--oc-ui-success) !important; background: var(--oc-ui-success-bg) !important; }
.ocwf-status:is(.cancelled,.rejected,.no-show,.outside-site) { color: var(--oc-ui-danger) !important; background: var(--oc-ui-danger-bg) !important; }
.ocwf-status:is(.late,.clock-out-overdue,.awaiting-supervisor) { color: var(--oc-ui-warning) !important; background: var(--oc-ui-warning-bg) !important; }

.ocwf-dialog {
  color: var(--oc-ui-ink) !important;
  background: #fff !important;
  border: 1px solid var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius-lg) !important;
  box-shadow: var(--oc-ui-shadow-lg) !important;
}
.ocwf-dialog::backdrop { background: rgba(10,20,32,.62) !important; backdrop-filter: blur(3px); }

/* Field account admin */
.ocwa-intro {
  color: #fff !important;
  background:
    radial-gradient(90% 160% at 100% 0, rgba(201,161,92,.23), transparent 58%),
    var(--oc-ui-navy-900) !important;
  border-radius: var(--oc-ui-radius-xl) !important;
  box-shadow: var(--oc-ui-shadow-lg) !important;
}
.ocwa-intro :is(h1,p) { color: #fff !important; }
.ocwa-step { color: var(--oc-ui-navy-950) !important; background: var(--oc-ui-gold-300) !important; }
.ocwa-step.success { color: #fff !important; background: var(--oc-ui-success) !important; }

/* Worker login */
.ocwl-brand-panel {
  color: #fff !important;
  background:
    radial-gradient(110% 130% at 100% 0, rgba(201,161,92,.20), transparent 54%),
    linear-gradient(145deg,var(--oc-ui-navy-800),var(--oc-ui-navy-950)) !important;
}
.ocwl-brand-panel :is(h1,p,li,strong) { color: #fff !important; }
.ocwl-brand-panel .ocwl-copy>span { color: var(--oc-ui-gold-300) !important; }
.ocwl-shell { border-radius: var(--oc-ui-radius-xl) !important; box-shadow: var(--oc-ui-shadow-lg) !important; }
.ocwl-session { background: var(--oc-ui-gold-100) !important; border-color: var(--oc-ui-gold-400) !important; }

/* Status and feedback colours */
:is(.ocdp-status.paid,.ocqr-status.accepted,.och-status.accepted,.och-status.completed,.oca-warranty.active,.oca-badge.covered,.oca-badge.resolved) {
  color: var(--oc-ui-success) !important;
  background: var(--oc-ui-success-bg) !important;
}
:is(.ocdp-status.rejected,.ocqr-status.rejected,.och-status.changes,.oca-warranty.expired,.oca-badge.rejected) {
  color: var(--oc-ui-danger) !important;
  background: var(--oc-ui-danger-bg) !important;
}
:is(.ocdp-status.pending,.oca-badge.chargeable,.oca-badge.on-hold) {
  color: var(--oc-ui-warning) !important;
  background: var(--oc-ui-warning-bg) !important;
}

/* Desk receives shared tokens but keeps ERPNext's structural layout. */
body[data-route^="Form/"] :is(.form-section,.form-dashboard-section,.frappe-card),
body[data-route^="List/"] :is(.list-row-head,.list-row-container),
body[data-route^="query-report/"] :is(.report-wrapper,.datatable) {
  border-color: var(--oc-ui-line) !important;
  border-radius: var(--oc-ui-radius) !important;
}

body[data-route^="Form/"] :is(input,select,textarea):focus,
body[data-route^="List/"] :is(input,select,textarea):focus {
  border-color: var(--oc-ui-gold-400) !important;
  box-shadow: var(--oc-ui-focus) !important;
}

/* Launch page */
.oc-launch {
  display: grid;
  min-height: 75dvh;
  place-items: center;
  padding: 24px;
}
.oc-launch-card {
  width: min(480px,100%);
  padding: 34px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--oc-ui-line);
  border-radius: var(--oc-ui-radius-xl);
  box-shadow: var(--oc-ui-shadow-lg);
}
.oc-launch-card img { width: 68px; height: 68px; margin: 0 auto 18px; object-fit: contain; }
.oc-launch-card h1 { margin: 0 0 8px; font-size: clamp(1.75rem,7vw,2.6rem); }
.oc-launch-card p { margin: 0; color: var(--oc-ui-muted); }

/* Cards inside a horizontal scroller keep their width.

   `.oc-stitch-shell :where(.flex, .grid) > *` sets min-width:0 on every flex
   child so long text can truncate. That is right for a normal row, but a card in
   an `overflow-x-auto` track must NOT shrink — the track absorbs the overflow,
   not the card. Without this the dashboard's Recent Projects cards collapsed to
   ~170px on a phone and the project name wrapped one character per line.

   Specificity beats the shell rule in both directions, so load order cannot
   break it again. */
body:has(.oc-stitch-shell) .oc-scroll-card {
  min-width: 280px;
}

@media (max-width: 380px) {
  /* Leave a peek of the next card on the narrowest phones. */
  body:has(.oc-stitch-shell) .oc-scroll-card {
    min-width: 84vw;
  }
}

/* Accessibility */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch)
:focus-visible {
  outline: 3px solid rgba(201,161,92,.68) !important;
  outline-offset: 2px !important;
}

@media (max-width: 700px) {
  :is(.ocuk-page,.ocwf-page,.ocwa-page) { width: min(calc(100% - 20px),1180px) !important; }
  :is(.ocuk-card,.ocwf-card,.ocwa-card,.ocdp-card,.ocqr-card,.och-card,.oca-card) { border-radius: 14px !important; }
  :is(.ocdp-header,.ocqr-header,.och-header,.oca-header) { border-radius: 14px !important; }
  :is(.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell) { padding-inline: 10px !important; }
  .ocwl-shell { width: min(calc(100% - 20px),1080px) !important; margin: 12px auto !important; border-radius: 16px !important; }
  :is(.ocuk-today-copy>h1,.ocwf-heading h1,.ocwa-intro h1,.ocwl-copy h1,.ocdp-title h1,.ocqr-title h1,.och-title h1,.oca-title h1) {
    font-size: clamp(1.75rem,9vw,2.3rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch),
  :is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell,.oc-launch) * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Hamiltonn fixed-header layout contract v0.35.42 */
.oc-stitch-shell > header.fixed.top-0 {
  top: 0 !important;
  min-height: 4rem;
  padding-top: env(safe-area-inset-top);
}
.oc-stitch-shell > header.fixed.top-0 + main {
  padding-top: calc(5.5rem + env(safe-area-inset-top)) !important;
}
@media (min-width: 768px) {
  .oc-stitch-shell > header.fixed.top-0 + main {
    padding-top: 5.5rem !important;
  }
}


/* Hamiltonn bottom-navigation breakpoint contract v0.35.42 */
@media (min-width: 768px) {
  .oc-stitch-shell > nav.fixed.bottom-0 {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   Dialog overlays.

   The portal builds every dialog in JS with Tailwind classes, but a
   large part of that set is not present in the compiled stylesheet and
   so silently did nothing:

     z-[140]  max-h-[94vh]  bg-black/50  sm:p-6
     sm:items-center  sm:max-w-2xl / 3xl / 4xl  sm:rounded-2xl

   The visible result was a raw, full-bleed white sheet with no dim
   backdrop, no rounding, no width limit, no height cap and no internal
   scrolling. Because the overlay centres its panel, a form taller than
   the viewport had roughly half its overflow pushed above the top of the
   screen, where it could not be reached or scrolled to — the heading,
   the close button and the first fields sat off-screen behind the fixed
   header, and zooming in made it progressively worse.

   These rules restate the intended design in plain CSS, matched on the
   class tokens that really are in the markup, so every dialog across the
   manager portal is capped, scrollable and correctly presented.
   ------------------------------------------------------------------ */
body > div[class~="fixed"][class~="inset-0"]:has(> section) {
  z-index: 1400 !important;
  align-items: flex-end;
  padding: 0;
  background: rgba(10, 20, 32, .55) !important;
  overscroll-behavior: contain;
}

body > div[class~="fixed"][class~="inset-0"]:has(> section) > section {
  max-height: calc(100dvh - 1rem) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -12px 44px rgba(10, 20, 32, .3) !important;
}

@supports not (height: 100dvh) {
  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section {
    max-height: calc(100vh - 1rem) !important;
  }
}

@media (min-width: 640px) {
  body > div[class~="fixed"][class~="inset-0"]:has(> section) {
    align-items: center;
    padding: 1.5rem;
  }

  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section {
    max-width: 42rem;
    margin-inline: auto;
    max-height: calc(100dvh - 3rem) !important;
    border-radius: 16px !important;
    box-shadow: 0 26px 64px rgba(10, 20, 32, .34) !important;
  }

  @supports not (height: 100dvh) {
    body > div[class~="fixed"][class~="inset-0"]:has(> section) > section {
      max-height: calc(100vh - 3rem) !important;
    }
  }

  /* Honour the per-dialog width the markup asks for. The cap above is
     42rem, so any dialog asking for more than that needs a mapping here
     or it is silently squashed — sm:max-w-6xl (the customer account and
     statement dialogs) was, until v0.35.23. */
  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section[class~="sm:max-w-2xl"] { max-width: 42rem; }
  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section[class~="sm:max-w-3xl"] { max-width: 48rem; }
  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section[class~="sm:max-w-4xl"] { max-width: 56rem; }
  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section[class~="sm:max-w-5xl"] { max-width: 64rem; }
  body > div[class~="fixed"][class~="inset-0"]:has(> section) > section[class~="sm:max-w-6xl"] { max-width: 72rem; }
}

/* Form controls carried a min-height and a border but no padding, so the
   text sat flush against the border on every input in the portal.
   Deliberately not !important: pages that set their own padding on a
   specific field (a search input with a leading icon, for example) must
   keep winning over this baseline. */
:is(.ocuk,.ocwf,.ocwa,.ocwl,.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.oc-stitch-shell)
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  padding: .6rem .75rem;
}

/* ==================================================================
   Manager portal shell — portal-wide alignment contract.

   Every .oc-stitch-shell page was wrapped in Frappe's Bootstrap
   main.container (max 1290px, 540px on small screens). The neutraliser
   above only covers containers *inside* .page_content, not the one
   *around* it, so nine pages rendered inset with the sticky header as a
   floating strip. Only pages carrying their own .container reset
   (workforce, worker-login, field accounts) escaped it.

   Scoped to .oc-stitch-shell deliberately: the public document shells
   (.ocqr-shell, .och-shell, .oca-shell, .ocdp-shell) have no width cap
   of their own and still rely on that container to size them.
   ================================================================== */
body:has(.oc-stitch-shell) .page-content-wrapper > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* One column width for the whole page, taken from whatever max-w-* the
   renderer chose for main, so the bar and the content cannot drift. */
.oc-stitch-shell { --ocs-max: 1280px; --ocs-gutter: 32px; }
.oc-stitch-shell:has(> main.max-w-6xl) { --ocs-max: 1152px; }
.oc-stitch-shell:has(> main.max-w-5xl) { --ocs-max: 1024px; }
.oc-stitch-shell:has(> main.max-w-4xl) { --ocs-max: 896px; }
.oc-stitch-shell:has(> main.max-w-3xl) { --ocs-max: 768px; }
@media (max-width: 767px) { .oc-stitch-shell { --ocs-gutter: 16px; } }

.oc-stitch-shell > main {
  width: min(100% - (var(--ocs-gutter) * 2), var(--ocs-max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.oc-stitch-shell > header {
  padding-inline: max(var(--ocs-gutter), calc((100% - var(--ocs-max)) / 2)) !important;
}

/* The theme already intends these bars to be navy with light text, but its
   own .oc-stitch-shell .bg-surface rule (0,2,0) out-ranks the header rule
   (0,1,1), so the bar stayed white while the text went white with it —
   the brand was rendering at a contrast ratio of 1.0. */
.oc-stitch-shell > header,
.oc-stitch-shell > header.bg-surface,
.oc-stitch-shell > header.bg-surface-container-lowest {
  background: rgba(10, 20, 32, .97) !important;
  border-bottom: 1px solid rgba(201, 161, 92, .28) !important;
  color: #fff !important;
}

/* Light up bar text. Matching on " bg-" / "^bg-" deliberately: a plain
   [class*="bg-"] also matches hover:bg-*, which left the dashboard's menu
   icon navy on the navy bar. Elements carrying a gradient (the avatar tile,
   the notification count) are excluded via .overflow-hidden / their own bg. */
.oc-stitch-shell > header :is(h1, h2, h3, strong, small, p, label),
.oc-stitch-shell > header :is(a, span, button, div):not([class^="bg-"]):not([class*=" bg-"]):not([class*="overflow-hidden"]) {
  color: #fff !important;
}

/* Anything inside an element that does carry its own background keeps that
   element's colour pair, so text in light pills is not whitened away. */
.oc-stitch-shell > header :is([class^="bg-"], [class*=" bg-"]) :is(a, span, button, div, strong, small, p, h1, h2, h3) {
  color: inherit !important;
}

/* Fixed bars and bottom navs were placed with no left/right, so they fell
   back to their static position inside the old container and overhung the
   right edge (projects' header reached x=1517 on a 1425px page). */
.oc-stitch-shell > header.fixed,
.oc-stitch-shell > nav.fixed {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}

/* ------------------------------------------------------------------
   Utilities the markup uses that this fixed Tailwind build never
   compiled, so they silently did nothing.

   Scoped to the portal *page*, not to .oc-stitch-shell: every dialog in
   the portal is appended to <body> (openProjectDetails, overlayFrame and
   friends), so it sits OUTSIDE the shell element. While these rules were
   written as `.oc-stitch-shell .foo` all 28 of them were dead inside every
   dialog — which is why the project detail's five stat tiles fell back to
   `grid-cols-2` and left an orphan tile, required-field asterisks
   (text-error) were invisible, and dialog button rows never reversed or
   right-aligned. `body:has(.oc-stitch-shell)` keeps them off the Frappe
   desk and the public document shells exactly as before.
   ------------------------------------------------------------------ */
body:has(.oc-stitch-shell) .px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
body:has(.oc-stitch-shell) .flex-col-reverse { flex-direction: column-reverse; }
body:has(.oc-stitch-shell) .whitespace-pre-wrap { white-space: pre-wrap; }
body:has(.oc-stitch-shell) .text-error { color: var(--oc-ui-danger, #a7353d); }
body:has(.oc-stitch-shell) .grid-cols-\[44px_1fr_auto\] { grid-template-columns: 44px 1fr auto; }
body:has(.oc-stitch-shell) .grid-cols-\[auto_1fr_auto\] { grid-template-columns: auto 1fr auto; }

@media (min-width: 640px) {
  body:has(.oc-stitch-shell) .sm\:items-center { align-items: center; }
  body:has(.oc-stitch-shell) .sm\:items-start { align-items: flex-start; }
  body:has(.oc-stitch-shell) .sm\:justify-end { justify-content: flex-end; }
  body:has(.oc-stitch-shell) .sm\:flex-wrap { flex-wrap: wrap; }
  body:has(.oc-stitch-shell) .sm\:w-80 { width: 20rem; }
  body:has(.oc-stitch-shell) .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body:has(.oc-stitch-shell) .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body:has(.oc-stitch-shell) .sm\:col-span-1 { grid-column: span 1 / span 1; }
  body:has(.oc-stitch-shell) .sm\:col-span-3 { grid-column: span 3 / span 3; }
  body:has(.oc-stitch-shell) .sm\:col-span-5 { grid-column: span 5 / span 5; }
}
@media (min-width: 768px) {
  body:has(.oc-stitch-shell) .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body:has(.oc-stitch-shell) .md\:table-cell { display: table-cell; }
}
@media (min-width: 1024px) {
  body:has(.oc-stitch-shell) .lg\:flex-row { flex-direction: row; }
  body:has(.oc-stitch-shell) .lg\:items-start { align-items: flex-start; }
  body:has(.oc-stitch-shell) .lg\:justify-between { justify-content: space-between; }
  body:has(.oc-stitch-shell) .lg\:justify-end { justify-content: flex-end; }
  body:has(.oc-stitch-shell) .lg\:text-right { text-align: right; }
  body:has(.oc-stitch-shell) .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.oc-stitch-shell) .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body:has(.oc-stitch-shell) .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  body:has(.oc-stitch-shell) .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.oc-stitch-shell) .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* An odd last card in a 2-column stat row would otherwise sit alone. */
@media (max-width: 1023px) {
  body:has(.oc-stitch-shell) :is(.lg\:grid-cols-5, .lg\:grid-cols-4) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* leads.css predates this contract and uses a 14px mobile gutter; match it so
   the bar and the column agree on that page too. */
@media (max-width: 820px) { .oc-stitch-shell[data-oc-page="leads"] { --ocs-gutter: 14px; } }

/* Several bars (clients, timesheets, inventory, finance) never carried the
   flex classes the others use, so their children stacked: the notification
   bell wrapped onto a second row and the avatar was clipped by the bar edge.
   One row, vertically centred, no wrapping, for every portal bar. */
.oc-stitch-shell > header {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  min-height: 64px;
}
.oc-stitch-shell > header > * { min-width: 0; }
.oc-stitch-shell > header :is(img, svg, .material-symbols-outlined) { flex-shrink: 0; }

/* The avatar div in these bars is an empty template element that script fills
   with initials; as a plain block the text sat in its top-left corner. */
.oc-stitch-shell > header .w-10.h-10.overflow-hidden {
  display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1;
}

/* leads.css sizes its own column and ends up 7px off-centre on mobile once the
   scrollbar is in play; this file loads after it, so hand that page the same
   contract as the rest. Padding is left alone (it clears the fixed bar). */
@media (max-width: 820px) {
  .oc-stitch-shell[data-oc-page="leads"] main#oc-live-main {
    width: min(100% - (var(--ocs-gutter) * 2), var(--ocs-max)) !important;
    margin-inline: auto !important;
  }
}

/* ==================================================================
   Public document pages on a phone: one page, not a stack of cards.

   The quotation, contract, deposit, handover and aftercare pages all
   render a shell (padded, tinted) holding a card (bordered, rounded,
   shadowed) holding panels (tinted, padded, rounded). On a 390px phone
   that left the text 304px wide - 22% of the screen spent on the edges
   of boxes - and the eleven contract clauses each became their own grey
   block, so the agreement read as a pile of cards rather than a
   document. On a phone the card IS the page: full bleed, no frame.
   ================================================================== */
@media (max-width: 640px) {
  :is(.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell) {
    /* One knob for the phone gutter. The full-bleed sections below offset by
       exactly this, so the padding and the bleed cannot drift apart. */
    --ocq-gutter: 8px;
    padding: 0 0 28px !important;
    background: var(--oc-ui-surface) !important;
  }

  :is(.ocdp-header,.ocqr-header,.och-header,.oca-header) {
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 12px var(--ocq-gutter) !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  :is(.ocdp-card,.ocqr-card,.och-card,.oca-card) {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 var(--ocq-gutter) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  :is(.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell) > footer {
    max-width: none !important;
    padding: 0 var(--ocq-gutter) !important;
  }

  /* The quotation number is a reference, not a headline. */
  .ocqr-title h1 { font-size: 1.3rem !important; line-height: 1.25 !important; }
  .ocqr-title { padding-bottom: 12px !important; }

  /* Two short facts do not need two full-width blocks. */
  .ocqr-scope > div { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ocqr-scope > div span { padding: 9px 10px !important; font-size: .84rem !important; }

  /* Let the priced items fit the phone instead of scrolling inside a frame. */
  .ocqr-table-wrap { border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .ocqr-table-wrap table { min-width: 0 !important; }
  .ocqr-table-wrap thead { display: none !important; }
  .ocqr-table-wrap tr { display: block !important; padding: 11px 0 !important; border-bottom: 1px solid var(--oc-ui-line) !important; }
  .ocqr-table-wrap td { display: inline-block !important; border: 0 !important; padding: 0 14px 0 0 !important; white-space: normal !important; }
  .ocqr-table-wrap td:first-child { display: block !important; padding: 0 0 5px 0 !important; }
  .ocqr-table-wrap td:not(:first-child) { font-size: .82rem !important; color: var(--oc-ui-muted) !important; }
  /* qty, unit and amount are enough on a phone; the rate repeats the amount
     on the fixed-price lines that make up most quotations. */
  .ocqr-table-wrap td:nth-child(4) { display: none !important; }
  .ocqr-table-wrap td:last-child { padding-right: 0 !important; }
  .ocqr-table-wrap td:last-child strong { display: inline !important; color: var(--oc-ui-navy-900) !important; font-size: .95rem; }

  .ocqr-totals { max-width: none !important; }

  /* The signing area is the page's last section, not a card floating in it.
     The shell's universal max-width:100% caps a negative-margin bleed at the
     content box, so the width has to be released explicitly. */
  :is(.ocdp-form,.ocqr-response,.och-response,.oca-form) {
    width: auto !important;
    max-width: none !important;
    margin: 22px calc(var(--ocq-gutter) * -1) 0 !important;
    padding: 18px var(--ocq-gutter) 22px !important;
    border: 0 !important;
    border-top: 2px solid var(--oc-ui-navy-900) !important;
    border-radius: 0 !important;
    background: var(--oc-ui-wash, #efeae2) !important;
  }
  .ocqr-check { background: #fff !important; }
}

/* ------------------------------------------------------------------
   Contract clauses read as a document. .ocqr-copy is a tinted callout
   panel, which is right for one or two short blocks and wrong for the
   eleven clauses of the works agreement - hence .ocqr-clause.
   ------------------------------------------------------------------ */
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-clause {
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-clause h2 {
  margin: 0 0 7px;
  padding-bottom: 5px;
  font-size: 1rem;
  border-bottom: 1px solid var(--oc-ui-line);
}

:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-clause p {
  margin: 0 0 8px;
  white-space: normal;
  line-height: 1.6;
}

:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-clause ul { margin: 4px 0 8px 20px; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-clause li { margin: 0 0 4px; line-height: 1.5; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-clause .ocqr-clause-total {
  margin: 8px 0 0;
  font-weight: 700;
  color: var(--oc-ui-navy-900);
}

/* The parties block stays a panel: it is reference detail, not prose. */
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-parties {
  margin: 18px 0 4px;
  padding: 13px 14px;
  background: var(--oc-ui-wash, #efeae2);
  border-radius: 10px;
  line-height: 1.55;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-parties p { margin: 0 0 5px; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-parties p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Checkboxes on the public pages were being squashed to a 3px sliver:
   the shared form rule sets width:100% / min-width:0 on inputs, and
   inside the flex .ocqr-check row the box then shrank to nothing. The
   customer has to tick one of these to sign, so it needs a real target.
   ------------------------------------------------------------------ */
:is(.ocdp-shell,.ocqr-shell,.och-shell,.oca-shell,.ocuk,.ocwf,.ocwa,.ocwl)
:is(input[type="checkbox"], input[type="radio"]) {
  flex: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin-top: 1px !important;
  padding: 0 !important;
  accent-color: var(--oc-ui-navy-900);
}


/* ------------------------------------------------------------------
   Works agreement: key terms summary, numbered clauses, price table.
   The Key terms table must be read before signing (CRA 2015 ss.64/68 —
   a liability cap the Client never sees is not binding), so it is given
   its own emphasis rather than being buried in the clause run.
   ------------------------------------------------------------------ */
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-terms-version {
  margin: -2px 0 10px;
  color: var(--oc-ui-muted);
  font-size: .85rem;
}

:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms {
  margin-top: 20px;
  padding: 14px;
  background: var(--oc-ui-wash, #efeae2);
  border-radius: 10px;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms h2 { border-bottom-color: rgba(10,20,32,.18); }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-warning { font-weight: 700; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms dl { margin: 10px 0 0; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms dl > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 4px 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(10,20,32,.12);
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms dt { font-weight: 700; color: var(--oc-ui-navy-900); }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms dd { margin: 0; line-height: 1.5; }

:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-ref {
  font-weight: 700;
  color: var(--oc-ui-navy-900);
  margin-right: 4px;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-emph {
  font-weight: 700;
  color: var(--oc-ui-navy-900);
}

:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-price-table {
  width: 100%;
  margin: 10px 0 2px;
  border-collapse: collapse;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-price-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--oc-ui-line);
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-price-table td:last-child { text-align: right; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-price-table tr.grand td {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--oc-ui-navy-900);
  border-bottom: 0;
}

@media (max-width: 640px) {
  :is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-key-terms dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Subcontract schedules read as label/value rows, like the key terms table. */
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-schedule { margin: 8px 0 0; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-schedule > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 4px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--oc-ui-line);
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-schedule dt { font-weight: 700; color: var(--oc-ui-navy-900); }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-schedule dd { margin: 0; line-height: 1.5; }
@media (max-width: 640px) {
  :is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-schedule > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Passcode step and delivery choice on the public signing pages. */
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-passcode {
  margin: 16px 0 4px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--oc-ui-line);
  border-radius: 10px;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-passcode h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--oc-ui-navy-900);
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-passcode p { margin: 0 0 9px; line-height: 1.5; }
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-passcode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-passcode-row input {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 11rem;
  letter-spacing: .22em;
  font-size: 1.1rem;
  text-align: center;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-secondary {
  flex: 0 0 auto;
  background: var(--oc-ui-navy-900);
  color: #fff;
  border: 0;
  padding: 11px 15px;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-passcode-note {
  margin: 9px 0 0 !important;
  font-size: .86rem;
  color: var(--oc-ui-muted);
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-choice {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-choice legend {
  padding: 0;
  margin: 0 0 7px;
  font-weight: 700;
  color: var(--oc-ui-navy-900);
}
:is(.ocqr-shell,.och-shell,.oca-shell,.ocdp-shell) .ocqr-choice .ocqr-check { margin-bottom: 8px; }