/* Shared chrome across public, account, administration and editor pages. */
.preview-header.site-header, .studio-workspace .preview-header.app-header {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px 28px; height:auto; min-height:72px; padding:13px 28px;
  background:#eaf5fc; border-bottom:1px solid #d6e8f4; color:#182536;
}
.preview-header .studio-brand {display:flex; margin:0; flex-shrink:0}
.preview-header .studio-brand-lockup {display:block; width:200px; height:68px}
.preview-header nav, .preview-header .app-navigation {
  display:flex; align-items:center; align-self:center; flex-wrap:wrap; gap:8px; margin:0; padding:0;
}
.preview-header nav > a {display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid #c5ddec; border-radius:7px; background:#fff; font:inherit; font-size:15px; text-decoration:none; color:#24425c}
.preview-header nav > a[aria-current=page] {background:#d5eafa; border-color:#78b7df; color:#125b89; font-weight:650}
.preview-header nav > a:hover {background:#f3faff; border-color:#8cbddc; text-decoration:none}
.preview-header nav > a[aria-current=page]:hover {background:#c9e4f7}
.preview-footer a:hover {text-decoration:underline}
.preview-header .preview-account, .preview-header .account-menu > summary, .preview-footer .preview-account {
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:44px; height:44px; min-height:44px; padding:6px; border:1px solid #bdd5e6; border-radius:50%; background:#fff; cursor:pointer;
}
.preview-account img, .preview-header .account-menu img {width:30px; height:30px; margin:0}
.preview-header .account-menu {margin:0}
.preview-header .account-menu > summary {list-style:none}
.preview-header .account-menu > summary::-webkit-details-marker {display:none}
.preview-header .account-popover {top:48px}
.preview-header a:focus-visible, .preview-header summary:focus-visible, .preview-footer a:focus-visible {outline:3px solid #0784ca; outline-offset:3px}
.preview-footer {display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px 32px; padding:32px 28px; margin-top:48px; border-top:1px solid #d6e8f4; background:#eaf5fc; color:#24425c}
.preview-footer-links {display:flex; flex-direction:column; gap:8px; min-width:0}
.preview-footer .preview-credit {align-self:flex-start; font-size:13px; line-height:1.5; color:#526579; padding:4px 0; text-decoration:none}
.preview-footer-brand {display:flex; flex-shrink:0; margin-left:auto}
.preview-footer-brand img {display:block; width:200px; height:68px}
.preview-footer nav {display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; margin:0}
.preview-footer nav > a {display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:inherit; text-decoration:none}
.preview-footer a[aria-current=page] {font-weight:650; text-decoration:underline}
.studio-workspace > .preview-footer {flex-shrink:0; margin:0; padding:13px 28px; gap:8px 20px}
.studio-workspace > .preview-footer a {font-size:12px}
.guide-embedded > .preview-footer {display:none}
.preview-document {min-height:100dvh; display:flex; flex-direction:column; background:#f7fafc}
.preview-page {width:100%; box-sizing:border-box; max-width:1040px; margin:0 auto; padding:56px 32px 24px; line-height:1.65; font-size:16px; flex:1}
.page-intro {max-width:720px; margin-bottom:32px}
.preview-page h1 {font-family:Georgia,serif; font-size:clamp(32px,3.5vw,42px); font-weight:500; letter-spacing:-1px; line-height:1.15; margin:0 0 16px; color:#172033}
.page-intro > p {font-size:18px; color:#526579; margin:0}
.preview-document > .preview-footer {margin-top:32px}
@media(max-width:700px) {
  .preview-header.site-header, .studio-workspace .preview-header.app-header {padding:8px 16px; gap:8px 16px}
  .preview-header nav, .preview-header .app-navigation {gap:4px; width:100%; justify-content:space-between}
  .preview-header nav > a {font-size:14px; padding-inline:8px}
  .preview-footer {padding:28px 16px; gap:24px; align-items:flex-end}
  .preview-footer-links {width:100%}
  .preview-footer nav {width:100%; justify-content:space-between}
  .preview-footer-brand {margin-left:auto}
  .studio-workspace > .preview-footer .preview-footer-brand img {width:140px; height:auto}
  .studio-workspace > .preview-footer {padding:6px 16px}
  .preview-footer nav {gap:8px}
  .preview-footer nav > a {font-size:14px}
  .preview-page {padding:36px 20px 20px}
}
@media print {.preview-header,.preview-footer {display:none!important}}

/* Tools and Account share the public reading-page frame. */
.preview-account[aria-current=page] {background:#d5eafa;border-color:#78b7df}
.account-page .account-auth {max-width:480px;width:100%;min-width:0}
.account-page form {box-sizing:border-box;width:100%;max-width:480px;margin:0 0 24px;padding:28px;border:1px solid #d9e5ee;border-radius:8px;background:#fff}
.account-page form h2 {font-size:22px;letter-spacing:-.4px;line-height:1.25;margin:0 0 20px}
.account-page label {font-size:14px;color:#253f58;margin:0 0 18px}
.account-page input:not([type=checkbox]) {box-sizing:border-box;width:100%;max-width:none;min-height:44px;border:1px solid #bdccd8;border-radius:5px;padding:10px;margin:6px 0 0;background:#fff}
.account-page button {min-height:44px;padding:8px 14px;margin:0}
.account-page button.primary {background:#208acb;border-color:#208acb;color:#fff}
.account-page button.primary:hover {background:#176b9f;border-color:#176b9f}
.account-actions {display:flex;flex-wrap:wrap;gap:8px}
.account-mode-links {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:16px;padding-top:8px;border-top:1px solid #e1e9f0}
.account-page .account-mode-links button {background:transparent;border:0;color:#176b9f;text-decoration:underline;text-underline-offset:.18em;padding:4px 0;font-size:14px}
.account-page form p {font-size:14px;line-height:1.65;margin:16px 0 0;color:#526173}
.account-page #message {max-width:720px;margin:0 0 24px;padding:12px 16px;border:1px solid #d6e8f4;border-radius:6px;background:#eaf5fc;color:#24425c}
.account-page #signedIn > h2 {font-size:22px;letter-spacing:-.4px;margin:24px 0 12px}
.account-page #signedIn > p {max-width:720px;margin:0 0 16px}
.account-page #signedIn > button {margin-right:8px;margin-bottom:12px}
.account-page #profile {margin-top:24px}
.account-page :is(button,input):focus-visible {outline:3px solid #0784ca;outline-offset:3px}
@media(max-width:700px){.account-page form{padding:24px}}

/* Account entry: one form and a concise guest/member comparison. */
.account-entry {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);align-items:start;gap:24px}
.account-entry-form,.account-explanation {min-width:0;background:#fff;border:1px solid #d9e5ee;border-radius:8px;padding:28px}
.account-entry-form form {border:0;padding:0;margin:0;background:transparent;max-width:none}
.account-page .account-entry-form .account-auth {max-width:none}
.account-mode-tabs {display:flex;gap:12px;border-bottom:1px solid #d9e5ee;margin-bottom:24px}
.account-page .account-mode-tabs button {flex:1;border:0;border-radius:0;border-bottom:3px solid transparent;padding:8px 4px 14px;background:transparent;color:#62676f;font-weight:650}
.account-page .account-mode-tabs button[aria-pressed=true] {color:#0784ca;border-bottom-color:#0784ca}
.auth-mode-heading {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.account-explanation h2 {font-family:Georgia,serif;font-size:28px;font-weight:500;letter-spacing:-.6px;line-height:1.3;margin:0 0 22px}
.account-comparison {width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;line-height:1.5}
.account-comparison th,.account-comparison td {padding:12px 8px;border-bottom:1px solid #d9e5ee;vertical-align:middle;overflow-wrap:anywhere}
.account-comparison thead th {background:#eaf5fc;font-weight:650;text-align:center;color:#253f58}
.account-comparison thead th:first-child {width:40%}
.account-comparison tbody th {font-weight:400;text-align:left;color:#253f58}
.account-comparison td {text-align:center;color:#253f58}
.membership-price {display:block;font-size:13px;font-weight:500;margin-top:4px}
.account-explanation .account-temporary-notice {margin:24px 0 0;font-size:14px;line-height:1.7;color:#526173}
.account-temporary-notice strong {display:block;font-weight:550;color:#253f58;margin-bottom:6px}
@media(max-width:850px){.account-entry{grid-template-columns:1fr}.account-entry-form,.account-explanation{padding:24px}.account-entry-form{max-width:480px;box-sizing:border-box;width:100%}}
@media(max-width:450px){.account-explanation{padding:20px 12px}.account-comparison{font-size:13px}.account-comparison th,.account-comparison td{padding:10px 6px}.account-explanation h2{font-size:25px}}

/* Wide screens keep the same readable canvas instead of stretching the UI. */
:root{--preview-page-width:1440px}
.studio-workspace{--preview-page-width:1600px}
@media(min-width:1440px){
 .preview-home .section-wrap{max-width:var(--preview-page-width)}
 .browse-page{max-width:var(--preview-page-width);box-sizing:border-box}
}
.studio-workspace .workspace{width:100%;max-width:var(--preview-page-width);margin-inline:auto}
@media(min-width:1601px){
 .studio-workspace{background:#f4f8fb}
 .studio-workspace .workspace{border-inline:1px solid #d6e8f4}
}

/* Full-width chrome backgrounds; contents align with the centered page frame. */
body.preview-home{--preview-page-width:1376px}
body.preview-document:not(:has(.account-dashboard)){--preview-page-width:1040px}
body.about-document{--preview-page-width:1262px}
body.security-document{--preview-page-width:1296px}
body.architecture-document{--preview-page-width:1260px}
body .preview-header.site-header,body.studio-workspace .preview-header.app-header,
body .preview-footer,body.studio-workspace>.preview-footer{
 width:100%;max-width:none;box-sizing:border-box;margin-inline:0;
 padding-inline:max(var(--chrome-gutter,28px),calc((100% - var(--preview-page-width))/2 + var(--chrome-gutter,28px)));
}

body.preview-home .preview-header{--chrome-gutter:48px}
@media(max-width:1050px){body.preview-home .preview-header{--chrome-gutter:30px}}
@media(max-width:760px){body.preview-home .preview-header{--chrome-gutter:22px}}
@media(max-width:700px){body .preview-header,body .preview-footer{--chrome-gutter:16px}}

/* Optional artifact appearance values; absent values leave the original CSS intact. */
body[data-page-background]{background:var(--site-page-background)}
body[data-page-background] .home-intro:before{background:var(--site-page-background)}
body[data-page-width]{--preview-page-width:var(--site-content-width)}
body[data-page-width]>main,body[data-page-width] .about-wrap{max-width:var(--site-content-width);width:100%;box-sizing:border-box;margin-inline:auto}
[data-site-background]{background:var(--site-block-background)!important}
[data-site-background]:before{background:var(--site-block-background)!important}
[data-site-width]{box-sizing:border-box;margin-inline:auto!important}
[data-site-width="full"]{width:100%!important;max-width:none!important}
[data-site-width="reading"]{width:100%!important;max-width:800px!important}
[data-site-width="wide"]{width:100%!important;max-width:var(--site-content-width,1400px)!important}

[data-site-width="inherit"]{width:auto!important;max-width:inherit!important}

/* Compact phone chrome keeps the editor usable without changing desktop. */
.editor-mobile-menu{display:none}
@media(max-width:790px){
 body.studio-workspace .preview-header.app-header{position:relative;flex-wrap:nowrap;min-height:56px;padding:4px 12px;gap:8px}
 .studio-workspace .preview-header .studio-brand-lockup{width:130px;height:44px}
 .studio-workspace .editor-mobile-menu{display:block;margin-left:auto;min-width:64px;min-height:44px}
 .studio-workspace .preview-header .app-navigation{width:auto;order:initial;min-height:44px;margin:0;gap:0}
 .studio-workspace .app-navigation>a{display:none}
 .studio-workspace .app-navigation.mobile-open>a{display:flex;min-height:44px}
 .studio-workspace .app-navigation.mobile-open{position:absolute;right:12px;top:56px;z-index:100;display:flex;flex-direction:column;align-items:stretch;padding:8px;background:white;border:1px solid #cbdde9;border-radius:6px;box-shadow:0 4px 16px #152b4026}
 body.studio-workspace>.preview-footer{padding:0 12px;min-height:32px;gap:0}
 .studio-workspace>.preview-footer .preview-footer-links{width:auto}
 .studio-workspace>.preview-footer nav,.studio-workspace>.preview-footer .preview-footer-brand{display:none}
 .studio-workspace>.preview-footer .preview-credit{font-size:11px;line-height:32px;padding:0}
}