/* Production additions on top of the design-package style.css. */
body.booting .boot{display:grid}
.boot{position:fixed;inset:0;display:none;place-items:center;background:var(--dark)}
.boot img{border-radius:50%;opacity:.9;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.brand-logo{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--paper)}
.login-screen .login-preview{width:min(1000px,100%);margin:0}
.login-logo{width:150px;height:150px;border-radius:50%;box-shadow:0 10px 40px #00000040}
.login-form>input{color:var(--ink)!important}
.login-form #mfaWrap input{display:block;width:100%;border:1px solid #e2e7ed;padding:11px;border-radius:4px;margin-bottom:15px;background:#fafcfe;font:12px 'CRM Sans',sans-serif;letter-spacing:4px}
.skeleton{display:grid;gap:14px;padding:6px 0}
.skeleton div{height:64px;border-radius:7px;background:linear-gradient(90deg,#eef1f5,#f7f9fb,#eef1f5);background-size:200% 100%;animation:sk 1.2s linear infinite}
.skeleton div:first-child{height:38px;width:45%}
@keyframes sk{to{background-position:-200% 0}}
.state-panel{padding:28px;max-width:640px}
.state-panel h2{font-size:15px;font-weight:500;margin:0 0 8px}
.state-panel p{font-size:11px;color:var(--muted)}
.grow{flex:1;min-width:0}
.check-row .button.tiny{flex-shrink:0;align-self:center}
.check-row .grow>small{white-space:normal;line-height:1.8}
.pre{white-space:pre-wrap}
.detail-box .pre{margin-top:10px;color:#4d5b6a}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;word-break:break-all;color:#35414e}
.mono.big{font-size:15px;letter-spacing:1px;padding:10px;border:1px dashed #cfd8e2;border-radius:5px;background:#fff}
.mini-select{border:1px solid var(--line);border-radius:4px;background:#fff;font-size:10px;padding:3px 5px;max-width:130px;color:var(--ink)}
.attach{margin-top:6px;font-size:10px;color:#6c7885}
.tpl-box .form-field{margin-bottom:10px}
.cal-title{display:inline-flex;align-items:center;gap:8px;font:22px Georgia}
.cal-cell.out{background:#fafbfc}
.cal-cell.out .day{opacity:.4}
.cal-event.done{opacity:.55;text-decoration:line-through}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.blueprint-grid .span2{grid-column:1/-1}
.integration-card .grow{flex:1}
dialog.wide{width:min(720px,calc(100vw - 32px))}
.quote-head,.quote-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.4fr) 70px minmax(0,1.2fr);gap:6px;margin-bottom:6px}
.quote-head span{font-size:9px;color:#8a97a4}
.quote-row input,.quote-row select{width:100%;padding:8px;border:1px solid #d5dde6;border-radius:4px;font-size:11px;background:#fff;color:var(--ink)}
.offline-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:#a8762c;color:#fff;font-size:11px;text-align:center;padding:8px 12px}
body.is-offline button[type=submit],body.is-offline #sendButton{pointer-events:none;opacity:.4}
.notice[role=button]{cursor:pointer}
/* 44px touch targets on phones (5.1) */
@media(max-width:760px){
  .button,.tab,.nav-button,.icon-button,.conversation{min-height:44px}
  .check{min-width:30px;width:30px;height:30px;min-height:30px}
  .button.tiny{min-height:36px}
  .quote-head{display:none}
  .quote-row{grid-template-columns:1fr 1fr;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .quote-row input:first-child{grid-column:1/-1}
  .login-logo{width:100px;height:100px}
  .cal-title{font-size:17px}
  .blueprint-grid .span2{grid-column:auto}
}
a.button{text-decoration:none;color:inherit}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:64px!important;width:100%}
.login-form .pw-wrap input{display:block;border:1px solid #e2e7ed;padding:11px;border-radius:4px;margin-bottom:15px;background:#fafcfe;font:12px 'CRM Sans','CRM Thai','CRM CJK',sans-serif;color:var(--ink)}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--gold);font-size:11px;padding:6px 8px;min-height:32px}
.login-form .pw-wrap .pw-toggle{top:calc(50% - 7.5px)}