/* Graphite Studio: one searchable library, stable player and contextual details. */
.library-filters { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.library-filters label { display: block; margin-bottom: 8px; }
.library-filters input, .library-filters select { width: 100%; }
/* The filter toggle and the flight count share one line. */
.library-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; margin-bottom: 8px; }
.library-bar > .flight-filters { grid-area: 1 / 1 / 2 / 3; min-width: 0; }
.library-bar > #flight-count { grid-area: 1 / 2; align-self: start; margin: 0; padding: 5px 0; line-height: 20px; pointer-events: none; }
.flight-filters > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 4px 0; font-weight: 600; list-style: none; }
.flight-filters > summary::-webkit-details-marker { display: none; }
.flight-filters > summary .icon { width: 16px; height: 16px; transition: transform .16s; }
.flight-filters[open] > summary .icon { transform: rotate(180deg); }
.library-active:not(:empty) { padding: 0 8px; border-radius: 999px; background: var(--selection); color: var(--accent); font-size: 12px; font-weight: 500; line-height: 20px; }
.flight-filters[open] > summary { margin-bottom: 16px; }
.library-more { margin: 14px 0 6px; }
.library-more summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
.library-more .library-filters { margin-top: 16px; }
/* Flights: one line per flight under a sticky column header. */
.flight-list { list-style: none; margin: 0; padding: 0; }
.flight-head, .flight-row { display: grid; grid-template-columns: 28px minmax(0, 2.2fr) 104px minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.2fr) 64px; column-gap: 16px; align-items: center; padding-inline: 10px; }
.flight-head { position: sticky; top: 0; z-index: 2; padding-block: 4px 7px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--quiet); font-size: 12px; }
.flight-row { position: relative; min-height: 46px; padding-block: 7px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.flight-row:hover { background: var(--hover); }
.flight-row:has(.flight-name:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.flight-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: var(--raised); }
.flight-symbol .icon { width: 15px; height: 15px; }
.flight-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flight-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; text-decoration: none; }
.flight-name::after { content: ""; position: absolute; inset: 0; }
.flight-name:hover { text-decoration: underline; }
.flight-name:focus-visible { outline: none; }
.flight-badge { flex: none; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-size: 11px; line-height: 18px; }
.flight-sub { display: contents; }
.flight-date, .flight-where, .flight-people, .flight-footage, .flight-moments { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.flight-date, .flight-footage, .flight-moments { font-variant-numeric: tabular-nums; }
.flight-moments, .flight-head .flight-number { text-align: right; }
.flight-people a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.flight-people a:hover { color: var(--text); text-decoration: underline; }
.flight-quiet { color: var(--quiet); }
.flight-extra::before { content: "· "; content: "· " / ""; color: var(--quiet); }
.flight-sr, .flight-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.detail-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.detail-tabs button { background: transparent; border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 12px 8px; color: var(--muted); flex: 1; }
.detail-tabs [aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.detail-tabs span { margin-left: 6px; }
.moment-panel { align-self: start; }
.moment-panel .context-body { display: grid; grid-template-columns: 1fr; padding: 0; gap: 24px; }
.moment-panel .context-edit { margin-top: 24px; padding: 0; }
.moment-panel .context-people { display: grid; grid-template-columns: 1fr; }
.moment-panel .panel-title { flex-wrap: wrap; gap: 10px; }
.moment-panel .panel-title h2 { font-size: 15px; }
.moment-seek { border: 0; background: transparent; color: var(--warning); padding: 4px 8px; margin-left: -8px; font-variant-numeric: tabular-nums; }
.footage-manage { border-top: 1px solid var(--line); padding: 18px 0; }
.footage-manage > summary { font-weight: 600; min-height: 42px; cursor: pointer; }
.trim-heading, .trim-times { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 0; font-size: 13px; }
.trim-heading label { font-weight: 600; }
.trim-times, .trim-duration { color: var(--muted); font-variant-numeric: tabular-nums; }
.trim-track { position: relative; height: 72px; margin: 0 16px; background: var(--input); cursor: pointer; }
.trim-film { position: absolute; inset: 0; display: flex; overflow: hidden; opacity: .6; }
.trim-film canvas { width: 10%; height: 100%; object-fit: cover; flex-shrink: 0; }
.trim-selection { position: absolute; top: 0; bottom: 0; border: 2px solid var(--accent); pointer-events: none; }
.trim-handle { position: absolute; top: -4px; bottom: -4px; width: 28px; min-height: 44px; padding: 0; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: ew-resize; touch-action: none; transform: translateX(-50%); border-radius: 4px; }
.trim-handle::after { content: ""; width: 3px; height: 24px; background: var(--accent-ink); display: block; margin: auto; border-radius: 4px; }
.trim-handle:focus-visible { z-index: 3; }
.trim-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); pointer-events: none; }
#import-trimmer { margin-bottom: 24px; }
#import-review .quality-grid { font-size: 13px; }
#import-preview { max-height: 58vh; }
.import-main > [hidden] { display: none; }
@media (max-width: 900px) {
  .library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Narrow screens: title and date, then where · people · footage · moments. */
@media (max-width: 1000px) {
  .flight-head { display: none; }
  .flight-row { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "symbol title date" "symbol sub sub"; column-gap: 10px; row-gap: 1px; min-height: 0; padding: 8px 2px; }
  .flight-row:active { background: var(--hover); }
  .flight-symbol { grid-area: symbol; width: 30px; height: 30px; }
  .flight-title { grid-area: title; }
  .flight-name { font-size: 15px; }
  .flight-date { grid-area: date; font-size: 12px; }
  .flight-sub { grid-area: sub; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
  .flight-sub > * { display: inline; }
  .flight-sub > * + *::before { content: "·"; content: "·" / ""; margin: 0 6px 0 2px; color: var(--quiet); }
  .flight-moments.is-empty { display: none; }
  .flight-unit { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* Phones: the heading, filters and pages give their room to the list. */
@media (max-width: 520px) {
  .library-workspace > .heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "sub sub"; align-items: center; gap: 2px 12px; margin-bottom: 12px; }
  .library-workspace > .heading > div:first-child { display: contents; }
  .library-workspace > .heading h1 { grid-area: title; margin: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .library-workspace > .heading p { grid-area: sub; font-size: 12px; }
  .library-workspace > .heading .actions { grid-area: actions; width: auto; flex-wrap: nowrap; margin: 0; }
  .library-workspace > .heading .actions .button { flex: none; min-height: 34px; padding: 5px 11px; font-size: 13px; white-space: nowrap; }
  .library-workspace > .heading .actions a[href^="#flyers/"] { display: none; }  /* the Profile tab below opens the same page */
  .library-workspace > .flight-library { padding: 12px 14px; }
  .library-workspace .flight-library .library-pages { padding-top: 8px; }
  .flight-library .library-pages button { min-height: 36px; padding-block: 6px; }
}
@media (max-width: 520px) {
  .library-filters { grid-template-columns: 1fr; }
  .trim-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .trim-track { height: 60px; }
}
#import-review { position: relative; }
.person-overlay { position: absolute; pointer-events: none; }
.person-box { position: absolute; pointer-events: auto; background: transparent; border: 2px dashed var(--warning); color: var(--video-label); text-align: left; display: flex; align-items: flex-start; padding: 4px; min-height: 0; border-radius: 4px; text-shadow: 0 1px 2px var(--video-label-shadow); }
.person-box[aria-pressed="true"] { border: 3px solid var(--accent); }
.track-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.track-candidate { min-width: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.track-candidate small { display: block; color: var(--muted); margin-top: 4px; }
.track-candidate > label { display: block; margin: 12px 0 6px; }
.track-candidate .check { display: flex; }
.track-samples { display: flex; gap: 6px; }
.track-samples button { display: block; padding: 0; flex: 1; min-width: 0; overflow: hidden; }
.track-samples canvas { width: 100%; height: auto; display: block; background: var(--input); }
.track-samples span { display: block; padding: 4px; font-size: 13px; }
@media (max-width: 520px) { .track-candidates { grid-template-columns: 1fr; } }

.trim-handle::before { content: ""; position: absolute; inset: 0 -8px; }

.analysis-panel { border-top: 1px solid var(--line); padding: 18px 0; }
.analysis-panel summary { min-height: 42px; font-weight: 600; cursor: pointer; }
.analysis-view canvas { width: 100%; height: 320px; display: block; background: var(--input); touch-action: none; }

.track-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 20px 0 12px; }
.track-tools > div { min-width: 0; }
.track-tools label { display: block; margin-bottom: 8px; }
.track-tools .actions { flex: 1; }
.track-pages { justify-content: space-between; margin-top: 16px; }
.track-pages span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .track-tools > div { width: 100%; }
  .track-tools select { width: 100%; }
  .track-tools .actions button { flex: 1 1 auto; }
  .track-pages { gap: 12px; }
  .track-pages span { order: -1; flex-basis: 100%; }
}