/* Beginner guide layer (guide_ui.js, EASE_OF_USE_REVIEW.md). Grove only: every colour from --ui-* tokens. */
.sdg-expert-hidden{display:none!important}

/* Welcome on Home */
.sdg-welcome{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--ui-gap,20px);border-color:color-mix(in srgb,var(--ui-accent) 45%,var(--ui-card-line))}
.sdg-welcome h2{margin:4px 0 10px;font-size:20px;line-height:1.3;color:var(--ui-title)}
.sdg-welcome h3{margin:0 0 10px;font-size:15px;color:var(--ui-title)}
.sdg-welcome ul{margin:0;padding-left:18px;color:var(--ui-muted);line-height:1.6}
.sdg-welcome ul b{color:var(--ui-ink)}
.sdg-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sdg-path,.sdg-template{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border-radius:var(--ui-radius-md,12px);border:1px solid var(--ui-card-line);background:var(--ui-field);color:var(--ui-ink);font:inherit;cursor:pointer;min-height:44px}
.sdg-path b,.sdg-template b{color:var(--ui-title);font-size:14px}
.sdg-path span,.sdg-template-text,.sdg-template-style{color:var(--ui-muted);font-size:13px;line-height:1.45}
.sdg-path:hover,.sdg-template:hover{border-color:var(--ui-accent)}
.sdg-path:focus-visible,.sdg-template:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.sdg-path-line{margin:0 0 10px;color:var(--ui-muted);font-size:13px}
.sdg-path-line .ui-button{min-height:28px;padding:2px 10px}

/* Practice data, practice account, draft restore */
.sdg-practice,.sdg-account,.sdg-draft{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border-radius:var(--ui-radius-md,12px);border:1px dashed color-mix(in srgb,var(--ui-accent) 55%,var(--ui-card-line));background:color-mix(in srgb,var(--ui-accent) 6%,transparent)}
.sdg-practice>div,.sdg-draft>div:first-child{display:flex;flex-direction:column;gap:3px;flex:1 1 260px}
.sdg-practice span,.sdg-draft span{color:var(--ui-muted);font-size:13px;line-height:1.45}
.sdg-practice-compact{margin-top:18px}
.sdg-account p{margin:0;flex:1 1 220px;font-size:13px;color:var(--ui-muted)}
.sdg-account p b{color:var(--ui-ink)}

/* Template gallery */
.sdg-gallery{margin:0 0 var(--ui-gap,20px)}
.sdg-gallery-head{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.sdg-gallery-head h2{margin:0;font-size:18px;color:var(--ui-title)}
.sdg-gallery-head p{margin:4px 0 0;color:var(--ui-muted);font-size:13px}
.sdg-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.sdg-template[aria-pressed=true]{border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent) inset}
.sdg-template-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.sdg-level{flex:none;font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--ui-radius-pill,999px);border:1px solid var(--ui-card-line);color:var(--ui-muted)}
.sdg-level[data-level=Beginner]{color:var(--ui-ok);border-color:color-mix(in srgb,var(--ui-ok) 50%,transparent)}
.sdg-level[data-level=Intermediate]{color:var(--ui-warn);border-color:color-mix(in srgb,var(--ui-warn) 50%,transparent)}
.sdg-template-style{font-weight:600;color:var(--ui-ink)}
.sdg-gallery-more{margin-top:12px}
.sdg-gallery-more>summary{cursor:pointer;color:var(--ui-muted);font-size:13px;margin-bottom:10px}
.sdg-words{margin:0 0 8px;padding-left:18px;line-height:1.55}
.sdg-ai-hint{margin:0 16px 12px;padding:10px 12px;border-radius:var(--ui-radius-sm,8px);background:color-mix(in srgb,var(--ui-accent) 7%,transparent);font-size:13px}

/* Explain this result */
.sdg-explain{margin:0 0 var(--ui-gap,20px)}
.sdg-explain>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.sdg-explain>summary::-webkit-details-marker{display:none}
.sdg-explain>summary::before{content:'▸';color:var(--ui-accent)}
.sdg-explain[open]>summary::before{content:'▾'}
.sdg-explain>summary span{display:flex;flex-direction:column;gap:2px}
.sdg-explain>summary b{font-size:16px;color:var(--ui-title)}
.sdg-explain>summary small{color:var(--ui-muted);font-size:13px}
.sdg-explain-body{margin-top:14px}
.sdg-explain-why{padding:10px 12px;border-radius:var(--ui-radius-sm,8px);background:color-mix(in srgb,var(--ui-warn) 8%,transparent);border-left:3px solid var(--ui-warn);margin-bottom:12px}
.sdg-explain-why ul{margin:6px 0 0;padding-left:18px;line-height:1.5}
.sdg-explain-list{margin:0;display:grid;gap:8px}
.sdg-explain-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--ui-line)}
.sdg-explain-row dt{display:flex;flex-direction:column;gap:2px}
.sdg-explain-value{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700;color:var(--ui-title)}
.sdg-explain-row dd{margin:0;display:flex;flex-direction:column;gap:3px}
.sdg-explain-judge{font-weight:600}
.sdg-explain-row[data-tone=up] .sdg-explain-judge{color:var(--ui-up)}
.sdg-explain-row[data-tone=down] .sdg-explain-judge{color:var(--ui-down)}
.sdg-explain-row[data-tone=warn] .sdg-explain-judge{color:var(--ui-warn)}
.sdg-explain-means{color:var(--ui-muted);font-size:13px}
.sdg-explain-next{margin-top:12px;padding-top:12px;border-top:1px solid var(--ui-line)}
.sdg-vexplain{margin:0 0 12px;padding:12px 14px;border-radius:var(--ui-radius-md,12px);border:1px solid var(--ui-card-line);background:var(--ui-field)}
.sdg-vexplain[data-tone=down]{border-left:3px solid var(--ui-down)}
.sdg-vexplain[data-tone=up]{border-left:3px solid var(--ui-up)}
.sdg-vexplain[data-tone=warn]{border-left:3px solid var(--ui-warn)}
.sdg-vexplain p{margin:6px 0 0;line-height:1.5}

/* Simple / All options */
.sdg-simple-toggle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:8px 12px;border-radius:var(--ui-radius-sm,8px);background:var(--ui-field);font-size:13px}
.sdg-simple-toggle .ui-button{min-height:30px;padding:3px 12px}
.sdg-simple-toggle small{color:var(--ui-muted);flex:1 1 180px}

/* Tours */
.sdg-tour-offer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px;font-size:13px;color:var(--ui-muted)}
.sdg-tour-offer>span:first-child{color:var(--ui-accent)}
.sdg-tour-offer .ui-button{min-height:30px;padding:3px 10px}
.sdg-tour{position:fixed;z-index:60;padding:14px 16px;border-radius:var(--ui-radius-md,12px);background:var(--ui-card);border:1px solid var(--ui-accent);box-shadow:var(--ui-shadow,0 12px 32px rgba(0,0,0,.45));color:var(--ui-ink)}
.sdg-tour h2{margin:2px 0 6px;font-size:16px;color:var(--ui-title)}
.sdg-tour p{margin:0 0 10px;line-height:1.5;font-size:14px}
.sdg-tour .sdg-tour-count{margin:0;font-size:12px;color:var(--ui-muted)}
.sdg-tour .ui-actions{justify-content:flex-end;margin:0}
.sdg-tour-target{outline:2px solid var(--ui-accent)!important;outline-offset:4px;border-radius:var(--ui-radius-sm,8px)}

@media (max-width:760px){
  .sdg-welcome{grid-template-columns:1fr}
  .sdg-welcome ul{display:none} /* Phones: the headline says it; the paths come sooner. */
  .sdg-paths{grid-template-columns:1fr}
  .sdg-explain-row{grid-template-columns:1fr;gap:4px}
}