/* frank body Asset Portal - screen-level composition only.
   Everything visual comes from the design system's tokens; these classes are
   layout that is specific to these screens. Prefix: ap-. */

/* --- step strip: three numbered stages, hairline connectors --- */
.ap-steps{display:flex;align-items:center;gap:var(--space-100);flex-wrap:wrap}
.ap-step{display:inline-flex;align-items:center;gap:var(--space-200);height:var(--space-800);padding-inline:var(--space-300) var(--space-400);border:0;border-radius:var(--radius-200);background:transparent;font-size:var(--type-body-md-size);line-height:var(--type-body-md-line);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);cursor:pointer;transition:background-color var(--motion-hover),color var(--motion-hover)}
.ap-step:hover:not(:disabled){background:var(--color-bg-fill-transparent-hover);color:var(--color-text)}
.ap-step.is-current{background:var(--color-bg-surface);box-shadow:var(--shadow-100);color:var(--color-text);font-weight:var(--font-weight-medium)}
.ap-step:disabled{color:var(--color-text-disabled);cursor:default}
.ap-step__n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-bg-fill-transparent-secondary);font-size:var(--type-body-sm-size);font-variant-numeric:tabular-nums;color:var(--color-text-secondary);flex:0 0 auto}
.ap-step.is-current .ap-step__n{background:var(--color-bg-fill-brand);color:var(--color-text-brand-on-bg-fill)}
.ap-step.is-done .ap-step__n{background:var(--color-success-fill-secondary);color:var(--color-success-text)}
.ap-step__rule{width:24px;height:1px;background:var(--color-border);flex:0 0 auto}

/* --- tile grids --- */
.ap-grid{display:grid;gap:var(--space-300)}
.ap-grid--collections{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-grid--tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.ap-grid--tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.ap-grid--collections,.ap-grid--tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- collection tile: a card, not a hero --- */
.ap-collection{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-400);min-height:96px;padding:var(--space-400);border:0;border-radius:var(--radius-300);background:var(--color-bg-surface);box-shadow:var(--shadow-100);text-align:start;cursor:pointer;transition:background-color var(--motion-hover),box-shadow var(--motion-hover)}
.ap-collection:hover{background:var(--color-bg-surface-hover);box-shadow:var(--shadow-200)}
.ap-collection.is-selected{background:var(--color-bg-surface-selected)}
.ap-collection:disabled{background:var(--color-bg-surface);box-shadow:var(--shadow-100);cursor:default}
.ap-collection__name{font-size:var(--type-heading-md-size);line-height:var(--type-heading-md-line);font-weight:var(--type-heading-md-weight);color:var(--color-text)}
.ap-collection:disabled .ap-collection__name{color:var(--color-text-disabled)}
.ap-collection__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-200)}
.ap-collection__foot>.as-text{flex:0 0 auto;white-space:nowrap}
.ap-collection__foot>.as-badge{flex:0 0 auto}

/* --- asset / product tile --- */
.ap-tile{display:flex;flex-direction:column;padding:0;border:0;border-radius:var(--radius-300);background:var(--color-bg-surface);box-shadow:var(--shadow-100);overflow:hidden;text-align:start;transition:box-shadow var(--motion-hover)}
button.ap-tile{cursor:pointer}
button.ap-tile:hover{box-shadow:var(--shadow-200)}
.ap-tile.is-selected{background:var(--color-bg-surface-selected)}
.ap-tile.is-pending{cursor:default}
.ap-tile__frame{position:relative;aspect-ratio:1;background:var(--color-bg-surface-secondary);display:flex;align-items:center;justify-content:center}
.ap-tile__check{position:absolute;top:var(--space-200);inset-inline-end:var(--space-200);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-bg-surface);box-shadow:var(--shadow-100);color:transparent}
.ap-tile.is-selected .ap-tile__check{background:var(--color-bg-fill-brand);color:var(--color-text-brand-on-bg-fill);box-shadow:none}
.ap-tile__tag{position:absolute;bottom:var(--space-200);inset-inline-end:var(--space-200)}
.ap-tile__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-050);padding:var(--space-300)}
.ap-tile__body>.as-text{max-width:100%}
.ap-tile__mono{font-family:var(--font-mono);font-size:var(--type-body-xs-size);line-height:var(--font-line-height-400);color:var(--color-text-secondary)}

/* placeholder for a file the bucket has not received yet */
.ap-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-150);color:var(--color-icon-secondary)}
.ap-placeholder span{font-size:var(--type-body-xs-size);color:var(--color-text-disabled)}
.ap-wire{position:absolute;inset:0;background:var(--color-bg-surface-tertiary)}

/* --- size chips: Button in its own wrapping row, never a hand-rolled control --- */
.ap-chips{display:flex;flex-wrap:wrap;gap:var(--space-200)}
.ap-chips .as-btn{font-variant-numeric:tabular-nums}

/* --- filename preview --- */
.ap-filename{display:block;padding:var(--space-200) var(--space-300);border-radius:var(--radius-200);background:var(--color-bg-surface-secondary);font-family:var(--font-mono);font-size:var(--type-body-sm-size);line-height:var(--font-line-height-500);color:var(--color-text);word-break:break-all}

/* --- basket --- */
.ap-basket__row{display:flex;align-items:flex-start;gap:var(--space-200);padding:var(--space-300) 0}
.ap-basket__row+.ap-basket__row{border-top:var(--border-width-025) solid var(--color-border-secondary)}
.ap-basket__empty{padding:var(--space-600) var(--space-300);border-radius:var(--radius-200);background:var(--color-bg-surface-secondary);text-align:center}
.ap-meter{height:6px;border-radius:var(--radius-full);background:var(--color-bg-fill-secondary);overflow:hidden}
.ap-meter span{display:block;height:100%;background:var(--color-bg-fill-brand);transition:width var(--motion-hover)}

/* --- shared --- */
.ap-file{font-family:var(--font-mono);font-size:var(--type-body-sm-size);font-variant-numeric:tabular-nums;color:var(--color-text);white-space:nowrap}
.ap-table td,.ap-table th{white-space:nowrap}

/* --- requests: list beside the form, per the repo's 1.3fr/1fr split --- */
.ap-requests{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-400);align-items:start}
@media (max-width:1100px){.ap-requests{grid-template-columns:minmax(0,1fr)}}
.ap-req__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-300);padding:var(--space-300) var(--space-400);border-bottom:var(--border-width-025) solid var(--color-border-secondary)}
.ap-req__none{padding:var(--space-1000) var(--space-400);text-align:center}
.ap-req{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-300);padding:var(--space-300) var(--space-400);border-bottom:var(--border-width-025) solid var(--color-border-secondary)}
.ap-req:last-child{border-bottom:0}
.ap-req__main{min-width:0}
.ap-req__title{display:flex;align-items:center;gap:var(--space-250);min-width:0}
.ap-req__dot{width:8px;height:8px;border-radius:var(--radius-full);flex:0 0 auto}
.ap-req__dot--open{background:var(--color-info-fill-active)}
.ap-req__dot--in_progress{background:var(--color-warning-fill)}
.ap-req__dot--closed{background:var(--color-success-fill)}
.ap-req__text{margin:var(--space-050) 0 0;padding-inline-start:18px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line);color:var(--color-text-secondary);text-wrap:pretty}
.ap-req__meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-150);flex:0 0 auto}

/* --- admin --- */
.ap-client__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-300)}
.ap-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-400);align-items:start}
@media (max-width:1100px){.ap-invite{grid-template-columns:minmax(0,1fr)}}
.ap-checkgrid{display:grid;gap:var(--space-200)}
.ap-checkgrid__cell{padding:var(--space-250) var(--space-300);border-radius:var(--radius-200);background:var(--color-bg-surface-secondary)}

.ap-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-300);padding:var(--space-2400) var(--space-400);text-align:center}
.ap-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-400);align-items:start}
@media (max-width:1100px){.ap-layout{grid-template-columns:minmax(0,1fr)}}
.ap-sticky{position:sticky;top:calc(var(--topbar-height) + var(--space-400))}