/* The viewport is divided into header, scrolling content and footer.
   The footer occupies its own flex row and never overlays the content. */
body.training-detail-theme{background:#f5f8f6!important}
html[data-theme=dark] body.training-detail-theme{background:#14221f!important}
.training-detail-theme .main{padding:0!important}
.training-detail-theme .sidebar{display:none}
.training-detail-theme .main{margin:0;max-width:none;width:100%}
.training-detail-theme .shell{max-width:none}
.td-page,.td-sheet{--td-bg:#f5f8f6;--td-paper:#fff;--td-ink:#233c45;--td-muted:#647c81;--td-line:#dce6e2;--td-accent:#277266;--td-soft:#e8f3ed;--td-button:#266b61;--td-on-button:#fff;color:var(--td-ink);background:var(--td-bg);font-size:16px;line-height:1.5}
html[data-theme=dark] :is(.td-page,.td-sheet){--td-bg:#14221f;--td-paper:#1c2e2a;--td-ink:#e9f1ec;--td-muted:#b0c5ba;--td-line:#385149;--td-accent:#a4d8bf;--td-soft:#29473c;--td-button:#a4d8bf;--td-on-button:#16372b}
.unified-ui .td-page{height:100vh;height:100dvh;max-width:520px;margin:0 auto;padding:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
.td-page *,.td-sheet *{box-sizing:border-box}
.td-page :is(h1,h2,h3,p),.td-sheet :is(h2,h3,p){margin:0}
.td-page button,.td-sheet button{font-family:inherit;cursor:pointer;touch-action:manipulation}
.td-page button:disabled{cursor:default;opacity:1}
.td-page svg,.td-sheet svg{display:block;flex:none}
.td-page svg,.td-sheet svg{width:20px;height:20px}
.td-page .td-icon-button svg,.td-sheet .td-icon-button svg{width:24px;height:24px}
.td-page .td-step-icon svg{width:19px;height:19px}
.td-page .td-check svg{width:12px;height:12px}
.td-page .td-text-button svg{width:15px;height:15px}
.td-page .td-help svg,.td-page .td-note svg{width:16px;height:16px}
.td-page .td-primary svg,.td-sheet .td-primary svg{width:23px;height:23px}
.td-page .td-round>span svg{width:32px;height:32px}
.td-page button:focus-visible,.td-sheet button:focus-visible{outline:3px solid #c38331;outline-offset:2px}
.td-topbar{flex:none;min-height:58px;padding:0 18px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
.td-page .td-topbar h1{font-size:20px;text-align:center;line-height:1.4;color:var(--td-ink);letter-spacing:.02em}
.td-page .td-icon-button,.td-sheet .td-icon-button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--td-ink);font-size:17px}
.td-page .td-type{background:var(--td-paper);border:1px solid var(--td-line)}
.td-content{flex:1;min-height:0;overflow-y:auto;padding:10px 20px 16px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--td-line) transparent}
.td-hero{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.td-art{width:86px;height:86px;flex:none;border-radius:22px;overflow:hidden;background:var(--td-soft)}
.td-art svg{width:100%;height:100%}
.td-category{display:block;font-size:12px;color:var(--td-accent);margin-bottom:4px;letter-spacing:.06em}
.td-page .td-hero-text h2{font-size:23px;line-height:1.4;letter-spacing:-.03em;color:var(--td-ink)}
.td-page .td-hero-text p{font-size:14px;color:var(--td-muted);margin-top:6px}
.td-hero-text p span+span:before{content:'·';margin:0 7px}
.td-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.td-page .td-heading h2{font-size:18px;line-height:1.4;color:var(--td-ink)}
.td-heading>span{font-size:12px;color:var(--td-muted)}
.td-page .td-text-button{display:flex;align-items:center;gap:4px;min-height:36px;padding:4px 0;border:0;background:transparent;color:var(--td-accent);font-size:14px;white-space:nowrap}
.td-steps{list-style:none;margin:0 0 16px;padding:3px 16px;background:var(--td-paper);border:1px solid var(--td-line);border-radius:20px}
.td-steps li{display:flex;align-items:center;gap:12px;min-height:59px;padding:8px 0}
.td-steps li+li{border-top:1px solid var(--td-line)}
.td-step-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:var(--td-soft);color:var(--td-accent)}
.td-steps strong{display:block;font-size:17px;line-height:1.4;font-weight:600}
.td-page .td-steps p{font-size:14px;line-height:1.5;color:var(--td-muted);margin-top:3px}
.td-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.td-page .td-choice{position:relative;min-height:75px;border:1px solid var(--td-line);border-radius:15px;padding:12px 14px;background:var(--td-paper);color:var(--td-ink);text-align:left}
.td-page .td-choice[aria-pressed=true]{border:2px solid var(--td-accent);padding:11px 13px;background:var(--td-soft)}
.td-choice strong{display:block;font-size:17px;line-height:1.4;font-weight:600}
.td-choice small{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:var(--td-muted)}
.td-choice[aria-pressed=true] strong{color:var(--td-accent)}
.td-check{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--td-accent);color:var(--td-bg)}
.td-help{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:8px}
.td-help button{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--td-muted);font-size:13px;padding:8px 0;min-height:40px}
.td-help i{width:1px;height:12px;background:var(--td-line)}
.td-footer{flex:none;z-index:1;border-top:1px solid var(--td-line);background:var(--td-paper);padding:10px 20px max(12px,env(safe-area-inset-bottom))}
.td-selection{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;line-height:1.4;margin-bottom:9px;color:var(--td-muted)}
.td-selection strong{font-weight:500;color:var(--td-ink)}
.td-selection strong i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--td-accent);margin-right:6px}
.td-selection>span{white-space:nowrap}
.td-page .td-primary,.td-sheet .td-primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin:0;border:0;border-radius:17px;padding:10px 16px;background:var(--td-button);color:var(--td-on-button);font-size:20px;font-weight:600;box-shadow:none}
.td-primary:active{transform:scale(.99)}
.td-photo{height:110px;border:1px solid var(--td-line);border-radius:20px;overflow:hidden;position:relative;margin-bottom:14px;background:var(--td-soft)}
.td-photo>img{display:block;width:100%;height:100%;object-fit:cover}
.td-photo:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0c261cc2);pointer-events:none}
.td-photo-caption{position:absolute;left:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:3px;color:#fff;max-width:60%}
.td-photo-caption strong{font-size:18px;line-height:1.4}
.td-photo-caption small{font-size:12px}
.td-page .td-change-photo{position:absolute;right:14px;bottom:15px;z-index:1;display:flex;align-items:center;gap:5px;min-height:42px;border:1px solid #ffffff85;border-radius:99px;padding:9px 13px;background:#ffffffed;color:#284c40;font-size:14px}
.td-jigsaw .td-hero{margin-bottom:12px}.td-jigsaw .td-category{display:none}
.td-page.td-jigsaw .td-hero-text h2{font-size:21px}.td-page.td-jigsaw .td-hero-text p{margin-top:3px}
.td-jigsaw .td-steps{margin-bottom:14px}.td-jigsaw .td-steps li{min-height:49px;padding:6px 0}
.td-jigsaw .td-steps strong{font-size:16px}.td-page.td-jigsaw .td-steps p{font-size:13px}
.td-jigsaw .td-choice{min-height:68px}.td-jigsaw .td-choice strong{font-size:19px}
.td-round{display:flex;align-items:center;gap:16px;border-radius:20px;padding:20px;background:var(--td-soft)}
.td-round>span{display:grid;place-items:center;flex:none;width:60px;height:60px;border-radius:50%;border:1px solid var(--td-line);color:var(--td-accent)}
.td-page .td-round h3{font-size:18px;margin-bottom:4px;color:var(--td-ink)}
.td-page .td-round p{font-size:14px;line-height:1.6;color:var(--td-muted)}
.td-page .td-note{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--td-muted);margin:12px 3px 6px}
.td-page .td-queue{font-size:14px;padding:10px;border-radius:12px;background:var(--td-soft);color:var(--td-accent);margin-bottom:12px}
/* Native dialog supplies modal focus trapping, backdrop and Android back support. */
dialog.td-sheet{position:fixed;inset:auto 0 0;margin:0 auto;padding:0;max-width:520px;width:100%;max-height:88vh;max-height:88dvh;border:1px solid var(--td-line);border-bottom:0;border-radius:26px 26px 0 0;background:var(--td-paper);overflow:hidden;box-shadow:0 -12px 40px #10251e18}
dialog.td-sheet[open]{display:flex;flex-direction:column}
.td-sheet::backdrop{background:#10251e70}
.td-grab{flex:none;width:38px;height:4px;border-radius:3px;background:var(--td-line);margin:10px auto 0}
.td-sheet-head{display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px;padding:14px 20px 8px}
.td-sheet .td-sheet-head h2{font-size:22px;color:var(--td-ink)}
.td-sheet-body{padding:8px 20px max(26px,env(safe-area-inset-bottom));overflow:auto;min-height:0;overscroll-behavior:contain}
.td-sheet .td-sheet-body p{font-size:16px;line-height:1.8;color:var(--td-muted);margin-bottom:15px}
.td-sheet .td-sheet-body h3{font-size:17px;color:var(--td-ink);margin:14px 0 5px}
.td-sheet .td-sheet-body .td-small{font-size:13px}
.td-sheet .td-primary{margin-top:20px;font-size:18px}
.td-sheet .jigsaw-gallery{padding:0;margin:0;border:0;box-shadow:none;background:transparent;color:var(--td-ink)}
.td-sheet .jigsaw-gallery-title{display:none}
.td-sheet .jigsaw-gallery-tabs{margin:0 0 15px;display:flex;gap:6px}
.td-sheet .jigsaw-gallery-tabs .chip{flex:1;min-width:0;min-height:44px;padding:8px 5px;border:1px solid var(--td-line);border-radius:14px;font-size:14px;background:var(--td-bg);color:var(--td-muted)}
.td-sheet .jigsaw-gallery-tabs .chip small{font-size:12px;color:var(--td-muted)}
.td-sheet .jigsaw-gallery-tabs .chip[aria-pressed=true]{color:var(--td-accent);border-color:var(--td-accent);background:var(--td-soft)}
.td-sheet .jigsaw-scenes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.td-sheet .jigsaw-scenes button{border:1px solid var(--td-line);border-radius:15px;overflow:hidden;background:var(--td-bg);color:var(--td-ink);padding:0}
.td-sheet .jigsaw-scenes button[aria-pressed=true]{outline:2px solid var(--td-accent);outline-offset:1px}
.td-sheet .jigsaw-scenes img{display:block;width:100%;height:105px;aspect-ratio:auto;object-fit:cover}
.td-sheet .jigsaw-scenes span{display:block;font-size:14px;padding:9px 10px}
.td-sheet .jigsaw-gallery-paging{margin:15px 0;color:var(--td-muted);font-size:14px}
.td-sheet .jigsaw-gallery-paging button{min-height:44px;background:var(--td-bg);color:var(--td-accent);border:1px solid var(--td-line);padding:8px 10px;font-size:14px}
.td-sheet .jigsaw-photo-source{background:var(--td-bg);color:var(--td-muted);border-color:var(--td-line);font-size:14px}
.td-sheet .jigsaw-photo-source a,.td-sheet .jigsaw-photo-source button{color:var(--td-accent)}
.td-demo{border:1px solid var(--td-line);background:var(--td-bg);border-radius:20px;padding:20px;text-align:center}
.td-demo-word{font-size:62px;font-weight:700;color:#2a6b98;margin:10px}
html[data-theme=dark] .td-demo-word{color:#9fc8e7}
.td-demo-answers{display:flex;gap:8px}
.td-demo-answers button{flex:1;min-height:48px;border:1px solid var(--td-line);border-radius:12px;background:var(--td-paper);color:var(--td-ink);font-size:18px}
.td-sheet .td-demo-result{min-height:28px;font-size:15px;margin:15px 0 0;color:var(--td-accent)}
.td-signal{width:100%;min-height:120px;border:0;border-radius:16px;background:#f7e1db;color:#84382f;font-size:22px;margin:10px 0}
.td-signal.ready{background:var(--td-button);color:var(--td-on-button)}
html[data-theme=dark] .unified-ui dialog.td-sheet{background:var(--td-paper);color:var(--td-ink);border-color:var(--td-line)}
html[data-theme=dark] .unified-ui .td-sheet::backdrop{background:#10251e70}
html[data-theme=dark] .unified-ui .td-sheet .jigsaw-gallery{background:transparent;border:0}
html[data-theme=dark] .unified-ui .td-sheet :is(.jigsaw-gallery-tabs .chip,.jigsaw-gallery-paging button,.jigsaw-scenes button,.jigsaw-photo-source){background:var(--td-bg);color:var(--td-muted);border-color:var(--td-line);box-shadow:none}
html[data-theme=dark] .unified-ui .td-sheet :is(.jigsaw-gallery-tabs .chip,.jigsaw-scenes button)[aria-pressed=true]{background:var(--td-soft);color:var(--td-accent);border-color:var(--td-accent)}
.large .td-hero-text h2{font-size:25px}.large .td-steps strong{font-size:19px}.large .td-page .td-steps p{font-size:16px}.large .td-choice strong{font-size:19px}.large .td-choice small{font-size:14px}.large .td-page .td-choice{min-height:86px}.large .td-selection{font-size:15px}.large .td-text-button,.large .td-help button{font-size:15px}.large .td-page .td-hero-text p{font-size:16px}.large .td-steps li{min-height:73px}.large .td-page .td-round p{font-size:17px}.large .td-heading>span,.large .td-category{font-size:14px}.large .td-jigsaw .td-steps li{min-height:66px}.large .td-jigsaw .td-steps strong{font-size:18px}.large .td-page.td-jigsaw .td-steps p{font-size:15px}.large .td-page.td-jigsaw .td-hero-text h2{font-size:23px}.td-large .td-sheet-body p{font-size:18px}.td-large .jigsaw-scenes span,.td-large .jigsaw-gallery-tabs .chip{font-size:16px}
@media(max-height:760px){.td-content{padding-top:7px}.td-art{width:60px;height:66px}.td-page .td-hero-text h2{font-size:21px}.td-hero{margin-bottom:10px}.td-steps li{min-height:53px;padding:6px 0}.td-steps{margin-bottom:12px}.td-heading{margin-bottom:7px}.td-page .td-choice{min-height:72px}.td-page.td-jigsaw .td-hero-text p{display:none}.td-jigsaw .td-photo{height:100px;margin-bottom:10px}.td-jigsaw .td-hero{margin-bottom:10px}.td-jigsaw .td-steps li{min-height:49px}.td-page.td-jigsaw .td-choice{min-height:64px;padding-top:8px;padding-bottom:8px}.td-footer{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.large .td-steps li{min-height:71px}.large .td-page .td-choice{min-height:84px}.large .td-jigsaw .td-steps li{min-height:63px}.large .td-page.td-jigsaw .td-choice{min-height:79px}}
@media(max-width:360px){.td-content,.td-footer{padding-left:16px;padding-right:16px}.td-hero{gap:12px}.td-page .td-hero-text h2{font-size:21px}.td-page .td-hero-text p{font-size:13px}.td-steps{padding-left:13px;padding-right:13px}.td-page .td-steps p{font-size:13px}.td-steps strong,.td-choice strong{font-size:16px}.td-category,.td-heading>span{font-size:11px}.large .td-page .td-hero-text h2{font-size:23px}.large .td-page .td-steps p{font-size:15px}.large .td-steps strong,.large .td-choice strong{font-size:18px}}