/* Morning completion: scoped to this screen, including installed safe-area rules. */
#screen-complete .content-complete { text-align: left; }
#screen-complete .complete-signoff { margin: 20px 0; padding: 0; border: 0; text-align: left; font: 700 clamp(10px,2.6vw,14px)/1.6 system-ui,sans-serif; text-transform: uppercase; letter-spacing: .19em; color: #a8d3ff; }
#screen-complete .complete-highlight { margin: 18px 0 14px; grid-template-columns: minmax(65px, .65fr) minmax(0,2fr); }
#screen-complete .complete-icon-wrap { justify-self: center; }
#screen-complete .complete-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #9ac9ff55; padding-top: 16px; margin: 4px 0 0; gap: 10px; }
#screen-complete .complete-list li { gap: 7px; font-size: clamp(10px,2.5vw,14px); align-items: flex-start; }
#screen-complete .complete-recap-icon { flex-basis: 32px; height: 32px; font-size: 19px; }
#screen-complete .completion-workout { position: relative; overflow: hidden; padding: 22px 18px 14px; margin: 16px 0 22px; border: 1px solid #a7e1ff; border-radius: 26px; background: linear-gradient(90deg,#06346be6,#0a387bbb 46%,#07305d05 77%),url('../assets/images/morning-workout-invitation.webp') 62% center/cover; box-shadow: inset 0 1px 3px #daefff80,0 0 22px #2b9eff44; color: white; }
#screen-complete .completion-workout[hidden],#screen-complete .completion-workout [hidden] { display: none !important; }
#screen-complete .workout-eyebrow { margin: 0 0 7px; color: #58d9ff; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
#screen-complete #completion-workout-title { font-size: clamp(23px,5.8vw,34px); line-height: 1.12; margin: 0 0 10px; max-width: 68%; text-shadow: 0 2px 8px #07244c; }
#screen-complete #completion-workout-copy { color: #d1e8ff; font-size: clamp(14px,3.4vw,18px); line-height: 1.4; max-width: 62%; min-height: 70px; margin: 0 0 14px; }
#screen-complete .workout-benefits { display: flex; gap: 10px; padding: 0; margin: 12px 0 20px; list-style: none; max-width: 72%; font-size: 11px; color: #d1e8ff; }
#screen-complete #completion-workout-link { display: flex; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; width: 100%; min-height: 54px; padding: 13px 16px; border-radius: 999px; background: linear-gradient(110deg,#12c8ed,#207cff 45%,#693eff); border: 1px solid #9ddfff; color: white; text-decoration: none; font-size: clamp(15px,3.7vw,20px); font-weight: 750; box-shadow: inset 0 1px 5px #dcf5ff70,0 0 18px #38adff66; }
#screen-complete #completion-workout-link:focus-visible { outline: 3px solid white; outline-offset: 4px; }
#screen-complete #completion-workout-status { border: 1px solid #a3dcff77; background: #0a356dcc; padding: 13px; border-radius: 18px; margin-bottom: 0; text-align: center; color: #d9f7ff; }
#screen-complete [data-state='done'] .workout-benefits,#screen-complete [data-state='rest'] .workout-benefits,#screen-complete [data-state='recovery'] .workout-benefits { display: none; }
#screen-complete #btn-complete-home { background: linear-gradient(120deg,#17599888,#0c3068aa); }
#screen-complete #restart-routine-btn { background: transparent; border: 0; color: #a5cdff; text-decoration: underline; font-size: 15px; }
@media(max-width:360px){#screen-complete .complete-list li{flex-direction:column}#screen-complete .complete-highlight{padding:16px 12px;gap:12px}#screen-complete .complete-icon-wrap{width:65px;height:65px}#screen-complete .complete-icon-check{font-size:32px}#screen-complete .completion-workout{padding:18px 12px 12px}}

/* Compact reference proportions. Keep content readable and allow overflow on small screens. */
#screen-complete { padding-left: 16px; padding-right: 16px; padding-bottom: max(12px,env(safe-area-inset-bottom)); }
#screen-complete .content-complete { width: 100%; max-width: 460px; }
#screen-complete .step-tag { display: none; }
#screen-complete .screen-title { font-size: clamp(32px,8.6vw,42px); line-height: 1.08; margin: 6px 0 10px; }
#screen-complete .subtitle { font-size: 15px; line-height: 1.4; margin: 0; max-width: 350px; }
#screen-complete .complete-signoff { font-size: 9px; letter-spacing: .18em; line-height: 1.5; margin: 13px 0; padding: 0; }
#screen-complete .complete-highlight { grid-template-columns: 76px minmax(0,1fr); padding: 15px 13px 12px; gap: 12px; margin: 0 0 12px; border-radius: 22px; }
#screen-complete .complete-icon-wrap { width: 72px; height: 72px; align-self: center; }
#screen-complete .complete-icon-check { inset: 6px; font-size: 38px; }
#screen-complete .complete-texts { gap: 7px; min-width: 0; }
#screen-complete .complete-main { font-size: 19px; line-height: 1.15; }
#screen-complete .complete-sub { font-size: 13px; line-height: 1.38; }
#screen-complete .complete-list { margin: 0; padding-top: 10px; gap: 8px; }
#screen-complete .complete-list li { flex-direction: column; gap: 5px; font-size: 11px; line-height: 1.3; overflow-wrap: normal; word-break: normal; }
#screen-complete .complete-list li > span:last-child { min-width: 0; }
#screen-complete .complete-recap-icon { flex: 0 0 27px; width: 27px; height: 27px; font-size: 17px; }
#screen-complete .completion-workout { padding: 14px 12px 11px; margin: 0 0 12px; border-radius: 22px; background-position: right center; }
#screen-complete .workout-eyebrow { font-size: 9px; margin: 0 0 6px; }
#screen-complete #completion-workout-title { max-width: 72%; font-size: 21px; line-height: 1.12; margin: 0 0 7px; }
#screen-complete #completion-workout-copy { max-width: 64%; min-height: 0; font-size: 13px; line-height: 1.35; margin: 0 0 10px; }
#screen-complete .workout-benefits { max-width: 78%; gap: 7px; margin: 9px 0 12px; font-size: 9px; line-height: 1.2; }
#screen-complete .workout-benefits li { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
#screen-complete .workout-benefits img { width: 25px; height: 25px; object-fit: contain; flex-shrink: 0; border-radius: 50%; background: #1160a34d; border: 1px solid #71caff55; padding: 3px; }
#screen-complete #completion-workout-link { min-height: 46px; padding: 10px; gap: 9px; font-size: 15px; }
#screen-complete #completion-workout-link::before { content: ''; width: 27px; height: 27px; flex-shrink: 0; background: url('../assets/images/quick-icon-dumbbell.webp') center/contain no-repeat; }
#screen-complete #completion-workout-status { padding: 10px; font-size: 13px; }
#screen-complete .actions-complete { gap: 5px; margin: 0; max-width: none; }
#screen-complete .actions-complete button { min-height: 44px; padding: 10px 15px; font-size: 16px; }
#screen-complete #btn-complete-home { display: flex; align-items: center; justify-content: center; gap: 10px; }
#screen-complete #btn-complete-home svg { width: 21px; height: 21px; }
#screen-complete #btn-complete-home span { margin-left: 4px; }
#screen-complete #restart-routine-btn { font-size: 13px; min-height: 44px; padding: 8px; box-shadow: none; }

@media(max-height:740px) and (max-width:600px){
 #screen-complete .screen-title{font-size:32px;margin-bottom:7px}
 #screen-complete .complete-signoff{margin:9px 0}
 #screen-complete .complete-highlight{padding:12px;gap:9px}
 #screen-complete .complete-sub{font-size:12px}
 #screen-complete .completion-workout{padding-top:12px}
}

/* One visual pattern for recap and movement benefits at every phone width. */
#screen-complete .complete-list,
#screen-complete .workout-benefits {
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:none;
}
#screen-complete .complete-list li,
#screen-complete .workout-benefits li {
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;
 min-width:0;text-align:center;font-size:11px;line-height:1.35;word-break:normal;overflow-wrap:normal;
}
#screen-complete .complete-list li > span:last-child,
#screen-complete .workout-benefits li > span:last-child {width:100%;min-width:0;}
#screen-complete .completion-benefit-icon {
 display:grid;place-items:center;box-sizing:border-box;width:36px;height:36px;flex:0 0 36px;
 margin:0 auto;padding:4px;border:1px solid #71caff66;border-radius:50%;
 background:linear-gradient(145deg,#338bd966,#0b356b99);box-shadow:inset 0 1px 3px #c1efff33;
}
#screen-complete .completion-benefit-icon img {
 display:block;box-sizing:border-box;width:26px;height:26px;object-fit:contain;
 margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
}
#screen-complete .workout-benefits {margin:12px 0;color:#e2efff;}

/* Recaps keep the emoji embedded in their daily message. Exercise art is transparent. */
#screen-complete .complete-recap-icon {font-size:22px;line-height:1;}
#screen-complete .workout-benefits .completion-benefit-icon {padding:0;border:0;background:none;box-shadow:none;}
#screen-complete .workout-benefits .completion-benefit-icon img {width:36px;height:36px;}