/* Total Recall — fixed app shell, bright pastel theme.
   Per the iOS recipe: no dvh anywhere, no aspect-ratio on flex items,
   plain vh for clamps, safe-area padding on the bottom edge only. */

:root{
  --bg:#F7F4FF;          /* airy lilac wash */
  --bg-2:#FFF6F0;        /* warm peach, used for the gradient's far end */
  --surface:#FFFFFF;
  --line:#EDE7F8;
  --text:#2E2A45;
  --muted:#847EA0;

  --accent:#6F5AE0;      /* periwinkle — readable on white */
  --accent-ink:#FFFFFF;
  --accent-soft:#EDE8FF;

  --mint:#D6F5E6;
  --peach:#FFE2D1;
  --sky:#DCEBFF;

  --radius:22px;
  --radius-sm:16px;
  --shadow:0 6px 20px rgba(97, 84, 160, .09);
  --shadow-lift:0 10px 30px rgba(97, 84, 160, .14);
}

*{ box-sizing:border-box; }

html,body{
  height:100%; margin:0;
  overflow:hidden;
  overscroll-behavior:none;        /* no rubber-band / pull-to-refresh */
  -webkit-text-size-adjust:100%;   /* iOS must not inflate text on rotate */
  touch-action:pan-y;              /* vertical scroll only — no pinch, no pan-x */
}
body{
  background:var(--bg);
  color:var(--text);
  font:18px/1.55 ui-rounded, "SF Pro Rounded", -apple-system, "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Nothing is text-selectable by default (long-press drag reads as a broken
   gesture in an installed app); fields opt back in below. */
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input,textarea,.card-raw,.card-fields dd{ -webkit-user-select:text; user-select:text; }

/* Taps resolve immediately and never double-tap-zoom. */
button,.mode,.card,.chip,a{ touch-action:manipulation; }

#app{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(168deg, var(--bg) 0%, #FBF6FF 46%, var(--bg-2) 100%);
}

/* ---------------------------------------------------------------- screens */

/* Auth and the signed-in app are siblings inside the fixed shell; each fills it. */
.screen{
  flex:1 1 0%;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.screen[hidden]{ display:none; }

#auth-screen{
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  padding:0 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.auth-center{ max-width:400px; gap:13px; }

.tagline{
  margin:-6px 0 10px;
  text-align:center;
  color:var(--muted);
  font-size:16.5px;
}

.field-sm{ font-size:17px; padding:15px 18px; }
.block{ width:100%; justify-content:center; }

.oauth{ display:flex; flex-direction:column; gap:10px; }
.divider{
  margin:4px 0; text-align:center; color:var(--muted);
  font-size:14px; text-transform:lowercase;
}

.switch{
  margin:2px 0 0; text-align:center;
  color:var(--muted); font-size:15.5px;
}
.linkish{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--accent); font:600 15.5px/1 inherit; padding:4px 2px;
  text-decoration:underline; text-underline-offset:3px;
}

.auth-message{
  margin:2px 0 0; text-align:center;
  font-size:15px; font-weight:600; line-height:1.45;
  color:#C2456B;                       /* rose — legible on the pastel wash */
  background:#FFE4EC;
  border-radius:var(--radius-sm);
  padding:12px 16px;
}
.auth-message.ok{ color:#2E7D5B; background:var(--mint); }
.auth-message[hidden]{ display:none; }

.account-email{
  margin:0 0 4px;
  color:var(--muted); font-size:16px;
  word-break:break-all;
}

/* ---------------------------------------------------------------- top bar */

.bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;   /* account button only; the mode toggle moved into the panes */
  gap:12px;
  padding:12px 16px;
}

/* Toggle sits inside each pane, directly above its field, so the active mode is
   visible at the point of typing. Centred and self-width rather than filling. */
.modes{
  display:flex; gap:3px;
  align-self:center;
  background:var(--accent-soft);
  border-radius:999px; padding:4px;
}
.mode{
  appearance:none; border:0; background:transparent; color:var(--muted);
  font:600 15.5px/1 inherit; padding:10px 20px; border-radius:999px; cursor:pointer;
  transition:background .18s, color .18s;
}
.mode.is-active{
  background:var(--surface);
  color:var(--accent);
  box-shadow:0 2px 8px rgba(97, 84, 160, .14);
}

.icon-btn{
  appearance:none; border:0; cursor:pointer; display:flex;
  background:rgba(255,255,255,.75); color:var(--muted);
  padding:11px; border-radius:999px; box-shadow:var(--shadow);
}
.icon-btn:active{ color:var(--accent); }

/* ---------------------------------------------------------------- panes */

#main{ flex:1 1 0%; position:relative; overflow:hidden; }

.pane{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;               /* content is pinned to the viewport width */
  overscroll-behavior-y:contain;   /* scroll stops here, never chains to the page */
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:0 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.pane.is-active{ display:flex; }

/* Centred by default; once results exist the recall pane releases the centring
   so the field settles to the top and cards fill the space below. */
.center{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  max-width:580px;
  width:100%;
  margin:0 auto;
  padding:20px 0;
}
.pane.has-results .center{ flex:0 0 auto; justify-content:flex-start; }

.wordmark{
  margin:0 0 4px;
  text-align:center;
  font:700 clamp(30px, 5.6vh, 42px)/1.08 inherit;
  letter-spacing:-.015em;
  color:var(--accent);
}

/* ---------------------------------------------------------------- field */

.field-wrap{ display:flex; flex-direction:column; gap:12px; }

/* One writing surface: the field, its link rows and its buttons share a single
   card rather than floating as separate elements. */
.compose{
  gap:0;
  background:var(--surface);
  border:2px solid transparent;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:6px 6px 8px;
  transition:border-color .18s, box-shadow .18s;
}
.compose:focus-within{ border-color:var(--accent); box-shadow:var(--shadow-lift); }

/* The field gives up its own chrome to the container. */
.compose .field{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:14px 15px 8px;
}
.compose .field:focus{ box-shadow:none; }

.compose .link-rows{ padding:6px 9px 4px; }
.compose .link-row select,
.compose .link-row input{ box-shadow:none; background:var(--bg); }

.compose .actions{ padding:4px 9px 2px; }

/* Add link recedes into the surface — no pill, no shadow. */
.compose .ghost{
  background:transparent;
  box-shadow:none;
  padding:9px 10px;
  border-radius:12px;
}
.compose .ghost:active{ background:var(--accent-soft); }

.field{
  width:100%;
  resize:none;
  background:var(--surface);
  color:var(--text);
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:18px 20px;
  font:inherit;
  font-size:19px;
  line-height:1.5;
  box-shadow:var(--shadow);
  transition:border-color .18s, box-shadow .18s;
}
.field::placeholder{ color:#A9A3C2; }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:var(--shadow-lift); }

.actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }

.primary{
  appearance:none; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  font:700 17px/1 inherit; padding:15px 30px; border-radius:999px;
  box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .18s;
}
.primary:active{ transform:translateY(1px); box-shadow:var(--shadow-lift); }
.primary:disabled{ opacity:.45; cursor:default; transform:none; }

/* Icon-only submit buttons: circular, with the label carried by aria-label. */
.icon-only{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; padding:0; border-radius:999px;
  flex:0 0 auto;
}
.icon-only .btn-icon{ display:block; }

/* In-flight state reads as subdued text in the compose surface; the button
   just dims. */
.compose-status{
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  margin-right:auto;
  padding-left:2px;
}
.compose-status[hidden]{ display:none; }

/* Add link yields the left slot while a request is running. */
.compose .actions:has(.compose-status:not([hidden])) .ghost{ display:none; }

.ghost{
  appearance:none; cursor:pointer;
  background:var(--surface); color:var(--muted);
  border:0;
  font:600 15px/1 inherit; padding:13px 18px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow);
}
.ghost:active{ color:var(--accent); }
.actions .ghost{ margin-right:auto; }

.hint{ margin:0; text-align:center; color:var(--muted); font-size:14.5px; }

/* Intent confirm: shown when a capture submission reads like a question. */
.confirm{
  background:var(--sky);
  border-radius:var(--radius);
  padding:15px 17px;
  display:flex;
  flex-direction:column;
  gap:11px;
  box-shadow:var(--shadow);
}
.confirm[hidden]{ display:none; }
.confirm-text{ margin:0; font-size:16px; font-weight:600; color:var(--text); }
.confirm-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.confirm-actions .ghost{ background:rgba(255,255,255,.85); }
.confirm-actions .primary{ padding:12px 22px; font-size:16px; }

/* ---------------------------------------------------------------- links */

.link-rows{ display:flex; flex-direction:column; gap:9px; }
.link-row{ display:flex; gap:9px; align-items:center; }
.link-row select,
.link-row input{
  background:var(--surface); color:var(--text);
  border:2px solid transparent; border-radius:var(--radius-sm);
  /* 16px floor: Safari zooms the viewport when focusing a smaller control. */
  padding:13px 14px; font:16px/1 inherit; min-width:0;
  box-shadow:var(--shadow);
}
.link-row select:focus,
.link-row input:focus{ outline:none; border-color:var(--accent); }
.link-row input{ flex:1 1 auto; }
.link-row select{ flex:0 0 auto; }
.link-row button{
  appearance:none; border:0; background:transparent; color:var(--muted);
  font-size:24px; line-height:1; padding:4px 8px; cursor:pointer;
}

/* ---------------------------------------------------------------- results */

.results{
  flex:0 0 auto;
  max-width:580px; width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
  padding-bottom:14px;
}

.card{
  background:var(--surface);
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:17px 19px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:border-color .18s, box-shadow .18s;
}
.card.is-open{ border-color:var(--accent); box-shadow:var(--shadow-lift); }

.card-summary{ display:flex; flex-direction:column; gap:8px; }
.card-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Collapsed card leads with the note itself. */
.card-date{
  margin:0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  color:#A9A3C2;
}
.card-summary .card-raw{
  margin:0;
  font-size:18px;
  font-weight:400;
  line-height:1.45;
}

/* Confidence readout: a short bar plus the number, colour-banded. */
.score-row{ display:flex; align-items:center; gap:10px; }
.score-bar{
  flex:1 1 auto;
  height:7px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.score-bar > span{ display:block; height:100%; border-radius:999px; }
.score-bar.high > span{ background:#3FBF8F; }
.score-bar.mid  > span{ background:#F0A868; }
.score-bar.low  > span{ background:#C9A7E8; }

.score-num{
  flex:0 0 auto;
  font-size:13.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  border-radius:999px;
  padding:4px 11px;
}
.score-num.high{ color:#1F6B4E; background:var(--mint); }
.score-num.mid { color:#8A4B12; background:var(--peach); }
.score-num.low { color:#5B3E8A; background:var(--accent-soft); }

/* Pastel chips carry the metadata so the card reads at a glance. */
.chip{
  font-size:13.5px; font-weight:600; color:var(--text);
  border-radius:999px; padding:5px 12px;
  background:var(--accent-soft);
}
.chip.date{ background:var(--sky); }
.chip.place{ background:var(--mint); }
.chip.score{ background:var(--peach); font-variant-numeric:tabular-nums; }

.card-detail{ margin-top:15px; padding-top:15px; border-top:2px solid var(--line); display:none; }
.card.is-open .card-detail{ display:block; }
.card-fields{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:15px; }
.card-fields dt{ color:var(--muted); font-weight:600; }
.card-fields dd{ margin:0; }
.card-links{ margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; }
.card-links a{
  color:var(--accent); text-decoration:none; font-size:14.5px; font-weight:600;
  background:var(--accent-soft); border-radius:999px; padding:9px 16px;
}

.result-cards{ display:flex; flex-direction:column; gap:12px; }

/* Deliberately quiet: the top result is the answer, this is the escape hatch. */
.show-more{
  appearance:none; border:0; cursor:pointer;
  align-self:center;
  margin-top:14px;
  background:transparent;
  color:var(--muted);
  font:600 14.5px/1 inherit;
  padding:10px 16px;
  border-radius:999px;
}
.show-more:active{ background:var(--accent-soft); color:var(--accent); }

.empty{ color:var(--muted); text-align:center; padding:26px 0; font-size:16.5px; }

/* ---------------------------------------------------------------- toast */

.toast{
  position:absolute;
  left:50%; transform:translateX(-50%) translateY(14px);
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  background:var(--text); color:#FFFFFF;
  border-radius:999px;
  padding:13px 22px; font-size:15.5px; font-weight:600;
  box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  max-width:calc(100% - 40px); text-align:center;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- sheet */

.sheet{
  position:absolute; inset:0; z-index:20;
  background:rgba(60, 48, 110, .28);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.sheet[hidden]{ display:none; }
.sheet-inner{
  background:var(--surface);
  border-radius:var(--radius); padding:22px;
  width:100%; max-width:430px;
  display:flex; flex-direction:column; gap:9px;
  box-shadow:var(--shadow-lift);
}
.sheet-inner h2{ margin:0 0 8px; font-size:21px; font-weight:700; }
.sheet-inner label{ color:var(--muted); font-size:14px; font-weight:600; }
.sheet-inner input{
  background:var(--bg); color:var(--text);
  border:2px solid transparent; border-radius:var(--radius-sm);
  padding:13px 14px; font:16px/1.2 inherit; width:100%; /* 16px floor — see .link-row */
}
.sheet-inner input:focus{ outline:none; border-color:var(--accent); }
.sheet-inner .actions{ margin-top:12px; }