@font-face {
  font-family: "OT Barlow";
  src: url("/assets/barlow-semi-condensed-600-cc6368a7.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

/* The asymmetric OT workspace and bounded document list have no css-zero
   equivalent. Existing buttons, badges, inputs and tables retain their API.
   Every rule is scoped to OT so the shared shell and OE views are unaffected. */
.task-order-detail {
  --ot-green: var(--pehuen-primary-700);
  --ot-deep: oklch(0.34 0.053 151);
  --ot-paper: oklch(0.99 0.009 90);
  --ot-line: var(--pehuen-primary-200);
  --ot-space: var(--size-4);
  --ot-ease: cubic-bezier(.25, 1, .5, 1);
  --ot-fast: 140ms;
  --ot-base: 220ms;
  padding-block: var(--size-5);
  container: task-order / inline-size;
  color: var(--stone-800);

  h1, h2, .ot-money, .ot-execution-counts dd, .ot-execution-total dd {
    font-family: "OT Barlow", var(--font-sans);
    font-weight: 600;
    line-height: 1.15;
  }

  h1 { font-size: 2rem; overflow-wrap: anywhere; }
  h2 { font-size: 1.5rem; }
  h3 { font-weight: 600; }
  a { text-underline-offset: .2em; }
  a:hover { text-decoration: underline; }
  :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--pehuen-primary-500); outline-offset: 4px; }
  .btn { --btn-box-shadow: none; min-block-size: 2.5rem; }
  .ot-caption { color: var(--stone-600); font-size: .8125rem; line-height: 1.5; }
  .ot-money { display: block; font-size: 1.75rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  .ot-header { margin-block-end: var(--size-5); }
  .ot-header__main { display: flex; justify-content: space-between; gap: var(--size-6); align-items: center; }
  .ot-header__identity { min-inline-size: 0; flex: 1; }
  .ot-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2); font-size: .8125rem; margin-block-end: var(--size-2); }
  .ot-header__meta { display: flex; flex-wrap: wrap; gap: var(--size-2) var(--size-4); margin-block-start: var(--size-3); font-size: .875rem; color: var(--stone-600); }
  .ot-meta-item { display: inline-flex; align-items: center; gap: var(--size-1); }
  .ot-meta-item > svg { inline-size: .875rem; block-size: .875rem; flex-shrink: 0; color: var(--stone-500); opacity: .6; }
  .ot-header__actions { display: flex; flex-wrap: wrap; gap: var(--size-2); justify-content: flex-end; max-inline-size: 45%; }
  .ot-order-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--size-4); border-block: 1px solid var(--ot-line); margin-block-start: var(--size-6); padding-block: var(--size-4); }
  .ot-stepper { display: flex; flex-wrap: wrap; gap: var(--size-3); padding: 0; list-style: none; }
  .ot-stepper__step { display: flex; align-items: center; gap: var(--size-2); font-size: .8125rem; color: var(--stone-500); }
  .ot-stepper__step:not(:last-child)::after { content: ""; inline-size: 1rem; border-block-end: 1px solid var(--ot-line); margin-inline-start: var(--size-1); }
  .ot-stepper__step[aria-current] { color: var(--ot-green); font-weight: 600; }
  .ot-stepper__step--completed { color: var(--stone-600); }
  .ot-stepper__step--aborted[aria-current] { color: var(--red-700); }
  .ot-commitment { display: flex; flex-wrap: wrap; gap: var(--size-2); align-items: center; font-size: .8125rem; }

  .ot-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "facts facts facts facts facts facts facts facts activity activity activity activity"
      "materials materials materials materials materials material-summary material-summary material-summary material-summary material-summary material-summary material-summary"
      "certification certification certification certification certification certification certification certification claims claims claims claims"
      "execution execution execution execution execution execution execution execution items items items items"
      "documents documents documents documents documents documents documents people people people people people";
    gap: var(--ot-space);
  }
  .ot-panel { display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--size-5); }
  .ot-panel__header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--size-3); margin-block-end: var(--size-4); }
  .ot-panel__header h2 { display: flex; align-items: center; gap: var(--size-2); }
  .ot-panel--people > .ot-panel__header, .ot-documents-card > .ot-panel__header { align-items: center; }
  .ot-panel__header h2 svg { color: var(--ot-green); flex-shrink: 0; }
  .ot-panel__header .ot-caption { margin-block-start: var(--size-1); }
  .ot-panel__footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: var(--size-3); border-block-start: 1px solid var(--color-border); padding-block-start: var(--size-4); margin-block-start: auto; }
  .ot-panel__footer a, .ot-action-link { color: var(--ot-green); font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; gap: var(--size-2); min-block-size: 2rem; }
  .ot-empty { color: var(--stone-600); font-size: .875rem; padding-block: var(--size-4) var(--size-6); line-height: 1.6; }
  .ot-panel--facts { grid-area: facts; }
  .ot-panel--activity { grid-area: activity; }
  .ot-panel--items { grid-area: items; }
  .ot-panel--execution { grid-area: execution; background: var(--ot-deep); border-color: var(--ot-deep); color: var(--pehuen-primary-50); }
  .ot-panel--documents { grid-area: documents; background: var(--ot-paper); }
  .ot-panel--certification { grid-area: certification; background: var(--pehuen-primary-100); border-color: var(--ot-line); }
  .ot-panel--claims { grid-area: claims; }
  .ot-bento:not(:has(.ot-panel--claims)) .ot-panel--certification { grid-column: 1 / -1; }
  .ot-claims-counts { display: grid; flex: 1; align-items: center; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--size-3); margin-block-end: var(--size-5); }
  .ot-claims-counts > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--size-1); }
  .ot-claims-counts dt { color: var(--stone-600); font-size: .875rem; }
  .ot-claims-counts dd { font-family: "OT Barlow", var(--font-sans); font-size: 2rem; font-variant-numeric: tabular-nums; }
  .ot-panel--materials { grid-area: materials; background: color-mix(in oklch, var(--pehuen-accent-50), var(--color-surface) 40%); }
  /* The preview and cross-row status highlighting are specific to the OT bento;
     shared css-zero tables and buttons provide their base appearance. */
  .ot-panel--material-summary { grid-area: material-summary; gap: var(--size-4); }
  .ot-panel--material-summary .ot-panel__header { margin-block-end: 0; }
  .ot-panel--material-summary .ot-material-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--size-2); margin-block-end: 0; }
  .ot-panel--material-summary .ot-material-metrics .ot-money { font-size: 1rem; }
  .ot-material-preview { overflow-x: auto; min-inline-size: 0; }
  .ot-material-preview table { min-inline-size: 32rem; }
  .ot-material-preview td:first-child { min-inline-size: 9rem; max-inline-size: 16rem; overflow-wrap: anywhere; }
  .ot-material-preview :is(th, td) { padding-block: var(--size-2); }
  .ot-panel--material-summary .ot-empty { padding-block: 0; }
  .ot-panel--people { grid-area: people; background: var(--pehuen-primary-50); }

  .ot-panel--execution :is(.ot-caption, .ot-empty, small) { color: oklch(0.86 0.023 145); }
  .ot-panel--execution :is(.ot-panel__header h2 svg, .ot-panel__footer a) { color: var(--pehuen-primary-100); }
  .ot-panel--execution .ot-panel__footer { border-color: oklch(0.48 0.035 145); }
  .ot-panel--execution .btn--primary { --btn-background: var(--pehuen-primary-200); --btn-color: var(--ot-deep); --btn-hover-color: var(--pehuen-primary-100); }
  .ot-panel--execution :is(a, button):focus-visible { outline-color: var(--pehuen-accent-200); }
  .ot-execution-overview { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--size-4); margin-block-start: var(--size-2); }
  .ot-execution-total > div { display: flex; align-items: baseline; gap: var(--size-2); }
  .ot-execution-counts { --ot-state-color: oklch(0.70 0.02 145); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--size-2) var(--size-4); margin-block: var(--size-3) var(--size-3); }
  .ot-execution-counts > div { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--size-2); padding: var(--size-2); border: 1px solid transparent; border-radius: var(--rounded-md); }
  .ot-execution-filter::after { content: ""; position: absolute; inset: 0; }
  .ot-execution-counts > div:has(.ot-execution-filter:is(:hover, :focus-visible, [aria-current="true"])) { border-color: var(--ot-state-color); background: color-mix(in oklch, var(--ot-state-color) 15%, transparent); }
  .ot-execution-counts > div:has([aria-current="true"]) dt { font-weight: 600; }
  .ot-panel--execution > turbo-frame { display: block; container: execution-tracking / inline-size; }
  .ot-panel--execution turbo-frame .ot-panel__footer { margin-block-start: var(--size-4); }
  .ot-execution-counts dt { display: inline-flex; align-items: center; gap: var(--size-1); }
  .ot-execution-counts dt::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--ot-state-color); }
  .ot-execution-counts dt, .ot-execution-total dt { font-size: .8125rem; }
  .ot-execution-counts dd, .ot-execution-total dd { font-size: 2rem; order: -1; }
  .ot-state--draft { --ot-state-color: oklch(0.70 0.02 145); }
  .ot-state--in_progress { --ot-state-color: var(--pehuen-accent-300); }
  .ot-state--completed { --ot-state-color: var(--pehuen-primary-300); }
  .ot-state--aborted { --ot-state-color: var(--pehuen-accent-600); }
  .ot-state--in_progress dd { color: var(--pehuen-accent-300); }
  .ot-state--completed dd { color: var(--pehuen-primary-300); }
  .ot-state-strip { display: flex; gap: 2px; block-size: .5rem; margin-block-end: var(--size-5); border-radius: var(--rounded-full); overflow: hidden; background: oklch(0.43 0.04 145); }
  .ot-state-strip span { flex-basis: 0; min-inline-size: .5rem; background: var(--ot-state-color); }
  .ot-execution-scroll { max-block-size: 16rem; min-inline-size: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding-inline: var(--size-2); }
  .ot-execution-list { padding: 0; list-style: none; }
  .ot-execution-list li { border-block-end: 1px solid oklch(0.46 0.03 145); }
  .ot-execution-link, .ot-execution-headings { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(8rem, 1fr) 1rem; align-items: center; gap: var(--size-3); padding-block: var(--size-3); font-size: .875rem; }
  .ot-execution-headings { position: sticky; inset-block-start: 0; z-index: 1; background: var(--ot-deep); border-block-end: 1px solid oklch(0.46 0.03 145); font-size: .75rem; font-weight: 600; }
  /* Keep absolute accessible labels inside their row and the scrolling list. */
  .ot-execution-link { position: relative; }
  .ot-execution-field-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ot-execution-list strong { display: block; overflow-wrap: anywhere; }
  .ot-execution-list__crew, .ot-state-label { overflow-wrap: anywhere; }
  .ot-execution-list .badge--secondary { --badge-color: var(--stone-900); }
  .ot-execution-list__materials { min-inline-size: 0; }
  .ot-execution-list__materials .badge { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
  .ot-execution-list small { display: block; margin-block-start: var(--size-1); }
  .ot-state-label { font-size: .75rem; }

  .ot-money-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-4); margin-block-end: var(--size-4); }
  .ot-money-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ot-money-grid__result { padding-inline-start: var(--size-4); border-inline-start: 1px solid var(--ot-line); }
  .ot-money-grid dt, .ot-money-grid .ot-caption { font-size: .8125rem; }
  .ot-money-grid .ot-money { margin-block: var(--size-2); }
  .ot-difference { display: flex; flex-wrap: wrap; gap: var(--size-2); margin-block: var(--size-2) var(--size-4); font-size: .8125rem; }
  .ot-material-metrics, .ot-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-4); margin-block-end: var(--size-5); }
  :is(.ot-material-metrics, .ot-facts-grid) dt { color: var(--stone-600); font-size: .8125rem; margin-block-end: var(--size-1); }
  .ot-material-metrics .ot-money { font-size: 1.5rem; }
  .ot-facts-grid dd { font-size: .875rem; overflow-wrap: anywhere; }
  .ot-people-list { padding: 0; list-style: none; margin-block-end: var(--size-4); max-block-size: 14rem; overflow-y: auto; scrollbar-gutter: stable; }
  .ot-people-list li { display: flex; gap: var(--size-3); align-items: center; margin-block-end: var(--size-3); font-size: .875rem; }
  .ot-people-list small { display: block; color: var(--stone-600); margin-block-start: var(--size-1); }
  .ot-initials { display: grid; place-items: center; flex: 0 0 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--pehuen-primary-200); color: var(--ot-deep); font-weight: 600; }
  .ot-activity-upcoming { margin-block-end: var(--size-4); padding: var(--size-3); border: 1px solid var(--pehuen-accent-200); background: var(--pehuen-accent-50); font-size: .8125rem; }
  .ot-activity-upcoming__title { color: var(--pehuen-accent-800); font-weight: 600; margin-block-end: var(--size-1); }
  .ot-activity-upcoming li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--size-2); padding-block: var(--size-1); }
  .ot-activity-upcoming a { color: var(--pehuen-accent-800); font-weight: 600; }
  /* Fill the available panel height without letting the history stretch the bento row. */
  .ot-activity-list { display: grid; align-content: start; flex: 1 1 10rem; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin-block-end: var(--size-3); border-radius: var(--rounded-md); }
  .ot-activity-item { display: flex; gap: var(--size-2); align-items: flex-start; padding-block: var(--size-1); font-size: .8125rem; line-height: 1.35; }
  .ot-activity-item .ot-caption { font-size: .75rem; }
  .ot-activity-item p { overflow-wrap: anywhere; }
  .ot-activity-item a { color: var(--stone-800); }
  .ot-activity-item a:is(:hover, :focus-visible) { color: var(--ot-green); text-decoration: underline; }
  .ot-activity-item__icon { display: grid; place-items: center; flex: 0 0 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--pehuen-primary-100); color: var(--ot-deep); }

  .ot-detail-section { border: 1px solid var(--color-border); background: var(--color-surface); min-inline-size: 0; }
  .ot-detail-section > .ot-panel__header { padding: var(--size-5); margin: 0; border-block-end: 1px solid var(--color-border); align-items: center; }
  .ot-detail-section__body { padding: var(--size-5); min-inline-size: 0; }
  .ot-detail-section [data-controller="bulk-actions"] > .flex { flex-wrap: wrap; gap: var(--size-3); }
  .ot-detail-subsection { border-block-start: 1px solid var(--color-border); padding-block-start: var(--size-5); margin-block-start: var(--size-5); }
  .ot-detail-subsection > :is(h3, summary) { font-size: 1.25rem; font-weight: 600; margin-block-end: var(--size-4); }
  .ot-comparison { overflow-x: auto; }
  table.ot-comparison { inline-size: 100%; min-inline-size: 50rem; border-collapse: collapse; font-size: .875rem; }
  .ot-comparison :is(th, td) { padding: var(--size-3); vertical-align: top; border-block-end: 1px solid var(--color-border); }
  .ot-comparison th { background: var(--pehuen-primary-50); text-align: start; font-size: .8125rem; }
  .ot-comparison summary { cursor: pointer; }

  .ot-document-list { list-style: none; padding: 0; margin-block-end: var(--size-4); }
  /* Keep every document reachable without stretching the dashboard row. */
  .ot-documents-card .ot-document-list { max-block-size: 24rem; overflow-y: auto; scrollbar-gutter: stable; padding-inline: var(--size-1); }
  .ot-document { padding-block: var(--size-3); border-block-end: 1px solid var(--color-border); min-inline-size: 0; }
  .ot-document :is(h3, strong, p, a) { overflow-wrap: anywhere; }
  .ot-document h3 { font-size: .9375rem; line-height: 1.5rem; }
  .ot-document__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--rounded-md); background: var(--pehuen-primary-50); color: var(--ot-green); }
  .ot-document__note { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: var(--size-1); font-size: .75rem; color: var(--stone-500); white-space: nowrap; }
  .ot-document__note svg { inline-size: .6875rem; block-size: .6875rem; flex-shrink: 0; }
  .ot-document__note::before { content: "·"; margin-inline-end: var(--size-1); }
  /* Metadata and actions share the title's column, past the icon. */
  .ot-document > :not(.ot-document__heading) { padding-inline-start: calc(1.5rem + var(--size-3)); }
  .ot-document__heading p, .ot-document > p { font-size: .8125rem; color: var(--stone-600); margin-block-start: var(--size-1); }
  .ot-document__source a, .ot-document__actions :is(a, button) { font-size: .8125rem; color: var(--ot-green); font-weight: 600; }
  .ot-document__actions { display: flex; flex-wrap: wrap; gap: var(--size-3); margin-block-start: var(--size-2); }

  /* Motion only answers user input; the entrance and stepper draw run once per visit. */
  .ot-panel, .ot-detail-section { transition: border-color var(--ot-base) var(--ot-ease), box-shadow var(--ot-base) var(--ot-ease); }
  .ot-panel__header h2 svg, .ot-panel__footer a svg, .ot-execution-link > svg, .ot-initials,
  .ot-panel :is(a, button) { transition: transform var(--ot-fast) var(--ot-ease), color var(--ot-fast) var(--ot-ease), background-color var(--ot-fast) var(--ot-ease); }
  .ot-execution-link, .ot-document, .ot-people-list li,
  :is(.ot-money-grid, .ot-material-metrics, .ot-facts-grid) > div, :is(.ot-material-metrics, .ot-facts-grid) dt,
  .ot-state-strip span { transition: background-color var(--ot-fast) var(--ot-ease), opacity var(--ot-base) var(--ot-ease), color var(--ot-fast) var(--ot-ease); }
  /* Match the sticky header to the full row width, including the arrow. */
  .ot-execution-link, .ot-execution-headings { margin-inline: calc(var(--size-2) * -1); padding-inline: var(--size-2); }
  .ot-execution-link { border-radius: var(--rounded-md); }
  .ot-document, .ot-people-list li { margin-inline: calc(var(--size-2) * -1); padding-inline: var(--size-2); border-radius: var(--rounded-md); }
  .ot-document__title { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--ot-base) var(--ot-ease); }
  .ot-panel :is(a, button):active { transform: scale(.98); }

  .ot-panel:is(:hover, :focus-within), .ot-detail-section:focus-within {
    border-color: color-mix(in oklch, var(--ot-green) 35%, var(--ot-line));
    box-shadow: 0 6px 18px -10px color-mix(in oklch, var(--ot-deep) 35%, transparent);
  }
  .ot-panel--execution:is(:hover, :focus-within) { border-color: oklch(0.55 0.05 150); box-shadow: 0 8px 22px -12px color-mix(in oklch, var(--ot-deep) 70%, transparent); }
  .ot-panel:is(:hover, :focus-within) .ot-panel__header h2 svg { transform: translateY(-2px) rotate(-6deg); }
  .ot-panel__footer a:is(:hover, :focus-visible) svg { transform: translateX(3px); }

  .ot-execution-link:is(:hover, :focus-visible) { background: oklch(0.39 0.05 151); text-decoration: none !important; }
  .ot-execution-link:is(:hover, :focus-visible) > svg { transform: translateX(3px); }
  .ot-panel--execution:has(.ot-execution-counts .ot-state--draft a:is(:hover, :focus-visible)) .ot-execution-list .ot-state--draft .ot-execution-link,
  .ot-panel--execution:has(.ot-execution-counts .ot-state--in_progress a:is(:hover, :focus-visible)) .ot-execution-list .ot-state--in_progress .ot-execution-link,
  .ot-panel--execution:has(.ot-execution-counts .ot-state--completed a:is(:hover, :focus-visible)) .ot-execution-list .ot-state--completed .ot-execution-link,
  .ot-panel--execution:has(.ot-execution-counts .ot-state--aborted a:is(:hover, :focus-visible)) .ot-execution-list .ot-state--aborted .ot-execution-link {
    background: color-mix(in oklch, var(--ot-state-color) 20%, var(--ot-deep));
    box-shadow: inset 3px 0 var(--ot-state-color);
  }
  .ot-state-strip:hover span:not(:hover) { opacity: .45; }
  .ot-document:is(:hover, :focus-within) { background: var(--pehuen-primary-50); }
  .ot-document:is(:hover, :focus-within) .ot-document__title { background-size: 100% 1px; }
  .ot-document:is(:hover, :focus-within) .ot-document__icon { background: var(--pehuen-primary-100); }
  :is(.ot-money-grid, .ot-material-metrics):has(> div:hover) > div:not(:hover) { opacity: .6; }
  .ot-facts-grid > div:hover dt, .ot-material-metrics > div:hover dt { color: var(--ot-green); }
  .ot-people-list li { margin-inline: 0; margin-block-end: var(--size-1); padding: var(--size-2); }
  .ot-people-list li:hover { background: var(--pehuen-primary-50); }
  .ot-people-list li:hover .ot-initials { background: var(--pehuen-primary-300); }

  .ot-stepper__step[aria-current] { position: relative; }
  .ot-stepper__step[aria-current]::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: -4px; block-size: 2px; background: currentColor; border-radius: 2px; transform-origin: left; animation: ot-draw 400ms var(--ot-ease) 200ms both; }
  .ot-stepper__step[aria-current]:not(:last-child)::before { inset-inline-end: calc(1rem + var(--size-3)); }

  .ot-bento > .ot-panel { animation: ot-rise var(--ot-base) var(--ot-ease) both; }
  .ot-bento > :is(.ot-panel--materials, .ot-panel--material-summary, .ot-panel--certification) { animation-delay: 40ms; }
  .ot-bento > :is(.ot-panel--execution, .ot-panel--items) { animation-delay: 80ms; }
  .ot-bento > :is(.ot-panel--documents, .ot-panel--people) { animation-delay: 120ms; }

  @media (hover: none) {
    .ot-people-list li:hover, .ot-document:hover:not(:focus-within) { background: transparent; }
    :is(.ot-money-grid, .ot-material-metrics):has(> div:hover) > div:not(:hover) { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before { animation: none !important; transform: none !important; }
  }

  @container task-order (width < 68rem) {
    .ot-header__main { align-items: flex-start; flex-direction: column; }
    .ot-header__actions { max-inline-size: 100%; justify-content: flex-start; }
  }

  @container task-order (width < 56rem) {
    .ot-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
        "facts facts"
        "activity activity"
        "materials materials"
        "material-summary material-summary"
        "certification certification"
        "claims claims"
        "execution execution"
        "items items"
        "documents people";
    }
  }

  @container execution-tracking (width < 48rem) {
    .ot-execution-link { grid-template-columns: minmax(0, 1fr) 1rem; }
    .ot-execution-link > :not(svg) { grid-column: 1; min-inline-size: 0; }
    .ot-execution-headings { display: none; }
    .ot-execution-field-label { position: static; inline-size: auto; block-size: auto; clip-path: none; white-space: normal; }
    .ot-execution-list__crew { grid-row: 2; font-size: .8125rem; }
    .ot-execution-link > svg { grid-column: 2; grid-row: 1; }
  }

  @container task-order (width < 40rem) {
    .btn { min-block-size: 2.75rem; }
    .ot-bento { display: flex; flex-direction: column; }
    .ot-panel { padding: var(--size-4); }
    .ot-header__actions .btn { white-space: normal; }
    .ot-stepper { gap: var(--size-2); }
    .ot-execution-counts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-3); }
    .ot-money-grid { grid-template-columns: 1fr; }
    .ot-money-grid__result { padding-inline-start: 0; padding-block-start: var(--size-4); border-inline-start: 0; border-block-start: 1px solid var(--ot-line); }
    .ot-material-metrics, .ot-facts-grid { grid-template-columns: 1fr; }
    .ot-panel--material-summary .ot-material-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ot-detail-section__body { padding: var(--size-3); }
    .ot-panel__footer a, .ot-facts-grid .ot-action-link, .ot-document__source a, .ot-document__actions :is(a, button) { min-block-size: 2.75rem; display: inline-flex; align-items: center; }
  }
}

@keyframes ot-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes ot-draw { from { transform: scaleX(0); } }