/* Public chrome: same outer grid, brand and controls as the deployed homepage. */
.public-page > .wrap, .reader-page > .wrap {
  max-width: var(--page-width); padding-inline: var(--page-gutter);
}
.public-page .shell, .reader-page .share-bar {
  min-height: 104px; margin: 0; padding: 20px 0; gap: 24px;
  border-bottom: 1px solid var(--hairline); font: 13px/1.5 var(--sans);
}
.public-page .shell .mark, .reader-page .share-mark {
  font: 700 28px/1 var(--sans); gap: 10px; letter-spacing: 0;
}
.public-page .shell .mark svg, .reader-page .share-mark svg { width: 29px; height: 29px; }
.public-page .shell nav { display:flex; flex-wrap:wrap; gap:26px; margin-left:auto; }
.public-page .shell nav a { letter-spacing:0; padding:12px 0; margin:0; }
.public-page .shell #lang-slot { margin-left:0; }
.public-page .shell .mode-btn, .reader-page .mode-btn {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; padding:0; border:1px solid var(--line);
  border-radius:var(--radius-control); color:var(--meta); background:transparent;
}
.public-page select.lang-picker, .reader-page select.lang-picker {
  min-height:44px; max-width:100%; padding:8px; font:13px var(--sans);
  border:1px solid var(--line); border-radius:var(--radius-control);
  color:var(--meta); background:var(--panel);
}
.public-page :focus-visible, .reader-page :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.public-page .page-head { padding:56px 0 28px; }
.public-page .page-head h1 { font-size:clamp(32px,4.1vw,52px); font-weight:400; line-height:1.22; letter-spacing:-.025em; max-width:24ch; }
.public-page .page-head > p { margin-top:16px; max-width:62ch; color:var(--meta); }
.public-page .legal-nav { border-top:1px solid var(--hairline); padding:24px 0; flex-wrap:wrap; }
.public-page .legal-nav a, .public-page main p a { text-decoration:underline; text-underline-offset:4px; }
.public-page .legal-nav a:hover, .public-page main a:hover { color:var(--accent); }
/* Connect is a task page; client choice precedes supporting background. */
.connect-page .legal > main { max-width:none; }
.connect-page .legal .page-head { max-width:var(--reading-width); }
.connect-page .legal .page-head p { opacity:1; }
.connect-page .mcp-hero { max-width:var(--reading-width); margin:0 0 32px; padding:22px 24px; border-color:var(--line); }
.connect-page .mh-label { font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:var(--meta); }
.connect-page .legal .mh-url { font-size:clamp(17px,3.6vw,23px); overflow-wrap:anywhere; }
.connect-page .mh-copy { min-height:48px; border-radius:var(--radius-control); background:var(--btn-top); color:var(--btn-ink); }
.connect-page .pick-label { font-family:var(--sans); color:var(--meta); font-size:13px; letter-spacing:.06em; margin:0 0 12px; }
.connect-page .agent-grid { max-width:var(--reading-width); gap:10px; margin-bottom:36px; }
.connect-page .agent-card { min-height:88px; border-radius:var(--radius-control); background:transparent; border-color:var(--line); padding:16px; }
.connect-page .agent-card[aria-selected="true"] { background:var(--panel); border-color:var(--accent); box-shadow:inset 0 -2px var(--accent); }
.connect-page .ac-name { font-family:var(--sans); }
.connect-page .ac-tag { letter-spacing:.04em; }
.connect-page .agent-panel { max-width:var(--reading-width); scroll-margin-top:24px; }
.connect-page .legal h2 { font-family:var(--heading-font); font-size:28px; font-weight:400; margin:32px 0 12px; }
.connect-page .legal h3 { font-size:18px; font-weight:600; }
.connect-page .legal p, .connect-page .legal li { opacity:1; }
.connect-page .legal .official, .connect-page .legal figcaption { color:var(--meta); opacity:1; }
.connect-page .setup-details { max-width:var(--reading-width); border-block:1px solid var(--hairline); margin-top:44px; padding:20px 0; }
.connect-page .setup-details > summary { cursor:pointer; font-size:15px; color:var(--meta); }
.connect-page .fact-grid { margin-top:24px; }
.connect-page .callout { font-size:13px; line-height:1.8; color:var(--meta); border-left-color:var(--accent); }
.connect-page .tr-list { max-width:var(--reading-width); }
.connect-page .legal > .legal-nav { max-width:none; margin-top:48px; }
/* Authentication uses shared form controls, with a quiet, dedicated page layout. */
.signin-page .signin { padding-bottom:0; }
.signin-page .signin #login { padding:56px 0 80px; align-items:flex-start; }
.signin-page #login .card { max-width:440px; padding:32px; background:var(--panel); border-color:var(--line); }
.signin-page #login h1 { font:400 32px/1.25 var(--heading-font); margin:0 0 16px; }
.signin-page #login .hint { line-height:1.8; }
.signin-page #login input { font-family:var(--sans); min-height:48px; }
.signin-page #submit { width:100%; }
.signin-page #login .login-terms { color:var(--meta); line-height:1.7; }
.signin-page #login .login-terms a { color:var(--text); }
/* The worked example shares the same public header and language tools. */
.worked-page main.legal { max-width:var(--reading-width); padding-bottom:72px; }
.worked-page .page-head h1 { max-width:none; font-size:clamp(32px,3.4vw,44px); }
.worked-page .g-kicker { font-family:var(--sans); letter-spacing:.08em; }
.worked-page .g-meta { font-family:var(--sans); letter-spacing:0; text-transform:none; }
.worked-page .legal p { opacity:1; }
@media (max-width:720px) {
  .public-page .shell, .reader-page .share-bar { min-height:88px; gap:12px; padding-block:18px; flex-wrap:wrap; }
  .public-page .shell .mark, .reader-page .share-mark { font-size:24px; }
  .public-page .shell .mark svg, .reader-page .share-mark svg { width:25px; height:25px; }
  .public-page .shell nav { order:0; flex-basis:auto; gap:14px; font-size:12px; }
  .public-page .shell > .mode { display:inline-flex; }
  .public-page .shell select.lang-picker { max-width:86px; }
  .public-page .shell #lang-slot { margin-left:auto; }
  .public-page .page-head { padding-top:32px; }
  .public-page .page-head h1 { font-size:34px; }
  .connect-page .agent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .connect-page .agent-card { padding:12px; }
  .connect-page .mcp-hero { padding:18px; gap:16px; }
  .signin-page .signin #login { padding-top:32px; }
  .signin-page #login .card { padding:24px 20px; }
}
.connect-page .ac-top { flex-wrap:wrap; justify-content:flex-start; }
.connect-page .ac-name { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.connect-page .ac-tag { flex:none; }

/* The shared icon wrapper replaces the previous wide form selects. */
.public-page .shell .preference-control:not(.preference-labeled), .reader-page .preference-control:not(.preference-labeled) {
  width:44px; min-width:44px; padding:0; border:0; background:transparent;
}