/* ============================================================
   Trips — Design System (redesign)
   Mobile-first PWA · light theme · deep-calm-blue accent
   Budget semantics preserved: green=under · amber=≥90% · red=over

   Source: Claude Design handoff bundle
   (docs/handoff/redesign/project/assets/trips.css). Adapted for the
   real app: prototype `.phone` device-frame dropped, Inter @import
   removed (base.html loads Inter via <link>), app-shell width cap
   added at the end so the mobile column centres on wide screens.
   ============================================================ */

/* ---- Tokens ----------------------------------------------- */
:root{
  /* neutrals — cool, calm */
  --bg:#eef1f6;
  --surface:#ffffff;
  --surface-2:#f5f7fb;     /* inset wells, secondary fills */
  --surface-3:#eef1f7;     /* progress tracks, ghost fills */
  --fg:#161b25;
  --muted:#6b7585;
  --faint:#98a1b0;
  --line:#e7eaf1;          /* used sparingly (dividers only) */

  /* primary — deep, calm blue */
  --primary:#2f55c4;
  --primary-600:#264aae;
  --primary-700:#1d3a8c;
  --primary-tint:#e9eefb;
  --primary-tint-2:#dde6f9;
  --primary-ink:#ffffff;

  /* budget semantics (load-bearing) */
  --ok:#1f9c5d;     --ok-tint:#e6f4ec;     --ok-strong:#15824c;
  --warn:#c9851a;   --warn-tint:#f9efdb;   --warn-strong:#a96e10;
  --err:#d6453f;    --err-tint:#fbe8e7;    --err-strong:#b8332e;

  /* elevation */
  --shadow-xs:0 1px 2px rgba(22,27,37,.05);
  --shadow-sm:0 1px 2px rgba(22,27,37,.04), 0 2px 8px -4px rgba(22,27,37,.10);
  --shadow:0 1px 2px rgba(22,27,37,.04), 0 10px 26px -14px rgba(22,27,37,.22);
  --shadow-nav:0 -1px 0 rgba(22,27,37,.04), 0 -10px 30px -18px rgba(22,27,37,.20);

  /* radii */
  --r-xl:24px; --r-lg:18px; --r-md:13px; --r-sm:10px; --r-pill:999px;

  /* spacing rhythm */
  --pad:16px;
}

/* ---- Reset / base ----------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1,'ss01' 1;
  touch-action:manipulation;
}
input,select,textarea{font-size:16px;} /* iOS no-zoom */
button{font-family:inherit;}
/* icon glyphs come from an inlined <use> sprite; fill/stroke are inherited
   CSS props so they cross the <use> shadow boundary (attributes don't). */
body svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}
a{color:inherit;text-decoration:none;}
.tnum{font-variant-numeric:tabular-nums;}

/* ============================================================
   TOP APP BAR
   ============================================================ */
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 12px 0 8px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
}
.appbar .ic-btn{color:var(--fg);}
.appbar-title{
  flex:1;min-width:0;
  font-weight:600;font-size:16px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar-sub{font-size:12px;color:var(--muted);font-weight:450;}

/* scroll body */
.screen{
  flex:1;
  padding:6px var(--pad) 24px;
  display:flex;flex-direction:column;gap:16px;
}

/* page heading block */
.page-head{display:flex;flex-direction:column;gap:3px;padding:6px 2px 2px;}
.page-title{font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.08;}
.page-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;}
.dot{width:3px;height:3px;border-radius:50%;background:var(--faint);}

/* section label / row */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 0;}
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   STATUS PILL  (trip state)
   ============================================================ */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--primary-700);
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);}

/* ============================================================
   CARDS / GROUPED LISTS
   ============================================================ */
.card{
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  padding:16px;
}
.card.tight{padding:14px;}
.card.flush{padding:0;overflow:hidden;}

/* grouped list (iOS-ish, borderless rows divided by hairlines) */
.list{
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.list .row{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.list .row + .row{box-shadow:inset 0 1px 0 var(--line);}
.row-main{flex:1;min-width:0;}
.row-title{font-size:15px;font-weight:550;letter-spacing:-.01em;}
.row-sub{font-size:12.5px;color:var(--muted);margin-top:1px;}
.row-amt{font-size:14px;font-weight:600;letter-spacing:-.01em;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 14px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  border:0;cursor:pointer;transition:background .15s,color .15s,transform .05s;
}
.btn:active{transform:translateY(.5px);}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--primary-600);}
.btn-ghost{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-soft{background:var(--primary-tint);color:var(--primary-700);}
.btn-soft:hover{background:var(--primary-tint-2);}
.btn-sm{height:34px;padding:0 12px;font-size:13px;}
.btn-block{width:100%;}
.btn svg{width:16px;height:16px;}

/* add pill used in section heads */
.btn-add{
  display:inline-flex;align-items:center;gap:5px;
  height:36px;padding:0 13px 0 11px;border-radius:var(--r-pill);
  background:var(--primary-tint);color:var(--primary-700);
  font-size:13.5px;font-weight:600;border:0;cursor:pointer;transition:background .15s;
}
.btn-add:hover{background:var(--primary-tint-2);}
.btn-add svg{width:16px;height:16px;}

/* icon buttons — 44px primary touch target */
.ic-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;
  background:transparent;border:0;cursor:pointer;color:var(--muted);
  transition:background .15s,color .15s;flex-shrink:0;
}
.ic-btn:hover{background:var(--surface-2);color:var(--fg);}
.ic-btn svg{width:20px;height:20px;}
.ic-btn.danger{color:var(--err);}
.ic-btn.danger:hover{background:var(--err-tint);}
.ic-btn.active{color:var(--primary);}
/* compact icon button for dense nested rows — still 40px tall */
.ic-btn.sm{width:40px;height:40px;border-radius:11px;}
.ic-btn.sm svg{width:18px;height:18px;}
.ic-btn:disabled{opacity:.3;cursor:not-allowed;}

/* ============================================================
   BUDGET BAR  (plan / fact) — the signature element
   colour driven by raw ratio; plan threshold marked on track
   ============================================================ */
.budget{display:flex;flex-direction:column;gap:8px;}
.budget-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.budget-amt{font-size:15px;font-weight:600;letter-spacing:-.01em;}
.budget-amt .plan{color:var(--muted);font-weight:500;}
.budget-pct{font-size:12.5px;font-weight:700;letter-spacing:-.01em;}

.bar{position:relative;height:10px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;}
.bar.sm{height:7px;}
.bar-fill{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);transition:width .4s cubic-bezier(.2,.7,.3,1);}
/* plan marker (100% threshold tick) sits on top, outside overflow clip */
.bar-wrap{position:relative;}
.bar-mark{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:2px;background:rgba(22,27,37,.28);}

.is-ok   .bar-fill{background:var(--ok);}
.is-warn .bar-fill{background:var(--warn);}
.is-err  .bar-fill{background:var(--err);}
.is-none .bar-fill{background:var(--faint);}

.budget-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);}
.tag{font-size:12px;font-weight:600;white-space:nowrap;}
.tag.ok{color:var(--ok-strong);}
.tag.warn{color:var(--warn-strong);}
.tag.err{color:var(--err-strong);}

/* budget ring (overview hero). NB: the gauge container is `.ring-gauge`, NOT
   `.ring` — `ring` is a Tailwind utility (Play CDN, loaded in base.html) that
   paints a 3px rgba(59,130,246,.5) box-shadow. On the bare-`.ring` element that
   showed as a square around the SVG canvas (bug #3); renaming dodges the clash. */
.ring-wrap{display:flex;align-items:center;gap:18px;}
.ring-gauge{position:relative;width:104px;height:104px;flex-shrink:0;}
.ring-gauge svg{transform:rotate(-90deg);}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-pct{font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.ring-cap{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px;}

/* overview-only bits (ring side, stat tiles, first-stage row) */
.page-meta svg{width:14px;height:14px;color:var(--faint);}
.page-desc{margin:8px 2px 0;font-size:14.5px;line-height:1.5;color:var(--fg);}
.ring-card .eyebrow{margin-bottom:14px;}
.ring-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.ring-amt{font-size:21px;font-weight:700;letter-spacing:-.02em;}
.ring-plan{font-size:13px;color:var(--muted);}
.ring-note{font-size:12px;color:var(--muted);}
.ring-empty{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--fg);}
.ring-empty-cta{color:var(--primary);font-weight:600;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat{display:flex;flex-direction:column;gap:7px;}
.stat svg{width:19px;height:19px;color:var(--primary);}
.stat-num{font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.stat-cap{font-size:12px;color:var(--muted);font-weight:500;}
.sec-link{font-size:13px;font-weight:600;color:var(--primary-700);}
.first-stage{display:flex;align-items:center;gap:13px;}
.first-stage svg{width:18px;height:18px;color:var(--faint);flex-shrink:0;}
.first-stage-main{flex:1;min-width:0;}
.first-stage-title{font-size:15.5px;font-weight:650;letter-spacing:-.01em;}
.first-stage-meta{font-size:12.5px;color:var(--muted);margin-top:1px;}
.first-stage-spend{color:var(--fg);font-weight:600;}

/* ============================================================
   CATEGORY CARD (budget tab)
   ============================================================ */
.cat{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:15px 16px;display:flex;flex-direction:column;gap:11px;}
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cat-name{font-size:15px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;}
.cat-ico{display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted);}
.cat-ico svg{width:16px;height:16px;}
.cat-amt{font-size:13px;color:var(--muted);font-weight:500;}
.cat-lines{display:flex;flex-direction:column;}
.cat-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;}
.cat-line + .cat-line{box-shadow:inset 0 1px 0 var(--line);}
.cat-line .nm{font-size:14px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-line .vals{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cat-line .v{font-size:13px;font-weight:600;letter-spacing:-.01em;}
.cat-line .v.muted{color:var(--muted);font-weight:500;}

/* editable expense row (BUD-5) — replaces read-only .cat-line for owner/editor.
   Outer-HTML-swapped in isolation, so the divider is a self-contained top
   hairline (can't use .x + .x); suppressed on the first row by the parent rule. */
.ex{display:flex;flex-direction:column;gap:7px;padding:11px 0;box-shadow:inset 0 1px 0 var(--line);}
.cat-lines > .ex:first-child{box-shadow:none;}
.ex-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ex-title{font-size:14px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ex-actions{display:flex;gap:2px;flex-shrink:0;margin-right:-6px;}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ex-amt{display:flex;flex-direction:column;gap:4px;}
.ex-amt label,.ex-amt .lbl{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.ex-amt .ro{font-size:14px;font-weight:600;color:var(--fg);padding:2px 0;}
.ex-amt .from-bk{font-size:11px;color:var(--muted);}
.ex-input{width:100%;font-size:15px;font-weight:600;color:var(--fg);background:var(--surface-2);
  border:1.5px solid transparent;border-radius:var(--r-sm);padding:7px 9px;outline:none;
  transition:border-color .15s,background .15s;}
.ex-input:focus{border-color:var(--primary);background:var(--surface);}
.ex-err{font-size:12px;font-weight:600;color:var(--err-strong);}
.ex-delta{font-size:12px;font-weight:600;}
.ex-delta.ok{color:var(--ok-strong);}
.ex-delta.err{color:var(--err-strong);}

/* ============================================================
   ICON WELL  (booking type leading icon)
   ============================================================ */
.well{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--surface-2);color:var(--primary);flex-shrink:0;}
.well svg{width:19px;height:19px;}
.well.sm{width:30px;height:30px;border-radius:9px;}
.well.sm svg{width:16px;height:16px;}
.well.ghost{color:var(--muted);}

/* ============================================================
   BADGES (booking status)
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.ok{color:var(--ok-strong);background:var(--ok-tint);}
.badge.warn{color:var(--warn-strong);background:var(--warn-tint);}
.badge.neutral{color:var(--muted);background:var(--surface-2);}

/* ============================================================
   BOOKING CARD  (expenses tab) + ATTACHMENT PILLS
   ============================================================ */
.bk{display:flex;flex-direction:column;gap:11px;}
.bk-top{display:flex;align-items:flex-start;gap:12px;}
.bk-title{font-size:15px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-sub{font-size:12.5px;color:var(--muted);margin-top:1px;}
.bk-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);}
.bk-meta span{display:inline-flex;align-items:center;gap:6px;}
.bk-meta svg{width:14px;height:14px;color:var(--faint);}
.bk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.bk-amt{font-size:18px;font-weight:700;letter-spacing:-.02em;}
.bk-url{display:block;font-size:12.5px;color:var(--primary-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.attach-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.attach{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 8px 0 11px;border-radius:var(--r-pill);background:var(--surface-2);font-size:12.5px;font-weight:550;color:var(--fg);max-width:100%;}
.attach .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.attach svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.attach .x{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:0;background:transparent;color:var(--faint);cursor:pointer;flex-shrink:0;}
.attach .x:hover{background:var(--err-tint);color:var(--err);}
.attach .x svg{width:13px;height:13px;color:currentColor;}
.attach-add{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 11px;border-radius:var(--r-pill);
  background:transparent;border:1.5px dashed color-mix(in srgb,var(--muted) 36%,transparent);
  color:var(--primary-700);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;}
.attach-add:hover{background:var(--primary-tint);border-color:transparent;}
.attach-add svg{width:15px;height:15px;}

/* collapsed attachments chip (booking card) */
/* No display here: .attach-chip on the same <summary> sets inline-flex, but a
   `.bk-attach summary` (0,1,1) display would outrank `.attach-chip` (0,1,0) and
   leave the summary inline-block — then Tailwind CDN Preflight's svg{display:block}
   drops the paperclip onto its own line above the text. Let .attach-chip win. */
.bk-attach summary{list-style:none;cursor:pointer;}
.bk-attach summary::-webkit-details-marker{display:none;}
.attach-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);
  font-size:12.5px;font-weight:600;}
.attach-chip svg{width:15px;height:15px;flex-shrink:0;}
.bk-attach[open] summary{margin-bottom:10px;}

/* ============================================================
   STAGE TIMELINE
   ============================================================ */
.timeline{display:flex;flex-direction:column;gap:14px;}
.stage{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;}
.stage-head{display:flex;align-items:flex-start;gap:12px;padding:15px 12px 14px 16px;}
.stage-idx{
  flex-shrink:0;width:26px;height:26px;border-radius:9px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-tint);color:var(--primary-700);
  font-size:13px;font-weight:700;
}
.stage-body{flex:1;min-width:0;}
.stage-name{font-size:16px;font-weight:650;letter-spacing:-.015em;}
.stage-place{font-size:12.5px;color:var(--muted);margin-top:1px;}
.stage-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-top:7px;font-size:12.5px;color:var(--muted);}
.stage-meta .strong{color:var(--fg);font-weight:600;}
.stage-substrip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px 13px 54px;font-size:12.5px;color:var(--muted);}
.stage-substrip .dot{display:inline-block;vertical-align:middle;margin:0 3px;}
.stage-substrip span,.stage-substrip b{vertical-align:middle;}
.stage-substrip b{color:var(--fg);font-weight:600;}
.stage-actions{display:flex;align-items:center;gap:1px;flex-shrink:0;margin:-2px -6px 0 2px;}
.stage-actions .ic-btn{width:34px;height:34px;border-radius:10px;}
.stage-actions .ic-btn svg{width:17px;height:17px;}
.stage-items{box-shadow:inset 0 1px 0 var(--line);}
.sitem{display:flex;align-items:center;gap:11px;padding:10px 16px;}
.sitem + .sitem{box-shadow:inset 0 1px 0 var(--line);}
.sitem .nm{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sitem .nm .t2{font-size:12px;color:var(--muted);}
.sitem .amt{font-size:13px;font-weight:600;flex-shrink:0;}
.sitem .lk{color:var(--primary);}
.stage-foot{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;box-shadow:inset 0 1px 0 var(--line);}
.chip-add{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--primary-700);font-size:12.5px;font-weight:600;border:0;cursor:pointer;}
.chip-add:hover{background:var(--primary-tint);}
.chip-add svg{width:14px;height:14px;}
/* app-only stage extensions (no prototype counterpart): date suggestions + empty hint */
.stage-foot .hint{font-size:12.5px;color:var(--muted);margin-right:auto;align-self:center;}
.stage-suggest{background:var(--surface-2);box-shadow:inset 0 1px 0 var(--line);}
.stage-suggest .nm{color:var(--muted);}
.bucket-hint{padding:9px 16px;font-size:12px;color:var(--muted);box-shadow:inset 0 1px 0 var(--line);}

/* "unstaged" bucket */
.bucket{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;}
.bucket-head{display:flex;align-items:center;gap:9px;padding:12px 16px;box-shadow:inset 0 -1px 0 var(--line);}
.bucket-head .nm{font-size:14px;font-weight:600;}
.bucket-head .ct{font-size:12px;color:var(--muted);}

/* ============================================================
   NOTE ROW
   ============================================================ */
.note{display:flex;align-items:flex-start;gap:12px;padding:14px 12px 14px 16px;}
.note + .note{box-shadow:inset 0 1px 0 var(--line);}
.note-text{flex:1;min-width:0;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.note.pinned{background:color-mix(in srgb,var(--primary-tint) 60%,var(--surface));}
.note-actions{display:flex;align-items:center;gap:0;flex-shrink:0;margin:-4px -6px 0 0;}
.note-actions .ic-btn{width:36px;height:36px;border-radius:10px;}
.note-actions .ic-btn svg{width:17px;height:17px;}
/* stage tag on a note (prototype-inline) */
.stagetag{display:inline-flex;align-items:center;gap:5px;margin-top:8px;height:24px;
  padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--surface-2);
  font-size:11.5px;font-weight:600;color:var(--muted);width:max-content;}
.stagetag svg{width:13px;height:13px;color:var(--faint);}

/* ============================================================
   MEMBER ROW
   ============================================================ */
.member{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;}
.member + .member{box-shadow:inset 0 1px 0 var(--line);}
.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:650;color:var(--primary-700);background:var(--primary-tint);}
.member-main{flex:1;min-width:0;}
.member-name{font-size:15px;font-weight:550;}
/* font-size:13px!important — the global anti-zoom rule (base.html) forces every
   <select> to 16px, which here made the role pill larger than the member name;
   a <select> opens a native picker and never triggers iOS focus-zoom, so the
   override is safe. */
.role-select{height:36px;border:0;border-radius:var(--r-pill);background:var(--surface-2);color:var(--fg);font-size:13px!important;font-weight:550;padding:0 30px 0 12px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7585' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;}
/* avatar role tints */
.avatar.editor{color:var(--ok-strong);background:var(--ok-tint);}
.avatar.viewer{color:var(--warn-strong);background:var(--warn-tint);}

/* ============================================================
   INVITE ROW  (members tab, owner-only)
   ============================================================ */
.invite{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;}
.invite + .invite{box-shadow:inset 0 1px 0 var(--line);}
.invite-main{flex:1;min-width:0;}
.invite-link{font-size:13.5px;font-weight:600;color:var(--primary-700);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.invite-sub{font-size:12px;color:var(--muted);margin-top:1px;}

/* ============================================================
   FORMS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--fg);}
.field .hint{font-size:12px;color:var(--muted);}
.input,.select,.textarea{
  width:100%;font-size:16px;font-weight:450;color:var(--fg);
  background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-md);
  padding:11px 13px;outline:none;transition:border-color .15s,background .15s;
}
.input::placeholder,.textarea::placeholder{color:var(--faint);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);background:var(--surface);}
.select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7585' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
/* minmax(0,1fr) (not bare 1fr, whose implicit min is auto) + min-width:0 let the
   columns shrink. overflow:hidden is the load-bearing part on iOS: WebKit treats a
   native <select> as a replaced element whose intrinsic width (the selected option's
   text) it does NOT clamp to the grid item's min-width:0 — so a long «Статья расхода»
   blew the card out into a horizontal scroll. overflow:hidden gives the item a BFC
   that caps it to the track and clips the select; the native picker is unaffected
   (it renders outside the DOM). Blink doesn't need this (it honours min-width:0). */
.field-row>*{min-width:0;overflow:hidden;}
.input,.select,.textarea{min-width:0;}
.req{color:var(--err);}

/* segmented control (type picker etc.) */
.seg{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--r-md);padding:4px;}
.seg button{flex:1;height:38px;border:0;background:transparent;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s;}
.seg button.on{background:var(--surface);color:var(--primary-700);box-shadow:var(--shadow-xs);}
.seg button svg{width:16px;height:16px;}

/* scrollable chip picker (booking "type" selector) — many options, one row */
.seg-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.seg-scroll::-webkit-scrollbar{display:none;}
.seg-chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--muted);font-size:13.5px;font-weight:600;border:0;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.seg-chip svg{width:16px;height:16px;}
.seg-chip.on{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);}

/* ============================================================
   BOTTOM TAB BAR  (6 tabs, icon + label, ≥44px targets)
   ============================================================ */
.tabbar{
  position:sticky;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(6,1fr);
  /* OPAQUE background (not a translucent color-mix): iOS Safari tints its bottom
     toolbar / home-indicator zone by sampling the SOLID background-color of the
     element at the viewport bottom. A translucent bar leaves that zone the grey
     page colour. padding-bottom carries this colour into the safe-area strip.
     Trade-off: no frosted see-through — needed for the bottom chrome to match. */
  background:var(--surface);
  box-shadow:var(--shadow-nav);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:50px;padding:5px 0 4px;border:0;background:transparent;cursor:pointer;
  color:var(--faint);transition:color .15s;border-radius:12px;
}
.tab svg{width:23px;height:23px;stroke-width:1.9;}
.tab .lbl{font-size:10px;font-weight:600;letter-spacing:-.01em;}
.tab.on{color:var(--primary);}
.tab.on .lbl{color:var(--primary-700);}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 16px;color:var(--muted);}
.empty svg{width:34px;height:34px;color:var(--faint);}
.empty .t{font-size:14px;}

/* ============================================================
   RESPONSIVE — desktop / wide viewport (real app, not the artboard)
   Mobile: full-bleed single column. ≥880px: bottom tabs become a left
   sidebar, content centres, Budget/Expenses lists go 2-up (.grid2).
   Adapted from the redesign-desktop bundle — the prototype's .phone
   device-frame (390px + overflow:hidden) is intentionally NOT used.
   ============================================================ */
.trip-shell{display:flex;flex-direction:column;flex:1;min-width:0;}
.appwrap{display:flex;flex-direction:column;flex:1;min-width:0;}
/* group wrapper: stacked on mobile, 2-up on desktop */
.grid2{display:flex;flex-direction:column;gap:16px;}
.grid2>*{min-width:0;}

@media (min-width:880px){
  body:has(.trip-shell){background:var(--surface-2);}
  .trip-shell{
    flex-direction:row;
    width:100%;max-width:1200px;min-height:100vh;margin:0 auto;
    background:var(--bg);box-shadow:0 0 0 1px var(--line);
  }
  /* bottom tab bar becomes a vertical sidebar */
  .trip-shell .tabbar{
    position:sticky;top:0;align-self:flex-start;order:-1;
    width:250px;height:100vh;flex-shrink:0;
    display:flex;flex-direction:column;gap:4px;grid-template-columns:none;
    padding:22px 14px;background:var(--surface);
    box-shadow:inset -1px 0 0 var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .trip-shell .tabbar::before{
    content:"Trips";font-size:17px;font-weight:700;letter-spacing:-.02em;
    color:var(--fg);padding:6px 12px 16px;
  }
  .trip-shell .tab{
    flex-direction:row;justify-content:flex-start;gap:13px;
    width:100%;min-height:46px;height:46px;padding:0 14px;border-radius:12px;color:var(--muted);
  }
  .trip-shell .tab svg{width:21px;height:21px;}
  .trip-shell .tab .lbl{font-size:14px;font-weight:600;letter-spacing:-.01em;}
  .trip-shell .tab:hover{background:var(--surface-2);color:var(--fg);}
  .trip-shell .tab.on{background:var(--primary-tint);color:var(--primary);}
  .trip-shell .tab.on .lbl{color:var(--primary-700);}

  .trip-shell .appwrap{min-height:100vh;}
  .trip-shell .appbar{height:64px;padding:0 28px;}
  /* keep the back arrow visible on desktop — the sidebar brand isn't a link,
     so it stays the route back to the trips list (deviates from the prototype). */

  .trip-shell .screen{
    max-width:840px;width:100%;margin:0 auto;
    padding:18px 32px 56px;gap:18px;
  }
  .trip-shell .page-title{font-size:28px;}
  .trip-shell .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
}

/* ============================================================
   ADD-ELEMENT WINDOW  (one markup · two presentations)
   · mobile  → bottom sheet docked to the viewport bottom
   · desktop → centered modal over the dimmed app shell
   Same .addwin partial is the sheet when narrow and the modal
   when wide (≥880px — the same breakpoint as the desktop layout).
   Ported from the Claude Design bundle; the prototype's
   position:absolute (inside a .phone frame) becomes position:fixed
   here so it floats over the real viewport.
   ============================================================ */
.addwin{position:fixed;inset:0;z-index:40;}
.addwin-scrim{position:absolute;inset:0;background:rgba(22,27,37,.40);opacity:0;transition:opacity .26s ease;}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .addwin-scrim{background:rgba(22,27,37,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
}
/* prevent the page behind the sheet/modal from scrolling */
body.addwin-open{overflow:hidden;}

/* the window surface — shared between sheet & modal */
.addwin-card{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;gap:15px;
  background:var(--surface);
  border-radius:26px 26px 0 0;
  box-shadow:0 -14px 44px -18px rgba(22,27,37,.5);
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:93%;
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
/* enter/leave: JS toggles .show on .addwin one frame after the swap (open) and
   removes it before clearing the host (close); a downward swipe sets an inline
   transform that, once released, snaps back to translateY(0) via this transition. */
.addwin.show .addwin-scrim{opacity:1;}
.addwin.show .addwin-card{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .addwin-scrim,.addwin-card{transition:none;}
}
.addwin-grab{width:38px;height:5px;border-radius:99px;background:var(--surface-3);margin:2px auto 1px;flex-shrink:0;}

.addwin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;}
.addwin-eyebrow{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.addwin-eyebrow svg{width:13px;height:13px;}
.addwin-title{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.08;}
.addwin-x{flex-shrink:0;margin:-4px -6px 0 0;}

/* scroll region keeps long forms inside the sheet / modal */
.addwin-body{display:flex;flex-direction:column;gap:15px;flex:1 1 auto;min-height:0;overflow-y:auto;padding:1px;margin:-1px;scrollbar-width:none;}
.addwin-body::-webkit-scrollbar{display:none;}

.addwin-foot{display:flex;gap:10px;flex-shrink:0;padding-top:2px;}

/* type picker — wrapping chips (room to breathe on both sizes) */
.type-grid{display:flex;flex-wrap:wrap;gap:7px;}
.type-chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--muted);font-size:13.5px;font-weight:600;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
.type-chip svg{width:16px;height:16px;}
.type-chip:hover{color:var(--fg);}
.type-chip.on{background:var(--primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm);}

/* a labelled toggle row (e.g. «Закрепить заметку») — the switch is a native
   checkbox styled via appearance:none so the value submits without JS. */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border-radius:var(--r-md);padding:11px 14px;}
.toggle-row .tr-main{min-width:0;}
.toggle-row .tr-title{font-size:14px;font-weight:600;}
.toggle-row .tr-sub{font-size:12px;color:var(--muted);margin-top:1px;}
.switch{appearance:none;-webkit-appearance:none;position:relative;width:44px;height:26px;border-radius:99px;background:var(--surface-3);border:0;cursor:pointer;flex-shrink:0;margin:0;transition:background .18s;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .18s;}
.switch:checked{background:var(--primary);}
.switch:checked::after{transform:translateX(18px);}

.addwin-hint{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--muted);}
.addwin-hint svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--faint);}

/* iOS Safari renders date/datetime-local with a UA-forced display:inline-flex
   whose shadow-DOM (spinner fields) carries an intrinsic max-content width — under
   the ru locale («9 авг. 2026 г., 07:35») that width IGNORES width:100%/min-width:0
   (and even -webkit-min-logical-width:0, which only drops the element's own CSS
   min-width, not the shadow-DOM flex layout) and overflows the card. The fix is
   -webkit-appearance:none: it removes the UA control rendering (incl. the forced
   inline-flex), after which width:100%/min-width:0 are honoured. The native picker
   still opens on tap (type is unchanged).
   We deliberately DON'T add a custom calendar glyph: on desktop the native
   ::-webkit-calendar-picker-indicator survives appearance:none, so a background
   SVG would render a SECOND icon; iOS shows no glyph but opens the picker on tap.
   min-height keeps an empty field from collapsing once appearance:none drops its
   intrinsic height (also matches the .input control height / a11y tap target). */
input[type="date"],input[type="datetime-local"]{
  -webkit-appearance:none;appearance:none;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  -webkit-min-logical-width:0;min-height:44px;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value{
  min-width:0;width:100%;text-align:left;margin:0;
}
/* appearance:none can leave extra vertical padding inside the field on iOS — zero it */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit{padding:0;}

/* Date/datetime pairs (.row-dates): native iOS date / datetime-local pickers
   keep an intrinsic width under the ru locale («9 авг. 2026 г., 07:35») and won't
   shrink to a half-column even with min-width:0 — they overflow their column.
   Stack them on any phone; the desktop modal (≥880px) has room for two columns.
   Not scoped to .addwin — also used by the inline invite form on Members. */
@media (max-width:879px){
  .field-row.row-dates{grid-template-columns:1fr;}
}
/* narrow phones: stack every paired column so nothing overflows */
@media (max-width:360px){
  .addwin .field-row{grid-template-columns:1fr;}
}

/* DESKTOP: bottom sheet → centered modal over the shell */
@media (min-width:880px){
  .addwin{display:flex;align-items:center;justify-content:center;padding:48px;}
  .addwin-card{
    position:relative;left:auto;right:auto;bottom:auto;
    width:var(--addwin-w,560px);max-width:100%;max-height:calc(100% - 56px);
    border-radius:var(--r-xl);
    box-shadow:0 38px 90px -28px rgba(22,27,37,.6),0 0 0 1px rgba(22,27,37,.05);
    padding:24px 26px 22px;gap:18px;
    /* centered modal: fade + slight scale instead of the mobile slide-up */
    transform:scale(.96);opacity:0;transition:transform .24s ease,opacity .24s ease;
  }
  .addwin.show .addwin-card{transform:scale(1);opacity:1;}
  .addwin-grab{display:none;}
  .addwin-title{font-size:22px;}
  .addwin-foot{justify-content:flex-end;}
  .addwin-foot .btn{height:42px;padding:0 22px;flex:0 0 auto !important;}
}
@media (max-width:879px){
  .addwin-x{display:none;}
}

/* ============================================================
   FOCUS / TAP-HIGHLIGHT — drop the grey mobile tap-flash on the
   interactive cards and give keyboard users an accessible rounded
   focus ring. (Bug #3 — the square around the Overview ring — was a
   separate issue: a Tailwind `.ring` utility collision, fixed by the
   .ring → .ring-gauge rename above, not here.)
   ============================================================ */
a{-webkit-tap-highlight-color:transparent;}
.card.ring-card:focus,.card.stat:focus{outline:none;}
.card.ring-card:focus-visible,.card.stat:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-xl);
}