/* Responsive preview: desktop retains the annual roadmap; phones start with project cards. */
.mobile-header,.mobile-bottom-nav,.mobile-project-list,.mobile-heading-label{display:none}
@media(max-width:700px){
:root{--project-col:155px;font-size:14px}.sidebar,.topbar{display:none}.workspace{width:100%;margin-left:0}.mobile-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#0b0b0b;padding:20px 20px 17px;border-bottom:1px solid #2d2d2d}.mobile-brand{display:flex;gap:11px;align-items:center}.mobile-brand .logo-art{width:40px;height:40px}.mobile-brand strong{font-family:'Bebas Neue','Helvetica Neue',Arial,sans-serif;font-size:22px;letter-spacing:1.6px}.mobile-brand small{display:block;font-size:8px;letter-spacing:1.8px;color:#c7c7c7;margin-top:3px}.mobile-profile-avatar{width:42px;height:42px;background:#302813;color:white;border:1px solid #74601f;border-radius:50%;font-size:12px;font-weight:600}.mobile-family{width:100%;position:relative;margin-top:6px;padding:12px 14px;border:1px solid #343434;background:#171717;border-radius:10px}.mobile-family label{font-size:8px;letter-spacing:1.6px;display:block;color:#bdbdbd;margin-bottom:5px}.mobile-family select{border:0;background:transparent;color:white;font-size:16px;font-weight:550;width:calc(100% - 65px);padding:3px 20px 3px 0}.mobile-family #mobile-save{position:absolute;right:14px;top:28px;color:#d0d0d0;font-size:10px}.mobile-family #mobile-save:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--yellow);margin-right:5px}.main{padding:25px 18px calc(100px + env(safe-area-inset-bottom))}.page-heading{margin-bottom:22px;align-items:center}.page-heading .eyebrow,.page-heading .intro,.page-heading .family-title,.desktop-heading-label{display:none}.mobile-heading-label{display:inline}.page-heading h1{font-size:29px;margin:0;letter-spacing:-1px}.heading-actions{padding:0;gap:8px}.heading-actions .button{height:44px;min-height:44px;width:44px;border-radius:10px}.heading-actions .button.primary{width:auto;padding:0 13px}.heading-actions .button.primary .label{display:inline;font-size:11px}.heading-actions .button .icon{width:17px;height:17px}.summary-strip{margin-bottom:22px}.summary-left{gap:9px;width:100%;justify-content:space-between}.summary-count{font-size:10px;gap:5px}.summary-count strong{font-size:12px}.summary-divider{display:none}.mobile-project-list{display:block}.mobile-tab-projects .roadmap-card{display:none}.mobile-tab-timeline .mobile-project-list{display:none}.mobile-list-toolbar{margin-bottom:18px}.mobile-search{display:flex;gap:9px;align-items:center;background:#171717;border:1px solid #353535;border-radius:10px;padding:0 13px;height:47px}.mobile-search .icon{width:17px;color:#c2c2c2}.mobile-search input{border:0;background:transparent;outline:0;color:white;font-size:16px;min-width:0;width:100%;height:100%}.mobile-search input::placeholder{font-size:13px;color:#b9b9b9}.mobile-list-filters{display:flex;align-items:center;gap:7px;margin-top:12px}.mobile-list-filters button{font-size:11px;color:#dddddd;padding:10px 12px;border:1px solid #353535;border-radius:7px;min-height:40px;white-space:nowrap}.mobile-list-filters button.active{background:#302813;border-color:#8a6e1b;color:white}.mobile-list-filters button span{font-size:9px;margin-left:4px;color:var(--yellow)}.mobile-list-filters button:last-child{margin-left:auto;padding:9px}.mobile-list-filters .icon{width:17px;height:17px}.mobile-project-card{padding:18px;background:#161616;border:1px solid #363636;border-radius:13px;margin-bottom:14px}.mobile-card-status{display:flex;align-items:center;gap:8px;margin-bottom:13px}.mobile-card-status .status-pill{font-size:10px;padding:6px 8px}.mobile-card-status .dot{width:5px;height:5px}.mobile-card-avatar{margin-left:auto;background:#303030;border:1px solid #464646;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:8px}.mobile-shared{display:flex;gap:4px;align-items:center;font-size:9px;color:#e2e2e2}.mobile-shared .icon{width:13px;height:13px}.mobile-card-open{display:block;text-align:left;padding:0;width:100%}.mobile-card-open h2{font-size:18px;font-weight:550;letter-spacing:-.4px;margin:0 0 8px;color:white;line-height:1.35}.mobile-card-open p{font-size:12px;color:#c0c0c0;line-height:1.7;margin:0 0 15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mobile-card-dates{display:flex;gap:7px;align-items:center;font-size:10px;color:#d7d7d7;margin-bottom:18px}.mobile-card-dates .icon{width:14px;height:14px}.mobile-card-dates span span{color:#aaa;margin:0 4px}.mobile-card-progress{height:4px;border-radius:4px;background:#333333;overflow:hidden}.mobile-card-progress>span{display:block;height:100%;background:var(--yellow);border-radius:4px}.mobile-card-footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#bfbfbf;padding-top:7px}.mobile-card-footer strong{font-weight:550;color:white}.mobile-card-footer button{display:flex;gap:4px;align-items:center;min-height:36px;padding:0;color:#f1cd58;font-size:10px}.mobile-card-footer .icon{width:12px;height:12px}.mobile-card-tasks{border-top:1px solid #393939;margin-top:9px;padding-top:6px}.mobile-task{display:flex;width:100%;align-items:center;text-align:left;justify-content:space-between;gap:8px;padding:13px 0;border-bottom:1px solid #2d2d2d}.mobile-task:last-child{border-bottom:0}.mobile-task strong{display:block;font-size:12px;font-weight:500;line-height:1.4}.mobile-task small{display:block;color:#bcbcbc;font-size:10px;margin-top:5px}.mobile-task .status-pill{font-size:8px;padding:5px;flex-shrink:0}.mobile-empty{text-align:center;padding:35px 10px}.mobile-empty h2{font-size:18px;font-weight:500}.mobile-empty p{color:#bbb;font-size:12px}.mobile-bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:#101010f5;backdrop-filter:blur(15px);border-top:1px solid #393939;z-index:40}.mobile-bottom-nav button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:48px;color:#bbbbbb;font-size:10px;border-radius:8px}.mobile-bottom-nav button .icon{width:21px;height:21px}.mobile-bottom-nav button[aria-current]{color:var(--yellow);background:#eab2030c}.page-footer{justify-content:center;padding-top:15px;font-size:9px}.timeline-inner{min-width:775px}.timeline-header,.project-row,.task-row{grid-template-columns:var(--project-col) minmax(620px,1fr)}.project-label{padding-left:5px;gap:3px}.project-name{font-size:10px}.project-subline{font-size:7px}.project-column-head{padding:15px 10px;font-size:8px}.project-column-head span:last-child{display:none}.project-label .grip{display:none}.timeline-scroll{min-height:360px;max-height:60dvh}.roadmap-controls{gap:14px;padding:12px}.year-control .icon-button{width:36px;height:36px}.year-control select{font-size:17px}.today-button{font-size:11px;min-height:34px}.view-controls{gap:10px;align-items:flex-start;flex-wrap:wrap}.segmented{flex-wrap:wrap}.view-button{min-height:37px;font-size:10px;padding:7px 9px}.key-toggle{min-height:32px;font-size:10px}.key-toggle input{width:16px;height:16px}.roadmap-footer{padding:15px 10px}.status-legend{gap:9px}.status-legend .status-label{font-size:8px}.task-row .project-label{padding-left:28px}.account-banner{font-size:11px}.account-banner .button{min-height:40px}.toast{bottom:94px}.drawer{height:100dvh}.drawer-head{padding-top:20px;padding-bottom:16px;min-height:65px}.drawer-head .icon-button{width:44px;height:44px}.drawer-kicker{font-size:10px}.drawer-body{padding:22px 20px}.drawer-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom))}.drawer-foot .button{min-height:44px}.input,.field select.input{font-size:16px;min-height:45px;padding:11px}.input.description{font-size:16px}.input.large-name{font-size:25px;min-height:40px}.form-label{font-size:12px}.form-hint{font-size:12px}.inline-add .input{font-size:16px;min-height:44px}.inline-add .button{min-height:44px;font-size:12px}.deliverable-input{font-size:16px;min-height:44px}.section-title h3{font-size:14px}.section-title small{font-size:11px}.task-card{padding:13px}.task-card-name{font-size:16px;min-height:40px}.task-card .icon-button{width:36px;height:40px}.task-status-select{font-size:16px;min-height:40px;width:auto;max-width:100%}.task-dates .input{font-size:16px;padding:7px;min-width:0;max-width:100%;min-height:42px}.task-dates>div{min-width:0}.task-dates .form-label{font-size:10px}.task-description-toggle{font-size:12px;min-height:40px}.task-card-details textarea{font-size:16px}.switch-label{font-size:12px;min-height:42px}.switch-label input{width:34px;height:21px}.switch-label input:before{width:15px;height:15px}.switch-label input:checked:before{left:16px}.small-text-button{font-size:12px;min-height:40px}.collaboration-picker summary{font-size:16px;min-height:46px}.collaboration-options label{min-height:44px;font-size:13px}.collaboration-options input{width:17px;height:17px}.modal-overlay{padding:0;align-items:stretch}.modal,.modal.wide{width:100%;max-width:none;max-height:none;height:100dvh;border-radius:0;display:flex;flex-direction:column;overflow:hidden}.modal-head{padding:20px;flex-shrink:0}.modal-head .icon-button{width:44px;height:44px}.modal-body{flex:1;overflow:auto;padding:0 20px 22px}.modal-footer{padding:14px 20px calc(14px + env(safe-area-inset-bottom));flex-shrink:0;flex-wrap:wrap}.modal-footer .button{min-height:44px}.family-option{min-height:44px}.person-result{min-height:52px}.auth-page{min-height:100dvh}.auth-panel{padding:28px 24px}.auth-panel .input{font-size:16px}
}

@media(max-width:700px){.mobile-year-control{display:flex;align-items:center;gap:8px;margin:0 0 16px}.mobile-year-control strong{font-size:20px;min-width:60px;text-align:center}.mobile-year-control .icon-button{width:44px;height:44px}.mobile-year-control .today-button{margin-left:auto;min-height:40px;padding:8px 15px}}

@media(max-width:700px){.timeline-inner.is-empty{min-width:0}.timeline-inner.is-empty .timeline-body{min-height:240px}.timeline-inner.is-empty .no-projects{min-height:240px;padding:32px 18px;text-align:left}.timeline-inner.is-empty .no-projects h3{font-size:16px;line-height:1.4}.timeline-inner.is-empty .no-projects p{margin:10px 0 18px;max-width:280px}.timeline-inner.is-empty .no-projects .button{min-height:44px;font-size:12px}}

/* Large families retain readable cards, a pinned head, and a dedicated member scroller. */
.family-tree-modal{height:min(800px,90dvh);display:flex;flex-direction:column;overflow:hidden}
.family-tree-modal .modal-head,.family-tree-modal .modal-footer{flex-shrink:0}
.family-tree-modal .modal-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding-bottom:18px}
.family-tree-modal .form-label,.family-tree-modal #tree-family{flex-shrink:0}
.family-tree-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;margin-top:14px;font-size:12px}
.family-tree-summary span{font-size:11px;color:#bdbdbd}
.family-tree-modal .family-tree{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 0 0;text-align:center}
.family-tree-modal .tree-heads{flex-shrink:0;max-height:180px;overflow:auto;padding:0 6px}
.family-tree-modal .tree-heads .person-card{width:210px;max-width:100%;min-height:100px;padding:12px 18px}
.family-tree-modal .tree-trunk{flex-shrink:0;height:24px;margin:0 auto;background:#8b7129}
.tree-members-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#8b7129 #151515;border:1px solid #36332a;border-radius:12px;background:#101010;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.tree-members-viewport:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.family-tree-modal .tree-members{--tree-line:#756127;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:16px 12px;margin:0 10px;padding:20px 6px 12px;border-top:1px solid var(--tree-line);background:linear-gradient(var(--tree-line),var(--tree-line)) 16.6667% 0/1px 100% no-repeat,linear-gradient(var(--tree-line),var(--tree-line)) 50% 0/1px 100% no-repeat,linear-gradient(var(--tree-line),var(--tree-line)) 83.3333% 0/1px 100% no-repeat}
.family-tree-modal .tree-members .person-card{min-width:0;max-width:none;width:100%;min-height:100px;padding:12px 8px;justify-content:center}
.family-tree-modal .person-card strong{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.family-tree-modal .person-card .owner-avatar{width:32px;height:32px;flex-shrink:0;margin-bottom:3px;font-size:10px}
.family-tree-modal .tree-members .person-card:before{height:20px;top:-21px;left:50%;background:#756127}
.tree-scroll-hint{flex-shrink:0;margin:0;padding:10px 0 0;font-size:11px;color:#c9c1aa}
@media(max-width:700px){
 .family-tree-modal{height:100dvh}
 .family-tree-modal .modal-body{padding:0 16px 12px}
 .family-tree-summary{font-size:12px;margin-top:12px;gap:8px}
 .family-tree-summary span{font-size:10px}
 .family-tree-modal .family-tree{padding-top:14px}
 .family-tree-modal .tree-heads .person-card{min-height:94px;width:190px}
 .family-tree-modal .tree-trunk{height:20px}
 .family-tree-modal .tree-members{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;margin:0 7px;padding:20px 4px 10px;background:linear-gradient(var(--tree-line),var(--tree-line)) 25% 0/1px 100% no-repeat,linear-gradient(var(--tree-line),var(--tree-line)) 75% 0/1px 100% no-repeat}
 .family-tree-modal .tree-members .person-card{min-height:98px;padding:12px 7px}
 .family-tree-modal .person-card strong{font-size:12px}
 .tree-scroll-hint{font-size:10px}
}