/* Shared responsive frame, authentication and device/offline controls. */
html { scrollbar-gutter:stable; }
body { -webkit-tap-highlight-color:transparent; }
button,input,select,textarea,summary { touch-action:manipulation; }
button,a,input,select,textarea,summary { scroll-margin:90px; }
.auth-gate { position:fixed; inset:0; z-index:20000; display:grid; place-items:center; padding:clamp(24px,5vw,80px); overflow:auto; background:radial-gradient(ellipse at 15% 5%,#eeecff 0,transparent 50%),#f7f8fc; }
.login-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,420px); gap:clamp(40px,8vw,120px); width:min(1020px,100%); align-items:center; }
.login-intro { min-width:0; }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:48px; font-size:18px; letter-spacing:-.04em; }
.login-brand .auth-mark { margin:0; width:42px; height:42px; display:grid; place-items:center; background:var(--accent); color:white; border-radius:13px; font-size:27px; line-height:1; }
.login-intro h1 { margin:16px 0; font-size:clamp(36px,4.5vw,60px); font-weight:650; letter-spacing:-.055em; line-height:1.08; }
.login-description { max-width:390px; font-size:17px; line-height:1.65; color:#6a7285; margin:20px 0 30px; }
.login-preview { background:#fff9; border:1px solid #e4e2f2; border-radius:18px; max-width:420px; padding:20px 24px; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:650; margin-bottom:20px; }
.preview-pill { padding:5px 10px; border-radius:7px; background:var(--accent-soft); color:var(--accent); font-weight:500; font-size:11px; }
.preview-task { display:flex; align-items:center; gap:13px; padding:12px 0; }
.preview-task div { display:grid; gap:5px; }
.preview-task strong { font-size:13px; font-weight:600; }
.preview-task div span { color:var(--muted); font-size:12px; line-height:1.5; }
.preview-check,.preview-dot { display:grid; place-items:center; flex:none; width:23px; height:23px; border:1px solid #e0ddef; border-radius:7px; }
.preview-check { color:var(--accent); background:var(--accent-soft); border-color:#dbd6ff; }
.login-device-note { color:#82889a; font-size:12px; margin:22px 0 0; }
.auth-card { width:100%; text-align:left; padding:36px; background:#fff; border:1px solid #e8e9f0; border-radius:22px; box-shadow:0 18px 60px #24214d09; }
.auth-card h2 { font-size:27px; letter-spacing:-.045em; line-height:1.25; margin:12px 0; }
.login-card-description { color:var(--muted); font-size:14px; line-height:1.65; margin-bottom:28px; }
.auth-card form { display:grid; gap:0; }
.auth-card label { display:block; font-size:13px; font-weight:550; margin:0 0 9px; }
.password-field { display:flex; align-items:center; border:1px solid #dde0e9; border-radius:11px; overflow:hidden; background:#fbfbfd; }
.password-field:focus-within { outline:3px solid #e1dcff; border-color:var(--accent); }
.auth-card .password-field input { min-width:0; width:100%; border:0; background:transparent; padding:14px; font-size:16px; height:52px; outline:0; border-radius:0; }
.password-field button { border:0; color:var(--muted); background:transparent; padding:12px; min-width:78px; min-height:48px; font-size:12px; }
.auth-card .remember-device { display:flex; align-items:flex-start; gap:10px; margin:22px 0 24px; font-size:12px; line-height:1.5; font-weight:500; cursor:pointer; }
.remember-device input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); }
.remember-device span small { display:block; color:#8a90a0; font-size:11px; margin-top:4px; font-weight:400; }
.auth-card #login-submit { width:100%; display:flex; justify-content:center; align-items:center; gap:16px; min-height:50px; font-size:14px; border-radius:11px; }
.auth-error { min-height:0; margin:14px 0 0; font-size:13px; line-height:1.6; }
.auth-error:empty { display:none; }
.login-security { font-size:11px; text-align:center; color:#8a91a0; margin:22px 0 0; }
body.is-locked { overflow:hidden; }
body.is-locked .shell,body.is-locked .bottom-nav { display:none !important; }
.connection-strip { display:flex; gap:16px; justify-content:space-between; align-items:center; background:#f1efff; border:1px solid #e4dfff; color:#685aa2; border-radius:10px; padding:10px 14px; margin:0 0 18px; font-size:12px; line-height:1.5; }
.connection-strip.has-errors { background:#fff5e8; color:#906333; border-color:#f1dfc1; }
.connection-strip button { flex:none; min-height:40px; }
.pending-badge { color:#8b683c; background:#fff4e1; border-radius:5px; padding:3px 6px; font-size:10px; white-space:nowrap; }
.pending-badge.is-error { color:#a34646; background:#fff0f0; }
.device-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.device-row strong { font-size:13px; font-weight:600; }
.device-row p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.device-current { padding:3px 7px; margin-left:6px; border-radius:5px; background:var(--accent-soft); color:var(--accent); font-size:10px; }
.device-row button { min-height:44px; flex:none; }
#revoke-other-devices { margin-top:16px; }
.outbox-item { padding:16px; border:1px solid var(--line); border-radius:12px; margin:12px 0; }
.outbox-item strong { font-size:14px; overflow-wrap:anywhere; }
.outbox-item p { color:var(--muted); font-size:12px; line-height:1.6; white-space:pre-wrap; }
.outbox-item .outbox-error { color:#a35943; }
.outbox-actions { display:flex; gap:8px; flex-wrap:wrap; }
.outbox-actions button { min-height:42px; font-size:12px; }
.main[data-active-tab="more"] .right-column { width:100%; max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
.main[data-active-tab="more"] .connections-panel,.main[data-active-tab="more"] .install-panel { grid-column:1/-1; }
.main[data-active-tab="more"] .content-grid { display:block; }
.panel { min-width:0; }
.section-heading h2,.task-title,.kanban-title,.team-ticket-title { overflow-wrap:anywhere; }
.entry-dialog { overscroll-behavior:contain; scrollbar-gutter:stable; }
.dialog-heading { position:sticky; top:-20px; z-index:3; padding:16px 0 12px; background:#fff; }
.entry-dialog input,.entry-dialog textarea,.settings-group input,.settings-group textarea { font-size:16px; }
.icon-button { min-width:44px; min-height:44px; }
.task-edit,.check-button { min-width:40px; min-height:40px; }
.settings-group summary { min-height:44px; }
.settings-group input,.settings-group select { min-height:46px; font-size:14px; }
.form-grid > * { min-width:0; }
.main { padding-bottom:60px; }
.primary-nav-item,.nav-item { min-height:44px; }
.workspace-health { max-width:90ch; }
.local-note,.form-note,.board-preview { color:var(--muted); font-size:12px; line-height:1.65; }
@media(min-width:1800px) { .main { max-width:1600px; } }
@media(min-width:901px) and (max-width:1200px) { .shell { grid-template-columns:210px minmax(0,1fr); }.sidebar { width:210px; padding-left:12px; padding-right:12px; }.main { padding:28px 24px 60px; }.content-grid { grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr); } }
@media(max-width:1000px) { .main[data-active-tab="more"] .right-column { grid-template-columns:1fr; }.login-layout { gap:40px; }.auth-card { padding:28px; } }
@media(min-width:650px) and (max-width:900px) { .main[data-active-tab="today"] .content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.main[data-active-tab="today"] .left-column,.main[data-active-tab="today"] .right-column { display:flex; flex-direction:column; gap:16px; }.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }.metric { min-height:100px; padding:14px; }.metric strong { font-size:25px; }.metric > span { font-size:11px; }.panel { padding:18px; }.topbar { align-items:center; } }
@media(max-width:900px) { .main { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }.bottom-nav { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }.bottom-nav-button { min-height:48px; }.sidebar .brand { min-height:44px; }.sidebar #area-nav .nav-item { min-height:40px; }.entry-dialog .dialog-actions { padding-bottom:calc(8px + env(safe-area-inset-bottom)); } }
@media(max-width:760px) { .auth-gate { padding:32px 22px; align-items:center; }.login-layout { max-width:460px; display:block; }.login-brand { margin-bottom:24px; }.login-intro .eyebrow,.login-preview,.login-device-note { display:none; }.login-intro h1 { font-size:34px; line-height:1.12; }.login-intro h1 br { display:none; }.login-description { font-size:14px; margin:14px 0 28px; }.auth-card { border-radius:18px; padding:28px; }.auth-card .eyebrow { display:none; }.auth-card h2 { font-size:24px; }.login-card-description { margin-bottom:24px; } }
@media(max-width:600px) { .main { padding-left:14px; padding-right:14px; }.topbar { display:flex; align-items:flex-start; flex-wrap:wrap; gap:14px; }.topbar-actions { width:100%; }.topbar-actions button { flex:1; margin-top:0 !important; min-height:44px; font-size:13px; }.connection-strip { align-items:flex-start; flex-direction:column; gap:4px; padding:10px 12px; }.connection-strip button { padding:2px 0; }.task-row { align-items:flex-start; padding:14px 0; }.task-meta { line-height:1.8; }.task-title { font-size:14px; }.task-toolbar { gap:10px; }.assignee-filter-label select { min-height:44px; }.filter-button { min-height:42px; }.section-heading { gap:10px; }.dialog-heading { top:-18px; padding-top:12px; }.entry-dialog .dialog-actions { bottom:-18px; }.dialog-actions .primary-button { flex:1; }.capture-tools { flex-wrap:wrap; }.crm-search { flex-wrap:wrap; }.crm-search input { min-width:180px; }.team-grid { gap:14px; }.auth-gate { padding:24px 16px; }.auth-card { padding:24px; }.login-brand { margin-bottom:20px; font-size:16px; }.login-intro h1 { font-size:30px; }.login-description { margin-bottom:24px; }.auth-card label.remember-device { font-size:12px; }.device-row { flex-wrap:wrap; }.device-row > div { min-width:0; }.activity-row { grid-template-columns:1fr; gap:4px; } }
@media(max-height:600px) and (min-width:650px) { .auth-gate { padding:24px; align-items:start; }.login-preview,.login-device-note { display:none; }.login-brand { margin-bottom:24px; }.login-layout { align-items:start; }.login-intro h1 { font-size:40px; }.entry-dialog { max-height:calc(100dvh - 16px); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }