/* Learning navigation: recommendations, their evidence, and the next action. */
.smart-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 23px 0 28px;
  padding: 27px 28px;
  border: 1px solid #486347;
  border-radius: 12px;
  background: #234635;
  color: #fcfbf7;
}

.smart-entry-copy { min-width: 0; }
.smart-eyebrow { color: #e1d4a8; font-size: 11px; line-height: 1.7; }
.smart-entry h2 { margin: 8px 0 10px; font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.5; }
.smart-entry p { max-width: 55ch; color: #d7e0ce; font-size: 13px; line-height: 1.9; }
.smart-entry > .button { flex-shrink: 0; min-height: 46px; padding: 12px 17px; background: #e1d4a8; color: #234635; font-size: 13px; white-space: nowrap; }
.smart-entry > .button:hover { background: #eee3c2; }
.smart-entry > .button:focus-visible { outline: 2px solid #fcfbf7; outline-offset: 4px; }

dialog:has(.smart-workspace) { width: min(800px, calc(100% - 28px)); }
.smart-workspace { min-width: 0; }
.smart-workspace > section { margin-top: 28px; }
.smart-workspace h3 { font-size: 17px; font-weight: 600; line-height: 1.7; }
.smart-workspace .button { min-height: 44px; font-size: 13px; }
.smart-workspace input, .smart-workspace select, .smart-workspace textarea { border-color: #7d8f79; }
.smart-workspace :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid #765c2e; outline-offset: 3px; }

.smart-controls { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 15px; margin: 22px 0 17px; }
.smart-controls .field { min-width: 0; margin: 0; gap: 8px; }
.smart-controls label { font-size: 13px; line-height: 1.6; }
.smart-controls :is(input, select) { width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border-radius: 7px; background: #fcfbf7; color: #233f35; font-size: 14px; }

.smart-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 15px; padding: 20px 0; border-block: 1px solid #d2dbcd; }
.smart-summary > div { min-width: 0; padding: 0 22px; border-left: 1px solid #d2dbcd; }
.smart-summary > div:first-child { padding-left: 0; border-left: 0; }
.smart-summary > div:last-child { padding-right: 0; }
.smart-summary b { display: block; color: #233f35; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums; }
.smart-summary b small { margin-left: 5px; font-family: inherit; font-size: 12px; font-weight: 400; }
.smart-summary span { display: block; margin-top: 7px; color: #526156; font-size: 12px; line-height: 1.7; }
.smart-note { margin: 0 0 22px; color: #526156; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }

.smart-plan { display: grid; gap: 15px; padding: 0; margin: 22px 0 28px; list-style: none; counter-reset: smart-step; }
.smart-plan > li { position: relative; min-width: 0; padding: 21px 23px 22px 63px; border: 1px solid #cad6c4; border-radius: 10px; background: #f7f9f2; counter-increment: smart-step; }
.smart-plan > li::before { content: counter(smart-step, decimal-leading-zero); position: absolute; left: 21px; top: 20px; color: #765c2e; font-family: var(--serif); font-size: 20px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.smart-plan-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; }
.smart-kind { display: inline-flex; padding: 3px 8px; border: 1px solid #92a386; border-radius: 4px; color: #35543a; background: #eaf1e2; font-size: 11px; line-height: 1.6; }
.smart-plan-top > small { color: #526156; font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.smart-plan > li > h3 { margin: 13px 0 8px; font-size: 17px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.smart-plan > li > p { color: #526156; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.smart-plan > li > .button { margin-top: 17px; padding: 10px 14px; border-color: #94a38c; background: #fcfbf7; color: #31543b; }
.smart-plan > li > .button:hover { background: #eaf1e2; }
.smart-evidence { margin-top: 14px; padding-top: 10px; border-top: 1px solid #d4decd; }
.smart-evidence summary { width: fit-content; min-height: 36px; padding: 6px 0; color: #465e45; font-size: 12px; line-height: 1.8; cursor: pointer; }
.smart-evidence summary::marker { color: #765c2e; }
.smart-evidence p { margin-top: 4px; color: #526156; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }

.smart-radar { padding-top: 24px; border-top: 1px solid #d2dbcd; }
.smart-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 25px; list-style: none; padding: 0; margin: 19px 0 0; }
.smart-insights > li, .smart-insight { min-width: 0; padding-left: 14px; border-left: 2px solid #607c64; }
.smart-insights > li[data-type="warning"], .smart-insight[type="warning"] { border-left-color: #876528; }
.smart-insights > li[data-type="error"], .smart-insight[type="error"] { border-left-color: #9a4638; }
.smart-insights > li[data-type="info"], .smart-insight[type="info"] { border-left-color: #365c68; }
.smart-insights b, .smart-insight b { display: block; color: #233f35; font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.smart-insights p, .smart-insight p { margin-top: 7px; color: #526156; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.smart-insights .text-link, .smart-insight .text-link { margin-top: 7px; min-height: 44px; color: #31543b; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }

.smart-load { display: grid; grid-template-columns: repeat(7, minmax(64px, 1fr)); gap: 10px; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #839477 #eef2e8; margin-top: 18px; padding: 0 1px 13px; }
.smart-load-day { min-width: 0; padding: 12px 3px 7px; border-top: 1px solid #a7b79d; text-align: center; }
.smart-load-day > b { display: block; color: #3a543d; font-size: 12px; font-weight: 500; line-height: 1.7; }
.smart-load-meter { display: flex; align-items: flex-end; height: 72px; width: 26px; margin: 13px auto 12px; border-radius: 3px 3px 0 0; background: #e6ecdd; overflow: hidden; }
.smart-load-meter > i { display: block; flex: 1; max-height: 100%; background: #4c7151; border-radius: 3px 3px 0 0; }
.smart-load-day > strong, .smart-load-day > small { display: block; color: #526156; font-size: 11px; font-weight: 400; line-height: 1.9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.smart-load-day > strong { color: #294e37; font-size: 12px; font-weight: 500; margin-bottom: 3px; }
.smart-load-day[data-level="overload"] { border-top-color: #9a4638; }
.smart-load-day[data-level="overload"] .smart-load-meter > i { background: #9a4638; }

.smart-context { padding-top: 24px; border-top: 1px solid #d2dbcd; }
.smart-context > p { margin: 10px 0 17px; color: #526156; font-size: 13px; line-height: 1.9; }
.smart-context .field { max-width: 340px; margin: 16px 0; }
.smart-context .field label { font-size: 13px; }
.smart-context select { min-height: 44px; font-size: 14px; }
.smart-context textarea { display: block; width: 100%; min-width: 0; min-height: 200px; margin: 17px 0 12px; padding: 14px; border: 1px solid #7d8f79; border-radius: 8px; background: #fcfbf7; color: #233f35; font-size: 13px; line-height: 1.9; resize: vertical; }
.smart-context-preview { min-width: 0; }
.smart-empty { margin: 22px 0 25px; padding: 23px 20px; border: 1px solid #cad6c4; border-radius: 9px; background: #f2f5ec; color: #233f35; }
.smart-empty h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.smart-empty p { margin: 10px 0 0; color: #526156; font-size: 13px; line-height: 1.9; }
.smart-empty .button { margin-top: 17px; }

@media (max-width: 1000px) {
  .smart-entry { padding: 24px; gap: 20px; }
  .smart-entry h2 { font-size: 25px; }
  .smart-entry > .button { white-space: normal; }
}

@media (max-width: 650px) {
  .smart-entry { align-items: flex-start; flex-direction: column; gap: 18px; margin: 22px 0 26px; padding: 23px 20px; }
  .smart-entry h2 { font-size: 26px; }
  .smart-entry p { font-size: 13px; }
  .smart-entry > .button { padding: 12px 16px; }
  dialog:has(.smart-workspace) { width: calc(100% - 24px); }
  .smart-controls { grid-template-columns: 1fr; gap: 15px; margin-top: 20px; }
  .smart-controls :is(input, select), .smart-context select { font-size: 16px; }
  .smart-summary { margin-top: 23px; padding: 17px 0; }
  .smart-summary > div { padding-inline: 12px; }
  .smart-summary b { font-size: 26px; }
  .smart-summary b small { display: block; margin: 3px 0 0; font-size: 12px; }
  .smart-summary span { font-size: 12px; margin-top: 5px; }
  .smart-note { font-size: 13px; }
  .smart-plan { gap: 13px; }
  .smart-plan > li { padding: 19px 16px; }
  .smart-plan > li::before { left: 16px; top: 17px; font-size: 19px; }
  .smart-plan-top { padding-left: 33px; }
  .smart-plan > li > h3 { font-size: 17px; margin-top: 15px; }
  .smart-plan > li > p { font-size: 13px; }
  .smart-evidence summary { min-height: 44px; padding-block: 10px; font-size: 12px; }
  .smart-insights { grid-template-columns: 1fr; gap: 21px; }
  .smart-insights p, .smart-insight p { font-size: 13px; }
  .smart-load { gap: 10px; grid-template-columns: repeat(7, minmax(69px, 1fr)); }
  .smart-load-day > small { font-size: 12px; }
  .smart-context .field { max-width: none; }
  .smart-context textarea { font-size: 14px; }
  .smart-workspace > section { margin-top: 26px; }
}

@media (max-width: 360px) {
  .smart-summary > div { padding-inline: 8px; }
  .smart-summary b { font-size: 24px; }
  .smart-summary span { font-size: 12px; }
  .smart-plan > li { padding-inline: 13px; }
  .smart-plan > li::before { left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-entry .button, .smart-workspace .button { transition: none; }
  .smart-entry .button:active, .smart-entry .button:hover, .smart-workspace .button:active, .smart-workspace .button:hover { transform: none; }
}

@media (forced-colors: active) {
  .smart-entry, .smart-plan > li, .smart-empty, .smart-context textarea { border: 1px solid CanvasText; }
  .smart-load-meter { border: 1px solid CanvasText; }
  .smart-load-meter > i { background: Highlight; }
  .smart-insights > li { border-color: CanvasText; }
}