/* CLAP Planner application layout rules.
   Design tokens live in design-system/cla-design-tokens.json; this file owns
   product-specific responsive composition and must not redefine those tokens. */

.v8-game-detail-dialog::backdrop {
  background: rgba(18, 23, 32, .26);
}

/* Game workspace responsive contract: desktop keeps the useful sheet + library
   split; phone becomes one scroller with the film handoff and add-library in
   reading order. All controls keep their existing callbacks and data. */
@media (max-width: 680px) {
  .v8-game-sheet,
  .v8-games-surface {
    overflow: hidden;
  }

  .v8-game-head,
  .v8-games-head {
    height: auto !important;
    min-height: 56px;
    padding: 8px 12px !important;
    flex-wrap: wrap;
    align-content: center;
  }

  .v8-game-head > div[style*="flex: 1"],
  .v8-games-head > div[style*="flex: 1"] {
    display: none;
  }

  .v8-game-head button,
  .v8-game-head a,
  .v8-games-head button,
  .v8-games-head a {
    min-height: var(--kit-touch-target) !important;
  }

  .v8-game-body {
    display: block !important;
    min-height: 0;
    overflow-y: auto;
  }

  .v8-game-main {
    overflow: visible !important;
    padding: 14px 12px 20px !important;
  }

  .v8-game-library {
    width: auto !important;
    overflow: visible !important;
    padding: 16px 12px 40px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--kit-hairline);
  }

  .v8-game-section {
    padding: 13px 12px !important;
  }

  .v8-game-section-order button,
  .v8-game-section-remove,
  .v8-game-library-add {
    min-width: var(--kit-touch-target) !important;
    min-height: var(--kit-touch-target) !important;
    padding: 0 !important;
  }

  .v8-game-composer-grid {
    grid-template-columns: 1fr !important;
  }

  .v8-game-composer-grid input {
    min-height: var(--kit-touch-target) !important;
    width: 100% !important;
  }

  .v8-game-composer-actions {
    flex-wrap: wrap;
    align-items: stretch !important;
  }

  .v8-game-composer-actions input {
    flex: 1 0 100% !important;
    min-height: var(--kit-touch-target) !important;
  }

  .v8-game-composer-actions button,
  .roster-target,
  [data-screen-label="Roster panel"] select,
  [data-screen-label="Roster panel"] input,
  [data-screen-label="Roster panel"] button {
    min-height: var(--kit-touch-target) !important;
  }

  .roster-target {
    min-width: var(--kit-touch-target) !important;
  }
}

/* Scouts Phase 1.1 — one calm opponent workspace. The rail finds an opponent;
   the dossier progressively discloses Overview, Roster, Their terms, and Film.
   All values derive from the Tool-Light kit; no Scout-only color system. */
.sct-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sct-panel {
  flex-shrink: 0;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--kit-hairline);
  background: var(--kit-surface);
  color: var(--kit-text);
  font-family: var(--kit-font-sans);
}

.sct-panel-head {
  padding: var(--kit-space-4);
  border-bottom: 1px solid var(--kit-hairline);
}

.sct-panel-title-row,
.sct-panel-actions,
.sct-card-title,
.sct-save-wrap,
.sct-section-title {
  display: flex;
  align-items: center;
}

.sct-panel-title-row,
.sct-card-title,
.sct-section-title {
  justify-content: space-between;
}

.sct-panel-actions { gap: var(--kit-space-1); }
.sct-panel-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.sct-panel-kicker { margin-top: 2px; color: var(--kit-faint); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.sct-panel-subtitle { max-width: 290px; margin-top: 10px; color: var(--kit-sub); font-size: 11.5px; line-height: 1.45; }
.sct-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--kit-space-4) var(--kit-space-5); }

.sct-search { display: block; position: relative; margin: 12px 0 4px; }
.sct-search::before { content: "⌕"; position: absolute; left: 10px; top: 7px; color: var(--kit-faint); font-size: 15px; pointer-events: none; }
.sct-search input,
.sct-input,
.sct-notes {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--kit-hairline-soft);
  border-radius: var(--kit-radius-compact);
  background: var(--kit-surface);
  color: var(--kit-text);
  font: 12.5px var(--kit-font-sans);
}
.sct-search input { height: 34px; padding: 0 10px 0 32px; }
.sct-input { height: 36px; padding: 0 10px; }
.sct-notes { min-height: 148px; padding: 12px 13px; resize: vertical; line-height: 1.55; }
.sct-search input:focus,
.sct-input:focus,
.sct-notes:focus { border-color: var(--kit-focus); outline: var(--kit-focus-width) solid color-mix(in srgb, var(--kit-focus) 28%, transparent); outline-offset: 1px; }

.sct-new-form { display: grid; gap: 7px; margin: 14px 0 8px; padding: 12px; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-control); background: var(--kit-surface-2); }
.sct-new-form > label,
.sct-term-add > label,
.sct-field-grid label > span,
.sct-overview-intro label > span { color: var(--kit-sub); font-size: 10.5px; font-weight: 650; }
.sct-new-form > div { display: flex; justify-content: flex-end; gap: var(--kit-space-1); }

.sct-group-head { display: flex; align-items: center; gap: 7px; margin: 20px 0 8px; color: var(--kit-faint); font: 700 10px var(--kit-font-mono); letter-spacing: .11em; text-transform: uppercase; }
.sct-group-head small { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--kit-surface-2); color: var(--kit-sub); font-size: 9px; letter-spacing: 0; }
.sct-card-list { display: grid; gap: 7px; }
.sct-card-list-archived { margin-top: 8px; }
.sct-card { display: block; width: 100%; padding: 12px 13px; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-control); background: var(--kit-surface); color: var(--kit-text); font-family: var(--kit-font-sans); text-align: left; cursor: pointer; transition: background var(--kit-motion-fast), border-color var(--kit-motion-fast); }
.sct-card:hover { border-color: var(--kit-hairline-soft); background: var(--kit-hover-step); }
.sct-card[data-archived="true"] { opacity: .62; }
.sct-card-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.sct-result { flex-shrink: 0; color: var(--sct-accent); font: 650 11px var(--kit-font-mono); }
.sct-card-date { flex-shrink: 0; color: var(--kit-faint); font: 10.5px var(--kit-font-mono); }
.sct-card-competition { margin-top: 3px; color: var(--kit-sub); font-size: 11.5px; }
.sct-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; color: var(--kit-faint); font-size: 10.5px; }
.sct-archive-toggle { min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--kit-sub); font: 600 11.5px var(--kit-font-sans); cursor: pointer; }
.sct-state { margin-top: var(--kit-space-4); color: var(--kit-sub); font-size: 12px; }
.sct-error { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--kit-red) 25%, var(--kit-hairline)); border-radius: var(--kit-radius-compact); color: var(--kit-red); font-size: 11.5px; }
.sct-empty { margin: 20px 0 0; padding: 20px 16px; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-panel); text-align: left; }
.sct-empty strong { font-size: 13px; }
.sct-empty p { margin: 6px 0 14px; color: var(--kit-sub); font-size: 11.5px; line-height: 1.5; }

.sct-dialog-backdrop { position: fixed; z-index: 9000; inset: 0; background: rgba(18, 23, 32, .28); font-family: var(--kit-font-sans); }
.sct-dossier { position: absolute; inset: 0 0 0 auto; width: min(96vw, 880px); display: flex; flex-direction: column; overflow: hidden; background: var(--kit-bg); color: var(--kit-text); box-shadow: -18px 0 54px rgba(18, 23, 32, .18); }
.sct-dossier-head { min-height: 64px; flex-shrink: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--kit-hairline); background: var(--kit-surface); }
.sct-accent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sct-accent); }
.sct-dossier-identity { min-width: 0; display: grid; gap: 1px; }
.sct-dossier-identity > span { color: var(--kit-faint); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sct-dossier-identity input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--kit-text); font: 650 18px var(--kit-font-display); letter-spacing: -.025em; }
.sct-save-wrap { gap: 6px; color: var(--kit-faint); font-size: 11px; white-space: nowrap; }
.sct-save-wrap [data-state="saved"] { color: var(--kit-green); }
.sct-save-wrap [data-state="failed"] { color: var(--kit-red); font-weight: 650; }

.sct-dossier-tabs { min-height: 48px; flex-shrink: 0; display: flex; align-items: stretch; gap: 4px; padding: 0 18px; overflow-x: auto; border-bottom: 1px solid var(--kit-hairline); background: var(--kit-surface); }
.sct-dossier-tabs button { position: relative; min-width: max-content; padding: 0 12px; border: 0; background: transparent; color: var(--kit-sub); font: 600 12px var(--kit-font-sans); cursor: pointer; }
.sct-dossier-tabs button::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.sct-dossier-tabs button[aria-selected="true"] { color: var(--kit-text); }
.sct-dossier-tabs button[aria-selected="true"]::after { background: var(--sct-accent); }
.sct-dossier-tabs small { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; border-radius: 999px; background: var(--kit-surface-2); color: var(--kit-faint); font-size: 9px; }

.sct-dossier-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sct-dossier-content { width: min(100% - 40px, 790px); margin: 0 auto; padding: 28px 0 48px; }
.sct-overview-intro { display: grid; grid-template-columns: minmax(220px, .72fr) 1.28fr; gap: 32px; align-items: end; }
.sct-overview-intro label { display: grid; gap: 6px; }
.sct-overview-intro p { margin: 0 0 3px; color: var(--kit-sub); font-size: 12.5px; line-height: 1.55; }
.sct-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; overflow: hidden; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-panel); background: var(--kit-hairline); gap: 1px; }
.sct-summary-grid button { min-height: 78px; display: grid; align-content: center; gap: 8px; padding: 13px 15px; border: 0; background: var(--kit-surface); color: var(--kit-text); text-align: left; cursor: pointer; }
.sct-summary-grid button:hover { background: var(--kit-hover-step); }
.sct-summary-grid span { color: var(--kit-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sct-summary-grid strong { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 650; white-space: nowrap; }

.sct-work-section { margin-top: 28px; padding: 24px; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-panel); background: var(--kit-surface); }
.sct-section-first { margin-top: 0; }
.sct-section-title { gap: 20px; margin-bottom: 18px; align-items: flex-start; }
.sct-section-title > div { min-width: 0; }
.sct-section-title span,
.sct-section-label { color: var(--kit-faint); font: 700 10px var(--kit-font-mono); letter-spacing: .11em; text-transform: uppercase; }
.sct-section-title h2 { margin: 5px 0 0; font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.sct-section-title p,
.sct-archive-section > p { max-width: 590px; margin: 7px 0 0; color: var(--kit-sub); font-size: 12px; line-height: 1.5; }
.sct-section-title > small { flex-shrink: 0; padding-top: 18px; color: var(--kit-faint); font-size: 10.5px; }
.sct-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sct-field-grid label { display: grid; gap: 6px; }
.sct-archive-section > p { margin-bottom: 14px; }

.sct-roster-table { display: grid; gap: 5px; }
.sct-roster-labels,
.sct-roster-row { display: grid; grid-template-columns: 54px minmax(110px, .8fr) minmax(150px, 1fr) 64px minmax(120px, .8fr) 32px; gap: 6px; align-items: center; }
.sct-roster-labels { padding: 0 2px 2px; color: var(--kit-faint); font-size: 9.5px; font-weight: 650; }
.sct-roster-tag { min-width: 0; overflow: hidden; color: var(--kit-faint); font: 10px var(--kit-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.sct-roster-remove { color: var(--kit-faint); }

.sct-term-add { display: grid; max-width: 440px; gap: 7px; }
.sct-term-add > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sct-term-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sct-term-list > span { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 3px 0 12px; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-pill); background: var(--kit-surface); }
.sct-term-list strong { font-size: 11.5px; font-weight: 650; }
.sct-empty-inline { margin-top: 6px; background: var(--kit-surface-2); }

.sct-film-group { margin-top: 26px; }
.sct-film-group .sct-section-label { margin-bottom: 9px; }
.sct-clip-list { display: grid; gap: 8px; }
.sct-clip-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--kit-hairline); border-radius: var(--kit-radius-control); background: var(--kit-surface); }
.sct-clip-card > div { display: flex; justify-content: space-between; gap: 12px; }
.sct-clip-card strong { font-size: 12.5px; }
.sct-clip-card span { color: var(--kit-faint); font: 10.5px var(--kit-font-mono); }

@media (max-width: 680px) {
  .sct-panel { width: 100% !important; }
  .sct-panel .cla-button,
  .sct-panel .cla-icon-button,
  .sct-dossier .cla-button,
  .sct-dossier .cla-icon-button,
  .sct-dossier-tabs button,
  .sct-summary-grid button { min-height: var(--kit-touch-target) !important; }
  .sct-panel .cla-icon-button,
  .sct-dossier .cla-icon-button { min-width: var(--kit-touch-target) !important; }
  .sct-panel-title-row { align-items: flex-start; }
  .sct-card { min-height: 72px; }
  .sct-archive-toggle { min-height: var(--kit-touch-target); }
  .sct-dossier { width: 100vw; }
  .sct-dossier-head { min-height: 64px; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; padding: 8px 12px; }
  .sct-save-wrap { grid-column: 2 / 4; min-height: 24px; }
  .sct-dossier-head > .cla-button:last-child { grid-column: 3; grid-row: 1; }
  .sct-dossier-tabs { min-height: 52px; padding: 0 8px; }
  .sct-dossier-tabs button { padding: 0 10px; }
  .sct-dossier-content { width: calc(100% - 28px); padding: 20px 0 40px; }
  .sct-overview-intro,
  .sct-field-grid { grid-template-columns: 1fr; gap: 14px; }
  .sct-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .sct-summary-grid button { min-height: 72px; }
  .sct-work-section { margin-top: 18px; padding: 18px 14px; }
  .sct-section-first { margin-top: 0; }
  .sct-section-title { display: grid; gap: 12px; }
  .sct-section-title > .cla-button { justify-self: start; }
  .sct-section-title > small { padding: 0; }
  .sct-roster-labels { display: none; }
  .sct-roster-row { grid-template-columns: 54px minmax(0, 1fr) 58px 44px; grid-template-rows: 44px 44px auto; gap: 7px; padding: 12px 0; border-top: 1px solid var(--kit-hairline); }
  .sct-roster-row:first-of-type { border-top: 0; }
  .sct-roster-number { grid-column: 1; grid-row: 1; }
  .sct-roster-first { grid-column: 2; grid-row: 1; }
  .sct-roster-last { grid-column: 1 / 4; grid-row: 2; }
  .sct-roster-pos { grid-column: 3; grid-row: 1; }
  .sct-roster-tag { grid-column: 1 / 4; grid-row: 3; min-height: 20px; }
  .sct-roster-remove { grid-column: 4; grid-row: 1 / 3; align-self: center; }
  .sct-roster-row .sct-input { height: var(--kit-touch-target); }
  .sct-term-add > div { grid-template-columns: 1fr; }
  .sct-term-list > span { min-height: var(--kit-touch-target); }
  .sct-empty { padding: 18px 14px; }
}

/* FU96 (2026-08-05): touch-target extender for compact library/row action
   buttons. The visible control may stay small for desktop density; on coarse
   pointers the *hit area* grows to the 44px floor via an invisible overlay
   (CLA-DESIGN-STANDARD §6: targets reach --kit-touch-target even when the
   visible control is smaller). Apply class="kit-touch" to any small action. */
@media (pointer: coarse) {
  .kit-touch { position: relative; }
  .kit-touch::after {
    content: '';
    position: absolute;
    inset: -9px;
  }
}