/* /study/ielts journeys: one question, four big choices, a second step for practice and play, then the
   "learn to plant trees" banner and the garden. The shared skin forces square corners, so radii carry !important. */
body.ielts-dash-page .dash-shell{grid-template-columns:minmax(0,1fr)!important;max-width:1120px;margin-inline:auto}
body.ielts-dash-page .dash-journeys{display:grid;gap:22px}
/* Greeting: the otter asks the question */
body.ielts-dash-page .dash-journey-hello{display:flex;align-items:center;gap:20px;min-height:0;padding:8px 4px 0;background:none!important;box-shadow:none}
body.ielts-dash-page .dash-journey-hello .dash-otter{position:static;flex:none;width:118px;height:132px}
body.ielts-dash-page .dash-journey-hello .dash-otter-copy{width:auto}
body.ielts-dash-page .dash-otter-bubble{position:relative;display:inline-block;margin:0 0 10px;padding:8px 14px;background:#fff;border:1px solid #efe4d6;border-radius:16px!important;
  font-size:14px;color:#6b5243;box-shadow:0 6px 16px -12px rgba(120,70,40,.5)}
body.ielts-dash-page .dash-otter-bubble::before{content:'';position:absolute;left:-7px;top:16px;width:12px;height:12px;background:#fff;border-left:1px solid #efe4d6;border-bottom:1px solid #efe4d6;transform:rotate(45deg)}
body.ielts-dash-page .dash-journey-hello h1{margin:0;font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.15;color:#141414}
/* The four choices */
body.ielts-dash-page .journeys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body.ielts-dash-page .journey{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;text-align:left;font:inherit;color:#141414;text-decoration:none;cursor:pointer;
  background:#fff;border:2px solid #ece6dd;border-radius:24px!important;box-shadow:0 10px 24px -20px rgba(0,0,0,.5);transition:transform .2s cubic-bezier(.2,.9,.3,1.3),border-color .2s,box-shadow .2s}
body.ielts-dash-page .journey img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:16px!important;background:var(--tile);mix-blend-mode:multiply;margin-bottom:6px}
body.ielts-dash-page .journey[data-journey="start"]{--tile:#efeafc;--accent:#6c4fd8}
body.ielts-dash-page .journey[data-journey="continue"]{--tile:#e5f6ee;--accent:#167564}
body.ielts-dash-page .journey[data-journey="practice"]{--tile:#fff1e3;--accent:#c4560d}
body.ielts-dash-page .journey[data-journey="play"]{--tile:#ffe9ee;--accent:#c62f6b}
body.ielts-dash-page .journey-step{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
body.ielts-dash-page .journey strong{font-size:18px;line-height:1.25;font-weight:800}
body.ielts-dash-page .journey small{font-size:13px;line-height:1.45;color:#6d6d6d;min-height:38px}
body.ielts-dash-page .journey-go{margin-top:auto;padding-top:10px;font-weight:800;font-size:14px;color:var(--accent);text-decoration:none}
body.ielts-dash-page .journey-stretch::after{content:'';position:absolute;inset:0}
body.ielts-dash-page .journey:hover,body.ielts-dash-page .journey:focus-within{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 30px -20px var(--accent)}
body.ielts-dash-page .journey:focus-visible,body.ielts-dash-page .journey-stretch:focus-visible{outline:3px solid #916cda;outline-offset:3px}
body.ielts-dash-page .journey[aria-expanded="true"]{border-color:var(--accent);background:linear-gradient(180deg,#fff,var(--tile))}
/* The suggested first choice: "Find my level" for new learners, "Keep going" once there is progress */
body.ielts-dash-page [data-journeys][data-primary="start"] .journey[data-journey="start"],
body.ielts-dash-page [data-journeys][data-primary="continue"] .journey[data-journey="continue"]{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent),0 16px 30px -18px var(--accent)}
body.ielts-dash-page [data-journeys][data-primary="start"] .journey[data-journey="start"] .journey-go,
body.ielts-dash-page [data-journeys][data-primary="continue"] .journey[data-journey="continue"] .journey-go{align-self:flex-start;padding:9px 16px;margin-top:12px;background:var(--accent);color:#fff;border-radius:12px!important}
body.ielts-dash-page .journey-badge{display:none;position:absolute;top:-11px;left:16px;padding:2px 10px;border-radius:999px!important;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
body.ielts-dash-page [data-journeys][data-primary="start"] .journey[data-journey="start"] .journey-badge,
body.ielts-dash-page [data-journeys][data-primary="continue"] .journey[data-journey="continue"] .journey-badge{display:block}
/* Second step panels */
body.ielts-dash-page .journey-panel{padding:20px 22px 22px;background:#fff;border:2px solid #ece6dd;border-radius:24px!important;animation:journey-in .35s cubic-bezier(.2,.9,.3,1.1)}
body.ielts-dash-page .journey-panel h2{margin:0 0 14px;font-size:21px;font-weight:800;letter-spacing:-.4px}
@keyframes journey-in{from{opacity:0;transform:translateY(-8px)}}
/* "Learn to plant trees" */
body.ielts-dash-page .plant-banner{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:22px;padding:20px 26px;overflow:hidden;
  background:linear-gradient(110deg,#e7f6dd 0%,#f4fbe9 55%,#fff6dc 100%);border:2px solid #cfe7bd;border-radius:26px!important}
body.ielts-dash-page .plant-banner-art{width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(60,90,40,.25))}
body.ielts-dash-page .plant-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3f8a3a}
body.ielts-dash-page .plant-banner h2{margin:4px 0 6px;font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.25;letter-spacing:-.4px;color:#1f3d1c}
body.ielts-dash-page .plant-banner p{margin:0;color:#46613f;font-size:14px}
body.ielts-dash-page .plant-progress{height:14px;margin:14px 0 8px;background:#fff;border:1px solid #cfe7bd;border-radius:999px!important;overflow:hidden}
body.ielts-dash-page .plant-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7cc860,#3f9a3c);border-radius:inherit;transition:width .6s cubic-bezier(.2,.9,.3,1)}
body.ielts-dash-page .plant-counts strong{font-size:18px;color:#1f3d1c}
body.ielts-dash-page .plant-community{margin-top:6px!important;font-size:13px!important;color:#5b7552!important}
/* The garden: a fal meadow, one bed per skill, plants from seed to blossom; signs are text only */
body.ielts-dash-page .skill-garden{border:0!important;background:#dfeccb url(/static/study-hub/garden-art/garden-meadow.webp) center top/cover no-repeat!important;border-radius:26px!important;overflow:hidden}
body.ielts-dash-page .skill-garden .garden-terrain{display:none}
body.ielts-dash-page .skill-garden .garden-landscape{background:none!important}
body.ielts-dash-page .skill-garden .garden-heading{margin:0;padding:22px 24px 8px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,0))}
body.ielts-dash-page .skill-garden .garden-beds{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:110px 18px 18px!important}
body.ielts-dash-page .skill-garden .garden-bed{display:flex!important;flex-direction:column;align-items:center;padding:10px 10px 12px!important;background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.9)!important;border-radius:20px!important;backdrop-filter:blur(3px);box-shadow:0 10px 20px -16px rgba(30,60,20,.6)}
body.ielts-dash-page .skill-garden .garden-sign{order:2;display:flex!important;justify-content:center;gap:6px;width:100%;padding:6px 8px!important;background:#fff!important;border:1px solid #e3d8c3!important;
  border-radius:12px!important;box-shadow:none!important;font-weight:800;font-size:14px;color:#3d2c1b!important}
body.ielts-dash-page .skill-garden .learning-tree{order:1;width:100%;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
body.ielts-dash-page .skill-garden .tree-picture{height:150px;display:flex;align-items:flex-end;justify-content:center}
body.ielts-dash-page .garden-plot{position:relative;width:150px;height:150px}
body.ielts-dash-page .garden-plot .plot-soil{position:absolute;left:50%;bottom:0;width:120px;transform:translateX(-50%)}
body.ielts-dash-page .garden-plot .plot-plant{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);transform-origin:50% 100%;animation:plot-sway 4s ease-in-out infinite}
body.ielts-dash-page .garden-plot[data-stage="0"] .plot-soil{width:110px}
body.ielts-dash-page .garden-plot[data-stage="1"] .plot-plant{height:42px}
body.ielts-dash-page .garden-plot[data-stage="2"] .plot-plant{height:70px}
body.ielts-dash-page .garden-plot[data-stage="3"] .plot-plant{height:110px}
body.ielts-dash-page .garden-plot[data-stage="4"] .plot-plant{height:128px}
@keyframes plot-sway{50%{transform:translateX(-50%) rotate(1.6deg)}}
body.ielts-dash-page .learning-tree[data-tree-state="wilting"] .plot-plant{filter:saturate(.55) brightness(.97)}
body.ielts-dash-page .learning-tree[data-tree-state="yellow"] .plot-plant{filter:sepia(.75) saturate(1.2) hue-rotate(-18deg)}
body.ielts-dash-page .learning-tree[data-tree-state="dead"] .plot-plant{filter:grayscale(1) brightness(.75)}
body.ielts-dash-page .skill-garden .tree-info{text-align:center}
body.ielts-dash-page .skill-garden .tree-status{margin:6px 0 2px;font-size:12px;font-weight:700;color:#3f5a35}
body.ielts-dash-page .skill-garden .tree-growth-label{display:none}
/* Below: dashboard link, results wall, stats (once there is progress) and Pro, in one row */
body.ielts-dash-page .dash-more{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start;margin-top:26px}
body.ielts-dash-page .dash-more .dash-profile-entry{margin:0}
@media(max-width:1000px){body.ielts-dash-page .journeys{grid-template-columns:repeat(2,minmax(0,1fr))}body.ielts-dash-page .skill-garden .garden-beds{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  body.ielts-dash-page .dash-journey-hello .dash-otter{width:84px;height:94px}
  body.ielts-dash-page .journeys{gap:10px}
  body.ielts-dash-page .journey{padding:10px 10px 12px}
  body.ielts-dash-page .journey strong{font-size:15px}
  body.ielts-dash-page .journey small{display:none}
  body.ielts-dash-page .plant-banner{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:16px}
  body.ielts-dash-page .skill-garden .garden-beds{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:70px!important}
  body.ielts-dash-page .garden-plot{width:120px;height:130px}
}
@media(prefers-reduced-motion:reduce){body.ielts-dash-page .garden-plot .plot-plant,body.ielts-dash-page .journey-panel{animation:none}}
/* Polish: no ring in the journey card; plants stand on the meadow itself, the sign and status under them. */
body.ielts-dash-page .journey .dash-ring{display:none!important}
body.ielts-dash-page .skill-garden .garden-bed{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none}
body.ielts-dash-page .skill-garden .tree-status,body.ielts-dash-page .skill-garden .tree-progress-label{display:inline-block;padding:1px 8px;margin:4px 0 0;border-radius:999px!important;background:rgba(255,255,255,.85)}
body.ielts-dash-page .skill-garden .tree-progress{width:70%;margin:6px auto 0}
body.ielts-dash-page .skill-garden .garden-beds{row-gap:4px;padding-top:150px!important}
@media(max-width:640px){body.ielts-dash-page .skill-garden .garden-beds{padding-top:90px!important}}
/* "More" row: dashboard, results wall and Pro first; stats and the week chart under them once there is progress. */
body.ielts-dash-page .dash-more{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.ielts-dash-page .dash-more>.dash-profile-entry{order:1}body.ielts-dash-page .dash-more>.results-card,body.ielts-dash-page .dash-more>[class*="results"]{order:2}
body.ielts-dash-page .dash-more>.dash-promo{order:3;margin:0}
body.ielts-dash-page .dash-more>.dash-stats{order:4;margin:0}
body.ielts-dash-page .dash-more>.dash-chart-card{order:5;grid-column:span 2;margin:0}
@media(max-width:820px){body.ielts-dash-page .dash-more{grid-template-columns:1fr!important}body.ielts-dash-page .dash-more>.dash-chart-card{grid-column:auto}}
/* The choices always come first, at every width (the older skin moved the aside to the top on phones). */
body.ielts-dash-page .dash-shell>.dash-main{order:1!important}
body.ielts-dash-page .dash-shell>.dash-more{order:2!important}
/* The older otter-card rule kept the greeting 180px narrower than its row. */
body.ielts-dash-page .dash-journey-hello .dash-otter-copy{flex:1 1 0;min-width:0;width:auto!important}
@media(max-width:640px){body.ielts-dash-page .dash-journey-hello{gap:12px}body.ielts-dash-page .dash-otter-bubble{font-size:13px}body.ielts-dash-page .dash-journey-hello h1{font-size:25px}}
/* Exam predictions on the overview: one compact, scrollable row of month tiles (the full cards stay on hover/click). */
body.ielts-dash-page #journey-practice .prediction-intro{display:none}
body.ielts-dash-page #journey-practice .prediction-panel{padding:0;background:none;border:0}
body.ielts-dash-page #journey-practice .prediction-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);grid-template-columns:none;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
body.ielts-dash-page #journey-practice .prediction-card{scroll-snap-align:start;min-width:0}
body.ielts-dash-page #journey-practice .prediction-cover{min-height:0;padding:12px 14px}
body.ielts-dash-page #journey-practice .prediction-calendar{font-size:30px}
body.ielts-dash-page #journey-practice .prediction-cover-label,body.ielts-dash-page #journey-practice .prediction-card-body h3,body.ielts-dash-page #journey-practice .prediction-card-body p:not(.prediction-status){display:none}
body.ielts-dash-page #journey-practice .prediction-card-body{padding:8px 12px 12px}
body.ielts-dash-page #journey-practice .prediction-card-body a,body.ielts-dash-page #journey-practice .prediction-card-body .btn{padding:6px 10px;font-size:12px}
/* Older mobile rules capped the greeting at 60% width. */
body.ielts-dash-page .dash-journey-hello h1,body.ielts-dash-page .dash-journey-hello .dash-otter-bubble{max-width:none!important}
body.ielts-dash-page .dash-journeys>*,body.ielts-dash-page .journey-panel>*{min-width:0}
/* ── Garden as a real garden: each skill's tree stands at its own spot on the meadow, nearer trees larger. ── */
body.ielts-dash-page .skill-garden{background:#f4f8ec!important}
body.ielts-dash-page .skill-garden .garden-heading{background:none}
body.ielts-dash-page .skill-garden .garden-landscape{position:relative;padding:0 14px 14px}
body.ielts-dash-page .skill-garden .garden-beds{position:relative;display:block!important;margin:0;padding:0!important;list-style:none;aspect-ratio:16/9;
  background:url(/static/study-hub/garden-art/garden-meadow.webp) center/cover no-repeat;border-radius:20px!important;overflow:hidden}
body.ielts-dash-page .skill-garden .garden-bed{position:absolute!important;left:var(--x);top:var(--y);z-index:var(--z);width:200px;margin:0!important;padding:0!important;
  transform:translate(-50%,-100%) scale(var(--s));transform-origin:50% 100%}
body.ielts-dash-page [data-dash-skill="writing"]{--x:21%;--y:66%;--s:.66;--z:2}
body.ielts-dash-page [data-dash-skill="strategy"]{--x:41%;--y:57%;--s:.54;--z:1}
body.ielts-dash-page [data-dash-skill="grammar"]{--x:90%;--y:66%;--s:.68;--z:2}
body.ielts-dash-page [data-dash-skill="reading"]{--x:33%;--y:81%;--s:.84;--z:3}
body.ielts-dash-page [data-dash-skill="speaking"]{--x:63%;--y:84%;--s:.84;--z:3}
body.ielts-dash-page [data-dash-skill="listening"]{--x:14%;--y:98%;--s:1;--z:4}
body.ielts-dash-page [data-dash-skill="vocabulary"]{--x:83%;--y:98%;--s:1;--z:4}
/* The sign is a small wooden board under the tree: name and steps; the status shows only when the tree needs care. */
body.ielts-dash-page .skill-garden .garden-sign{order:2;width:auto!important;margin:-6px auto 0;padding:5px 12px!important;background:#fff8ec!important;border:2px solid #b98a55!important;
  border-radius:10px!important;box-shadow:0 4px 0 #8b6236!important;font-size:15px;color:#4a3216!important;white-space:nowrap}
body.ielts-dash-page .skill-garden .garden-sign .garden-enter{display:none}
body.ielts-dash-page .skill-garden .learning-tree{display:flex;flex-direction:column;align-items:center}
body.ielts-dash-page .skill-garden .tree-info{display:flex;flex-direction:column;align-items:center;gap:2px}
body.ielts-dash-page .skill-garden .tree-progress,body.ielts-dash-page .skill-garden .tree-status{display:none}
body.ielts-dash-page .skill-garden [data-tree-state="wilting"] .tree-status,body.ielts-dash-page .skill-garden [data-tree-state="yellow"] .tree-status,
body.ielts-dash-page .skill-garden [data-tree-state="dead"] .tree-status{display:inline-block;background:#fff3d6;color:#8a4b00;font-size:13px}
body.ielts-dash-page .skill-garden .tree-progress-label{font-size:13px;font-weight:700;color:#2f4a24}
body.ielts-dash-page .skill-garden .garden-bed:hover{z-index:9}
body.ielts-dash-page .skill-garden .garden-bed:hover .garden-plot{transform:translateY(-4px)}
body.ielts-dash-page .garden-plot{transition:transform .25s}
body.ielts-dash-page .garden-walk{display:none;margin:8px 4px 0;font-size:13px;color:#5b7552}
/* Phones: walk through the garden sideways. */
@media(max-width:760px){
  body.ielts-dash-page .skill-garden .garden-landscape{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  body.ielts-dash-page .skill-garden .garden-beds{width:900px;max-width:none}
  body.ielts-dash-page .garden-walk{display:block}
}
/* Tree, then its wooden sign, then the step count; larger trees so the garden reads at a glance. */
body.ielts-dash-page .skill-garden .garden-bed{display:flex!important;flex-direction:column;align-items:center}
body.ielts-dash-page .skill-garden .garden-bed .learning-tree{display:contents}
body.ielts-dash-page .skill-garden .garden-bed .tree-picture{order:1;height:190px}
body.ielts-dash-page .skill-garden .garden-bed .garden-sign{order:2}
body.ielts-dash-page .skill-garden .garden-bed .tree-info{order:3;margin-top:6px}
body.ielts-dash-page .skill-garden .garden-plot{width:190px;height:190px}
body.ielts-dash-page .skill-garden .garden-plot .plot-soil{width:150px;z-index:1}
body.ielts-dash-page .skill-garden .garden-plot[data-stage="0"] .plot-soil{width:140px}
body.ielts-dash-page .skill-garden .garden-plot .plot-plant{bottom:16px;z-index:2;filter:drop-shadow(0 3px 2px rgba(60,40,10,.25))}
body.ielts-dash-page .skill-garden .garden-plot[data-stage="1"] .plot-plant{height:86px}
body.ielts-dash-page .skill-garden .garden-plot[data-stage="2"] .plot-plant{height:116px}
body.ielts-dash-page .skill-garden .garden-plot[data-stage="3"] .plot-plant{height:150px}
body.ielts-dash-page .skill-garden .garden-plot[data-stage="4"] .plot-plant{height:170px}
body.ielts-dash-page .skill-garden .tree-progress-label{margin:0;padding:1px 10px;border-radius:999px!important;background:rgba(255,255,255,.88)}
body.ielts-dash-page [data-dash-skill="writing"]{--s:.62}body.ielts-dash-page [data-dash-skill="strategy"]{--s:.5}body.ielts-dash-page [data-dash-skill="grammar"]{--s:.64}
body.ielts-dash-page [data-dash-skill="reading"]{--s:.8}body.ielts-dash-page [data-dash-skill="speaking"]{--s:.8}
body.ielts-dash-page [data-dash-skill="listening"]{--s:.95}body.ielts-dash-page [data-dash-skill="vocabulary"]{--s:.95}
/* Real-tree claim: the name the team writes on the tree, and the learner's claimed trees */
body.ielts-dash-page .plant-claim{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:12px 0 4px;padding:14px;border-radius:16px;background:#fff;border:1px dashed #6fb46a}
body.ielts-dash-page .plant-claim[hidden]{display:none}
body.ielts-dash-page .plant-claim label{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;font-weight:600;color:#1f4a2a}
body.ielts-dash-page .plant-claim input{font:inherit;font-weight:500;padding:10px 12px;border-radius:12px;border:1px solid #c9dcc4;background:#fbfdf9;min-width:0}
body.ielts-dash-page .plant-claim input:focus{outline:2px solid #3f9b55;outline-offset:1px}
body.ielts-dash-page .plant-claim button{font:inherit;font-weight:700;padding:10px 18px;border-radius:999px;border:0;background:#2f8a46;color:#fff;cursor:pointer}
body.ielts-dash-page .plant-claim button:disabled{opacity:.6}
body.ielts-dash-page .plant-claim small{color:#a1361c;font-weight:500}
body.ielts-dash-page .plant-trees{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
body.ielts-dash-page .plant-trees[hidden]{display:none}
body.ielts-dash-page .plant-trees li{padding:6px 12px;border-radius:999px;background:#eaf5e4;color:#2b5233;font-size:14px}
body.ielts-dash-page .plant-claim,body.ielts-dash-page .plant-claim label{min-width:0;box-sizing:border-box}
body.ielts-dash-page .plant-claim input{width:100%;box-sizing:border-box}
@media(max-width:640px){body.ielts-dash-page .plant-claim label{flex-basis:100%}body.ielts-dash-page .plant-claim button{width:100%}}