:root{
--po-paper:#f3f1eb;
--po-paper-2:#e9e5dc;
--po-card:#faf9f5;
--po-ink:#171b20;
--po-copy:#5e6368;
--po-line:#cbc6bc;
--po-dark:#151a1f;
--po-dark-2:#20262d;
--po-dark-3:#2d343c;
--po-gold:#b38a43;
--po-gold-2:#d3ab62;
--po-cream:#eee2cb;
--po-soft:#e5e3df;
--po-green:#66926f;
--po-white:#fff;
}
html,body{margin:0!important;padding:0!important;width:100%;max-width:100%;}
body{background:var(--po-dark);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Helvetica Neue",Arial,sans-serif;}
body.elementor-page .elementor,
body.elementor-page .elementor-section-wrap,
body.elementor-page .elementor-widget-html,
body.elementor-page .elementor-widget-html>.elementor-widget-container,
body.elementor-page .elementor .e-con,
body.elementor-page .elementor .e-con-inner,
body.elementor-page .site-main,
body.elementor-page .page-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;gap:0!important;overflow:visible!important;}
.po-top,.po-top *{box-sizing:border-box;}
.po-top a{text-decoration:none;}
button{font:inherit;}
/* =============== HEADER =============== */
.po-header{position:fixed;top:0;left:0;right:0;height:72px;z-index:900;pointer-events:none;}
.po-logo{position:absolute;left:26px;top:27px;color:var(--po-ink)!important;pointer-events:auto;transition:color .25s ease;}
.po-logo strong{display:block;font-size:23px;font-weight:950;line-height:1;letter-spacing:1.5px;white-space:nowrap;}
.po-logo small{display:block;margin-top:8px;font-size:9px;font-weight:800;letter-spacing:2.3px;opacity:.66;white-space:nowrap;}
.po-actions{position:absolute;right:24px;top:20px;display:flex;gap:8px;pointer-events:auto;}
.po-head-btn{display:inline-flex;min-height:35px;padding:0 15px;align-items:center;justify-content:center;border:1px solid rgba(23,27,32,.5);background:rgba(243,241,235,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--po-ink)!important;font-size:10px;font-weight:900;letter-spacing:1.2px;cursor:pointer;transition:.2s ease;}
.po-head-btn:hover,.po-head-btn[aria-expanded="true"]{background:var(--po-dark);border-color:var(--po-dark);color:#fff!important;}
.po-explore-icon{display:inline-block;position:relative;width:13px;height:10px;margin-right:8px;}
.po-explore-icon:before,.po-explore-icon:after,.po-explore-icon span{content:"";position:absolute;left:0;width:13px;height:1px;background:currentColor;}
.po-explore-icon:before{top:0}.po-explore-icon span{top:4px}.po-explore-icon:after{top:8px}
/* =============== DESKTOP =============== */
.po-desktop{position:relative;width:100%;height:100svh;min-height:680px;overflow:hidden;background:var(--po-paper);}
.po-scenes{position:absolute;inset:0;}
.po-scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(30px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,.61,.36,1),visibility .35s;overflow:hidden;background:var(--po-paper);color:var(--po-ink);}
.po-scene.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
.po-scene-inner{height:100%;padding:86px 340px 24px 28px;}
.po-scene-canvas{height:100%;min-height:0;display:flex;flex-direction:column;}
.po-eyebrow{margin:0 0 10px;color:var(--po-gold);font-size:10px;font-weight:950;letter-spacing:.20em;}
.po-scene-title{margin:0;color:var(--po-ink);font-size:clamp(42px,4.2vw,76px);font-weight:950;line-height:.98;letter-spacing:-.055em;}
.po-scene-copy{margin:0;color:var(--po-copy);font-size:clamp(12px,.9vw,16px);line-height:1.85;}
.po-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.58fr);align-items:end;gap:48px;margin-bottom:22px;}
/* Desktop vertical scene navigation */
.po-scene-nav{position:fixed;z-index:850;right:24px;top:70px;display:flex;align-items:flex-start;}
.po-scene-nav button{position:relative;display:flex;width:46px;min-height:168px;padding:11px 10px 24px;align-items:center;justify-content:flex-start;border:0;border-left:1px solid rgba(23,27,32,.25);background:transparent;color:var(--po-ink);font-size:11px;font-weight:900;line-height:1.22;letter-spacing:.03em;writing-mode:vertical-rl;text-orientation:upright;cursor:pointer;transition:.18s ease;}
.po-scene-nav button:last-child{border-right:1px solid rgba(23,27,32,.25);}
.po-scene-nav button:after{content:"↓";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);writing-mode:horizontal-tb;font-size:10px;opacity:.55;}
.po-scene-nav button:hover,.po-scene-nav button.is-active{background:var(--po-dark);color:#fff;border-left-color:var(--po-dark);}
.po-scene-nav button.is-active:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--po-gold-2);}
/* =============== START HERE / CONVERSATION =============== */
.po-start-layout{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);height:100%;border:1px solid var(--po-line);background:var(--po-card);}
.po-start-sidebar{display:flex;flex-direction:column;min-height:0;background:var(--po-dark);color:#fff;padding:24px 20px 18px;}
.po-start-sidebar .po-eyebrow{color:var(--po-gold-2);}
.po-start-sidebar h2{margin:0 0 8px;font-size:26px;line-height:1.15;}
.po-start-sidebar>p{margin:0 0 20px;color:#aeb5bc;font-size:12px;line-height:1.7;}
.po-journey-steps{display:grid;gap:7px;margin-top:4px;}
.po-journey-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:12px 10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);cursor:pointer;color:#fff;text-align:left;}
.po-journey-step:hover{background:rgba(255,255,255,.08);}
.po-journey-step span{display:grid;width:30px;height:30px;place-items:center;border:1px solid rgba(255,255,255,.25);font-size:9px;font-weight:950;}
.po-journey-step strong{display:block;margin:1px 0 4px;font-size:13px;}
.po-journey-step small{display:block;color:#aeb5bc;font-size:9px;line-height:1.45;}
.po-start-sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:9px;line-height:1.6;color:#8d979f;letter-spacing:.06em;}
.po-start-main{min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(22px,2.3vw,38px) clamp(26px,3vw,54px) 22px;background:var(--po-paper);overflow:auto;}
.po-start-head{display:flex;justify-content:space-between;gap:30px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--po-line);}
.po-start-head h1{margin:0;font-size:clamp(36px,3.7vw,66px);font-weight:950;line-height:.96;letter-spacing:-.055em;}
.po-start-head p{max-width:420px;margin:0;color:var(--po-copy);font-size:clamp(11px,.82vw,14px);line-height:1.8;}
.po-chat{display:grid;gap:15px;margin-top:20px;max-width:1120px;}
.po-chat-row{display:flex;gap:14px;align-items:flex-start;}
.po-chat-row.captain{flex-direction:row-reverse;}
.po-avatar{flex:0 0 58px;text-align:center;}
.po-avatar img{display:block;width:54px;height:54px;border:1px solid #aaa49a;border-radius:50%;object-fit:cover;background:#fff;}
.po-avatar small{display:block;margin-top:5px;color:#77716a;font-size:8px;font-weight:800;}
.po-chat-bubble{position:relative;max-width:min(80%,820px);padding:15px 18px;border-radius:9px;font-size:clamp(13px,.95vw,17px);line-height:1.75;}
.po-chat-row.fo .po-chat-bubble{background:var(--po-soft);color:var(--po-ink);}
.po-chat-row.captain .po-chat-bubble{background:var(--po-cream);color:#302a22;}
.po-chat-bubble strong{font-weight:950;}
.po-guide-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px;}
.po-guide-card{display:block;padding:13px 14px;border:1px solid var(--po-line);background:var(--po-card);color:var(--po-ink)!important;cursor:pointer;transition:.18s ease;}
.po-guide-card:hover{transform:translateY(-2px);border-color:#8c857a;box-shadow:0 10px 22px rgba(23,27,32,.06);}
.po-guide-card small{display:block;margin-bottom:7px;color:var(--po-gold);font-size:8px;font-weight:950;letter-spacing:.12em;}
.po-guide-card strong{display:block;font-size:clamp(13px,1vw,17px);line-height:1.3;}
.po-guide-card span{display:block;margin-top:6px;color:var(--po-copy);font-size:9px;line-height:1.5;}
/* =============== GUIDED CHOICE / BECOME + LEARNING =============== */
.po-guidance-row{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
gap:10px;
margin-bottom:12px;
}
.po-mini-dialogue{
display:grid;
gap:8px;
padding:12px 14px;
border:1px solid var(--po-line);
background:var(--po-card);
}
.po-mini-dialogue .po-chat-row{
gap:10px;
margin:0;
}
.po-mini-dialogue .po-avatar{
flex:0 0 44px;
}
.po-mini-dialogue .po-avatar img{
width:42px;
height:42px;
}
.po-mini-dialogue .po-avatar small{
margin-top:3px;
font-size:7px;
}
.po-mini-dialogue .po-chat-bubble{
max-width:calc(100% - 54px);
padding:10px 13px;
border-radius:7px;
font-size:clamp(11px,.74vw,13px);
line-height:1.65;
}
.po-choice-panel{
padding:12px 14px;
border:1px solid var(--po-line);
background:var(--po-paper-2);
}
.po-choice-title{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-bottom:9px;
}
.po-choice-title strong{
color:var(--po-ink);
font-size:13px;
}
.po-choice-title span{
color:#888176;
font-size:8px;
font-weight:850;
letter-spacing:.08em;
}
.po-choice-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
button.po-choice-card{
appearance:none!important;
width:100%!important;
margin:0!important;
padding:9px 10px!important;
border:1px solid #c9c3b8!important;
border-radius:2px!important;
background:#faf9f5!important;
color:var(--po-ink)!important;
text-align:left!important;
font-family:inherit!important;
cursor:pointer!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
button.po-choice-card:hover{
transform:translateY(-1px);
border-color:#8f877b!important;
background:#fff!important;
}
button.po-choice-card.is-active{
border-color:var(--po-gold)!important;
background:#efe5d3!important;
box-shadow:inset 3px 0 0 var(--po-gold)!important;
}
.po-choice-card small{
display:block;
margin-bottom:3px;
color:var(--po-gold)!important;
font-size:7px;
font-weight:950;
letter-spacing:.1em;
}
.po-choice-card strong{
display:block;
color:inherit!important;
font-size:10.5px;
line-height:1.35;
}
.po-choice-result{
margin:8px 0 0;
padding-top:8px;
border-top:1px solid #d5cfc5;
color:#625d55;
font-size:8.5px;
line-height:1.55;
}
.po-choice-result strong{
color:var(--po-ink);
}
/* =============== BECOME =============== */
.po-route-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
flex:1;
min-height:0;
}
.po-route{
display:flex;
flex-direction:column;
min-height:0;
padding:clamp(16px,1.5vw,24px);
border:1px solid var(--po-line);
background:var(--po-card);
transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.po-route-num{color:#9c958b;font-size:9px;font-weight:950;letter-spacing:.12em;}
.po-route h3{margin:14px 0 7px;font-size:clamp(18px,1.4vw,26px);line-height:1.15;}
.po-route>p{margin:0;color:var(--po-copy);font-size:clamp(10px,.75vw,13px);line-height:1.7;}
.po-route-details{display:grid;gap:8px;margin-top:auto;padding-top:14px;}
.po-route-details div{padding-top:8px;border-top:1px solid #dedad1;}
.po-route-details small{display:block;margin-bottom:3px;color:var(--po-gold);font-size:7px;font-weight:950;letter-spacing:.1em;}
.po-route-details span{font-size:clamp(9px,.7vw,12px);line-height:1.5;}
.po-route.is-muted{opacity:.34;}
.po-route.is-recommended{
opacity:1;
border-color:var(--po-gold);
box-shadow:0 12px 28px rgba(76,59,31,.10);
transform:translateY(-2px);
}
.po-next-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;padding:14px 16px;border:1px solid var(--po-line);background:var(--po-dark);color:#fff;}
.po-next-cta p{margin:0;font-size:12px;line-height:1.6;}
.po-next-cta button{border:1px solid rgba(255,255,255,.42);background:transparent;color:#fff;padding:10px 14px;font-size:9px;font-weight:950;letter-spacing:.1em;cursor:pointer;}
/* =============== ONLINE LEARNING =============== */
.po-learning-choice-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.po-course-grid{
display:grid;
grid-template-columns:1.15fr .9fr .9fr .95fr;
gap:10px;
flex:1;
min-height:0;
}
.po-course-group{
position:relative;
padding:14px 16px;
border:2px solid #aaa398;
background:var(--po-card);
overflow:auto;
transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.po-course-head{display:flex;align-items:end;justify-content:space-between;gap:10px;padding-bottom:9px;margin-bottom:3px;border-bottom:2px solid var(--po-dark);}
.po-course-head h3{margin:0;font-size:clamp(20px,1.7vw,30px);}
.po-course-head small{font-size:8px;color:#8e877c;font-weight:900;letter-spacing:.08em;}
.po-course-link{
position:relative;
display:flex;
justify-content:space-between;
gap:10px;
padding:8px 2px;
border-bottom:1px solid #d6d1c7;
color:var(--po-ink)!important;
font-size:clamp(11px,.82vw,14px);
font-weight:800;
line-height:1.3;
transition:background .16s ease,padding .16s ease;
}
.po-course-link:after{content:"→";color:var(--po-gold);}
.po-course-link:hover{background:#eeeae1;padding-left:6px;}
.po-course-group.is-muted{opacity:.32;}
.po-course-group.is-recommended{
opacity:1;
border-color:var(--po-gold);
box-shadow:0 12px 28px rgba(76,59,31,.10);
transform:translateY(-2px);
}
.po-course-link.is-recommended{
margin:2px -7px;
padding:8px 7px;
border-bottom-color:#d4b577;
background:#efe5d3;
}
.po-course-link.is-recommended:before{
content:"RECOMMENDED";
position:absolute;
right:23px;
top:50%;
transform:translateY(-50%);
color:#9b7330;
font-size:6px;
font-weight:950;
letter-spacing:.08em;
}
@media(max-width:1250px) and (min-width:901px){
.po-guidance-row{
grid-template-columns:1fr;
}
.po-mini-dialogue{
grid-template-columns:1fr 1fr;
}
.po-mini-dialogue .po-chat-row.captain{
flex-direction:row;
}
.po-learning-choice-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
/* =============== V9 / GUIDANCE-FIRST BALANCE =============== */
/* The conversation + guided choice is the primary entry point.
The lower route/course lists should only use the height they need. */
.po-guidance-row{
grid-template-columns:minmax(0,1.12fr) minmax(440px,.88fr);
gap:14px;
margin-bottom:14px;
flex:0 0 auto;
}
.po-mini-dialogue{
gap:11px;
min-height:190px;
padding:17px 18px;
}
.po-mini-dialogue .po-chat-row{
gap:12px;
}
.po-mini-dialogue .po-avatar{
flex-basis:54px;
}
.po-mini-dialogue .po-avatar img{
width:52px;
height:52px;
}
.po-mini-dialogue .po-avatar small{
margin-top:4px;
font-size:7.5px;
}
.po-mini-dialogue .po-chat-bubble{
max-width:calc(100% - 66px);
padding:13px 16px;
font-size:clamp(12.5px,.88vw,15px);
line-height:1.72;
}
.po-choice-panel{
min-height:190px;
padding:16px 17px;
}
.po-choice-title{
margin-bottom:12px;
}
.po-choice-title strong{
font-size:15px;
}
.po-choice-title span{
font-size:8px;
}
.po-choice-grid{
gap:8px;
}
button.po-choice-card{
min-height:55px!important;
padding:11px 12px!important;
}
.po-choice-card small{
margin-bottom:4px;
font-size:7.5px;
}
.po-choice-card strong{
font-size:12px;
line-height:1.35;
}
.po-choice-result{
margin-top:11px;
padding-top:10px;
font-size:9.5px;
line-height:1.6;
}
/* Route cards: compact reference, not the main event. */
.po-route-grid{
flex:0 0 auto;
align-items:start;
gap:8px;
}
.po-route{
min-height:0;
height:auto;
padding:13px 14px;
}
.po-route-num{
font-size:8px;
}
.po-route h3{
margin:9px 0 5px;
font-size:clamp(17px,1.22vw,22px);
}
.po-route>p{
font-size:clamp(9.5px,.68vw,11.5px);
line-height:1.58;
}
.po-route-details{
gap:5px;
margin-top:10px;
padding-top:0;
}
.po-route-details div{
display:grid;
grid-template-columns:46px minmax(0,1fr);
gap:7px;
align-items:start;
padding-top:5px;
}
.po-route-details small{
margin:0;
font-size:6.5px;
}
.po-route-details span{
font-size:clamp(8.5px,.62vw,10.5px);
line-height:1.4;
}
.po-next-cta{
flex:0 0 auto;
margin-top:9px;
padding:10px 13px;
}
.po-next-cta p{
font-size:10.5px;
line-height:1.5;
}
.po-next-cta button{
padding:8px 12px;
font-size:8px;
}
/* Course library: groups stop at their actual content height. */
.po-course-grid{
flex:0 0 auto;
align-items:start;
gap:8px;
}
.po-course-group{
height:auto;
min-height:0;
padding:10px 12px;
overflow:visible;
}
.po-course-head{
padding-bottom:6px;
margin-bottom:1px;
}
.po-course-head h3{
font-size:clamp(18px,1.45vw,25px);
}
.po-course-head small{
font-size:7px;
}
.po-course-link{
padding:5.5px 2px;
font-size:clamp(10px,.72vw,12.5px);
line-height:1.25;
}
.po-course-link.is-recommended{
margin:1px -5px;
padding:5.5px 5px;
}
.po-course-link.is-recommended:before{
right:21px;
font-size:5.5px;
}
/* On shorter laptop screens, preserve the guidance area first. */
@media(max-height:780px) and (min-width:901px){
.po-guidance-row{
gap:10px;
margin-bottom:9px;
}
.po-mini-dialogue,
.po-choice-panel{
min-height:160px;
padding:12px 14px;
}
.po-mini-dialogue .po-avatar{
flex-basis:46px;
}
.po-mini-dialogue .po-avatar img{
width:44px;
height:44px;
}
.po-mini-dialogue .po-chat-bubble{
max-width:calc(100% - 56px);
padding:9px 12px;
font-size:11.5px;
line-height:1.55;
}
button.po-choice-card{
min-height:44px!important;
padding:8px 9px!important;
}
.po-choice-result{
margin-top:7px;
padding-top:7px;
}
.po-route{
padding:10px 11px;
}
.po-route h3{
margin:6px 0 4px;
}
.po-route>p{
line-height:1.45;
}
.po-route-details{
gap:3px;
margin-top:6px;
}
.po-route-details div{
padding-top:3px;
}
.po-course-group{
padding:8px 10px;
}
.po-course-link{
padding:4px 2px;
}
}
@media(max-width:1250px) and (min-width:901px){
.po-guidance-row{
grid-template-columns:minmax(0,1fr);
}
.po-mini-dialogue{
grid-template-columns:1fr 1fr;
min-height:0;
}
.po-choice-panel{
min-height:0;
}
}
/* =============== V10 / THREE-STAGE GUIDANCE =============== */
/* 1. Conversation
2. Guided choice
3. Route / Course reference list */
.po-guidance-row{
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
margin-bottom:12px!important;
}
/* Stage 1 / Conversation */
.po-mini-dialogue{
display:grid!important;
grid-template-columns:1fr!important;
gap:9px!important;
width:100%!important;
min-height:0!important;
padding:15px 18px!important;
}
.po-mini-dialogue .po-chat-row{
width:100%!important;
max-width:none!important;
}
.po-mini-dialogue .po-chat-row.fo{
padding-right:12%!important;
}
.po-mini-dialogue .po-chat-row.captain{
padding-left:12%!important;
}
.po-mini-dialogue .po-chat-bubble{
width:auto!important;
max-width:min(78%,920px)!important;
padding:12px 16px!important;
font-size:clamp(12.5px,.86vw,15px)!important;
line-height:1.7!important;
}
/* Stage 2 / Guided choice */
.po-choice-panel{
width:100%!important;
min-height:0!important;
padding:13px 15px 14px!important;
}
.po-choice-title{
margin-bottom:9px!important;
}
.po-choice-title strong{
font-size:14px!important;
}
.po-choice-grid{
display:grid!important;
gap:7px!important;
}
/* 4 choices for How to Become a Pilot */
.po-choice-grid:not(.po-learning-choice-grid){
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
/* 6 choices for Online Learning */
.po-learning-choice-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
button.po-choice-card{
min-height:50px!important;
padding:9px 10px!important;
}
.po-choice-card strong{
font-size:11px!important;
}
.po-choice-result{
margin-top:8px!important;
padding-top:8px!important;
font-size:9px!important;
}
/* Stage 3 / Compact reference */
.po-route-grid,
.po-course-grid{
margin-top:0!important;
flex:0 0 auto!important;
}
.po-route{
padding:11px 12px!important;
}
.po-route h3{
margin:7px 0 4px!important;
font-size:clamp(16px,1.15vw,21px)!important;
}
.po-route>p{
font-size:clamp(9px,.64vw,11px)!important;
line-height:1.48!important;
}
.po-route-details{
margin-top:7px!important;
gap:3px!important;
}
.po-route-details div{
padding-top:3px!important;
}
.po-course-group{
padding:9px 11px!important;
}
.po-course-link{
padding:4.5px 2px!important;
font-size:clamp(9.5px,.68vw,12px)!important;
}
/* Medium desktop / laptop */
@media(max-width:1360px) and (min-width:901px){
.po-learning-choice-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.po-choice-grid:not(.po-learning-choice-grid){
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.po-mini-dialogue .po-chat-row.fo{
padding-right:7%!important;
}
.po-mini-dialogue .po-chat-row.captain{
padding-left:7%!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:84%!important;
}
}
/* Short screens: still keep the same 3-stage structure,
only tighten vertical spacing. */
@media(max-height:780px) and (min-width:901px){
.po-guidance-row{
gap:7px!important;
margin-bottom:8px!important;
}
.po-mini-dialogue{
gap:6px!important;
padding:10px 13px!important;
}
.po-mini-dialogue .po-avatar{
flex-basis:42px!important;
}
.po-mini-dialogue .po-avatar img{
width:40px!important;
height:40px!important;
}
.po-mini-dialogue .po-chat-bubble{
padding:8px 11px!important;
font-size:11px!important;
line-height:1.5!important;
}
.po-choice-panel{
padding:9px 11px 10px!important;
}
button.po-choice-card{
min-height:40px!important;
padding:6px 8px!important;
}
.po-choice-card strong{
font-size:10px!important;
}
.po-route{
padding:8px 9px!important;
}
.po-course-group{
padding:7px 9px!important;
}
.po-course-link{
padding:3.5px 2px!important;
}
}
/* =============== V11 / 2 TURNS + 2 ROW CHOICE + FULL LIST =============== */
/* Overall 3-stage flow:
1) conversation
2) choice cards in two rows
3) list fills all remaining space */
.po-scene[data-panel="become"] .po-scene-canvas,
.po-scene[data-panel="learning"] .po-scene-canvas{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
}
/* Stage 1: two round trips, full width */
.po-guidance-row{
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
margin-bottom:10px!important;
flex:0 0 auto!important;
}
.po-mini-dialogue{
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
width:100%!important;
min-height:0!important;
padding:12px 16px!important;
}
.po-mini-dialogue .po-chat-row{
width:100%!important;
max-width:none!important;
}
.po-mini-dialogue .po-chat-row.fo{
padding-right:11%!important;
}
.po-mini-dialogue .po-chat-row.captain{
padding-left:11%!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:min(80%,980px)!important;
padding:10px 14px!important;
font-size:clamp(11.5px,.78vw,14px)!important;
line-height:1.62!important;
}
/* Stage 2: two rows, much clearer/larger */
.po-choice-panel{
width:100%!important;
min-height:0!important;
padding:12px 14px!important;
}
.po-choice-title{
margin-bottom:10px!important;
}
.po-choice-title strong{
font-size:clamp(15px,1.05vw,18px)!important;
}
.po-choice-title span{
font-size:8px!important;
}
.po-choice-grid{
display:grid!important;
gap:9px!important;
}
/* 4 cards -> 2 x 2 */
.po-choice-grid:not(.po-learning-choice-grid){
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
/* 6 cards -> 3 x 2 */
.po-learning-choice-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
button.po-choice-card{
min-height:64px!important;
padding:11px 14px!important;
}
.po-choice-card small{
margin-bottom:5px!important;
font-size:8px!important;
}
.po-choice-card strong{
font-size:clamp(13px,.9vw,16px)!important;
line-height:1.35!important;
}
.po-choice-result{
margin-top:9px!important;
padding-top:9px!important;
font-size:10px!important;
line-height:1.55!important;
}
/* Stage 3: fill whatever height is left */
.po-route-grid,
.po-course-grid{
flex:1 1 auto!important;
min-height:0!important;
height:auto!important;
margin-top:0!important;
align-items:stretch!important;
}
/* Route cards stretch to remaining height */
.po-route-grid{
gap:9px!important;
}
.po-route{
height:100%!important;
min-height:0!important;
padding:clamp(13px,1vw,18px)!important;
overflow:auto!important;
}
.po-route h3{
margin:9px 0 6px!important;
font-size:clamp(18px,1.35vw,25px)!important;
}
.po-route>p{
font-size:clamp(10px,.72vw,12.5px)!important;
line-height:1.58!important;
}
.po-route-details{
margin-top:auto!important;
padding-top:10px!important;
gap:6px!important;
}
.po-route-details div{
padding-top:6px!important;
}
.po-route-details small{
font-size:7px!important;
}
.po-route-details span{
font-size:clamp(9px,.66vw,11.5px)!important;
}
/* Course groups also use the remaining height */
.po-course-grid{
gap:9px!important;
}
.po-course-group{
height:100%!important;
min-height:0!important;
padding:12px 14px!important;
overflow:auto!important;
}
.po-course-head{
position:sticky!important;
top:-12px!important;
z-index:2!important;
margin:-12px -14px 2px!important;
padding:12px 14px 8px!important;
background:var(--po-card)!important;
}
.po-course-head h3{
font-size:clamp(20px,1.55vw,28px)!important;
}
.po-course-link{
padding:7px 2px!important;
font-size:clamp(10.5px,.76vw,13.5px)!important;
line-height:1.3!important;
}
/* CTA should not steal large vertical space */
.po-next-cta{
flex:0 0 auto!important;
margin-top:8px!important;
padding:9px 12px!important;
}
.po-next-cta p{
font-size:10px!important;
}
.po-next-cta button{
padding:8px 11px!important;
}
/* Short laptop screens: preserve the structure, let stage 3 scroll internally */
@media(max-height:820px) and (min-width:901px){
.po-guidance-row{
gap:7px!important;
margin-bottom:7px!important;
}
.po-mini-dialogue{
gap:5px!important;
padding:8px 11px!important;
}
.po-mini-dialogue .po-avatar{
flex-basis:40px!important;
}
.po-mini-dialogue .po-avatar img{
width:38px!important;
height:38px!important;
}
.po-mini-dialogue .po-chat-row.fo{
padding-right:6%!important;
}
.po-mini-dialogue .po-chat-row.captain{
padding-left:6%!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:86%!important;
padding:7px 10px!important;
font-size:10.5px!important;
line-height:1.45!important;
}
.po-choice-panel{
padding:8px 10px!important;
}
.po-choice-title{
margin-bottom:6px!important;
}
button.po-choice-card{
min-height:46px!important;
padding:7px 9px!important;
}
.po-choice-card small{
margin-bottom:2px!important;
font-size:6.5px!important;
}
.po-choice-card strong{
font-size:10.5px!important;
}
.po-choice-result{
margin-top:5px!important;
padding-top:5px!important;
font-size:8px!important;
}
.po-route{
padding:9px 10px!important;
}
.po-route h3{
margin:6px 0 4px!important;
}
.po-route-details{
gap:3px!important;
padding-top:5px!important;
}
.po-course-group{
padding:8px 10px!important;
}
.po-course-head{
top:-8px!important;
margin:-8px -10px 1px!important;
padding:8px 10px 5px!important;
}
.po-course-link{
padding:4px 2px!important;
}
}
/* Narrower desktop: keep the selection area in exactly two rows */
@media(max-width:1180px) and (min-width:901px){
.po-choice-grid:not(.po-learning-choice-grid){
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.po-learning-choice-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.po-mini-dialogue .po-chat-row.fo{
padding-right:5%!important;
}
.po-mini-dialogue .po-chat-row.captain{
padding-left:5%!important;
}
}
/* =============== V12 / MATCH START HERE VISUAL LANGUAGE =============== */
/* Stage 1: conversation floats directly on the page, like START HERE. */
.po-mini-dialogue{
border:0!important;
background:transparent!important;
padding:2px 0 4px!important;
gap:12px!important;
}
.po-mini-dialogue .po-chat-row{
gap:14px!important;
margin:0!important;
}
.po-mini-dialogue .po-avatar{
flex:0 0 58px!important;
}
.po-mini-dialogue .po-avatar img{
width:54px!important;
height:54px!important;
}
.po-mini-dialogue .po-avatar small{
margin-top:5px!important;
font-size:8px!important;
}
.po-mini-dialogue .po-chat-row.fo{
padding-right:8%!important;
}
.po-mini-dialogue .po-chat-row.captain{
padding-left:8%!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:min(80%,820px)!important;
padding:15px 18px!important;
border-radius:9px!important;
font-size:clamp(13px,.95vw,17px)!important;
line-height:1.75!important;
}
/* Stage 2: remove the big wrapper completely.
Only the individual choice cards remain, matching START HERE. */
.po-choice-panel{
border:0!important;
background:transparent!important;
padding:0!important;
}
.po-choice-title{
margin:2px 0 10px!important;
padding:0!important;
}
.po-choice-title strong{
font-size:clamp(14px,1vw,17px)!important;
}
.po-choice-title span{
font-size:8px!important;
}
.po-choice-grid{
gap:8px!important;
}
button.po-choice-card{
min-height:68px!important;
padding:13px 14px!important;
border:1px solid var(--po-line)!important;
border-radius:0!important;
background:var(--po-card)!important;
color:var(--po-ink)!important;
box-shadow:none!important;
}
button.po-choice-card:hover{
transform:translateY(-2px)!important;
border-color:#8c857a!important;
background:var(--po-card)!important;
box-shadow:0 10px 22px rgba(23,27,32,.06)!important;
}
button.po-choice-card.is-active{
border-color:var(--po-gold)!important;
background:#f2eadc!important;
box-shadow:none!important;
}
.po-choice-card small{
display:block!important;
margin-bottom:7px!important;
color:var(--po-gold)!important;
font-size:8px!important;
font-weight:950!important;
letter-spacing:.12em!important;
}
.po-choice-card strong{
display:block!important;
font-size:clamp(13px,1vw,17px)!important;
line-height:1.3!important;
}
.po-choice-result{
margin:9px 0 0!important;
padding:0!important;
border:0!important;
color:var(--po-copy)!important;
font-size:10px!important;
line-height:1.6!important;
}
/* Keep the two-row structure. */
.po-choice-grid:not(.po-learning-choice-grid){
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.po-learning-choice-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
/* Give the lower lists the remaining room. */
.po-route-grid,
.po-course-grid{
flex:1 1 auto!important;
min-height:0!important;
align-items:stretch!important;
}
.po-route,
.po-course-group{
height:100%!important;
min-height:0!important;
}
.po-course-group{
overflow:auto!important;
}
/* Laptop-height tuning */
@media(max-height:820px) and (min-width:901px){
.po-mini-dialogue{
gap:7px!important;
padding:0!important;
}
.po-mini-dialogue .po-avatar{
flex-basis:46px!important;
}
.po-mini-dialogue .po-avatar img{
width:44px!important;
height:44px!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:84%!important;
padding:9px 12px!important;
font-size:11px!important;
line-height:1.5!important;
}
button.po-choice-card{
min-height:50px!important;
padding:9px 11px!important;
}
.po-choice-card small{
margin-bottom:3px!important;
font-size:6.5px!important;
}
.po-choice-card strong{
font-size:11px!important;
}
.po-choice-result{
margin-top:5px!important;
font-size:8.5px!important;
}
}
/* =============== V13 / CENTER GUIDANCE LIKE START HERE =============== */
/* Match START HERE's reading width instead of pushing the bubbles inward
with large per-row padding. */
.po-guidance-row{
width:100%!important;
}
/* Conversation uses the same centered reading width as START HERE. */
.po-mini-dialogue{
width:min(100%,1060px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.po-mini-dialogue .po-chat-row{
width:100%!important;
max-width:none!important;
padding-left:0!important;
padding-right:0!important;
}
/* Let the conversation naturally alternate inside the centered column. */
.po-mini-dialogue .po-chat-row.fo{
justify-content:flex-start!important;
}
.po-mini-dialogue .po-chat-row.captain{
justify-content:flex-start!important;
flex-direction:row-reverse!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:min(82%,760px)!important;
}
/* Choice area follows START HERE's guide-strip width. */
.po-choice-panel{
width:min(100%,1120px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Stage 3 intentionally remains full width so the comparison/library
can use the rest of the desktop workspace. */
.po-route-grid,
.po-course-grid{
width:100%!important;
}
/* Medium desktop keeps the same centered proportions. */
@media(max-width:1280px) and (min-width:901px){
.po-mini-dialogue{
width:min(100%,980px)!important;
}
.po-choice-panel{
width:min(100%,1020px)!important;
}
.po-mini-dialogue .po-chat-bubble{
max-width:84%!important;
}
}
/* Short screens: preserve centering rather than reintroducing side offsets. */
@media(max-height:820px) and (min-width:901px){
.po-mini-dialogue .po-chat-row.fo,
.po-mini-dialogue .po-chat-row.captain{
padding-left:0!important;
padding-right:0!important;
}
}
/* =============== V14 / FULL START HERE UNIFICATION =============== */
/* Unify the top of BECOME and LEARNING with START HERE:
centered eyebrow -> centered title -> centered description -> conversation -> choices -> list */
.po-scene[data-panel="become"] .po-head-grid,
.po-scene[data-panel="learning"] .po-head-grid{
display:block!important;
width:min(100%,1120px)!important;
margin:0 auto 18px!important;
text-align:center!important;
}
.po-scene[data-panel="become"] .po-head-grid>div,
.po-scene[data-panel="learning"] .po-head-grid>div{
width:100%!important;
}
.po-scene[data-panel="become"] .po-head-grid .po-eyebrow,
.po-scene[data-panel="learning"] .po-head-grid .po-eyebrow{
margin:0 0 10px!important;
text-align:center!important;
}
.po-scene[data-panel="become"] .po-scene-title,
.po-scene[data-panel="learning"] .po-scene-title{
max-width:920px!important;
margin:0 auto 11px!important;
text-align:center!important;
}
.po-scene[data-panel="become"] .po-scene-copy,
.po-scene[data-panel="learning"] .po-scene-copy{
max-width:780px!important;
margin:0 auto!important;
text-align:center!important;
font-size:clamp(11px,.82vw,14px)!important;
line-height:1.75!important;
}
/* Keep the guidance stack visually centered beneath the title. */
.po-scene[data-panel="become"] .po-guidance-row,
.po-scene[data-panel="learning"] .po-guidance-row{
width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
.po-scene[data-panel="become"] .po-mini-dialogue,
.po-scene[data-panel="learning"] .po-mini-dialogue{
width:min(100%,1060px)!important;
}
.po-scene[data-panel="become"] .po-choice-panel,
.po-scene[data-panel="learning"] .po-choice-panel{
width:min(100%,1120px)!important;
}
/* Slightly increase vertical rhythm so it feels intentional, not cramped. */
.po-scene[data-panel="become"] .po-guidance-row,
.po-scene[data-panel="learning"] .po-guidance-row{
gap:12px!important;
margin-bottom:14px!important;
}
/* Short-screen tuning */
@media(max-height:820px) and (min-width:901px){
.po-scene[data-panel="become"] .po-head-grid,
.po-scene[data-panel="learning"] .po-head-grid{
margin-bottom:10px!important;
}
.po-scene[data-panel="become"] .po-head-grid .po-eyebrow,
.po-scene[data-panel="learning"] .po-head-grid .po-eyebrow{
margin-bottom:6px!important;
}
.po-scene[data-panel="become"] .po-scene-title,
.po-scene[data-panel="learning"] .po-scene-title{
margin-bottom:6px!important;
}
.po-scene[data-panel="become"] .po-scene-copy,
.po-scene[data-panel="learning"] .po-scene-copy{
font-size:10.5px!important;
line-height:1.5!important;
}
.po-scene[data-panel="become"] .po-guidance-row,
.po-scene[data-panel="learning"] .po-guidance-row{
gap:7px!important;
margin-bottom:8px!important;
}
}
/* =============== V15 / EXACT START HERE FORMAT =============== */
/* The first two stages now literally use START HERE classes.
Only these modifiers define grid counts and the added third stage. */
.po-guided-start-layout{
height:100%!important;
}
.po-guided-start-main{
height:100%!important;
display:flex!important;
flex-direction:column!important;
min-height:0!important;
}
/* START HERE uses 4 cards in one row.
These keep the exact card styling while arranging the requested two rows. */
.po-guide-strip.po-guided-route-strip{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.po-guide-strip.po-guided-course-strip{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
/* Selection state: same card, only a subtle gold marker. */
.po-guided-start-main .po-guide-card.is-active{
border-color:var(--po-gold)!important;
box-shadow:inset 0 3px 0 var(--po-gold)!important;
}
/* Third stage is the only extra block compared with START HERE. */
.po-guided-third-stage{
width:100%!important;
flex:1 1 auto!important;
min-height:0!important;
margin-top:16px!important;
align-items:stretch!important;
}
.po-guided-third-stage .po-route,
.po-guided-third-stage .po-course-group{
height:100%!important;
min-height:0!important;
}
/* Keep the third stage useful on shorter screens without changing
the START HERE header/chat/card format. */
@media(max-height:820px) and (min-width:901px){
.po-guided-third-stage{
margin-top:10px!important;
}
}
/* Narrow desktop: still two visual rows. */
@media(max-width:1180px) and (min-width:901px){
.po-guide-strip.po-guided-route-strip{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.po-guide-strip.po-guided-course-strip{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
/* =============== V16 / LESSON SECTION REMOVED =============== */
.po-scene[data-panel="start"] .po-guide-strip{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:900px){
.po-mobile-guide a:last-child:nth-child(odd){
grid-column:1 / -1;
}
/* Keep the mobile dark/light rhythm after deleting the old lesson block. */
.po-mobile-careers{
background:#071522!important;
color:#fff!important;
}
.po-mobile-careers .po-mobile-copy{
color:#b9c5d2!important;
}
.po-mobile-news{
background:var(--po-paper)!important;
color:var(--po-ink)!important;
}
.po-mobile-news .po-mobile-copy{
color:var(--po-copy)!important;
}
.po-mobile-news-item{
border-color:var(--po-line)!important;
background:var(--po-card)!important;
color:var(--po-ink)!important;
}
.po-mobile-news-item small{
color:var(--po-gold)!important;
}
.po-mobile-about{
background:#071522!important;
color:#fff!important;
}
.po-mobile-about .po-mobile-copy{
color:#b9c5d2!important;
}
}
/* =============== V21 / CAPTAIN ROUTE ADVICE =============== */
.po-route-captain-guide{
display:flex;
align-items:center;
gap:16px;
width:min(100%,1160px);
min-height:84px;
margin:14px auto 10px;
padding:0 4px;
flex:0 0 auto;
}
.po-route-captain-avatar{
flex:0 0 76px;
text-align:center;
}
.po-route-captain-avatar img{
display:block;
width:68px;
height:68px;
margin:0 auto 5px;
border-radius:50%;
object-fit:cover;
}
.po-route-captain-avatar small{
display:block;
color:#8d8579;
font-size:7px;
font-weight:950;
letter-spacing:.08em;
white-space:nowrap;
}
.po-route-captain-bubble{
position:relative;
flex:1;
min-width:0;
min-height:72px;
padding:14px 19px;
border:1px solid #d8cebd;
border-radius:10px;
background:#eee4d2;
color:var(--po-ink);
}
.po-route-captain-bubble:before{
content:"";
position:absolute;
left:-8px;
top:25px;
width:14px;
height:14px;
border-left:1px solid #d8cebd;
border-bottom:1px solid #d8cebd;
background:#eee4d2;
transform:rotate(45deg);
}
.po-route-captain-bubble strong{
display:block;
margin-bottom:5px;
font-size:clamp(14px,1vw,17px);
font-weight:950;
line-height:1.3;
}
.po-route-captain-bubble span{
display:block;
color:#5f5a52;
font-size:clamp(11.5px,.8vw,13.5px);
line-height:1.62;
}
.po-route[data-route-advice]{
cursor:help;
}
.po-route[data-route-advice]:hover,
.po-route[data-route-advice]:focus{
outline:none!important;
border-color:var(--po-gold)!important;
box-shadow:0 12px 26px rgba(69,52,24,.09)!important;
transform:translateY(-2px);
}
.po-route[data-route-advice]:hover .po-route-num,
.po-route[data-route-advice]:focus .po-route-num{
color:var(--po-gold)!important;
}
@media(max-height:820px) and (min-width:901px){
.po-route-captain-guide{
min-height:62px;
margin:8px auto 6px;
gap:11px;
}
.po-route-captain-avatar{
flex-basis:54px;
}
.po-route-captain-avatar img{
width:48px;
height:48px;
margin-bottom:2px;
}
.po-route-captain-avatar small{
font-size:5.8px;
}
.po-route-captain-bubble{
min-height:54px;
padding:9px 13px;
}
.po-route-captain-bubble:before{
top:18px;
width:12px;
height:12px;
}
.po-route-captain-bubble strong{
margin-bottom:2px;
font-size:11px;
}
.po-route-captain-bubble span{
font-size:9.5px;
line-height:1.45;
}
}
@media(max-width:900px){
.po-route-captain-guide{
display:none!important;
}
}
/* =============== V18 / CAPTAIN COURSE HOVER GUIDE =============== */
.po-course-captain-guide{
display:flex;
align-items:center;
gap:13px;
width:min(100%,1120px);
min-height:66px;
margin:14px auto 10px;
padding:0 2px;
}
.po-course-captain-avatar{
flex:0 0 58px;
text-align:center;
}
.po-course-captain-avatar img{
display:block;
width:52px;
height:52px;
margin:0 auto 4px;
border-radius:50%;
object-fit:cover;
}
.po-course-captain-avatar small{
display:block;
color:#8d8579;
font-size:6.5px;
font-weight:950;
letter-spacing:.08em;
white-space:nowrap;
}
.po-course-captain-bubble{
position:relative;
flex:1;
min-width:0;
padding:11px 15px;
border:1px solid #d8cebd;
border-radius:8px;
background:#eee4d2;
color:var(--po-ink);
transition:background .15s ease,border-color .15s ease;
}
.po-course-captain-bubble:before{
content:"";
position:absolute;
left:-7px;
top:21px;
width:12px;
height:12px;
border-left:1px solid #d8cebd;
border-bottom:1px solid #d8cebd;
background:#eee4d2;
transform:rotate(45deg);
}
.po-course-captain-bubble strong{
display:block;
margin-bottom:3px;
font-size:11px;
font-weight:950;
}
.po-course-captain-bubble span{
display:block;
color:#5f5a52;
font-size:10px;
line-height:1.55;
}
.po-course-link:hover,
.po-course-link:focus{
position:relative;
z-index:1;
}
.po-course-link:hover:before,
.po-course-link:focus:before{
content:"CAPTAIN →";
position:absolute;
right:23px;
top:50%;
transform:translateY(-50%);
color:#a77a30;
font-size:5.5px;
font-weight:950;
letter-spacing:.08em;
}
.po-course-link.is-recommended:hover:before,
.po-course-link.is-recommended:focus:before{
content:"CAPTAIN →";
}
@media(max-height:820px) and (min-width:901px){
.po-course-captain-guide{
min-height:48px;
margin:8px auto 6px;
gap:9px;
}
.po-course-captain-avatar{
flex-basis:42px;
}
.po-course-captain-avatar img{
width:38px;
height:38px;
margin-bottom:2px;
}
.po-course-captain-avatar small{
font-size:5.5px;
}
.po-course-captain-bubble{
padding:7px 11px;
}
.po-course-captain-bubble:before{
top:15px;
}
.po-course-captain-bubble strong{
margin-bottom:1px;
font-size:9px;
}
.po-course-captain-bubble span{
font-size:8px;
line-height:1.4;
}
}
/* Desktop-only interaction. Mobile uses its own simplified learning section. */
@media(max-width:900px){
.po-course-captain-guide{
display:none!important;
}
}
/* =============== V19 / READABLE CAPTAIN'S GUIDE =============== */
.po-course-captain-guide{
gap:16px!important;
width:min(100%,1160px)!important;
min-height:92px!important;
margin:16px auto 12px!important;
padding:0 4px!important;
}
.po-course-captain-avatar{
flex:0 0 76px!important;
}
.po-course-captain-avatar img{
width:68px!important;
height:68px!important;
margin-bottom:5px!important;
}
.po-course-captain-avatar small{
font-size:7.5px!important;
letter-spacing:.09em!important;
}
.po-course-captain-bubble{
min-height:78px!important;
padding:15px 20px!important;
border-radius:10px!important;
}
.po-course-captain-bubble:before{
left:-8px!important;
top:27px!important;
width:14px!important;
height:14px!important;
}
.po-course-captain-bubble strong{
margin-bottom:6px!important;
font-size:clamp(14px,1vw,17px)!important;
line-height:1.3!important;
}
.po-course-captain-bubble span{
font-size:clamp(12px,.82vw,14px)!important;
line-height:1.65!important;
}
/* Make the course currently being explained obvious. */
.po-course-link:hover,
.po-course-link:focus{
padding-left:8px!important;
background:#f1e7d7!important;
font-weight:950!important;
}
/* Keep the hover hint readable too. */
.po-course-link:hover:before,
.po-course-link:focus:before{
right:24px!important;
font-size:7px!important;
letter-spacing:.08em!important;
}
/* Laptop-height tuning: still readable, just slightly tighter. */
@media(max-height:820px) and (min-width:901px){
.po-course-captain-guide{
min-height:68px!important;
margin:9px auto 7px!important;
gap:12px!important;
}
.po-course-captain-avatar{
flex-basis:58px!important;
}
.po-course-captain-avatar img{
width:52px!important;
height:52px!important;
margin-bottom:3px!important;
}
.po-course-captain-avatar small{
font-size:6.5px!important;
}
.po-course-captain-bubble{
min-height:60px!important;
padding:10px 14px!important;
}
.po-course-captain-bubble:before{
top:21px!important;
width:12px!important;
height:12px!important;
}
.po-course-captain-bubble strong{
margin-bottom:3px!important;
font-size:12px!important;
}
.po-course-captain-bubble span{
font-size:10.5px!important;
line-height:1.5!important;
}
}
/* =============== V23 / READABLE HOVER CAPTAIN ADVICE =============== */
/* Only enlarge the hover/focus guidance panels.
Normal conversation bubbles stay exactly as they were in V21. */
/* HOW TO BECOME A PILOT / CAPTAIN'S ADVICE */
.po-route-captain-guide{
min-height:98px!important;
gap:18px!important;
margin:16px auto 12px!important;
}
.po-route-captain-avatar{
flex-basis:82px!important;
}
.po-route-captain-avatar img{
width:74px!important;
height:74px!important;
}
.po-route-captain-avatar small{
font-size:8px!important;
}
.po-route-captain-bubble{
min-height:84px!important;
padding:17px 21px!important;
}
.po-route-captain-bubble:before{
top:30px!important;
}
.po-route-captain-bubble strong{
margin-bottom:7px!important;
font-size:clamp(16px,1.15vw,20px)!important;
line-height:1.3!important;
}
.po-route-captain-bubble span{
font-size:clamp(13px,.95vw,16px)!important;
line-height:1.7!important;
color:#403c36!important;
}
/* ONLINE LEARNING / CAPTAIN'S GUIDE */
.po-course-captain-guide{
min-height:100px!important;
gap:18px!important;
margin:16px auto 12px!important;
}
.po-course-captain-avatar{
flex-basis:82px!important;
}
.po-course-captain-avatar img{
width:74px!important;
height:74px!important;
}
.po-course-captain-avatar small{
font-size:8px!important;
}
.po-course-captain-bubble{
min-height:86px!important;
padding:17px 21px!important;
}
.po-course-captain-bubble:before{
top:30px!important;
}
.po-course-captain-bubble strong{
margin-bottom:7px!important;
font-size:clamp(16px,1.15vw,20px)!important;
line-height:1.3!important;
}
.po-course-captain-bubble span{
font-size:clamp(13px,.95vw,16px)!important;
line-height:1.7!important;
color:#403c36!important;
}
/* Keep it readable on shorter laptop displays too. */
@media(max-height:820px) and (min-width:901px){
.po-route-captain-guide,
.po-course-captain-guide{
min-height:76px!important;
gap:13px!important;
margin:9px auto 7px!important;
}
.po-route-captain-avatar,
.po-course-captain-avatar{
flex-basis:62px!important;
}
.po-route-captain-avatar img,
.po-course-captain-avatar img{
width:56px!important;
height:56px!important;
}
.po-route-captain-avatar small,
.po-course-captain-avatar small{
font-size:6.5px!important;
}
.po-route-captain-bubble,
.po-course-captain-bubble{
min-height:66px!important;
padding:11px 15px!important;
}
.po-route-captain-bubble strong,
.po-course-captain-bubble strong{
margin-bottom:4px!important;
font-size:13px!important;
}
.po-route-captain-bubble span,
.po-course-captain-bubble span{
font-size:11px!important;
line-height:1.55!important;
}
}
/* =============== V24 / INLINE ONE-LINE HOVER ADVICE =============== */
.po-route-captain-guide,
.po-course-captain-guide{
min-height:64px!important;
margin:10px auto 8px!important;
gap:12px!important;
}
.po-route-captain-avatar,
.po-course-captain-avatar{
flex-basis:58px!important;
}
.po-route-captain-avatar img,
.po-course-captain-avatar img{
width:52px!important;
height:52px!important;
margin-bottom:2px!important;
}
.po-route-captain-avatar small,
.po-course-captain-avatar small{
font-size:6px!important;
}
.po-route-captain-bubble,
.po-course-captain-bubble{
min-height:52px!important;
display:flex!important;
align-items:center!important;
padding:10px 15px!important;
}
.po-route-captain-bubble:before,
.po-course-captain-bubble:before{
top:19px!important;
width:11px!important;
height:11px!important;
}
.po-route-captain-bubble span,
.po-course-captain-bubble span{
display:block!important;
width:100%!important;
color:#403c36!important;
font-size:clamp(12px,.82vw,14px)!important;
line-height:1.45!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.po-route-captain-bubble span strong,
.po-course-captain-bubble span strong{
display:inline!important;
margin:0!important;
color:#191c20!important;
font-size:inherit!important;
font-weight:950!important;
line-height:inherit!important;
}
/* On smaller desktop widths, allow a second line only if truly necessary. */
@media(max-width:1180px) and (min-width:901px){
.po-route-captain-bubble span,
.po-course-captain-bubble span{
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
font-size:11.5px!important;
}
}
@media(max-height:820px) and (min-width:901px){
.po-route-captain-guide,
.po-course-captain-guide{
min-height:52px!important;
margin:6px auto 5px!important;
}
.po-route-captain-avatar,
.po-course-captain-avatar{
flex-basis:46px!important;
}
.po-route-captain-avatar img,
.po-course-captain-avatar img{
width:42px!important;
height:42px!important;
}
.po-route-captain-bubble,
.po-course-captain-bubble{
min-height:44px!important;
padding:7px 11px!important;
}
.po-route-captain-bubble span,
.po-course-captain-bubble span{
font-size:10.5px!important;
}
}
/* =============== V25 / HEADER TYPEWRITER + MATCHED ADVICE TYPE =============== */
/* CAPTAIN'S ADVICE / GUIDE uses the exact same body size as normal chat. */
.po-route-captain-bubble span,
.po-course-captain-bubble span{
font-size:clamp(13px,.95vw,17px)!important;
line-height:1.75!important;
}
.po-route-captain-bubble span strong,
.po-course-captain-bubble span strong{
font-size:inherit!important;
line-height:inherit!important;
}
/* Keep the one-line desktop behavior from V24. */
@media(min-width:1181px){
.po-route-captain-bubble span,
.po-course-captain-bubble span{
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
/* Header center: old "君は空を飛びたいか" typewriter motif. */
.po-header-typing{
position:absolute;
left:50%;
top:22px;
transform:translateX(-50%);
z-index:2;
display:flex;
align-items:center;
justify-content:center;
min-width:240px;
pointer-events:none;
color:#1b2025;
font-size:13px;
font-weight:850;
letter-spacing:.16em;
white-space:nowrap;
}
.po-header-typing:before{
content:"";
position:absolute;
left:50%;
bottom:-8px;
width:34px;
height:1px;
transform:translateX(-50%);
background:rgba(27,32,37,.22);
}
.po-typing-caret{
display:inline-block;
width:1px;
height:1.15em;
margin-left:5px;
background:currentColor;
animation:poTypingCaretBlink .8s steps(1,end) infinite;
}
@keyframes poTypingCaretBlink{
0%,48%{opacity:1}
49%,100%{opacity:0}
}
/* Avoid collisions on narrower desktops; mobile remains clean. */
@media(max-width:1120px){
.po-header-typing{
display:none!important;
}
}
/* =============== V26 / CENTERED HEADER TYPEWRITER =============== */
.po-header-typing{
left:50%!important;
top:27px!important;
transform:translateX(-50%)!important;
min-width:320px!important;
font-size:clamp(17px,1.25vw,21px)!important;
font-weight:900!important;
line-height:1!important;
letter-spacing:.13em!important;
text-align:center!important;
}
.po-header-typing:before{
bottom:-10px!important;
width:44px!important;
}
.po-typing-caret{
height:1.05em!important;
margin-left:6px!important;
}
.po-typing-caret.is-finished{
animation:none!important;
opacity:0!important;
transition:opacity .35s ease!important;
}
/* =============== V27 / HEADER ALIGNMENT + SIDEBAR UPGRADE =============== */
@media(min-width:901px){
/* Align the visual centers of the three header zones. */
.po-logo{
top:23px!important;
}
.po-header-typing{
top:24px!important;
font-size:clamp(18px,1.3vw,22px)!important;
line-height:1!important;
}
.po-actions{
top:17px!important;
}
/* No decorative underline beneath the typing line. */
.po-header-typing:before{
content:none!important;
display:none!important;
}
/* Sidebar menu should read like navigation, not micro-copy. */
.po-global-left{
padding:20px 16px 14px!important;
}
.po-global-left-head>p:last-child{
margin-bottom:14px!important;
font-size:11px!important;
}
.po-global-left-list{
display:flex!important;
flex-direction:column!important;
gap:5px!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding-right:4px!important;
scrollbar-width:thin;
}
.po-global-section-label{
flex:0 0 auto;
margin:4px 3px 2px;
color:var(--po-gold-2)!important;
font-size:8px;
font-weight:950;
letter-spacing:.18em;
}
.po-global-course-label{
margin-top:13px;
padding-top:13px;
border-top:1px solid rgba(255,255,255,.12);
}
.po-global-item,
.po-global-item:focus,
.po-global-item:active{
flex:0 0 auto;
grid-template-columns:36px minmax(0,1fr)!important;
gap:11px!important;
min-height:48px!important;
padding:7px 10px!important;
align-items:center!important;
}
.po-global-item>span{
width:34px!important;
height:34px!important;
font-size:9px!important;
}
.po-global-item>strong,
.po-global-item strong{
display:block!important;
margin:0!important;
color:#fff!important;
font-size:14px!important;
font-weight:900!important;
line-height:1.25!important;
}
/* Old micro-description text is intentionally hidden if any survives. */
.po-global-item small{
display:none!important;
}
.po-global-course-link{
display:grid!important;
grid-template-columns:48px minmax(0,1fr);
gap:10px;
align-items:center;
flex:0 0 auto;
min-height:39px;
padding:6px 9px;
border:1px solid transparent;
color:#fff!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.po-global-course-link:hover{
transform:translateX(2px);
border-color:rgba(255,255,255,.14);
background:#242a31;
}
.po-global-course-link>span{
display:grid;
min-width:44px;
min-height:25px;
place-items:center;
border:1px solid rgba(255,255,255,.18);
color:var(--po-gold-2)!important;
font-size:8px;
font-weight:950;
letter-spacing:.04em;
}
.po-global-course-link>strong{
color:#e9ecef!important;
font-size:12px!important;
font-weight:850!important;
line-height:1.25!important;
}
.po-global-all-courses{
flex:0 0 auto;
width:100%!important;
margin:3px 0 0!important;
padding:9px 10px!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:0!important;
background:transparent!important;
color:#fff!important;
text-align:left!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.1em!important;
cursor:pointer!important;
}
.po-global-all-courses:hover{
border-color:var(--po-gold)!important;
background:#242a31!important;
}
/* Old footer isn't needed once direct shortcuts are visible. */
.po-global-left-foot{
display:none!important;
}
}
/* Keep the sidebar readable on smaller desktop widths too. */
@media(min-width:901px) and (max-width:1280px){
.po-global-item,
.po-global-item:focus,
.po-global-item:active{
grid-template-columns:32px minmax(0,1fr)!important;
min-height:43px!important;
padding:6px 7px!important;
}
.po-global-item>span{
width:30px!important;
height:30px!important;
}
.po-global-item>strong,
.po-global-item strong{
font-size:12px!important;
}
.po-global-course-link{
grid-template-columns:42px minmax(0,1fr);
min-height:35px;
padding:5px 7px;
}
.po-global-course-link>span{
min-width:39px;
}
.po-global-course-link>strong{
font-size:11px!important;
}
}
/* =============== V28 / TRUE HEADER CENTER + COURSE LIBRARY =============== */
@media(min-width:901px){
/* True vertical centering: all three header zones share the same center line. */
.po-logo{
top:50%!important;
transform:translateY(-50%)!important;
}
.po-header-typing{
top:50%!important;
transform:translate(-50%,-50%)!important;
}
.po-actions{
top:50%!important;
transform:translateY(-50%)!important;
}
/* COURSE LIBRARY category buttons in left sidebar. */
.po-global-catalog-item{
-webkit-appearance:none!important;
appearance:none!important;
display:grid!important;
grid-template-columns:48px minmax(0,1fr)!important;
gap:10px!important;
align-items:center!important;
flex:0 0 auto!important;
width:100%!important;
min-height:43px!important;
margin:0!important;
padding:6px 9px!important;
border:1px solid transparent!important;
border-radius:0!important;
background:transparent!important;
color:#fff!important;
text-align:left!important;
font-family:inherit!important;
cursor:pointer!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
.po-global-catalog-item:hover{
transform:translateX(2px)!important;
border-color:rgba(255,255,255,.14)!important;
background:#242a31!important;
}
.po-global-catalog-item.is-active{
border-color:#4a5159!important;
background:#353b42!important;
box-shadow:inset 3px 0 0 var(--po-gold)!important;
}
.po-global-catalog-item>span{
display:grid!important;
min-width:44px!important;
min-height:27px!important;
place-items:center!important;
border:1px solid rgba(255,255,255,.18)!important;
color:var(--po-gold-2)!important;
font-size:8px!important;
font-weight:950!important;
letter-spacing:.03em!important;
}
.po-global-catalog-item>strong{
color:#f0f2f4!important;
font-size:13px!important;
font-weight:900!important;
line-height:1.2!important;
}
/* Old direct course-link styles are no longer used. */
.po-global-course-link{
display:none!important;
}
}
/* ---------- Dynamic course catalog scene ---------- */
.po-catalog-shell{
display:flex;
flex-direction:column;
height:100%;
min-height:0;
padding:clamp(24px,2.3vw,40px) clamp(28px,3vw,52px) 24px;
border:1px solid var(--po-line);
background:var(--po-paper);
overflow:hidden;
}
.po-catalog-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:28px;
flex:0 0 auto;
padding-bottom:18px;
border-bottom:1px solid var(--po-line);
}
.po-catalog-head>div:first-child{
min-width:0;
}
.po-catalog-head .po-eyebrow{
margin-bottom:9px;
}
.po-catalog-head h1{
margin:0;
color:var(--po-ink);
font-size:clamp(34px,3.3vw,58px);
line-height:.98;
letter-spacing:-.045em;
}
.po-catalog-head p{
max-width:760px;
margin:12px 0 0;
color:var(--po-copy);
font-size:12px;
line-height:1.7;
}
.po-catalog-meta{
display:flex;
gap:7px;
flex:0 0 auto;
padding-bottom:2px;
}
.po-catalog-meta span{
padding:7px 9px;
border:1px solid #d4cec3;
background:#fbfaf6;
color:#777067;
font-size:7px;
font-weight:950;
letter-spacing:.09em;
white-space:nowrap;
}
.po-catalog-guide{
display:flex;
align-items:center;
gap:14px;
width:min(100%,1120px);
min-height:66px;
margin:14px auto 12px;
flex:0 0 auto;
}
.po-catalog-guide-avatar{
flex:0 0 60px;
text-align:center;
}
.po-catalog-guide-avatar img{
display:block;
width:54px;
height:54px;
margin:0 auto 3px;
border-radius:50%;
object-fit:cover;
}
.po-catalog-guide-avatar small{
display:block;
color:#8a837a;
font-size:6px;
font-weight:950;
letter-spacing:.08em;
white-space:nowrap;
}
.po-catalog-guide p{
position:relative;
flex:1;
margin:0;
padding:12px 16px;
border:1px solid #d8cebd;
border-radius:8px;
background:#eee4d2;
color:#403c36;
font-size:clamp(13px,.95vw,17px);
line-height:1.6;
}
.po-catalog-guide p:before{
content:"";
position:absolute;
left:-7px;
top:21px;
width:12px;
height:12px;
border-left:1px solid #d8cebd;
border-bottom:1px solid #d8cebd;
background:#eee4d2;
transform:rotate(45deg);
}
.po-catalog-guide p strong{
color:#171b20;
font-weight:950;
}
.po-catalog-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
flex:1 1 auto;
min-height:0;
overflow:auto;
align-content:start;
padding-right:2px;
}
.po-catalog-card{
display:flex;
flex-direction:column;
min-height:182px;
padding:16px;
border:1px solid #cbc5bb;
background:#fbfaf6;
color:var(--po-ink)!important;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
a.po-catalog-card:hover{
transform:translateY(-2px);
border-color:#9e968a;
background:#fffefa;
box-shadow:0 12px 25px rgba(25,29,34,.06);
}
.po-catalog-card.is-planned{
background:#f1efe9;
border-style:dashed;
}
.po-catalog-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:13px;
}
.po-catalog-code{
display:inline-flex;
min-height:25px;
padding:0 8px;
align-items:center;
border:1px solid #beb6a9;
color:#8c692f;
font-size:7px;
font-weight:950;
letter-spacing:.09em;
}
.po-catalog-status{
color:#979087;
font-size:6.5px;
font-weight:950;
letter-spacing:.09em;
}
.po-catalog-card h3{
margin:0 0 7px;
color:var(--po-ink);
font-size:clamp(16px,1.2vw,21px);
line-height:1.2;
}
.po-catalog-card p{
margin:0;
color:var(--po-copy);
font-size:9.5px;
line-height:1.55;
}
.po-catalog-learn{
margin-top:11px;
padding-top:9px;
border-top:1px solid #ded9cf;
color:#635e57;
font-size:8px;
line-height:1.45;
}
.po-catalog-learn strong{
color:#8c692f;
font-weight:950;
}
.po-catalog-open{
margin-top:auto;
padding-top:12px;
color:#1d2227;
font-size:8px;
font-weight:950;
letter-spacing:.07em;
}
.po-catalog-card.is-planned .po-catalog-open{
color:#9a938a;
}
@media(max-width:1320px) and (min-width:901px){
.po-catalog-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.po-global-catalog-item{
grid-template-columns:42px minmax(0,1fr)!important;
min-height:38px!important;
padding:5px 7px!important;
}
.po-global-catalog-item>span{
min-width:39px!important;
min-height:24px!important;
font-size:7px!important;
}
.po-global-catalog-item>strong{
font-size:11px!important;
}
}
@media(max-height:820px) and (min-width:901px){
.po-catalog-shell{
padding-top:22px;
padding-bottom:16px;
}
.po-catalog-head{
padding-bottom:11px;
}
.po-catalog-head h1{
font-size:36px;
}
.po-catalog-head p{
margin-top:7px;
font-size:10px;
line-height:1.5;
}
.po-catalog-guide{
min-height:50px;
margin:8px auto 7px;
}
.po-catalog-guide-avatar{
flex-basis:46px;
}
.po-catalog-guide-avatar img{
width:42px;
height:42px;
}
.po-catalog-guide p{
padding:8px 11px;
font-size:11px;
line-height:1.45;
}
.po-catalog-card{
min-height:150px;
padding:12px;
}
.po-catalog-card-top{
margin-bottom:8px;
}
.po-catalog-card h3{
font-size:15px;
}
.po-catalog-card p{
font-size:8px;
}
}
/* =============== V29 / COURSE LIBRARY HOVER CAPTAIN =============== */
.po-catalog-card[data-catalog-advice]{
cursor:help;
}
.po-catalog-card[data-catalog-advice]:hover,
.po-catalog-card[data-catalog-advice]:focus{
outline:none!important;
transform:translateY(-3px)!important;
border-color:var(--po-gold)!important;
box-shadow:0 14px 28px rgba(61,47,24,.10)!important;
}
.po-catalog-card[data-catalog-advice]:hover .po-catalog-code,
.po-catalog-card[data-catalog-advice]:focus .po-catalog-code{
border-color:var(--po-gold)!important;
background:#efe5d3!important;
color:#6d4d1f!important;
}
.po-catalog-guide p{
font-size:clamp(13px,.95vw,17px)!important;
line-height:1.6!important;
}
.po-catalog-guide p strong{
color:#171b20!important;
font-size:inherit!important;
font-weight:950!important;
}
/* =============== V30 / LOWER HEADER + CLEANER SIDEBAR =============== */
@media(min-width:901px){
/* Same centerline, moved down closer to the main frame. */
.po-logo{
top:50px!important;
transform:translateY(-50%)!important;
}
.po-header-typing{
top:50px!important;
transform:translate(-50%,-50%)!important;
}
.po-actions{
top:50px!important;
transform:translateY(-50%)!important;
}
/* Home entry: simple, unnumbered PILOT ONLINE. */
.po-global-home{
-webkit-appearance:none!important;
appearance:none!important;
display:flex!important;
align-items:center!important;
flex:0 0 auto!important;
width:100%!important;
min-height:48px!important;
margin:0!important;
padding:9px 11px!important;
border:1px solid rgba(255,255,255,.10)!important;
border-radius:0!important;
background:transparent!important;
color:#fff!important;
text-align:left!important;
font-family:inherit!important;
cursor:pointer!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
.po-global-home strong{
color:#fff!important;
font-size:15px!important;
font-weight:950!important;
letter-spacing:.07em!important;
line-height:1!important;
}
.po-global-home:hover{
transform:translateX(2px)!important;
border-color:rgba(255,255,255,.18)!important;
background:#242a31!important;
}
.po-global-home.is-active{
border-color:#4a5159!important;
background:#353b42!important;
box-shadow:inset 3px 0 0 var(--po-gold)!important;
}
.po-global-course-label{
margin-top:16px!important;
}
.po-global-all-courses{
display:none!important;
}
}
@media(min-width:901px) and (max-width:1120px){
.po-logo,
.po-actions{
top:49px!important;
}
.po-header-typing{
display:none!important;
}
}
/* =============== V33 / CARET BLINKS 5 TIMES AFTER TYPING =============== */
.po-typing-caret.is-finishing{
animation:poTypingCaretBlink .8s steps(1,end) 5 forwards!important;
}
/* =============== V34 / SIMPLE AVIATION NEWS FEED =============== */
/* Retire old category-tile concept. */
.po-news-bento,
.po-news-tile{
display:none!important;
}
.po-news-simple-head{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:clamp(30px,4vw,70px);
align-items:end;
flex:0 0 auto;
padding:clamp(8px,1vw,16px) 0 24px;
border-bottom:1px solid var(--po-line);
}
.po-news-simple-intro{
justify-self:end;
max-width:560px;
}
.po-news-simple-intro p{
margin:0;
color:var(--po-copy);
font-size:clamp(11px,.8vw,14px);
line-height:1.8;
}
.po-news-simple-intro a{
display:inline-block;
margin-top:15px;
color:var(--po-ink)!important;
font-size:8px;
font-weight:950;
letter-spacing:.1em;
}
.po-news-feed{
display:flex;
flex:1 1 auto;
min-height:0;
flex-direction:column;
border-left:1px solid var(--po-line);
border-right:1px solid var(--po-line);
border-bottom:1px solid var(--po-line);
background:var(--po-card);
overflow:hidden;
}
.po-news-feed-top{
display:flex;
justify-content:space-between;
gap:20px;
flex:0 0 auto;
padding:11px 17px;
border-bottom:1px solid var(--po-line);
color:#8a8379;
font-size:7px;
font-weight:950;
letter-spacing:.13em;
}
.po-news-row{
display:grid;
grid-template-columns:50px 140px minmax(0,1fr) 28px;
gap:18px;
align-items:center;
flex:1 1 0;
min-height:62px;
padding:12px 18px;
border-bottom:1px solid var(--po-line);
color:var(--po-ink)!important;
transition:background .18s ease,color .18s ease,padding .18s ease;
}
.po-news-row:last-child{
border-bottom:0;
}
.po-news-no{
color:#a49c91;
font-size:8px;
font-weight:950;
letter-spacing:.1em;
}
.po-news-source{
color:var(--po-gold);
font-size:8px;
font-weight:950;
letter-spacing:.09em;
white-space:nowrap;
}
.po-news-row strong{
min-width:0;
font-size:clamp(14px,1.12vw,20px);
font-weight:850;
line-height:1.35;
letter-spacing:-.015em;
}
.po-news-arrow{
justify-self:end;
font-size:18px;
line-height:1;
transition:transform .18s ease;
}
.po-news-row:hover,
.po-news-row:focus{
outline:none;
padding-left:23px;
background:var(--po-dark);
color:#fff!important;
}
.po-news-row:hover .po-news-no,
.po-news-row:focus .po-news-no{
color:#9ea7ae;
}
.po-news-row:hover .po-news-source,
.po-news-row:focus .po-news-source{
color:var(--po-gold-2);
}
.po-news-row:hover .po-news-arrow,
.po-news-row:focus .po-news-arrow{
transform:translateX(4px);
}
@media(max-width:1250px) and (min-width:901px){
.po-news-row{
grid-template-columns:38px 110px minmax(0,1fr) 22px;
gap:12px;
min-height:54px;
padding:9px 13px;
}
.po-news-row strong{
font-size:13px;
}
.po-news-source{
font-size:7px;
}
}
@media(max-height:820px) and (min-width:901px){
.po-news-simple-head{
padding-bottom:13px;
}
.po-news-simple-intro p{
font-size:10px;
line-height:1.55;
}
.po-news-simple-intro a{
margin-top:8px;
}
.po-news-feed-top{
padding:7px 12px;
}
.po-news-row{
min-height:45px;
padding-top:7px;
padding-bottom:7px;
}
.po-news-row strong{
font-size:12px;
}
}
@media(max-width:900px){
.po-mobile-simple-news{
margin-top:24px;
border-top:1px solid var(--po-line);
}
.po-mobile-simple-news a{
display:grid;
grid-template-columns:minmax(0,1fr) 22px;
gap:5px 12px;
padding:16px 2px;
border-bottom:1px solid var(--po-line);
color:var(--po-ink)!important;
}
.po-mobile-simple-news small{
grid-column:1;
color:var(--po-gold);
font-size:7px;
font-weight:950;
letter-spacing:.1em;
}
.po-mobile-simple-news strong{
grid-column:1;
font-size:14px;
line-height:1.45;
}
.po-mobile-simple-news span{
grid-column:2;
grid-row:1 / 3;
align-self:center;
justify-self:end;
font-size:18px;
}
}
/* =============== V35 / REAL NEWS HEADLINES =============== */
.po-news-date{
color:#8f887f;
font-size:8px;
font-weight:950;
letter-spacing:.08em;
white-space:nowrap;
}
.po-news-row:hover .po-news-date,
.po-news-row:focus .po-news-date{
color:#c6cdd2;
}
/* =============== V36 / LIVE RSS NEWS =============== */
#po-news-live-list{
display:flex;
flex:1 1 auto;
min-height:0;
flex-direction:column;
}
#po-news-live-list .po-news-row{
flex:1 1 0;
}
/* =============== V37 / READABLE NEWS META =============== */
/* Top strip labels */
.po-news-feed-top{
padding:12px 18px!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.11em!important;
}
/* Give date/source enough room and make them genuinely readable. */
.po-news-row{
grid-template-columns:64px 165px minmax(0,1fr) 30px!important;
gap:20px!important;
}
.po-news-date{
color:#6f6961!important;
font-size:11px!important;
font-weight:950!important;
letter-spacing:.05em!important;
}
.po-news-source{
color:var(--po-gold)!important;
font-size:11px!important;
font-weight:950!important;
letter-spacing:.06em!important;
white-space:nowrap!important;
}
.po-news-row:hover .po-news-date,
.po-news-row:focus .po-news-date{
color:#d6dce0!important;
}
.po-news-row:hover .po-news-source,
.po-news-row:focus .po-news-source{
color:var(--po-gold-2)!important;
}
/* Medium desktop: still readable, just slightly tighter. */
@media(max-width:1250px) and (min-width:901px){
.po-news-row{
grid-template-columns:54px 135px minmax(0,1fr) 24px!important;
gap:14px!important;
}
.po-news-date{
font-size:10px!important;
}
.po-news-source{
font-size:10px!important;
}
.po-news-feed-top{
font-size:8px!important;
}
}
/* Mobile metadata should also be readable. */
@media(max-width:900px){
.po-mobile-simple-news small{
font-size:10px!important;
line-height:1.35!important;
letter-spacing:.07em!important;
}
}
/* =============== V39 / GLOBAL READABILITY BOOST =============== */
/* ---------------- NEWS ---------------- */
.po-news-feed-top{
padding:14px 20px!important;
font-size:10px!important;
font-weight:950!important;
letter-spacing:.10em!important;
}
.po-news-row{
grid-template-columns:72px 180px minmax(0,1fr) 32px!important;
gap:22px!important;
min-height:72px!important;
padding:14px 20px!important;
}
.po-news-date{
font-size:12px!important;
font-weight:950!important;
letter-spacing:.04em!important;
}
.po-news-source{
font-size:12px!important;
font-weight:950!important;
letter-spacing:.05em!important;
}
.po-news-row strong{
font-size:clamp(18px,1.28vw,25px)!important;
line-height:1.34!important;
}
.po-news-arrow{
font-size:20px!important;
}
.po-news-simple-intro p{
font-size:clamp(13px,.92vw,16px)!important;
line-height:1.8!important;
}
.po-news-simple-intro a{
font-size:10px!important;
}
/* ---------------- GENERIC SCENE TYPOGRAPHY ---------------- */
.po-scene-copy,
.po-head-grid > p,
.po-head-grid p,
.po-scene-inner p:not(.po-eyebrow){
font-size:clamp(13px,.95vw,16px);
line-height:1.75;
}
.po-eyebrow{
font-size:11px!important;
letter-spacing:.18em!important;
}
/* Main scene headings slightly stronger */
.po-scene-title{
font-size:clamp(44px,4.15vw,72px)!important;
line-height:.96!important;
}
/* ---------------- DIALOGUE / GUIDANCE ---------------- */
.po-dialogue-bubble,
.po-chat-bubble,
.po-guide-bubble,
.po-speech,
.po-speech-bubble{
font-size:clamp(14px,1vw,18px)!important;
line-height:1.72!important;
}
.po-dialogue-bubble p,
.po-chat-bubble p,
.po-guide-bubble p,
.po-speech p,
.po-speech-bubble p{
font-size:inherit!important;
line-height:inherit!important;
}
.po-dialogue-name,
.po-chat-name,
.po-guide-name{
font-size:10px!important;
letter-spacing:.10em!important;
}
/* ---------------- CHOICE / GUIDE BUTTONS ---------------- */
.po-guide-choice,
.po-choice-button,
.po-route-choice,
.po-learning-choice,
.po-choice-card,
.po-guided-choice{
min-height:74px!important;
padding:15px 18px!important;
}
.po-guide-choice strong,
.po-choice-button strong,
.po-route-choice strong,
.po-learning-choice strong,
.po-choice-card strong,
.po-guided-choice strong{
font-size:clamp(18px,1.2vw,24px)!important;
line-height:1.2!important;
}
.po-guide-choice small,
.po-choice-button small,
.po-route-choice small,
.po-learning-choice small,
.po-choice-card small,
.po-guided-choice small{
display:block!important;
margin-top:5px!important;
font-size:12px!important;
line-height:1.45!important;
letter-spacing:0!important;
color:inherit!important;
opacity:.86!important;
}
/* ---------------- LIST / COURSE / ROUTE CARDS ---------------- */
.po-course-card,
.po-route-card,
.po-panel-card,
.po-mini-card,
.po-list-card{
padding:18px!important;
}
.po-course-card h3,
.po-route-card h3,
.po-panel-card h3,
.po-mini-card h3,
.po-list-card h3{
font-size:clamp(19px,1.32vw,26px)!important;
line-height:1.18!important;
}
.po-course-card p,
.po-route-card p,
.po-panel-card p,
.po-mini-card p,
.po-list-card p{
font-size:13px!important;
line-height:1.62!important;
}
.po-course-card li,
.po-route-card li,
.po-panel-card li,
.po-mini-card li,
.po-list-card li{
font-size:12px!important;
line-height:1.55!important;
}
/* ---------------- CAPTAIN HOVER ADVICE ---------------- */
.po-hover-advice,
.po-captain-advice,
.po-hover-note{
font-size:clamp(14px,1vw,18px)!important;
line-height:1.65!important;
}
/* ---------------- COURSE LIBRARY ---------------- */
.po-catalog-head p{
font-size:14px!important;
line-height:1.78!important;
}
.po-catalog-meta span{
font-size:9px!important;
padding:8px 11px!important;
}
.po-catalog-guide p{
font-size:clamp(15px,1.02vw,18px)!important;
line-height:1.62!important;
}
.po-catalog-card{
min-height:196px!important;
padding:18px!important;
}
.po-catalog-code{
min-height:28px!important;
font-size:8px!important;
padding:0 10px!important;
}
.po-catalog-status{
font-size:8px!important;
}
.po-catalog-card h3{
font-size:clamp(18px,1.28vw,24px)!important;
line-height:1.18!important;
}
.po-catalog-card p{
font-size:12px!important;
line-height:1.62!important;
}
.po-catalog-learn{
font-size:10px!important;
line-height:1.5!important;
}
.po-catalog-open{
font-size:10px!important;
letter-spacing:.06em!important;
}
/* ---------------- LEFT SIDEBAR ---------------- */
.po-global-section-label{
font-size:9px!important;
}
.po-global-home strong{
font-size:16px!important;
}
.po-global-item>strong,
.po-global-item strong{
font-size:15px!important;
line-height:1.25!important;
}
.po-global-catalog-item>strong{
font-size:14px!important;
}
.po-global-item>span,
.po-global-catalog-item>span{
font-size:9px!important;
}
/* ---------------- MOBILE ---------------- */
@media(max-width:900px){
.po-mobile-kicker{
font-size:10px!important;
letter-spacing:.16em!important;
}
.po-mobile-title{
font-size:clamp(34px,9vw,52px)!important;
line-height:.98!important;
}
.po-mobile-copy{
font-size:15px!important;
line-height:1.7!important;
}
.po-mobile-simple-news small{
font-size:11px!important;
line-height:1.35!important;
}
.po-mobile-simple-news strong{
font-size:16px!important;
line-height:1.45!important;
}
.po-mobile-cta{
font-size:14px!important;
}
}
/* ---------------- MID WIDTH DESKTOP ---------------- */
@media(max-width:1250px) and (min-width:901px){
.po-news-row{
grid-template-columns:62px 148px minmax(0,1fr) 26px!important;
gap:16px!important;
min-height:64px!important;
padding:12px 16px!important;
}
.po-news-date{
font-size:11px!important;
}
.po-news-source{
font-size:11px!important;
}
.po-news-row strong{
font-size:16px!important;
}
.po-news-feed-top{
font-size:9px!important;
}
.po-catalog-card{
min-height:176px!important;
padding:15px!important;
}
.po-catalog-card p{
font-size:11px!important;
}
.po-global-item>strong,
.po-global-item strong{
font-size:13px!important;
}
.po-global-catalog-item>strong{
font-size:12px!important;
}
}
/* ---------------- SHORT DESKTOP HEIGHT ---------------- */
@media(max-height:820px) and (min-width:901px){
.po-news-row{
min-height:56px!important;
}
.po-news-row strong{
font-size:15px!important;
}
.po-catalog-head p{
font-size:12px!important;
line-height:1.6!important;
}
.po-catalog-guide p{
font-size:13px!important;
}
.po-catalog-card p{
font-size:10.5px!important;
}
}
/* =============== V40 / CAREER STORIES INTERVIEW CTA =============== */
.po-career-interview-cta{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:28px;
align-items:center;
margin-top:18px;
padding:20px 22px;
border:1px solid var(--po-line);
background:#f7f4ee;
}
.po-career-interview-kicker{
margin:0 0 7px!important;
color:var(--po-gold)!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.14em!important;
}
.po-career-interview-cta h3{
margin:0;
color:var(--po-ink);
font-size:clamp(20px,1.45vw,28px);
line-height:1.2;
}
.po-career-interview-cta p:not(.po-career-interview-kicker){
max-width:780px;
margin:8px 0 0;
color:var(--po-copy);
font-size:13px!important;
line-height:1.65!important;
}
.po-career-interview-cta>a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:150px;
min-height:46px;
padding:0 18px;
border:1px solid var(--po-ink);
color:var(--po-ink)!important;
font-size:10px;
font-weight:950;
letter-spacing:.09em;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.po-career-interview-cta>a:hover{
transform:translateY(-1px);
background:var(--po-ink);
color:#fff!important;
}
@media(max-width:900px){
.po-mobile-career-interview{
margin-top:26px;
padding:20px 0 0;
border-top:1px solid var(--po-line);
}
.po-mobile-career-interview small{
display:block;
margin-bottom:7px;
color:var(--po-gold);
font-size:9px;
font-weight:950;
letter-spacing:.12em;
}
.po-mobile-career-interview strong{
display:block;
color:var(--po-ink);
font-size:18px;
line-height:1.4;
}
.po-mobile-career-interview a{
display:inline-flex;
margin-top:14px;
padding:11px 14px;
border:1px solid var(--po-ink);
color:var(--po-ink)!important;
font-size:10px;
font-weight:950;
letter-spacing:.08em;
}
}
/* =============== V41 / READABLE GUIDE CARDS =============== */
/* These are the START HERE / route-choice / course-choice cards. */
.po-guide-card,
.po-guide-card:focus,
.po-guide-card:active{
min-height:102px!important;
padding:16px 18px!important;
}
/* BEGINNER / JAPAN / UNITED STATES / STEP 01 etc. */
.po-guide-card small{
display:block!important;
margin-bottom:8px!important;
color:var(--po-gold)!important;
font-size:11px!important;
font-weight:950!important;
line-height:1.15!important;
letter-spacing:.10em!important;
}
/* Main card title */
.po-guide-card strong{
display:block!important;
color:var(--po-ink)!important;
font-size:clamp(18px,1.25vw,22px)!important;
font-weight:900!important;
line-height:1.28!important;
}
/* Supporting description */
.po-guide-card span{
display:block!important;
margin-top:8px!important;
color:var(--po-copy)!important;
font-size:12px!important;
font-weight:500!important;
line-height:1.5!important;
}
/* The six Online Learning cards get a little more vertical breathing room. */
.po-guided-course-strip .po-guide-card{
min-height:110px!important;
}
/* Pilot-route chooser uses the same readable scale. */
.po-guided-route-strip .po-guide-card{
min-height:108px!important;
}
/* START HERE cards also remain readable without becoming oversized. */
.po-scene[data-panel="start"] .po-guide-card{
min-height:104px!important;
}
/* Medium laptop widths */
@media(max-width:1250px) and (min-width:901px){
.po-guide-card,
.po-guide-card:focus,
.po-guide-card:active{
min-height:94px!important;
padding:13px 14px!important;
}
.po-guide-card small{
font-size:10px!important;
margin-bottom:6px!important;
}
.po-guide-card strong{
font-size:16px!important;
}
.po-guide-card span{
display:block!important;
margin-top:6px!important;
font-size:11px!important;
}
.po-guided-course-strip .po-guide-card,
.po-guided-route-strip .po-guide-card{
min-height:98px!important;
}
}
/* Short screens: keep all three text levels visible. */
@media(max-height:820px) and (min-width:901px){
.po-guide-card,
.po-guide-card:focus,
.po-guide-card:active{
min-height:82px!important;
padding:10px 12px!important;
}
.po-guide-card small{
font-size:9px!important;
margin-bottom:5px!important;
}
.po-guide-card strong{
font-size:15px!important;
line-height:1.2!important;
}
.po-guide-card span{
display:block!important;
margin-top:5px!important;
font-size:10px!important;
line-height:1.35!important;
}
.po-guided-course-strip .po-guide-card,
.po-guided-route-strip .po-guide-card{
min-height:88px!important;
}
}
/* Mobile */
@media(max-width:900px){
.po-guide-card{
min-height:96px!important;
padding:14px 15px!important;
}
.po-guide-card small{
font-size:10px!important;
}
.po-guide-card strong{
font-size:17px!important;
}
.po-guide-card span{
display:block!important;
font-size:11px!important;
}
}
/* =============== V42 / ACCOUNT LOGIN + REGISTER =============== */
@media(min-width:901px){
.po-global-account-label{
margin-top:16px!important;
padding-top:13px!important;
border-top:1px solid rgba(255,255,255,.12)!important;
}
.po-global-account-item{
-webkit-appearance:none!important;
appearance:none!important;
display:grid!important;
grid-template-columns:48px minmax(0,1fr)!important;
gap:10px!important;
align-items:center!important;
flex:0 0 auto!important;
width:100%!important;
min-height:43px!important;
margin:0!important;
padding:6px 9px!important;
border:1px solid transparent!important;
border-radius:0!important;
background:transparent!important;
color:#fff!important;
text-align:left!important;
font-family:inherit!important;
cursor:pointer!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
.po-global-account-item:hover{
transform:translateX(2px)!important;
border-color:rgba(255,255,255,.14)!important;
background:#242a31!important;
}
.po-global-account-item.is-active{
border-color:#4a5159!important;
background:#353b42!important;
box-shadow:inset 3px 0 0 var(--po-gold)!important;
}
.po-global-account-item>span{
display:grid!important;
min-width:44px!important;
min-height:27px!important;
place-items:center!important;
border:1px solid rgba(255,255,255,.18)!important;
color:var(--po-gold-2)!important;
font-size:8px!important;
font-weight:950!important;
letter-spacing:.03em!important;
}
.po-global-account-item>strong{
color:#f0f2f4!important;
font-size:14px!important;
font-weight:900!important;
}
}
.po-auth-shell{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(430px,.72fr);
gap:clamp(36px,5vw,88px);
align-items:center;
height:100%;
padding:clamp(28px,4vw,64px);
border:1px solid var(--po-line);
background:var(--po-paper);
overflow:auto;
}
.po-auth-intro h2{
margin:10px 0 18px;
color:var(--po-ink);
font-size:clamp(48px,4.4vw,76px);
line-height:.96;
letter-spacing:-.05em;
}
.po-auth-intro>p:not(.po-eyebrow){
max-width:670px;
margin:0;
color:var(--po-copy);
font-size:15px!important;
line-height:1.8!important;
}
.po-auth-points{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:32px;
}
.po-auth-points>div{
padding:15px;
border:1px solid var(--po-line);
background:#fbfaf6;
}
.po-auth-points span{
display:block;
margin-bottom:14px;
color:var(--po-gold);
font-size:9px;
font-weight:950;
}
.po-auth-points strong{
display:block;
color:var(--po-ink);
font-size:15px;
}
.po-auth-points small{
display:block;
margin-top:5px;
color:var(--po-copy);
font-size:10px;
line-height:1.45;
}
.po-auth-card{
align-self:center;
width:100%;
max-width:560px;
border:1px solid #cfc8bd;
background:#fffefa;
box-shadow:0 22px 50px rgba(29,33,38,.07);
}
.po-auth-tabs{
display:grid;
grid-template-columns:1fr 1fr;
border-bottom:1px solid #d7d0c5;
}
.po-auth-tabs button{
min-height:52px;
border:0;
border-right:1px solid #d7d0c5;
background:#f1eee8;
color:#777067;
font-family:inherit;
font-size:12px;
font-weight:900;
cursor:pointer;
}
.po-auth-tabs button:last-child{
border-right:0;
}
.po-auth-tabs button.is-active{
background:#fffefa;
color:var(--po-ink);
box-shadow:inset 0 -3px 0 var(--po-gold);
}
.po-auth-pane{
display:none;
padding:27px 30px 24px;
}
.po-auth-pane.is-active{
display:block;
}
.po-auth-heading small{
color:var(--po-gold);
font-size:9px;
font-weight:950;
letter-spacing:.13em;
}
.po-auth-heading h3{
margin:5px 0 5px;
color:var(--po-ink);
font-size:32px;
line-height:1.1;
}
.po-auth-heading p{
margin:0 0 20px!important;
color:var(--po-copy)!important;
font-size:13px!important;
}
.po-auth-social{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.po-auth-social a{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:46px;
padding:0 12px;
border:1px solid #c8c1b6;
color:var(--po-ink)!important;
background:#fff;
font-size:11px;
font-weight:850;
}
.po-auth-social a:hover{
border-color:var(--po-ink);
}
.po-auth-social a>span{
display:grid;
width:22px;
height:22px;
place-items:center;
font-size:13px;
font-weight:950;
}
.po-auth-divider{
position:relative;
margin:20px 0;
text-align:center;
}
.po-auth-divider:before{
content:"";
position:absolute;
left:0;
right:0;
top:50%;
height:1px;
background:#ddd6cc;
}
.po-auth-divider span{
position:relative;
z-index:1;
padding:0 10px;
background:#fffefa;
color:#9b948a;
font-size:8px;
font-weight:950;
}
.po-auth-form{
display:flex;
flex-direction:column;
gap:14px;
}
.po-auth-form>label>span{
display:block;
margin-bottom:6px;
color:#514c46;
font-size:11px;
font-weight:850;
}
.po-auth-form input[type="text"],
.po-auth-form input[type="email"],
.po-auth-form input[type="password"]{
width:100%;
height:48px;
padding:0 13px;
border:1px solid #bfb8ae;
border-radius:0;
outline:none;
background:#fff;
color:#191d21;
font:inherit;
font-size:14px;
}
.po-auth-form input:focus{
border-color:var(--po-gold);
box-shadow:0 0 0 2px rgba(174,128,50,.10);
}
.po-auth-options{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.po-auth-remember{
display:flex!important;
align-items:center;
gap:7px;
margin:0!important;
}
.po-auth-remember span,
.po-auth-options>a{
margin:0!important;
color:#716b63!important;
font-size:10px!important;
font-weight:600!important;
}
.po-auth-options>a:hover{
color:var(--po-ink)!important;
}
.po-auth-form>button{
min-height:50px;
margin-top:2px;
border:1px solid var(--po-dark);
border-radius:0;
background:var(--po-dark);
color:#fff;
font-family:inherit;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
cursor:pointer;
}
.po-auth-form>button:hover{
background:#2a3036;
}
.po-auth-register-note{
margin:0!important;
padding:10px 12px;
border-left:3px solid var(--po-gold);
background:#f3efe7;
color:#6d665d!important;
font-size:10px!important;
line-height:1.55!important;
}
.po-auth-card-foot{
padding:12px 30px;
border-top:1px solid #ddd6cc;
background:#f7f4ee;
text-align:right;
}
.po-auth-card-foot a{
color:var(--po-ink)!important;
font-size:9px;
font-weight:950;
letter-spacing:.07em;
}
@media(max-width:1250px) and (min-width:901px){
.po-auth-shell{
grid-template-columns:minmax(0,.78fr) minmax(390px,.8fr);
gap:28px;
padding:28px;
}
.po-auth-intro h2{
font-size:48px;
}
.po-auth-points{
grid-template-columns:1fr;
gap:5px;
margin-top:20px;
}
.po-auth-points>div{
display:grid;
grid-template-columns:28px 110px 1fr;
gap:9px;
align-items:center;
padding:9px 11px;
}
.po-auth-points span,
.po-auth-points strong,
.po-auth-points small{
margin:0!important;
}
}
@media(max-width:900px){
.po-auth-shell{
display:block;
height:auto;
padding:24px 18px 40px;
}
.po-auth-intro{
display:none;
}
.po-auth-card{
max-width:none;
}
.po-auth-social{
grid-template-columns:1fr;
}
}
/* =============== V44 / CLEAR SOCIAL LOGIN EXPLANATION =============== */
.po-auth-social-intro{
margin:0 0 14px;
padding:14px 16px;
border:1px solid #d8d0c4;
border-left:3px solid var(--po-gold);
background:#f5f1e9;
}
.po-auth-social-intro small{
display:block;
margin-bottom:5px;
color:var(--po-gold);
font-size:9px;
font-weight:950;
letter-spacing:.12em;
}
.po-auth-social-intro strong{
display:block;
color:var(--po-ink);
font-size:16px;
font-weight:950;
line-height:1.3;
}
.po-auth-social-intro p{
margin:7px 0 0!important;
color:#625d56!important;
font-size:12px!important;
line-height:1.6!important;
}
.po-auth-social a{
min-height:50px!important;
font-size:12px!important;
font-weight:900!important;
}
.po-auth-divider span{
padding:0 12px!important;
font-size:9px!important;
letter-spacing:.04em!important;
text-transform:none!important;
}
@media(max-width:900px){
.po-auth-social-intro{
padding:13px 14px;
}
.po-auth-social-intro strong{
font-size:15px;
}
.po-auth-social-intro p{
font-size:11px!important;
}
}
/* =============== V47 / AVIATION RESOURCES =============== */
.po-resources-shell{
display:flex;
flex-direction:column;
height:100%;
min-height:0;
padding:clamp(24px,2.7vw,44px);
border:1px solid var(--po-line);
background:var(--po-paper);
overflow:hidden;
}
.po-resources-head{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
gap:36px;
align-items:end;
flex:0 0 auto;
padding-bottom:18px;
border-bottom:1px solid var(--po-line);
}
.po-resources-head .po-scene-title{
margin:4px 0 0;
}
.po-resources-intro{
margin:0!important;
color:var(--po-copy)!important;
font-size:14px!important;
line-height:1.75!important;
}
.po-resources-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
flex:1 1 auto;
min-height:0;
padding-top:14px;
overflow:hidden;
}
.po-resource-group{
display:flex;
flex-direction:column;
min-width:0;
min-height:0;
border:1px solid #cbc5bb;
background:#fbfaf6;
}
.po-resource-group-head{
display:flex;
align-items:center;
gap:12px;
flex:0 0 auto;
min-height:72px;
padding:13px 16px;
border-bottom:1px solid #d8d2c8;
background:#f4f1ea;
}
.po-resource-group-head>span{
display:grid;
width:36px;
height:36px;
place-items:center;
flex:0 0 36px;
border:1px solid #c6b89f;
color:var(--po-gold);
font-size:9px;
font-weight:950;
}
.po-resource-group-head small{
display:block;
margin-bottom:3px;
color:#8d857b;
font-size:8px;
font-weight:950;
letter-spacing:.12em;
}
.po-resource-group-head h3{
margin:0;
color:var(--po-ink);
font-size:21px;
line-height:1.1;
}
.po-resource-list{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
scrollbar-width:thin;
}
.po-resource-list>a{
display:grid;
grid-template-columns:minmax(0,1fr) 22px;
gap:4px 12px;
padding:13px 15px;
border-bottom:1px solid #e0dbd2;
color:var(--po-ink)!important;
transition:background .16s ease,padding-left .16s ease;
}
.po-resource-list>a:last-child{
border-bottom:0;
}
.po-resource-list>a:hover{
padding-left:19px;
background:var(--po-dark);
color:#fff!important;
}
.po-resource-list strong{
grid-column:1;
font-size:14px;
font-weight:900;
line-height:1.35;
}
.po-resource-list span{
grid-column:1;
color:#777067;
font-size:11px;
line-height:1.4;
}
.po-resource-list b{
grid-column:2;
grid-row:1 / 3;
align-self:center;
justify-self:end;
font-size:16px;
font-weight:500;
}
.po-resource-list>a:hover span{
color:#c5cbd0;
}
.po-resource-list>a:hover b{
color:var(--po-gold-2);
}
@media(max-width:1250px) and (min-width:901px){
.po-resources-grid{
grid-template-columns:1fr 1fr;
overflow-y:auto;
}
.po-resource-group:last-child{
grid-column:1 / -1;
}
.po-resource-list strong{
font-size:13px;
}
.po-resource-list span{
font-size:10px;
}
}
@media(max-height:820px) and (min-width:901px){
.po-resources-shell{
padding:20px 24px 16px;
}
.po-resources-head{
padding-bottom:11px;
}
.po-resources-intro{
font-size:12px!important;
line-height:1.55!important;
}
.po-resources-grid{
padding-top:9px;
}
.po-resource-group-head{
min-height:58px;
padding:9px 12px;
}
.po-resource-group-head h3{
font-size:18px;
}
.po-resource-list>a{
padding:9px 11px;
}
.po-resource-list strong{
font-size:12px;
}
.po-resource-list span{
font-size:9px;
}
}
@media(max-width:900px){
.po-resources-shell{
height:auto;
padding:22px 16px 40px;
}
.po-resources-head{
display:block;
}
.po-resources-intro{
margin-top:12px!important;
}
.po-resources-grid{
display:block;
overflow:visible;
}
.po-resource-group{
margin-top:14px;
}
.po-resource-list{
overflow:visible;
}
.po-resource-list strong{
font-size:15px;
}
.po-resource-list span{
font-size:11px;
}
}
/* =============== V48 / RESOURCE TABS - NO INNER SCROLL =============== */
.po-resources-tabbed{
overflow:hidden!important;
}
.po-resource-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
flex:0 0 auto;
margin-top:14px;
}
.po-resource-tabs button{
display:grid;
grid-template-columns:42px minmax(0,1fr);
gap:11px;
align-items:center;
min-height:64px;
padding:11px 14px;
border:1px solid #cbc5bb;
background:#f5f2ec;
color:var(--po-ink);
text-align:left;
font-family:inherit;
cursor:pointer;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.po-resource-tabs button:hover{
transform:translateY(-1px);
border-color:#aaa195;
}
.po-resource-tabs button.is-active{
border-color:var(--po-gold);
background:#fffefa;
box-shadow:inset 0 -3px 0 var(--po-gold);
}
.po-resource-tabs button>span{
display:grid;
width:36px;
height:36px;
place-items:center;
border:1px solid #c7b99f;
color:var(--po-gold);
font-size:9px;
font-weight:950;
}
.po-resource-tabs small{
display:block;
margin-bottom:3px;
color:#8b847a;
font-size:8px;
font-weight:950;
letter-spacing:.1em;
}
.po-resource-tabs strong{
display:block;
font-size:16px;
font-weight:900;
}
.po-resource-panels{
flex:1 1 auto;
min-height:0;
padding-top:10px;
overflow:hidden;
}
.po-resource-panel{
display:none;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-content:start;
height:100%;
}
.po-resource-panel.is-active{
display:grid;
}
.po-resource-panel>a{
display:grid;
grid-template-columns:minmax(0,1fr) 20px;
gap:4px 10px;
align-content:center;
min-height:72px;
padding:11px 13px;
border:1px solid #d7d1c8;
background:#fbfaf6;
color:var(--po-ink)!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.po-resource-panel>a:hover{
transform:translateY(-1px);
border-color:var(--po-gold);
background:var(--po-dark);
color:#fff!important;
}
.po-resource-panel strong{
grid-column:1;
font-size:13px;
font-weight:900;
line-height:1.3;
}
.po-resource-panel span{
grid-column:1;
color:#777067;
font-size:10px;
line-height:1.35;
}
.po-resource-panel b{
grid-column:2;
grid-row:1/3;
align-self:center;
justify-self:end;
font-size:15px;
font-weight:500;
}
.po-resource-panel>a:hover span{
color:#c8ced3;
}
.po-resource-panel>a:hover b{
color:var(--po-gold-2);
}
/* Weather has the most links, so keep it compact enough to fit without scroll. */
.po-resource-panel[data-resource-panel="weather"]>a{
min-height:60px;
padding:8px 11px;
}
.po-resource-panel[data-resource-panel="weather"] strong{
font-size:12px;
}
.po-resource-panel[data-resource-panel="weather"] span{
font-size:9px;
}
@media(max-width:1250px) and (min-width:901px){
.po-resource-panel{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.po-resource-panel>a{
min-height:58px;
padding:8px 10px;
}
.po-resource-panel strong{
font-size:12px;
}
.po-resource-panel span{
font-size:9px;
}
.po-resource-tabs button{
min-height:56px;
padding:8px 10px;
}
.po-resource-tabs strong{
font-size:14px;
}
}
@media(max-height:820px) and (min-width:901px){
.po-resource-tabs{
margin-top:8px;
}
.po-resource-tabs button{
min-height:50px;
}
.po-resource-panels{
padding-top:7px;
}
.po-resource-panel{
gap:6px;
}
.po-resource-panel>a{
min-height:48px;
padding:6px 9px;
}
.po-resource-panel strong{
font-size:11px;
}
.po-resource-panel span{
font-size:8px;
}
.po-resource-panel[data-resource-panel="weather"]>a{
min-height:44px;
padding:5px 8px;
}
}
@media(max-width:900px){
.po-resource-tabs{
grid-template-columns:1fr;
}
.po-resource-panel,
.po-resource-panel.is-active{
grid-template-columns:1fr;
height:auto;
}
.po-resource-panels{
overflow:visible;
}
.po-resource-panel>a{
min-height:66px;
}
}
/* =============== V49 / PILOT ONLINE HOME ICON =============== */
@media(min-width:901px){
.po-global-home{
display:grid!important;
grid-template-columns:42px minmax(0,1fr)!important;
gap:10px!important;
align-items:center!important;
}
.po-home-plane{
display:grid!important;
width:34px!important;
height:34px!important;
place-items:center!important;
border:1px solid rgba(255,255,255,.18)!important;
color:var(--po-gold-2)!important;
font-size:17px!important;
font-weight:900!important;
line-height:1!important;
}
}
/* =============== V50 / CLEAR RESOURCE TAB HIERARCHY =============== */
/* Categories should read as navigation tabs, not content cards. */
.po-resource-tabs{
position:relative!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:0!important;
margin-top:16px!important;
border-bottom:1px solid #cfc8bd!important;
background:transparent!important;
}
.po-resource-tabs button{
position:relative!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
min-height:58px!important;
padding:10px 16px!important;
border:0!important;
border-right:1px solid #ddd7ce!important;
background:transparent!important;
box-shadow:none!important;
transform:none!important;
}
.po-resource-tabs button:last-child{
border-right:0!important;
}
.po-resource-tabs button:hover{
background:#f5f1ea!important;
transform:none!important;
}
.po-resource-tabs button.is-active{
background:#f8f5ef!important;
box-shadow:none!important;
}
.po-resource-tabs button.is-active:after{
content:""!important;
position:absolute!important;
left:12px!important;
right:12px!important;
bottom:-1px!important;
height:4px!important;
background:var(--po-gold)!important;
}
.po-resource-tabs button>span{
width:auto!important;
height:auto!important;
min-width:0!important;
border:0!important;
color:var(--po-gold)!important;
font-size:10px!important;
font-weight:950!important;
}
.po-resource-tabs small{
margin-bottom:2px!important;
color:#9a9389!important;
font-size:8px!important;
letter-spacing:.11em!important;
}
.po-resource-tabs strong{
font-size:16px!important;
line-height:1.2!important;
}
/* Explicit separator between navigation and the content below. */
.po-resource-content-head{
display:flex!important;
align-items:baseline!important;
gap:10px!important;
flex:0 0 auto!important;
margin:14px 0 9px!important;
padding:0 2px!important;
}
.po-resource-content-head small{
color:var(--po-gold)!important;
font-size:8px!important;
font-weight:950!important;
letter-spacing:.14em!important;
}
.po-resource-content-head strong{
color:var(--po-ink)!important;
font-size:15px!important;
font-weight:900!important;
}
/* Content cards remain clearly boxed, contrasting with the flat tabs above. */
.po-resource-panel>a{
border:1px solid #d7d1c8!important;
background:#fffefa!important;
}
.po-resource-panel>a:hover{
border-color:var(--po-gold)!important;
background:var(--po-dark)!important;
}
/* Keep the distinction on tighter screens too. */
@media(max-width:1250px) and (min-width:901px){
.po-resource-tabs button{
min-height:52px!important;
padding:8px 11px!important;
}
.po-resource-tabs strong{
font-size:14px!important;
}
.po-resource-content-head{
margin-top:10px!important;
margin-bottom:7px!important;
}
}
@media(max-width:900px){
.po-resource-tabs{
grid-template-columns:1fr!important;
border-bottom:0!important;
gap:0!important;
}
.po-resource-tabs button{
border-right:0!important;
border-bottom:1px solid #ddd7ce!important;
}
.po-resource-tabs button.is-active:after{
left:0!important;
right:auto!important;
top:8px!important;
bottom:8px!important;
width:4px!important;
height:auto!important;
}
}
/* =============== V51 / ALL RESOURCES VISIBLE - NO TABS, NO INNER SCROLL =============== */
.po-resources-all{
overflow:hidden!important;
}
.po-resources-all-grid{
display:grid;
grid-template-columns:1.35fr .85fr;
grid-template-rows:auto 1fr;
gap:10px;
flex:1 1 auto;
min-height:0;
padding-top:12px;
overflow:hidden;
}
.po-resource-block{
min-width:0;
border:1px solid #d1cbc1;
background:#faf8f3;
}
.po-resource-block-weather{
grid-column:1 / -1;
}
.po-resource-block-head{
display:flex;
align-items:center;
gap:10px;
min-height:48px;
padding:8px 12px;
border-bottom:1px solid #d8d2c8;
background:#f1ede6;
}
.po-resource-block-no{
display:grid;
width:30px;
height:30px;
flex:0 0 30px;
place-items:center;
border:1px solid #c4b699;
color:var(--po-gold);
font-size:8px;
font-weight:950;
}
.po-resource-block-head small{
display:block;
margin-bottom:2px;
color:#8b847a;
font-size:7px;
font-weight:950;
letter-spacing:.11em;
}
.po-resource-block-head h3{
margin:0;
color:var(--po-ink);
font-size:17px;
line-height:1.1;
}
.po-resource-links{
display:grid;
gap:6px;
padding:7px;
}
.po-resource-links-aviation{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.po-resource-links-study{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.po-resource-links-weather{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.po-resource-links>a{
display:grid;
grid-template-columns:minmax(0,1fr) 16px;
gap:2px 7px;
align-content:center;
min-width:0;
min-height:54px;
padding:7px 9px;
border:1px solid #ddd7ce;
background:#fffefa;
color:var(--po-ink)!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.po-resource-links>a:hover{
transform:translateY(-1px);
border-color:var(--po-gold);
background:var(--po-dark);
color:#fff!important;
}
.po-resource-links strong{
grid-column:1;
min-width:0;
font-size:11px;
font-weight:900;
line-height:1.25;
}
.po-resource-links span{
grid-column:1;
min-width:0;
overflow:hidden;
color:#777067;
font-size:8.5px;
line-height:1.3;
text-overflow:ellipsis;
white-space:nowrap;
}
.po-resource-links b{
grid-column:2;
grid-row:1 / 3;
align-self:center;
justify-self:end;
font-size:13px;
font-weight:500;
}
.po-resource-links>a:hover span{
color:#c8ced3;
}
.po-resource-links>a:hover b{
color:var(--po-gold-2);
}
/* Weather has 16 links: four columns x four rows keeps all visible. */
.po-resource-links-weather>a{
min-height:48px;
padding:6px 8px;
}
.po-resource-links-weather strong{
font-size:10.5px;
}
.po-resource-links-weather span{
font-size:8px;
}
@media(max-width:1320px) and (min-width:901px){
.po-resources-all-grid{
grid-template-columns:1.25fr .75fr;
gap:8px;
padding-top:9px;
}
.po-resource-links{
gap:5px;
padding:6px;
}
.po-resource-links-aviation{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.po-resource-links-study{
grid-template-columns:1fr;
}
.po-resource-links-weather{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.po-resource-links>a{
min-height:48px;
padding:6px 7px;
}
.po-resource-links strong{
font-size:10px;
}
.po-resource-links span{
font-size:7.5px;
}
}
@media(max-height:820px) and (min-width:901px){
.po-resources-head{
padding-bottom:8px!important;
}
.po-resources-all-grid{
gap:6px;
padding-top:7px;
}
.po-resource-block-head{
min-height:39px;
padding:5px 9px;
}
.po-resource-block-no{
width:25px;
height:25px;
flex-basis:25px;
}
.po-resource-block-head h3{
font-size:15px;
}
.po-resource-links{
gap:4px;
padding:5px;
}
.po-resource-links>a{
min-height:39px;
padding:4px 6px;
}
.po-resource-links strong{
font-size:9px;
line-height:1.2;
}
.po-resource-links span{
font-size:7px;
}
.po-resource-links-weather>a{
min-height:37px;
}
.po-resource-links-weather strong{
font-size:9px;
}
.po-resource-links-weather span{
font-size:6.8px;
}
}
@media(max-width:900px){
.po-resources-all{
overflow:visible!important;
}
.po-resources-all-grid{
display:block;
overflow:visible;
}
.po-resource-block{
margin-top:14px;
}
.po-resource-links,
.po-resource-links-aviation,
.po-resource-links-study,
.po-resource-links-weather{
grid-template-columns:1fr;
}
.po-resource-links>a,
.po-resource-links-weather>a{
min-height:62px;
}
.po-resource-links strong,
.po-resource-links-weather strong{
font-size:14px;
}
.po-resource-links span,
.po-resource-links-weather span{
font-size:10px;
white-space:normal;
}
}
/* =============== V52 / RESOURCE LINKS: TITLE ONLY, LARGER =============== */
/* Hide the tiny second-line descriptions entirely. */
.po-resource-links span{
display:none!important;
}
/* Make each resource link a clean single-line row. */
.po-resource-links>a{
grid-template-columns:minmax(0,1fr) 20px!important;
grid-template-rows:1fr!important;
align-items:center!important;
min-height:58px!important;
padding:10px 12px!important;
}
.po-resource-links strong{
grid-column:1!important;
grid-row:1!important;
font-size:14px!important;
font-weight:900!important;
line-height:1.3!important;
}
.po-resource-links b{
grid-column:2!important;
grid-row:1!important;
align-self:center!important;
justify-self:end!important;
font-size:16px!important;
}
/* Weather stays compact enough to fit, but remains readable. */
.po-resource-links-weather>a{
min-height:54px!important;
padding:9px 11px!important;
}
.po-resource-links-weather strong{
font-size:13px!important;
}
/* Slightly larger category headings too. */
.po-resource-block-head{
min-height:52px!important;
padding:9px 13px!important;
}
.po-resource-block-head h3{
font-size:19px!important;
}
.po-resource-block-head small{
font-size:8px!important;
}
/* Medium desktop */
@media(max-width:1320px) and (min-width:901px){
.po-resource-links>a{
min-height:52px!important;
padding:8px 10px!important;
}
.po-resource-links strong{
font-size:12.5px!important;
}
.po-resource-links-weather>a{
min-height:48px!important;
}
.po-resource-links-weather strong{
font-size:12px!important;
}
}
/* Short screens */
@media(max-height:820px) and (min-width:901px){
.po-resource-links>a{
min-height:45px!important;
padding:6px 8px!important;
}
.po-resource-links strong{
font-size:11.5px!important;
}
.po-resource-links-weather>a{
min-height:42px!important;
}
.po-resource-links-weather strong{
font-size:11px!important;
}
.po-resource-block-head{
min-height:42px!important;
}
.po-resource-block-head h3{
font-size:16px!important;
}
}
/* Mobile */
@media(max-width:900px){
.po-resource-links>a,
.po-resource-links-weather>a{
min-height:58px!important;
padding:10px 12px!important;
}
.po-resource-links strong,
.po-resource-links-weather strong{
font-size:15px!important;
}
}
/* =============== V53 / VERTICAL RESOURCE COLUMNS =============== */
.po-resources-columns{overflow:hidden!important}
.po-resource-column-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:9px;
flex:1 1 auto;
min-height:0;
padding-top:12px;
overflow:hidden;
}
.po-resource-column{
display:flex;
flex-direction:column;
min-width:0;
min-height:0;
border:1px solid #d0c9bf;
background:#faf8f3;
}
.po-resource-column-head{
display:flex;
align-items:center;
gap:9px;
flex:0 0 auto;
min-height:62px;
padding:10px 11px;
border-bottom:1px solid #d8d1c7;
background:#f0ece5;
}
.po-resource-column-head>span{
display:grid;
width:32px;height:32px;flex:0 0 32px;
place-items:center;
border:1px solid #c4b493;
color:var(--po-gold);
font-size:8px;font-weight:950;
}
.po-resource-column-head small{
display:block;margin-bottom:3px;
color:#8f887e;font-size:7px;font-weight:950;letter-spacing:.08em;
}
.po-resource-column-head h3{
margin:0;color:var(--po-ink);font-size:16px;font-weight:900;line-height:1.15;
}
.po-resource-column-list{
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
}
.po-resource-column-list>a{
display:grid;
grid-template-columns:minmax(0,1fr) 17px;
gap:8px;
align-items:center;
flex:1 1 0;
min-height:40px;
padding:8px 10px;
border-bottom:1px solid #ded8cf;
background:#fffefa;
color:var(--po-ink)!important;
transition:background .16s ease,color .16s ease,padding-left .16s ease;
}
.po-resource-column-list>a:last-child{border-bottom:0}
.po-resource-column-list>a:hover{
padding-left:13px;background:var(--po-dark);color:#fff!important;
}
.po-resource-column-list strong{
min-width:0;font-size:13px;font-weight:900;line-height:1.28;
}
.po-resource-column-list b{
justify-self:end;color:#8b8278;font-size:14px;font-weight:500;
}
.po-resource-column-list>a:hover b{color:var(--po-gold-2)}
.po-resource-column:nth-child(4) .po-resource-column-list strong{font-size:11.5px}
.po-resource-column:nth-child(4) .po-resource-column-list>a{
min-height:34px;padding-top:5px;padding-bottom:5px;
}
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{
flex:0 0 auto;min-height:48px;
}
@media(max-width:1350px) and (min-width:901px){
.po-resource-column-grid{gap:6px}
.po-resource-column-head{min-height:55px;padding:8px}
.po-resource-column-head>span{width:27px;height:27px;flex-basis:27px}
.po-resource-column-head h3{font-size:14px}
.po-resource-column-list>a{padding-left:7px;padding-right:7px}
.po-resource-column-list strong{font-size:11.5px}
.po-resource-column:nth-child(4) .po-resource-column-list strong{font-size:10px}
}
@media(max-height:820px) and (min-width:901px){
.po-resources-head{padding-bottom:8px!important}
.po-resource-column-grid{padding-top:7px;gap:5px}
.po-resource-column-head{min-height:47px;padding:6px 7px}
.po-resource-column-head small{font-size:6px}
.po-resource-column-head h3{font-size:13px}
.po-resource-column-list>a{min-height:30px;padding:4px 6px}
.po-resource-column-list strong{font-size:10px}
.po-resource-column:nth-child(4) .po-resource-column-list strong{font-size:9px}
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{min-height:38px}
}
@media(max-width:900px){
.po-resources-columns{overflow:visible!important}
.po-resource-column-grid{display:block;overflow:visible}
.po-resource-column{margin-top:14px}
.po-resource-column-list>a,
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(4) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{
min-height:54px;padding:10px 12px;
}
.po-resource-column-list strong,
.po-resource-column:nth-child(4) .po-resource-column-list strong{font-size:14px}
}
/* =============== V54 / EQUAL-SIZE RESOURCE BOXES =============== */
/* Every resource link uses exactly the same box size. */
.po-resource-column-list{
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
}
.po-resource-column-list>a,
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(4) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{
flex:0 0 48px!important;
width:100%!important;
min-height:48px!important;
height:48px!important;
padding:7px 9px!important;
}
.po-resource-column-list strong,
.po-resource-column:nth-child(4) .po-resource-column-list strong{
font-size:12px!important;
line-height:1.25!important;
}
/* Category headers also stay identical in height. */
.po-resource-column-head{
min-height:60px!important;
height:60px!important;
padding:9px 10px!important;
}
/* Medium desktop: all boxes shrink together, never individually. */
@media(max-width:1350px) and (min-width:901px){
.po-resource-column-list>a,
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(4) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{
flex-basis:44px!important;
min-height:44px!important;
height:44px!important;
padding:6px 7px!important;
}
.po-resource-column-list strong,
.po-resource-column:nth-child(4) .po-resource-column-list strong{
font-size:11px!important;
}
.po-resource-column-head{
min-height:54px!important;
height:54px!important;
}
}
/* Short screens: same-size boxes remain, only uniformly shorter. */
@media(max-height:820px) and (min-width:901px){
.po-resource-column-list>a,
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(4) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{
flex-basis:36px!important;
min-height:36px!important;
height:36px!important;
padding:4px 6px!important;
}
.po-resource-column-list strong,
.po-resource-column:nth-child(4) .po-resource-column-list strong{
font-size:10px!important;
}
.po-resource-column-head{
min-height:44px!important;
height:44px!important;
}
}
/* Mobile: equal cards, but comfortably tappable. */
@media(max-width:900px){
.po-resource-column-list>a,
.po-resource-column:nth-child(2) .po-resource-column-list>a,
.po-resource-column:nth-child(4) .po-resource-column-list>a,
.po-resource-column:nth-child(5) .po-resource-column-list>a{
flex-basis:56px!important;
min-height:56px!important;
height:56px!important;
padding:9px 11px!important;
}
.po-resource-column-list strong,
.po-resource-column:nth-child(4) .po-resource-column-list strong{
font-size:14px!important;
}
.po-resource-column-head{
min-height:58px!important;
height:58px!important;
}
}
/* =============== LESSON EXPERIENCE =============== */
.po-lesson-shell{
display:grid;
grid-template-columns:minmax(280px,330px) minmax(0,1fr);
height:100%;
min-height:0;
border:1px solid var(--po-line);
background:#f7f5f0;
overflow:hidden;
}
.po-lesson-side{
display:flex;
flex-direction:column;
min-height:0;
padding:22px 16px 16px;
background:#181d22;
color:#fff!important;
}
.po-lesson-side .po-eyebrow{
margin:0 0 10px;
color:#e2aa4f!important;
}
.po-lesson-side h3{
margin:0 0 5px;
color:#fff!important;
font-size:22px;
line-height:1.15;
}
.po-lesson-side>small{
display:block;
color:#aeb6bd!important;
font-size:9px;
line-height:1.55;
}
.po-progress{
height:5px;
margin:15px 0 7px;
overflow:hidden;
background:#394149;
}
.po-progress span{
display:block;
width:40%;
height:100%;
background:var(--po-green);
transition:width .25s ease;
}
.po-progress-copy{
margin-bottom:17px;
color:#b7bec4!important;
font-size:8px;
font-weight:800;
letter-spacing:.03em;
}
.po-lesson-menu-label{
margin:0 0 7px;
color:#89949e!important;
font-size:7px;
font-weight:950;
letter-spacing:.14em;
}
.po-lesson-menu{
display:grid;
gap:5px;
min-height:0;
overflow:auto;
padding-right:2px;
}
button.po-lesson-item,
button.po-lesson-item:visited,
button.po-lesson-item:focus,
button.po-lesson-item:active{
-webkit-appearance:none!important;
appearance:none!important;
display:grid!important;
grid-template-columns:31px minmax(0,1fr)!important;
gap:9px!important;
width:100%!important;
min-height:58px!important;
margin:0!important;
padding:9px 10px!important;
border:1px solid transparent!important;
border-radius:3px!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
color:#d9dee2!important;
text-align:left!important;
font-family:inherit!important;
cursor:pointer!important;
transition:background .16s ease,border-color .16s ease,color .16s ease!important;
}
button.po-lesson-item:hover{
border-color:#4b535b!important;
background:#252b31!important;
color:#fff!important;
}
button.po-lesson-item.is-active{
border-color:#454c53!important;
background:#3b4249!important;
color:#fff!important;
box-shadow:inset 2px 0 0 #d8a348!important;
}
button.po-lesson-item.is-done{
color:#d7dcdf!important;
}
.po-lesson-item-num{
display:flex;
width:31px;
height:31px;
align-items:center;
justify-content:center;
align-self:center;
border:1px solid #59616a;
color:#aab2b9!important;
font-size:8px;
font-weight:950;
line-height:1;
}
.po-lesson-item.is-active .po-lesson-item-num{
border-color:#d8a348;
color:#fff!important;
}
.po-lesson-item.is-done .po-lesson-item-num:before{
content:"✓";
color:#7ec98d!important;
font-size:11px;
}
.po-lesson-item.is-done .po-lesson-item-num span{
display:none;
}
.po-lesson-item-copy{
display:block;
align-self:center;
min-width:0;
color:inherit!important;
}
.po-lesson-item-title{
display:block;
margin-bottom:2px;
color:inherit!important;
font-size:10.5px;
font-weight:900;
line-height:1.35;
}
.po-lesson-item-desc{
display:block;
color:#929ca4!important;
font-size:7.5px;
line-height:1.45;
}
.po-lesson-item.is-active .po-lesson-item-desc{
color:#d4d8db!important;
}
.po-lesson-side-bottom{
margin-top:auto;
padding-top:13px;
}
.po-lesson-side-tip{
margin:0 0 10px;
padding-top:11px;
border-top:1px solid #333a41;
color:#9099a1!important;
font-size:8px;
line-height:1.6;
}
.po-complete-btn{
width:100%!important;
min-height:42px!important;
margin:0!important;
padding:0 14px!important;
border:0!important;
border-radius:999px!important;
background:#f2f1ed!important;
color:#171b20!important;
font-family:inherit!important;
font-size:10px!important;
font-weight:950!important;
cursor:pointer!important;
}
.po-complete-btn:hover{
background:#fff!important;
color:#111!important;
}
.po-lesson-main{
min-height:0;
padding:24px clamp(22px,2.8vw,50px);
overflow:auto;
background:#f7f5f0;
}
.po-lesson-main h2{
margin:0 0 7px;
font-size:clamp(30px,3vw,54px);
line-height:1;
letter-spacing:-.045em;
}
.po-lesson-main .lead{
margin:0 0 20px;
color:var(--po-copy);
font-size:13px;
line-height:1.8;
}
.po-lesson-meta{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:0 0 17px;
}
.po-lesson-meta span{
padding:6px 8px;
border:1px solid #d8d3c9;
background:#fbfaf7;
color:#746d63;
font-size:7px;
font-weight:900;
letter-spacing:.08em;
}
.po-lesson-section-title{
display:flex;
align-items:center;
gap:9px;
margin:21px 0 10px;
color:#22272c;
font-size:12px;
font-weight:950;
}
.po-lesson-section-title:before{
content:"";
width:22px;
height:2px;
background:#d2a14d;
}
.po-point{
display:inline-flex;
padding:7px 11px;
margin-bottom:12px;
background:#e9dfca;
color:#4a3e2c;
font-size:9px;
font-weight:950;
letter-spacing:.1em;
}
.po-lesson-main .po-chat{
display:grid;
gap:13px;
}
.po-lesson-main .po-chat-row{
margin:0;
}
.po-lesson-main .po-chat-bubble{
font-size:clamp(13px,.82vw,15px);
line-height:1.8;
}
.po-lesson-concepts{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:17px;
}
.po-lesson-concept{
padding:13px 14px;
border:1px solid #d6d1c7;
background:#fbfaf6;
}
.po-lesson-concept small{
display:block;
margin-bottom:5px;
color:#a4772f;
font-size:7px;
font-weight:950;
letter-spacing:.1em;
}
.po-lesson-concept strong{
display:block;
margin-bottom:5px;
color:#22272c;
font-size:12px;
}
.po-lesson-concept p{
margin:0;
color:#69645c;
font-size:9px;
line-height:1.65;
}
.po-note{
margin-top:17px;
padding:15px 17px;
border-left:3px solid var(--po-gold);
background:#ece8df;
}
.po-note strong{
display:block;
margin-bottom:5px;
font-size:10px;
letter-spacing:.07em;
}
.po-note p{
margin:0;
color:var(--po-copy);
font-size:11px;
line-height:1.75;
}
.po-lesson-summary{
margin-top:17px;
padding:15px 17px;
border:1px solid #d5d0c7;
background:#fffefa;
}
.po-lesson-summary-title{
margin:0 0 10px;
color:#22272c;
font-size:11px;
font-weight:950;
}
.po-lesson-summary ul{
display:grid;
gap:7px;
margin:0;
padding:0;
list-style:none;
}
.po-lesson-summary li{
position:relative;
padding-left:18px;
color:#57534c;
font-size:10px;
line-height:1.65;
}
.po-lesson-summary li:before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#5f9e6c;
font-weight:950;
}
.po-lesson-controls{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:18px;
padding-top:15px;
border-top:1px solid #d7d2c9;
}
.po-lesson-nav-btn{
display:inline-flex!important;
min-height:40px!important;
padding:0 14px!important;
align-items:center!important;
gap:10px!important;
border:1px solid #2b3035!important;
border-radius:2px!important;
background:#fffefa!important;
color:#22272c!important;
font-family:inherit!important;
font-size:9px!important;
font-weight:950!important;
cursor:pointer!important;
}
.po-lesson-nav-btn.next{
margin-left:auto!important;
background:#20252a!important;
color:#fff!important;
}
.po-lesson-nav-btn:disabled{
opacity:.32!important;
cursor:default!important;
}
@media(max-width:1120px) and (min-width:901px){
.po-lesson-shell{grid-template-columns:270px minmax(0,1fr);}
.po-lesson-concepts{grid-template-columns:1fr;}
}
/* =============== CAREER STORIES =============== */
.po-career-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1;min-height:0;}
.po-career-card{position:relative;display:flex;align-items:flex-end;min-height:0;overflow:hidden;background:#242a31;color:#fff!important;border:1px solid #a59f94;}
.po-career-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}.po-career-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,18,22,.98),rgba(15,18,22,.28) 65%,rgba(15,18,22,.04));}
.po-career-content{position:relative;z-index:2;padding:20px;width:100%;}.po-career-content small{color:var(--po-gold-2);font-size:8px;font-weight:950;letter-spacing:.12em;}.po-career-content h3{margin:7px 0 6px;font-size:clamp(22px,2vw,34px);}.po-career-content p{margin:0;color:#d1d6da;font-size:10px;line-height:1.6;}.po-career-more{display:block;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);font-size:9px;font-weight:900;}
/* =============== V20 / CAREER STORIES 10-PANEL WALL =============== */
.po-career-grid{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
flex:1 1 auto!important;
min-height:0!important;
}
.po-career-card{
min-height:0!important;
height:100%!important;
border-color:#999288!important;
}
.po-career-card.is-sample{
cursor:default!important;
}
.po-career-card.is-sample:before{
content:"SAMPLE";
position:absolute;
z-index:4;
top:10px;
right:10px;
padding:4px 6px;
border:1px solid rgba(255,255,255,.5);
background:rgba(17,22,27,.55);
color:#fff;
font-size:6px;
font-weight:950;
letter-spacing:.11em;
backdrop-filter:blur(4px);
}
.po-career-placeholder-visual{
position:absolute;
inset:0;
overflow:hidden;
background:linear-gradient(135deg,#8f9aa3,#26323b);
}
.po-career-placeholder-visual:before{
content:"";
position:absolute;
width:110%;
height:110%;
left:-32%;
top:-38%;
border:28px solid rgba(255,255,255,.08);
border-radius:50%;
}
.po-career-placeholder-visual:after{
content:"";
position:absolute;
width:74%;
height:74%;
right:-24%;
bottom:-32%;
border:20px solid rgba(214,165,76,.15);
border-radius:50%;
}
/* Give the placeholder wall enough visual variation without pretending
these are real people/photos. */
.po-career-card:nth-child(2) .po-career-placeholder-visual{background:linear-gradient(135deg,#9a8f84,#263640);}
.po-career-card:nth-child(3) .po-career-placeholder-visual{background:linear-gradient(135deg,#b7a997,#3c3030);}
.po-career-card:nth-child(4) .po-career-placeholder-visual{background:linear-gradient(135deg,#8fa3ad,#2c3e46);}
.po-career-card:nth-child(5) .po-career-placeholder-visual{background:linear-gradient(135deg,#a79a82,#3e4546);}
.po-career-card:nth-child(6) .po-career-placeholder-visual{background:linear-gradient(135deg,#8da39a,#2c4039);}
.po-career-card:nth-child(7) .po-career-placeholder-visual{background:linear-gradient(135deg,#b39b83,#493a2f);}
.po-career-card:nth-child(8) .po-career-placeholder-visual{background:linear-gradient(135deg,#9ea2a7,#33383d);}
.po-career-card:nth-child(9) .po-career-placeholder-visual{background:linear-gradient(135deg,#91a9b7,#304858);}
.po-career-card:nth-child(10) .po-career-placeholder-visual{background:linear-gradient(135deg,#b0a09a,#4b3e3b);}
.po-career-content{
padding:14px!important;
}
.po-career-content small{
font-size:7px!important;
}
.po-career-content h3{
margin:6px 0 5px!important;
font-size:clamp(15px,1.15vw,21px)!important;
line-height:1.22!important;
}
.po-career-content p{
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
margin:0!important;
color:#d1d6da!important;
font-size:9px!important;
line-height:1.5!important;
}
.po-career-more{
margin-top:10px!important;
padding-top:8px!important;
font-size:7.5px!important;
}
/* Keep 10 panels useful on mid-sized desktop screens. */
@media(max-width:1450px) and (min-width:901px){
.po-career-grid{
grid-template-columns:repeat(5,minmax(180px,1fr))!important;
grid-template-rows:repeat(2,minmax(180px,1fr))!important;
overflow:auto!important;
}
}
/* Short screens: reduce text footprint rather than hiding cards. */
@media(max-height:820px) and (min-width:901px){
.po-career-grid{
gap:7px!important;
}
.po-career-content{
padding:10px!important;
}
.po-career-content h3{
font-size:13px!important;
}
.po-career-content p{
-webkit-line-clamp:2;
font-size:7.5px!important;
}
.po-career-more{
margin-top:6px!important;
padding-top:5px!important;
}
}
/* =============== NEWS / BENTO =============== */
.po-news-bento{display:grid;grid-template-columns:1.15fr .9fr .9fr;grid-template-rows:1fr 1fr;gap:12px;flex:1;min-height:0;}
.po-news-tile{position:relative;padding:18px 20px;border:1px solid var(--po-line);background:var(--po-card);color:var(--po-ink)!important;overflow:hidden;display:flex;flex-direction:column;}
.po-news-tile.feature{grid-row:1/3;background:var(--po-dark);color:#fff!important;border-color:var(--po-dark);}
.po-news-type{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:auto;color:var(--po-gold);font-size:8px;font-weight:950;letter-spacing:.12em;}.po-news-tile.feature .po-news-type{color:var(--po-gold-2);}
.po-news-tile h3{margin:18px 0 8px;font-size:clamp(19px,1.75vw,31px);line-height:1.18;letter-spacing:-.025em;}.po-news-tile.feature h3{font-size:clamp(30px,3vw,54px);}.po-news-tile p{margin:0;color:var(--po-copy);font-size:clamp(10px,.72vw,12px);line-height:1.65;}.po-news-tile.feature p{color:#c8d0d7;max-width:560px;}.po-news-footer{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid #d7d1c7;font-size:8px;font-weight:900;}.po-news-tile.feature .po-news-footer{border-color:rgba(255,255,255,.16);color:#b8c1c8;}
/* =============== ABOUT =============== */
.po-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;flex:1;min-height:0;}.po-about-message{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,50px);border:1px solid var(--po-line);background:var(--po-card);}.po-about-message h2{margin:0 0 18px;font-size:clamp(42px,4.2vw,78px);line-height:1;letter-spacing:-.055em;}.po-about-message p{max-width:760px;margin:0;color:var(--po-copy);font-size:clamp(12px,.9vw,15px);line-height:1.95;}.po-about-pillars{display:grid;grid-template-rows:repeat(3,1fr);gap:10px;}.po-about-pillar{padding:20px;border:1px solid var(--po-line);background:var(--po-paper-2);display:flex;flex-direction:column;justify-content:flex-end;}.po-about-pillar small{color:var(--po-gold);font-size:8px;font-weight:950;letter-spacing:.12em}.po-about-pillar strong{margin:8px 0 4px;font-size:24px}.po-about-pillar span{color:var(--po-copy);font-size:10px;line-height:1.6}
/* =============== EXPLORE OVERLAY =============== */
.po-explore-panel{position:fixed;z-index:1000;inset:0;visibility:hidden;opacity:0;transition:.2s ease;}.po-explore-panel.is-open{visibility:visible;opacity:1;}.po-explore-backdrop{position:absolute;inset:0;background:rgba(14,17,20,.52);backdrop-filter:blur(5px);}.po-explore-card{position:absolute;top:70px;right:24px;width:min(720px,calc(100% - 48px));padding:28px;background:var(--paper,#f3f1eb);border:1px solid var(--po-line);box-shadow:0 28px 70px rgba(0,0,0,.18);}.po-explore-card h2{margin:0 0 20px;font-size:28px;}.po-explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}.po-explore-col small{display:block;margin-bottom:9px;color:var(--po-gold);font-size:8px;font-weight:950;letter-spacing:.12em}.po-explore-col a,.po-explore-col button{display:block;width:100%;padding:8px 0;border:0;background:none;color:var(--po-ink)!important;text-align:left;font-size:12px;font-weight:800;cursor:pointer;}
/* =============== MOBILE FLOW =============== */
.po-mobile{display:none;}
@media(max-width:900px){
html,body{overflow-x:hidden!important;overflow-y:auto!important;background:#071522;}
.po-desktop,.po-scene-nav{display:none!important;}
.po-mobile{display:block;background:#071522;}
.po-header{height:56px;position:fixed;}.po-logo{top:20px;left:16px}.po-logo strong{font-size:17px}.po-logo small{display:none}.po-actions{top:10px;right:8px;gap:5px}.po-head-btn{min-height:31px;padding:0 10px;font-size:9px;letter-spacing:.7px;}
.po-mobile-section{padding:74px 16px;}.po-mobile-inner{width:100%;max-width:640px;margin:0 auto;}.po-mobile-kicker{margin:0 0 9px;color:var(--po-gold);font-size:9px;font-weight:950;letter-spacing:.16em}.po-mobile-title{margin:0;font-size:36px;line-height:1.04;letter-spacing:-.045em}.po-mobile-copy{margin:15px 0 0;font-size:13px;line-height:1.8}.po-mobile-cta{display:inline-flex;margin-top:20px;min-height:42px;padding:0 15px;align-items:center;border:1px solid currentColor;color:inherit!important;font-size:9px;font-weight:950;letter-spacing:.08em}.po-mobile-cta:after{content:"→";margin-left:14px;font-size:15px;}
/* Top conversation is the landing hero */
.po-mobile-start{padding-top:78px;padding-bottom:58px;background:var(--po-paper);color:var(--po-ink);}
.po-mobile-start .po-mobile-title{font-size:clamp(33px,10vw,46px);white-space:nowrap;}
.po-mobile-start-head{padding:18px 0 16px;border-bottom:1px solid var(--po-line);}.po-mobile-start-head p{margin:10px 0 0;color:var(--po-copy);font-size:12px;line-height:1.7;}
.po-mobile-start .po-chat{gap:12px;margin-top:18px}.po-mobile-start .po-avatar{flex-basis:46px}.po-mobile-start .po-avatar img{width:44px;height:44px}.po-mobile-start .po-chat-bubble{max-width:calc(100% - 58px);padding:12px 13px;font-size:13px;line-height:1.65;}
.po-mobile-guide{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.po-mobile-guide a{padding:13px;border:1px solid var(--po-line);background:var(--po-card);color:var(--po-ink)!important}.po-mobile-guide small{display:block;color:var(--po-gold);font-size:7px;font-weight:950;letter-spacing:.1em}.po-mobile-guide strong{display:block;margin-top:5px;font-size:13px;line-height:1.3}.po-mobile-scroll{display:flex;margin-top:28px;align-items:center;justify-content:center;gap:8px;color:#80786c;font-size:8px;font-weight:900;letter-spacing:.15em}.po-mobile-scroll:after{content:"↓";font-size:16px;}
/* Alternate light/dark, simplified */
.po-mobile-become{background:#071522;color:#fff}.po-mobile-become .po-mobile-copy{color:#b9c5d2}.po-mobile-route-cards{display:grid;gap:8px;margin-top:24px}.po-mobile-route-card{padding:17px;border:1px solid rgba(255,255,255,.16);background:#0c2032}.po-mobile-route-card small{display:block;color:var(--po-gold-2);font-size:7px;font-weight:950;letter-spacing:.1em}.po-mobile-route-card strong{display:block;margin:5px 0;font-size:21px}.po-mobile-route-card p{margin:0;color:#b9c5d2;font-size:11px;line-height:1.7}
.po-mobile-learning{background:var(--po-paper);color:var(--po-ink)}.po-mobile-learning .po-mobile-copy{color:var(--po-copy)}.po-mobile-who{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.po-mobile-who div{padding:13px;border:1px solid var(--po-line);background:var(--po-card)}.po-mobile-who small{display:block;color:var(--po-gold);font-size:7px;font-weight:950}.po-mobile-who strong{display:block;margin:5px 0 3px;font-size:13px}.po-mobile-who span{color:var(--po-copy);font-size:9px;line-height:1.45}
.po-mobile-lesson{background:#071522;color:#fff}.po-mobile-lesson .po-mobile-copy{color:#b9c5d2}.po-mobile-lesson-demo{margin-top:22px;padding:16px;background:#f3f1eb;color:var(--po-ink)}.po-mobile-lesson-demo .po-chat-bubble{font-size:12px}.po-mobile-lesson-demo .po-avatar{flex-basis:44px}.po-mobile-lesson-demo .po-avatar img{width:42px;height:42px}
.po-mobile-careers{background:var(--po-paper);color:var(--po-ink)}.po-mobile-careers .po-mobile-copy{color:var(--po-copy)}.po-mobile-career-card{margin-top:22px;min-height:420px;position:relative;overflow:hidden;background:#20262d}.po-mobile-career-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.po-mobile-career-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,18,22,.96),rgba(15,18,22,.1) 70%)}.po-mobile-career-content{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:20px;color:#fff}.po-mobile-career-content small{color:var(--po-gold-2);font-size:8px;font-weight:950}.po-mobile-career-content h3{margin:7px 0 5px;font-size:29px}.po-mobile-career-content p{margin:0;color:#d4d9dd;font-size:11px;line-height:1.6}
.po-mobile-news{background:#071522;color:#fff}.po-mobile-news .po-mobile-copy{color:#b9c5d2}.po-mobile-news-list{display:grid;gap:8px;margin-top:22px}.po-mobile-news-item{padding:15px;border:1px solid rgba(255,255,255,.16);background:#0c2032;color:#fff!important}.po-mobile-news-item small{display:block;color:var(--po-gold-2);font-size:7px;font-weight:950;letter-spacing:.1em}.po-mobile-news-item strong{display:block;margin:5px 0;font-size:15px;line-height:1.4}.po-mobile-news-item span{color:#aebbc6;font-size:9px}
.po-mobile-about{background:var(--po-paper);color:var(--po-ink)}.po-mobile-about .po-mobile-copy{color:var(--po-copy)}
.po-explore-card{top:58px;left:10px;right:10px;width:auto;padding:20px}.po-explore-grid{grid-template-columns:1fr 1fr}.po-explore-card h2{font-size:23px}
}
@media(min-width:901px) and (max-width:1280px){
.po-scene-inner{padding-right:316px;}
.po-scene-nav button{width:41px;font-size:10px;}
.po-route-grid{grid-template-columns:repeat(3,minmax(0,1fr));overflow:auto;align-content:start}.po-route{min-height:250px}.po-course-link{padding:6px 2px}.po-guide-card span{display:none}.po-chat-bubble{font-size:13px}.po-news-bento{grid-template-columns:1fr 1fr}.po-news-tile.feature{grid-row:auto;grid-column:1/3}.po-news-bento{grid-template-rows:auto}.po-career-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto}.po-career-card{min-height:300px}
}
@media(min-width:901px) and (max-height:760px){
.po-scene-inner{padding-top:76px;padding-bottom:14px}.po-head-grid{margin-bottom:12px}.po-start-main{padding-top:18px}.po-chat{gap:10px;margin-top:12px}.po-guide-strip{margin-top:12px}.po-route h3{margin-top:9px}.po-route-details{gap:4px}.po-course-link{padding:5px 2px}.po-lesson-main{padding-top:18px;padding-bottom:18px}
}
@media(prefers-reduced-motion:reduce){.po-scene,.po-guide-card,.po-head-btn{transition:none!important}}
/* =========================================================
V2 / CENTERED DESKTOP LAYOUT
START HERE = lesson-like left guide + centered conversation
Right side = persistent site scene navigation
========================================================= */
@media(min-width:901px){
/* Keep left guide and right global navigation visually balanced. */
.po-scene-inner{
padding-left:clamp(22px,1.7vw,34px);
padding-right:clamp(300px,17.4vw,340px);
}
.po-scene-nav{
top:50%;
right:22px;
transform:translateY(-50%);
align-items:stretch;
}
.po-scene-nav button{
width:clamp(40px,2.4vw,48px);
min-height:clamp(158px,17vh,184px);
color:var(--po-ink)!important;
}
.po-scene-nav button:hover,
.po-scene-nav button.is-active{
background:var(--po-dark)!important;
color:#fff!important;
}
/* START HERE: mimic the real lesson-page composition. */
.po-start-layout{
grid-template-columns:clamp(275px,16.2vw,320px) minmax(0,1fr);
background:var(--po-paper);
border-color:#c8c2b8;
}
.po-start-sidebar{
padding:22px 16px 18px;
background:#181d22!important;
border-right:1px solid #2d343b;
}
.po-start-sidebar .po-eyebrow,
.po-start-sidebar h2,
.po-start-sidebar>p,
.po-start-sidebar-foot,
.po-start-sidebar *{
color:#fff;
}
.po-start-sidebar .po-eyebrow{color:var(--po-gold-2)!important;}
.po-start-sidebar>p{color:#b8c0c7!important;}
.po-start-sidebar-foot{color:#98a2aa!important;}
.po-start-progress-label{
display:flex;
justify-content:space-between;
gap:12px;
margin:3px 0 8px;
color:#c9d0d5!important;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
}
.po-start-progress{
height:5px;
margin-bottom:18px;
overflow:hidden;
border-radius:999px;
background:#f1f1ef;
}
.po-start-progress span{
display:block;
width:25%;
height:100%;
background:var(--po-green);
}
.po-start-menu-label{
margin:0 0 8px;
color:#8f9aa3!important;
font-size:8px;
font-weight:950;
letter-spacing:.13em;
}
.po-journey-steps{gap:4px;margin-top:0;}
.po-journey-step,
.po-journey-step:focus,
.po-journey-step:active{
-webkit-appearance:none!important;
appearance:none!important;
width:100%;
min-height:60px;
padding:10px 10px!important;
border:0!important;
border-left:3px solid transparent!important;
border-radius:5px!important;
outline:none!important;
box-shadow:none!important;
background:transparent!important;
color:#fff!important;
}
.po-journey-step:hover{
background:#2a3036!important;
color:#fff!important;
}
.po-journey-step.is-current{
background:#343a40!important;
border-left-color:var(--po-gold-2)!important;
}
.po-journey-step span{
color:#eef2f4!important;
border-color:#5c656d!important;
background:#14191e!important;
}
.po-journey-step strong{
color:#fff!important;
font-size:13px;
}
.po-journey-step small{
color:#b9c2c9!important;
font-size:9px;
}
/* The reading/conversation column sits in the visual center. */
.po-start-main{
padding:clamp(26px,2.3vw,42px) clamp(28px,3.2vw,62px) 24px;
}
.po-start-head,
.po-start-main>.po-chat,
.po-start-main>.po-guide-strip{
width:min(100%,980px);
margin-left:auto;
margin-right:auto;
}
.po-start-head{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
gap:34px;
}
.po-start-main>.po-chat{margin-top:24px;}
.po-chat-bubble{
max-width:min(82%,760px);
font-size:clamp(14px,.92vw,17px);
line-height:1.8;
}
.po-guide-strip{
gap:9px;
margin-top:22px!important;
}
.po-guide-card,
.po-guide-card:focus,
.po-guide-card:active{
-webkit-appearance:none!important;
appearance:none!important;
border:1px solid #bdb7ac!important;
border-radius:3px!important;
outline:none!important;
box-shadow:none!important;
background:#faf9f5!important;
color:var(--po-ink)!important;
}
.po-guide-card:hover{
background:#eee9df!important;
border-color:#81786a!important;
color:var(--po-ink)!important;
}
.po-guide-card strong{color:var(--po-ink)!important;}
.po-guide-card span{color:var(--po-copy)!important;}
.po-guide-card small{color:var(--po-gold)!important;}
/* Lesson preview: center the actual article like the real TutorLMS page. */
.po-lesson-shell{
grid-template-columns:clamp(270px,16vw,320px) minmax(0,1fr);
}
.po-lesson-main{
padding:clamp(26px,2.4vw,44px) clamp(32px,4.2vw,84px);
}
.po-lesson-main>*{
width:min(100%,960px);
margin-left:auto;
margin-right:auto;
}
.po-lesson-main>.po-chat{margin-top:20px;}
/* Give the site navigation its own visual gutter instead of overlapping content. */
.po-scene[data-panel="start"] .po-scene-inner,
.po-scene[data-panel="lesson"] .po-scene-inner{
padding-right:clamp(305px,17.6vw,350px);
}
}
@media(min-width:901px) and (max-width:1320px){
.po-scene-inner{padding-right:292px;}
.po-scene[data-panel="start"] .po-scene-inner,
.po-scene[data-panel="lesson"] .po-scene-inner{padding-right:300px;}
.po-start-layout{grid-template-columns:260px minmax(0,1fr);}
.po-start-head{grid-template-columns:1fr;gap:10px;align-items:start;}
.po-start-head p{max-width:720px;}
.po-guide-card span{display:none;}
.po-scene-nav{right:12px;}
.po-scene-nav button{width:40px;font-size:10px;}
}
/* =========================================================
V3 / UNIFIED LEFT NAVIGATION
PC: lesson-style global navigation beside the centered content
========================================================= */
@media(min-width:901px){
:root{
--po-shell-max:1640px;
--po-shell-gap:22px;
--po-left-nav:292px;
--po-shell-gutter:max(28px, calc((100vw - var(--po-shell-max)) / 2));
}
/* Align both header edges to the exact content grid. */
.po-logo{
left:var(--po-shell-gutter)!important;
}
.po-actions{
right:var(--po-shell-gutter)!important;
}
/* The old right-side vertical navigation is no longer used. */
.po-scene-nav{display:none!important;}
/* Global left menu sits next to the content, not at the viewport edge. */
.po-global-left{
position:fixed;
z-index:860;
top:86px;
bottom:24px;
left:var(--po-shell-gutter);
width:var(--po-left-nav);
display:flex;
flex-direction:column;
min-height:0;
padding:22px 18px 16px;
border:1px solid #2b3138;
background:var(--po-dark);
color:#fff;
box-shadow:0 18px 44px rgba(15,18,22,.08);
}
.po-global-left .po-eyebrow{color:var(--po-gold-2);margin-bottom:8px;}
.po-global-left-head h2{margin:0;font-size:26px;line-height:1.12;letter-spacing:-.035em;color:#fff;}
.po-global-left-head>p:last-child{margin:10px 0 17px;color:#aeb6bd;font-size:11px;line-height:1.65;}
.po-global-left-list{display:grid;gap:5px;min-height:0;overflow:auto;padding-right:2px;}
.po-global-item,
.po-global-item:focus,
.po-global-item:active{
appearance:none!important;
-webkit-appearance:none!important;
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:10px;
width:100%;
padding:10px 9px;
align-items:start;
border:1px solid rgba(255,255,255,.10)!important;
border-radius:0!important;
background:transparent!important;
color:#fff!important;
text-align:left;
box-shadow:none!important;
cursor:pointer;
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.po-global-item:hover{background:#242a31!important;border-color:rgba(255,255,255,.18)!important;transform:translateX(2px);}
.po-global-item.is-active{background:#353b42!important;border-color:#4a5159!important;box-shadow:inset 3px 0 0 var(--po-gold)!important;}
.po-global-item>span{display:grid;width:30px;height:30px;place-items:center;border:1px solid rgba(255,255,255,.24);color:var(--po-gold-2)!important;font-size:8px;font-weight:950;}
.po-global-item strong{display:block;margin:1px 0 3px;color:#fff!important;font-size:12px;font-weight:900;line-height:1.35;}
.po-global-item small{display:block;color:#9fa8b0!important;font-size:8px;line-height:1.45;}
.po-global-left-foot{margin-top:auto;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);color:#7f8992;font-size:8px;line-height:1.55;letter-spacing:.03em;}
/* Every scene now uses one shared centered workspace. */
.po-scene-inner{
padding-top:86px!important;
padding-bottom:24px!important;
padding-left:calc(var(--po-shell-gutter) + var(--po-left-nav) + var(--po-shell-gap))!important;
padding-right:var(--po-shell-gutter)!important;
}
.po-scene-canvas{max-width:1320px;margin:0 auto;width:100%;}
/* START HERE no longer has its own duplicate sidebar. */
.po-start-layout{display:block!important;height:100%;border:1px solid var(--po-line);background:var(--po-paper);}
.po-start-sidebar{display:none!important;}
.po-start-main{height:100%;max-width:none!important;margin:0!important;padding:clamp(24px,2.2vw,38px) clamp(30px,3vw,54px) 24px!important;overflow:auto;}
.po-start-head{max-width:1120px;margin:0 auto;}
.po-start-main>.po-chat{max-width:1060px;margin-left:auto!important;margin-right:auto!important;}
.po-guide-strip{max-width:1120px;margin-left:auto!important;margin-right:auto!important;}
/* The lesson preview may keep its own local curriculum column. */
.po-lesson-shell{max-width:1320px;margin:0 auto;}
}
@media(min-width:901px) and (max-width:1280px){
:root{--po-left-nav:248px;--po-shell-gap:14px;--po-shell-gutter:18px;}
.po-global-left{top:78px;bottom:14px;padding:16px 12px 12px;}
.po-global-left-head h2{font-size:21px;}
.po-global-left-head>p:last-child{display:none;}
.po-global-item{grid-template-columns:30px minmax(0,1fr);padding:8px 7px;}
.po-global-item>span{width:26px;height:26px;}
.po-global-item strong{font-size:10px;}
.po-global-item small{font-size:7px;}
.po-scene-inner{padding-top:78px!important;padding-bottom:14px!important;}
}
@media(max-width:900px){
.po-global-left{display:none!important;}
}
/* =========================================================
PILOT LMS v0.6 / TOP-PAGE SHARED SHELL
The rules above are the exact CSS copied from the live top-page code
supplied by Pilot Online. The LMS-specific rules below only define
curriculum behavior and lesson/course content inside that same shell.
========================================================= */
html,body{min-height:100%;}
body.po-lms-standalone{margin:0!important;padding:0!important;background:var(--po-paper)!important;color:var(--po-ink)!important;}
body.po-lms-standalone .site-header,
body.po-lms-standalone .site-footer,
body.po-lms-standalone header.site-header,
body.po-lms-standalone footer.site-footer{display:none!important;}
.po-lms-app{min-height:100svh;background:var(--po-paper);}
.po-lms-app a{text-decoration:none;}
.po-lms-app *{box-sizing:border-box;}
/* The top page header is used literally. */
.po-lms-app .po-header{display:block!important;}
.po-lms-app .po-header-typing{pointer-events:none;}
.po-lms-app .po-head-btn{text-decoration:none!important;}
/* Curriculum lives in the exact top-page global left shell. */
.po-global-left.po-lms-curriculum-sidebar{overflow:hidden!important;}
.po-lms-curriculum-sidebar .po-global-left-head{flex:0 0 auto;}
.po-lms-curriculum-sidebar .po-global-left-head h2{overflow-wrap:anywhere;}
.po-lms-curriculum-sidebar .po-global-left-list{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding-right:4px!important;
}
.po-lms-topic{
flex:0 0 auto;
margin:0;
border:0;
background:transparent;
}
.po-lms-topic>summary{list-style:none;}
.po-lms-topic>summary::-webkit-details-marker{display:none;}
.po-lms-topic-summary.po-global-item{
grid-template-columns:36px minmax(0,1fr) 24px!important;
align-items:center!important;
min-height:52px!important;
padding:7px 10px!important;
}
.po-lms-topic[open]>.po-lms-topic-summary.po-global-item{
border-color:#4a5159!important;
background:#353b42!important;
box-shadow:inset 3px 0 0 var(--po-gold)!important;
}
.po-lms-topic-summary.po-global-item>strong{
min-width:0;
overflow-wrap:anywhere;
}
.po-lms-topic-toggle{
position:relative;
display:block;
width:24px;
height:24px;
color:#d8dde1;
}
.po-lms-topic-toggle:before,
.po-lms-topic-toggle:after{
content:"";
position:absolute;
left:50%;top:50%;
width:12px;height:1px;
background:currentColor;
transform:translate(-50%,-50%);
transition:opacity .16s ease;
}
.po-lms-topic-toggle:after{transform:translate(-50%,-50%) rotate(90deg);}
.po-lms-topic[open] .po-lms-topic-toggle:after{opacity:0;}
.po-lms-topic-lessons{
display:grid;
gap:2px;
padding:4px 0 7px 16px;
border-left:1px solid rgba(255,255,255,.10);
}
.po-lms-sidebar-lesson{
display:grid;
grid-template-columns:28px minmax(0,1fr);
gap:8px;
align-items:center;
min-height:38px;
padding:6px 8px;
border-left:2px solid transparent;
color:#c5cbd0!important;
transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.po-lms-sidebar-lesson:hover{background:#242a31;color:#fff!important;}
.po-lms-sidebar-lesson.is-current{border-left-color:var(--po-gold);background:#30363c;color:#fff!important;}
.po-lms-lesson-number{color:#89939b;font-size:8px;font-weight:900;}
.po-lms-lesson-title{font-size:11px;font-weight:800;line-height:1.35;}
/* Main panel uses the exact top-page desktop scene geometry. */
.po-lms-desktop{display:block;}
.po-lms-desktop .po-scene-inner{height:100%;}
.po-lms-desktop .po-scene-canvas{height:100%;}
.po-lms-workspace{
width:100%;
height:100%;
min-height:0;
overflow:auto;
padding:clamp(22px,2.3vw,38px) clamp(26px,3vw,54px) 28px;
border:1px solid var(--po-line);
background:var(--po-paper);
}
.po-lms-workspace .po-start-head{
width:min(100%,1120px);
margin:0 auto;
}
.po-lms-workspace .po-start-head h1{overflow-wrap:anywhere;}
.po-lms-lesson-subtitle{
max-width:420px!important;
color:var(--po-copy)!important;
font-size:clamp(11px,.82vw,14px)!important;
line-height:1.8!important;
text-align:right;
}
.po-lms-lesson-subtitle strong{color:var(--po-ink);font-weight:900;}
.pilot-lesson-content,
.pilot-course-description,
.pilot-course-curriculum,
.pilot-course-status-row,
.pilot-learning-footer{
width:min(100%,1060px);
margin-left:auto;
margin-right:auto;
}
.pilot-lesson-content{
margin-top:24px;
color:var(--po-ink);
font-size:clamp(14px,.92vw,17px);
line-height:1.8;
}
.pilot-lesson-content>*:first-child{margin-top:0!important;}
.pilot-lesson-content p{margin:0 0 1.35em;}
.pilot-lesson-content img{max-width:100%;height:auto;}
.pilot-lesson-content h2,
.pilot-lesson-content h3,
.pilot-lesson-content h4,
.pilot-lesson-content h5,
.pilot-lesson-content h6{color:var(--po-ink)!important;font-weight:900;line-height:1.3;}
.pilot-lesson-content h2{font-size:clamp(26px,2.5vw,38px);}
.pilot-lesson-content h3{font-size:clamp(20px,1.7vw,28px);}
.pilot-lesson-content a{color:#76561c;text-decoration:underline;text-underline-offset:3px;}
/* Tutor-imported lesson markup: map it directly to top-page chat language. */
.pilot-lesson-content .po-lesson-window{
width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.pilot-lesson-content .po-point-label{
display:inline-flex!important;
min-height:28px!important;
align-items:center!important;
margin:0 0 0!important;
padding:0 10px!important;
border:0!important;
background:var(--po-dark)!important;
color:#fff!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.12em!important;
}
.pilot-lesson-content .po-lesson-topic{
margin:0 0 20px!important;
padding:10px 4px!important;
border-top:1px solid var(--po-line)!important;
border-bottom:1px solid var(--po-line)!important;
background:transparent!important;
color:var(--po-ink)!important;
font-size:17px!important;
font-weight:900!important;
}
.pilot-lesson-content .po-talk{
display:flex!important;
gap:14px!important;
align-items:flex-start!important;
width:100%!important;
margin:15px 0!important;
}
.pilot-lesson-content .po-talk-captain{flex-direction:row-reverse!important;}
.pilot-lesson-content .po-character{
flex:0 0 58px!important;
width:58px!important;
margin:0!important;
text-align:center!important;
}
.pilot-lesson-content .po-character img{
display:block!important;
width:54px!important;height:54px!important;
margin:0 auto!important;
border:1px solid #aaa49a!important;
border-radius:50%!important;
object-fit:cover!important;
background:#fff!important;
}
.pilot-lesson-content .po-character figcaption{
display:block!important;
margin-top:5px!important;
color:#77716a!important;
font-size:8px!important;
font-weight:800!important;
}
.pilot-lesson-content .po-bubble{
position:relative!important;
max-width:min(82%,760px)!important;
padding:15px 18px!important;
border:0!important;
border-radius:9px!important;
color:var(--po-ink)!important;
box-shadow:none!important;
font-size:clamp(14px,.92vw,17px)!important;
line-height:1.8!important;
}
.pilot-lesson-content .po-bubble-student{background:var(--po-soft)!important;color:var(--po-ink)!important;}
.pilot-lesson-content .po-bubble-captain{background:var(--po-cream)!important;color:#302a22!important;}
.pilot-lesson-content .po-bubble-student::before{border-right-color:var(--po-soft)!important;}
.pilot-lesson-content .po-bubble-captain::after{border-left-color:var(--po-cream)!important;}
/* Legacy blue/cyan inline blocks are normalized after load by frontend.js. */
.pilot-lesson-content .po-lms-import-title-panel{display:none!important;}
.pilot-lesson-content .po-lms-import-blue:not(.po-lms-import-title-panel){background:var(--po-soft)!important;color:var(--po-ink)!important;border-color:transparent!important;box-shadow:none!important;}
.pilot-lesson-content .po-lms-import-cyan{background:var(--po-cream)!important;color:var(--po-ink)!important;border-color:transparent!important;box-shadow:none!important;}
.pilot-lesson-content,
.pilot-lesson-content p,
.pilot-lesson-content li,
.pilot-lesson-content strong,
.pilot-lesson-content b,
.pilot-lesson-content em,
.pilot-lesson-content span:not(.po-point-label),
.pilot-lesson-content h1,
.pilot-lesson-content h2,
.pilot-lesson-content h3,
.pilot-lesson-content h4,
.pilot-lesson-content h5,
.pilot-lesson-content h6{color:var(--po-ink)!important;}
.pilot-learning-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:40px;
padding-top:18px;
border-top:1px solid var(--po-line);
}
.pilot-learning-footer-copy{display:flex;flex-direction:column;gap:4px;}
.pilot-learning-footer-copy strong{font-size:13px;letter-spacing:.05em;}
.pilot-action-button{
display:inline-flex;
min-height:44px;
padding:0 16px;
align-items:center;
justify-content:center;
border:1px solid var(--po-dark);
background:var(--po-dark);
color:#fff!important;
font-size:9px;
font-weight:950;
letter-spacing:.1em;
cursor:pointer;
}
.pilot-action-button:hover{background:#2a3036;}
.pilot-preview-message{color:var(--po-copy);font-size:12px;}
/* Course page uses the same start-head and content width. */
.pilot-course-status-row{margin-top:22px;}
.pilot-course-progress{width:min(100%,420px);display:grid;grid-template-columns:1fr auto;gap:7px 14px;align-items:baseline;}
.pilot-course-progress>span{color:var(--po-copy);font-size:9px;font-weight:900;letter-spacing:.12em;}
.pilot-course-progress>strong{font-size:24px;}
.pilot-course-progress-track{grid-column:1/-1;height:5px;background:#d7d2c8;}
.pilot-course-progress-track i{display:block;height:100%;background:var(--po-gold);}
.pilot-course-progress small{grid-column:1/-1;color:var(--po-copy);font-size:9px;font-weight:800;}
.pilot-course-description{margin-top:26px;padding-top:24px;border-top:1px solid var(--po-line);font-size:15px;line-height:1.85;color:var(--po-copy);}
.pilot-course-curriculum{margin-top:34px;}
.pilot-block-heading{margin-bottom:15px;}
.pilot-block-heading h2{margin:5px 0 0;font-size:32px;letter-spacing:-.04em;}
.pilot-block-heading p{margin:8px 0 0;color:var(--po-copy);font-size:12px;}
.pilot-course-section{margin:0;border-top:1px solid var(--po-line);background:transparent;}
.pilot-course-section:last-child{border-bottom:1px solid var(--po-line);}
.pilot-course-section>summary{
list-style:none;
display:grid;
grid-template-columns:42px minmax(0,1fr) auto 28px;
gap:14px;
align-items:center;
min-height:72px;
padding:12px 10px;
cursor:pointer;
}
.pilot-course-section>summary::-webkit-details-marker{display:none;}
.pilot-course-section>summary:hover,.pilot-course-section[open]>summary{background:var(--po-paper-2);}
.pilot-course-section-no{display:grid;width:36px;height:36px;place-items:center;border:1px solid #bdb6aa;color:var(--po-gold);font-size:9px;font-weight:950;}
.pilot-course-section h3{margin:0;font-size:17px;}
.pilot-course-section summary p{margin:4px 0 0;color:var(--po-copy);font-size:11px;}
.pilot-course-section summary small{color:var(--po-copy);font-size:8px;font-weight:900;letter-spacing:.08em;}
.pilot-course-section-toggle{position:relative;width:24px;height:24px;}
.pilot-course-section-toggle:before,.pilot-course-section-toggle:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--po-ink);transform:translate(-50%,-50%);}
.pilot-course-section-toggle:after{transform:translate(-50%,-50%) rotate(90deg);}
.pilot-course-section[open] .pilot-course-section-toggle:after{opacity:0;}
.pilot-course-lesson-list{padding:5px 8px 10px 52px;}
.pilot-course-lesson{display:grid;grid-template-columns:34px minmax(0,1fr) auto 24px;gap:10px;align-items:center;min-height:44px;padding:7px 8px;border-top:1px solid #ded8ce;color:var(--po-ink)!important;}
.pilot-course-lesson:hover{background:#fffefa;}
.pilot-course-lesson-no{color:#8d857a;font-size:8px;font-weight:900;}
.pilot-course-lesson strong{font-size:12px;line-height:1.35;}
.pilot-course-lesson em{color:#8d857a;font-size:8px;font-style:normal;font-weight:900;}
.pilot-course-lesson b{font-size:11px;}
.pilot-course-lesson.is-locked{opacity:.45;pointer-events:none;}
/* Mobile curriculum + content, using top-page mobile language. */
.po-lms-mobile-curriculum,
.po-lms-mobile-page{display:none;}
@media(max-width:900px){
body.po-lms-standalone{background:var(--po-paper)!important;}
.po-lms-app .po-header{height:56px;}
.po-lms-app .po-header-typing{display:none!important;}
.po-lms-app .po-logo{top:20px!important;left:16px!important;transform:none!important;}
.po-lms-app .po-actions{top:10px!important;right:8px!important;transform:none!important;}
.po-lms-app .po-head-btn{min-height:31px!important;padding:0 10px!important;font-size:9px!important;}
.po-lms-desktop,.po-global-left.po-lms-curriculum-sidebar{display:none!important;}
.po-lms-mobile-curriculum{display:block;width:calc(100% - 32px);margin:70px auto 0;border:1px solid var(--po-line);background:#f7f4ed;}
.po-lms-mobile-curriculum>summary{display:flex;min-height:50px;align-items:center;justify-content:space-between;padding:0 14px;list-style:none;color:var(--po-ink);font-size:10px;font-weight:950;letter-spacing:.1em;cursor:pointer;}
.po-lms-mobile-curriculum>summary::-webkit-details-marker{display:none;}
.po-lms-mobile-curriculum-inner{padding:7px 10px 10px;border-top:1px solid var(--po-line);}
.po-lms-mobile-topic{border-bottom:1px solid #ddd6cc;}
.po-lms-mobile-topic>summary{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;gap:8px;align-items:center;min-height:52px;list-style:none;cursor:pointer;}
.po-lms-mobile-topic>summary::-webkit-details-marker{display:none;}
.po-lms-mobile-topic>summary span{color:var(--po-gold);font-size:8px;font-weight:950;}
.po-lms-mobile-topic>summary strong{font-size:13px;line-height:1.35;}
.po-lms-mobile-topic>summary i{position:relative;width:22px;height:22px;}
.po-lms-mobile-topic>summary i:before,.po-lms-mobile-topic>summary i:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--po-ink);transform:translate(-50%,-50%);}
.po-lms-mobile-topic>summary i:after{transform:translate(-50%,-50%) rotate(90deg);}
.po-lms-mobile-topic[open]>summary i:after{opacity:0;}
.po-lms-mobile-topic>div{padding:0 0 8px 28px;}
.po-lms-mobile-lesson{display:block;padding:9px 9px;border-left:2px solid transparent;color:var(--po-ink)!important;font-size:12px;line-height:1.4;}
.po-lms-mobile-lesson.is-current{border-left-color:var(--po-gold);background:#e8e2d7;font-weight:850;}
.po-lms-mobile-page{display:block;padding:22px 16px 60px;background:var(--po-paper);}
.po-lms-mobile-page .po-start-head{display:block;width:100%;margin:0 0 20px;padding-bottom:15px;border-bottom:1px solid var(--po-line);text-align:left;}
.po-lms-mobile-page .po-start-head h1{margin:0;font-size:clamp(34px,9vw,50px);line-height:1;letter-spacing:-.045em;}
.po-lms-mobile-page .po-lms-lesson-subtitle{margin-top:10px!important;text-align:left!important;}
.po-lms-mobile-page .pilot-lesson-content{width:100%;margin-top:18px;font-size:14px;}
.po-lms-mobile-page .pilot-lesson-content .po-character{flex-basis:46px!important;width:46px!important;}
.po-lms-mobile-page .pilot-lesson-content .po-character img{width:44px!important;height:44px!important;}
.po-lms-mobile-page .pilot-lesson-content .po-bubble{max-width:calc(100% - 58px)!important;padding:12px 13px!important;font-size:13px!important;line-height:1.65!important;}
.po-lms-mobile-page .pilot-learning-footer{width:100%;margin-top:32px;align-items:flex-start;flex-direction:column;}
.po-lms-mobile-page .pilot-action-button{width:100%;}
}
/* =========================================================
PILOT LMS v0.7 / FOCUS COURSE PLAYER
Dedicated learning UI: fixed curriculum + centered reading pane.
Brand/header values remain inherited from the Pilot Online top page.
========================================================= */
:root{
--po-player-sidebar:330px;
--po-player-toolbar:58px;
--po-player-reading:940px;
--po-player-bg:#f3f1eb;
--po-player-card:#fffefa;
}
body.po-lms-standalone{
overflow:hidden!important;
background:var(--po-player-bg)!important;
}
.po-lms-app{height:100svh;overflow:hidden;background:var(--po-player-bg)!important;}
/* Keep the exact top-page header, but guarantee the player never overlaps it. */
.po-lms-app .po-header{height:72px!important;background:linear-gradient(to bottom,var(--po-paper) 0,var(--po-paper) 68px,transparent 68px)!important;}
.po-lms-app .po-logo,.po-lms-app .po-actions,.po-lms-app .po-header-typing{z-index:2;}
.po-course-player{
position:fixed;
top:86px;
bottom:24px;
left:var(--po-shell-gutter,28px);
right:var(--po-shell-gutter,28px);
display:grid;
grid-template-columns:var(--po-player-sidebar) minmax(0,1fr);
min-height:0;
border:1px solid var(--po-line);
background:var(--po-player-bg);
box-shadow:0 18px 44px rgba(15,18,22,.06);
overflow:hidden;
transition:grid-template-columns .2s ease;
}
.po-course-player.is-collapsed{grid-template-columns:0 minmax(0,1fr);}
/* ---------- Focus curriculum ---------- */
.po-player-sidebar{
display:flex;
flex-direction:column;
min-width:0;
min-height:0;
overflow:hidden;
border-right:1px solid #30363d;
background:var(--po-dark);
color:#fff;
transition:opacity .16s ease,visibility .16s ease;
}
.po-course-player.is-collapsed .po-player-sidebar{opacity:0;visibility:hidden;pointer-events:none;}
.po-player-course-head{
flex:0 0 auto;
padding:20px 18px 14px;
border-bottom:1px solid rgba(255,255,255,.12);
}
.po-player-course-head .po-eyebrow{margin-bottom:8px;color:var(--po-gold-2)!important;font-size:9px!important;}
.po-player-course-title{
display:block;
overflow:hidden;
color:#fff!important;
font-size:22px;
font-weight:950;
line-height:1.12;
letter-spacing:-.025em;
text-overflow:ellipsis;
}
.po-player-progress-row{display:flex;justify-content:space-between;gap:12px;margin-top:15px;color:#aeb6bd;font-size:8px;font-weight:950;letter-spacing:.11em;}
.po-player-progress-row strong{color:#fff;font-size:10px;}
.po-player-progress-track{height:4px;margin-top:7px;overflow:hidden;background:#3a4148;}
.po-player-progress-track i{display:block;height:100%;background:var(--po-gold-2);}
.po-player-progress-copy{display:block;margin-top:6px;color:#8f99a1;font-size:7px;font-weight:850;letter-spacing:.08em;}
.po-player-curriculum-head{
display:flex;
align-items:center;
justify-content:space-between;
flex:0 0 auto;
min-height:42px;
padding:0 12px 0 18px;
border-bottom:1px solid rgba(255,255,255,.09);
}
.po-player-curriculum-head>span{color:var(--po-gold-2);font-size:8px;font-weight:950;letter-spacing:.16em;}
.po-player-collapse{
display:grid;width:28px;height:28px;place-items:center;margin:0;padding:0;
border:1px solid rgba(255,255,255,.14);background:transparent;color:#d8dde1;
font-size:12px;cursor:pointer;
}
.po-player-collapse:hover{background:#2a3036;color:#fff;}
.po-player-topic-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:7px 7px 12px;scrollbar-width:thin;}
.po-player-topic{margin:0 0 4px;border:0;background:transparent;}
.po-player-topic>summary{list-style:none;}
.po-player-topic>summary::-webkit-details-marker{display:none;}
.po-player-topic-summary{
display:grid;
grid-template-columns:34px minmax(0,1fr) 22px 24px;
gap:8px;
align-items:center;
width:100%;
height:46px;
padding:5px 7px;
border:1px solid rgba(255,255,255,.10);
background:transparent;
color:#fff;
cursor:pointer;
transition:background .15s ease,border-color .15s ease;
}
.po-player-topic-summary:hover{background:#252b31;border-color:rgba(255,255,255,.17);}
.po-player-topic[open]>.po-player-topic-summary,.po-player-topic-summary.is-active{background:#343a40;border-color:#4a5159;box-shadow:inset 3px 0 0 var(--po-gold);}
.po-player-topic-no{display:grid;width:30px;height:30px;place-items:center;border:1px solid #59616a;color:var(--po-gold-2);font-size:8px;font-weight:950;}
.po-player-topic-summary>strong{
min-width:0;
overflow:hidden;
color:#f3f5f6;
font-size:12px;
font-weight:900;
line-height:1.2;
white-space:nowrap;
text-overflow:ellipsis;
}
.po-player-topic-summary>small{color:#89939b;font-size:7px;font-weight:900;text-align:right;}
.po-player-topic-toggle{position:relative;display:block;width:22px;height:22px;}
.po-player-topic-toggle:before,.po-player-topic-toggle:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:#d6dce0;transform:translate(-50%,-50%);transition:opacity .15s ease;}
.po-player-topic-toggle:after{transform:translate(-50%,-50%) rotate(90deg);}
.po-player-topic[open] .po-player-topic-toggle:after{opacity:0;}
.po-player-lessons{padding:4px 0 6px 16px;border-left:1px solid rgba(255,255,255,.10);}
.po-player-lesson{
display:grid;
grid-template-columns:26px minmax(0,1fr);
gap:7px;
align-items:center;
min-height:34px;
padding:5px 7px;
border-left:2px solid transparent;
color:#bac2c8!important;
}
.po-player-lesson:hover{background:#242a31;color:#fff!important;}
.po-player-lesson.is-current{border-left-color:var(--po-gold);background:#2d343b;color:#fff!important;}
.po-player-lesson>span{color:#7f8a93;font-size:7px;font-weight:950;}
.po-player-lesson.is-done>span{color:#83b98d;}
.po-player-lesson>strong{min-width:0;overflow:hidden;font-size:10px;font-weight:800;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;}
/* ---------- Main learning pane ---------- */
.po-player-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f7f5f0;}
.po-player-toolbar{
display:grid;
grid-template-columns:38px minmax(0,1fr) auto;
gap:12px;
align-items:center;
flex:0 0 var(--po-player-toolbar);
min-height:var(--po-player-toolbar);
padding:0 18px;
border-bottom:1px solid var(--po-line);
background:rgba(247,245,240,.96);
}
.po-player-toolbar-toggle{
position:relative;width:34px;height:34px;margin:0;padding:0;border:1px solid #c8c1b7;background:#fffefa;cursor:pointer;
}
.po-player-toolbar-toggle:before,.po-player-toolbar-toggle:after,.po-player-toolbar-toggle span{content:"";position:absolute;left:9px;width:14px;height:1px;background:var(--po-ink);}
.po-player-toolbar-toggle:before{top:10px}.po-player-toolbar-toggle span{top:16px}.po-player-toolbar-toggle:after{top:22px}
.po-player-toolbar-toggle:hover{border-color:var(--po-ink);}
.po-player-breadcrumb{min-width:0;display:flex;gap:7px;align-items:center;overflow:hidden;color:#7c756c;font-size:9px;font-weight:850;letter-spacing:.02em;white-space:nowrap;}
.po-player-breadcrumb a{min-width:0;overflow:hidden;color:#4f4a44!important;text-overflow:ellipsis;}
.po-player-breadcrumb strong{min-width:0;overflow:hidden;color:#7c756c;font-weight:800;text-overflow:ellipsis;}
.po-player-toolbar-progress{display:flex;align-items:center;gap:9px;min-width:132px;}
.po-player-toolbar-progress>span{color:#6e675f;font-size:8px;font-weight:950;}
.po-player-toolbar-progress>i{display:block;width:92px;height:4px;overflow:hidden;background:#d7d1c7;}
.po-player-toolbar-progress b{display:block;height:100%;background:var(--po-gold);}
.po-player-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:clamp(28px,3vw,48px) clamp(28px,4vw,72px) 60px;scrollbar-width:thin;}
.po-player-article,.po-player-access-action,.po-player-course-overview>*{width:min(100%,var(--po-player-reading));margin-left:auto;margin-right:auto;}
.po-player-article-head{width:min(100%,var(--po-player-reading));margin:0 auto 28px;padding-bottom:20px;border-bottom:1px solid var(--po-line);}
.po-player-article-head .po-eyebrow{margin:0 0 10px;color:var(--po-gold)!important;font-size:9px!important;}
.po-player-article-head h1{margin:0;color:var(--po-ink);font-size:clamp(40px,4vw,64px);font-weight:950;line-height:.98;letter-spacing:-.055em;overflow-wrap:anywhere;}
.po-player-article-head>p:last-child{display:flex;flex-wrap:wrap;gap:8px 14px;margin:13px 0 0;color:#777067;font-size:10px;line-height:1.5;}
.po-player-article-head>p:last-child strong{color:#4a4540;font-weight:900;}
.po-player-article-head>p:last-child span{color:#777067;}
.po-player-article .pilot-lesson-content{width:100%;max-width:none;margin:0;color:var(--po-ink);font-size:clamp(14px,.98vw,17px);line-height:1.86;}
.po-player-article .pilot-lesson-content>p,.po-player-article .pilot-lesson-content>ul,.po-player-article .pilot-lesson-content>ol{max-width:820px;margin-left:auto;margin-right:auto;}
.po-player-article .pilot-lesson-content h2,.po-player-article .pilot-lesson-content h3,.po-player-article .pilot-lesson-content h4{max-width:820px;margin-left:auto;margin-right:auto;}
/* Imported Tutor content: only conversation bubbles use the two brand fills.
Ordinary explanatory content becomes a neutral card instead of a large beige block. */
.po-player-article .pilot-lesson-content .po-lms-import-cyan:not(.po-bubble-captain),
.po-player-article .pilot-lesson-content .po-lms-import-panel{
background:var(--po-player-card)!important;
color:var(--po-ink)!important;
border:1px solid #ddd7ce!important;
border-radius:2px!important;
box-shadow:none!important;
}
.po-player-article .pilot-lesson-content .po-lms-import-blue:not(.po-lms-import-label):not(.po-lms-import-title-panel):not(.po-bubble-student){
background:var(--po-soft)!important;
color:var(--po-ink)!important;
border-color:transparent!important;
}
.po-player-article .pilot-lesson-content .po-lms-import-label{
display:inline-flex!important;
width:auto!important;
min-height:24px!important;
margin:0 0 8px!important;
padding:4px 8px!important;
align-items:center!important;
border:0!important;
border-radius:2px!important;
background:var(--po-dark)!important;
color:#fff!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.10em!important;
line-height:1!important;
}
.po-player-article .pilot-lesson-content .po-lesson-topic{
max-width:820px!important;
margin:0 auto 24px!important;
padding:10px 0!important;
border-top:1px solid var(--po-line)!important;
border-bottom:1px solid var(--po-line)!important;
background:transparent!important;
color:var(--po-ink)!important;
}
.po-player-article .pilot-lesson-content .po-talk{width:min(100%,860px)!important;margin:16px auto!important;}
.po-player-article .pilot-lesson-content .po-bubble-student{background:var(--po-soft)!important;color:var(--po-ink)!important;}
.po-player-article .pilot-lesson-content .po-bubble-captain{background:var(--po-cream)!important;color:#302a22!important;}
.po-player-article .pilot-lesson-content .po-point-label{background:var(--po-dark)!important;color:#fff!important;border:0!important;}
/* Bottom lesson navigation */
.po-player-lesson-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;margin-top:44px;padding-top:18px;border-top:1px solid var(--po-line);}
.po-player-nav-link{display:flex;flex-direction:column;gap:4px;min-width:0;padding:11px 12px;border:1px solid #d1cbc1;background:#fffefa;color:var(--po-ink)!important;}
.po-player-nav-link.next{align-items:flex-end;text-align:right;}
.po-player-nav-link small{color:#978f84;font-size:7px;font-weight:950;letter-spacing:.12em;}
.po-player-nav-link strong{max-width:100%;overflow:hidden;font-size:11px;font-weight:900;white-space:nowrap;text-overflow:ellipsis;}
.po-player-nav-link:hover{border-color:#8f877b;background:#fff;}
.po-player-complete-wrap{text-align:center;}
.po-player-complete-button,.po-player-complete-state{
display:inline-flex;min-height:44px;padding:0 17px;align-items:center;justify-content:center;border:1px solid var(--po-dark);background:var(--po-dark);color:#fff!important;font-size:9px;font-weight:950;letter-spacing:.09em;text-decoration:none!important;
}
.po-player-complete-button{cursor:pointer;}
.po-player-complete-button:hover{background:#2a3036;}
.po-player-complete-state{border-color:#809887;background:#eef3ed;color:#42614a!important;}
/* Course overview reuses the player shell but is allowed a slightly wider reading area. */
.po-player-course-overview{padding-top:36px;}
.po-player-course-overview>.po-start-head,.po-player-course-overview>.pilot-course-status-row,.po-player-course-overview>.pilot-course-description,.po-player-course-overview>.pilot-course-curriculum{width:min(100%,1040px);}
/* ---------- Mobile course player ---------- */
.po-player-mobile-drawer{display:none;}
@media(max-width:1280px) and (min-width:901px){
:root{--po-player-sidebar:292px;--po-player-reading:860px;}
.po-player-course-title{font-size:19px;}
.po-player-topic-summary{grid-template-columns:32px minmax(0,1fr) 18px 22px;padding-left:6px;padding-right:5px;}
.po-player-topic-summary>strong{font-size:11px;}
.po-player-scroll{padding-left:34px;padding-right:34px;}
}
@media(max-width:900px){
body.po-lms-standalone{overflow:auto!important;background:var(--po-player-bg)!important;}
.po-lms-app{height:auto;min-height:100svh;overflow:visible;}
.po-lms-app .po-header{height:56px!important;background:var(--po-paper)!important;border-bottom:1px solid var(--po-line);}
.po-lms-app .po-logo{top:50%!important;left:16px!important;transform:translateY(-50%)!important;}
.po-lms-app .po-logo strong{font-size:17px!important;}
.po-lms-app .po-logo small{display:none!important;}
.po-lms-app .po-header-typing{display:none!important;}
.po-lms-app .po-actions{top:50%!important;right:8px!important;transform:translateY(-50%)!important;}
.po-lms-app .po-actions .po-head-btn:first-child{display:none!important;}
.po-lms-app .po-head-btn{min-height:31px!important;padding:0 10px!important;font-size:9px!important;}
.po-course-player{position:static;display:block;width:100%;min-height:100svh;margin:0;padding-top:56px;border:0;box-shadow:none;overflow:visible;}
.po-player-sidebar{display:none!important;}
.po-player-main{display:block;min-height:0;overflow:visible;}
.po-player-toolbar{display:none;}
.po-player-mobile-drawer{display:block;margin:14px 14px 0;border:1px solid var(--po-line);background:#fffefa;}
.po-player-mobile-drawer>summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:3px 10px;align-items:center;min-height:56px;padding:10px 13px;list-style:none;cursor:pointer;}
.po-player-mobile-drawer>summary::-webkit-details-marker{display:none;}
.po-player-mobile-drawer>summary>span{grid-column:1;color:var(--po-gold);font-size:7px;font-weight:950;letter-spacing:.12em;}
.po-player-mobile-drawer>summary>strong{grid-column:1;min-width:0;overflow:hidden;color:var(--po-ink);font-size:13px;white-space:nowrap;text-overflow:ellipsis;}
.po-player-mobile-drawer>summary>i{grid-column:2;grid-row:1/3;position:relative;width:22px;height:22px;}
.po-player-mobile-drawer>summary>i:before,.po-player-mobile-drawer>summary>i:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--po-ink);transform:translate(-50%,-50%);}
.po-player-mobile-drawer>summary>i:after{transform:translate(-50%,-50%) rotate(90deg);}
.po-player-mobile-drawer[open]>summary>i:after{opacity:0;}
.po-player-mobile-topics{padding:6px 9px 10px;border-top:1px solid var(--po-line);}
.po-player-mobile-topic{border-bottom:1px solid #e0dbd2;}
.po-player-mobile-topic>summary{display:grid;grid-template-columns:30px minmax(0,1fr) 22px;gap:8px;align-items:center;min-height:48px;list-style:none;cursor:pointer;}
.po-player-mobile-topic>summary::-webkit-details-marker{display:none;}
.po-player-mobile-topic>summary span{color:var(--po-gold);font-size:8px;font-weight:950;}
.po-player-mobile-topic>summary strong{min-width:0;overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;}
.po-player-mobile-topic>summary i{position:relative;width:20px;height:20px;}
.po-player-mobile-topic>summary i:before,.po-player-mobile-topic>summary i:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--po-ink);transform:translate(-50%,-50%);}
.po-player-mobile-topic>summary i:after{transform:translate(-50%,-50%) rotate(90deg);}
.po-player-mobile-topic[open]>summary i:after{opacity:0;}
.po-player-mobile-topic>div{padding:0 0 8px 25px;}
.po-player-mobile-lesson{display:grid;grid-template-columns:26px minmax(0,1fr);gap:7px;align-items:center;min-height:38px;padding:6px 7px;border-left:2px solid transparent;color:var(--po-ink)!important;}
.po-player-mobile-lesson.is-current{border-left-color:var(--po-gold);background:#eee9df;}
.po-player-mobile-lesson span{color:#91887e;font-size:7px;font-weight:900;}
.po-player-mobile-lesson strong{min-width:0;overflow:hidden;font-size:11px;font-weight:800;white-space:nowrap;text-overflow:ellipsis;}
.po-player-scroll{overflow:visible;padding:28px 16px 52px;}
.po-player-article-head{margin-bottom:22px;padding-bottom:15px;}
.po-player-article-head h1{font-size:clamp(34px,10vw,50px);}
.po-player-article .pilot-lesson-content{font-size:14px;line-height:1.78;}
.po-player-article .pilot-lesson-content .po-talk{width:100%!important;gap:10px!important;}
.po-player-article .pilot-lesson-content .po-character{flex-basis:46px!important;width:46px!important;}
.po-player-article .pilot-lesson-content .po-character img{width:44px!important;height:44px!important;}
.po-player-article .pilot-lesson-content .po-bubble{max-width:calc(100% - 56px)!important;padding:11px 12px!important;font-size:13px!important;line-height:1.65!important;}
.po-player-lesson-nav{grid-template-columns:1fr 1fr;gap:8px;}
.po-player-complete-wrap{grid-column:1/-1;grid-row:1;}
.po-player-nav-link{grid-row:2;}
.po-player-complete-button,.po-player-complete-state{width:100%;}
.po-player-course-overview{padding-top:24px;}
}
/* =========================================================
PILOT LMS v0.8 / PLAYER POLISH
Integrated scrollbars, larger curriculum type, no topic counts,
and hard normalization for migrated Tutor conversation colors.
========================================================= */
/* Smooth, built-in style scrollbars. */
.po-player-topic-list,
.po-player-scroll,
.po-player-mobile-topics{
scroll-behavior:smooth;
scrollbar-gutter:stable;
scrollbar-width:thin;
}
.po-player-topic-list{
scrollbar-color:#555e66 transparent;
}
.po-player-scroll,
.po-player-mobile-topics{
scrollbar-color:#b7b0a6 transparent;
}
.po-player-topic-list::-webkit-scrollbar,
.po-player-scroll::-webkit-scrollbar,
.po-player-mobile-topics::-webkit-scrollbar{
width:7px;
height:7px;
}
.po-player-topic-list::-webkit-scrollbar-track,
.po-player-scroll::-webkit-scrollbar-track,
.po-player-mobile-topics::-webkit-scrollbar-track{
background:transparent;
}
.po-player-topic-list::-webkit-scrollbar-thumb{
border:2px solid var(--po-dark);
border-radius:999px;
background:#555e66;
}
.po-player-topic-list::-webkit-scrollbar-thumb:hover{
background:var(--po-gold-2);
}
.po-player-scroll::-webkit-scrollbar-thumb,
.po-player-mobile-topics::-webkit-scrollbar-thumb{
border:2px solid #f7f5f0;
border-radius:999px;
background:#b7b0a6;
}
.po-player-scroll::-webkit-scrollbar-thumb:hover,
.po-player-mobile-topics::-webkit-scrollbar-thumb:hover{
background:#8f877d;
}
.po-player-topic-list::-webkit-scrollbar-button,
.po-player-scroll::-webkit-scrollbar-button,
.po-player-mobile-topics::-webkit-scrollbar-button{
display:none;
}
/* Topic rows: one-line, larger and cleaner. Lesson count removed from markup. */
.po-player-topic-summary{
grid-template-columns:36px minmax(0,1fr) 28px!important;
gap:10px!important;
height:50px!important;
padding:6px 8px!important;
}
.po-player-topic-no{
width:32px!important;
height:32px!important;
font-size:9px!important;
}
.po-player-topic-summary>strong{
font-size:13.5px!important;
line-height:1.18!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.po-player-topic-summary>small{display:none!important;}
.po-player-topic-toggle{
width:24px!important;
height:24px!important;
}
.po-player-topic-toggle:before,
.po-player-topic-toggle:after{
width:12px!important;
}
.po-player-lesson{
min-height:38px!important;
padding:6px 8px!important;
}
.po-player-lesson>strong{
font-size:11.5px!important;
line-height:1.25!important;
}
/* Imported Tutor lesson: guarantee Pilot Online neutral palette. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-student,
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-student *{
background-color:transparent!important;
color:var(--po-ink)!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-student{
background:var(--po-soft)!important;
border:0!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-captain,
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-captain *{
background-color:transparent!important;
color:#302a22!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-captain{
background:var(--po-cream)!important;
border:0!important;
}
/* Rebuild the speech arrows so no legacy blue pseudo-element can survive. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-student::before{
content:""!important;
display:block!important;
position:absolute!important;
left:-10px!important;
right:auto!important;
top:18px!important;
width:0!important;
height:0!important;
border-top:8px solid transparent!important;
border-bottom:8px solid transparent!important;
border-right:10px solid var(--po-soft)!important;
border-left:0!important;
background:transparent!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-student::after{
display:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-captain::after{
content:""!important;
display:block!important;
position:absolute!important;
right:-10px!important;
left:auto!important;
top:18px!important;
width:0!important;
height:0!important;
border-top:8px solid transparent!important;
border-bottom:8px solid transparent!important;
border-left:10px solid var(--po-cream)!important;
border-right:0!important;
background:transparent!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-bubble-captain::before{
display:none!important;
}
/* POINT is deliberately monochrome + gold, never Tutor blue. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-point-label,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed{
display:inline-flex!important;
width:auto!important;
min-width:0!important;
min-height:24px!important;
margin:0!important;
padding:4px 9px!important;
align-items:center!important;
border:0!important;
border-left:3px solid var(--po-gold)!important;
border-radius:0!important;
background:var(--po-dark)!important;
color:#fff!important;
box-shadow:none!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.11em!important;
line-height:1!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed *{
background:transparent!important;
color:#fff!important;
border-color:transparent!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-block-fixed,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-block-fixed *{
border-top-color:var(--po-line)!important;
border-right-color:var(--po-line)!important;
border-bottom-color:var(--po-line)!important;
border-left-color:var(--po-line)!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-topic{
border-top-color:var(--po-line)!important;
border-bottom-color:var(--po-line)!important;
}
@media(max-width:1280px) and (min-width:901px){
.po-player-topic-summary{
grid-template-columns:34px minmax(0,1fr) 26px!important;
}
.po-player-topic-summary>strong{font-size:12.5px!important;}
}
/* =========================================================
PILOT LMS v0.9 / SEMANTIC TUTOR CONTENT NORMALIZATION
Conversation roles are detected from the avatar/DOM structure,
not from legacy Tutor colors. This makes migrated lessons stable.
========================================================= */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-row{
display:flex!important;
width:min(100%,920px)!important;
max-width:920px!important;
gap:14px!important;
align-items:flex-start!important;
margin:18px auto!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-captain{
flex-direction:row-reverse!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-avatar{
flex:0 0 58px!important;
width:58px!important;
max-width:58px!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
text-align:center!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-avatar img{
display:block!important;
width:54px!important;
height:54px!important;
margin:0 auto!important;
padding:0!important;
border:1px solid #aaa49a!important;
border-radius:50%!important;
background:#fff!important;
object-fit:cover!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-avatar figcaption,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-avatar small{
display:block!important;
margin:5px 0 0!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#77716a!important;
font-size:8px!important;
font-weight:800!important;
line-height:1.2!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble{
position:relative!important;
display:block!important;
width:auto!important;
max-width:min(82%,760px)!important;
min-height:0!important;
margin:0!important;
padding:15px 18px!important;
border:0!important;
border-radius:9px!important;
box-shadow:none!important;
font-size:clamp(14px,.92vw,17px)!important;
line-height:1.8!important;
overflow:visible!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-student,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-student *{
background-color:transparent!important;
color:var(--po-ink)!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-student{
background:var(--po-soft)!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-captain,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-captain *{
background-color:transparent!important;
color:#302a22!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-captain{
background:var(--po-cream)!important;
}
/* Kill every legacy speech-arrow definition and rebuild it from scratch. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble::after{
content:""!important;
position:absolute!important;
width:0!important;
height:0!important;
margin:0!important;
padding:0!important;
background:transparent!important;
box-shadow:none!important;
border:0!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-student::before{
display:block!important;
left:-10px!important;
right:auto!important;
top:18px!important;
border-top:8px solid transparent!important;
border-bottom:8px solid transparent!important;
border-right:10px solid var(--po-soft)!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-student::after{
display:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-captain::after{
display:block!important;
right:-10px!important;
left:auto!important;
top:18px!important;
border-top:8px solid transparent!important;
border-bottom:8px solid transparent!important;
border-left:10px solid var(--po-cream)!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble-captain::before{
display:none!important;
}
/* POINT: hard reset all old Tutor blues, including nested spans and pseudo decorations. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed{
position:relative!important;
display:inline-flex!important;
width:auto!important;
min-width:0!important;
min-height:24px!important;
margin:0!important;
padding:4px 9px!important;
align-items:center!important;
border:0!important;
border-left:3px solid var(--po-gold)!important;
border-radius:0!important;
background:var(--po-dark)!important;
color:#fff!important;
box-shadow:none!important;
font-size:9px!important;
font-weight:950!important;
letter-spacing:.11em!important;
line-height:1!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed *,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed::after{
background:transparent!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-block-fixed{
background:transparent!important;
border-color:var(--po-line)!important;
box-shadow:none!important;
}
/* Unknown legacy blue/cyan content can never become a black strip. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-import-blue:not(.po-lms-point-label-fixed){
background:#e5e3df!important;
color:var(--po-ink)!important;
border-color:transparent!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-import-cyan:not(.po-lms-chat-bubble-captain){
background:#fffefa!important;
color:var(--po-ink)!important;
border-color:#ddd7ce!important;
}
@media(max-width:900px){
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-row{
width:100%!important;
gap:10px!important;
margin:14px auto!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-avatar{
flex-basis:46px!important;
width:46px!important;
max-width:46px!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-avatar img{
width:44px!important;
height:44px!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-chat-bubble{
max-width:calc(100% - 56px)!important;
padding:11px 12px!important;
font-size:13px!important;
line-height:1.65!important;
}
}
/* =========================================================
PILOT LMS v0.10 / EXACT TOP-PAGE CHAT + LESSON POINT UI
Migrated Tutor markup is rebuilt into the SAME DOM classes
used by the current Pilot Online top page.
========================================================= */
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"]{
display:flex!important;
gap:14px!important;
align-items:flex-start!important;
width:min(100%,1120px)!important;
max-width:1120px!important;
margin:15px auto!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"].captain{
flex-direction:row-reverse!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-avatar{
flex:0 0 58px!important;
width:58px!important;
max-width:58px!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
text-align:center!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-avatar img{
display:block!important;
width:54px!important;
height:54px!important;
margin:0 auto!important;
padding:0!important;
border:1px solid #aaa49a!important;
border-radius:50%!important;
background:#fff!important;
object-fit:cover!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-avatar small{
display:block!important;
margin-top:5px!important;
color:#77716a!important;
font-size:8px!important;
font-weight:800!important;
line-height:1.2!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble{
position:relative!important;
display:block!important;
width:auto!important;
max-width:min(80%,820px)!important;
min-height:0!important;
margin:0!important;
padding:15px 18px!important;
border:0!important;
border-radius:9px!important;
box-shadow:none!important;
font-size:clamp(13px,.95vw,17px)!important;
line-height:1.75!important;
overflow:visible!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"].fo .po-chat-bubble{
background:var(--po-soft)!important;
color:var(--po-ink)!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"].captain .po-chat-bubble{
background:var(--po-cream)!important;
color:#302a22!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble *,
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble *::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble *::after{
background:transparent!important;
background-color:transparent!important;
color:inherit!important;
border-color:transparent!important;
box-shadow:none!important;
}
/* Top page bubbles do not use Tutor's blue speech triangles. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble::after{
content:none!important;
display:none!important;
border:0!important;
background:transparent!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content [data-po-legacy-hidden="1"]{
display:none!important;
}
/* EXACT current top-page LESSON EXPERIENCE point treatment. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-point{
display:inline-flex!important;
width:auto!important;
min-width:0!important;
padding:7px 11px!important;
margin:0 0 12px!important;
border:0!important;
border-radius:0!important;
background:#e9dfca!important;
color:#4a3e2c!important;
box-shadow:none!important;
font-size:9px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:.1em!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-section-title{
display:flex!important;
align-items:center!important;
gap:9px!important;
margin:9px 0 10px!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#22272c!important;
box-shadow:none!important;
font-size:12px!important;
font-weight:950!important;
line-height:1.4!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-section-title::before{
content:""!important;
display:block!important;
width:22px!important;
height:2px!important;
flex:0 0 22px!important;
border:0!important;
background:#d2a14d!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-section-title::after{
content:none!important;
display:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-wrap-v10{
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-wrap-v10::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-wrap-v10::after{
content:none!important;
display:none!important;
border:0!important;
background:transparent!important;
}
@media(max-width:900px){
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"]{
width:100%!important;
gap:10px!important;
margin:12px auto!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-avatar{
flex-basis:46px!important;
width:46px!important;
max-width:46px!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-avatar img{
width:44px!important;
height:44px!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble{
max-width:calc(100% - 58px)!important;
padding:12px 13px!important;
font-size:13px!important;
line-height:1.65!important;
}
}
/* =========================================================
PILOT LMS v0.11 / V0.10 CHAT + V0.9 NON-CHAT VISUALS
Keep the rebuilt top-page conversation DOM, while restoring
the neutral Course Player treatment for migrated Tutor blocks.
========================================================= */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-import-title-panel{
display:none!important;
}
/* POINT: dark + gold, never Tutor blue. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-point,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed{
position:relative!important;
display:inline-flex!important;
width:auto!important;
min-width:0!important;
min-height:24px!important;
margin:0 0 10px!important;
padding:4px 9px!important;
align-items:center!important;
border:0!important;
border-left:3px solid var(--po-gold)!important;
border-radius:0!important;
background:var(--po-dark)!important;
background-color:var(--po-dark)!important;
color:#fff!important;
box-shadow:none!important;
font-size:9px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:.11em!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-point *,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed *,
.po-player-article.is-tutor-import .pilot-lesson-content .po-point::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-point::after,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed::before,
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-point-label-fixed::after{
background:transparent!important;
color:#fff!important;
border:0!important;
box-shadow:none!important;
}
/* Heading beside POINT: clean Pilot line, no blue Tutor rules. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-section-title{
display:flex!important;
align-items:center!important;
gap:9px!important;
margin:0 0 14px!important;
padding:0 0 10px!important;
border:0!important;
border-bottom:1px solid var(--po-line)!important;
background:transparent!important;
color:#22272c!important;
box-shadow:none!important;
font-size:18px!important;
font-weight:950!important;
line-height:1.35!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-section-title::before{
content:""!important;
display:block!important;
width:22px!important;
height:2px!important;
flex:0 0 22px!important;
background:var(--po-gold)!important;
border:0!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lesson-section-title::after{
content:none!important;
display:none!important;
}
/* Old Tutor blue/cyan content is neutral outside rebuilt conversations. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-import-blue:not(.po-point):not(.po-lms-point-label-fixed){
background:#e5e3df!important;
background-color:#e5e3df!important;
color:var(--po-ink)!important;
border-color:var(--po-line)!important;
box-shadow:none!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-lms-import-cyan{
background:#fffefa!important;
background-color:#fffefa!important;
color:var(--po-ink)!important;
border:1px solid #ddd7ce!important;
box-shadow:none!important;
}
/* Rebuilt conversations remain exactly the top-page grey/cream system. */
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"].fo .po-chat-bubble{
background:var(--po-soft)!important;
color:var(--po-ink)!important;
border:0!important;
}
.po-player-article.is-tutor-import .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"].captain .po-chat-bubble{
background:var(--po-cream)!important;
color:#302a22!important;
border:0!important;
}
/* =========================================================
PILOT LMS v0.12 / SERVER-SIDE LESSON RENDERING
Imported Tutor content arrives in final Pilot DOM on first paint.
No JS repaint / no legacy-blue flash.
========================================================= */
.po-player-article.is-server-rendered .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble *{
background:transparent!important;
background-color:transparent!important;
color:inherit!important;
border-color:transparent!important;
box-shadow:none!important;
}
.po-player-article.is-server-rendered .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble::before,
.po-player-article.is-server-rendered .pilot-lesson-content .po-chat-row[data-po-rebuilt="1"] .po-chat-bubble::after{
content:none!important;
display:none!important;
}
.po-player-article.is-server-rendered .pilot-lesson-content > style,
.po-player-article.is-server-rendered .pilot-lesson-content > script{display:none!important;}
/* Fail-safe only: on hosts without PHP DOM, never expose the Tutor flash.
The legacy body keeps layout space (visibility:hidden), JS normalizes it,
then reveals the final Pilot appearance. Normal servers never use this. */
.po-player-article.needs-client-normalize .pilot-lesson-content{
visibility:hidden!important;
}
.po-player-article.needs-client-normalize.is-client-normalized .pilot-lesson-content{
visibility:visible!important;
}
/* =========================================================
V0.13 / NATIVE PILOT LESSON BLOCKS
Canonical content format: no Tutor DOM is required at render time.
========================================================= */
.po-player-article.is-native-content .pilot-lesson-content{
color:var(--po-ink);
}
.po-native-blocks{
display:grid;
gap:15px;
width:100%;
}
.po-native-blocks .po-chat-row{
width:100%;
margin:0;
}
.po-native-blocks .po-chat-bubble{
max-width:min(82%,760px);
font-size:clamp(14px,.92vw,17px);
line-height:1.8;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:var(--po-soft)!important;
color:var(--po-ink)!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:var(--po-cream)!important;
color:#302a22!important;
}
.po-native-blocks .po-chat-bubble *{
background:transparent!important;
background-color:transparent!important;
color:inherit!important;
border-color:transparent!important;
box-shadow:none!important;
}
.po-native-blocks .po-point{
display:inline-flex;
justify-self:start;
width:auto;
margin:6px 0 0;
padding:7px 11px;
border:0!important;
background:#171b20!important;
color:#fff!important;
font-size:9px;
font-weight:950;
letter-spacing:.1em;
}
.po-native-blocks .po-lesson-section-title{
display:flex;
align-items:center;
gap:9px;
margin:2px 0 0;
color:#22272c;
font-size:14px;
font-weight:950;
line-height:1.45;
}
.po-native-blocks .po-lesson-section-title:before{
content:"";
width:22px;
height:2px;
flex:0 0 22px;
background:var(--po-gold);
}
.po-native-richtext{
color:#4f555a;
font-size:clamp(13px,.9vw,16px);
line-height:1.85;
}
.po-native-richtext>p:first-child{margin-top:0}
.po-native-richtext>p:last-child{margin-bottom:0}
.po-native-richtext a{color:#7f5b24;text-decoration:underline;text-underline-offset:2px}
/* Native lesson lists: intentionally larger than surrounding body copy for study readability. */
.po-native-richtext ul,.po-native-richtext ol{
margin:14px 0 18px;
padding-left:1.55em;
}
.po-native-richtext li{
margin:7px 0;
color:#34393e;
font-size:clamp(15px,1.02vw,18px);
line-height:1.78;
}
.po-native-richtext li::marker{
color:#7f5b24;
font-weight:900;
}
.po-native-richtext li>strong:first-child,
.po-native-richtext li>b:first-child{
color:var(--po-ink);
font-weight:950;
}
.po-native-richtext li ul,.po-native-richtext li ol{
margin:6px 0 8px;
}
.po-native-richtext li li{
margin:4px 0;
font-size:clamp(14px,.96vw,17px);
line-height:1.72;
}
.po-native-richtext table{width:100%;border-collapse:collapse;background:#fffefa}
.po-native-richtext th,.po-native-richtext td{padding:9px 11px;border:1px solid var(--po-line);text-align:left}
.po-native-blocks .po-note{
margin:0;
padding:15px 17px;
border-left:3px solid var(--po-gold);
background:#ece8df;
}
.po-native-note-body{
color:var(--po-copy);
font-size:13px;
line-height:1.75;
}
.po-native-image{margin:4px 0;text-align:center}
.po-native-image img{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--po-line);background:#fff}
.po-native-image figcaption{margin-top:7px;color:#77716a;font-size:10px;line-height:1.5}
@media(max-width:900px){
.po-native-blocks{gap:12px}
.po-native-blocks .po-chat-bubble{max-width:calc(100% - 58px);font-size:13px;line-height:1.65}
.po-native-richtext{font-size:14px;line-height:1.75}
.po-native-richtext ul,.po-native-richtext ol{margin:12px 0 16px;padding-left:1.45em}
.po-native-richtext li{margin:6px 0;font-size:15px;line-height:1.72}
.po-native-richtext li li{font-size:14px;line-height:1.68}
}
/* =========================================================
PILOT LMS v0.16 / READABLE EXPANDED LESSON MENU
Expanded lesson rows should be nearly as readable as topic rows.
========================================================= */
.po-player-lessons{
padding:6px 0 8px 14px!important;
border-left:1px solid rgba(211,171,98,.28)!important;
}
.po-player-lesson{
grid-template-columns:28px minmax(0,1fr)!important;
gap:9px!important;
min-height:42px!important;
padding:7px 9px!important;
color:#d9dee2!important;
border-left-width:2px!important;
transition:background .15s ease,color .15s ease,border-color .15s ease!important;
}
.po-player-lesson>span{
color:#9aa4ac!important;
font-size:8.5px!important;
font-weight:950!important;
letter-spacing:.02em!important;
}
.po-player-lesson>strong{
color:inherit!important;
font-size:13px!important;
font-weight:850!important;
line-height:1.3!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.po-player-lesson:hover{
background:#252b31!important;
color:#fff!important;
}
.po-player-lesson:hover>span{
color:var(--po-gold-2)!important;
}
.po-player-lesson.is-current{
background:#343a40!important;
border-left-color:var(--po-gold)!important;
color:#fff!important;
}
.po-player-lesson.is-current>span{
color:var(--po-gold-2)!important;
}
.po-player-lesson.is-done>span{
color:#83b98d!important;
}
@media(max-width:1280px) and (min-width:901px){
.po-player-lesson{
min-height:40px!important;
padding:6px 8px!important;
}
.po-player-lesson>strong{font-size:12.5px!important;}
.po-player-lesson>span{font-size:8px!important;}
}
/* =========================================================
V0.17 / READABLE NATIVE LIST CONTENT
Imported rich-text may contain nested spans/paragraphs with old inline
font sizes. Force list descendants to inherit the readable list scale.
========================================================= */
.po-player-article.is-native-content .po-native-richtext ol,
.po-player-article.is-native-content .po-native-richtext ul{
margin:18px 0 22px!important;
padding-left:1.7em!important;
}
.po-player-article.is-native-content .po-native-richtext li{
margin:9px 0!important;
color:#2f3439!important;
font-size:clamp(16px,1.06vw,19px)!important;
line-height:1.9!important;
}
.po-player-article.is-native-content .po-native-richtext li *,
.po-player-article.is-native-content .po-native-richtext li p,
.po-player-article.is-native-content .po-native-richtext li span,
.po-player-article.is-native-content .po-native-richtext li strong,
.po-player-article.is-native-content .po-native-richtext li b,
.po-player-article.is-native-content .po-native-richtext li em{
font-size:inherit!important;
line-height:inherit!important;
color:inherit;
}
.po-player-article.is-native-content .po-native-richtext li p{
margin:.22em 0!important;
}
.po-player-article.is-native-content .po-native-richtext li::marker{
color:#8c692f!important;
font-size:1em!important;
font-weight:950!important;
}
.po-player-article.is-native-content .po-native-richtext li>strong:first-child,
.po-player-article.is-native-content .po-native-richtext li>b:first-child{
color:var(--po-ink)!important;
font-weight:950!important;
}
.po-player-article.is-native-content .po-native-richtext li ul,
.po-player-article.is-native-content .po-native-richtext li ol{
margin:7px 0 10px!important;
padding-left:1.55em!important;
}
.po-player-article.is-native-content .po-native-richtext li li{
margin:5px 0!important;
font-size:clamp(15px,.98vw,18px)!important;
line-height:1.82!important;
}
@media(max-width:900px){
.po-player-article.is-native-content .po-native-richtext li{
font-size:16px!important;
line-height:1.78!important;
}
.po-player-article.is-native-content .po-native-richtext li li{
font-size:15px!important;
}
}
/* =========================================================
V0.18 / READABLE LIST-LIKE STUDY BLOCKS
Tutor-era lesson notes are frequently saved as div/p/span text rather
than semantic OL/UL. The renderer tags these blocks as --listlike;
normalize all legacy inline font sizes inside that block.
========================================================= */
.po-player-article.is-native-content .po-native-richtext--listlike{
font-size:clamp(16px,1.08vw,19px)!important;
line-height:1.88!important;
color:#30353a!important;
}
.po-player-article.is-native-content .po-native-richtext--listlike :where(div,p,span,li,strong,b,em,i,small){
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-richtext--listlike p{
margin:.38em 0!important;
}
.po-player-article.is-native-content .po-native-richtext--listlike ol,
.po-player-article.is-native-content .po-native-richtext--listlike ul{
margin:12px 0 16px!important;
padding-left:1.65em!important;
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-richtext--listlike li{
margin:.38em 0!important;
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-richtext--listlike strong,
.po-player-article.is-native-content .po-native-richtext--listlike b{
color:var(--po-ink)!important;
font-weight:900!important;
}
.po-player-article.is-native-content .po-native-richtext--listlike li::marker{
color:#8c692f!important;
font-size:1em!important;
font-weight:950!important;
}
/* Preserve hierarchy for genuinely nested lists without dropping back to
the tiny Tutor-era type scale. */
.po-player-article.is-native-content .po-native-richtext--listlike li li{
font-size:.94em!important;
line-height:1.78!important;
}
@media(max-width:900px){
.po-player-article.is-native-content .po-native-richtext--listlike{
font-size:16px!important;
line-height:1.78!important;
}
}
/* =========================================================
V0.19 / NORMALIZE ALL NATIVE RICHTEXT TYPOGRAPHY
Stop trying to infer whether imported Tutor markup is a list.
Legacy blocks often use div/p/span/small with inline font sizes, so every
text descendant now inherits the Pilot LMS body scale. This directly fixes
the beige study/reference boxes such as "PPLコースの目標 / 範囲".
========================================================= */
.po-player-article.is-native-content .po-native-richtext{
font-size:clamp(16px,1.06vw,19px)!important;
line-height:1.88!important;
color:#30353a!important;
}
.po-player-article.is-native-content .po-native-richtext :where(div,p,span,small,li,strong,b,em,i,u,a){
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-richtext p,
.po-player-article.is-native-content .po-native-richtext div{
margin-top:.28em;
margin-bottom:.28em;
}
.po-player-article.is-native-content .po-native-richtext strong,
.po-player-article.is-native-content .po-native-richtext b{
color:var(--po-ink)!important;
font-weight:900!important;
}
.po-player-article.is-native-content .po-native-richtext ol,
.po-player-article.is-native-content .po-native-richtext ul{
margin:12px 0 16px!important;
padding-left:1.65em!important;
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-richtext li{
margin:.35em 0!important;
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-richtext li::marker{
color:#8c692f!important;
font-size:1em!important;
font-weight:950!important;
}
.po-player-article.is-native-content .po-native-richtext li li{
font-size:.94em!important;
line-height:1.78!important;
}
@media(max-width:900px){
.po-player-article.is-native-content .po-native-richtext{
font-size:16px!important;
line-height:1.78!important;
}
}
/* =========================================================
V0.20 / NATIVE NOTE BODY TYPOGRAPHY
Exact fix for migrated blocks rendered as:
...
========================================================= */
.po-player-article.is-native-content .po-native-note-body{
font-size:clamp(16px,1.06vw,19px)!important;
line-height:1.88!important;
color:#30353a!important;
}
.po-player-article.is-native-content .po-native-note-body :where(div,p,span,small,ol,ul,li,strong,b,em,i,u,a){
font-size:inherit!important;
line-height:inherit!important;
}
.po-player-article.is-native-content .po-native-note-body>strong:first-child,
.po-player-article.is-native-content .po-native-note-body> b:first-child{
display:block;
margin-bottom:.55em;
color:var(--po-ink)!important;
font-weight:950!important;
}
.po-player-article.is-native-content .po-native-note-body ol,
.po-player-article.is-native-content .po-native-note-body ul{
margin:.55em 0 .25em!important;
padding-left:1.7em!important;
}
.po-player-article.is-native-content .po-native-note-body li{
margin:.38em 0!important;
color:#30353a!important;
}
.po-player-article.is-native-content .po-native-note-body li::marker{
color:#8c692f!important;
font-weight:950!important;
}
.po-player-article.is-native-content .po-native-note-body li strong,
.po-player-article.is-native-content .po-native-note-body li b{
color:var(--po-ink)!important;
font-weight:900!important;
}
@media(max-width:900px){
.po-player-article.is-native-content .po-native-note-body{
font-size:16px!important;
line-height:1.78!important;
}
}
/* =========================================================
V21 / READABLE LESSON SUBHEADINGS + NAVIGATION
========================================================= */
/* Native lesson section headings (e.g. "PPLコースの目標") */
.po-native-blocks .po-lesson-section-title,
.po-player-article .pilot-lesson-content .po-lesson-section-title{
display:flex!important;
align-items:center!important;
gap:11px!important;
margin:22px 0 12px!important;
color:var(--po-ink)!important;
font-size:clamp(17px,1.15vw,20px)!important;
font-weight:950!important;
line-height:1.35!important;
letter-spacing:-.015em!important;
}
.po-native-blocks .po-lesson-section-title:before,
.po-player-article .pilot-lesson-content .po-lesson-section-title:before{
width:24px!important;
height:2px!important;
flex:0 0 24px!important;
background:var(--po-gold)!important;
}
/* Bottom Previous / Complete / Next controls */
.po-player-lesson-nav{
gap:18px!important;
margin-top:48px!important;
padding-top:20px!important;
}
.po-player-nav-link{
min-height:62px!important;
padding:13px 16px!important;
justify-content:center!important;
gap:6px!important;
}
.po-player-nav-link small{
font-size:9px!important;
line-height:1!important;
letter-spacing:.12em!important;
}
.po-player-nav-link strong{
font-size:14px!important;
line-height:1.35!important;
font-weight:900!important;
}
.po-player-complete-button,
.po-player-complete-state{
min-height:62px!important;
padding:0 22px!important;
font-size:12px!important;
line-height:1!important;
letter-spacing:.08em!important;
}
@media(max-width:900px){
.po-native-blocks .po-lesson-section-title,
.po-player-article .pilot-lesson-content .po-lesson-section-title{
margin:18px 0 10px!important;
font-size:17px!important;
}
.po-player-nav-link{
min-height:58px!important;
padding:12px 13px!important;
}
.po-player-nav-link small{font-size:8px!important;}
.po-player-nav-link strong{
font-size:13px!important;
white-space:normal!important;
}
.po-player-complete-button,
.po-player-complete-state{
min-height:52px!important;
padding:0 15px!important;
font-size:11px!important;
}
}
/* =========================================================
PILOT LMS v0.23 / STRONGER POINT + SUMMARY DESIGN
Give section breaks a clear visual language.
========================================================= */
.po-native-blocks .po-point,
.po-player-article .pilot-lesson-content .po-point{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
padding:8px 14px!important;
border-radius:999px!important;
border:1px solid rgba(193,145,61,.34)!important;
background:linear-gradient(180deg,#f6efe0 0%,#ece1c8 100%)!important;
color:#6f501c!important;
box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 18px rgba(31,23,12,.06)!important;
font-size:11px!important;
font-weight:950!important;
letter-spacing:.16em!important;
text-transform:uppercase!important;
}
.po-native-blocks .po-point::before,
.po-player-article .pilot-lesson-content .po-point::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:linear-gradient(180deg,#b88935 0%,#8f6727 100%);
box-shadow:0 0 0 4px rgba(193,145,61,.14);
}
.po-native-blocks .po-point + .po-lesson-section-title,
.po-player-article .pilot-lesson-content .po-point + .po-lesson-section-title{
position:relative;
display:block!important;
margin:8px 0 8px!important;
padding:2px 0 14px 0!important;
color:#17202a!important;
font-size:clamp(28px,2.1vw,36px)!important;
font-weight:950!important;
letter-spacing:-.03em!important;
line-height:1.12!important;
}
.po-native-blocks .po-point + .po-lesson-section-title::before,
.po-player-article .pilot-lesson-content .po-point + .po-lesson-section-title::before{
display:none!important;
}
.po-native-blocks .po-point + .po-lesson-section-title::after,
.po-player-article .pilot-lesson-content .po-point + .po-lesson-section-title::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
background:linear-gradient(90deg, rgba(193,145,61,.55) 0%, rgba(193,145,61,.18) 18%, rgba(116,107,95,.22) 100%);
}
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
position:relative;
margin:6px 0 6px!important;
padding:24px 28px!important;
border:1px solid rgba(109,96,78,.18)!important;
border-left:4px solid var(--po-gold)!important;
border-radius:20px!important;
background:linear-gradient(180deg,#f8f4ec 0%,#f3eee5 100%)!important;
box-shadow:0 10px 22px rgba(35,31,26,.04)!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
content:"IMPORTANT";
position:absolute;
top:12px;
right:18px;
color:#a17b35;
font-size:10px;
font-weight:900;
letter-spacing:.16em;
opacity:.9;
}
.po-native-note-body{
font-size:clamp(17px,1.12vw,20px)!important;
line-height:1.86!important;
color:#2f3740!important;
}
.po-native-note-body :where(div,p,span,small,ol,ul,li,strong,b,em,i,u,a){
font-size:inherit!important;
line-height:inherit!important;
color:inherit!important;
}
.po-native-note-body > strong:first-child,
.po-native-note-body > b:first-child{
display:block;
margin:0 0 10px;
color:#17202a!important;
font-size:1.08em!important;
font-weight:950!important;
}
.po-native-note-body ol,
.po-native-note-body ul{
margin:12px 0 0!important;
padding-left:1.55em!important;
}
.po-native-note-body li{
margin:8px 0!important;
}
.po-native-note-body li::marker{
color:#8f6727;
font-weight:900;
}
.po-native-note-body li strong,
.po-native-note-body li b{
color:#17202a!important;
font-weight:950!important;
}
.po-native-blocks .po-lesson-section-title.is-summary,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary{
position:relative;
display:block!important;
margin:16px 0 10px!important;
padding:24px 28px 16px!important;
border-top:1px solid rgba(95,90,83,.28)!important;
color:#17202a!important;
font-size:clamp(28px,2.2vw,40px)!important;
font-weight:950!important;
letter-spacing:-.03em!important;
line-height:1.1!important;
}
.po-native-blocks .po-lesson-section-title.is-summary::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary::before{
content:"SUMMARY"!important;
position:absolute;
left:28px;
top:8px;
width:auto!important;
height:auto!important;
background:none!important;
color:#a17b35!important;
font-size:10px!important;
font-weight:950!important;
letter-spacing:.18em!important;
text-transform:uppercase!important;
}
.po-native-blocks .po-lesson-section-title.is-summary + .po-native-richtext,
.po-native-blocks .po-lesson-section-title.is-summary + .po-note,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary + .po-native-richtext,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary + .po-note{
position:relative;
margin-top:0!important;
padding:22px 26px!important;
border:1px solid rgba(109,96,78,.16)!important;
border-left:4px solid var(--po-gold)!important;
border-radius:0 18px 18px 18px!important;
background:linear-gradient(180deg,#fffaf0 0%,#f6f0e5 100%)!important;
box-shadow:0 10px 22px rgba(35,31,26,.04)!important;
}
.po-native-blocks .po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary + .po-native-richtext::before{
content:"KEY TAKEAWAY";
display:block;
margin:0 0 12px;
color:#8f6727;
font-size:10px;
font-weight:900;
letter-spacing:.16em;
}
@media (max-width: 900px){
.po-native-blocks .po-point + .po-lesson-section-title,
.po-player-article .pilot-lesson-content .po-point + .po-lesson-section-title{
font-size:26px!important;
padding-bottom:12px!important;
}
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note,
.po-native-blocks .po-lesson-section-title.is-summary + .po-native-richtext,
.po-native-blocks .po-lesson-section-title.is-summary + .po-note,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary + .po-native-richtext,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary + .po-note{
padding:18px 18px!important;
border-radius:16px!important;
}
.po-native-note-body{
font-size:16px!important;
line-height:1.78!important;
}
.po-native-blocks .po-lesson-section-title.is-summary,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary{
font-size:28px!important;
padding:22px 18px 14px!important;
}
.po-native-blocks .po-lesson-section-title.is-summary::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-summary::before{
left:18px;
}
}
/* =========================================================
PILOT LMS v0.24 / COMPACT SUMMARY CARD
"まとめ" is hidden at render time; only one SUMMARY card remains.
========================================================= */
.po-summary-card{
position:relative;
margin:18px 0 10px!important;
padding:22px 26px 24px!important;
border:1px solid rgba(109,96,78,.16)!important;
border-left:4px solid var(--po-gold)!important;
border-radius:18px!important;
background:linear-gradient(180deg,#fffaf0 0%,#f6f0e5 100%)!important;
box-shadow:0 10px 22px rgba(35,31,26,.04)!important;
}
.po-summary-label{
margin:0 0 12px!important;
color:#8f6727!important;
font-size:11px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:.18em!important;
}
.po-summary-body{
color:#2f3740!important;
font-size:clamp(17px,1.12vw,20px)!important;
line-height:1.82!important;
}
.po-summary-body :where(div,p,span,small,ol,ul,li,strong,b,em,i,u,a){
font-size:inherit!important;
line-height:inherit!important;
color:inherit!important;
}
.po-summary-body p:first-child{margin-top:0!important}
.po-summary-body p:last-child{margin-bottom:0!important}
.po-summary-body strong,
.po-summary-body b{
color:#17202a!important;
font-weight:950!important;
}
.po-summary-body ol,
.po-summary-body ul{
margin:10px 0 0!important;
padding-left:1.5em!important;
}
.po-summary-body li{margin:7px 0!important}
.po-summary-body li::marker{color:#8f6727;font-weight:900}
/* Safety for cached/legacy rendered markup from v0.23. */
.po-lesson-section-title.is-summary{display:none!important}
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
margin-top:18px!important;
padding:22px 26px 24px!important;
border:1px solid rgba(109,96,78,.16)!important;
border-left:4px solid var(--po-gold)!important;
border-radius:18px!important;
background:linear-gradient(180deg,#fffaf0 0%,#f6f0e5 100%)!important;
}
.po-lesson-section-title.is-summary + .po-native-richtext::before{
content:"SUMMARY"!important;
display:block!important;
margin:0 0 12px!important;
color:#8f6727!important;
font-size:11px!important;
font-weight:950!important;
letter-spacing:.18em!important;
}
@media(max-width:900px){
.po-summary-card{
margin:14px 0 8px!important;
padding:18px 18px 20px!important;
border-radius:15px!important;
}
.po-summary-label{font-size:10px!important;margin-bottom:10px!important}
.po-summary-body{font-size:16px!important;line-height:1.76!important}
}
/* =========================================================
PILOT LMS v0.25 / HEADING HIERARCHY
H1 = lesson title (template)
SECTION = first meaningful native heading
SUBSECTION = following native headings
POINT heading = heading immediately after a POINT marker
========================================================= */
/* SECTION / major chapter heading */
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
position:relative!important;
display:block!important;
margin:38px 0 24px!important;
padding:22px 0 18px 0!important;
border-top:1px solid rgba(70,68,64,.18)!important;
border-bottom:1px solid rgba(70,68,64,.14)!important;
color:#171b20!important;
font-size:clamp(25px,1.8vw,32px)!important;
font-weight:950!important;
line-height:1.22!important;
letter-spacing:-.025em!important;
}
.po-native-blocks .po-lesson-section-title.is-major::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major::before{
content:"SECTION"!important;
display:block!important;
width:auto!important;
height:auto!important;
margin:0 0 9px!important;
background:none!important;
color:#a17b35!important;
font-size:9px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:.19em!important;
}
.po-native-blocks .po-lesson-section-title.is-major::after,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:68px;
height:3px;
background:var(--po-gold);
}
/* SUBSECTION / nested topic heading */
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection{
position:relative!important;
display:flex!important;
align-items:center!important;
gap:13px!important;
margin:28px 0 16px!important;
padding:0!important;
border:0!important;
color:#20252a!important;
font-size:clamp(20px,1.35vw,24px)!important;
font-weight:950!important;
line-height:1.3!important;
letter-spacing:-.018em!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection::before{
content:""!important;
display:block!important;
width:28px!important;
height:2px!important;
flex:0 0 28px!important;
margin:0!important;
background:var(--po-gold)!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection::after,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection::after{
display:none!important;
}
/* POINT title keeps its own information hierarchy and does not consume SECTION. */
.po-native-blocks .po-lesson-section-title.is-point-heading,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading{
position:relative!important;
display:block!important;
margin:8px 0 14px!important;
padding:2px 0 13px!important;
border-bottom:1px solid rgba(104,96,84,.22)!important;
color:#17202a!important;
font-size:clamp(24px,1.7vw,30px)!important;
font-weight:950!important;
line-height:1.2!important;
letter-spacing:-.025em!important;
}
.po-native-blocks .po-lesson-section-title.is-point-heading::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading::before{
display:none!important;
}
.po-native-blocks .po-lesson-section-title.is-point-heading::after,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:54px;
height:2px;
background:var(--po-gold);
}
@media(max-width:900px){
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
margin:30px 0 20px!important;
padding:18px 0 15px!important;
font-size:25px!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection{
margin:23px 0 13px!important;
font-size:20px!important;
}
.po-native-blocks .po-lesson-section-title.is-point-heading,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading{
font-size:23px!important;
}
}
/* =========================================================
PILOT LMS v0.26 / QUIET HEADING HIERARCHY
Keep hierarchy, remove visible UI jargon and excess rules.
========================================================= */
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
position:relative!important;
display:block!important;
margin:30px 0 22px!important;
padding:0 0 14px!important;
border:0!important;
color:#171b20!important;
font-size:clamp(24px,1.65vw,30px)!important;
font-weight:950!important;
line-height:1.24!important;
letter-spacing:-.025em!important;
}
.po-native-blocks .po-lesson-section-title.is-major::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major::before{
content:""!important;
position:absolute!important;
left:0!important;
bottom:0!important;
display:block!important;
width:58px!important;
height:3px!important;
margin:0!important;
background:var(--po-gold)!important;
}
.po-native-blocks .po-lesson-section-title.is-major::after,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major::after{
display:none!important;
content:none!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection{
position:relative!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
margin:26px 0 16px!important;
padding:0!important;
border:0!important;
color:#20252a!important;
font-size:clamp(19px,1.28vw,23px)!important;
font-weight:950!important;
line-height:1.32!important;
letter-spacing:-.018em!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection::before{
content:""!important;
display:block!important;
width:24px!important;
height:2px!important;
flex:0 0 24px!important;
margin:0!important;
background:var(--po-gold)!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection::after,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection::after{
display:none!important;
content:none!important;
}
@media(max-width:900px){
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
margin:24px 0 18px!important;
font-size:24px!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection{
margin:22px 0 14px!important;
font-size:19px!important;
}
}
/* =========================================================
PILOT LMS v0.27 / STRONGER IMPORTANT + SUMMARY LABELS
========================================================= */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
padding:30px 28px 24px!important;
border:1px solid rgba(143,103,39,.22)!important;
border-left:4px solid var(--po-gold)!important;
background:linear-gradient(180deg,#f7f1e6 0%,#efe5d3 100%)!important;
box-shadow:0 14px 28px rgba(35,31,26,.08), 0 1px 0 rgba(255,255,255,.65) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
top:12px!important;
left:18px!important;
right:auto!important;
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
padding:7px 12px!important;
border-radius:999px!important;
background:linear-gradient(180deg,#f3ead6 0%,#e9ddc2 100%)!important;
border:1px solid rgba(143,103,39,.24)!important;
color:#7d5b22!important;
font-size:12px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:.18em!important;
box-shadow:0 1px 0 rgba(255,255,255,.65) inset!important;
}
.po-native-blocks .po-note::after,
.po-player-article .pilot-lesson-content .po-note::after{
content:"";
position:absolute;
top:18px;
left:30px;
width:8px;
height:8px;
border-radius:999px;
background:#b88935;
box-shadow:0 0 0 4px rgba(184,137,53,.12);
}
.po-native-note-body{ margin-top:10px!important; }
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
position:relative!important;
padding:30px 28px 24px!important;
border:1px solid rgba(143,103,39,.22)!important;
border-left:4px solid var(--po-gold)!important;
border-radius:18px!important;
background:linear-gradient(180deg,#fbf5ea 0%,#f1e8d8 100%)!important;
box-shadow:0 14px 28px rgba(35,31,26,.08), 0 1px 0 rgba(255,255,255,.65) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
content:"SUMMARY"!important;
position:absolute!important;
top:12px!important;
left:18px!important;
right:auto!important;
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
margin:0!important;
padding:7px 12px!important;
border-radius:999px!important;
background:linear-gradient(180deg,#f3ead6 0%,#e9ddc2 100%)!important;
border:1px solid rgba(143,103,39,.24)!important;
color:#7d5b22!important;
font-size:12px!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:.18em!important;
text-transform:uppercase!important;
box-shadow:0 1px 0 rgba(255,255,255,.65) inset!important;
}
.po-summary-card::after,
.po-lesson-section-title.is-summary + .po-native-richtext::after,
.po-lesson-section-title.is-summary + .po-note::after{
content:"";
position:absolute;
top:18px;
left:30px;
width:8px;
height:8px;
border-radius:999px;
background:#b88935;
box-shadow:0 0 0 4px rgba(184,137,53,.12);
}
.po-summary-body{
margin-top:10px!important;
}
@media(max-width:900px){
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note,
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
padding:28px 18px 18px!important;
box-shadow:0 10px 20px rgba(35,31,26,.07), 0 1px 0 rgba(255,255,255,.65) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before,
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
top:10px!important;
left:14px!important;
padding:6px 10px!important;
font-size:11px!important;
}
.po-native-blocks .po-note::after,
.po-player-article .pilot-lesson-content .po-note::after,
.po-summary-card::after,
.po-lesson-section-title.is-summary + .po-native-richtext::after,
.po-lesson-section-title.is-summary + .po-note::after{
top:16px!important;
left:24px!important;
width:7px!important;
height:7px!important;
}
}
/* =========================================================
PILOT LMS v0.28 / CLEAN IMPORTANT + SUMMARY LABELS
Remove decorative dots that overlapped the first letter.
========================================================= */
.po-native-blocks .po-note::after,
.po-player-article .pilot-lesson-content .po-note::after,
.po-summary-card::after,
.po-lesson-section-title.is-summary + .po-native-richtext::after,
.po-lesson-section-title.is-summary + .po-note::after{
content:none!important;
display:none!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before,
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
padding-left:12px!important;
}
/* =========================================================
PILOT LMS v0.30 / NATIVE CHAT DEPTH + COLOR SEPARATION
Based on v0.28 so the label-dot fix is preserved.
========================================================= */
/* Native Pilot lesson conversations: subtle card depth, not heavy shadows. */
.po-native-blocks .po-chat-bubble{
border:1px solid rgba(92,86,78,.14)!important;
border-radius:14px!important;
box-shadow:0 8px 18px rgba(30,27,23,.055), 0 1px 0 rgba(255,255,255,.78) inset!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#f0efec 0%,#e8e5e0 100%)!important;
border-color:rgba(90,91,91,.14)!important;
color:#20252a!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#faf6ef 0%,#f3ede3 100%)!important;
border-color:rgba(154,139,112,.16)!important;
color:#302a22!important;
}
/* IMPORTANT / SUMMARY should read as stronger information cards than dialogue. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note,
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
border:1px solid rgba(151,108,34,.24)!important;
border-left:4px solid var(--po-gold)!important;
background:linear-gradient(180deg,#f1e6d3 0%,#e8d9be 100%)!important;
box-shadow:0 13px 26px rgba(35,31,26,.085), 0 1px 0 rgba(255,255,255,.60) inset!important;
}
/* Keep v0.28 label cleanup authoritative even if older rules exist above. */
.po-native-blocks .po-note::after,
.po-player-article .pilot-lesson-content .po-note::after,
.po-summary-card::after,
.po-lesson-section-title.is-summary + .po-native-richtext::after,
.po-lesson-section-title.is-summary + .po-note::after{
content:none!important;
display:none!important;
}
@media(max-width:900px){
.po-native-blocks .po-chat-bubble{
border-radius:12px!important;
box-shadow:0 6px 14px rgba(30,27,23,.05), 0 1px 0 rgba(255,255,255,.76) inset!important;
}
}
/* =========================================================
PILOT LMS v0.31 / CLEARER FO vs CAPTAIN BUBBLE SEPARATION
========================================================= */
/* Keep the shared subtle depth, but separate the hues much more clearly. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#eef2f6 0%,#e1e8f0 100%)!important;
border-color:rgba(110,129,151,.26)!important;
box-shadow:0 10px 20px rgba(52,73,94,.08), 0 1px 0 rgba(255,255,255,.82) inset!important;
color:#1d2730!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#fbf4e8 0%,#f3e4cc 100%)!important;
border-color:rgba(176,144,83,.26)!important;
box-shadow:0 10px 20px rgba(87,63,24,.08), 0 1px 0 rgba(255,255,255,.78) inset!important;
color:#342a20!important;
}
/* Match the speech-tail triangles to the updated bubble colors. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{
border-right-color:#e7edf4!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{
border-left-color:#f7ecd9!important;
}
@media(max-width:900px){
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
box-shadow:0 8px 16px rgba(52,73,94,.07), 0 1px 0 rgba(255,255,255,.82) inset!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
box-shadow:0 8px 16px rgba(87,63,24,.07), 0 1px 0 rgba(255,255,255,.78) inset!important;
}
}
/* =========================================================
PILOT LMS v0.32 / DARKER READING TONE + DISTINCT IMPORTANT / SUMMARY
========================================================= */
/* Slightly darker, calmer conversation palette for long-form reading. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#e7edf3 0%,#d9e2eb 100%)!important;
border-color:rgba(100,121,145,.30)!important;
box-shadow:0 10px 20px rgba(45,63,81,.085), 0 1px 0 rgba(255,255,255,.75) inset!important;
color:#1b2530!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#f3e7d5 0%,#e8d7bc 100%)!important;
border-color:rgba(158,127,72,.30)!important;
box-shadow:0 10px 20px rgba(87,63,24,.085), 0 1px 0 rgba(255,255,255,.72) inset!important;
color:#352b21!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{ border-right-color:#e0e7ef!important; }
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{ border-left-color:#ecdfcb!important; }
/* IMPORTANT = warmer, more alert, but still muted. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
border:1px solid rgba(145,111,45,.30)!important;
border-left:4px solid #b68a39!important;
background:linear-gradient(180deg,#efe3cd 0%,#e3d1b1 100%)!important;
box-shadow:0 14px 28px rgba(70,53,24,.10), 0 1px 0 rgba(255,255,255,.56) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
background:linear-gradient(180deg,#e9d9bb 0%,#dbc8a2 100%)!important;
border:1px solid rgba(145,111,45,.32)!important;
color:#6f5119!important;
}
/* SUMMARY = cooler and distinct from captain / important. */
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
border:1px solid rgba(104,118,133,.28)!important;
border-left:4px solid #78899a!important;
background:linear-gradient(180deg,#e7ecef 0%,#d8e0e6 100%)!important;
box-shadow:0 14px 28px rgba(47,59,71,.10), 0 1px 0 rgba(255,255,255,.56) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:linear-gradient(180deg,#dce5eb 0%,#ccd7df 100%)!important;
border:1px solid rgba(104,118,133,.32)!important;
color:#445868!important;
}
/* Keep long-form readability calm. */
.po-native-note-body,
.po-summary-body,
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
color:#2a3138!important;
}
@media(max-width:900px){
.po-native-blocks .po-chat-row.fo .po-chat-bubble,
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
box-shadow:0 8px 16px rgba(40,35,30,.075), 0 1px 0 rgba(255,255,255,.72) inset!important;
}
}
/* =========================================================
PILOT LMS v0.33 / CALMER READING SURFACE + SEMANTIC COLORS
Conversation = two darker speaker colors.
IMPORTANT / SUMMARY = separate semantic palettes.
========================================================= */
/* Reduce glare across the lesson player without turning it into dark mode. */
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{
background:#e8e4dc!important;
}
.po-player-toolbar{
background:#e2ddd4!important;
border-bottom-color:#c3bdb2!important;
}
.po-player-article-head{
border-bottom-color:#c5beb2!important;
}
/* Dialogue: darker than before, still readable for long sessions. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#c9d5df 0%,#bac9d5 100%)!important;
border-color:rgba(76,98,121,.34)!important;
color:#17222c!important;
box-shadow:0 10px 20px rgba(47,68,88,.10), 0 1px 0 rgba(255,255,255,.56) inset!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#ddc8a8 0%,#cfb78f 100%)!important;
border-color:rgba(130,97,47,.34)!important;
color:#2d241c!important;
box-shadow:0 10px 20px rgba(91,65,25,.10), 0 1px 0 rgba(255,255,255,.52) inset!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{border-right-color:#c2d0dc!important;}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{border-left-color:#d6c09b!important;}
/* IMPORTANT: muted clay / rose, clearly separate from captain's tan. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
background:linear-gradient(180deg,#dbc6c0 0%,#cdb3ac 100%)!important;
border:1px solid rgba(124,76,70,.34)!important;
border-left:4px solid #8e5d56!important;
box-shadow:0 14px 28px rgba(76,45,42,.11), 0 1px 0 rgba(255,255,255,.46) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
background:linear-gradient(180deg,#cfb3ad 0%,#c09f98 100%)!important;
border:1px solid rgba(124,76,70,.36)!important;
color:#5c3934!important;
}
.po-native-note-body{
color:#2b2321!important;
}
/* SUMMARY: muted sage, clearly separate from both dialogue colors and IMPORTANT. */
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:linear-gradient(180deg,#cbd7c9 0%,#bacbb8 100%)!important;
border:1px solid rgba(76,106,78,.34)!important;
border-left:4px solid #6f8a72!important;
box-shadow:0 14px 28px rgba(45,69,48,.11), 0 1px 0 rgba(255,255,255,.46) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:linear-gradient(180deg,#bccdbb 0%,#aabfa9 100%)!important;
border:1px solid rgba(76,106,78,.36)!important;
color:#334e37!important;
}
.po-summary-body,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
color:#243128!important;
}
/* Keep the special cards more defined than ordinary dialogue. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note,
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
border-radius:18px!important;
}
@media(max-width:900px){
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{
background:#e8e4dc!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble,
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
box-shadow:0 8px 16px rgba(45,40,35,.09), 0 1px 0 rgba(255,255,255,.5) inset!important;
}
}
/* =========================================================
PILOT LMS v0.34 / DARK NEUTRAL DIALOGUE PALETTE
Dialogue is dark and quiet. Semantic cards stay separate.
========================================================= */
/* Long-reading surface: warm, low-glare paper tone. */
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{
background:#e4dfd6!important;
}
.po-player-toolbar{
background:#ddd8cf!important;
border-bottom-color:#bbb4a9!important;
}
/* Student / FO: graphite charcoal. No blue family. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#41464b 0%,#34393e 100%)!important;
border-color:rgba(255,255,255,.10)!important;
color:#f4f2ed!important;
box-shadow:0 10px 22px rgba(18,20,22,.18), 0 1px 0 rgba(255,255,255,.08) inset!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble *{
color:inherit!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{
border-right-color:#393e43!important;
}
/* Captain: deep olive / forest grey. No orange family. */
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#4a5249 0%,#3b433c 100%)!important;
border-color:rgba(255,255,255,.10)!important;
color:#f6f1e8!important;
box-shadow:0 10px 22px rgba(24,29,24,.18), 0 1px 0 rgba(255,255,255,.08) inset!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble *{
color:inherit!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{
border-left-color:#414941!important;
}
/* IMPORTANT: muted clay/rose card, deliberately not a dialogue hue. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
background:linear-gradient(180deg,#d8c5c1 0%,#cbb4ae 100%)!important;
border:1px solid rgba(116,74,69,.32)!important;
border-left:4px solid #875852!important;
box-shadow:0 14px 28px rgba(70,43,40,.11), 0 1px 0 rgba(255,255,255,.42) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
background:linear-gradient(180deg,#cbaea8 0%,#bc9b94 100%)!important;
border-color:rgba(116,74,69,.34)!important;
color:#543632!important;
}
.po-native-note-body{color:#2c2322!important;}
/* SUMMARY: muted sage, separate from both dark dialogue bubbles and IMPORTANT. */
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:linear-gradient(180deg,#cbd2c7 0%,#bac5b7 100%)!important;
border:1px solid rgba(72,96,75,.30)!important;
border-left:4px solid #647d67!important;
box-shadow:0 14px 28px rgba(39,58,42,.11), 0 1px 0 rgba(255,255,255,.42) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:linear-gradient(180deg,#b9c5b6 0%,#a8b7a5 100%)!important;
border-color:rgba(72,96,75,.34)!important;
color:#304634!important;
}
.po-summary-body,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
color:#263229!important;
}
/* Keep the decorative-dot fix authoritative. */
.po-native-blocks .po-note::after,
.po-player-article .pilot-lesson-content .po-note::after,
.po-summary-card::after,
.po-lesson-section-title.is-summary + .po-native-richtext::after,
.po-lesson-section-title.is-summary + .po-note::after{
content:none!important;
display:none!important;
}
@media(max-width:900px){
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{background:#e4dfd6!important;}
.po-native-blocks .po-chat-row.fo .po-chat-bubble,
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
box-shadow:0 8px 17px rgba(20,22,20,.16), 0 1px 0 rgba(255,255,255,.07) inset!important;
}
}
/* =========================================================
PILOT LMS v0.35 / UNIFIED DARK-NEUTRAL READING PALETTE
No red / green / blue semantic cards. Distinction comes from
neutral temperature, border tone and label treatment.
========================================================= */
/* Lower-glare lesson canvas. */
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{
background:#d7d3cc!important;
}
.po-player-toolbar{
background:#cec9c1!important;
border-bottom-color:#aaa39a!important;
}
.po-player-article-head{
border-bottom-color:#aaa39a!important;
}
/* FO = cool graphite. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#3e4347 0%,#31363a 100%)!important;
border-color:rgba(255,255,255,.11)!important;
color:#f1f2f1!important;
box-shadow:0 10px 22px rgba(16,18,20,.21),0 1px 0 rgba(255,255,255,.07) inset!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble *{color:inherit!important;}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{border-right-color:#363b3f!important;}
/* Captain = warmer charcoal, still firmly dark-neutral. */
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#4a4640 0%,#3b3833 100%)!important;
border-color:rgba(255,255,255,.11)!important;
color:#f3eee6!important;
box-shadow:0 10px 22px rgba(19,17,14,.21),0 1px 0 rgba(255,255,255,.07) inset!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble *{color:inherit!important;}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{border-left-color:#413d38!important;}
/* IMPORTANT = dark taupe. Gold remains the only warm accent. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
background:linear-gradient(180deg,#403a32 0%,#342f29 100%)!important;
border:1px solid rgba(210,175,111,.24)!important;
border-left:4px solid #b9914f!important;
box-shadow:0 14px 28px rgba(15,13,11,.22),0 1px 0 rgba(255,255,255,.055) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
background:#2d2924!important;
border:1px solid rgba(210,175,111,.30)!important;
color:#d8b56f!important;
box-shadow:none!important;
}
.po-native-note-body,
.po-native-note-body :where(div,p,span,small,ol,ul,li,strong,b,em,i,u,a){
color:#f0ece5!important;
}
.po-native-note-body li::marker{color:#d2ad68!important;}
.po-native-note-body li strong,
.po-native-note-body li b,
.po-native-note-body>strong:first-child,
.po-native-note-body>b:first-child{color:#fffaf1!important;}
/* SUMMARY = dark slate-neutral. Distinct through cooler grey + silver edge, not color. */
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:linear-gradient(180deg,#3d4143 0%,#313537 100%)!important;
border:1px solid rgba(202,207,208,.20)!important;
border-left:4px solid #899295!important;
box-shadow:0 14px 28px rgba(13,15,16,.22),0 1px 0 rgba(255,255,255,.055) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:#292d2f!important;
border:1px solid rgba(202,207,208,.25)!important;
color:#d8dcdd!important;
box-shadow:none!important;
}
.po-summary-body,
.po-summary-body :where(div,p,span,small,ol,ul,li,strong,b,em,i,u,a),
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
color:#eef0ef!important;
}
.po-summary-body strong,
.po-summary-body b{color:#ffffff!important;}
.po-summary-body li::marker{color:#c7ccce!important;}
/* Keep labels clean: no decorative dots. */
.po-native-blocks .po-note::after,
.po-player-article .pilot-lesson-content .po-note::after,
.po-summary-card::after,
.po-lesson-section-title.is-summary + .po-native-richtext::after,
.po-lesson-section-title.is-summary + .po-note::after{
content:none!important;
display:none!important;
}
@media(max-width:900px){
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{background:#d7d3cc!important;}
.po-native-blocks .po-chat-row.fo .po-chat-bubble,
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
box-shadow:0 8px 17px rgba(15,16,16,.18),0 1px 0 rgba(255,255,255,.06) inset!important;
}
}
/* =========================================================
PILOT LMS v0.36 / DARK CARD CONTRAST FIX
Legacy/native child elements may carry dark inline text colors.
Force readable foreground colors inside dark semantic cards.
========================================================= */
.po-native-blocks .po-note,
.po-native-blocks .po-note .po-native-note-body,
.po-native-blocks .po-note .po-native-note-body *,
.po-player-article .pilot-lesson-content .po-note,
.po-player-article .pilot-lesson-content .po-note .po-native-note-body,
.po-player-article .pilot-lesson-content .po-note .po-native-note-body *{
color:#f3efe8!important;
}
.po-native-blocks .po-note a,
.po-player-article .pilot-lesson-content .po-note a{
color:#ead09a!important;
}
.po-native-blocks .po-note li::marker,
.po-player-article .pilot-lesson-content .po-note li::marker{
color:#d8b56f!important;
}
.po-native-blocks .po-note strong,
.po-native-blocks .po-note b,
.po-player-article .pilot-lesson-content .po-note strong,
.po-player-article .pilot-lesson-content .po-note b{
color:#fffaf2!important;
}
.po-summary-card,
.po-summary-card .po-summary-body,
.po-summary-card .po-summary-body *,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-native-richtext *,
.po-lesson-section-title.is-summary + .po-note,
.po-lesson-section-title.is-summary + .po-note *{
color:#eef1f1!important;
}
.po-summary-card a,
.po-lesson-section-title.is-summary + .po-native-richtext a,
.po-lesson-section-title.is-summary + .po-note a{
color:#d7dddf!important;
}
.po-summary-card li::marker,
.po-lesson-section-title.is-summary + .po-native-richtext li::marker,
.po-lesson-section-title.is-summary + .po-note li::marker{
color:#c8ced0!important;
}
.po-summary-card strong,
.po-summary-card b,
.po-lesson-section-title.is-summary + .po-native-richtext strong,
.po-lesson-section-title.is-summary + .po-native-richtext b,
.po-lesson-section-title.is-summary + .po-note strong,
.po-lesson-section-title.is-summary + .po-note b{
color:#ffffff!important;
}
/* Keep semantic labels readable and visually separate from body text. */
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
color:#e4c27c!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
color:#dce1e2!important;
}
/* =========================================================
PILOT LMS v0.37 / LIGHTER SUBTLE IMPORTANT + SUMMARY CARDS
========================================================= */
/* Bring IMPORTANT / SUMMARY back closer to the original readable feel:
subtle tints, dark text, soft borders, light depth. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
background:linear-gradient(180deg,rgba(225,213,188,.52) 0%, rgba(225,213,188,.68) 100%)!important;
border:1px solid rgba(175,145,91,.28)!important;
border-left:4px solid rgba(187,151,86,.82)!important;
box-shadow:0 10px 22px rgba(25,20,12,.06), 0 1px 0 rgba(255,255,255,.72) inset!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
background:rgba(238,228,208,.9)!important;
border:1px solid rgba(175,145,91,.24)!important;
color:#7e6330!important;
}
.po-native-blocks .po-note,
.po-native-blocks .po-note .po-native-note-body,
.po-native-blocks .po-note .po-native-note-body *,
.po-player-article .pilot-lesson-content .po-note,
.po-player-article .pilot-lesson-content .po-note .po-native-note-body,
.po-player-article .pilot-lesson-content .po-note .po-native-note-body *{
color:#2e261e!important;
}
.po-native-blocks .po-note li::marker,
.po-player-article .pilot-lesson-content .po-note li::marker{
color:#aa7d2e!important;
}
.po-native-blocks .po-note strong,
.po-native-blocks .po-note b,
.po-player-article .pilot-lesson-content .po-note strong,
.po-player-article .pilot-lesson-content .po-note b{
color:#171310!important;
}
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:linear-gradient(180deg,rgba(206,212,219,.50) 0%, rgba(206,212,219,.66) 100%)!important;
border:1px solid rgba(115,126,138,.24)!important;
border-left:4px solid rgba(111,123,136,.82)!important;
box-shadow:0 10px 22px rgba(25,26,30,.06), 0 1px 0 rgba(255,255,255,.72) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:rgba(228,233,238,.92)!important;
border:1px solid rgba(115,126,138,.24)!important;
color:#566575!important;
}
.po-summary-card,
.po-summary-card .po-summary-body,
.po-summary-card .po-summary-body *,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-native-richtext *,
.po-lesson-section-title.is-summary + .po-note,
.po-lesson-section-title.is-summary + .po-note *{
color:#273038!important;
}
.po-summary-card li::marker,
.po-lesson-section-title.is-summary + .po-native-richtext li::marker,
.po-lesson-section-title.is-summary + .po-note li::marker{
color:#667788!important;
}
.po-summary-card strong,
.po-summary-card b,
.po-lesson-section-title.is-summary + .po-native-richtext strong,
.po-lesson-section-title.is-summary + .po-native-richtext b,
.po-lesson-section-title.is-summary + .po-note strong,
.po-lesson-section-title.is-summary + .po-note b{
color:#171c21!important;
}
/* =========================================================
PILOT LMS v0.38 / RESTORE TOP-PAGE BUBBLE COLORS
========================================================= */
/* Restore the lesson-page dialogue bubbles to the same light colors used on the top page. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:var(--po-soft)!important;
color:var(--po-ink)!important;
border:1px solid rgba(0,0,0,.04)!important;
box-shadow:0 4px 14px rgba(20,20,20,.05)!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble *{color:inherit!important;}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{border-right-color:var(--po-soft)!important;}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:var(--po-cream)!important;
color:#302a22!important;
border:1px solid rgba(0,0,0,.05)!important;
box-shadow:0 4px 14px rgba(20,20,20,.05)!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble *{color:inherit!important;}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{border-left-color:var(--po-cream)!important;}
/* Keep IMPORTANT / SUMMARY subtle and lightly tinted. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
background:linear-gradient(180deg,rgba(225,213,188,.40) 0%, rgba(225,213,188,.56) 100%)!important;
}
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:linear-gradient(180deg,rgba(206,212,219,.40) 0%, rgba(206,212,219,.56) 100%)!important;
}
/* =========================================================
PILOT LMS v0.39 / LOW-GLARE WARM GRAY READING SURFACE
Neutral gray paper tone: darker than the top page, lighter than dark mode.
========================================================= */
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{
background:#e6e4df!important;
}
.po-lms-app .po-header{
background:linear-gradient(to bottom,#e6e4df 0,#e6e4df 68px,transparent 68px)!important;
}
.po-player-toolbar{
background:#ddd9d2!important;
border-bottom-color:#c4c0b8!important;
}
.po-player-article-head{
border-bottom-color:#c7c3bb!important;
}
.po-player-scroll{
scrollbar-color:#aaa59c transparent;
}
@media(max-width:900px){
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-scroll{
background:#e6e4df!important;
}
.po-lms-app .po-header{
background:#e6e4df!important;
border-bottom-color:#c4c0b8!important;
}
.po-player-toolbar{
background:#ddd9d2!important;
}
}
/* =========================================================
PILOT LMS v0.40 / NEUTRAL GRAY READING SURFACE
========================================================= */
/* Neutral/cool gray instead of warm earth tone. */
.po-player-main,
.po-player-content,
.po-player-article{
background:#e3e4e5!important;
}
.po-player-toolbar{
background:#d9dbdd!important;
border-color:#c7c9cb!important;
}
.po-player-header{
background:#e3e4e5!important;
border-color:#c7c9cb!important;
}
/* Student bubble needs more separation on a gray reading surface. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:linear-gradient(180deg,#cfd3d6 0%,#c5cace 100%)!important;
color:#202428!important;
border:1px solid rgba(74,80,86,.18)!important;
box-shadow:0 4px 14px rgba(30,34,38,.06)!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble *{
color:inherit!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{
border-right-color:#c9ced2!important;
}
/* Keep captain warm but subdued, close to the top-page feel. */
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:linear-gradient(180deg,#ece7de 0%,#e4ded3 100%)!important;
color:#302a22!important;
border:1px solid rgba(78,69,58,.10)!important;
box-shadow:0 4px 14px rgba(30,30,30,.05)!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble *{
color:inherit!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{
border-left-color:#e8e2d8!important;
}
/* =========================================================
PILOT LMS v0.45 / MATCH TOP-PAGE PALETTE
Keep v0.43 dialogue repair logic; restore the visual palette
to the same paper / student / captain colors used on the home page.
========================================================= */
/* Main reading surface: exactly the same paper tone as the top page. */
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-content,
.po-player-scroll,
.po-player-article{
background:var(--po-paper)!important;
}
/* Header / toolbar use the same paper system rather than cool-gray lesson overrides. */
.po-lms-app .po-header,
.po-player-header{
background:var(--po-paper)!important;
border-color:var(--po-line)!important;
}
.po-player-toolbar{
background:var(--po-paper)!important;
border-color:var(--po-line)!important;
}
.po-player-article-head{
border-bottom-color:var(--po-line)!important;
}
.po-player-scroll{
scrollbar-color:#aaa59c transparent!important;
}
/* Dialogue bubbles: exact top-page colors. */
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:var(--po-soft)!important;
color:var(--po-ink)!important;
border:1px solid rgba(0,0,0,.04)!important;
box-shadow:none!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble *{
color:inherit!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble::before{
border-right-color:var(--po-soft)!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:var(--po-cream)!important;
color:#302a22!important;
border:1px solid rgba(0,0,0,.04)!important;
box-shadow:none!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble *{
color:inherit!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble::after{
border-left-color:var(--po-cream)!important;
}
/* IMPORTANT / SUMMARY: light, quiet cards that do not compete with dialogue. */
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note{
background:#eee9df!important;
border:1px solid rgba(179,138,67,.18)!important;
border-left:3px solid rgba(179,138,67,.72)!important;
box-shadow:none!important;
}
.po-native-blocks .po-note::before,
.po-player-article .pilot-lesson-content .po-note::before{
background:#f5f0e6!important;
border:1px solid rgba(179,138,67,.18)!important;
color:#7d622f!important;
}
.po-native-blocks .po-note,
.po-native-blocks .po-note .po-native-note-body,
.po-native-blocks .po-note .po-native-note-body *,
.po-player-article .pilot-lesson-content .po-note,
.po-player-article .pilot-lesson-content .po-note .po-native-note-body,
.po-player-article .pilot-lesson-content .po-note .po-native-note-body *{
color:var(--po-ink)!important;
}
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:#e9e7e2!important;
border:1px solid rgba(94,99,104,.16)!important;
border-left:3px solid rgba(94,99,104,.55)!important;
box-shadow:none!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:#f1efeb!important;
border:1px solid rgba(94,99,104,.14)!important;
color:#5e6368!important;
}
.po-summary-card,
.po-summary-card .po-summary-body,
.po-summary-card .po-summary-body *,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-native-richtext *,
.po-lesson-section-title.is-summary + .po-note,
.po-lesson-section-title.is-summary + .po-note *{
color:var(--po-ink)!important;
}
@media(max-width:900px){
body.po-lms-standalone,
.po-lms-app,
.po-course-player,
.po-player-main,
.po-player-content,
.po-player-scroll,
.po-player-article,
.po-lms-app .po-header,
.po-player-header,
.po-player-toolbar{
background:var(--po-paper)!important;
}
}
/* =========================================================
PILOT LMS v0.46 / SUBTLE DEPTH ON TOP-PAGE PALETTE
Keep v0.45 colors exactly; add only restrained elevation.
========================================================= */
.po-native-blocks .po-chat-bubble{
box-shadow:0 7px 18px rgba(24,24,24,.055), 0 1px 0 rgba(255,255,255,.55) inset!important;
}
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note,
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
box-shadow:0 10px 24px rgba(24,24,24,.06), 0 1px 0 rgba(255,255,255,.5) inset!important;
}
@media(max-width:900px){
.po-native-blocks .po-chat-bubble{
box-shadow:0 5px 14px rgba(24,24,24,.05), 0 1px 0 rgba(255,255,255,.5) inset!important;
}
.po-native-blocks .po-note,
.po-player-article .pilot-lesson-content .po-note,
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
box-shadow:0 7px 18px rgba(24,24,24,.055), 0 1px 0 rgba(255,255,255,.48) inset!important;
}
}
/* =========================================================
PILOT LMS v0.49 / NEUTRALIZE LEGACY TUTOR PRESENTATION MARKUP
========================================================= */
/* Semantic roles are now handled by Pilot blocks. Old Tutor marker classes
must not recolor text inside dialogue / IMPORTANT / SUMMARY cards. */
.po-native-blocks .underline-teal,
.po-native-blocks [class*="underline-"],
.po-summary-card .underline-teal,
.po-summary-card [class*="underline-"]{
background:none!important;
background-color:transparent!important;
background-image:none!important;
box-shadow:none!important;
color:inherit!important;
text-decoration:none!important;
}
/* =========================================================
PILOT LMS v0.51 / REMOVE FALSE BLANK LINE INSIDE CHAT BUBBLES
========================================================= */
/* Older Tutor dialogue often wraps one sentence in . The generic
lesson rule gives every paragraph a 1.35em bottom margin, which makes
a one-line speech bubble look as though it contains an empty second line.
Dialogue controls its own spacing instead. */
.po-native-blocks .po-chat-bubble p{
margin:0!important;
padding:0!important;
}
.po-native-blocks .po-chat-bubble p + p{
margin-top:.72em!important;
}
/* Same protection for any remaining legacy Pilot dialogue wrappers. */
.po-player-article .pilot-lesson-content .po-bubble p,
.po-player-article .pilot-lesson-content .po-bubble-student p,
.po-player-article .pilot-lesson-content .po-bubble-captain p{
margin:0!important;
padding:0!important;
}
.po-player-article .pilot-lesson-content .po-bubble p + p,
.po-player-article .pilot-lesson-content .po-bubble-student p + p,
.po-player-article .pilot-lesson-content .po-bubble-captain p + p{
margin-top:.72em!important;
}
/* =========================================================
PILOT LMS v0.54 / DEPTH + DARK MENU-TONE SUMMARY & HEADINGS
========================================================= */
/* Dialogue: keep the familiar top-page palette, add clearer elevation. */
.po-native-blocks .po-chat-bubble{
border:1px solid rgba(23,27,32,.10)!important;
box-shadow:
0 10px 24px rgba(23,27,32,.085),
0 2px 5px rgba(23,27,32,.045),
0 1px 0 rgba(255,255,255,.70) inset!important;
}
.po-native-blocks .po-chat-row.fo .po-chat-bubble{
background:var(--po-soft)!important;
color:var(--po-ink)!important;
}
.po-native-blocks .po-chat-row.captain .po-chat-bubble{
background:var(--po-cream)!important;
color:#302a22!important;
}
/* SUMMARY: use the same visual language as the dark curriculum menu. */
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:linear-gradient(180deg,var(--po-dark-2) 0%,var(--po-dark) 100%)!important;
border:1px solid rgba(255,255,255,.09)!important;
border-left:4px solid var(--po-gold)!important;
box-shadow:
0 14px 28px rgba(15,18,21,.18),
0 1px 0 rgba(255,255,255,.04) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.10)!important;
color:var(--po-gold-2)!important;
}
.po-summary-card,
.po-summary-card .po-summary-body,
.po-summary-card .po-summary-body *,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-native-richtext *,
.po-lesson-section-title.is-summary + .po-note,
.po-lesson-section-title.is-summary + .po-note *{
color:#f3f1eb!important;
}
.po-summary-card strong,
.po-summary-card b{
color:#ffffff!important;
}
/* Headings: compact dark bars rather than another pale card.
Major headings carry more weight; subsections stay lighter. */
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
display:flex!important;
align-items:center!important;
width:fit-content!important;
max-width:100%!important;
margin:30px 0 18px!important;
padding:11px 16px!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:9px!important;
background:linear-gradient(180deg,var(--po-dark-2) 0%,var(--po-dark) 100%)!important;
color:#f5f3ed!important;
box-shadow:0 9px 20px rgba(23,27,32,.12)!important;
font-weight:950!important;
}
.po-native-blocks .po-lesson-section-title.is-major::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major::before{
width:4px!important;
height:1.2em!important;
border-radius:999px!important;
background:var(--po-gold)!important;
flex:0 0 4px!important;
}
/* Subsections use the same menu tone but with lower visual weight. */
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection,
.po-native-blocks .po-lesson-section-title.is-point-heading,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading{
display:flex!important;
align-items:center!important;
width:fit-content!important;
max-width:100%!important;
margin:24px 0 14px!important;
padding:8px 13px!important;
border:1px solid rgba(23,27,32,.08)!important;
border-radius:7px!important;
background:var(--po-dark-3)!important;
color:#f0eee8!important;
box-shadow:0 6px 14px rgba(23,27,32,.09)!important;
font-weight:900!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection::before,
.po-native-blocks .po-lesson-section-title.is-point-heading::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading::before{
width:3px!important;
height:1em!important;
border-radius:999px!important;
background:var(--po-gold)!important;
flex:0 0 3px!important;
}
@media(max-width:900px){
.po-native-blocks .po-chat-bubble{
box-shadow:
0 7px 16px rgba(23,27,32,.075),
0 1px 3px rgba(23,27,32,.035),
0 1px 0 rgba(255,255,255,.68) inset!important;
}
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
margin:24px 0 14px!important;
padding:10px 13px!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection,
.po-native-blocks .po-lesson-section-title.is-point-heading,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading{
margin:20px 0 12px!important;
padding:8px 11px!important;
}
}
/* =========================================================
PILOT LMS v0.55 / REFINED DARK SUMMARY CARD
========================================================= */
/* Keep SUMMARY in the menu-dark visual family, but remove the
IMPORTANT-like gold side stripe and reduce its visual weight. */
.po-summary-card,
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-note{
background:var(--po-dark-2)!important;
border:1px solid rgba(255,255,255,.10)!important;
border-left:1px solid rgba(255,255,255,.10)!important;
border-radius:14px!important;
box-shadow:
0 11px 24px rgba(15,18,21,.14),
0 1px 0 rgba(255,255,255,.035) inset!important;
}
.po-summary-label,
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
background:rgba(255,255,255,.055)!important;
border:1px solid rgba(255,255,255,.10)!important;
color:var(--po-gold-2)!important;
box-shadow:none!important;
}
/* =========================================================
PILOT LMS v0.57 / FULL-SPAN MENU-TONE SECTION HEADINGS
Based on v0.55. No TOPIC/SUBTOPIC labels.
========================================================= */
/* Main section heading: full content width, same dark language as the curriculum menu. */
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
display:block!important;
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
margin:32px 0 20px!important;
padding:15px 20px 16px!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:8px!important;
background:var(--po-dark-2)!important;
color:#f3f1eb!important;
box-shadow:
0 8px 18px rgba(15,18,21,.10),
0 1px 0 rgba(255,255,255,.035) inset!important;
font-size:clamp(23px,1.8vw,31px)!important;
font-weight:950!important;
line-height:1.28!important;
letter-spacing:-.02em!important;
}
/* Remove the old decorative gold bar from the full-width heading. */
.po-native-blocks .po-lesson-section-title.is-major::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major::before{
content:none!important;
display:none!important;
}
/* Subsequent headings: same family, but lower visual weight. */
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection{
display:block!important;
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
margin:26px 0 16px!important;
padding:11px 16px 12px!important;
border:1px solid rgba(255,255,255,.065)!important;
border-radius:7px!important;
background:var(--po-dark-3)!important;
color:#efede7!important;
box-shadow:
0 5px 13px rgba(15,18,21,.075),
0 1px 0 rgba(255,255,255,.025) inset!important;
font-size:clamp(18px,1.3vw,23px)!important;
font-weight:900!important;
line-height:1.32!important;
letter-spacing:-.012em!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection::before{
content:none!important;
display:none!important;
}
/* POINT-linked heading uses the same subsection strip. */
.po-native-blocks .po-lesson-section-title.is-point-heading,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading{
display:block!important;
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
margin:24px 0 15px!important;
padding:11px 16px 12px!important;
border:1px solid rgba(255,255,255,.065)!important;
border-radius:7px!important;
background:var(--po-dark-3)!important;
color:#efede7!important;
box-shadow:0 5px 13px rgba(15,18,21,.075)!important;
font-size:clamp(18px,1.3vw,23px)!important;
font-weight:900!important;
line-height:1.32!important;
}
.po-native-blocks .po-lesson-section-title.is-point-heading::before,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading::before{
content:none!important;
display:none!important;
}
@media(max-width:900px){
.po-native-blocks .po-lesson-section-title.is-major,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-major{
margin:25px 0 16px!important;
padding:13px 15px 14px!important;
border-radius:7px!important;
}
.po-native-blocks .po-lesson-section-title.is-subsection,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-subsection,
.po-native-blocks .po-lesson-section-title.is-point-heading,
.po-player-article .pilot-lesson-content .po-lesson-section-title.is-point-heading{
margin:21px 0 13px!important;
padding:10px 13px 11px!important;
border-radius:6px!important;
}
}
/* =========================================================
PILOT LMS v0.58 / SUMMARY TEXT CONTRAST FIX
Force all nested summary text to the light menu-on-dark palette.
========================================================= */
/* Native SUMMARY card */
.po-summary-card,
.po-summary-card .po-summary-body,
.po-summary-card .po-summary-body *,
.po-summary-card div,
.po-summary-card p,
.po-summary-card span,
.po-summary-card small,
.po-summary-card strong,
.po-summary-card b,
.po-summary-card em,
.po-summary-card i,
.po-summary-card u,
.po-summary-card a,
.po-summary-card ul,
.po-summary-card ol,
.po-summary-card li,
.po-summary-card blockquote,
.po-summary-card code{
color:#f3f1eb!important;
}
/* Strong emphasis can be fully white for legibility. */
.po-summary-card strong,
.po-summary-card b{
color:#ffffff!important;
}
/* Keep the SUMMARY badge gold, not white. */
.po-summary-card .po-summary-label{
color:var(--po-gold-2)!important;
}
/* Marker / link visibility on the dark card. */
.po-summary-card li::marker{
color:var(--po-gold-2)!important;
}
.po-summary-card a{
text-decoration-color:rgba(243,241,235,.7)!important;
}
/* Cached/legacy summary rendering paths */
.po-lesson-section-title.is-summary + .po-native-richtext,
.po-lesson-section-title.is-summary + .po-native-richtext *,
.po-lesson-section-title.is-summary + .po-note,
.po-lesson-section-title.is-summary + .po-note *{
color:#f3f1eb!important;
}
.po-lesson-section-title.is-summary + .po-native-richtext strong,
.po-lesson-section-title.is-summary + .po-native-richtext b,
.po-lesson-section-title.is-summary + .po-note strong,
.po-lesson-section-title.is-summary + .po-note b{
color:#ffffff!important;
}
.po-lesson-section-title.is-summary + .po-native-richtext::before,
.po-lesson-section-title.is-summary + .po-note::before{
color:var(--po-gold-2)!important;
}
/* =========================================================
PILOT LMS v0.59 / SUMMARY LEGACY INLINE-COLOR HARD FIX
========================================================= */
.po-summary-card .po-summary-body,
.po-summary-card .po-summary-body *{
color:#f3f1eb!important;
-webkit-text-fill-color:#f3f1eb!important;
}
.po-summary-card .po-summary-body strong,
.po-summary-card .po-summary-body b{
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
}
.po-summary-card .po-summary-label{
color:var(--po-gold-2)!important;
-webkit-text-fill-color:var(--po-gold-2)!important;
}
/* =========================================================
PILOT LMS v0.60 / STANDARDIZED LESSON HERO IMAGE
========================================================= */
/* Only an image that is literally the first lesson-content block becomes
the lesson hero. Images inside the lesson body keep their natural sizing. */
.po-native-image.is-lesson-hero{
width:min(82%,900px)!important;
max-width:900px!important;
margin:4px auto 30px!important;
padding:12px!important;
box-sizing:border-box!important;
border:1px solid rgba(23,27,32,.10)!important;
border-radius:10px!important;
background:#f8f7f3!important;
box-shadow:
0 10px 24px rgba(23,27,32,.075),
0 1px 0 rgba(255,255,255,.75) inset!important;
text-align:center!important;
}
.po-native-image.is-lesson-hero img{
display:block!important;
width:100%!important;
height:clamp(260px,28vw,340px)!important;
max-width:100%!important;
margin:0 auto!important;
border:0!important;
border-radius:6px!important;
background:transparent!important;
object-fit:contain!important;
object-position:center center!important;
}
.po-native-image.is-lesson-hero figcaption{
margin:9px 6px 1px!important;
color:#77716a!important;
font-size:10px!important;
line-height:1.5!important;
}
@media(max-width:900px){
.po-native-image.is-lesson-hero{
width:100%!important;
max-width:none!important;
margin:2px auto 22px!important;
padding:8px!important;
border-radius:8px!important;
box-shadow:0 7px 16px rgba(23,27,32,.06)!important;
}
.po-native-image.is-lesson-hero img{
height:clamp(190px,55vw,230px)!important;
border-radius:5px!important;
}
}
/* =========================================================
PILOT LMS v0.62 / BORDERLESS LESSON HERO IMAGE
Keep hero sizing consistent without a large surrounding card.
========================================================= */
.po-native-image.is-lesson-hero{
width:100%!important;
max-width:none!important;
margin:4px auto 30px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
text-align:center!important;
}
.po-native-image.is-lesson-hero img{
display:block!important;
width:auto!important;
height:auto!important;
max-width:min(82%,900px)!important;
max-height:340px!important;
margin:0 auto!important;
padding:0!important;
border:1px solid rgba(23,27,32,.10)!important;
border-radius:4px!important;
background:transparent!important;
object-fit:contain!important;
object-position:center center!important;
box-shadow:0 10px 24px rgba(23,27,32,.09)!important;
}
.po-native-image.is-lesson-hero figcaption{
width:min(82%,900px)!important;
max-width:900px!important;
margin:9px auto 0!important;
color:#77716a!important;
font-size:10px!important;
line-height:1.5!important;
text-align:center!important;
}
@media(max-width:900px){
.po-native-image.is-lesson-hero{
margin:2px auto 22px!important;
}
.po-native-image.is-lesson-hero img{
max-width:100%!important;
max-height:230px!important;
border-radius:3px!important;
box-shadow:0 7px 16px rgba(23,27,32,.075)!important;
}
.po-native-image.is-lesson-hero figcaption{
width:100%!important;
max-width:none!important;
}
}
/* =========================================================
PILOT LMS v0.63 / NEUTRAL STUDY LIST CARDS
Remove legacy blue list styling and bring lists into the
paper / charcoal / gold Pilot Online palette.
========================================================= */
/* The block itself becomes a quiet neutral study card. */
.po-player-article.is-native-content .po-native-richtext--listlike,
.po-native-blocks .po-native-richtext--listlike{
margin:18px 0 24px!important;
padding:18px 22px!important;
border:1px solid rgba(23,27,32,.11)!important;
border-radius:10px!important;
background:#ebe9e4!important;
background-image:none!important;
color:var(--po-ink)!important;
box-shadow:0 6px 16px rgba(23,27,32,.045)!important;
}
/* Legacy Tutor list markup can still contain old blue inline backgrounds
and borders. Neutralize presentation styling inside list-like blocks. */
.po-player-article.is-native-content .po-native-richtext--listlike :where(div,p,span,ul,ol,li),
.po-native-blocks .po-native-richtext--listlike :where(div,p,span,ul,ol,li){
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
border-color:transparent!important;
outline-color:transparent!important;
box-shadow:none!important;
color:inherit!important;
}
/* Lists themselves do not need a second nested card/border. */
.po-player-article.is-native-content .po-native-richtext--listlike > ul,
.po-player-article.is-native-content .po-native-richtext--listlike > ol,
.po-native-blocks .po-native-richtext--listlike > ul,
.po-native-blocks .po-native-richtext--listlike > ol{
border:0!important;
border-radius:0!important;
padding-top:0!important;
padding-bottom:0!important;
}
/* Keep the site accent only on the bullets/numbers. */
.po-player-article.is-native-content .po-native-richtext--listlike li::marker,
.po-native-blocks .po-native-richtext--listlike li::marker{
color:var(--po-gold)!important;
font-weight:950!important;
}
/* Strong terms stay ink-black rather than inheriting legacy blue. */
.po-player-article.is-native-content .po-native-richtext--listlike strong,
.po-player-article.is-native-content .po-native-richtext--listlike b,
.po-native-blocks .po-native-richtext--listlike strong,
.po-native-blocks .po-native-richtext--listlike b{
color:var(--po-ink)!important;
}
@media(max-width:900px){
.po-player-article.is-native-content .po-native-richtext--listlike,
.po-native-blocks .po-native-richtext--listlike{
margin:15px 0 20px!important;
padding:15px 16px!important;
border-radius:8px!important;
}
}
/* =========================================================
PILOT LMS v0.64 / TRUE BORDERLESS LESSON HERO IMAGE
========================================================= */
.po-native-image.is-lesson-hero{
border:0!important;
outline:0!important;
background:transparent!important;
box-shadow:none!important;
}
.po-native-image.is-lesson-hero::before,
.po-native-image.is-lesson-hero::after{
content:none!important;
display:none!important;
}
.po-native-image.is-lesson-hero img{
border:0!important;
outline:0!important;
background:transparent!important;
box-shadow:0 10px 24px rgba(23,27,32,.085)!important;
}
@media(max-width:900px){
.po-native-image.is-lesson-hero img{
border:0!important;
outline:0!important;
box-shadow:0 7px 16px rgba(23,27,32,.07)!important;
}
}
/* =========================================================
PILOT LMS v0.70 / PRIMARY COMPLETE LESSON CTA
Completion is the primary lesson action.
Previous / Next remain secondary navigation.
========================================================= */
@media(min-width:901px){
.po-player-lesson-nav{
grid-template-columns:minmax(0,1fr) minmax(260px,330px) minmax(0,1fr)!important;
gap:18px!important;
align-items:stretch!important;
}
.po-player-complete-wrap{
width:100%!important;
min-width:0!important;
}
.po-player-complete-wrap form{
width:100%!important;
height:100%!important;
margin:0!important;
}
.po-player-complete-button,
.po-player-complete-state{
width:100%!important;
min-height:70px!important;
padding:0 24px!important;
border:1px solid var(--po-dark)!important;
border-top:4px solid var(--po-gold)!important;
border-radius:2px!important;
background:var(--po-dark)!important;
color:#fff!important;
box-shadow:0 10px 22px rgba(23,27,32,.12)!important;
font-size:13px!important;
font-weight:950!important;
letter-spacing:.085em!important;
transition:transform .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.po-player-complete-button span{
margin-right:8px!important;
color:var(--po-gold-2)!important;
font-size:17px!important;
line-height:1!important;
}
.po-player-complete-button:hover{
transform:translateY(-2px)!important;
background:#252b31!important;
box-shadow:0 14px 28px rgba(23,27,32,.16)!important;
}
.po-player-complete-button:focus-visible{
outline:2px solid var(--po-gold)!important;
outline-offset:3px!important;
}
.po-player-complete-state{
border-color:#93a396!important;
border-top-color:#66926f!important;
background:#edf3ed!important;
color:#36543e!important;
box-shadow:none!important;
}
/* Navigation should be clearly secondary to completion. */
.po-player-nav-link{
min-height:62px!important;
border-color:#d7d1c7!important;
background:transparent!important;
box-shadow:none!important;
}
.po-player-nav-link:hover{
border-color:#9f978c!important;
background:#faf8f3!important;
}
}
@media(max-width:900px){
.po-player-complete-wrap form{
width:100%!important;
margin:0!important;
}
.po-player-complete-button,
.po-player-complete-state{
width:100%!important;
min-height:60px!important;
border-top:4px solid var(--po-gold)!important;
box-shadow:0 8px 18px rgba(23,27,32,.11)!important;
font-size:12px!important;
}
.po-player-complete-button span{
margin-right:7px!important;
color:var(--po-gold-2)!important;
font-size:16px!important;
}
}
/* =========================================================
PILOT LMS v0.71 / SINGLE PROMINENT COURSE PROGRESS
Desktop: progress lives only in the top toolbar.
Mobile: progress lives inside the Course Content drawer.
========================================================= */
@media(min-width:901px){
:root{
--po-player-toolbar:64px!important;
}
/* Sidebar is curriculum-only now. */
.po-player-course-head{
padding-bottom:18px!important;
}
.po-player-progress-row,
.po-player-progress-track,
.po-player-progress-copy{
display:none!important;
}
/* Give course progress a real visual zone in the toolbar. */
.po-player-toolbar{
grid-template-columns:38px minmax(0,1fr) minmax(230px,280px)!important;
gap:16px!important;
padding-right:20px!important;
}
.po-player-toolbar-progress{
display:grid!important;
grid-template-columns:1fr!important;
gap:6px!important;
width:100%!important;
min-width:230px!important;
padding:8px 0!important;
}
.po-player-toolbar-progress-meta{
display:grid!important;
grid-template-columns:auto minmax(0,1fr) auto!important;
gap:10px!important;
align-items:baseline!important;
}
.po-player-toolbar-progress-meta>span{
color:#5d5750!important;
font-size:8px!important;
font-weight:950!important;
letter-spacing:.13em!important;
white-space:nowrap!important;
}
.po-player-toolbar-progress-meta>small{
min-width:0!important;
overflow:hidden!important;
color:#91897f!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.05em!important;
text-align:right!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.po-player-toolbar-progress-meta>strong{
color:var(--po-ink)!important;
font-size:15px!important;
font-weight:950!important;
line-height:1!important;
white-space:nowrap!important;
}
.po-player-toolbar-progress>i{
position:relative!important;
display:block!important;
width:100%!important;
height:7px!important;
overflow:hidden!important;
border-radius:999px!important;
background:#d7d1c7!important;
box-shadow:inset 0 1px 2px rgba(23,27,32,.08)!important;
}
.po-player-toolbar-progress>i>b{
display:block!important;
min-width:0!important;
height:100%!important;
border-radius:999px!important;
background:linear-gradient(90deg,var(--po-gold),var(--po-gold-2))!important;
box-shadow:0 0 0 1px rgba(122,89,39,.08)!important;
transition:width .25s ease!important;
}
}
@media(min-width:901px) and (max-width:1280px){
.po-player-toolbar{
grid-template-columns:38px minmax(0,1fr) 230px!important;
}
.po-player-toolbar-progress{
min-width:210px!important;
}
.po-player-toolbar-progress-meta>small{
display:none!important;
}
.po-player-toolbar-progress-meta{
grid-template-columns:1fr auto!important;
}
}
/* On mobile the desktop toolbar is hidden, so the drawer owns the single progress display. */
@media(max-width:900px){
.po-player-mobile-progress{
display:grid!important;
gap:6px!important;
padding:10px 13px 12px!important;
border-top:1px solid var(--po-line)!important;
background:#f6f3ed!important;
}
.po-player-mobile-progress>div{
display:flex!important;
align-items:baseline!important;
justify-content:space-between!important;
gap:12px!important;
}
.po-player-mobile-progress>div>span{
color:#6b645c!important;
font-size:8px!important;
font-weight:950!important;
letter-spacing:.12em!important;
}
.po-player-mobile-progress>div>strong{
color:var(--po-ink)!important;
font-size:14px!important;
font-weight:950!important;
}
.po-player-mobile-progress>i{
display:block!important;
width:100%!important;
height:6px!important;
overflow:hidden!important;
border-radius:999px!important;
background:#d7d1c7!important;
}
.po-player-mobile-progress>i>b{
display:block!important;
height:100%!important;
border-radius:999px!important;
background:linear-gradient(90deg,var(--po-gold),var(--po-gold-2))!important;
}
.po-player-mobile-progress>small{
color:#8d857b!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.06em!important;
}
}
/* =========================================================
PILOT LMS v0.72 / ACCOUNT + 10% PREVIEW PAYWALL
========================================================= */
/* Locked curriculum stays visible so users can see course depth. */
.pilot-course-lesson.is-locked{
opacity:.68!important;
pointer-events:auto!important;
cursor:pointer!important;
}
.pilot-course-lesson.is-locked:hover{
opacity:1!important;
background:#f2ede4!important;
}
.pilot-course-lesson.is-locked b{
filter:grayscale(1);
opacity:.72;
}
.po-player-lesson.is-locked{
opacity:.56!important;
}
.po-player-lesson.is-locked:hover{
opacity:1!important;
}
.po-player-lesson.is-locked>span{
color:#9da5ab!important;
font-size:9px!important;
}
.po-player-mobile-lesson.is-locked{
opacity:.58!important;
}
/* Old course page preview entry. */
.pilot-course-preview-entry{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
width:min(100%,720px);
padding:16px 18px;
border:1px solid var(--po-line);
background:#faf8f3;
}
.pilot-course-preview-entry p{
margin:0;
}
.pilot-course-preview-entry strong{
display:block;
color:var(--po-ink);
font-size:13px;
letter-spacing:.04em;
}
.pilot-course-preview-entry span{
display:block;
margin-top:4px;
color:var(--po-copy);
font-size:10px;
}
/* Lesson access gate / login or paywall. */
.po-player-access-gate{
width:min(100%,860px);
margin:clamp(20px,4vh,56px) auto 0;
padding:clamp(30px,4vw,54px);
border:1px solid #bdb5aa;
border-top:6px solid var(--po-gold);
background:#fbfaf6;
box-shadow:0 20px 46px rgba(23,27,32,.08);
}
.po-player-access-gate .po-eyebrow{
margin:0 0 14px!important;
color:var(--po-gold)!important;
font-size:10px!important;
font-weight:950!important;
letter-spacing:.16em!important;
}
.po-player-access-gate h1{
max-width:720px;
margin:0;
color:var(--po-ink);
font-size:clamp(42px,4.4vw,68px);
font-weight:950;
line-height:.98;
letter-spacing:-.055em;
}
.po-player-access-copy{
max-width:700px;
margin:20px 0 0;
color:#555b60;
font-size:15px;
line-height:1.8;
}
.po-player-access-copy strong{
color:var(--po-ink);
font-weight:950;
}
.po-player-access-benefits{
display:flex;
flex-wrap:wrap;
gap:8px 20px;
margin:23px 0 0;
padding:16px 0;
border-top:1px solid #d7d0c6;
border-bottom:1px solid #d7d0c6;
}
.po-player-access-benefits span{
color:#514c46;
font-size:11px;
font-weight:850;
}
.po-player-access-primary{
display:flex;
width:min(100%,420px);
min-height:62px;
margin-top:24px;
padding:0 20px;
align-items:center;
justify-content:space-between;
border:2px solid var(--po-dark);
background:var(--po-dark);
color:#fff!important;
font-size:12px;
font-weight:950;
letter-spacing:.09em;
transition:background .15s ease,color .15s ease;
}
.po-player-access-primary:hover{
background:#fff;
color:var(--po-dark)!important;
}
@media(max-width:900px){
.pilot-course-preview-entry{
display:block;
}
.pilot-course-preview-entry .pilot-action-button{
width:100%;
margin-top:13px;
}
.po-player-access-gate{
margin:14px auto 0;
padding:26px 18px 22px;
border-top-width:5px;
}
.po-player-access-gate h1{
font-size:36px;
}
.po-player-access-copy{
margin-top:15px;
font-size:13px;
line-height:1.7;
}
.po-player-access-benefits{
display:grid;
gap:8px;
margin-top:17px;
padding:13px 0;
}
.po-player-access-primary{
width:100%;
min-height:56px;
margin-top:18px;
}
}
/* =========================================================
PILOT LMS v0.73 / STRIPE CHECKOUT PAYWALL
========================================================= */
.po-player-paywall-plans{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:24px;
}
.po-player-paywall-plan{
display:flex;
flex-direction:column;
min-height:255px;
padding:22px;
border:1px solid #cfc8bd;
background:#fffefa;
}
.po-player-paywall-plan.is-featured{
position:relative;
border-color:var(--po-gold);
background:#f4ecde;
box-shadow:0 14px 28px rgba(70,52,22,.08);
}
.po-player-paywall-plan.is-featured:before{
content:"RECOMMENDED";
position:absolute;
top:-1px;
right:16px;
padding:5px 8px;
background:var(--po-gold);
color:#fff;
font-size:7px;
font-weight:950;
letter-spacing:.1em;
}
.po-player-paywall-plan>small{
color:var(--po-gold);
font-size:8px;
font-weight:950;
letter-spacing:.13em;
}
.po-player-paywall-plan h3{
margin:9px 0 8px;
color:var(--po-ink);
font-size:21px;
line-height:1.2;
}
.po-player-paywall-plan>strong{
display:block;
color:var(--po-ink);
font-size:25px;
font-weight:950;
line-height:1.15;
}
.po-player-paywall-plan p{
margin:10px 0 18px;
color:#625d56;
font-size:11px;
line-height:1.6;
}
.po-player-paywall-plan>a{
display:flex;
min-height:50px;
margin-top:auto;
padding:0 14px;
align-items:center;
justify-content:space-between;
border:2px solid var(--po-dark);
background:var(--po-dark);
color:#fff!important;
font-size:9px;
font-weight:950;
letter-spacing:.08em;
transition:background .15s ease,color .15s ease;
}
.po-player-paywall-plan>a:hover{
background:#fff;
color:var(--po-dark)!important;
}
.po-player-paywall-disabled{
display:flex;
min-height:50px;
margin-top:auto;
padding:0 12px;
align-items:center;
justify-content:center;
border:1px solid #d7d0c6;
background:#eeeae3;
color:#8c857c;
font-size:8px;
font-weight:950;
letter-spacing:.07em;
text-align:center;
}
.po-player-payment-admin-note{
margin:13px 0 0;
padding:10px 12px;
border-left:3px solid var(--po-gold);
background:#f2eee6;
color:#625d56;
font-size:10px;
line-height:1.55;
}
@media(max-width:900px){
.po-player-paywall-plans{
grid-template-columns:1fr;
}
.po-player-paywall-plan{
min-height:0;
}
}