/*
 * Compass Pro support portal shell.
 * Loads only on portal views (see inc/portal.php). Tokens, buttons (.btn, .btn-primary,
 * .btn-ghost), page hero, FAQ and TOC styles all come from style.css. Nothing here
 * redefines a button, so buttons stay identical across the site and the portal.
 * Spacing uses the 8 px scale: 8, 16, 24, 32, 48.
 */

.cmpp-portal :focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Skip link */
.cmpp-skip{position:absolute;left:16px;top:-80px;z-index:1300;background:var(--ink);color:#fff;padding:8px 16px;border-radius:11px}
.cmpp-skip:focus{top:8px}

/* Pills */
.cmpp-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 12px;border-radius:999px;background:var(--paper-2);
  color:var(--ink);font:600 .8rem/1.6 "Inter",system-ui,sans-serif;white-space:nowrap}
.cmpp-pill--cust{background:rgba(122,51,201,.12)}
.cmpp-pill svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Top bar: layout, brand, menu and burger come from style.css (same as the public header). */
.cmpp-top .menu a{display:inline-flex;align-items:center;min-height:44px}
.cmpp-user{display:flex;align-items:center;gap:12px}
.cmpp-avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;
  font:700 .9rem "Sora",sans-serif;display:grid;place-items:center;flex:none}
.cmpp-user-name{font:600 .95rem/1.3 "Sora",sans-serif;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1100px){.cmpp-user-name{display:none}}

/* Breadcrumb current page */
.crumbs .cmpp-crumb-current{color:var(--ink-soft)}

/* Layout */
.cmpp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.cmpp-grid--solo{grid-template-columns:minmax(0,1fr)}
.cmpp-guide-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.cmpp-guide-grid>.prose{max-width:none;margin:0}
.cmpp-side{display:grid;gap:24px}
.cmpp-guide-grid .cmpp-side{position:sticky;top:96px}
@media(max-width:980px){
  .cmpp-grid,.cmpp-guide-grid{grid-template-columns:minmax(0,1fr)}
  .cmpp-guide-grid .cmpp-side{position:static}
  .cmpp-guide-grid{gap:32px}
}

/* Cards and lists */
.cmpp-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:24px}
.cmpp-card h2,.cmpp-card h3{font-size:1.1rem;line-height:1.3;margin:0 0 8px}
.cmpp-card p{color:var(--ink-soft);font-size:1rem;margin:0 0 16px}
.cmpp-card p:last-child{margin-bottom:0}
.cmpp-card .btn{justify-content:center;width:100%}
.cmpp-card .toc{position:static;font-size:1rem;display:block}
.cmpp-links{list-style:none;margin:0;padding:0}
.cmpp-links li+li{border-top:1px solid var(--line)}
.cmpp-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 0;color:var(--ink);font-weight:500}
.cmpp-links a:hover{color:var(--violet)}

/* Guide article */
.cmpp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:24px;color:var(--muted);font-size:.95rem}

/* FAQ extras */
.qa summary .cmpp-pill{margin-left:8px}
.cmpp-relguides{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:16px;padding:16px 24px;
  border-radius:14px;background:var(--grad-soft);border:1px solid var(--line)}
.cmpp-relguides strong{font:700 .95rem "Sora",sans-serif}
.cmpp-relguides a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--violet);text-decoration:underline}
.cmpp-relguides a:hover{color:var(--ink)}

/* Sign-in notice */
.cmpp-notice{margin-bottom:32px;padding:16px 24px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line)}
.cmpp-notice p{color:var(--ink);font-size:1rem}
.cmpp-notice a{display:inline-flex;align-items:center;min-height:24px;font-weight:600;color:var(--violet);text-decoration:underline}
.cmpp-notice a:hover{color:var(--ink)}

/* Footer */
.cmpp-foot{padding:24px 0}
.cmpp-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;color:var(--muted);font-size:.95rem}
.cmpp-foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.cmpp-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft)}
.cmpp-foot nav a:hover{color:var(--violet)}

/* Screen-reader text */
.cmpp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/*
 * Account strip from [compass_support_header] (mu-plugin). The top bar already shows who is
 * signed in and the Log out button, and the menu already links FAQ and User guide. Hide those
 * parts here and keep the ticket quota. CSS keeps this working after the quota refresh, which
 * re-renders the strip. Specificity matches the mu-plugin rules plus one class.
 */
body.cmpp-portal.compass-support-portal .compass-sb-header .compass-sb-user,
body.cmpp-portal.compass-support-portal .compass-sb-header .compass-sb-actions{display:none}
body.cmpp-portal.compass-support-portal .compass-sb-header .compass-sb-quota{padding-left:0;border-left:0}
body.cmpp-portal.compass-support-portal .compass-sb-header:not(:has(.compass-sb-quota)){display:none}

/* Empty list message (FAQ and guide index) */
.cmpp-empty{padding:24px 0;color:var(--ink-soft);font-size:1.05rem}

.cmpp-package h3 { margin: 16px 0 8px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #3a3f5c; }
.cmpp-package__plan { margin: 0 0 16px; font-weight: 700; font-size: 1.25rem; color: #0E1230; }
.cmpp-package__limits { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.cmpp-package__limits dt { color: #3a3f5c; }
.cmpp-package__limits dd { margin: 0; font-weight: 600; color: #0E1230; text-align: right; }
.cmpp-package__list { margin: 0; padding-left: 20px; }
.cmpp-package__list li { margin: 4px 0; }