/* ================================================================
   app.css - website shell around the AW Scout extension's card system
   Colours, type and components come from /css/scout/cards.css and
   common.css (synced from the extension, never edited here). This file
   only adds page layout, docks the floating Scout Filter panel, and
   adapts extension components for touch, keyboard and small screens.
   Every colour is a --scout-* token so light/dark follow the extension.
   ================================================================ */

:root {
  --app-nav-h: 56px;
  --app-filters-w: 272px;
  --app-gutter: 24px;
  --app-max-w: 1680px;
  --app-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Base and browser surfaces ------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--scout-bg);
  color: var(--scout-text-1);
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in oklch, var(--scout-accent) 35%, transparent); color: var(--scout-text-1); }
:focus-visible { outline: 2px solid var(--scout-accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--scout-border-strong) transparent; }
a { color: inherit; }
input, button, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ----- Nav: the extension's homepage tab bar as site navigation ----- */

.app-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--app-nav-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--app-gutter);
  background: color-mix(in oklch, var(--scout-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--scout-border);
}
.app-nav__logo {
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--scout-text-1); text-decoration: none; white-space: nowrap;
}
.app-nav__logo span { color: var(--scout-accent); }
.app-nav__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.app-nav__tabs::-webkit-scrollbar { display: none; }
.app-nav .scout-home-tabs__btn { text-decoration: none; white-space: nowrap; padding: 6px 12px; font-size: 13px; }
.app-nav__login-btn {
  margin-left: auto; flex-shrink: 0;
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  background: var(--scout-accent); color: oklch(100% 0 0); border: 1px solid transparent;
  transition: transform 0.12s var(--app-ease), filter 0.12s;
}
.app-nav__login-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
button.app-nav__login-btn { background: transparent; color: var(--scout-text-2); border-color: var(--scout-border); }
button.app-nav__login-btn:hover { color: var(--scout-text-1); border-color: var(--scout-border-strong); filter: none; }

/* ----- Search layout -------------------------------------------------- */

.app-search {
  display: grid;
  grid-template-columns: var(--app-filters-w) minmax(0, 1fr);
  gap: var(--app-gutter);
  align-items: start;
  max-width: var(--app-max-w);
  margin: 0 auto;
  padding: var(--app-gutter);
}
.app-search__main { min-width: 0; }

/* The extension reserves a fixed 2-column width for AW's own table layout;
   next to a sidebar the grid must be fluid instead */
.app-search .scout-results,
.app-page .scout-results {
  min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr));
  gap: 16px;
  padding: 0;
  transition: opacity 0.2s var(--app-ease);
}
.app-results--loading { opacity: 0.55; }

/* ----- Scout Filter panel, docked ------------------------------------ */

.app-filters.scout-filter-panel {
  position: sticky; top: calc(var(--app-nav-h) + var(--app-gutter));
  bottom: auto; right: auto; z-index: 1;
  width: auto;
  max-height: calc(100vh - var(--app-nav-h) - var(--app-gutter) * 2);
  font-size: 12px;
}
.app-filters .scout-filter-panel__body { max-height: none; overflow-y: auto; gap: 14px; padding: 14px 12px; flex: 1; }
.app-filters .scout-filter-panel__footer { padding: 9px 12px; }

/* Panel controls are real <button>s here (spans in the extension), so restate what
   common.css's `.scout-filter-panel button` reset strips from them */
.app-filters button.scout-filter-panel__header {
  width: 100%; background: var(--scout-surface-2); border: 0; border-bottom: 1px solid var(--scout-border);
  cursor: pointer; text-align: left;
}
.app-filters.scout-filter-panel--collapsed button.scout-filter-panel__header { border-bottom: 0; }
.app-filters__chevron { color: var(--scout-text-3); font-size: 12px; transition: transform 0.2s var(--app-ease); }
.scout-filter-panel--collapsed .app-filters__chevron { transform: rotate(-90deg); }

.app-filters button.scout-filter__segment,
.app-filters button.scout-filter__sort-btn,
.app-filters button.scout-filter__chip {
  background: var(--scout-bg);
  border: 1px solid var(--scout-border);
  color: var(--scout-text-2);
  font-size: 11px;
  min-height: 28px;
}
.app-filters button.scout-filter__segment { padding: 5px 4px; border-radius: 5px; }
.app-filters button.scout-filter__sort-btn { padding: 5px 9px; border-radius: 5px; }
.app-filters button.scout-filter__chip { padding: 4px 10px; border-radius: 14px; }
.app-filters button.scout-filter__segment:hover,
.app-filters button.scout-filter__sort-btn:hover,
.app-filters button.scout-filter__chip:hover { border-color: var(--scout-border-strong); color: var(--scout-text-1); }
.app-filters button.scout-filter__segment--active,
.app-filters button.scout-filter__sort-btn--active,
.app-filters button.scout-filter__chip--active {
  background: color-mix(in oklch, var(--scout-accent) 12%, transparent);
  border-color: color-mix(in oklch, var(--scout-accent) 50%, transparent);
  color: var(--scout-accent);
}
.app-filters .scout-filter__chips { gap: 5px; }
.app-filters .scout-filter__label { font-size: 11px; margin-bottom: 6px; display: block; color: var(--scout-text-2); }
.app-filters .scout-filter-panel__title { font-size: 11px; }
.app-filters .scout-filter__row { display: flex; align-items: center; gap: 6px; }
.app-filters .scout-filter__row + .scout-filter__segments { margin-top: 6px; }
.app-filters .scout-filter__input { min-height: 30px; font-size: 12px; padding: 5px 8px; }
.app-filters .scout-filter__input--full { flex: 1; width: auto; min-width: 0; }
.app-filters .scout-filter__input--age { flex: 0 0 56px; }
.app-filters .scout-filter__input::placeholder { color: var(--scout-text-2); opacity: 1; }
.app-filters .scout-filter__go-btn { min-height: 30px; padding: 4px 11px; font-size: 11px; }
.app-filters button.scout-filter__clear-link { font-size: 12px; padding: 4px 0; color: var(--scout-text-2); }
.app-filters button.scout-filter__clear-link:hover { color: var(--scout-text-1); }
.app-filters__count { font-size: 12px; color: var(--scout-text-2); }
.app-filters__save { padding-top: 12px; border-top: 1px solid var(--scout-border); }
.app-filters__save-status { font-size: 11px; color: var(--scout-text-2); margin-top: 6px; min-height: 1em; }

/* ----- Extension card, adapted for the web --------------------------- */

/* In a two-up grid the extension's 360px photo column starves the info column;
   a narrower portrait photo keeps rate, location and last-online on one line */
.scout-results .scout-card { --scout-photo-col-w: 260px; }
.scout-results .scout-card__photo { height: 340px; }
/* At grid widths the extension's single-line meta rows can run past the card edge */
.scout-card__meta-row { flex-wrap: wrap; row-gap: 4px; }

.scout-card { scroll-margin-top: calc(var(--app-nav-h) + 16px); }
.scout-card:hover { box-shadow: var(--scout-card-shadow-hv); }
.scout-card a.scout-card__name:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.scout-card__actions .scout-card__hotlist-btn { flex: 0 0 auto; padding-inline: 14px; }
.scout-card__hotlist-btn--added { color: var(--scout-negative) !important; }

/* The extension card is built for desktop AW pages; stack it on narrow screens */
@media (max-width: 640px) {
  .scout-card__top { flex-direction: column; }
  .scout-card__photo-col { width: 100%; }
  .scout-card__photo { height: min(118vw, 460px); }
}

/* ----- Messages, notices, popover ------------------------------------- */

.app-loading {
  grid-column: 1 / -1;
  padding: 64px 16px; text-align: center;
  color: var(--scout-text-2); font-size: 14px;
}
.app-notice {
  margin-bottom: 14px; padding: 10px 14px; border-radius: var(--scout-card-radius);
  background: color-mix(in oklch, var(--scout-amber) 10%, var(--scout-surface));
  border: 1px solid color-mix(in oklch, var(--scout-amber) 35%, var(--scout-border));
  color: var(--scout-text-1); font-size: 13px;
}
.app-popover {
  position: absolute; z-index: 60; min-width: 200px; padding: 6px;
  background: var(--scout-surface); border: 1px solid var(--scout-border-strong);
  border-radius: var(--scout-card-radius); box-shadow: var(--scout-card-shadow-hv);
  animation: app-pop 0.16s var(--app-ease);
}
.app-popover__title {
  padding: 6px 8px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--scout-text-3);
}
.app-popover__item {
  display: block; width: 100%; padding: 8px; border: 0; border-radius: 5px;
  background: none; text-align: left; font-size: 13px; color: var(--scout-text-1); cursor: pointer;
}
.app-popover__item:hover, .app-popover__item:focus-visible { background: var(--scout-surface-2); outline: none; }
@keyframes app-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ----- Shared page shell (profile, hotlists, saved searches) --------- */

.app-page { max-width: 1240px; margin: 0 auto; padding: var(--app-gutter); }
.app-page__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-page__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.app-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: 13px; color: var(--scout-text-2); text-decoration: none;
}
.app-back:hover { color: var(--scout-text-1); }

.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 14px; border-radius: 6px;
  background: var(--scout-surface); border: 1px solid var(--scout-border);
  color: var(--scout-text-1); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s var(--app-ease);
}
.app-btn:hover { border-color: var(--scout-border-strong); background: var(--scout-surface-2); transform: translateY(-1px); }
.app-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.app-btn--primary { background: var(--scout-accent); border-color: transparent; color: oklch(100% 0 0); }
.app-btn--primary:hover { background: var(--scout-accent); filter: brightness(1.1); }

/* Section panel: card surface with the extension's small uppercase labels */
.app-section {
  background: var(--scout-surface); border: 1px solid var(--scout-border);
  border-radius: var(--scout-card-radius); box-shadow: var(--scout-card-shadow);
  padding: 16px;
}
.app-section__title {
  margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--scout-text-2);
}

.app-empty { padding: 56px 16px; text-align: center; }
.app-empty__title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.app-empty__desc { font-size: 13px; color: var(--scout-text-2); max-width: 46ch; margin: 0 auto; }
.app-empty__desc a { color: var(--scout-accent); }
.app-login-prompt {
  padding: 48px 16px; text-align: center; display: grid; justify-items: center; gap: 14px;
  color: var(--scout-text-2);
}

/* ----- Profile page ---------------------------------------------------- */

.app-profile { display: grid; gap: 16px; }
.app-profile .scout-card { --scout-photo-col-w: 420px; }
.app-profile .scout-card__photo { height: 440px; }
.app-profile .scout-card:hover { transform: none; }
.app-profile__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.app-profile__side, .app-profile__main { display: grid; gap: 16px; }

.app-rates { width: 100%; border-collapse: collapse; font-size: 13px; }
.app-rates th, .app-rates td { padding: 7px 0; border-bottom: 1px solid var(--scout-border); text-align: left; font-weight: 400; }
.app-rates tr:last-child th, .app-rates tr:last-child td { border-bottom: 0; }
.app-rates th { color: var(--scout-text-2); }
.app-rates td { text-align: right; color: var(--scout-rate); font-weight: 600; }
.app-rates-group + .app-rates-group { margin-top: 14px; }
.app-rates-group__label { font-size: 11px; font-weight: 600; color: var(--scout-text-1); margin-bottom: 2px; }

.app-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.app-tag {
  padding: 3px 9px; border-radius: 12px; font-size: 12px;
  background: var(--scout-svc-yes-bg); border: 1px solid var(--scout-svc-yes-bd); color: var(--scout-text-1);
}

.app-profile-bio { font-size: 14px; line-height: 1.6; color: var(--scout-text-1); white-space: pre-line; max-width: 72ch; }
.app-disclaimer { font-size: 12px; color: var(--scout-text-2); margin: -4px 0 12px; }

.app-fr-list { display: grid; gap: 8px; }
.app-fr-card {
  padding: 12px; border-radius: 6px; background: var(--scout-bg); border: 1px solid var(--scout-border);
  display: grid; gap: 8px;
}
.app-fr-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--scout-text-2); }
.app-fr-card__meta strong { color: var(--scout-text-1); font-weight: 600; }
.app-fr-card__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.app-fr-card__chip { padding: 2px 8px; border-radius: 10px; font-size: 11px; border: 1px solid var(--scout-border); color: var(--scout-text-2); }
.app-fr-card__chip--yes { color: var(--scout-positive); border-color: color-mix(in oklch, var(--scout-positive) 40%, transparent); }
.app-fr-card__chip--no { color: var(--scout-negative); border-color: color-mix(in oklch, var(--scout-negative) 40%, transparent); }
.app-fr-card__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--scout-text-2); }
.app-fr-card__score { font-weight: 700; color: var(--scout-text-1); }

/* ----- Hotlists and saved searches ------------------------------------ */

.app-list { display: grid; gap: 12px; }
.app-list-card {
  background: var(--scout-surface); border: 1px solid var(--scout-border);
  border-radius: var(--scout-card-radius); box-shadow: var(--scout-card-shadow); padding: 14px 16px;
}
.app-list-card__header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.app-list-card__name { font-size: 15px; font-weight: 600; outline-offset: 4px; }
.app-list-card__name[contenteditable="true"]:hover { text-decoration: underline dotted var(--scout-text-3); text-underline-offset: 4px; }
.app-list-card__meta { font-size: 12px; color: var(--scout-text-2); }
.app-list-card__summary { margin-top: 6px; font-size: 12px; color: var(--scout-text-2); }
.app-list-card__actions { margin-left: auto; display: flex; gap: 8px; }
.app-list-card__members { margin-top: 16px; }
.app-badge-new {
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
  background: color-mix(in oklch, var(--scout-positive) 15%, transparent); color: var(--scout-positive);
}

/* ----- Responsive ------------------------------------------------------- */

@media (max-width: 899px) {
  :root { --app-gutter: 16px; }
  .app-search { grid-template-columns: minmax(0, 1fr); }
  .app-filters.scout-filter-panel { position: relative; top: 0; max-height: none; }
  .app-profile__grid { grid-template-columns: minmax(0, 1fr); }
  .app-profile .scout-card { --scout-photo-col-w: 300px; }
  .app-profile .scout-card__photo { height: 340px; }
}
@media (max-width: 560px) {
  /* Logo and login on the first row, section tabs full width beneath */
  .app-nav { height: auto; flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  .app-nav__tabs { order: 3; width: 100%; }
  .app-nav .scout-home-tabs__btn { flex: 1; text-align: center; padding: 7px 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}