.search-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; flex: none; }
.search-btn:hover { border-color: var(--brand); color: var(--brand); }
.search-btn kbd, .pal-foot kbd { font: inherit; font-size: 0.72rem; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink-3); }
.palette { width: min(620px, calc(100vw - 24px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(10, 30, 32, 0.35); overflow: hidden; }
.palette::backdrop { background: rgba(10, 30, 32, 0.45); backdrop-filter: blur(3px); }
.pal-top { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.palette input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 18px 20px; border: 0; background: transparent; color: inherit; outline: none; }
.pal-close { display: none; font: inherit; font-size: 1.6rem; line-height: 1; padding: 8px 16px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
body.pal-open { overflow: hidden; } /* the page behind the search must not scroll on touch screens */
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 440px); overflow-y: auto; }
.palette li > span:last-child { min-width: 0; }
.palette ul { overflow-x: hidden; }
.palette li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.palette li[aria-selected="true"], .palette li[data-i]:hover { background: rgba(15, 61, 62, 0.08); }
.palette li b { display: block; font-size: 0.95rem; }
.palette li small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.pal-kind { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pal-empty { display: block !important; color: var(--ink-3); cursor: default !important; }
.pal-status { margin: 0; padding: 12px 18px; color: var(--ink-2); }
.pal-status[hidden] { display: none; }
.pal-foot { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--ink-3); }
@media (max-width: 720px) {
  .search-btn span, .search-btn kbd, .pal-foot { display: none; }
  .search-btn { padding: 8px; }
  .palette { margin: 8px auto auto; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .palette input { font-size: 16px; padding: 14px 14px; } /* 16px stops iOS zooming the page when the field is focused */
  .pal-close { display: block; }
  .palette li { grid-template-columns: 62px minmax(0, 1fr); padding: 10px 10px; }
  .palette ul { max-height: calc(100dvh - 90px); }
  .pal-kind { font-size: 0.6rem; }
}

/* The first row has identical dimensions on every public page. */
.site-header .header-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"brand primary actions" ". tools .";align-items:center;column-gap:24px;row-gap:0;width:100%;max-width:1180px;height:auto;padding-top:10px;padding-bottom:10px}
.site-header .brand{grid-area:brand;justify-self:start}
.site-header .app-nav{display:contents}
.site-header .primary-links{grid-area:primary;justify-self:center;align-self:center;margin:0;width:max-content}
.site-header .header-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.site-header .account{display:flex;margin:0;flex:none}
.site-header .header-signin{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--brand);font:inherit;font-size:.86rem;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer}
.site-header .header-signin:hover{border-color:var(--brand);background:var(--tint)}
/* Signed in, the corner holds Dashboard: lit like the section tabs while it is open. */
.site-header .header-signin.on{border-color:var(--brand);background:var(--brand);color:#fff}
.site-header .search-btn{min-width:44px;min-height:44px;justify-content:center;text-decoration:none}
.site-header .sub-nav{grid-area:tools;justify-self:center;margin-top:8px}
@media(max-width:900px){
  .site-header .header-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "primary primary" "tools tools";column-gap:12px}
  .site-header .primary-links{margin-top:10px}
  .site-header .sub-nav{width:max-content;max-width:100%;margin-top:6px}
}
@media(max-width:360px){
  .site-header .header-row{column-gap:8px}
  .site-header .header-actions{gap:6px}
  .site-header .header-signin{padding-inline:10px}
}
@media(max-width:360px){
  .site-header .sub-nav{width:calc(100% + 16px);max-width:calc(100% + 16px)}
}
/* Reserve the scrollbar space so short pages do not shift the header sideways. */
html{scrollbar-gutter:stable}

/* Keep the app section switch on the first row, including narrow browser panes. */
.app .site-header .header-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"brand primary actions" "tools tools tools";column-gap:16px;row-gap:0;padding-top:8px;padding-bottom:8px}
.app .site-header .primary-links{margin-top:0;align-self:center}
.app .site-header .sub-nav{margin-top:4px}
@media(max-width:700px){
  .app .site-header .header-row{grid-template-columns:auto minmax(0,1fr) auto;column-gap:6px;padding-inline:12px}
  .app .site-header .brand-text{display:none}
  .app .site-header .brand img{width:34px;height:auto}
  .app .site-header .header-actions{gap:4px}
  .app .site-header .search-btn{min-width:36px;padding-inline:7px}
  .app .site-header .header-signin{font-size:.78rem;padding-inline:7px}
  .app .site-header .primary-links .top-btn{min-height:40px;display:flex;align-items:center;padding:8px}
}
@media(max-width:360px){
  .app .site-header .header-row{column-gap:4px;padding-inline:8px}
  .app .site-header .brand img{width:30px}
  .app .site-header .primary-links .top-btn{font-size:.75rem;padding-inline:6px}
}

/* The right corner is one button with a small menu: Sign in (Sign in or sign up, Pricing) or My account (who is signed in,
   My dashboard, the plan, Sign out). Phones also find Pricing under My Matric Map's More menu. The menu rules name
   .more-links so they outrank the menu's own link style (.app .more-links a), which kept Pricing in the menu on desktop. */
.site-header .nav-phone-only,.app .site-header .more-links a.nav-phone-only{display:none}
@media(max-width:480px){
  .site-header .nav-phone-only{display:block}
  .app .site-header .more-links a.nav-phone-only{display:flex}
}
.site-header .acct-menu{position:relative;margin:0;border:0}
.site-header .acct-menu summary{gap:6px;padding:8px 13px}
.site-header .acct-menu summary::after,.site-header .acct-menu[open] summary::after{content:none}
.site-header .acct-caret{transition:transform .15s}
.site-header .acct-menu[open] .acct-caret{transform:rotate(180deg)}
.site-header .acct-menu[open] summary{border-color:var(--brand)}
.site-header .acct-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;min-width:220px;max-width:min(300px,calc(100vw - 24px));padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);box-shadow:0 14px 40px rgba(10,30,32,.18)}
.site-header .acct-who{margin:0 0 4px;padding:8px 10px 10px;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--ink-2);overflow-wrap:anywhere}
.site-header .acct-who b{display:block;color:var(--ink);font-size:.86rem}
.site-header .acct-pop a,.site-header .acct-pop .acct-out{display:block;padding:10px;border:0;border-radius:8px;background:none;color:var(--brand);font:inherit;font-size:.9rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.site-header .acct-pop a:hover,.site-header .acct-pop .acct-out:hover,.site-header .acct-pop a.on{background:var(--tint)}
@media(max-width:480px){.site-header .acct-caret{display:none}.site-header .acct-menu summary{padding-inline:10px}}
@media(max-width:380px){.site-header .acct-word{display:none}.site-header .acct-menu summary{min-width:40px;padding-inline:9px}}
@media(min-width:481px){#sub-nav-plan.on-pricing{display:none}}

/* Our sources sits in the right corner's menu, like Pricing: on its page the row under the tabs is empty. */
#sub-nav-plan.on-sources{display:none}

/* Outside the app (the home page and the Predictor pages) the banner is one row at every width: the logo, Tools | My Matric Map |
   Predictor, search and Sign in. */
:is(.home-v2,.predictor-page) .site-header .header-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand primary actions";column-gap:12px}
:is(.home-v2,.predictor-page) .site-header .primary-links{margin-top:0;justify-self:center}
@media(max-width:1099px){
  :is(.home-v2,.predictor-page) .site-header :is(.brand-text,.search-btn span,.search-btn kbd){display:none}
  :is(.home-v2,.predictor-page) .site-header .search-btn{min-width:44px;padding:8px}
}
@media(max-width:700px){
  :is(.home-v2,.predictor-page) .site-header .header-row{column-gap:6px;padding-inline:10px}
  :is(.home-v2,.predictor-page) .site-header .brand img{width:32px;height:auto}
  :is(.home-v2,.predictor-page) .site-header .primary-links .top-btn{padding:8px 8px;font-size:.8rem}
  :is(.home-v2,.predictor-page) .site-header .header-actions{gap:4px}
  :is(.home-v2,.predictor-page) .site-header .search-btn{min-width:40px;min-height:40px;padding:0}
  :is(.home-v2,.predictor-page) .site-header :is(.acct-word,.acct-caret){display:none}
  :is(.home-v2,.predictor-page) .site-header .acct-menu summary{min-width:40px;min-height:40px;padding:0 9px}
}
/* Phones: the logo gives way, as in the app (where it is in the ☰ menu), so the three tabs keep their full names; on the
   smallest phones search gives way too (inside the site it is in the ☰ menu). */
@media(max-width:413px){
  :is(.home-v2,.predictor-page) .site-header .header-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"primary actions"}
  :is(.home-v2,.predictor-page) .site-header .brand{display:none}
}
@media(max-width:374px){
  :is(.home-v2,.predictor-page) .site-header .primary-links .top-btn{padding-inline:6px;font-size:.74rem}
}
@media(max-width:340px){
  :is(.home-v2,.predictor-page) .site-header .search-btn{display:none}
}

/* Round 3: results grouped under one small heading per kind; each row is the name and a one-line description. */
.palette li[data-i] { grid-template-columns: minmax(0, 1fr); padding: 8px 12px; }
.palette li[data-i] small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette li.pal-group { display: block; padding: 10px 12px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); cursor: default; }
.palette li.pal-group:first-child { padding-top: 4px; }

/* Phones and tablets (below the side rail's 1100px): one row like desktop, ☰ · Tools | My Matric Map | Predictor · Sign in or
   My account. The sub-menu row gives way to the ☰ menu (initDrawer in js/app.js): the side rail's links, with search on top. */
.app .site-header .head-left{grid-area:brand;justify-self:start;display:flex;align-items:center;gap:8px;min-width:0}
.nav-burger{display:none}
@media(max-width:1099px){
  .nav-burger{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--brand);cursor:pointer}
  .nav-burger:hover{border-color:var(--brand)}
  .app .site-header #sub-nav,.app .site-header #sub-nav-plan{display:none}
  .app .site-header .brand-text,.app .site-header .search-btn span,.app .site-header .search-btn kbd{display:none} /* tablets: room for the three tabs */
  .app .site-header .search-btn{min-width:44px;padding:8px}
}
@media(max-width:700px){
  .app .site-header .header-row{padding-bottom:8px}
  .app .site-header .brand,.app .site-header .search-btn{display:none} /* the logo and search live in the ☰ menu */
  .nav-burger{width:40px;height:40px}
  .app .site-header .acct-word,.app .site-header .acct-caret{display:none}
  .app .site-header .acct-menu summary{min-width:40px;min-height:40px;padding:0 9px}
  .app .site-header .primary-links .top-btn{padding-inline:9px;font-size:.8rem}
}
@media(max-width:360px){
  .nav-burger,.app .site-header .acct-menu summary{width:36px;min-width:36px;height:36px;min-height:36px}
  .app .site-header .primary-links .top-btn{padding-inline:6px;font-size:.74rem}
}
@media(max-width:374px){
  .app .site-header .primary-links .top-btn{padding-inline:6px;font-size:.74rem} /* room for Predictor, the longest tab */
}
@media(max-width:340px){
  .app .site-header .header-row{padding-inline:6px}
  .app .site-header .primary-links .top-btn{padding-inline:5px}
}
/* The docked steps line, as a strip under the one-row header */
.site-header.steps-strip .header-steps{background:var(--paper);border-bottom:1px solid var(--line)}

/* The ☰ menu: a panel from the left */
.nav-drawer{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);max-width:none;height:100dvh;max-height:none;margin:0;padding:14px 12px 24px;border:0;border-radius:0 18px 18px 0;background:var(--paper);color:var(--ink);overflow-y:auto;box-shadow:12px 0 40px rgba(10,30,32,.3)}
.nav-drawer::backdrop{background:rgba(10,30,32,.45)}
.nav-drawer[open]{animation:nd-in .18s ease-out}
@keyframes nd-in{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.nav-drawer[open]{animation:none}}
.nd-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.nd-top .brand{display:flex;align-items:center;gap:8px}
.nd-close{width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:400 1.8rem/1 var(--font);cursor:pointer}
.nd-close:hover{background:var(--tint)}
.nd-search{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin:0 0 10px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.nd-search:hover{border-color:var(--brand)}
/* Three sections, each its own card with an icon and a title: Tools (in its groups), My Matric Map, About MatricMap */
.nd-links{display:grid;gap:12px}
.nd-sec{display:grid;gap:1px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.nd-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px;padding:6px 6px 8px;border-bottom:1px solid var(--line)}
.nd-title h2{display:flex;align-items:center;gap:10px;margin:0;color:var(--brand);font:800 1.02rem/1.2 var(--font)}
.nd-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--accent)}
.nav-drawer details.nd-group{display:grid;gap:1px;margin:0;border:0}
.nav-drawer details.nd-group+details.nd-group{border-top:1px dashed var(--line)}
.nd-h{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 10px;border-radius:10px;color:var(--ink);font:700 .95rem/1.2 var(--font);cursor:pointer;list-style:none}
.nd-h::-webkit-details-marker{display:none}
.nd-h small{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--tint);color:var(--ink-3);font-size:.72rem;font-weight:800;text-align:center}
.nd-h::after{content:"";flex:none;width:8px;height:8px;margin:0 2px 3px 2px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
details[open]>.nd-h::after{content:"";transform:rotate(-135deg);margin-bottom:-3px}
.nd-h:hover{background:var(--tint)}
details.nd-group[open]{padding-bottom:6px}
details.nd-group>a{margin-left:12px;border-left:2px solid var(--line);border-radius:0 10px 10px 0}
.nd-links a{display:flex;align-items:center;min-height:40px;padding:6px 10px;border-radius:10px;color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none}
.nd-links a:hover{background:var(--tint)}
.nd-links .nd-title a.nd-all{min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--brand);font-size:.8rem;font-weight:700}
.nd-links a.on,.nd-links a[aria-current="page"],.nd-links details.nd-group>a[aria-current="page"],.nd-links .nd-title a.nd-all[aria-current="page"]{background:var(--brand);color:#fff;border-color:var(--brand)}