.file-picker { padding-block:var(--space-8) var(--space-68); scroll-margin-top:var(--space-110); }
.file-picker-heading { max-width: 780px; margin:0 auto var(--space-30); text-align: center; }
.file-picker-heading .section-index { margin-bottom:var(--space-16); }
.file-picker-heading h2 { margin-bottom:var(--space-16); font-size: var(--font-size-h2); font-weight:var(--font-weight-heading); line-height:var(--line-height-h2); letter-spacing:var(--letter-spacing-h2); text-wrap: balance; }
.file-picker-heading > p:last-child { color: #475962; line-height:var(--line-height-body); }
.file-picker-panel { overflow: hidden; border: 1px solid var(--line); border-radius:var(--radius-20); background: white; box-shadow: 0 12px 38px rgba(15,38,53,.04); }
.file-picker-fields { min-width: 0; margin:0; padding:var(--space-28); border: 0; }
.file-picker-sr { position: absolute; width: 1px; height: 1px; padding:0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.file-picker-toolbar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap:var(--space-12); margin-bottom:var(--space-24); }
.file-picker-toolbar p { margin:0; color: #475962; font-size: var(--font-size-p1); }
.file-picker-toolbar > div { display: flex; flex-wrap: wrap; gap:var(--space-8) var(--space-20); }
.file-picker-toolbar button { min-height: 34px; border: 0; padding:0; background: none; color: var(--blue-dark); font-size: var(--font-size-p1); font-weight: 650; cursor: pointer; }
.file-picker-toolbar button:hover { text-decoration: underline; }
.file-picker-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:var(--space-26); }
.file-picker-group { min-width: 0; }
.file-picker-group-heading { display: flex; align-items: center; gap:var(--space-10); margin-bottom:var(--space-16); }
.file-picker-group-heading > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius:var(--radius-8); background: #eaf0ff; color: var(--blue-dark); font:600 var(--font-size-small-2-compact)/var(--line-height-body) var(--mono); }
.file-picker-group--photo .file-picker-group-heading > span { background: #e2f6ee; color: #21644e; }
.file-picker-group--raw .file-picker-group-heading > span { background: #fff0dc; color: #8a5109; }
.file-picker-group--audio .file-picker-group-heading > span { background: #e6f5fa; color: #216174; }
.file-picker-group h3 { margin:0; font-size: var(--font-size-h3); font-weight:var(--font-weight-heading); }
.file-picker-options { display: flex; flex-wrap: wrap; align-content: start; gap:var(--space-8); }
.file-picker-option { position: relative; cursor: pointer; }
.file-picker-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin:0; opacity: 0; cursor: pointer; }
.file-picker-option > span { display: inline-flex; align-items: center; justify-content: space-between; gap:var(--space-7); min-height: 42px; padding:0 var(--space-10); border: 1px solid #d8e0e6; border-radius:var(--radius-7); background: #fafbfc; font:500 var(--font-size-small-2-compact)/var(--line-height-body) var(--mono); transition: background .15s, border-color .15s; }
.file-picker-option i { font-style: normal; color: transparent; font-family: var(--sans); }
.file-picker-option input:hover + span { border-color: var(--blue); }
.file-picker-option input:checked + span { border-color: var(--blue); background: #edf2ff; color: var(--blue-dark); }
.file-picker-option input:checked + span i { color: var(--blue); }
.file-picker-option input:focus-visible + span,
.file-picker :is(button, select, a):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.file-picker-bottom { display: grid; grid-template-columns: 1fr 1fr; gap:var(--space-24) var(--space-40); padding:var(--space-24) var(--space-28); border-top: 1px solid var(--line); background: #f7f9fc; }
.file-picker-platform, .file-picker-download { min-width: 0; }
.file-picker-platform label { display: block; margin-bottom:var(--space-8); font-size: var(--font-size-small-2-compact); font-weight: 650; }
.file-picker-platform select { width: 100%; max-width: 370px; min-height: 44px; padding:var(--space-8) var(--space-30) var(--space-8) var(--space-12); border: 1px solid #cbd6e0; border-radius:var(--radius-8); background: white; color: var(--ink); font:var(--font-size-small-1)/var(--line-height-body) var(--sans); }
.file-picker-bottom p { margin:var(--space-9) 0 0; color: #52616d; font-size: var(--font-size-small-2-compact); line-height:var(--line-height-body); }
.file-picker-download { align-self: center; }
.file-picker-download .button { width: 100%; min-height: 52px; padding-block:var(--space-12); text-align: center; line-height:var(--line-height-body); }
.file-picker-download .button[aria-disabled="true"] { color: #596977; background: #e1e7ee; cursor: not-allowed; box-shadow: none; transform: none; }
.file-picker-preview { margin:0; padding:var(--space-13) var(--space-28); border-top: 1px solid var(--line); color: #74501b; background: #fffaf0; font-size: var(--font-size-small-2-compact); line-height:var(--line-height-body); }
.file-picker-scope { margin:var(--space-16) 0 0; text-align: center; color: #52616d; font-size: var(--font-size-small-2-compact); line-height:var(--line-height-body); }
.file-picker-noscript { padding:var(--space-20) var(--space-28); line-height:var(--line-height-body); }
.file-picker-noscript a { color: var(--blue); text-decoration: underline; }
@media (max-width: 1000px) {
  .file-picker-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:var(--space-28); }
}
@media (max-width: 600px) {
  .file-picker { padding-bottom:var(--space-44); }
  .file-picker-fields { padding:var(--space-22) var(--space-18); }
  .file-picker-groups, .file-picker-bottom { grid-template-columns: 1fr; }
  .file-picker-bottom { padding:var(--space-22) var(--space-18); }
  .file-picker-platform select { max-width: 100%; }
  .file-picker-preview { padding-inline:var(--space-18); }
}
@media (prefers-reduced-motion: reduce) {
  .file-picker-option > span, .file-picker .button { transition: none; }
}

.file-picker-group-heading { align-items: flex-start; }
.file-picker-group-heading > span { flex-shrink: 0; }
.file-picker-platform select { font-size: var(--font-size-p1); }
.file-picker-toolbar > div { gap: var(--space-8); }
.file-picker-toolbar button { border: 1px solid var(--line); border-radius: var(--radius-7); }
.file-picker-group h3 { overflow-wrap: anywhere; }
.file-picker-heading h2 { margin-bottom: var(--rhythm-heading-to-copy); }
.file-picker-heading .section-index { margin-bottom: var(--rhythm-eyebrow-to-heading); }