/* ============================================================================
   FIND — the Harbor Tasks design, dark mode.
   Tokens, type, shapes and components are taken from harbor-tasks
   src/index.css (the [data-theme='dark'] values): square corners, 1px rules,
   full-bleed rows, Booton for text, PP Model Mono for labels and buttons,
   Lanterne for display, Peach for the one primary action.
   ========================================================================== */

@font-face { font-family: 'Lanterne'; src: url('/fonts/Lanterne-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Booton'; src: url('/fonts/Booton-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Booton'; src: url('/fonts/Booton-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Booton'; src: url('/fonts/Booton-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'PP Model Mono'; src: url('/fonts/PPModelMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --slate-primary: #0E0E0E;
  --slate-900: #1F1E1E;
  --slate-500: #807F7F;
  --peach-700: #FFB03F;
  --peach-primary: #FFBD60;
  --bone: #FBF8F3;
  --white: #FFFFFF;

  /* Harbor Tasks, dark */
  --canvas: #2A2929;
  --surface: #333231;
  --wash: #232222;
  --ink: var(--bone);
  --ink-muted: #B4B1B1;
  --ink-faint: #8A8888;
  --rule: #454343;
  --action: var(--peach-primary);
  --action-pressed: var(--peach-700);
  --action-ink: #1F1E1E;

  --font-display: 'Lanterne', Georgia, serif;
  --font-body: 'Booton', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'PP Model Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-micro: 11px; --fs-eyebrow: 12px; --fs-label: 13px; --fs-md: 16px; --fs-base: 17px;
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 36px; --sp-xxxl: 56px; --tap: 44px;
  --fast: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --base: 220ms cubic-bezier(0.2, 0, 0.2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none; touch-action: manipulation; overflow-x: clip;
}
* { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Primitives ---------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.display {
  font-family: var(--font-display); font-weight: 300;
  letter-spacing: -0.015em; line-height: 1.04; font-size: clamp(33px, 9.2vw, 46px);
}
.tag {
  display: inline-block; padding: 2px var(--sp-sm) 1px;
  border: 1px solid var(--rule); background: none;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
}

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; padding: 0 var(--sp-lg);
  background: none; border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
  transition: background var(--fast), color var(--fast), opacity var(--fast);
}
.btn:disabled { opacity: 0.4; }
.btn--primary { background: var(--action); border-color: var(--action); color: var(--action-ink); font-weight: 500; }
.btn--primary:active { background: var(--action-pressed); border-color: var(--action-pressed); }
.btn--ghost { border-color: var(--rule); color: var(--ink-muted); }
.btn--sm { width: auto; min-height: 34px; padding: 0 var(--sp-md); font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; }

.iconbtn {
  min-height: var(--tap); display: grid; place-items: center; padding: 0 var(--sp-sm);
  background: none; border: 0;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.iconbtn:active { color: var(--ink); }
.iconbtn--strong { color: var(--ink); font-weight: 500; }
.iconbtn--square { width: 34px; height: 34px; min-height: 0; padding: 0; }
.iconbtn--square svg { width: 17px; height: 17px; display: block; }

/* ---- The search bar ------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-top) + var(--sp-md)) calc(var(--sp-lg) + 34px + var(--sp-md)) var(--sp-md) var(--sp-lg);
  background: var(--canvas); border-bottom: 1px solid var(--rule);
}
/* Home: the logo, the question and the bar, pinned in the top part of the
   screen. The iPhone keyboard covers roughly the bottom 45%, so everything
   here already sits above it: opening the keyboard moves nothing. */
.is-home .topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center;
  padding: calc(var(--safe-top) + min(9vh, 72px)) var(--sp-xl) 0;
  border-bottom: 0;
}
/* Nothing to scroll on the home screen, so iOS has nothing to shift. */
html:has(#app.is-home:not([hidden])), body:has(#app.is-home:not([hidden])) { overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; }
.is-home .search__field { touch-action: manipulation; }
.is-home .search { width: 100%; }

/* Home: the Harbor Capital logo and today's question, above the bar. */
.hero { display: none; }
.is-home .topbar { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-xl); }
.is-home .hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xl); text-align: center; }
.logo { display: block; height: auto; }
.hero__logo { width: min(420px, 82vw); }
.hero__q {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 7.6vw, 40px); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
  animation: rowIn var(--base) both;
}

.search { position: relative; }
.search__field {
  display: block; width: 100%; min-height: var(--tap);
  padding: var(--sp-sm) var(--sp-md); padding-right: var(--tap);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 0;
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--ink);
  caret-color: var(--action);
  transition: border-color var(--fast);
}
.is-home .search__field { min-height: 56px; padding-left: var(--sp-lg); }
.search__field::placeholder { color: var(--ink-faint); }
.search__field:focus { outline: none; border-color: var(--ink); }
.search__field::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--tap);
  background: none; border: 0; font-size: 20px; line-height: 1; color: var(--ink-muted);
}

/* Claude is looking: a Peach line running along the bottom of the field. */
.working { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.working::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%;
  background: var(--action); animation: sweep 1.1s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.gear { position: fixed; z-index: 25; top: calc(var(--safe-top) + var(--sp-md) + 5px); right: var(--sp-lg); }
.is-home .gear { color: var(--ink-faint); }

/* ---- Results: Harbor Tasks rows ------------------------------------------ */
.taskrow {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-lg);
  background: var(--surface);
  border: 0; border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  transition: background var(--fast);
  animation: rowIn var(--base) both;
}
.taskrow:active { background: var(--wash); }
/* Claude's picks carry the Peach edge Harbor Tasks gives "soon". */
.result--best .taskrow { border-left-color: var(--action); }
.taskrow__title { display: block; font-size: var(--fs-base); font-weight: 500; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.taskrow__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-sm);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted);
}
.taskrow__meta .sep { color: var(--ink-faint); }

/* Tapped: Preview and Send, in the Harbor Tasks expansion panel. */
.exp {
  display: none; gap: var(--sp-md);
  padding: 0 var(--sp-lg) var(--sp-lg);
  background: var(--wash); border-bottom: 1px solid var(--rule);
}
.result--best .exp { border-left: 3px solid var(--action); }
.result--open .exp { display: flex; animation: rowIn var(--base) both; }
.result--open .taskrow { background: var(--wash); border-bottom-color: transparent; }
.exp .btn { flex: 1; }
.result--waiting .exp .btn { opacity: 0.4; }
.result--failed .exp .btn { opacity: 0.7; }

/* ---- Image preview --------------------------------------------------------- */
.viewer { position: fixed; inset: 0; z-index: 50; background: var(--slate-primary); display: grid; place-items: center; }
.viewer img { max-width: 100%; max-height: 100%; }

/* ---- Settings: the Harbor Tasks overlay ----------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: var(--canvas); overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: sheetIn var(--base) both;
}
.overlay__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: calc(var(--safe-top) + var(--sp-md)) var(--sp-lg) var(--sp-md);
  background: var(--canvas); border-bottom: 1px solid var(--rule);
}
.overlay__body { flex: 1; padding: var(--sp-xl) var(--sp-lg) calc(var(--safe-bottom) + var(--sp-xxxl)); }
.overlay__body > .display { margin-bottom: var(--sp-lg); }

.settings__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: var(--sp-lg) 0; border-bottom: 1px solid var(--rule);
}
.settings__row--stack { flex-direction: column; align-items: stretch; }
.settings__text { min-width: 0; flex: 1 1 auto; }
.settings__text .eyebrow { margin-bottom: var(--sp-xs); }
.settings__value { font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; }
.settings__actions { display: flex; gap: var(--sp-sm); flex: 0 0 auto; flex-wrap: wrap; }
.settings__head { margin-top: var(--sp-xxl); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--rule); }
.aliases { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-sm); }
.alias { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.alias button { background: none; border: 0; padding: 0 0 0 2px; color: var(--ink-faint); font-size: 14px; line-height: 1; }
.tag--add { color: var(--action); border-color: var(--action); }
.signout { margin-top: var(--sp-xxl); }

/* ---- Sign in: the Harbor Tasks gate --------------------------------------- */
.gate {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xl);
  padding: calc(var(--safe-top) + var(--sp-xxl)) var(--sp-xl) calc(var(--safe-bottom) + var(--sp-xxl));
  background: var(--slate-primary); color: var(--bone);
  max-width: 460px; margin: 0 auto;
}
.gate__logo { width: min(240px, 66vw); }
.gate__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(35px, 9.8vw, 47px); line-height: 1.05; letter-spacing: -0.015em; }
.gate .eyebrow { color: var(--slate-500); }
.btn--google { background: var(--white); border-color: var(--white); color: var(--slate-900); gap: var(--sp-md); font-weight: 500; }
.gbtn__icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.gate__error {
  min-height: 14px; font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--peach-primary);
}
body:has(.gate:not([hidden])) { background: var(--slate-primary); }

@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }