/* Shared collection type, spacing, surfaces and dividers.
   Column templates and narrow-screen stacking stay with each view. */
:root{
 --table-label:10px;
 --table-body:13px;
 --table-title:14px;
 --row-space:16px;
 --collection-inset:20px;
 --collection-radius:10px;
 --control-height:46px;
 --control-font:700 11px/1.35 var(--mono);
}

#app :is(.project-list-head,.directory-column-head,.project-crew-head,.crew-edit-head,.edit-column-head,.workspace-event-head,.client-visibility-head,.agreement-table-head){
 font:400 var(--table-label)/1.5 var(--mono);
 letter-spacing:.06em;
 text-transform:uppercase;
 color:var(--muted);
 background:var(--surface);
 padding:10px var(--collection-inset);
 min-height:0;
 border-bottom:1px solid var(--line);
}
#app :is(.project-list-head,.directory-column-head,.project-crew-head,.crew-edit-head,.edit-column-head,.workspace-event-head,.client-visibility-head,.agreement-table-head) button{
 font:inherit;
 letter-spacing:inherit;
 text-transform:inherit;
 min-height:0;
 padding:0;
 margin:0;
}
#app :is(.project-row,.directory-row,.unified-member-summary,.crew-edit-row>.assignment-content>summary,.edit-list-row,.workspace-event-summary,.client-visibility-row,.client-deliverable,.wave-invoice-row,.payment-history-row,.agreement-table .agreement-row,.library-gear-row,.budget-row,.my-work-project){
 font:400 var(--table-body)/1.5 var(--font-body);
 padding-block:var(--row-space);
 min-width:0;
}
#app :is(.project-row,.directory-row,.unified-member-summary,.edit-list-row,.workspace-event-summary,.client-deliverable,.my-work-project) h3,
#app :is(.agreement-table .agreement-row,.client-visibility-row)>strong,
#app .client-visibility-row>div>strong{
 font:600 var(--table-title)/1.45 var(--font-body);
 letter-spacing:0;
 margin:0;
}
#app :is(.directory-role-column,.directory-contact,.edit-list-group,.edit-list-editor,.edit-list-deadline,.member-role,.member-call,.client-deliverable-group){
 font:400 var(--table-body)/1.5 var(--font-body);
}
#app :is(.project-row,.directory-row,.edit-list-row,.workspace-event-summary,.client-deliverable,.library-gear-row,.my-work-project) small{
 font:400 12px/1.5 var(--font-body);
}

/* Keep search, sort, tab and filter controls on the same baseline. */
#app :is(.project-toolbar,.event-toolbar,.client-filters,.edit-tabs,.event-nav,.project-filters,.tabs){gap:10px}
#app :is(.project-toolbar,.event-toolbar,.client-filters,.edit-tabs,.event-nav){margin-block:20px;align-items:center}
#app :is(.project-toolbar,.event-toolbar,.client-filters,.edit-tabs,.event-nav,.project-filters,.tabs) button,
#app :is(.project-toolbar,.event-toolbar,.client-filters) input,
#app .project-sort.field{font:var(--control-font);letter-spacing:.055em;text-transform:uppercase}
#app :is(.project-toolbar,.event-toolbar,.client-filters,.edit-tabs,.event-nav,.project-filters,.tabs) button,
#app :is(.project-toolbar,.event-toolbar,.client-filters) input{min-height:var(--control-height);height:auto;padding:12px 14px;margin-block:0}
#app :is(.project-toolbar,.event-toolbar,.client-filters) input::placeholder{font:inherit;letter-spacing:inherit;text-transform:uppercase}
/* Applies to both generated dropdowns and native fallbacks, including dialogs. */
:is(#app,dialog) .styled-select-trigger,:is(#app,dialog) select:not(.styled-select-native){font:var(--control-font);letter-spacing:.055em;text-transform:uppercase;min-height:var(--control-height);height:auto;padding:12px 36px 12px 12px}
:is(#app,dialog) .styled-select-options button{font:var(--control-font);letter-spacing:.055em;text-transform:uppercase;min-height:40px;height:auto;padding:10px 12px;margin:0}
:is(#app,dialog) .styled-select-options{padding:6px;border-radius:8px}
#app .event-toolbar .event-setup-menu>summary{min-height:var(--control-height);font:var(--control-font);letter-spacing:.055em;padding:12px 14px}
#app .project-sort.field{gap:10px}
@media(max-width:800px){
 #app :is(.project-row,.directory-row,.unified-member-summary,.edit-list-row,.workspace-event-summary,.client-visibility-row,.client-deliverable){row-gap:8px}
 #app .client-filters{flex-wrap:wrap}
 #app .client-filters>*{min-width:0;max-width:100%}
}
#app .styled-select .styled-select-trigger{padding-right:36px}
#app .event-toolbar .event-setup-options>button{min-height:40px;padding:10px 12px}
/* Generated select wrappers must share available width with the search input. */
#app .client-filters:has(#client-search){display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(0,1fr));gap:10px}
#app .client-filters:has(#client-search)>:is(input,select,.styled-select){width:100%;min-width:0;max-width:none}
@media(max-width:800px){#app .client-filters:has(#client-search){grid-template-columns:repeat(2,minmax(0,1fr))}#app .client-filters>#client-search{grid-column:1/-1}}
@media(max-width:450px){#app .client-filters:has(#client-search){grid-template-columns:minmax(0,1fr)}}

/* Top-level collections use the same quiet header and uninterrupted rows. */
#app :is(.project-list,.directory-list,.project-crew-list,.edit-column-list,.workspace-event-list,.agreement-table,.client-group,.my-work-projects),
#app #client-visibility-list{
 border:1px solid var(--line);
 border-radius:var(--collection-radius);
 background:var(--paper);
 overflow:hidden;
}
#app :is(.project-row,.directory-row,.unified-member-summary,.edit-list-row,.workspace-event-summary,.client-visibility-row,.client-deliverable,.agreement-table .agreement-row){
 background:var(--paper);
 padding-inline:var(--collection-inset);
}
/* One separator per boundary; older directory styles also drew a bottom line. */
#app :is(.project-row,.directory-row,.agreement-table .agreement-row){
 border:0;
 border-radius:0;
}
#app :is(.project-row+.project-row,.directory-row+.directory-row,.agreement-row+.agreement-row){border-top:1px solid var(--line)}
#app .directory-list{gap:0}
/* Keep last-row action menus outside the collection's clipping boundary. */
#app .directory-list{overflow:visible}
#app .directory-list>.directory-row:first-child{border-radius:var(--collection-radius) var(--collection-radius) 0 0}
#app .directory-list>.directory-row:last-child{border-radius:0 0 var(--collection-radius) var(--collection-radius)}
#app .directory-list>.directory-row:only-child{border-radius:var(--collection-radius)}
#app .directory-column-head{border-radius:var(--collection-radius) var(--collection-radius) 0 0}
#app :is(.project-row,.directory-row,.unified-member-summary,.edit-list-row,.workspace-event-summary,.client-visibility-row,.client-deliverable,.agreement-row)>*{min-width:0}
#app :is(.project-row,.directory-row,.client-visibility-row,.client-deliverable,.agreement-row){overflow-wrap:anywhere}

/* The action column must have the same width in the header and every row. */
#app .agreement-table :is(.agreement-table-head,.agreement-row){
 grid-template-columns:minmax(0,1.5fr) minmax(100px,.8fr) minmax(0,1fr) 154px;
 gap:20px;
}
#app .agreement-table .agreement-row>button{justify-self:stretch}
#app .agreement-table .badge{white-space:normal}
#app .agreement-empty{
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:var(--collection-radius);
 padding:var(--row-space) var(--collection-inset);
 font:400 var(--table-body)/1.5 var(--font-body);
 color:var(--muted);
}

/* Group headers in client review are headings, not a second card style. */
#app .client-group>.topline{
 background:var(--surface);
 padding:12px var(--collection-inset);
 margin:0;
 border-bottom:1px solid var(--line);
 gap:12px;
}
#app .client-group>.topline h2{font:600 var(--table-title)/1.45 var(--font-body);letter-spacing:0;margin:0}
#app .client-group>.topline small{font:400 12px/1.5 var(--font-body)}
#app .client-group>.client-deliverable{border:0}
#app .client-group>.client-deliverable+.client-deliverable{border-top:1px solid var(--line)}

/* Crew's project and work queues follow the same row rhythm as producer lists. */
#app .my-work-projects>.my-work-project{
 border:0;
 border-radius:0!important;
 background:var(--paper);
 padding:var(--row-space) var(--collection-inset)!important;
 margin:0!important;
}
#app .my-work-projects>.my-work-project+.my-work-project{border-top:1px solid var(--line)}
#app .my-work-project :is(.edit-meta,small){font:400 12px/1.5 var(--font-body)}
#app .my-work-project h3{margin:4px 0}
#app .my-edit-queue{
 border:1px solid var(--line);
 border-radius:var(--collection-radius);
 overflow:hidden;
 background:var(--paper);
}
#app .my-edit-queue>button{
 border:0;
 border-radius:0;
 background:var(--paper);
 margin:0;
 padding:var(--row-space) var(--collection-inset);
 font:400 var(--table-body)/1.5 var(--font-body);
}
#app .my-edit-queue>button+button{border-top:1px solid var(--line)}
#app .my-edit-queue>button strong{font-weight:600}

/* Collections nested inside cards use dividers without another outside box. */
:is(#app,dialog) :is(.library-gear-row,.gear-kit-row,.wave-invoice-row,.payment-history-row,.budget-row,.gear-picker-row,.review-note){
 border-radius:0;
 border:0;
 border-bottom:1px solid var(--line);
 padding-block:var(--row-space);
 font:400 var(--table-body)/1.5 var(--font-body);
 min-width:0;
 overflow-wrap:anywhere;
}
:is(#app,dialog) :is(.library-gear-row,.gear-kit-row,.wave-invoice-row,.payment-history-row,.budget-row,.gear-picker-row,.review-note):last-child{border-bottom:0}
:is(#app,dialog) .gear-picker-row label{font:400 var(--table-body)/1.5 var(--font-body)}
:is(#app,dialog) .gear-picker-row:has(>label){min-height:48px}
#app .library-kit{
 padding:var(--row-space) 0;
 margin:0;
 border:0;
 border-bottom:1px solid var(--line);
 border-radius:0;
 background:transparent;
}
#app .library-kit:last-of-type{border-bottom:0}
#app .library-kit .topline h3{font:600 var(--table-title)/1.45 var(--font-body);letter-spacing:0;margin:0}
#app .library-kit ul,
dialog .gear-kit-row ul{list-style:none;margin:12px 0;padding:0}
#app .library-kit li,
dialog .gear-kit-row li{padding:8px 0;border-bottom:1px solid var(--line);font:400 var(--table-body)/1.5 var(--font-body)}
#app .library-kit li:last-child,
dialog .gear-kit-row li:last-child{border-bottom:0}
#app .library-kit.is-drop-target{outline:2px solid var(--accent);outline-offset:4px;background:var(--tone-c5f45b08,#c5f45b08)}

/* Packing lists, shot checklists and dated responsibilities share the same type. */
#app :is(.check,.day-row,.schedule-row){
 padding-block:var(--row-space);
 font:400 var(--table-body)/1.5 var(--font-body);
 border:0;
 border-top:1px solid var(--line);
}
#app :is(.check,.day-row) small{font:400 12px/1.5 var(--font-body)}
#app .check>span{min-width:0;overflow-wrap:anywhere}

/* Search pickers remain scrollable and use selectable rows instead of button cards. */
dialog :is(.frame-picker-list,.wave-picker-results){
 gap:0;
 border:1px solid var(--line);
 border-radius:var(--collection-radius);
 background:var(--paper);
 overflow:auto;
}
dialog :is(.frame-picker-list,.wave-picker-results)>button{
 margin:0;
 padding:14px 16px;
 border:0;
 border-radius:0;
 background:var(--paper);
 font:400 var(--table-body)/1.5 var(--font-body);
 overflow-wrap:anywhere;
 flex-shrink:0;
}
dialog :is(.frame-picker-list,.wave-picker-results)>button+button{border-top:1px solid var(--line)}
dialog :is(.frame-picker-list,.wave-picker-results)>button:focus-visible{outline-offset:-2px}

@media(hover:hover){
 #app :is(.project-row,.edit-list-details>summary,.workspace-event-summary,.my-edit-queue>button):hover,
 dialog :is(.frame-picker-list,.wave-picker-results)>button:hover{background:var(--surface)}
}
@media(max-width:800px){
 :root{--collection-inset:16px}
}
@media(max-width:650px){
 /* Preserve each row's mobile grid while removing the older card-within-list shell. */
 #app .project-list{gap:0}
 #app .project-list .project-row{border-radius:0;border-inline:0;border-bottom:0}
 #app .agreement-table .agreement-row{grid-template-columns:minmax(0,1fr) auto;gap:12px}
 #app .agreement-table .agreement-row>button{justify-self:end}
 #app .agreement-table .agreement-row>strong{font-size:var(--table-title)}
 #app .agreement-table .agreement-row>.badge{max-width:100%}
}