/* Passport ECS artwork keeps every edge of the supplied card visible. */
.learner-landing-card--ecs .learner-landing-card__image {background:#f6f8f5;}
#learnerPortalContent .learner-landing-card--ecs .learner-landing-card__image img {object-fit:contain;padding:12px;box-sizing:border-box;}
.learner-landing-card--ecs .learner-landing-card__progress > div:last-child i {background:var(--good,#268349);}
.learner-professional-passport-summary-content:has(.learner-professional-ilp) {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch;}
.learner-professional-passport-summary-content:has(.learner-professional-ilp) > .learner-professional-passport-summary-grid {grid-column:1/-1;}
.learner-professional-ilp {min-width:0;margin:0;}
.learner-professional-ilp h4 {margin:0;font-size:1.15rem;}
.learner-professional-ilp .tfe-premium-button {margin-top:12px;}
@media(max-width:640px){.learner-professional-passport-summary-content:has(.learner-professional-ilp){grid-template-columns:minmax(0,1fr);}}

/* Scale the approved five-card composition as one layout, not five skinny cards.
   Container width, rather than window width, also handles embedded Preview.
   Below 80% scale use a readable tablet layout; zoom compensates layout height. */
#learnerPortalContent .learner-landing-premium {container:passport-cards / inline-size;}
#learnerPortalContent .learner-landing-premium .learner-landing-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
@container passport-cards (min-width:1152px) {
  #learnerPortalContent .learner-landing-premium .learner-landing-grid {
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  #learnerPortalContent .learner-landing-premium .learner-landing-card h3 {font-size:1.6rem;}
}
@supports (zoom:calc(100cqw / 1440px)) {
  @container passport-cards (1152px <= width < 1440px) {
    #learnerPortalContent .learner-landing-premium .learner-landing-grid {
      --passport-card-scale:calc(100cqw / 1440px);
      width:1440px;max-width:none;zoom:var(--passport-card-scale);
    }
  }
}
@container passport-cards (max-width:619px) {
  #learnerPortalContent .learner-landing-premium .learner-landing-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* The existing assessment owns the wide workspace only while it is mounted. */
body:has(#learnerProfilePanel [data-ecs-root]) .app-shell {
  width:100%;max-width:none;box-sizing:border-box;
  padding-inline:clamp(16px,2.5vw,48px);
}
#learnerPortalContent:has([data-ecs-root]) .learner-dashboard-grid:has(#learnerProfilePanel) {
  display:block;width:100%;margin:0;
}
#learnerProfilePanel:has([data-ecs-root]) {display:block;min-width:0;width:100%;padding:0;}
#learnerProfilePanel [data-ecs-root] .ecs-content {
  width:100%;max-width:1800px;box-sizing:border-box;margin-inline:auto;
  padding:24px 0 36px;
}
#learnerProfilePanel [data-ecs-root] .ecs-heading {max-width:70ch;}
#learnerProfilePanel [data-ecs-root] .ecs-heading h1 {font-size:clamp(1.8rem,3vw,3rem);}
#learnerProfilePanel [data-ecs-root] .ecs-mock-layout {
  grid-template-columns:minmax(0,2.6fr) minmax(250px,1fr);
  align-items:start;gap:clamp(16px,2vw,28px);
}
#learnerProfilePanel [data-ecs-root] .ecs-mock-layout .ecs-panel {padding:clamp(18px,2vw,32px);}
#learnerProfilePanel [data-ecs-root] .ecs-options legend {max-width:65ch;}
#learnerProfilePanel [data-ecs-root] .ecs-option {width:100%;box-sizing:border-box;}
#learnerProfilePanel [data-ecs-root] .ecs-navigator {grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:900px) {
  #learnerProfilePanel [data-ecs-root] .ecs-mock-layout {grid-template-columns:minmax(0,1fr);}
  #learnerProfilePanel [data-ecs-root] .ecs-navigator {grid-template-columns:repeat(10,minmax(0,1fr));}
}
@media(max-width:600px) {
  #learnerProfilePanel [data-ecs-root] .ecs-actions {display:grid;grid-template-columns:minmax(0,1fr);}
  #learnerProfilePanel [data-ecs-root] .ecs-actions > button {width:100%;}
  #learnerProfilePanel [data-ecs-root] .ecs-navigator {grid-template-columns:repeat(5,minmax(0,1fr));}
}

/* ECS assessment: the supplied Lesson Content reference's white cards,
   pale section bands, navy type and slim champagne-gold accents.
   Scope only the active Passport mock; engine markup/state remain untouched. */
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) {
  --ecs-ink:#10234f;--ecs-muted:#596c86;--ecs-gold:#c8a14e;
  --ecs-line:#d9e3ef;--ecs-band:#f5f8fc;
  background:#fff;color:var(--ecs-ink);
}
body:has(#learnerProfilePanel .ecs-mock-layout) {background:#fff;}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-breadcrumb {
  gap:16px;margin-bottom:18px;font-size:.8rem;color:var(--ecs-muted);
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-breadcrumb a {color:var(--ecs-muted);}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading {
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;
  max-width:none;box-sizing:border-box;margin:0 0 24px;padding:22px 28px;
  border:1px solid #132d58;border-top:3px solid var(--ecs-gold);border-radius:18px;
  background:#0a1d46;color:#fff;box-shadow:0 8px 22px #10234f0b;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading > .eyebrow {
  grid-column:1;margin:0 0 8px;color:#e7cb8f;font-size:.65rem;letter-spacing:.12em;font-weight:700;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading h1 {
  color:#fff;font-size:clamp(1.75rem,2.5vw,2.4rem);line-height:1.15;margin:0;grid-column:1;
  letter-spacing:-.025em;font-weight:750;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading h1::after {
  content:"Health, Safety & Environmental Assessment";display:block;
  margin-top:8px;font-size:.94rem;line-height:1.4;font-weight:400;letter-spacing:0;color:#d8e2f2;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading > p:last-child {
  grid-column:2;grid-row:1 / span 2;align-self:center;max-width:28ch;
  display:inline-block;margin:0;padding:10px 14px;border-left:3px solid var(--ecs-gold);
  border-radius:4px;background:#ffffff0b;color:#f0f4fc;font-size:.8rem;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-panel {
  border:1px solid var(--ecs-line);border-top:3px solid var(--ecs-gold);
  border-radius:18px;background:#fff;box-shadow:0 8px 24px #10234f08;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-layout .ecs-panel {padding:24px;}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-toolbar {
  align-items:center;gap:16px;margin:-24px -24px 20px;padding:16px 24px;
  border-bottom:1px solid var(--ecs-line);border-radius:15px 15px 0 0;background:var(--ecs-band);
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) #ecsTimer {
  display:flex;flex-direction:column;gap:3px;padding:9px 14px;border:1px solid #dcc58f;
  border-radius:12px;background:#fffaf0;color:var(--ecs-ink);font-size:1.1rem;font-weight:700;
  line-height:1.25;font-variant-numeric:tabular-nums;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) #ecsTimer::before {
  content:"TIME REMAINING";font-size:.6rem;font-weight:750;letter-spacing:.08em;color:#775811;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-toolbar > span {
  color:var(--ecs-muted);font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-options legend {
  margin:0 0 20px;padding:0;max-width:65ch;color:var(--ecs-ink);
  font-size:clamp(1.22rem,1.8vw,1.65rem);line-height:1.4;font-weight:750;letter-spacing:-.015em;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-option {
  min-height:58px;margin:10px 0;padding:13px 16px;gap:12px;border:1px solid #cfdbe9;
  border-radius:12px;background:#fff;color:var(--ecs-ink);font-size:.95rem;line-height:1.5;
  box-shadow:0 1px 3px #10234f04;transition:background-color .15s,border-color .15s;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-option:hover {
  border-color:var(--ecs-gold);background:var(--ecs-band);
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-option:focus-within {
  outline:3px solid #a47a20;outline-offset:3px;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-option.selected {
  border-color:#cfad60;background:#102b55;color:#fff;box-shadow:inset 0 0 0 1px #cfad60;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-option input {
  width:18px;height:18px;min-width:18px;margin:0;accent-color:#ac822f;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-letter {
  display:inline-grid;place-items:center;flex:0 0 28px;width:28px;height:28px;
  border:1px solid #d7e0ec;border-radius:8px;background:var(--ecs-band);color:var(--ecs-ink);
  font-size:.76rem;font-weight:750;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .selected .ecs-letter {
  border-color:#d3b56f;background:#f5e9ce;color:#433510;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-actions {margin-top:22px;gap:12px;}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-actions > button,
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) [data-ecs-action=review] {
  min-height:46px;font-size:.84rem;border-radius:10px!important;padding:11px 18px;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) :is([data-ecs-action=previous],[data-ecs-action=cancel-finish]) {
  background:#fff!important;border-color:#9aabc3!important;color:var(--ecs-ink)!important;box-shadow:none!important;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) [data-ecs-action=flag] {
  background:#fcf8ee!important;border-color:#dbc696!important;color:#6e5011!important;box-shadow:none!important;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) :is([data-ecs-action=forward],[data-ecs-action=finish]) {
  background:linear-gradient(180deg,#183963,#0a2148)!important;border-color:#c8a14e!important;
  box-shadow:0 3px 8px #10234f13!important;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) #ecsSaveStatus {
  margin:14px 0 0;color:var(--ecs-muted);font-size:.76rem;line-height:1.5;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) aside.ecs-panel h2 {
  margin:0 0 8px;color:var(--ecs-ink);font-size:1.1rem;line-height:1.35;font-weight:750;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) aside.ecs-panel > p {
  margin:0 0 18px;color:var(--ecs-muted);font-size:.75rem;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator {gap:7px;}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator button {
  min-height:44px;border:1px solid #d6e0ec;border-radius:8px;background:#fff;color:var(--ecs-ink);
  padding:5px 2px;font-size:.82rem;line-height:1.2;font-weight:650;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator button[aria-label*=", answered"] {
  background:#edf5f2;border-color:#c6dcd3;color:#1e5040;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator button[aria-label*=", flagged"] {
  border-color:#b28a36;box-shadow:inset 0 -3px #c8a14e;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator button[aria-current] {
  background:#102b55;color:#fff;border-color:#c8a14e;box-shadow:inset 0 0 0 1px #c8a14e;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator button:hover {border-color:#9b772c;}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) [data-ecs-action=review] {
  width:100%;margin-top:18px;background:#fffaf0!important;border-color:#b38d3a!important;
  color:var(--ecs-ink)!important;box-shadow:none!important;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) :is(button,input):focus-visible {
  outline:3px solid #a47a20!important;outline-offset:3px!important;
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-footer {
  padding:4px 0 24px;color:var(--ecs-muted);font-size:.72rem;
}
@media(max-width:900px) {
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading {grid-template-columns:minmax(0,1fr);row-gap:8px;}
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading > p:last-child {grid-column:1;grid-row:auto;max-width:none;justify-self:start;}
}
@media(max-width:600px) {
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading {padding:18px;margin-bottom:18px;}
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading h1 {font-size:1.65rem;}
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-heading h1::after {font-size:.85rem;}
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-layout .ecs-panel {padding:18px;}
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-toolbar {margin:-18px -18px 18px;padding:14px 18px;gap:12px;}
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-option {padding:12px;gap:9px;}
}

/* Full-width question first; the existing navigator follows in DOM order. */
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-layout {
  grid-template-columns:minmax(0,1fr);
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-mock-layout > .ecs-panel {margin-bottom:0;}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator {
  grid-template-columns:repeat(auto-fit,minmax(max(52px,calc((100% - 63px)/10)),1fr));
}
#learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) [data-ecs-action=review] {
  width:auto;max-width:100%;min-width:200px;
}
/* Reserved optional-media region. No empty placeholder is rendered and no
   question data or renderer is changed. A future renderer may insert this
   figure between the question legend and answer labels. */
#learnerProfilePanel [data-ecs-root] .ecs-question-media {
  width:100%;max-width:960px;margin:0 0 20px;min-width:0;
}
#learnerProfilePanel [data-ecs-root] .ecs-question-media > img {
  display:block;width:100%;max-height:420px;object-fit:contain;
  border:1px solid #d9e3ef;border-radius:12px;background:#f5f8fc;
}
#learnerProfilePanel [data-ecs-root] .ecs-question-media > figcaption {
  margin-top:8px;color:#596c86;font-size:.85rem;line-height:1.5;
}
@media(max-width:600px) {
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) .ecs-navigator {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  #learnerProfilePanel [data-ecs-root]:has(.ecs-mock-layout) [data-ecs-action=review] {width:100%;min-width:0;}
}