/* Friends page — layers on dashboard.css and uses its tokens only: 8px grid,
   cards = --r-lg + --shadow, chips = 12px text / 4×12 pill, inputs = 10px radius
   8×12 on --bg-sunken, headings Unbounded 16/600 −0.01em, meta 13. */

.fr-page { padding: 24px var(--pad-x) 48px; }
.fr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fr-head h2, .fr-head h3, .fr-form-title {
  font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.fr-hint { color: var(--text-soft); font-size: 13px; margin: 8px 0 0; }

/* Friend list */
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fr-item { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; cursor: pointer; color: var(--text); box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s; }
.fr-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.fr-item-main { flex: 1; min-width: 0; }
.fr-item-name { display: block; font-size: 16px; font-weight: 600; }
.fr-item-sub { display: block; color: var(--text-soft); font-size: 13px; margin-top: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-item-count { color: var(--text-soft); font-size: 13px; white-space: nowrap; }

.fr-back { background: none; border: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-soft); cursor: pointer; padding: 0; margin-bottom: 16px; }
.fr-back:hover { color: var(--text); }

/* Friend details — collapsible card. Collapsed, the header reads just the name. */
.fr-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); }
.fr-form-head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px;
  background: none; border: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.fr-form-title { flex: 1; }
.fr-form-title > span { grid-area: 1 / 1; transition: opacity .15s ease, transform .15s ease; }
/* Collapsed, the line still reads "Friend details" — the name sits beside it
   in lighter text, so it's clear only the details panel folded away. */
.fr-form-title { display: flex; align-items: baseline; gap: 16px; }
.fr-form-title > span { grid-area: auto; }
.fr-title-closed { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-soft);
  letter-spacing: 0; opacity: 0; transition: opacity .15s ease; }
.fr-form.is-collapsed .fr-title-closed { opacity: 1; }
.fr-chev { flex: 0 0 auto; color: var(--text-faint); transform: rotate(180deg); transition: transform .15s ease; }
.fr-form.is-collapsed .fr-form-head .fr-chev, .fr-guide-group.is-collapsed .fr-chev { transform: none; }
.fr-form-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.fr-form.is-collapsed .fr-form-body { grid-template-rows: 0fr; }
.fr-form-inner { overflow: hidden; min-height: 0; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 24px; row-gap: 32px; align-items: start; padding: 0 24px 24px; }
.fr-wide { grid-column: 1 / -1; }
.fr-form.is-collapsed .fr-form-inner { padding-bottom: 0; visibility: hidden; transition: visibility 0s .2s, padding .2s; }

.fr-field { display: grid; gap: 8px; }
.fr-field > span { font-size: 14px; font-weight: 600; }
.fr-optional { font-style: normal; font-weight: 400; color: var(--text-faint); margin-left: 8px; }
.fr-field textarea { font: inherit; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 16px; resize: vertical; min-height: 96px; }
.fr-field textarea:focus { outline: none; border-color: var(--accent); }
.fr-field input[type="text"] {
  font: inherit; font-size: 15px; color: var(--text); background: var(--bg-sunken); height: var(--ctl-h);
  border: 1px solid var(--border); border-radius: 10px; padding: 0 16px; min-width: 0; width: 100%; box-sizing: border-box; }
.fr-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; }
.fr-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-soft); }

/* Chips + pickable category pills, both on the chip token */
.fr-chips, .fr-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-chips:empty { display: none; }
.fr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 4px 12px; }
.fr-chip button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-size: 12px; line-height: 1; opacity: .7; }
.fr-chip button:hover { opacity: 1; }
.fr-pick button { font: inherit; font-size: 12px; font-weight: 500; color: var(--text-soft);
  background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 4px 12px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.fr-pick button:hover { color: var(--text); border-color: var(--border-strong); }
.fr-pick button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

.fr-form-foot { display: flex; align-items: center; gap: 16px; }
.fr-saved { flex: 1; color: var(--text-soft); font-size: 13px; text-align: right; }

/* Events + guide entries */
.fr-events { margin-top: 32px; }
.fr-events-head { align-items: center; }
.fr-events-title { flex: 1 1 auto; }
/* Presets, dates and copy share one row; they only wrap when there's no room. */
.fr-range { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fr-custom { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 13px; }
.btn-square { width: var(--ctl-h); padding: 0; }
.fr-dash { display: block; width: 100%; min-height: 480px; border: 0; margin-top: 8px; }
.fr-dash[hidden] { display: none; }

/* Date fields + calendar popover — the app's own, never the browser's picker */
.fr-custom { position: relative; }
.fr-date { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 0 16px;
  font: inherit; font-size: 14px; color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.fr-date svg { color: var(--text-faint); }
.fr-date:hover { border-color: var(--border-strong); }
.fr-date[aria-expanded="true"] { border-color: var(--accent); }
.fr-cal { position: fixed; z-index: 50; width: 288px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.fr-cal[hidden] { display: none; }
.fr-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fr-cal-head b { font-size: 14px; font-weight: 600; }
.fr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; }
.fr-cal-grid i { font-style: normal; font-size: 12px; color: var(--text-faint); height: 32px; line-height: 32px; }
.fr-cal-grid button { height: 32px; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0;
  border-radius: var(--r-pill); cursor: pointer; }
.fr-cal-grid button:hover { background: var(--bg-sunken); }
.fr-cal-grid button.is-today { color: var(--accent); font-weight: 600; }
.fr-cal-grid button.is-sel { background: var(--accent); color: #fff; }

/* City suggestions — the app's menu, never the browser's datalist */
.fr-suggest { position: relative; flex: 1; display: flex; }
.fr-suggest input { flex: 1; }
.fr-menu { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 8px;
  list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); max-height: 320px; overflow: auto; }
.fr-menu[hidden] { display: none; }
.fr-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--text);
  background: none; border: 0; border-radius: var(--r-md); padding: 8px 16px; cursor: pointer; }
.fr-menu button:hover, .fr-menu button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.fr-ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fr-ev-list:empty { display: none; }
.fr-ev { position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 56px 16px 16px; }
.fr-ev-when { color: var(--accent); font-size: 13px; font-weight: 600; }
.fr-ev-name { font-size: 16px; font-weight: 600; margin-top: 4px; }
.fr-ev-name a { color: inherit; text-decoration: none; }
.fr-ev-name a:hover { color: var(--accent); }
.fr-ev-meta { color: var(--text-soft); font-size: 13px; margin-top: 8px; }
.fr-ev-desc { color: var(--text); font-size: 15px; line-height: 1.5; margin: 8px 0 0; }
.fr-ev .card-copy { position: absolute; top: 16px; right: 16px; opacity: 1; }

.fr-guide { margin: 24px 0 32px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fr-head h3 { font-size: 15px; }
/* Guide sections nest under the friend's events: smaller headings, collapsible */
.fr-guide-group { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); }
.fr-group-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; }
.fr-group-toggle { flex: 1; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 8px;
  background: none; border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; border-radius: var(--r-md); }
.fr-group-text { flex: 1; min-width: 0; }
.fr-group-text h4 { margin: 0; font-size: 14px; font-weight: 600; }
.fr-group-text .fr-hint { display: block; }
.fr-group-count { color: var(--text-faint); font-weight: 500; margin-left: 4px; }
.fr-group-body { padding: 0 16px 16px; }
.fr-guide-group.is-collapsed .fr-group-body { display: none; }
.fr-group-body .fr-ev { box-shadow: none; background: var(--bg); }

/* Empty list: the message sits in the middle of the page, not under the header. */
#listView.is-empty { min-height: calc(100vh - 240px); display: flex; flex-direction: column; }
#listView.is-empty .fr-list { display: grid; }
#listView.is-empty .empty-note { flex: 1; display: flex; align-items: center; justify-content: center;
  max-width: 400px; margin: 0 auto; font-size: 15px; }

.toast { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 600;
  background: var(--text); color: #fff; border-radius: var(--r-md); padding: 8px 16px; box-shadow: var(--shadow); }
.toast[hidden] { display: none; }

@media (max-width: 720px) {
  .fr-form-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fr-form-head { padding: 16px; }
  .fr-form-inner { padding: 0 16px 16px; }
  .fr-range, .fr-range-row { align-items: stretch; width: 100%; }
  .fr-range-row .btn { flex: 1 1 100%; }
  .fr-item-count { display: none; }
}
.fr-field > .fr-hint { margin: 0; }
.fr-field-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fr-field-head > span { font-size: 14px; font-weight: 600; }
.fr-item-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fr-chip-static { pointer-events: none; }
.fr-chip.is-excluded { background: var(--bg-sunken); color: var(--text-soft); text-decoration: line-through; }
.fr-chip.is-brave { background: var(--rel-bg); color: var(--rel); }
#braveShare .seg-btn:disabled { opacity: .4; cursor: default; }

/* Trips */
.fr-trips { display: grid; gap: 8px; }
.fr-trips:empty { display: none; }
/* Every trip row is the same grid, so start dates, end dates and Remove line up
   down the list whatever the areas column holds. */
.fr-trip { display: grid; grid-template-columns: minmax(0, 1fr) 192px 16px 192px auto; gap: 8px; align-items: start; }
.fr-trip .fr-date { width: 100%; justify-content: flex-start; }
.fr-trip-dash { height: var(--ctl-h); display: flex; align-items: center; justify-content: center; color: var(--text-soft); }
.fr-trip-areas { display: grid; gap: 8px; min-width: 0; }
.fr-trip .fr-trip-city { flex: 1 1 200px; font: inherit; font-size: 15px; color: var(--text); background: var(--bg-sunken);
  height: var(--ctl-h); border: 1px solid var(--border); border-radius: 10px; padding: 0 16px; min-width: 0; }
.fr-trip .fr-trip-city:focus { outline: none; border-color: var(--accent); }
.fr-chip.is-trip { background: var(--free-bg); color: var(--free); }
.fr-you { font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 4px 12px; margin-left: 8px; vertical-align: middle; }
.fr-item-me { border-style: dashed; box-shadow: none; }
/* Your own profile: accent-tinted so it never reads as one of your friends */
.fr-item.is-me { background: var(--accent-soft); border-color: var(--accent); }
#detailView.is-me .fr-form { border-color: var(--accent); }
.fr-dash.is-full { position: fixed; inset: 0; width: 100vw; height: 100vh !important; margin: 0; z-index: 700; background: var(--bg); }
.fr-trip-city-wrap { flex: 1 1 200px; }
.fr-trip-city-wrap .fr-trip-city { width: 100%; }
.fr-field[hidden] { display: none; }

@media (max-width: 720px) {
  .fr-trip { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
  .fr-trip-areas, .fr-trip [data-remove-trip] { grid-column: 1 / -1; }
}