/* One SUSULAND logo on every page: the sprout and the teal wordmark used on the island map.
   Where the header sits on a painted scene (Nhà Đọc, Nhà Viết, Hồ sơ, Giáo viên, trang chào) the logo gets a white pill
   so it stays readable. Loaded last on each page (and bundled for index.html); !important wins over older page styles. */
:root{--brand-ink:#147d93}

/* Island pages and Bài 36: <button class="wordmark"><span>✦</span><b>SUSULAND<small>…</small></b></button> */
.topbar .wordmark>span{display:grid!important;place-items:center;width:36px!important;height:36px!important;min-width:36px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:0!important;color:inherit}
.topbar .wordmark>span:after{content:'🌱';font-size:30px}
.topbar .wordmark>b{font-family:'Susu',sans-serif!important;font-size:20px!important;font-weight:700;letter-spacing:.01em!important;color:var(--brand-ink)!important;text-shadow:0 2px #fff}
.topbar .wordmark small{display:none!important}

/* Linked pages: <a class="brand">🌱 SUSULAND <span>· Nhà Đọc</span></a> and the welcome page's brand link */
.topbar>a.brand,.welcome-brand{display:inline-flex!important;align-items:center;gap:6px!important;min-height:44px;padding:6px 16px!important;border:2px solid #fff;border-radius:22px!important;background:#fffdf4f2!important;box-shadow:0 4px 14px #1d4a3a26!important;font-family:'Susu',sans-serif!important;font-size:20px!important;font-weight:700!important;letter-spacing:.01em!important;color:var(--brand-ink)!important;text-decoration:none;text-shadow:none!important;white-space:nowrap}
.topbar>a.brand span{display:inline!important;font-size:.8em;font-weight:600;color:#2f5a48}
.welcome-brand>span{font-size:24px!important}

@media (max-width:520px){
  .topbar .wordmark>b,.topbar>a.brand,.welcome-brand{font-size:16px!important}
  .topbar>a.brand{padding:5px 12px!important}
  /* Keep logo and buttons on one row, as on the island map; the page name next to the logo makes it too wide. */
  .topbar>a.brand span,.topbar .lesson-label{display:none!important}
  .topbar:has(>.wordmark){flex-wrap:nowrap!important;gap:6px!important}
  .topbar>.wordmark{flex:1 1 auto!important;min-width:0!important;gap:5px!important;padding:0!important}
  .topbar .wordmark>span{width:28px!important;height:28px!important;min-width:28px!important}
  .topbar .wordmark>span:after{font-size:24px}
  .topbar .wordmark>b{font-size:15px!important}
  .topbar:has(>.wordmark) .top-actions{flex:none!important;flex-wrap:nowrap!important;gap:4px!important}
}