/* Flytab Plate — PDF editor */
*{box-sizing:border-box}
html,body{margin:0;background:var(--background);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
button,input,textarea,select{font-family:inherit}
textarea{resize:none}

/* Landing page */
.landing{display:flex;flex-direction:column;height:100vh;background:var(--background);overflow-y:auto}

.landing-nav{display:flex;align-items:center;height:var(--topbar-height);padding:0 24px;border-bottom:1px solid var(--border-subtle-01);background:var(--layer-01);position:sticky;top:0;z-index:10}
.landing-nav-brand{display:flex;align-items:center;gap:8px}
.landing-nav-brand span{font:var(--fw-semibold) var(--t-14) var(--font-sans);letter-spacing:0.32px;color:var(--text-primary)}
.landing-nav-brand b{color:var(--interactive);font-weight:600}
.landing-nav-spacer{flex:1}

.landing-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:96px 24px 80px;background:var(--layer-01);border-bottom:1px solid var(--border-subtle-01)}
.landing-hero-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;background:var(--blue-10);color:var(--interactive);font:500 12px var(--font-sans);letter-spacing:0.32px;margin-bottom:24px}
.landing-hero h1{font:300 54px/1.15 var(--font-sans);color:var(--text-primary);margin:0 0 16px;max-width:680px;letter-spacing:-0.64px}
.landing-hero p{font:400 18px/1.5 var(--font-sans);color:var(--text-secondary);margin:0 0 40px;max-width:520px}

.landing-note{font:400 12px var(--font-sans);color:var(--text-helper);letter-spacing:0.32px;margin-top:12px}

.landing-verify{display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px;gap:0}
.landing-verify-icon{width:48px;height:48px;display:grid;place-items:center;color:var(--interactive);margin-bottom:16px}
.landing-verify-title{font:600 20px/1.4 var(--font-sans);color:var(--text-primary);margin:0 0 8px}
.landing-verify-sub{font:400 14px/1.5 var(--font-sans);color:var(--text-secondary);margin:0 0 24px;text-align:center}
.landing-verify-sub strong{color:var(--text-primary);font-weight:600}
.landing-verify-form{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.landing-verify-input{width:100%;height:56px;border:none;border-bottom:2px solid var(--border-strong-01);background:var(--field-01);font:500 28px var(--font-mono);color:var(--text-primary);text-align:center;outline:none;letter-spacing:0.5em;padding:0 16px}
.landing-verify-input:focus{border-bottom-color:var(--focus)}
.landing-verify-input::placeholder{color:var(--text-placeholder);letter-spacing:0.5em}
.landing-verify-btn{width:100%}
.landing-verify-links{display:flex;align-items:center;gap:12px;margin-top:16px}
.landing-verify-link{background:none;border:none;padding:0;font:400 14px var(--font-sans);color:var(--link-primary);cursor:pointer;letter-spacing:0.16px}
.landing-verify-link:hover{color:var(--link-primary-hover);text-decoration:underline}
.landing-verify-sep{width:1px;height:14px;background:var(--border-subtle-01)}
.landing-verify-resent{display:flex;align-items:center;gap:4px;font:400 14px var(--font-sans);color:var(--support-success);letter-spacing:0.16px}

.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-subtle-01);border-bottom:1px solid var(--border-subtle-01)}
.landing-feat{display:flex;flex-direction:column;gap:8px;padding:40px 32px;background:var(--background)}
.landing-feat-icon{width:32px;height:32px;color:var(--interactive)}
.landing-feat h3{font:600 16px/1.4 var(--font-sans);color:var(--text-primary);margin:0}
.landing-feat p{font:400 14px/1.5 var(--font-sans);color:var(--text-secondary);margin:0}

.landing-community{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 24px;gap:16px;background:var(--background)}
.landing-community h2{font:400 28px/1.3 var(--font-sans);color:var(--text-primary);margin:0}
.landing-community p{font:400 14px/1.5 var(--font-sans);color:var(--text-secondary);margin:0;max-width:440px}
.landing-browse-mt{margin-top:8px}

.landing-preview{display:flex;flex-direction:column;align-items:center;padding:80px 24px;gap:32px;background:var(--layer-01);border-bottom:1px solid var(--border-subtle-01)}
.landing-preview h2{font:400 28px/1.3 var(--font-sans);color:var(--text-primary);margin:0;text-align:center}
.landing-preview-img{width:100%;max-width:800px;aspect-ratio:16/9;background:var(--background);border:1px solid var(--border-subtle-01);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.landing-preview-mock{display:flex;width:100%;height:100%;background:var(--background)}
.landing-preview-sidebar{width:48px;background:var(--layer-01);border-right:1px solid var(--border-subtle-01);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px}
.landing-preview-sidebar span{width:28px;height:4px;border-radius:1px}
.landing-preview-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.landing-preview-page{width:200px;height:280px;background:var(--layer-01);border:1px solid var(--border-subtle-01);box-shadow:var(--shadow-sm);position:relative;padding:20px 16px;display:flex;flex-direction:column;gap:6px}
.landing-preview-page::before{content:'';position:absolute;left:-8px;top:30px;width:8px;height:20px;background:var(--interactive);border-radius:2px 0 0 2px}
.landing-preview-page::after{content:'';position:absolute;left:-8px;top:58px;width:8px;height:20px;background:var(--support-error);border-radius:2px 0 0 2px}
.lp-line{height:4px;border-radius:1px;background:var(--gray-20)}
.lp-line.short{width:40%}
.lp-line.med{width:65%}
.lp-line.long{width:90%}
.lp-line.head{height:6px;background:var(--gray-30);margin-bottom:4px;width:55%}
.landing-preview-settings{width:200px;background:var(--layer-01);border-left:1px solid var(--border-subtle-01);padding:16px 12px;display:flex;flex-direction:column;gap:8px}
.landing-preview-settings span{height:4px;border-radius:1px;background:var(--gray-20)}

.landing-cta{display:flex;flex-direction:column;align-items:center;text-align:center;padding:80px 24px;gap:16px;background:var(--background)}
.landing-cta h2{font:400 28px/1.3 var(--font-sans);color:var(--text-primary);margin:0}
.landing-cta p{font:400 14px/1.5 var(--font-sans);color:var(--text-secondary);margin:0 0 8px;max-width:400px}

.landing-footer{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 24px;border-top:1px solid var(--border-subtle-01);background:var(--layer-01)}
.landing-footer span{font:400 12px var(--font-sans);color:var(--text-helper);letter-spacing:0.32px}
.landing-footer a{font:400 12px var(--font-sans);color:var(--link-primary);text-decoration:none;letter-spacing:0.32px}
.landing-footer a:hover{text-decoration:underline}

@media (max-width: 768px){
  .landing-hero h1{font-size:36px;letter-spacing:-0.32px}
  .landing-hero p{font-size:16px}
  .landing-features{grid-template-columns:1fr}
  .landing-verify-input{font-size:22px;letter-spacing:0.4em}
  .landing-preview-settings{display:none}
  .landing-preview-page{width:160px;height:220px}
}

/* Login */
.login-home{position:fixed;top:var(--spacing-05);left:var(--spacing-05);display:inline-flex;align-items:center;gap:var(--spacing-03);height:var(--spacing-09);padding:0 var(--spacing-04);border-radius:var(--radius-03);color:var(--text-primary);text-decoration:none;transition:background var(--duration-fast-02) var(--ease-standard-productive)}
.login-home:hover{background:var(--background-hover)}
.login-home-name{font:var(--fw-semibold) var(--t-18) var(--font-sans);letter-spacing:0.32px;color:var(--text-primary)}
.login-home-name b{color:var(--interactive);font-weight:var(--fw-semibold)}
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--background);padding:var(--spacing-05)}
.login-card{width:100%;max-width:400px;background:var(--layer-01);padding:var(--spacing-07)}
.login-brand{display:flex;align-items:center;gap:var(--spacing-04);margin-bottom:var(--spacing-07);text-decoration:none}
.login-brand-name{font:var(--fw-semibold) var(--t-18) var(--font-sans);letter-spacing:var(--font-letter-spacing-looser);color:var(--text-primary)}
.login-brand-name b{color:var(--link-primary);font-weight:var(--fw-semibold)}
.login-form{display:flex;flex-direction:column;gap:0}
.login-form h1{font:var(--fw-regular) var(--t-20)/1.4 var(--font-sans);color:var(--text-primary);margin:0 0 var(--spacing-03)}
.login-sub{font:var(--fw-regular) var(--t-14)/1.5 var(--font-sans);color:var(--text-secondary);margin:0 0 var(--spacing-07)}
.login-field{display:flex;flex-direction:column;gap:var(--spacing-02);margin-bottom:var(--spacing-05)}
.login-lbl{font:var(--fw-regular) var(--t-12) var(--font-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-loose)}
.login-lbl-row{display:flex;justify-content:space-between;align-items:baseline}
.login-pw-wrap{position:relative;display:flex}
.login-pw-wrap .input{flex:1;padding-right:var(--spacing-08)}
.login-pw-wrap .sp-pw-toggle{position:absolute;right:0;top:0;width:var(--spacing-08);height:var(--input-height-md);display:grid;place-items:center;background:transparent;border:none;color:var(--icon-secondary);cursor:pointer}
.login-pw-wrap .sp-pw-toggle:hover{color:var(--icon-primary)}
.login-pw-toggle{position:absolute;right:0;top:0;width:var(--input-height-md);height:var(--input-height-md);display:grid;place-items:center;background:transparent;border:none;color:var(--icon-secondary);cursor:pointer}
.login-pw-toggle:hover{color:var(--icon-primary)}
.login-helper{font:var(--fw-regular) var(--t-12) var(--font-sans);color:var(--text-helper);margin:var(--spacing-02) 0 0;letter-spacing:var(--font-letter-spacing-loose)}
.login-btn-mt{margin-top:var(--spacing-07)}
.login-footer{font:var(--fw-regular) var(--t-14) var(--font-sans);color:var(--text-secondary);margin:var(--spacing-05) 0 0;text-align:center}
.login-link{background:none;border:none;padding:0;color:var(--link-primary);font:inherit;cursor:pointer;text-decoration:none}
.login-link:hover{color:var(--link-primary-hover);text-decoration:underline}
.login-link-sm{background:none;border:none;padding:0;color:var(--link-primary);font:var(--fw-regular) var(--t-12) var(--font-sans);cursor:pointer;text-decoration:none;letter-spacing:var(--font-letter-spacing-loose)}
.login-link-sm:hover{color:var(--link-primary-hover);text-decoration:underline}
.login-field .sp-field-error{margin-top:var(--spacing-02)}
.login-tos label{display:flex;align-items:flex-start;gap:var(--spacing-03);font:var(--fw-regular) var(--t-14)/1.5 var(--font-sans);color:var(--text-secondary);cursor:pointer}
.login-tos input[type="checkbox"]{width:var(--icon-size-01);height:var(--icon-size-01);margin-top:var(--spacing-01);accent-color:var(--interactive);flex-shrink:0;cursor:pointer}
.login-tos a{color:var(--link-primary);text-decoration:underline}
.login-tos a:hover{color:var(--link-primary-hover)}
/* Client-side invalid state — red shade only, no text */
.input.invalid{border-color:var(--color-border-critical)}
input[type="checkbox"].invalid{outline:2px solid var(--color-border-critical);outline-offset:1px}

/* Shell */
.app{display:grid;height:auto;min-height:100vh;overflow:visible}
.app.app-editor{grid-template-columns:1fr;grid-template-rows:var(--topbar-height) 1fr}
.app.app-render{grid-template-columns:1fr;grid-template-rows:1fr}
.app.app-flat{grid-template-columns:1fr;grid-template-rows:var(--topbar-height) 1fr}

.brandbar{grid-column:1/-1;background:var(--layer-01);color:var(--text-primary);display:flex;align-items:center;gap:0;padding:0 var(--spacing-04);border-bottom:1px solid var(--border-subtle-01);z-index:20;font:var(--fw-medium) var(--t-12) var(--font-sans);letter-spacing:0.16px;height:var(--topbar-height);position:sticky;top:0;min-width:0}
.app-flat .brandbar{padding:0 var(--spacing-06)}
body.guest .brandbar{padding:0 max(var(--airplane-padding), calc((100vw - 1200px) / 2))}
button.brandbar-logo,.brandbar-logo{display:inline-flex;align-items:center;gap:var(--spacing-03);color:var(--text-primary);padding:0 var(--spacing-04) 0 0;margin:0;border:none;background:transparent;background-color:transparent;height:var(--topbar-height);cursor:pointer;font:inherit;text-decoration:none;-webkit-appearance:none;appearance:none;outline:none}
button.brandbar-logo.brandbar-logo--editor{padding:0;border-right:none;width:var(--topbar-height);justify-content:center;flex-shrink:0}
button.brandbar-logo.brandbar-logo--editor:hover{background:var(--background-hover)}
.brandbar-logo:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.brandbar-logo:hover .brandbar-name{color:var(--text-primary)}
.brandbar-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0}
.brandbar-mark svg{width:28px;height:28px}
.brandbar-name{font:var(--fw-semibold) var(--t-18) var(--font-sans);letter-spacing:0.32px;color:var(--text-primary);transition:color var(--duration-fast-02) var(--ease-standard-productive)}
.brandbar-name b{color:var(--interactive);font-weight:var(--fw-semibold)}

#editor-bb-fields{min-width:0;flex-shrink:1}
.bb-doc-fields{display:flex;align-items:center;gap:var(--spacing-03);min-width:0;height:var(--topbar-height);padding:0 var(--spacing-02);overflow:visible;position:relative}
.bb-back{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-02);color:var(--icon-secondary);text-decoration:none;flex-shrink:0;transition:background var(--duration-fast-02) var(--ease-standard-productive),color var(--duration-fast-02) var(--ease-standard-productive)}
.bb-back:hover{background:var(--background-hover);color:var(--text-primary)}
.bb-sep{width:1px;height:16px;background:var(--border-subtle-01);flex-shrink:0}
.auto-input-wrap{position:relative;display:inline-flex;align-items:center;min-width:0;flex:0 1 auto;max-width:100%;overflow:hidden}
.auto-input-wrap input{max-width:100%}
.auto-input-mirror{visibility:hidden;height:0;overflow:hidden;white-space:pre;position:absolute;pointer-events:none}

/* Title pill */
.bb-title-wrap{position:relative;min-width:0}
.bb-title-pill{display:inline-flex;align-items:center;gap:var(--spacing-02);height:28px;padding:0 var(--spacing-04);background:transparent;border:1px solid transparent;font:var(--fw-semibold) var(--font-size-325) var(--font-sans);color:var(--text-primary);letter-spacing:0.16px;cursor:pointer;border-radius:var(--btn-radius);white-space:nowrap;max-width:400px;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:background var(--duration-fast-02),border-color var(--duration-fast-02)}
.bb-title-pill:hover{background:var(--background-hover);border-color:var(--border-subtle-01)}
.bb-title-pill:active,.bb-title-pill[aria-expanded="true"]{background:var(--field-01);border-color:var(--border-interactive)}
.bb-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-title-caret{flex-shrink:0;color:var(--icon-secondary)}
.bb-title-edit{display:none;flex-shrink:0;color:var(--icon-secondary)}
.di-backdrop{display:none}

/* Document info popover */
.di-popover{position:absolute;left:0;top:calc(100% + var(--spacing-02));width:340px;background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--menu-radius);box-shadow:var(--shadow-400);z-index:var(--z-dropdown);padding:var(--spacing-05);display:flex;flex-direction:column;gap:var(--spacing-04);animation:diIn var(--duration-moderate-01) var(--ease-entrance-productive)}
@keyframes diIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.di-field{display:flex;flex-direction:column;gap:var(--spacing-02)}
.di-label{font:var(--fw-semibold) var(--font-size-275) var(--font-sans);color:var(--text-secondary);letter-spacing:0.32px}
.di-helper{font:var(--fw-regular) var(--font-size-275) var(--font-sans);color:var(--text-helper);letter-spacing:0.16px}

/* Tags input */
.di-tags-wrap{display:flex;flex-wrap:wrap;gap:var(--spacing-02);padding:var(--spacing-02) var(--input-padding-x);background:var(--field-01);border:var(--input-border-width) solid var(--border-strong-01);border-radius:var(--input-radius);min-height:var(--input-height-sm);align-items:center;cursor:text}
.di-tags-wrap:focus-within{border-color:var(--focus);box-shadow:var(--input-focus-ring)}
.di-tag-input{flex:1;min-width:60px;border:none;background:transparent;font:var(--fw-regular) var(--t-12) var(--font-sans);color:var(--text-primary);outline:none;padding:var(--spacing-01) 0;letter-spacing:0.16px}
.di-tag-input::placeholder{color:var(--text-placeholder)}

/* Suggestions dropdown — layout overrides on .menu */
.di-suggest{max-height:200px;overflow-y:auto;margin-top:var(--spacing-01)}
.di-suggest .menu__item.on{background:var(--layer-hover-01)}

.bb-combo{display:flex;position:relative;margin-right:var(--spacing-02)}
.bb-combo.open>.btn--primary{background:var(--button-primary-hover)}
.bb-combo-trigger{width:var(--btn-height-md);padding:0;display:grid;place-items:center}
.bb-combo-backdrop{position:fixed;inset:0;z-index:99}
.bb-combo-menu{position:absolute;right:0;top:calc(100% + var(--spacing-02));width:200px;z-index:100}

/* Brandbar crumb */
.brandbar-crumb{display:flex;align-items:center;height:var(--topbar-height);margin-left:var(--spacing-04);min-width:0}


/* Home view shell */
.home-view{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--background);overflow:hidden}
.bb-section-label{font:var(--fw-semibold) var(--t-14) var(--font-sans);color:var(--text-primary);letter-spacing:0.16px;margin-left:var(--spacing-04);background:none;border:none;padding:0;cursor:pointer}
.bb-section-label:hover{color:var(--interactive)}

/* Library page — vertical tabs */
.lib-page{display:flex;flex-direction:row;flex:1;min-height:0}
.lib-sidebar{display:flex;flex-direction:column;width:160px;flex-shrink:0;background:var(--layer-01);border-right:1px solid var(--border-subtle-01);padding:var(--spacing-05) 0 0}
.lib-vtab{display:flex;align-items:center;height:40px;padding:0 var(--spacing-05);background:transparent;border:none;border-left:3px solid transparent;color:var(--text-secondary);font:var(--fw-regular) var(--t-14) var(--font-sans);letter-spacing:0.16px;cursor:pointer;text-align:left;transition:color var(--duration-fast-02) var(--ease-standard-productive),background var(--duration-fast-02) var(--ease-standard-productive),border-color var(--duration-fast-02) var(--ease-standard-productive)}
.lib-vtab:hover{background:var(--layer-hover-01);color:var(--text-primary)}
.lib-vtab.on{color:var(--text-primary);font-weight:600;border-left-color:var(--interactive);background:var(--layer-selected-01)}
.lib-vtab:focus{outline:2px solid var(--focus);outline-offset:-2px}
.lib-content{flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.lib-content > .docs-view{flex:1;min-height:0}

.brandbar-spacer{flex:1}
.brandbar-actions{display:flex;align-items:center;gap:var(--spacing-03)}
.bb-unsaved-label{font:400 var(--t-12) var(--font-sans);color:var(--text-helper);letter-spacing:0.16px;white-space:nowrap}
.bb-save-btn{}
.bb-save-btn svg{fill:currentColor}
.bb-nav-link{font:var(--fw-regular) var(--t-14) var(--font-sans);color:var(--text-primary);text-decoration:none;padding:0 var(--spacing-05);height:var(--topbar-height);display:flex;align-items:center;letter-spacing:var(--font-letter-spacing-loose);transition:background var(--duration-fast-02) var(--ease-standard-productive),color var(--duration-fast-02) var(--ease-standard-productive)}
.bb-nav-link:hover{background:var(--background-hover);color:var(--text-primary)}
.app-editor .bb-nav-link{display:none}
.bb-icon-btn{width:var(--topbar-height);height:var(--topbar-height);display:grid;place-items:center;background:transparent;border:none;color:var(--icon-secondary);cursor:pointer;transition:background var(--duration-fast-02) var(--ease-standard-productive),color var(--duration-fast-02) var(--ease-standard-productive)}
.bb-icon-btn:hover{background:var(--background-hover);color:var(--icon-primary)}
.bb-icon-btn:focus{outline:2px solid var(--focus);outline-offset:-2px}
.bb-user-wrap{position:relative}
.bb-menu-backdrop{position:fixed;inset:0;z-index:99}
.bb-user-menu{position:absolute;top:var(--topbar-height);right:0;z-index:100;min-width:240px}
.bb-menu-email{padding:var(--spacing-04) var(--spacing-05) var(--spacing-03);font:var(--fw-regular) var(--t-12) var(--font-sans);color:var(--text-helper);letter-spacing:0.32px;border-bottom:1px solid var(--border-subtle-01);margin-bottom:var(--spacing-02)}
.bb-link{text-decoration:none;color:inherit;display:contents}

/* Account & Support pages */
.settings-page{flex:1;overflow-y:auto;padding:var(--spacing-07)}
.settings-page-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-06)}
.settings-page h1{font:var(--font-weight-semibold) var(--font-size-500)/1.2 var(--font-family-sans);color:var(--text-primary);margin:0}
.settings-page h3{font:var(--font-weight-semibold) var(--font-size-350)/1.4 var(--font-family-sans);color:var(--text-primary);margin:0}
.sp-section{display:flex;flex-direction:column;gap:var(--spacing-05)}
.sp-section form{display:contents}
.sp-field{display:flex;flex-direction:column;gap:var(--spacing-02)}
.sp-lbl{font:var(--font-weight-regular) var(--font-size-300) var(--font-family-sans);color:var(--text-helper);letter-spacing:var(--font-letter-spacing-looser)}
.sp-val{font:var(--font-weight-regular) var(--font-size-350) var(--font-family-sans);color:var(--text-primary)}
.sp-section .btn{align-self:flex-start}
.sp-email-row{display:flex;align-items:center;gap:var(--spacing-03)}
.sp-badge{display:inline-flex;align-items:center;gap:var(--spacing-02);height:var(--badge-height);padding:var(--badge-padding);font:var(--badge-font);letter-spacing:var(--badge-letter-spacing);border-radius:var(--badge-radius)}
.sp-badge-ok{background:var(--green-10);color:var(--green-60)}
.sp-badge-warn{background:var(--color-bg-surface-caution);color:var(--orange-50)}
.sp-pw-wrap{position:relative;display:flex}
.sp-pw-wrap .input{flex:1;padding-right:var(--spacing-08)}
.sp-pw-toggle{position:absolute;right:0;top:0;width:var(--spacing-08);height:var(--input-height-md);display:grid;place-items:center;background:transparent;border:none;color:var(--icon-secondary);cursor:pointer}
.sp-pw-toggle:hover{color:var(--icon-primary)}

.sp-field-error{padding:var(--spacing-03) var(--spacing-05);font:400 var(--t-12)/1.33 var(--font-sans);letter-spacing:0.32px;color:var(--text-error);background:var(--layer-01);border-left:3px solid var(--color-border-critical);border-radius:var(--radius-02)}
.sp-danger{border-top:1px solid var(--border-subtle-01);padding-top:var(--spacing-06)}
.sp-text{font:var(--font-weight-regular) var(--font-size-350)/1.5 var(--font-family-sans);color:var(--text-secondary);margin:0}
.sp-card{padding:16px;background:var(--layer-01);border:1px solid var(--border-subtle-01);display:flex;flex-direction:column;gap:4px}

/* Support / Buy a coffee */
.support-inner{max-width:480px;margin:0 auto;padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.support-hero{display:flex;flex-direction:column;align-items:center;gap:12px}
.support-icon{font-size:48px;line-height:1}
.support-hero h1{font:600 24px/1.2 var(--font-sans);color:var(--text-primary);margin:0}
.support-hero .sp-text{max-width:380px}
.support-tiers{display:flex;gap:12px;width:100%}
.support-tier{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;background:var(--layer-01);border:2px solid var(--border-subtle-01);cursor:pointer;transition:border-color 80ms,background 80ms}
.support-tier:hover{background:var(--layer-hover-01)}
.support-tier.on{border-color:var(--interactive);background:var(--layer-selected-01)}
.support-tier:focus{outline:2px solid var(--focus);outline-offset:-2px}
.tier-emoji{font-size:28px;line-height:1}
.tier-label{font:400 13px var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px}
.tier-amount{font:600 18px var(--font-sans);color:var(--text-primary)}
.support-thanks{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;background:var(--support-success, #E5EDDA);color:#356028;font:600 14px var(--font-sans)}
.support-footer{font:400 12px var(--font-sans);color:var(--text-helper);letter-spacing:0.32px;margin:0}
.support-divider{width:100%;height:1px;background:var(--border-subtle-01)}
.support-contact{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.support-contact h3{font:600 16px/1.3 var(--font-sans);color:var(--text-primary);margin:0}
.support-email{font:400 14px var(--font-sans);color:var(--link-primary);text-decoration:none;letter-spacing:0.16px}
.support-email:hover{text-decoration:underline}



.rail{background:var(--layer-01);border-right:1px solid var(--border-subtle-01);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;z-index:2}
.rail .rbtn{width:40px;height:40px;background:transparent;border:none;display:grid;place-items:center;color:var(--icon-secondary);border-left:2px solid transparent;cursor:pointer}
.rail .rbtn:hover{background:var(--layer-hover-01);color:var(--icon-primary)}
.rail .rbtn.active{color:var(--icon-primary);border-left-color:var(--blue-60);background:var(--background-selected)}
.rail .spacer{flex:1}

.main{display:grid;grid-template-rows:1fr;min-width:0;min-height:0;height:100%;overflow:hidden}
.bb-doc-actions{display:flex;align-items:center;gap:8px;margin-left:12px}

/* Editor shell: toolbar + editor grid */
.editor-shell{display:flex;flex-direction:column;min-height:0;overflow:visible}

/* Dropdown menu (used in combo button + zoom) */
.dt-menu-backdrop{position:fixed;inset:0;z-index:7999}
.dt-menu{position:absolute;right:0;top:calc(100% + 4px);width:200px;z-index:8000}

/* Editor layout: pagelist | workspace | settings */
.editor{display:grid;grid-template-columns:240px 1fr 300px;align-items:start;flex:1;min-height:0;background:var(--gray-20);overflow:hidden;gap:0;position:relative}
.preview-mode .editor{grid-template-columns:1fr}
.preview-mode .workspace-wrap{padding-left:0;padding-right:0}
.preview-mode .editor .workspace{padding-left:var(--spacing-07);padding-right:var(--spacing-07)}
.preview-mode .page-content{overflow:hidden}

/* Page list (left) */
.pagelist{background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--radius-04);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - var(--topbar-height) - var(--spacing-08));overflow:hidden;z-index:2;margin:var(--spacing-04);grid-column:1;grid-row:1}
/* Pages header */
.pl-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-03) var(--spacing-03) var(--spacing-03) var(--spacing-05);flex-shrink:0}
.pl-header__title{font:600 var(--font-size-325)/1 var(--font-sans);color:var(--text-primary);letter-spacing:0.16px}
.pl-header .tt-btn[data-tip]::after{top:50%;left:auto;right:calc(100% + 6px);transform:translateY(-50%)}

/* Collapsed pagelist — just the toggle button */
.pagelist.collapsed{height:auto;overflow:visible;background:var(--layer-01);padding:var(--spacing-02)}

/* UI minimized — collapse left to button, hide right */
.editor.ui-minimized{grid-template-columns:1fr}
.editor.ui-minimized .pagelist{position:absolute;top:0;left:0;z-index:3}
.editor.ui-minimized:not(.responsive-mode) .workspace-wrap{padding-left:0;padding-right:0}
.editor.ui-minimized:not(.responsive-mode) .tt-toolbar{margin-left:auto;margin-right:auto}

/* Document info */
.pl-doc-info{padding:var(--spacing-05) var(--spacing-05) var(--spacing-04);display:flex;flex-direction:column;gap:1px}
.pl-doc-name{background:none;border:none;outline:none;font:var(--fw-semibold) var(--t-14)/1.35 var(--font-sans);color:var(--text-primary);padding:3px 6px;margin:0 -6px;width:calc(100% + 12px);letter-spacing:0;border-radius:var(--radius-02);cursor:default;transition:background .15s}
.pl-doc-name::placeholder{color:var(--text-placeholder)}
.pl-doc-name:hover{background:var(--layer-hover-01);cursor:text}
.pl-doc-name:focus{outline:none;background:var(--layer-hover-01);cursor:text}
.pl-doc-meta-row{display:flex;align-items:center;gap:4px;padding:2px 6px;margin:0 -6px;width:calc(100% + 12px);border-radius:var(--radius-02);color:var(--icon-secondary);transition:background .15s;cursor:default}
.pl-doc-meta-row:hover{background:var(--layer-hover-01)}
.pl-doc-meta-row:focus-within{background:var(--layer-hover-01)}
.pl-doc-meta-row:hover,.pl-doc-meta-row:focus-within{cursor:text}
.pl-doc-meta-row svg{flex-shrink:0}
.pl-doc-meta{background:none;border:none;outline:none;font:var(--fw-regular) var(--t-12)/1.4 var(--font-sans);color:var(--text-secondary);padding:0;margin:0;flex:1;min-width:0;letter-spacing:0.16px;cursor:inherit}
.pl-doc-meta::placeholder{color:var(--text-placeholder)}
.pl-doc-meta:focus{color:var(--text-primary);outline:none}
.pl-doc-desc{background:none;border:none;outline:none;font:var(--fw-regular) var(--t-12)/1.5 var(--font-sans);color:var(--text-helper);padding:2px 6px;margin:0 -6px;width:calc(100% + 12px);letter-spacing:0.16px;border-radius:var(--radius-02);cursor:default;transition:background .15s;resize:none;overflow:hidden;field-sizing:content;max-height:54px}
.pl-doc-desc::placeholder{color:var(--text-placeholder)}
.pl-doc-desc:hover{background:var(--layer-hover-01);cursor:text}
.pl-doc-desc:focus{background:var(--layer-hover-01);color:var(--text-secondary);cursor:text;outline:none}

/* Section header */
.pl-section-header{padding:var(--spacing-05) var(--spacing-05) var(--spacing-03);border-top:1px solid var(--border-subtle-01)}
.pl-section-title{font:600 var(--font-size-325)/1 var(--font-sans);color:var(--text-primary);letter-spacing:0.16px}

/* Page list items */
.pl-page-list{flex:1;overflow-y:auto;padding:var(--spacing-05) var(--spacing-05) var(--spacing-03)}
.pl-page-item{display:flex;gap:var(--spacing-03);padding:var(--spacing-02) var(--spacing-03);cursor:pointer;align-items:center;border-radius:var(--radius-03);margin:1px 0}
.pl-page-item:hover{background:var(--layer-hover-01)}
.pl-page-item--selected{background:var(--color-bg-surface-selected)}
.pl-page-item--selected:hover{background:var(--color-bg-surface-selected-hover)}
.pl-page-item__thumb{width:34px;height:44px;background:var(--white);border:1px solid var(--border-subtle-02);flex-shrink:0;position:relative;display:flex;flex-direction:column;padding:3px;gap:2px}
.pl-page-item__tab-mark{position:absolute;width:4px;height:10px}
.pl-page-item__thumb.thumb-left .pl-page-item__tab-mark{left:-1px}
.pl-page-item__thumb.thumb-right .pl-page-item__tab-mark{right:-1px}
.pl-page-item__thumb.thumb-top .pl-page-item__tab-mark{left:50%;top:-1px;transform:translateX(-50%);width:10px;height:4px}
.pl-page-item__thumb.thumb-bottom .pl-page-item__tab-mark{left:50%;bottom:-1px;transform:translateX(-50%);width:10px;height:4px}
.pl-page-item__line{height:1.5px;background:var(--color-border-secondary);border-radius:0.5px}
.pl-page-item__line--h{background:var(--text-secondary);width:70%;height:2.5px}
.pl-page-item__line--s{width:60%}
.pl-page-item__line--xs{width:35%}
.pl-page-item__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-01)}
.pl-page-item__number{font:400 var(--t-12) var(--font-mono);color:var(--text-helper);letter-spacing:0.32px}
.pl-page-item__title{font:400 var(--t-14)/1.2857 var(--font-sans);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0.16px}
.pl-page-item--selected .pl-page-item__title{font-weight:600}

/* Workspace (center) */
.workspace-wrap{position:relative;min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;background:var(--gray-20);height:calc(100vh - var(--topbar-height));align-self:stretch;grid-column:1/-1;grid-row:1;padding-left:240px;padding-right:300px}
.app-render .workspace-wrap{height:100vh;padding-left:0;padding-right:0}
.workspace{overflow:visible;background:var(--gray-20);width:100%;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-04) var(--spacing-07) var(--spacing-11) var(--spacing-07);flex:1}
.zoom-layer{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-05)}

/* Floating mode switcher */
.mode-switcher{position:sticky;top:var(--spacing-05);align-self:center;margin:var(--spacing-05) 0 0;z-index:2;box-shadow:var(--shadow-sm);background:var(--layer-01);padding:var(--spacing-02);border-radius:var(--radius-02)}
.mode-switcher .seg-control{background:var(--layer-01)}
.mode-switcher .seg-control__btn--active,.mode-switcher .seg-control__btn--active:hover{background:var(--interactive);color:var(--text-on-color);font-weight:600;box-shadow:none}
.mode-switcher .seg-control__btn--active .seg-control__label svg{color:var(--text-on-color)}


/* Page (hi-fi) */
.page{background:#fff;box-shadow:var(--shadow-sm);position:relative;display:grid;overflow:hidden;
  --text-scale:1;
  --t-12:calc(0.75rem * var(--text-scale));--t-14:calc(0.875rem * var(--text-scale));
  --t-18:calc(1.125rem * var(--text-scale));--t-24:calc(1.5rem * var(--text-scale));--t-32:calc(2rem * var(--text-scale))}
.page.text-xs{--text-scale:0.8}
.page.text-sm{--text-scale:0.9}
.page.text-lg{--text-scale:1.15}
.page.text-xl{--text-scale:1.3}
.page.portrait{width:794px;height:1123px}
.page.landscape{width:1123px;height:794px}

/* Page layout: top-side / [left-side, content, right-side] / bottom-side
   Each side is a flex container holding 1+ rails stacked perpendicular to the rail's axis.
   Side containers auto-size based on their content (rail count × rail thickness). */
.page{grid-template-areas:"tt tt tt" "lt content rt" "bt bt bt";
       grid-template-columns:auto 1fr auto;
       grid-template-rows:auto 1fr auto}

.side{display:flex;background:transparent}
.side-empty{display:none}
.side-top{grid-area:tt;flex-direction:column-reverse;border-bottom:1px solid var(--gray-20)}
.side-bottom{grid-area:bt;flex-direction:column;border-top:1px solid var(--gray-20)}
.side-left{grid-area:lt;flex-direction:row-reverse;border-right:1px solid var(--gray-20)}
.side-right{grid-area:rt;flex-direction:row;border-left:1px solid var(--gray-20)}

/* Each rail is a thin strip of chips along one edge */
.tab-rail{display:flex;background:var(--gray-20);gap:1px;flex:0 0 auto}
.tab-rail.rail-t,.tab-rail.rail-b{flex-direction:row}
.tab-rail.rail-l,.tab-rail.rail-r{flex-direction:column}

/* Empty rail (added by user but no tabs yet) — dashed, low-contrast slot */
.tab-rail-empty{background:var(--layer-02) !important;border:1px dashed var(--gray-30);box-sizing:border-box}
.tab-rail-placeholder{flex:1;display:flex;align-items:center;justify-content:center;font:500 10px/1.2 var(--font-sans);letter-spacing:0.32px;text-transform:uppercase;color:var(--text-helper);text-align:center;padding:6px;pointer-events:none}
.rail-l .tab-rail-placeholder, .rail-r .tab-rail-placeholder{writing-mode:vertical-rl}
.rail-l .tab-rail-placeholder{transform:rotate(180deg)}
/* Inner rails (those NOT against the page edge) get a thin separator */
.side-top .tab-rail + .tab-rail{border-bottom:1px solid var(--gray-20)}
.side-bottom .tab-rail + .tab-rail{border-top:1px solid var(--gray-20)}
.side-left .tab-rail + .tab-rail{border-right:1px solid var(--gray-20)}
.side-right .tab-rail + .tab-rail{border-left:1px solid var(--gray-20)}

.page-content{grid-area:content;padding:8px 14px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:clip;position:relative}
.page.cols-1 .page-content{display:flex;flex-direction:column}
.page.cols-2 .page-content{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:start;align-content:start}
.page.cols-2 .page-header{grid-column:1/-1}
.col-view,.col-edit{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:0}
.col-edit{overflow-y:auto}

/* Tab sizes — sized for touch targets (min 44px for finger, bigger for gloves/turbulence).
   Each rail carries its own size class so rail thickness is per-rail and consistent across pages. */
.tab-rail.rs-s.rail-t,.tab-rail.rs-s.rail-b{height:48px}
.tab-rail.rs-s.rail-l,.tab-rail.rs-s.rail-r{width:48px}
.tab-rail.rs-m.rail-t,.tab-rail.rs-m.rail-b{height:60px}
.tab-rail.rs-m.rail-l,.tab-rail.rs-m.rail-r{width:60px}
.tab-rail.rs-l.rail-t,.tab-rail.rs-l.rail-b{height:76px}
.tab-rail.rs-l.rail-l,.tab-rail.rs-l.rail-r{width:76px}

/* Tab chip */
.tab-chip{flex:1;display:flex;align-items:center;justify-content:center;color:#fff;font:600 14px/1 var(--font-sans);letter-spacing:0.5px;text-transform:uppercase;cursor:pointer;user-select:none;min-width:0;min-height:0;border:none;padding:0;position:relative;transition:opacity 110ms var(--ease-standard-productive);text-decoration:none;will-change:opacity}
.tab-chip:hover{opacity:0.85}
.tab-chip.current{box-shadow:inset 0 0 0 2px rgba(255,255,255,0.6)}
.tab-chip.dragging{opacity:0.4}
.tab-chip.drop-target{box-shadow:inset 0 0 0 3px var(--white)}
/* Group spacer — same flex weight as a tab so it occupies one "slot",
   but no fill/text/interaction. Pilots use these to split a rail into
   semantic groups (e.g. NORMAL · EMERG · — · PERF). */
.tab-spacer{flex:1;background:var(--gray-10);min-width:0;min-height:0;pointer-events:none;position:relative}
.tab-spacer::before,.tab-spacer::after{content:"";position:absolute;background:var(--gray-30);opacity:0.5}
.rail-t .tab-spacer::before,.rail-b .tab-spacer::before{left:6px;right:6px;top:50%;height:1px;transform:translateY(-50%)}
.rail-l .tab-spacer::before,.rail-r .tab-spacer::before{top:6px;bottom:6px;left:50%;width:1px;transform:translateX(-50%)}
.tab-spacer::after{display:none}
.tab-rail.rs-s .tab-chip{font-size:13px}
.tab-rail.rs-m .tab-chip{font-size:15px;letter-spacing:0.6px}
.tab-rail.rs-l .tab-chip{font-size:17px;letter-spacing:0.7px;font-weight:700}

/* Vertical rails get vertical text */
.rail-l .tab-chip, .rail-r .tab-chip{writing-mode:vertical-rl;text-orientation:mixed}
.rail-l .tab-chip{transform:rotate(180deg)}

/* Colored backgrounds */
.c-none{background:#fff;color:var(--black)!important}
.c-blue{background:var(--blue-60)}
.c-red{background:var(--red-60)}
.c-yellow{background:var(--yellow-30);color:var(--black)!important}
.c-green{background:var(--green-60)}
.c-teal{background:var(--teal-60)}
.c-purple{background:var(--purple-60)}
.c-orange{background:var(--orange-50)}
.c-gray{background:var(--gray-70)}

/* Page header — column toggle floats over content, stays on scroll */
.page-header{position:sticky;top:0;z-index:2;height:0;display:flex;justify-content:flex-end;pointer-events:none}
.ph-right{pointer-events:auto}
.ph-right .seg-control{padding:var(--spacing-01);gap:var(--spacing-01)}
.ph-right .seg-control__btn{height:var(--btn-height-sm);padding:0 var(--spacing-03)}
.ph-right [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:var(--tooltip-padding);border-radius:var(--tooltip-radius);background:var(--background-inverse);color:var(--text-inverse);font:var(--tooltip-font);z-index:var(--z-tooltip);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast-02) var(--ease-standard-productive)}
.ph-right [data-tip]:hover::after{opacity:1}

/* Settings panel (right) — Carbon side-panel pattern */
.settings{background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--radius-04);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - var(--topbar-height) - var(--spacing-08));overflow:hidden;margin:var(--spacing-04);align-self:start;grid-column:3;grid-row:1;z-index:5}

/* Side panel structure */
.sp-scroll-area{overflow-y:auto}
.cds--side-panel__body{padding:var(--spacing-05);display:flex;flex-direction:column;gap:var(--spacing-05)}
/* Form — Carbon pattern */
.cds--form-item{display:flex;flex-direction:column;gap:var(--spacing-02)}
.cds--label{font:400 var(--t-12)/1.33 var(--font-sans);letter-spacing:0.32px;color:var(--text-secondary)}
.cds--text-input__field-wrapper{display:flex}
.cds--form__helper-text{font:400 var(--t-12)/1.33 var(--font-sans);letter-spacing:0.32px;color:var(--text-helper)}

/* Settings panel — actions bar with combo button */
.sp-actions-bar{border-bottom:1px solid var(--border-subtle-01);flex-shrink:0}


/* Label row — label + inline control */
.cds--label-row{display:flex;align-items:center;justify-content:space-between}

/* Undo / Redo */
.undo-redo-row{display:flex;gap:2px}
.undo-redo-btn{width:28px;height:28px;display:grid;place-items:center;background:transparent;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-02);padding:0}
.undo-redo-btn:hover:not(:disabled){background:var(--layer-hover-01);color:var(--icon-primary)}
.undo-redo-btn:disabled{color:var(--text-disabled);cursor:default}

/* Zoom — compact trigger + dropdown */
.zoom-wrap{position:relative}
.zoom-trigger{display:inline-flex;align-items:center;gap:var(--spacing-02);padding:0;background:transparent;border:none;color:var(--text-secondary);font:400 var(--t-12) var(--font-sans);letter-spacing:0.32px;cursor:pointer}
.zoom-trigger:hover{color:var(--text-primary)}
.zoom-trigger svg{color:var(--icon-secondary);flex-shrink:0}
.zoom-backdrop{position:fixed;inset:0;z-index:7999}
.zoom-dropdown{position:absolute;right:0;top:calc(100% + 4px);width:120px;background:var(--layer-01);border:1px solid var(--border-subtle-01);box-shadow:var(--shadow-sm);z-index:8000;padding:var(--spacing-02) 0}
.zoom-option{display:block;width:100%;padding:var(--spacing-03) var(--spacing-05);background:none;border:none;font:400 var(--font-size-325)/1.4 var(--font-sans);color:var(--text-primary);cursor:pointer;text-align:left}
.zoom-option:hover{background:var(--background-hover)}
.zoom-option--on{font-weight:600;color:var(--interactive)}


.seg{display:flex;background:var(--field-02);padding:2px;gap:0}
.seg button{flex:1;height:32px;background:transparent;border:none;font:400 var(--t-12) var(--font-sans);letter-spacing:0.16px;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg button.on{background:var(--blue-60);color:var(--white);font-weight:600}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.seg button svg{width:14px;height:14px}

/* Rail picker — segmented row of existing rails plus "+ New rail" */
.rail-picker .seg.rail-seg{flex-wrap:wrap;background:var(--field-02);gap:2px}
.rail-picker .seg.rail-seg button{min-width:64px;flex:0 1 auto;padding:0 10px}
.rail-picker .rail-add-btn{flex:0 0 auto;background:transparent;border:1px dashed var(--border-subtle-02);color:var(--text-secondary);height:32px;padding:0 10px;font:600 var(--font-size-275) var(--font-sans);letter-spacing:0.32px;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.rail-picker .rail-add-btn:hover{border-color:var(--border-interactive);color:var(--text-primary)}

/* Per-side rail config — count stepper + per-rail size picker */
.rails-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-03)}
.rails-row{display:flex;flex-direction:column;background:var(--field-02);padding:var(--spacing-03) var(--spacing-04);gap:var(--spacing-03)}
.rails-row-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-03)}
.rails-label{font:500 var(--t-12) var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px;text-transform:uppercase}
.rails-sizes{display:flex;flex-direction:column;gap:var(--spacing-02);padding-top:var(--spacing-02);border-top:1px solid var(--border-subtle-02)}
.rails-size-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-03)}
.rails-size-lbl{font:500 var(--font-size-275) var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px}
.seg-xs{height:24px}
.seg-xs button{height:24px;min-width:28px;padding:0 6px;font:600 var(--font-size-275) var(--font-sans)}
.rails-stepper{display:inline-flex;align-items:center;gap:0;background:var(--layer-01);border:1px solid var(--border-subtle-02)}
.rails-stepper .stp{width:28px;height:28px;background:transparent;border:none;display:grid;place-items:center;cursor:pointer;color:var(--icon-primary);padding:0}
.rails-stepper .stp:hover:not(:disabled){background:var(--layer-hover-01)}
.rails-stepper .stp:disabled{opacity:0.35;cursor:not-allowed}
.rails-stepper .stp-val{min-width:24px;text-align:center;font:600 var(--font-size-325) var(--font-mono);color:var(--text-primary)}

/* Visual pickers */
/* Cross-layout size picker — page mock in the center, S/M/L row on each side.
   The center rectangle's aspect ratio mirrors the document orientation. */
.size-picker{display:grid;grid-template-columns:32px auto 32px;grid-template-rows:28px auto 28px;
  gap:var(--spacing-02);background:var(--field-02);padding:var(--spacing-02);justify-content:center}
.size-picker.sp-portrait{grid-template-rows:28px 130px 28px}
.size-picker.sp-portrait .sp-center{width:92px}
.size-picker.sp-landscape{grid-template-rows:28px 92px 28px}
.size-picker.sp-landscape .sp-center{width:130px}
.size-picker .sp-side{display:flex;gap:0;min-width:0;min-height:0}
.size-picker .sp-top{grid-row:1;grid-column:2;flex-direction:row}
.size-picker .sp-bottom{grid-row:3;grid-column:2;flex-direction:row}
.size-picker .sp-left{grid-row:2;grid-column:1;flex-direction:column}
.size-picker .sp-right{grid-row:2;grid-column:3;flex-direction:column}
.size-picker .sp-side .sp-btn{border-radius:var(--radius-03)}
.size-picker .sp-center{grid-row:2;grid-column:2;background:var(--white);
  border:1px solid var(--border-subtle-02);display:grid;place-items:center;
  color:var(--text-secondary);font:500 var(--font-size-275) var(--font-sans);letter-spacing:0.32px;
  text-transform:uppercase}
.size-picker .sp-btn{flex:1;min-width:0;min-height:0;height:auto;padding:0;
  font:600 var(--font-size-275) var(--font-mono);letter-spacing:0.32px;justify-content:center}


.layout-row{display:flex;align-items:flex-end;gap:var(--spacing-03);padding-bottom:var(--spacing-05)}

/* Tab editor — tabs tab of settings */
.tab-chip-list{display:flex;flex-direction:column;gap:var(--spacing-02)}
.tab-chip-row{display:grid;grid-template-columns:14px 1fr 24px 24px;gap:var(--spacing-03);align-items:center;padding:var(--spacing-02) var(--spacing-03);background:var(--layer-01);border:1px solid var(--border-subtle-01);cursor:grab}
.tab-chip-row:hover{background:var(--layer-hover-01)}
.tab-chip-row.selected{border-color:var(--blue-60);background:var(--blue-10)}
.tab-chip-row .dot{width:12px;height:12px;flex-shrink:0}
.tab-chip-row input{border:none;background:transparent;font:400 13px var(--font-sans);color:var(--text-primary);outline:none;min-width:0;padding:2px 4px}
.tab-chip-row input:focus{background:var(--field-02)}
.tab-chip-row .del, .tab-chip-row .drg{background:transparent;border:none;color:var(--icon-secondary);cursor:pointer;padding:2px;display:grid;place-items:center}
.tab-chip-row .del:hover{color:var(--red-60)}

.color-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--spacing-02)}
.color-swatches button{height:24px;border:2px solid transparent;cursor:pointer;padding:0}
.color-swatches button.on{border-color:var(--black);box-shadow:inset 0 0 0 2px var(--white)}

/* Tab properties subpanel */
.tab-props{padding:var(--spacing-04);background:var(--layer-01);border:1px solid var(--border-subtle-01);display:flex;flex-direction:column;gap:var(--spacing-04)}

/* Modal close button */
.modal__header .sub{margin:var(--spacing-02) 0 0;font:var(--font-weight-regular) var(--font-size-325)/1.43 var(--font-family-sans);letter-spacing:var(--font-letter-spacing-loose);color:var(--text-secondary)}
.confirm-public{margin:0;font:var(--font-weight-regular) var(--font-size-350)/1.5 var(--font-family-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-loose)}

/* Save document modal */
.save-modal{width:min(540px,92vw)}
.save-body{display:flex;flex-direction:column;gap:20px}
.save-field{display:flex;flex-direction:column;gap:4px}
.save-lbl{font:400 12px var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px}
.save-cats{display:flex;flex-wrap:wrap;gap:8px}
.save-cat{height:32px;padding:0 14px;background:transparent;border:1px solid var(--border-strong-01);font:400 14px var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px;cursor:pointer;transition:background 80ms,border-color 80ms,color 80ms}
.save-cat:hover{background:var(--layer-hover-01);color:var(--text-primary)}
.save-cat:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.save-cat.on{background:var(--button-primary);border-color:var(--button-primary);color:var(--text-on-color)}
.save-tag-input{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;min-height:40px;background:var(--field-01);border-bottom:1px solid var(--border-strong-01);align-items:center}
.save-tag-input:focus-within{border-bottom:2px solid var(--focus)}
.save-tag-input input{border:none;background:transparent;font:400 14px var(--font-sans);color:var(--text-primary);outline:none;flex:1;min-width:80px;padding:0}
.save-tag-input input::placeholder{color:var(--text-placeholder)}
.save-tag{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 8px;background:var(--layer-accent-01, #EFEBE3);font:400 12px var(--font-sans);color:var(--text-primary);letter-spacing:0.16px}
.save-tag button{background:transparent;border:none;color:var(--text-secondary);font:400 14px var(--font-sans);cursor:pointer;padding:0 2px;line-height:1}
.save-tag button:hover{color:var(--text-primary)}
.save-help{font:400 12px var(--font-sans);color:var(--text-helper);letter-spacing:0.16px}
.save-divider{height:1px;background:var(--border-subtle-01)}
.save-share{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:4px 0}
.save-share input[type="checkbox"]{width:16px;height:16px;margin:2px 0 0;accent-color:var(--interactive);flex-shrink:0}
.save-share-text{display:flex;flex-direction:column;gap:2px}
.save-share-title{font:600 14px var(--font-sans);color:var(--text-primary);letter-spacing:0.16px}
.save-share-desc{font:400 12px/1.4 var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px}

/* Template modal */
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tcard{background:var(--layer-01);border:1px solid var(--border-subtle-01);cursor:pointer;display:flex;flex-direction:column;padding:0;text-align:left;transition:border-color 110ms}
.tcard:hover{border-color:var(--border-interactive)}
.tcard:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.tcard.blank{border-style:dashed}
.tcard .thumb{aspect-ratio:210/297;background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--border-subtle-01);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.tcard .tpill{position:absolute;left:0;width:8px;height:22px}
.tcard .thumb-h{height:5px;background:var(--black);width:65%}
.tcard .thumb-l{height:2px;background:var(--gray-40);width:100%}
.tcard .thumb-l.s{width:70%}
.tcard .thumb-l.xs{width:40%}
.tcard .thumb-box{border:1.5px solid var(--gray-40);padding:4px;display:flex;flex-direction:column;gap:2px;margin-top:auto}
.tcard .tmeta{padding:10px 12px}
.tcard .tmeta .ttl{font:600 13px/1.29 var(--font-sans);color:var(--text-primary)}
.tcard .tmeta .dsc{font:400 12px/1.33 var(--font-sans);color:var(--text-secondary);margin-top:3px}
.tcard .tmeta .tag{display:inline-block;margin-top:6px;font:400 10px var(--font-mono);color:var(--text-helper);letter-spacing:0.32px;text-transform:uppercase}
.tcard.blank .thumb{display:grid;place-items:center;padding:0;color:var(--icon-secondary)}
.tcard.blank .thumb svg{width:40px;height:40px}

/* Export panel */
.export-panel{display:flex;flex-direction:column;gap:16px}
.export-opt{display:flex;gap:12px;padding:14px;background:var(--layer-02);border:1px solid var(--border-subtle-01);cursor:pointer;align-items:flex-start}
.export-opt:hover{border-color:var(--border-interactive)}
.export-opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.export-opt.on{border-color:var(--blue-60);background:var(--blue-10)}
.export-opt .radio{width:16px;height:16px;border:1.5px solid var(--gray-60);border-radius:50%;flex-shrink:0;margin-top:2px;display:grid;place-items:center}
.export-opt.on .radio{border-color:var(--blue-60)}
.export-opt.on .radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue-60)}
.export-opt .eo-body h4{margin:0;font:600 14px/1.43 var(--font-sans);letter-spacing:0.16px}
.export-opt .eo-body p{margin:4px 0 0;font:400 12px/1.4 var(--font-sans);color:var(--text-secondary);letter-spacing:0.16px}
.page-checklist{display:flex;flex-direction:column;gap:6px;background:var(--layer-02);padding:10px;max-height:240px;overflow:auto;border:1px solid var(--border-subtle-01)}
.page-checklist label{display:flex;align-items:center;gap:10px;font:400 13px var(--font-sans);color:var(--text-primary);cursor:pointer;padding:4px}
.page-checklist label:hover{background:var(--layer-hover-01)}
.page-checklist input{width:14px;height:14px;margin:0}

/* ──────────────────────────────────────────────────────────────────────
   Inline tab editing (active when page is in edit mode).
   Lets users rename, recolor, delete tabs and add/remove tabs/rails
   directly on the canvas without leaving for the structure panel. */

/* Make sure ghost-rail siblings still get the inner-rail separator */
.side.side-editing{position:relative}

/* Editable tab chip — same look as a button but renders as a div so we can
   nest interactive children. Keep current/dragging affordances identical. */
.tab-chip.editable{outline:none;box-sizing:border-box}
.tab-chip.editable:hover{opacity:0.85}
.tab-chip.editable:focus-visible{box-shadow:inset 0 0 0 2px var(--white),0 0 0 2px var(--blue-60)}

/* Empty tab — no label. In preview mode not clickable; in edit mode clickable to fill in. */
.tab-chip.empty{color:transparent;box-shadow:none}
.tab-chip.empty:hover{opacity:1}
.tab-chip.empty:not(.editable){cursor:default;pointer-events:none}
.rail-l .tab-chip.c-none.empty:not(.editable) + .tab-chip.c-none.empty:not(.editable),
.rail-r .tab-chip.c-none.empty:not(.editable) + .tab-chip.c-none.empty:not(.editable){margin-top:-1px}
.rail-t .tab-chip.c-none.empty:not(.editable) + .tab-chip.c-none.empty:not(.editable),
.rail-b .tab-chip.c-none.empty:not(.editable) + .tab-chip.c-none.empty:not(.editable){margin-left:-1px}
.tab-chip.empty.editable{color:var(--text-helper);box-shadow:inset 0 0 0 1px var(--gray-30);cursor:pointer}
.tab-chip.empty.editable:hover{box-shadow:inset 0 0 0 1px var(--gray-40)}
.tab-chip.empty.current:not(.editable){box-shadow:none}
.tab-chip.empty.current.editable{box-shadow:inset 0 0 0 2px var(--gray-50)}

/* Ghost "+" chip appended at the end of each rail — adds a new tab to that rail */
.tab-chip-add{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px dashed var(--gray-40);color:var(--text-helper);
  cursor:pointer;padding:0;transition:background 100ms,color 100ms,border-color 100ms;font:inherit}
.tab-chip-add:hover{background:var(--color-bg-fill-transparent-hover);border-color:var(--blue-60);color:var(--blue-60)}
.tab-chip-add svg{display:block}
.tab-chip-add.rail-t,.tab-chip-add.rail-b{height:100%;min-width:36px;padding:0 8px}
.tab-chip-add.rail-l,.tab-chip-add.rail-r{width:100%;min-height:36px;padding:8px 0}
/* Empty rails get a slightly more prominent + button so the rail isn't hollow */
.tab-rail-empty .tab-chip-add{flex:1}

/* Remove-rail trash button — only visible on empty rails in edit mode */
.tab-rail-remove{position:absolute;display:grid;place-items:center;
  width:22px;height:22px;border:1px solid var(--border-subtle-02);background:var(--layer-01);
  color:var(--icon-secondary);cursor:pointer;padding:0;z-index:3;
  transition:background 100ms,color 100ms,border-color 100ms}
.tab-rail-remove:hover{background:var(--red-10);color:var(--red-60);border-color:var(--red-60)}
.tab-rail{position:relative}
.tab-rail-remove.rail-l{top:4px;right:4px}
.tab-rail-remove.rail-r{top:4px;left:4px}
.tab-rail-remove.rail-t{bottom:4px;right:4px}
.tab-rail-remove.rail-b{top:4px;right:4px}

/* "Add rail" strip — inside edge (closest to content) */
.tab-rail-add{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:1px dashed var(--gray-40);color:var(--text-helper);
  cursor:pointer;font:500 10px var(--font-sans);letter-spacing:0.32px;text-transform:uppercase;
  padding:6px 10px;transition:background 100ms,color 100ms,border-color 100ms;order:-1}
.tab-rail-add:hover{background:var(--color-bg-fill-transparent-hover);border-color:var(--blue-60);color:var(--blue-60)}
.tab-rail-add svg{display:block}
.tab-rail-add.rail-t,.tab-rail-add.rail-b{height:24px;align-self:stretch;width:auto;min-width:120px}
.tab-rail-add.rail-l,.tab-rail-add.rail-r{width:24px;align-self:stretch;height:auto;min-height:80px;padding:0}

/* Tab edit popover — anchored to a clicked chip, lets user rename / recolor / delete */
.tab-edit-pop{background:var(--layer-01);border:1px solid var(--border-subtle-01);
  border-radius:var(--menu-radius);box-shadow:var(--menu-shadow);
  font:var(--input-font);font-family:var(--font-family-sans);color:var(--text-primary);
  animation:tepIn 110ms var(--ease-entrance-productive)}
@keyframes tepIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
.tep-hd{display:flex;align-items:center;gap:var(--btn-gap);padding:var(--spacing-03);border-bottom:1px solid var(--border-subtle-01)}
.tep-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.08)}
.tep-dot.tep-dot-empty{border:1px dashed var(--gray-40);background:var(--layer-02)}
.tep-input{flex:1;min-width:0;border:var(--input-border-width) solid var(--border-strong-01);border-radius:var(--input-radius);
  background:var(--field-02);color:var(--text-primary);
  font:var(--btn-font-sm);font-family:var(--font-family-sans);letter-spacing:0.32px;text-transform:uppercase;
  padding:0 var(--input-padding-x);height:var(--input-height-sm);outline:none}
.tep-input:focus{border-color:var(--focus);box-shadow:var(--input-focus-ring)}
.tep-icon{width:var(--btn-height-sm);height:var(--btn-height-sm);display:grid;place-items:center;background:transparent;
  border:none;border-radius:var(--btn-radius);color:var(--icon-secondary);cursor:pointer;padding:0;flex-shrink:0}
.tep-icon:hover{background:var(--layer-hover-01);color:var(--icon-primary)}

.tep-section{padding:var(--spacing-03) var(--spacing-03) var(--spacing-02)}
.tep-lbl{font:var(--btn-font-sm);font-family:var(--font-family-sans);font-weight:600;font-size:10px;
  letter-spacing:0.32px;
  color:var(--text-secondary);margin-bottom:var(--spacing-02)}
.tep-swatches{display:flex;flex-wrap:wrap;gap:var(--spacing-02)}
.tep-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;outline:1px solid rgba(0,0,0,0.08);outline-offset:-1px}
.tep-swatch:hover{transform:scale(1.08)}
.tep-swatch.on{border-color:var(--text-primary);outline:none;box-shadow:0 0 0 1px var(--text-primary)}
.tep-swatch.tep-swatch-none{background:#fff;outline:1px dashed var(--gray-40);
  outline-offset:-1px;position:relative}
.tep-swatch.tep-swatch-none::after{content:'';position:absolute;inset:3px;
  background:linear-gradient(45deg,transparent calc(50% - 1px),var(--gray-50) 50%,transparent calc(50% + 1px))}
.tep-swatch.tep-swatch-none.on{outline:none;box-shadow:0 0 0 1px var(--text-primary)}

.tep-section-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-03);
  padding:var(--spacing-02) var(--spacing-03) var(--spacing-03)}
.tep-section-row .tep-lbl{margin-bottom:0}
.tep-stepper{display:inline-flex;align-items:center;gap:0;background:var(--field-02);
  border:1px solid var(--border-subtle-02);border-radius:var(--input-radius)}
.tep-stp{width:var(--btn-height-sm);height:var(--btn-height-sm);display:grid;place-items:center;background:transparent;
  border:none;color:var(--icon-secondary);cursor:pointer;padding:0}
.tep-stp:hover:not(:disabled){background:var(--layer-hover-02);color:var(--icon-primary)}
.tep-stp:disabled{opacity:0.3;cursor:default}
.tep-stp-val{min-width:22px;height:var(--btn-height-sm);display:grid;place-items:center;
  font:600 12px var(--font-family-sans);color:var(--text-primary);
  border-left:1px solid var(--border-subtle-02);border-right:1px solid var(--border-subtle-02);
  padding:0 var(--spacing-02)}

.tep-foot{padding:var(--spacing-02) var(--spacing-03);border-top:1px solid var(--border-subtle-01);background:var(--layer-02);border-radius:0 0 var(--menu-radius) var(--menu-radius)}
.tep-del{display:inline-flex;align-items:center;gap:var(--btn-gap);height:var(--btn-height-sm);padding:var(--btn-padding-sm);
  background:transparent;border:1px solid var(--button-danger-secondary);border-radius:var(--btn-radius);color:var(--button-danger-secondary);
  font:var(--btn-font-sm);font-family:var(--font-family-sans);cursor:pointer;
  transition:background 100ms,border-color 100ms,color 100ms}
.tep-del:hover{background:var(--button-danger-primary);border-color:var(--button-danger-primary);color:var(--text-on-color)}
.tep-del svg{display:block}

/* All pages render in DOM; hide non-current on screen */
.print-page.screen-hidden{display:none}

/* ──────────────────────────────────────────────────────────────────
   Print / Save as PDF — hide all editor chrome, show all pages */

@media print {
  .app-render{page:render-page}
}
@page render-page{size:A4;margin:0}
@media print {
  .app-render,.app-render html,.app-render body{overflow:visible;height:auto;background:#fff;margin:0}
  .app-render{display:block;height:auto;overflow:visible}
  .app-render .editor{display:block;height:auto;overflow:visible}
  .app-render .workspace-wrap{overflow:visible;height:auto !important;padding:0 !important}
  .app-render .workspace{overflow:visible;background:#fff;padding:0 !important;display:block}
  .app-render .zoom-layer{zoom:1 !important;display:block}
  .app-render .print-page.screen-hidden{display:block}
  .app-render .print-page{page-break-after:always;page-break-inside:avoid}
  .app-render .page{box-shadow:none;margin:0;width:100%;height:100vh;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .app-render .page-content{overflow:hidden}
  .app-render .tab-chip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Responsive toggle group */
.responsive-toggle-group{display:flex;flex-direction:column;gap:var(--spacing-02)}

/* Drawer panels */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:30;animation:drawerFadeIn var(--duration-moderate-01) var(--ease-entrance-productive)}
@keyframes drawerFadeIn{from{opacity:0}to{opacity:1}}

.drawer{position:fixed;top:var(--topbar-height);bottom:0;width:280px;background:var(--layer-01);border:1px solid var(--border-subtle-01);box-shadow:var(--shadow-400);z-index:31;display:flex;flex-direction:column;transition:transform var(--duration-moderate-02) var(--ease-entrance-productive)}
.drawer--left{left:0;border-left:none;border-radius:0 var(--radius-04) var(--radius-04) 0;transform:translateX(-100%)}
.drawer--right{right:0;border-right:none;border-radius:var(--radius-04) 0 0 var(--radius-04);transform:translateX(100%)}
.drawer--open{transform:translateX(0)}
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-04) var(--spacing-05);border-bottom:1px solid var(--border-subtle-01);flex-shrink:0}
.drawer__title{font:var(--fw-semibold) var(--font-size-325)/1 var(--font-sans);color:var(--text-primary);letter-spacing:0.16px}
.drawer .pagelist{position:static !important;border:none;border-radius:0;box-shadow:none;margin:0;max-height:none;overflow-y:auto;flex:1;background:transparent;height:auto}
.drawer .pagelist .pl-header{display:none}
.drawer .settings{position:static;border:none;border-radius:0;box-shadow:none;margin:0;max-height:none;overflow-y:auto;flex:1;background:transparent;grid-column:auto}

/* Responsive: toolbar + brandbar */
@media (max-width: 1100px){
  .bb-doc-fields > .chip{display:none}
}
@media (max-width: 900px){
  .bb-unsaved-label{display:none}
}
@media (max-width: 800px){
  .bb-btn-label{display:none}
  .bb-action-btn{min-width:var(--btn-height-md);padding:0 var(--spacing-03);justify-content:center}
}
@media (max-width: 768px){
  .bb-title-pill{max-width:200px}
}
@media (max-width: 600px){
  .bb-title-pill{max-width:80px}
  .bb-title-caret{display:none}
  .bb-title-edit{display:inline-flex}
  .brandbar-name{display:none}
  .brandbar-logo{padding-right:0}
  .di-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:var(--z-dropdown);animation:drawerFadeIn var(--duration-moderate-01) var(--ease-entrance-productive)}
  .di-popover{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:80vh;border-radius:var(--radius-04) var(--radius-04) 0 0;overflow-y:auto;animation:bsheetIn var(--duration-moderate-02) var(--ease-entrance-productive);z-index:calc(var(--z-dropdown) + 1)}
  .di-suggest{position:static}
  body.guest .brandbar{padding:0 var(--spacing-04)}
  body.guest .bb-nav-link{padding:0 var(--spacing-03)}
  body.guest .brandbar-actions{gap:var(--spacing-02)}
}
@keyframes bsheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Responsive: toggle card top-left, toolbar beside it, document full width */
.editor.responsive-mode{overflow-x:hidden}
.editor.responsive-mode .workspace-wrap{padding-left:var(--spacing-02);padding-right:var(--spacing-02)}
@media (max-width: 900px){
  .editor.responsive-mode .workspace-wrap{padding-left:0;padding-right:0}
  .editor.responsive-mode .tt-toolbar{margin:0;width:100%;max-width:none;top:0;border-left:none;border-right:none;border-top:none;border-radius:0;box-shadow:none}
}
.editor.responsive-mode .tt-toolbar--expanded{flex-wrap:wrap}
.editor.responsive-mode .workspace{align-items:flex-start;padding-left:var(--spacing-03);padding-right:var(--spacing-03);overflow-x:auto}
.editor.responsive-mode .zoom-layer{margin:0 auto}