/*==================================
PAGE HEADER
==================================*/

.page-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    margin-bottom:36px;

}

.page-badge{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:14px;

    font-size:14px;
    font-weight:600;

    color:#B8860B;

}

.page-title-row{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:10px;

}

.page-title-row img,
.page-title-row svg{

    width:32px;
    height:32px;
    flex-shrink:0;

}

.page-header h1{

    font-size:34px;
    font-weight:700;

    color:#111827;

    margin-bottom:0;

}

.page-header p{

    font-size:15px;

    color:#6B7280;

    max-width:560px;

    line-height:1.6;

}

.page-header-right{

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:16px;

}

.draft-status{

    color:#16A34A;
    font-size:13px;
    font-weight:600;

}

.header-buttons{

    display:flex;
    gap:12px;

}

/*==================================
FORM FOOTER (Cancel / Submit, moved
to the end of the form)
==================================*/

.form-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:8px;

}

/*==================================
BUTTONS
==================================*/

.btn{

    padding:12px 20px;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

}

.btn-primary{

    background:#D4A017;

    color:white;

    border:none;

}

.btn-secondary{

    background:#F3F4F6;

    border:none;

}

.btn-outline{

    background:white;

    border:1px solid #D1D5DB;

}

/*==================================
SECTION CARDS
==================================*/

.recap-grid{

    display:flex;
    flex-direction:column;

    gap:20px;

}

.recap-card{

    background:#FFFFFF;

    border:1px solid #E7EAF0;

    border-radius:18px;

    padding:26px 30px 30px;

    box-shadow:
        0 2px 8px rgba(15,23,42,.04);

    transition:.25s ease;

}

.recap-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(15,23,42,.08);

}

.recap-card h2{

    font-size:20px;

    font-weight:700;

    color:#111827;

}

/* ==========================================
   SECTION HEADER
========================================== */

.section-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.section-icon{

    width:46px;

    height:46px;

    border-radius:12px;

    background:#FFF7E6;

    color:#D4A017;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    flex-shrink:0;

}

.section-header h2{

    margin:0;

    font-size:22px;

    font-weight:700;

}

.section-header p{

    margin-top:2px;

    color:#6B7280;

    font-size:14px;

}


/* ==========================================
   GRID
========================================== */

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin-bottom:22px;

}

/* A straight 5-across row — 5 doesn't divide evenly into the 12-column
   grid used elsewhere, so this is its own fixed column count rather
   than a col-N span (used for rows that are always exactly 5 fields,
   no dynamic show/hide). */
.form-grid.cols-5{

    grid-template-columns:repeat(5,1fr);

}

.form-group{

    display:flex;

    flex-direction:column;

}

/* A .form-group inside a .form-grid gets its spacing from the grid's own
   gap/margin-bottom. A standalone .form-group (a single full-width field
   sitting between two grids, e.g. Project Address) has nothing giving it
   room below it without this — it was sitting flush against whatever
   came next. */
.recap-card > .form-group{

    margin-bottom:22px;

}

.recap-card > .form-group:last-child{

    margin-bottom:0;

}

.address-group{
    margin-bottom:15px;
}

.form-group label{

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;

    color:#374151;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    background:#FAFBFC;

    border:1px solid #DCE3EA;

    border-radius:12px;

    font-size:15px;

    /* Named, not the blanket "transition:.2s" shorthand — that would also
       animate height, and an animating height fights the textarea
       auto-grow script: it reads scrollHeight mid-transition and gets
       back the old, not-yet-settled value, so it can grow but can never
       shrink back down. */
    transition:border-color .2s, box-shadow .2s, background .2s;

}

.form-group textarea{

    resize:none;

    overflow:hidden;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    background:white;

    outline:none;

    border-color:#D4A017;

    box-shadow:0 0 0 4px rgba(212,160,23,.12);

}

/* Native <select> chevrons render inconsistently across browsers and sit
   flush against the edge. Replace with one consistent custom chevron,
   inset from the edge the same way the Date field's calendar icon is. */
.form-group select:not([multiple]){

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    padding-right:42px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:14px;

}

.visually-hidden{

    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

.mobile-footer-back{ display:none; }

/* Fixed phone actions matching the mobile reference design. */
@media (max-width:600px){
    .form-footer{
        position:fixed; left:0; right:0; bottom:0; z-index:1100;
        display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,.82fr) minmax(0,1.36fr);
        gap:10px; margin:0;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top:1px solid #E5E7EB; background:rgba(255,255,255,.97);
        box-shadow:0 -8px 24px rgba(15,23,42,.08);
    }
    .form-footer .btn{ width:100%; justify-content:center; }
    .form-footer .mobile-footer-back{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:3px;
        border:1px solid #DCE3EA;
        background:#FFF;
        color:#374151;
        text-decoration:none;
    }
    .mobile-footer-back span{ font-size:24px; line-height:1; }
}

@media (max-width:600px){
    .page-all-recaps .main{
        padding-top:calc(88px + env(safe-area-inset-top));
        padding-bottom:calc(28px + env(safe-area-inset-bottom));
    }

    .page-all-recaps .page-header{
        margin-bottom:12px;
        padding:4px 2px 8px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    .page-all-recaps .page-badge{ margin-bottom:8px; }
    .page-all-recaps .page-title-row h1{ font-size:27px; }
    .page-all-recaps .page-header-left > p{ margin-top:7px; font-size:13px; line-height:1.4; }
    .page-all-recaps .recap-grid{ display:grid; gap:12px; }
    .page-all-recaps .recap-card{ padding:15px 13px; }
    .page-all-recaps .section-header{ margin-bottom:14px; }

    .page-all-recaps .form-group{ margin-bottom:12px; }
    .page-all-recaps .form-group label{ margin-bottom:6px; }
    .page-all-recaps #recapSearch,
    .page-all-recaps #typeFilterSelect,
    .page-all-recaps #statusFilterSelect{
        width:100%;
        height:52px;
        min-height:52px;
        padding:0 14px;
        border:1px solid #DCE3EA;
        border-radius:11px;
        background:#FAFBFC;
        font-size:16px;
    }

    .page-all-recaps .results-count{ margin-top:4px; font-size:12px; color:#6B7280; }
    .page-all-recaps #allRecapsList .activity-row{
        display:grid;
        gap:10px;
        width:100%;
        padding:13px;
        border:1px solid #E5E7EB;
        border-radius:12px;
        background:#FFF;
    }

    .page-all-recaps #allRecapsList .activity-meta{
        display:flex;
        align-items:center;
        gap:8px;
        width:100%;
        padding-left:48px;
    }

    .page-all-recaps .empty-state{
        padding:28px 14px;
        border:1px dashed #DCE3EA;
        border-radius:12px;
        color:#6B7280;
        text-align:center;
    }
}

.form-group .visually-hidden{
    width:1px !important;
    height:1px !important;
    min-height:1px;
}

.project-scope-fields{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #E8ECF1;
}

.project-scope-fields[hidden]{ display:none; }

.project-scope-field textarea{ min-height:112px; }
.collection-picker{ display:grid; gap:16px; padding-top:4px; }
.collection-subsection > label{
    display:block;
    margin-bottom:8px;
    color:#374151;
    font-size:13px;
    font-weight:600;
}
.collection-options .project-tag{ font:inherit; cursor:pointer; }

/* ===================================
   MULTI-SELECT DROPDOWN (Project Type)
   Closed state reads like any other
   form select; open panel is a
   checkbox list; chosen values render
   as small removable pills inside the
   control, reusing the app's existing
   gold-pill language.
=================================== */

.multi-select{

    position:relative;

}

.multi-select-control{

    width:100%;

    min-height:48px;

    padding:8px 14px;

    background:#FAFBFC;

    border:1px solid #DCE3EA;

    border-radius:12px;

    font-size:15px;
    font-family:inherit;
    text-align:left;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    cursor:pointer;

    transition:.2s;

}

.multi-select-control:hover{

    border-color:#D9A404;

}

.multi-select-control.is-open{

    background:white;

    border-color:#D4A017;

    box-shadow:0 0 0 4px rgba(212,160,23,.12);

}

.multi-select-chips{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:6px;

    flex:1;

    min-width:0;

}

.multi-select-placeholder{

    color:#9CA3AF;

}

.multi-select-chip{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:4px 8px 4px 12px;

    border-radius:20px;

    background:#FFF8E1;

    color:#B7791F;

    font-size:12.5px;

    font-weight:600;

    white-space:nowrap;

}

.multi-select-chip button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:16px;

    height:16px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:inherit;

    font-size:13px;

    line-height:1;

    cursor:pointer;

    transition:.2s;

}

.multi-select-chip button:hover{

    background:rgba(183,121,31,.18);

}

.multi-select-caret{

    flex-shrink:0;

    color:#9CA3AF;

    font-size:11px;

    transition:transform .2s ease;

}

.multi-select-control.is-open .multi-select-caret{

    transform:rotate(180deg);

}

.multi-select-panel{

    position:absolute;

    top:calc(100% + 6px);

    left:0;

    right:0;

    z-index:20;

    background:#FFFFFF;

    border:1px solid #DCE3EA;

    border-radius:12px;

    box-shadow:0 12px 30px rgba(15,23,42,.12);

    padding:8px;

    max-height:240px;

    overflow-y:auto;

}

.multi-select-option{

    display:flex;

    align-items:center;

    gap:10px;

    padding:9px 10px;

    border-radius:8px;

    font-size:14px;

    color:#111827;

    cursor:pointer;

    transition:.15s;

}

.multi-select-option:hover{

    background:#FAFBFC;

}

.multi-select-option input[type="checkbox"]{

    width:16px;

    height:16px;

    accent-color:#D4A017;

    cursor:pointer;

}

/* ===================================
   TEAM PICKER — a normal, freely-
   typable text input with a dropdown
   shortcut for the 3 HoneyB team
   members. Typing a name not in the
   list just works, same as before.
=================================== */

.team-picker{

    position:relative;

}

.team-picker-input{

    padding-right:38px !important;

}

.team-picker-toggle{

    position:absolute;

    top:50%;

    right:8px;

    transform:translateY(-50%);

    width:26px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;

    border:none;

    color:#9CA3AF;

    font-size:11px;

    cursor:pointer;

}

.team-picker-panel{

    position:absolute;

    top:calc(100% + 6px);

    left:0;

    right:0;

    z-index:20;

    background:#FFFFFF;

    border:1px solid #DCE3EA;

    border-radius:12px;

    box-shadow:0 12px 30px rgba(15,23,42,.12);

    padding:6px;

}

/* ===================================
   12-COLUMN ROW (Project Category /
   Project Type / Other Category /
   Other Type — width shifts between
   2-up and 3-up depending on which
   fields are showing, driven by JS)
=================================== */

.form-grid.grid-12{

    grid-template-columns:repeat(12,1fr);

}

.col-3{ grid-column:span 3; }
.col-4{ grid-column:span 4; }
.col-6{ grid-column:span 6; }
.col-8{ grid-column:span 8; }
.col-12{ grid-column:span 12; }

/* ===================================
   PROJECT TAGS
=================================== */

.tag-container{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:10px;

}

/* ===================================
   STAR RATING (Confidence Level, Lead
   Score) — a row of clickable stars
   backed by a visually-hidden <select>
   that holds the real 1-5 value.
=================================== */

.star-rating{

    display:flex;

    align-items:center;

    gap:4px;

    min-height:48px;

}

.star{

    background:none;

    border:none;

    padding:0;

    margin:0;

    font-size:26px;

    line-height:1;

    color:#DCE3EA;

    cursor:pointer;

    transition:.15s;

}

.star:hover{

    color:#E8C766;

    transform:scale(1.12);

}

.star.is-filled{

    color:#D4A017;

}

/* ===================================
   INTERNAL DIVIDER — marks a section
   of a card as internal-only, e.g.
   between Call Summary and internal
   notes/status fields.
=================================== */

.internal-divider{

    display:flex;

    align-items:center;

    gap:12px;

    margin:26px 0 20px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#9CA3AF;

}

.internal-divider::before,
.internal-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E5E7EB;

}

.project-tag{

    padding:10px 18px;

    border:1px solid #DCE3EA;

    border-radius:30px;

    background:#FAFBFC;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.2s;

}

.project-tag:hover{

    border-color:#D9A404;

    color:#D9A404;

}

.project-tag.active{

    background:#D4A017;

    color:white;

    border-color:#D4A017;

}

.helper-text{

    color:#9CA3AF;

    font-size:14px;

}

/* ===================================
   GOALS
=================================== */

.goal-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin:8px 0 10px;

}

/* A label-only .form-group (just introduces the goal-grid below it, e.g.
   "Primary Goals") doesn't need the full standalone-field 22px gap —
   that's for actual inputs, not a heading immediately followed by a
   tightly-related grid. */
.recap-card > .form-group:has(+ .goal-grid){

    margin-bottom:6px;

}

.goal-grid.cols-2{

    grid-template-columns:repeat(2,1fr);

}

.goal-grid.stack{

    grid-template-columns:1fr;

}

.goal-card-fields{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

}

.goal-card-fields input{

    flex:1;

}

.goal-card-fields input:not(:last-child){

    border-right:1px solid #E5E7EB;

    padding-right:14px;

}

.goal-card-fields input[type="date"]{

    flex:0 0 170px;

}

.goal-card{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:48px;

    padding:0 14px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:white;

}

/* ===================================
   DYNAMIC LISTS (add / remove rows)
=================================== */

.goal-remove{

    flex-shrink:0;

    width:22px;

    height:22px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#9CA3AF;

    font-size:16px;

    line-height:1;

    cursor:pointer;

    transition:.2s;

}

.goal-remove:hover{

    background:#FEE2E2;

    color:#DC2626;

}

.add-row-btn{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:12px;

    padding:10px 18px;

    border:1px dashed #D9A404;

    border-radius:30px;

    background:transparent;

    color:#B8860B;

    font-size:13.5px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.add-row-btn:hover{

    background:#FFF8E7;

}

.add-row-btn::before{

    content:"+";

    font-size:15px;

}

.goal-number{

    width:26px;

    height:26px;

    border-radius:50%;

    background:#D9A404;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12.5px;

    font-weight:700;

    flex-shrink:0;

}

.goal-card input{

    border:none;

    background:transparent;

    width:100%;

    height:100%;

    font-size:15px;

}

.goal-card input:focus{

    outline:none;

}

/*====================================
HEADER META
====================================*/

.recap-meta{

    display:flex;

    justify-content:flex-end;

    gap:30px;

    margin-bottom:18px;

}

.meta-item{

    display:flex;

    flex-direction:column;

    text-align:right;

}

.meta-label{

    font-size:11px;

    color:#9CA3AF;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:3px;

}

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.status-badge.draft{

    background:#FFF8E1;

    color:#B7791F;

}

.status-badge.submitted{

    background:#E8F5E9;

    color:#16A34A;

}

.status-badge.review{

    background:#EFF6FF;

    color:#2563EB;

}

/*==================================
DASHBOARD - STATS
==================================*/

.stats-row{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:20px;

}

.stat-card{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.stat-icon{

    width:44px;

    height:44px;

    border-radius:12px;

    background:#FFF8E7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}

.stat-label{

    font-size:12px;

    font-weight:600;

    color:#6B7280;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.stat-value{

    font-size:30px;

    font-weight:800;

    color:#111827;

    line-height:1;

}

.stat-trend{

    font-size:12.5px;

    font-weight:600;

    color:#16A34A;

}

.stat-trend.neutral{

    color:#9CA3AF;

}

/*==================================
DASHBOARD - QUICK START
==================================*/

.quickstart-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;

}

.quickstart-card{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:20px;

    border:1px solid #E5E7EB;

    border-radius:16px;

    background:#fff;

    text-decoration:none;

    transition:.25s ease;

}

.quickstart-card:hover{

    border-color:#D9A404;

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(15,23,42,.08);

}

.quickstart-icon{

    width:40px;

    height:40px;

    border-radius:10px;

    background:#FFF8E7;

    display:flex;

    align-items:center;

    justify-content:center;

}

.quickstart-icon img{

    width:20px;

    height:20px;

}

.quickstart-card h3{

    font-size:14.5px;

    font-weight:700;

    color:#111827;

}

.quickstart-card p{

    font-size:12.5px;

    color:#6B7280;

    line-height:1.5;

}

/*==================================
DASHBOARD - ACTIVITY
==================================*/

.activity-list{

    display:flex;

    flex-direction:column;

}

.activity-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:16px 0;

    border-bottom:1px solid #F1F3F6;

    text-decoration:none;

    color:inherit;

}

a.activity-row{

    cursor:pointer;

    transition:background .2s ease;

}

a.activity-row:hover{

    background:#FAFBFC;

}

.activity-row:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.activity-row:first-child{

    padding-top:0;

}

.activity-main{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;

}

.activity-icon{

    width:40px;

    height:40px;

    border-radius:10px;

    background:#F8FAFC;

    border:1px solid #EEF0F4;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    flex-shrink:0;

}

.activity-title{

    font-size:14px;

    font-weight:600;

    color:#111827;

}

.activity-sub{

    font-size:12.5px;

    color:#6B7280;

    margin-top:2px;

}

.activity-meta{

    display:flex;

    align-items:center;

    gap:20px;

    flex-shrink:0;

}

.activity-id{

    font-size:12.5px;

    color:#9CA3AF;

    font-weight:600;

}

.activity-date{

    font-size:12.5px;

    color:#9CA3AF;

    min-width:64px;

    text-align:right;

}

/*==================================
RECAP SIDE PANEL (Recap Overview +
live Progress, right-hand column on
every recap-entry page)
==================================*/

.recap-side-panel{

    width:280px;

    position:fixed;
    top:16px;
    right:16px;

    max-height:calc(100vh - 32px);

    overflow-y:auto;

    display:flex;
    flex-direction:column;
    gap:16px;

}

.side-panel-card{

    background:#FFFFFF;

    border:1px solid #E7EAF0;

    border-radius:18px;

    padding:22px;

    box-shadow:0 2px 8px rgba(15,23,42,.04);

    flex-shrink:0;

}

.side-panel-heading{

    font-size:12.5px;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;

    color:#111827;

    margin-bottom:16px;

}

/* Overview rows */

.overview-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px 0;

    border-bottom:1px solid #F1F3F6;

}

.overview-row:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.overview-row:first-of-type{

    padding-top:0;

}

.overview-label{

    font-size:12.5px;

    color:#6B7280;

}

.overview-value{

    font-size:13px;

    font-weight:700;

    color:#111827;

    text-align:right;

}

.overview-value.state-not-started{ color:#9CA3AF; }
.overview-value.state-in-progress{ color:#D4A017; }
.overview-value.state-complete{ color:#16A34A; }

/* Progress bar */

.progress-track{

    height:8px;

    border-radius:999px;

    background:#F1F3F6;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    width:0%;

    background:#D4A017;

    border-radius:999px;

    transition:width .3s ease;

}

.progress-percent{

    font-size:12px;

    font-weight:600;

    color:#6B7280;

    text-align:right;

}

#referredByContainer,
#leadSourceOtherContainer{

    margin-top:8px;

    margin-bottom:16px;

}

/* Progress checklist */

.progress-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 0;

}

.progress-icon{

    width:20px;

    height:20px;

    border-radius:50%;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

    color:transparent;

    background:#FFFFFF;

    border:2px solid #E5E7EB;

}

.progress-item.is-complete .progress-icon{

    background:#16A34A;

    border-color:#16A34A;

    color:#FFFFFF;

}

.progress-item.is-in-progress .progress-icon{

    border-color:#D4A017;

}

.progress-item.is-in-progress .progress-icon::after{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#D4A017;

}

.progress-label{

    flex:1;

    font-size:13px;

    font-weight:500;

    color:#111827;

}

.progress-status{

    font-size:11.5px;

    font-weight:600;

    color:#9CA3AF;

}

.progress-item.is-complete .progress-status{ color:#16A34A; }
.progress-item.is-in-progress .progress-status{ color:#D4A017; }

/*==================================
ALL RECAPS - FILTERS
==================================*/

.filter-group{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:10px;

}

.filter-tag{

    padding:9px 16px;

    border:1px solid #D8DEE8;

    border-radius:50px;

    cursor:pointer;

    background:#fff;

    transition:.25s;

    font-size:13.5px;

    font-weight:600;

    color:#374151;

    user-select:none;

}

.filter-tag:hover{

    border-color:#D9A404;

    color:#D9A404;

}

.filter-tag.active{

    background:#D9A404;

    color:white;

    border-color:#D9A404;

    box-shadow:0 6px 18px rgba(217,164,4,.20);

}

.results-count{

    font-size:13px;

    color:#6B7280;

    margin-top:22px;

}

.empty-state{

    display:none;

    padding:48px 20px;

    text-align:center;

    color:#9CA3AF;

    font-size:14px;

}

/* Ratings use the same visual boundary as the controls beside them. The
   individual stars stay unboxed so the field remains calm and readable. */
.page-lead-call .star-rating,
.page-client-consultation .star-rating{
    box-sizing:border-box;
    width:100%;
    height:52px;
    min-height:52px;
    padding:0 15px;
    border:1px solid #D8DEE7;
    border-radius:10px;
    background:#F8FAFC;
}

.page-lead-call .star-rating:focus-within,
.page-client-consultation .star-rating:focus-within{
    border-color:#D4A017;
    background:#FFFFFF;
    box-shadow:0 0 0 3px rgba(212,160,23,.12);
}

@media (max-width:900px){
    .main > *,
    .recap-grid,
    .recap-card,
    .form-section,
    .activity-list{ min-width:0; max-width:100%; }
    .page-header{ align-items:flex-start; gap:16px; }
    .page-header-right,
    .header-buttons,
    .form-footer{ width:100%; flex-wrap:wrap; }
    .page-header h1{ font-size:clamp(25px,7vw,34px); line-height:1.15; }
    .recap-grid,
    .form-grid,
    .form-grid.grid-12,
    .form-grid.cols-5,
    .goal-grid,
    .goal-grid.cols-2,
    .stats-row,
    .quickstart-grid{ grid-template-columns:minmax(0,1fr) !important; }
    .form-grid.grid-12 > *,
    .form-grid > *{ grid-column:1 / -1 !important; }
    .recap-side-panel{ position:static; width:100%; margin-top:18px; }
    .activity-row{ align-items:flex-start; gap:12px; }
    .activity-meta{ min-width:0; text-align:left; }
    input,select,textarea,button{ font-size:16px; }
    textarea{ width:100%; resize:vertical; }
    .form-group input,
    .form-group select:not([multiple]){ min-height:48px; }
    .form-group .visually-hidden{ width:1px !important; min-height:1px; }
    .filter-group{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
    .filter-tag{ flex:0 0 auto; min-height:44px; display:flex; align-items:center; }
}
@media (max-width:600px){
    .page-header{ flex-direction:column; margin-bottom:22px; }
    .page-title-row{ align-items:flex-start; }
    .page-title-row img,
    .page-title-row svg{ width:26px; height:26px; margin-top:2px; }
    .recap-card,
    .side-panel-card,
    .activity-list{ border-radius:16px; }
    .recap-card{ padding:18px 15px; }
    .form-row,
    .form-group,
    .team-picker{ min-width:0; width:100%; }
    .section-header{ align-items:flex-start; gap:11px; }
    .section-header h2{ font-size:17px; }
    .form-footer > *,
    .header-buttons > *{ width:100%; min-height:48px; }
    .activity-row{ flex-direction:column; padding:16px; }
    .activity-main{ width:100%; }
    .activity-meta{ width:100%; padding-left:48px; }
    .goal-card-fields{ grid-template-columns:1fr !important; }

    .page-dashboard .stats-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px;
    }
    .page-dashboard .stat-card{ min-width:0; padding:14px; gap:8px; }
    .page-dashboard .stat-icon{ width:36px; height:36px; font-size:17px; }
    .page-dashboard .stat-label{ font-size:10.5px; line-height:1.3; }
    .page-dashboard .stat-value{ font-size:26px; }
    .page-dashboard .stat-trend{ display:none; }
    .page-dashboard .quickstart-grid{ gap:10px; }
    .page-dashboard .quickstart-card{
        display:grid;
        grid-template-columns:42px minmax(0,1fr);
        column-gap:12px;
        row-gap:3px;
        align-items:center;
        min-height:68px;
        padding:12px 14px;
        border-radius:14px;
    }
    .page-dashboard .quickstart-icon{ grid-row:1 / 3; }
    .page-dashboard .quickstart-card h3{ font-size:15px; }
    .page-dashboard .quickstart-card p{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .page-all-recaps #recapSearch{ min-height:50px; }
    .page-all-recaps .results-count{ margin-top:14px; font-weight:600; }
    .page-all-recaps #allRecapsList{ gap:10px; }
    .page-all-recaps #allRecapsList .activity-row{
        padding:14px;
        border:1px solid #E7EAF0;
        border-radius:14px;
        background:#FFF;
    }
    .page-all-recaps #allRecapsList .activity-row:first-child,
    .page-all-recaps #allRecapsList .activity-row:last-child{ padding:14px; }
    .page-all-recaps #allRecapsList .activity-title{
        line-height:1.35;
        overflow-wrap:anywhere;
    }
    .page-all-recaps #allRecapsList .activity-meta{
        padding-left:54px;
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }
    .page-all-recaps #allRecapsList .activity-date{ min-width:0; margin-left:auto; }
    .page-all-recaps .filter-group{
        margin-left:-2px;
        margin-right:-2px;
        scroll-snap-type:x proximity;
    }
    .page-all-recaps .filter-tag{ scroll-snap-align:start; }
}

/* ============================
   PHONE-FIRST RECAP EXPERIENCE
   Keep the desktop visual language while giving forms the full viewport.
============================ */
@media (max-width:600px){
    body{ background:#F3F6FA; }

    .recap-side-panel{ display:none !important; }

    .page-header{
        gap:10px;
        margin-bottom:16px;
    }
    .page-title-row{ gap:10px; }
    .page-header h1{
        font-size:25px;
        line-height:1.12;
        letter-spacing:-.025em;
    }
    .page-header p,
    .page-subtitle{
        font-size:13px;
        line-height:1.45;
    }
    .breadcrumb{ display:none; }

    .recap-grid{ display:block; }
    .recap-card,
    .activity-list,
    .side-panel-card{
        width:100%;
        border-radius:15px;
        box-shadow:0 5px 18px rgba(15,23,42,.055);
    }
    .recap-card{
        margin-bottom:12px;
        padding:16px 13px;
    }
    .section-header{
        margin-bottom:14px;
        padding-bottom:11px;
    }
    .section-header h2{
        font-size:16px;
        line-height:1.25;
    }
    .section-icon{
        width:36px;
        height:36px;
        min-width:36px;
        border-radius:10px;
    }

    .form-grid,
    .form-row,
    .goal-card-fields{
        gap:13px !important;
    }
    .form-group label{
        margin-bottom:6px;
        font-size:12px;
        line-height:1.3;
    }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .team-picker-input{
        width:100%;
        min-height:48px;
        border-radius:11px;
        font-size:16px;
    }
    .form-group textarea{
        height:96px;
        min-height:96px;
        max-height:220px;
        line-height:1.45;
        overflow-y:hidden;
        font-family:inherit;
    }
    .team-picker-toggle,
    .btn,
    button{
        min-height:46px;
        touch-action:manipulation;
    }

    .form-footer{
        gap:10px;
        margin-top:16px;
        padding-top:14px;
    }
    .form-footer .btn,
    .header-buttons .btn{
        justify-content:center;
        width:100%;
    }

    .dynamic-row,
    .goal-card,
    .repeatable-item{
        min-width:0;
        padding:13px;
        border-radius:12px;
    }
}

/* Final phone action bar override. */
@media (max-width:600px){
    .form-footer{
        position:fixed; left:0; right:0; bottom:0; z-index:1100;
        display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,.82fr) minmax(0,1.36fr);
        gap:10px; margin:0;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top:1px solid #E5E7EB; background:rgba(255,255,255,.97);
        box-shadow:0 -8px 24px rgba(15,23,42,.08);
    }
    .form-footer .btn{ width:100%; justify-content:center; }
}

.mobile-progress-shell{ display:none; }

/* Compact phone progress strip replacing the desktop right sidebar. */
@media (max-width:600px){
    .mobile-progress-shell{
        position:fixed;
        top:calc(72px + env(safe-area-inset-top));
        left:0;
        right:0;
        z-index:1196;
        display:block;
        border-bottom:1px solid #E4E8EE;
        background:rgba(255,255,255,.98);
        box-shadow:0 5px 14px rgba(15,23,42,.05);
    }
    .mobile-progress-toggle{
        display:grid;
        grid-template-columns:1fr auto 18px;
        gap:8px;
        align-items:center;
        width:100%;
        min-height:42px;
        padding:8px 16px 6px;
        border:0;
        background:transparent;
        color:#374151;
        font-size:12px;
        text-align:left;
    }
    .mobile-progress-toggle strong{ color:#A57900; font-size:12px; }
    .mobile-progress-caret{ text-align:center; transition:transform .2s ease; }
    .mobile-progress-toggle[aria-expanded="true"] .mobile-progress-caret{ transform:rotate(180deg); }
    .mobile-progress-track{ height:3px; overflow:hidden; background:#EEF1F5; }
    .mobile-progress-fill{ width:0; height:100%; background:#D4A017; transition:width .2s ease; }
    .mobile-progress-panel{
        max-height:min(52vh,420px);
        overflow-y:auto;
        padding:8px 12px 12px;
        background:#FFF;
        box-shadow:0 14px 28px rgba(15,23,42,.14);
    }
    .mobile-progress-panel[hidden]{ display:none; }
    .mobile-progress-panel .progress-item{ min-height:44px; cursor:pointer; }
    .main,
    .main.has-side-panel{ padding-top:calc(138px + env(safe-area-inset-top)); }
    .recap-card{ scroll-margin-top:132px; }
}

/* Consistent phone control sizing across every recap field. */
@media (max-width:600px){
    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-group select:not([multiple]),
    .multi-select-control,
    .team-picker-input,
    .goal-card input,
    .repeatable-item input{
        width:100%;
        height:52px;
        min-height:52px;
        padding-top:0;
        padding-bottom:0;
        border-radius:11px;
        font-size:16px;
        line-height:1.25;
    }
    .multi-select-control{ display:flex; align-items:center; }
    .multi-select,
    .team-picker{ width:100%; }
    .team-picker-toggle{
        height:52px;
        min-height:52px;
    }
    .form-group textarea,
    .project-scope-field textarea{
        width:100%;
        height:96px;
        min-height:96px;
        border-radius:11px;
        font-size:16px;
    }

    .goal-card,
    .dynamic-row,
    .repeatable-item{
        display:grid;
        grid-template-columns:30px minmax(0,1fr) 36px;
        align-items:center;
        gap:8px;
        width:100%;
        min-height:54px;
        padding:0 8px !important;
        border:1px solid #DCE3EA;
        border-radius:11px;
        background:#FAFBFC;
        box-shadow:none;
    }
    .goal-card input,
    .dynamic-row input,
    .repeatable-item input{
        height:52px;
        min-height:52px;
        padding:0 8px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .goal-number{
        width:30px;
        height:30px;
        font-size:13px;
    }
    .goal-remove{
        width:36px;
        height:36px;
        min-height:36px;
        justify-self:end;
    }
    .add-row-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:52px;
        min-height:52px;
        margin-top:8px;
        padding:0 14px;
        border:1px dashed #D4A017;
        border-radius:11px;
        background:#FFFDF6;
        color:#9B7500;
        font-size:14px;
        font-weight:700;
    }
    .add-row-btn::before{ font-size:18px; }
}

/* Final phone control sizing: every empty control begins on the same rhythm.
   Textareas may grow after the user enters content, but never from placeholder
   text alone. This stays last so desktop component rules cannot win. */
@media (max-width: 720px){
    .page-lead-call input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.visually-hidden),
    .page-client-consultation input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.visually-hidden),
    .page-lead-call select:not([multiple]):not(.visually-hidden),
    .page-client-consultation select:not([multiple]):not(.visually-hidden),
    .page-lead-call .multi-select-control,
    .page-client-consultation .multi-select-control,
    .page-lead-call .team-picker-toggle,
    .page-client-consultation .team-picker-toggle,
    .page-lead-call .star-rating,
    .page-client-consultation .star-rating{
        box-sizing:border-box;
        width:100%;
        height:52px !important;
        min-height:52px !important;
        max-height:52px;
    }

    .page-lead-call textarea,
    .page-client-consultation textarea,
    .page-lead-call .project-scope-field textarea,
    .page-client-consultation .project-scope-field textarea{
        box-sizing:border-box;
        width:100%;
        height:96px;
        min-height:96px !important;
        max-height:220px;
    }

    .page-lead-call .goal-card,
    .page-client-consultation .goal-card,
    .page-lead-call .dynamic-row,
    .page-client-consultation .dynamic-row,
    .page-lead-call .repeatable-item,
    .page-client-consultation .repeatable-item{
        height:54px;
        min-height:54px;
        max-height:54px;
    }

    .page-recap-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.visually-hidden),
    .page-recap-form select:not([multiple]):not(.visually-hidden),
    .page-recap-form .multi-select-control,
    .page-recap-form .team-picker-toggle,
    .page-recap-form .star-rating{
        box-sizing:border-box;
        width:100%;
        height:52px !important;
        min-height:52px !important;
        max-height:52px;
    }

    .page-recap-form textarea,
    .page-recap-form .project-scope-field textarea{
        box-sizing:border-box;
        width:100%;
        height:52px;
        min-height:52px !important;
        max-height:220px;
    }

    .page-recap-form .goal-card,
    .page-recap-form .dynamic-row,
    .page-recap-form .repeatable-item{
        height:54px;
        min-height:54px;
        max-height:54px;
    }

    .page-recap-form .goal-card:has(.goal-card-fields){
        height:auto;
        min-height:0;
        max-height:none;
        padding:8px !important;
    }

    .page-recap-form .goal-card-fields{
        display:grid;
        grid-template-columns:1fr !important;
        gap:6px;
    }

    .page-recap-form .goal-card-fields input:not(:last-child){
        border-right:0;
        border-bottom:1px solid #E5E7EB;
        padding-right:8px;
    }

    .page-lead-call textarea.compact-phone-note{
        height:52px;
        min-height:52px !important;
        padding-top:14px;
        padding-bottom:14px;
    }
}

/* Desktop repeatable controls and selected-project scope fields. */
@media (min-width: 721px){
    .add-row-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:48px;
        margin-top:10px;
        padding:0 16px;
        border:1px solid #E4C35A;
        border-radius:12px;
        background:#FFFDF6;
        color:#8C6800;
        font-size:14px;
        font-weight:700;
        box-shadow:0 1px 2px rgba(17,24,39,.04);
    }

    .add-row-btn:hover{
        border-color:#D4A017;
        background:#FFF8E7;
        box-shadow:0 3px 10px rgba(212,160,23,.12);
    }

    .add-row-btn::before{
        font-size:18px;
        line-height:1;
    }

    .project-scope-field textarea{
        box-sizing:border-box;
        width:100%;
        height:96px;
        min-height:96px;
        max-height:220px;
    }

    .page-lead-call textarea.compact-phone-note{
        box-sizing:border-box;
        width:100%;
        height:96px;
        min-height:96px;
        max-height:220px;
    }
}

/* Explicit binary choices: clearer than an unchecked checkbox and faster
   than opening a dropdown. */
.yes-no-control{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
}

.yes-no-control button{
    height:52px;
    min-height:52px;
    border:1px solid #DCE3EA;
    border-radius:11px;
    background:#FAFBFC;
    color:#4B5563;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.yes-no-control button.is-selected{
    border-color:#D4A017;
    background:#FFF5D6;
    color:#8A6700;
    box-shadow:0 0 0 2px rgba(212,160,23,.12);
}

/* Dashboard empty state and phone-first home layout. */
.dashboard-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:210px;
    padding:30px 20px;
    text-align:center;
}

.dashboard-empty-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:14px;
    background:#FFF;
    color:#111827;
}

.dashboard-line-icon svg{
    display:block;
    width:22px;
    height:22px;
}

.section-icon.dashboard-line-icon{
    background:#FFF;
    color:#111827;
    border:1px solid #E5E7EB;
}

.dashboard-empty-state h3{ font-size:16px; color:#111827; }
.dashboard-empty-state p{ color:#6B7280; font-size:13px; }
.dashboard-empty-state .btn{ margin-top:8px; }

.dashboard-recent-list{
    max-height:410px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#D4A017 #F3F4F6;
}

.dashboard-recent-list::-webkit-scrollbar{ width:6px; }
.dashboard-recent-list::-webkit-scrollbar-track{ background:#F3F4F6; border-radius:999px; }
.dashboard-recent-list::-webkit-scrollbar-thumb{ background:#D4A017; border-radius:999px; }

@media (max-width:600px){
    .page-dashboard .main{
        padding-top:calc(88px + env(safe-area-inset-top));
        padding-bottom:calc(28px + env(safe-area-inset-bottom));
    }

    .page-dashboard .page-header{
        display:grid;
        gap:14px;
        margin-bottom:14px;
        padding:18px 16px;
        border:1px solid #E5E7EB;
        border-radius:16px;
        background:#FFF;
        box-shadow:0 5px 18px rgba(15,23,42,.055);
    }

    .page-dashboard .page-badge{ margin-bottom:8px; }
    .page-dashboard .page-title-row{ gap:10px; }
    .page-dashboard .page-title-row h1{ font-size:27px; }
    .page-dashboard .page-header-left > p{ margin-top:7px; font-size:14px; line-height:1.45; }
    .page-dashboard .page-header-right,
    .page-dashboard .header-buttons{ width:100%; }
    .page-dashboard .header-buttons .btn{ min-height:50px; border-radius:12px; }

    .page-dashboard .stats-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px;
        margin-bottom:14px;
    }

    .page-dashboard .stat-card{
        display:grid;
        grid-template-columns:36px minmax(0,1fr);
        align-items:center;
        min-height:92px;
        padding:13px;
        border-radius:14px;
    }

    .page-dashboard .stat-value{ font-size:25px; line-height:1; margin-top:4px; }
    .page-dashboard .recap-grid{ display:grid; gap:14px; }
    .page-dashboard .recap-card{ padding:16px 13px; }
    .page-dashboard .section-header{ margin-bottom:14px; }
    .page-dashboard .section-icon{ width:38px; height:38px; border-radius:11px; }

    .page-dashboard .quickstart-grid{ display:grid; gap:8px; }
    .page-dashboard .quickstart-card{
        grid-template-columns:40px minmax(0,1fr) 18px;
        min-height:64px;
        padding:10px 12px;
        border-radius:12px;
        background:#FBFCFD;
    }

    .page-dashboard .quickstart-card::after{
        content:"›";
        grid-column:3;
        grid-row:1 / 3;
        align-self:center;
        color:#A57900;
        font-size:24px;
    }

    .page-dashboard .quickstart-card p{ font-size:11.5px; }
    .page-dashboard .dashboard-empty-state{ min-height:190px; padding:24px 14px; }
    .page-dashboard .dashboard-empty-state .btn{ width:100%; min-height:48px; }
    .page-dashboard .dashboard-recent-list{
        max-height:390px;
        -webkit-overflow-scrolling:touch;
    }
}

.dashboard-start-card{
    border-color:#E8D28C;
    box-shadow:0 8px 24px rgba(212,160,23,.08);
}

/* Shared icon language: monochrome symbols integrated with their content. */
.section-icon,
.section-icon.dashboard-line-icon,
.quickstart-icon,
.stat-icon,
.activity-icon,
.dashboard-empty-icon{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    color:#111827;
}

.quickstart-icon img,
.stat-icon img,
.activity-icon img{
    filter:none;
    opacity:1;
}

/* All Recaps owns monitoring; Home remains focused on starting and recent work. */
.recap-monitor{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}

.recap-monitor-card{
    display:flex;
    min-width:0;
    min-height:126px;
    flex-direction:column;
    justify-content:center;
    padding:20px;
    border:1px solid #E5E7EB;
    border-radius:16px;
    background:#FFF;
    box-shadow:0 5px 18px rgba(15,23,42,.045);
}

.recap-monitor-label{ color:#4B5563; font-size:12px; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.recap-monitor-card strong{ margin:7px 0 5px; color:#111827; font-size:32px; line-height:1; }
.recap-monitor-card small{ color:#8A6A05; font-size:12px; }

@media (max-width:600px){
    .page-all-recaps .recap-monitor{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-bottom:14px;
    }
    .page-all-recaps .recap-monitor-card{
        min-height:104px;
        padding:14px;
        border-radius:14px;
        box-shadow:none;
    }
    .page-all-recaps .recap-monitor-label{ font-size:10px; line-height:1.3; }
    .page-all-recaps .recap-monitor-card strong{ margin:6px 0 4px; font-size:27px; }
    .page-all-recaps .recap-monitor-card small{ font-size:10.5px; }
}

@media (max-width:600px){
    .page-dashboard .page-header{
        display:flex;
        margin-bottom:12px;
        padding:4px 2px 8px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    .page-dashboard .page-badge{ margin-bottom:8px; }
    .page-dashboard .page-title-row{ gap:10px; }
    .page-dashboard .page-title-row h1{ font-size:27px; }
    .page-dashboard .page-header-left > p{ margin-top:7px; font-size:13px; line-height:1.4; }

    .page-dashboard .dashboard-start-card{
        padding:17px 13px;
        border:1px solid #E5C968;
        background:linear-gradient(180deg,#FFFDF7 0%,#FFF 28%);
        box-shadow:0 8px 24px rgba(212,160,23,.1);
    }

    .page-dashboard .dashboard-start-card .section-header h2{
        font-size:20px;
    }
}

/* Lead Call desktop Project Overview: full-width scopes and compact,
   consistent note fields that expand only when the user types more. */
@media (min-width:721px){
    .page-lead-call .project-scope-field{
        grid-column:span 12;
    }

    .page-lead-call .project-scope-field textarea,
    .page-lead-call textarea.compact-phone-note{
        height:64px;
        min-height:64px;
        max-height:220px;
    }
}

/* Final mobile multi-select treatment: selected items remain inside one
   balanced control and scroll horizontally instead of breaking the layout. */
@media (max-width:720px){
    .multi-select-control{
        box-sizing:border-box;
        width:100%;
        height:52px !important;
        min-height:52px !important;
        max-height:52px;
        padding:6px 10px !important;
        overflow:hidden;
    }

    .multi-select-chips{
        flex:1 1 auto;
        flex-wrap:nowrap !important;
        gap:6px;
        min-width:0;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
    }

    .multi-select-chips::-webkit-scrollbar{ display:none; }

    .multi-select-chip,
    .page-lead-call .next-actions-group .multi-select-chip{
        flex:0 0 auto;
        box-sizing:border-box;
        max-width:230px;
        height:32px;
        min-height:32px;
        padding:0 6px 0 10px !important;
        border-radius:9px;
        font-size:12px;
        line-height:1;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .multi-select-chip button{
        flex:0 0 22px;
        width:22px !important;
        height:22px !important;
        min-height:22px !important;
        padding:0 !important;
        font-size:15px;
    }

    .multi-select-caret{
        flex:0 0 auto;
        margin-left:2px;
    }
}

.star-clear{
    flex:0 0 auto;
    min-height:30px !important;
    margin-left:auto;
    padding:4px 6px;
    border:0;
    background:transparent;
    color:#8A6500;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.star-clear[hidden]{ display:none; }

/* Final rating-field treatment: equal visual weight beside standard inputs. */
.page-lead-call .rating-field,
.page-client-consultation .rating-field{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    box-sizing:border-box;
    width:100%;
    height:52px !important;
    min-height:52px !important;
    padding:0 16px !important;
    border:1px solid #D8DEE7 !important;
    border-radius:10px;
    background:#F8FAFC !important;
}

.page-lead-call .rating-field:focus-within,
.page-client-consultation .rating-field:focus-within{
    border-color:#D4A017 !important;
    background:#FFFFFF !important;
    box-shadow:0 0 0 3px rgba(212,160,23,.12);
}

/* Every recap uses the same balanced note-field rhythm. Empty textareas match
   single-line controls, then the shared auto-grow behavior expands real text. */
.page-recap-form textarea,
.page-lead-call textarea,
.page-client-consultation textarea{
    box-sizing:border-box;
    width:100%;
    height:52px;
    min-height:52px !important;
    max-height:220px;
}

/* Client Consultation phone: one final sizing contract for every form
   component so component-specific rules cannot create uneven controls. */
@media (max-width:720px){
    .page-client-consultation .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.visually-hidden),
    .page-client-consultation .form-group select:not([multiple]):not(.visually-hidden),
    .page-client-consultation .multi-select-control,
    .page-client-consultation .team-picker,
    .page-client-consultation .team-picker-input,
    .page-client-consultation .team-picker-toggle,
    .page-client-consultation .star-rating{
        box-sizing:border-box;
        width:100%;
        height:52px !important;
        min-height:52px !important;
        max-height:52px;
    }

    .page-client-consultation textarea,
    .page-client-consultation .project-scope-field textarea,
    .page-client-consultation textarea.compact-phone-note{
        box-sizing:border-box;
        width:100%;
        height:52px;
        min-height:52px !important;
        max-height:220px;
    }

    .page-client-consultation .goal-card,
    .page-client-consultation .dynamic-row,
    .page-client-consultation .repeatable-item{
        box-sizing:border-box;
        width:100%;
        min-height:52px !important;
    }

    .page-client-consultation .goal-card:not(.decision-maker-row),
    .page-client-consultation .dynamic-row,
    .page-client-consultation .repeatable-item{
        height:52px !important;
        max-height:52px;
    }
}

/* Client & Project Readiness: three equal columns on web, one consistent
   full-width control per row on phones. */
.page-client-consultation .readiness-status-grid{
    align-items:end;
}

.page-client-consultation .readiness-status-grid .form-group,
.page-client-consultation .readiness-status-grid select{
    width:100%;
    min-width:0;
}

@media (max-width:720px){
    .page-client-consultation .readiness-status-grid{
        display:grid;
        grid-template-columns:minmax(0,1fr) !important;
        gap:13px !important;
    }

    .page-client-consultation .readiness-status-grid .form-group{
        grid-column:1 / -1 !important;
        margin:0;
    }

    .page-client-consultation .readiness-status-grid select{
        box-sizing:border-box;
        height:52px !important;
        min-height:52px !important;
        max-height:52px;
    }
}

/* Decision makers: paired name/role fields, compact on web and stacked on phone. */
.page-client-consultation .decision-maker-row .goal-card-fields input{
    min-width:0;
}

@media (max-width:720px){
    .page-client-consultation .decision-maker-row{
        height:auto;
        min-height:0;
        max-height:none;
        padding:8px !important;
    }

    .page-client-consultation .decision-maker-row .goal-card-fields{
        display:grid;
        grid-template-columns:1fr;
        gap:6px !important;
    }

    .page-client-consultation .decision-maker-row .goal-card-fields input:not(:last-child){
        border-right:0;
        border-bottom:1px solid #E5E7EB;
        padding-right:8px;
    }
}

.page-client-consultation .condition-other-field{
    margin-top:12px;
}

.page-client-consultation .condition-observation-fields{
    display:grid;
    gap:14px;
    margin-top:14px;
}

.page-client-consultation .condition-observation-fields[hidden],
.page-client-consultation .condition-other-field[hidden]{
    display:none;
}

.page-client-consultation .condition-observation-field{
    margin-bottom:0;
}

@media (min-width:721px){
    .page-client-consultation .condition-multi-select .multi-select-panel{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:4px;
        max-height:320px;
    }

    .page-client-consultation .condition-multi-select .multi-select-panel[hidden]{
        display:none;
    }
}

/* Client Consultation desktop: match Lead Call's compact 52px rhythm. */
@media (min-width:721px){
    .page-client-consultation .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.visually-hidden),
    .page-client-consultation .form-group select:not([multiple]):not(.visually-hidden),
    .page-client-consultation .team-picker-toggle,
    .page-client-consultation .star-rating{
        box-sizing:border-box;
        height:52px;
        min-height:52px;
        padding-top:0;
        padding-bottom:0;
    }

    .page-client-consultation .multi-select-control{
        box-sizing:border-box;
        min-height:52px;
    }

    .page-client-consultation textarea,
    .page-client-consultation .project-scope-field textarea,
    .page-client-consultation textarea.compact-phone-note{
        box-sizing:border-box;
        height:52px;
        min-height:52px;
        max-height:220px;
    }

    .page-client-consultation .project-scope-field{
        grid-column:span 12;
    }

    .page-client-consultation .goal-card,
    .page-client-consultation .dynamic-row,
    .page-client-consultation .repeatable-item{
        min-height:54px;
        padding-top:0;
        padding-bottom:0;
    }

    .page-client-consultation .goal-card input,
    .page-client-consultation .dynamic-row input,
    .page-client-consultation .repeatable-item input{
        height:52px;
        min-height:52px;
        padding-top:0;
        padding-bottom:0;
    }
}

/* Lead Call next actions: actions need room for several clear selections. */
.page-lead-call .qualification-actions-grid{
    margin-top:22px;
}

.page-lead-call .next-actions-group .multi-select-control{
    min-height:56px;
    padding:9px 14px;
    border-color:#D8DEE7;
    background:#FFF;
}

/* Prepare Estimate readiness: conditional next-action detail. */
.estimate-readiness-panel{
    padding:18px;
    border:1px solid #E1E6ED;
    border-radius:14px;
    background:#FAFBFD;
}

.estimate-readiness-panel[hidden]{ display:none; }

.action-requirements-panel{
    padding:18px;
    border:1px solid #E1E6ED;
    border-radius:14px;
    background:#FAFBFD;
}

.action-requirements-panel[hidden],
.action-requirement[hidden]{
    display:none !important;
}

.action-requirements-heading{
    margin-bottom:14px;
}

.action-requirements-heading h3{
    margin:0 0 4px;
    color:#111827;
    font-size:17px;
}

.action-requirements-heading p{
    margin:0;
    color:#6B7280;
    font-size:13px;
}

.action-requirements-summary{
    display:grid;
    gap:7px;
    margin-bottom:14px;
}

.action-requirement-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:38px;
    padding:8px 11px;
    border:1px solid #E3E7ED;
    border-radius:9px;
    background:#FFFFFF;
    color:#475467;
    font-size:13px;
}

.action-requirement-state{
    flex:0 0 auto;
    color:#8A6500;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.035em;
}

.action-requirement-row.is-ready .action-requirement-state{
    color:#287348;
}

.action-requirements-panel > .form-grid,
.action-requirements-panel > .form-group{
    margin-bottom:13px;
}

.action-requirements-panel > :last-child{
    margin-bottom:0;
}

.page-lead-call #budgetFormat[hidden],
.page-lead-call #singleBudgetControl[hidden],
.page-lead-call #rangeBudgetControl[hidden],
.page-lead-call #notProvidedBudgetControl[hidden],
.page-lead-call #budgetChangeButton[hidden]{
    display:none;
}

.page-lead-call #otherProjectAreaContainer[hidden]{
    display:none;
}

.budget-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.budget-change-btn{
    padding:0;
    border:0;
    background:transparent;
    color:#9B7500;
    font:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.budget-dynamic-field > div:not(.budget-label-row){
    width:100%;
}

.budget-range-control{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
}

.budget-range-item{
    min-width:0;
}

.budget-range-item > span{
    display:none;
}

.budget-not-provided{
    display:flex;
    align-items:center;
    box-sizing:border-box;
    width:100%;
    height:52px;
    padding:0 16px;
    border:1px solid #D8DEE7;
    border-radius:10px;
    background:#F8FAFC;
    color:#667085;
    font-size:15px;
}

@media (max-width:720px){
    .page-lead-call .budget-main-grid{
        gap:14px !important;
    }

    .page-lead-call .budget-label-row{
        min-height:20px;
    }

    .page-lead-call .budget-change-btn{
        min-height:32px;
        margin:-7px -4px -5px 0;
        padding:4px 6px;
    }

    .page-lead-call .budget-range-control{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:10px;
    }

    .page-lead-call .budget-range-item > span{
        display:block;
        margin:0 0 5px;
        color:#667085;
        font-size:11px;
        font-weight:700;
    }

    .page-lead-call .budget-range-item input:not([type="hidden"]){
        width:100%;
        min-width:0;
    }
}

.estimate-readiness-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}

.estimate-readiness-header h3{
    margin:0 0 4px;
    font-size:17px;
    color:#111827;
}

.estimate-readiness-header p{
    margin:0;
    color:#6B7280;
    font-size:13px;
}

.estimate-readiness-status{
    flex:0 0 auto;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.estimate-readiness-status.is-ready{
    background:#EAF7EF;
    color:#287348;
}

.estimate-readiness-status.is-blocked{
    background:#FFF4D6;
    color:#8A6500;
}

.estimate-readiness-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.readiness-check{
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.readiness-check legend{
    margin-bottom:7px;
    color:#374151;
    font-size:13px;
    font-weight:700;
}

.segmented-options{
    display:flex;
    min-height:44px;
    padding:3px;
    border:1px solid #D8DEE7;
    border-radius:10px;
    background:#FFFFFF;
}

.segmented-options label{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    cursor:pointer;
}

.segmented-options input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.segmented-options span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:36px;
    padding:5px 8px;
    border-radius:7px;
    color:#667085;
    font-size:12px;
    font-weight:600;
    text-align:center;
}

.segmented-options input:checked + span{
    background:#FFF4CC;
    color:#8B6800;
}

.segmented-options input:focus-visible + span{
    box-shadow:0 0 0 2px rgba(212,160,23,.28);
}

.estimate-readiness-notes{
    margin:14px 0 0 !important;
}

@media (max-width:720px){
    .estimate-readiness-panel{ padding:14px 12px; }
    .action-requirements-panel{ padding:14px 12px; }
    .estimate-readiness-header{ display:block; }
    .estimate-readiness-status{
        display:inline-flex;
        margin-top:10px;
    }
    .estimate-readiness-grid{
        grid-template-columns:1fr;
        gap:13px;
    }
    .segmented-options span{ min-height:40px; }
}

.page-lead-call .next-actions-group .multi-select-chip{
    padding:6px 9px 6px 12px;
    border:1px solid #F1DA8A;
    background:#FFF8DE;
    color:#936B00;
}

@media (min-width:721px){
    .page-lead-call .next-actions-group .multi-select-panel{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:4px;
        max-height:300px;
        padding:10px;
    }

    .page-lead-call .next-actions-group .multi-select-panel[hidden]{
        display:none;
    }
}

@media (max-width:720px){
    .page-lead-call .qualification-actions-grid{
        margin-top:14px;
    }

    .page-lead-call .next-actions-group .multi-select-control{
        min-height:52px;
        padding:7px 12px;
    }

    .page-lead-call .next-actions-group .multi-select-panel{
        max-height:58vh;
    }
}

/* Empty-field copy stays visibly softer than user-entered values. */
.page-dashboard input::placeholder,
.page-dashboard textarea::placeholder,
.page-all-recaps input::placeholder,
.page-all-recaps textarea::placeholder,
.page-lead-call input::placeholder,
.page-lead-call textarea::placeholder,
.page-client-consultation input::placeholder,
.page-client-consultation textarea::placeholder,
.page-recap-form input::placeholder,
.page-recap-form textarea::placeholder{
    color:#A7AFBC;
    opacity:.76;
}

/* Lead Call desktop: every empty form control begins at one 52px height.
   Textareas and wrapped multi-selects can grow only when content requires it. */
@media (min-width:721px){
    .page-lead-call .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.visually-hidden),
    .page-lead-call .form-group select:not([multiple]):not(.visually-hidden),
    .page-lead-call .team-picker-toggle,
    .page-lead-call .star-rating{
        box-sizing:border-box;
        height:52px;
        min-height:52px;
        padding-top:0;
        padding-bottom:0;
    }

    .page-lead-call .multi-select-control{
        box-sizing:border-box;
        min-height:52px;
    }

    .page-lead-call textarea,
    .page-lead-call .project-scope-field textarea,
    .page-lead-call textarea.compact-phone-note{
        box-sizing:border-box;
        height:52px;
        min-height:52px;
        max-height:220px;
    }
}